/* The Arcade page: the site's look around the app's own neon game cabinet (games.css) */
:root { --orange: #ff7a45; }   /* the app's button colour, used by Play again */
html.gm-open { overflow: hidden; }
.gm { z-index: 70; font-family: system-ui, sans-serif; }

.arcade { padding: 0 var(--m) var(--gap); }
.arc-hero {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 96px);
}
.arc-lead { margin-top: 24px; font-size: var(--step-lead); line-height: 1.25; max-width: 26ch; }
.arc-dare {
  margin-top: 32px; padding: 20px 24px; border-radius: 20px;
  background: var(--accent); color: var(--accent-ink);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
}
.arc-dare[hidden] { display: none; }
.arc-dare-text { font-weight: 600; max-width: 34ch; }
.arc-dare .btn { background: var(--accent-ink); color: var(--accent); }

.arc-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.arc-card { background: var(--surface); border-radius: 28px; padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.arc-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 5px solid var(--accent); }
.arc-card h2 { font-size: var(--step-lead); line-height: 1.1; }
.arc-best { margin-top: auto; font-weight: 700; color: var(--accent); }
.arc-card .btn { align-self: flex-start; }

.arc-note { margin-top: clamp(64px, 8vw, 120px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.arc-note p { max-width: 52ch; }
.arc-foot-links { display: flex; gap: 24px; }

/* the dare comes up over the game */
.arc-dare-btn { flex: none !important; background: var(--accent) !important; color: var(--accent-ink) !important; box-shadow: 0 4px 0 #6f9a3a !important; }
.dare {
  border: 0; border-radius: 24px; padding: 32px 28px 24px; width: min(92vw, 30rem);
  background: var(--paper); color: var(--paper-ink); font-family: "Jost", system-ui, sans-serif;
}
.dare::backdrop { background: rgba(11, 8, 32, .72); }
.dare h2 { font-size: var(--step-lead); line-height: 1.1; padding-right: 40px; }
.dare-msg { margin: 16px 0 20px; padding: 14px 16px; border-radius: 14px; background: var(--paper-2); overflow-wrap: anywhere; }
.dare label { display: block; font-weight: 600; margin-bottom: 8px; }
.dare-row { display: flex; gap: 8px; }
.dare-row input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; border: 2px solid var(--paper-ink); border-radius: 999px;
  font: inherit; color: var(--paper-ink); background: var(--paper);
}
.dare-row input:focus-visible { outline-color: var(--paper-ink); }
.dare-err { min-height: 1.5em; margin-top: 6px; font-size: var(--step-small); color: #a3201a; }
.dare-more { display: flex; flex-wrap: wrap; gap: 8px; }
.dare-more button {
  min-height: 44px; padding: 0 16px; border: 2px solid var(--paper-ink); border-radius: 999px;
  background: none; color: var(--paper-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.dare-more button:hover { background: var(--paper-2); }
.dare-more button[hidden] { display: none; }
.dare-small { margin-top: 16px; font-size: var(--step-small); }
.dare-x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--paper-ink); font-size: 18px; cursor: pointer; }
.dare :focus-visible { outline-color: var(--paper-ink); }

@media (max-width: 900px) {
  .arc-hero { grid-template-columns: 1fr; }
  .arc-games { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dare { padding: 28px 18px 20px; }
}