/* ==========================================================================
   Beat The Arcade — game.css
   In-game chrome: CRT bezel, HUD, touch pads, settings overlay,
   pause / game-over screens, hi-score initials entry, board layouts.
   ========================================================================== */

/* ==========================================================================
   game stage + bezel
   ========================================================================== */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

@media (min-width: 940px) {
  .stage--split {
    grid-template-columns: minmax(0, auto) 240px;
    justify-content: center;
  }
}

.bezel {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 560px;
  padding: clamp(10px, 1.6vw, 18px);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #171b30, #0a0c17 60%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bezel::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--r-lg) - 6px);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  pointer-events: none;
}

.bezel__screen {
  position: relative;
  border-radius: var(--r-md);
  background: #04050b;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

/* the canvas fills the screen box; aspect-ratio is set per game in HTML */
.bezel__screen canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.bezel__screen.is-shaking {
  animation: shake 220ms steps(2, end) 1;
}

/* fixed-ratio screens (canvas games) — width drives, height follows, and both
   the container width and the viewport height are respected */
.screen-pad {
  padding: clamp(10px, 2vw, 16px);
}

.screen--invasion {
  width: min(100%, 480px, 56vh);
  width: min(100%, 480px, 56svh);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}

.screen--blocks {
  width: min(100%, 300px, 31vh);
  width: min(100%, 300px, 31svh);
  aspect-ratio: 1 / 2;
  margin-inline: auto;
}

.bezel--narrow {
  max-width: 460px;
}

.bezel--wide {
  max-width: 520px;
}

/* tic tac toe screen contents */
.ttt-screen {
  display: grid;
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding-top: 0.2rem;
}

.flash {
  animation: flash-out 520ms ease-out 1;
}

/* ==========================================================================
   HUD
   ========================================================================== */

.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1px;
  margin-bottom: 10px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.hud__cell {
  flex: 1 1 0;
  min-width: 74px;
  padding: 0.45rem 0.65rem;
  background: #0b0e1c;
  text-align: center;
}

.hud__cell h3 {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
}

.hud__cell b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
}

.hud__cell--right {
  text-align: right;
}

.lives {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 2px;
}

.lives i {
  width: 12px;
  height: 10px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 55%, 68% 100%, 32% 100%, 0 55%);
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.8));
}

/* ==========================================================================
   touch controls
   ========================================================================== */

.pad {
  display: none;
  margin-top: 12px;
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.pad.is-on {
  display: flex;
}

.pad--grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
}

.pad--grid.is-on {
  display: grid;
}

/* Single-row control pad (Invasion). It used to be a bare flex row with
   content-sized buttons, so the arrows collapsed to the width of their glyph
   (~26px) and the whole row sat against the left edge with dead space to the
   right. Three equal tracks give every control the same generous tap target,
   and the auto margins centre the pad on the play area above it (same
   max-width as .bezel--wide) instead of the wider page wrap. */
.pad--row {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  max-width: 520px;
  margin: 12px auto 0;
}

.pad--row.is-on {
  display: grid;
}

.pad--row .pad__btn {
  min-height: clamp(72px, 18vw, 92px);
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
}

.pad__btn {
  display: grid;
  place-items: center;
  min-height: 56px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03));
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  touch-action: none;
  transition: background-color 90ms linear, transform 90ms linear;
}

.pad__btn:active,
.pad__btn.is-down {
  background: rgba(var(--accent-rgb), 0.4);
  transform: scale(0.97);
}

.pad__btn small {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}

.pad__btn--accent {
  border-color: rgba(var(--accent-2-rgb), 0.5);
  background: linear-gradient(180deg, rgba(var(--accent-2-rgb), 0.18), rgba(var(--accent-2-rgb), 0.04));
}

/* ==========================================================================
   tic tac toe
   ========================================================================== */

.ttt {
  display: grid;
  gap: 0.9rem;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}

.ttt__status {
  min-height: 1.9em;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45);
}

/* The board is square (aspect-ratio: 1), so all six tracks must be identical for
   the cells to be square. They are declared minmax(0, 1fr) rather than left to
   auto-size: an auto track is sized from its content, and a cell holding a glyph
   has a line box while an empty one has none — which made the row containing the
   newest mark grow by a whole line box and squash the other two. Every move
   resized the squares. minmax(0, ...) also stops a wide glyph from forcing a
   track wider than its share. */
.ttt__board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.6vw, 12px);
  aspect-ratio: 1;
  padding: clamp(6px, 1.6vw, 12px);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), transparent 60%),
    #06070f;
}

.ttt__cell {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #0b0e1c;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.9rem, 9vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
  transition: background-color 120ms linear, border-color 120ms linear,
    box-shadow 120ms linear, transform 120ms var(--ease);
}

.ttt__cell:hover:not(:disabled) {
  border-color: var(--accent);
  background: #121734;
  box-shadow: inset 0 0 22px rgba(var(--accent-rgb), 0.16);
}

.ttt__cell:disabled {
  cursor: default;
}

.ttt__cell[data-mark="X"] {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6), 0 0 30px rgba(0, 240, 255, 0.24);
}

/* Orbitron's O is a rounded square at weight 900, so it reads as a box rather
   than a nought. The glyph stays in the DOM (it is what the screen reader name
   is built from) but is painted transparent, and a true ring is drawn in its
   place. Sizes are in em so the ring tracks the same clamp() as the X. */
.ttt__cell[data-mark="O"] {
  color: transparent;
  text-shadow: none;
}

.ttt__cell[data-mark="O"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.74em;
  height: 0.74em;
  border: 0.145em solid var(--magenta);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255, 43, 214, 0.6), 0 0 30px rgba(255, 43, 214, 0.24),
    inset 0 0 10px rgba(255, 43, 214, 0.35);
}

.ttt__cell.is-win {
  border-color: var(--lime);
  background: rgba(182, 255, 43, 0.1);
  box-shadow: 0 0 0 1px var(--lime), 0 0 26px rgba(182, 255, 43, 0.4);
}

.ttt__cell.is-win:not(.no-anim) {
  animation: pop 420ms var(--ease) 1;
}

.ttt__cell.is-last {
  border-color: var(--accent);
}

.ttt__score {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.ttt__score b {
  font-weight: 400;
  color: var(--ink);
}

.ttt__score .is-x b {
  color: var(--cyan);
}

.ttt__score .is-o b {
  color: var(--magenta);
}

.ttt__round {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ==========================================================================
   blocks side panels
   ========================================================================== */

.side {
  display: grid;
  gap: 10px;
  width: 100%;
}

@media (max-width: 939px) {
  .side {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    max-width: 560px;
    margin-inline: auto;
  }
}

.side__box {
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #0b0e1c;
}

.side__box h3 {
  margin-bottom: 0.45rem;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
}

.side__box canvas {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   settings overlay panel
   ========================================================================== */

.settings-root {
  position: relative;
  z-index: 9100;
}

.settings__scrim {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(3, 4, 9, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) linear, visibility 0s linear var(--dur);
}

.settings__panel {
  position: fixed;
  z-index: 9101;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #10142a, #080a14);
  border-left: 1px solid var(--line-bright);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
  transform: translateX(102%);
  transition: transform var(--dur-slow) var(--ease);
  visibility: hidden;
}

.settings.is-open .settings__scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur) linear;
}

.settings.is-open .settings__panel {
  transform: none;
  visibility: visible;
}

.settings__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}

.settings__head h2 {
  flex: 1 1 auto;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}

.settings__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem 1rem 1.2rem;
  -webkit-overflow-scrolling: touch;
}

.settings__foot {
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.settings__foot .btn {
  width: 100%;
}

.set-group {
  margin: 1.1rem 0 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

.set-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(35, 42, 74, 0.6);
}

.set-row[hidden] {
  display: none;
}

.set-row__label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.set-row__hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.76rem;
  color: var(--ink-mute);
}

/* segmented control (radio group) */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seg__opt {
  position: relative;
  flex: 1 1 auto;
}

.seg__opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  inset: 0;
}

.seg__opt span {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  transition: all var(--dur) linear;
  pointer-events: none;
}

.seg__opt input:hover + span {
  color: var(--ink);
  border-color: rgba(var(--accent-rgb), 0.6);
}

.seg__opt input:checked + span {
  color: var(--ink);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
  box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.2), 0 0 10px rgba(var(--accent-rgb), 0.2);
}

.seg__opt input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch__track {
  position: relative;
  width: 54px;
  height: 30px;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-pill);
  background: #0a0c17;
  transition: all var(--dur) linear;
  flex: 0 0 auto;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-mute);
  transition: transform var(--dur) var(--ease), background-color var(--dur) linear;
}

.switch input:checked + .switch__track {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.2);
  box-shadow: inset 0 0 14px rgba(var(--accent-rgb), 0.24);
}

.switch input:checked + .switch__track::after {
  transform: translateX(24px);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch__text {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stepper__btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink);
}

.stepper__btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.stepper__val {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* ==========================================================================
   overlays: pause, game over, initials
   ========================================================================== */

.ov {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.1rem;
  text-align: center;
  background: rgba(4, 5, 11, 0.9);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: rise 220ms var(--ease) both;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ov[hidden] {
  display: none;
}

.ov__title {
  font-size: clamp(1.3rem, 5vw, 2.1rem);
  color: var(--accent);
  text-shadow: var(--glow);
}

.ov__sub {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  max-width: 32ch;
}

.ov__score {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  color: var(--ink);
  text-shadow: var(--glow);
}

.ov__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.ov--top {
  justify-content: flex-start;
  padding-top: 1.4rem;
}

/* hi-score table */
.scores {
  width: 100%;
  max-width: 320px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  border-collapse: collapse;
}

.scores th {
  padding: 0.2rem 0.4rem;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
}

.scores td {
  padding: 0.22rem 0.4rem;
  border-top: 1px solid rgba(35, 42, 74, 0.8);
  color: var(--ink-dim);
}

.scores td:first-child {
  color: var(--ink-mute);
  width: 2ch;
}

.scores td:nth-child(2) {
  color: var(--ink);
}

.scores td:last-child {
  text-align: right;
}

.scores tr.is-new td {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.scores-empty {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* initials entry */
.initials {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.initials__col {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.initials__up,
.initials__down {
  width: 46px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  color: var(--ink-dim);
}

.initials__up:hover,
.initials__down:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.initials__val {
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: rgba(var(--accent-rgb), 0.12);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--ink);
  text-shadow: var(--glow);
}

.initials__col.is-active .initials__val {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.4), inset 0 0 18px rgba(var(--accent-rgb), 0.3);
}

/* toasts */
.toasts {
  position: fixed;
  z-index: 9200;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-pill);
  background: rgba(10, 12, 24, 0.95);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  box-shadow: var(--shadow);
  animation: rise 200ms var(--ease) both;
}

/* ==========================================================================
   misc
   ========================================================================== */

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: center;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.keys kbd {
  padding: 0.1em 0.45em;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-dim);
}

.touch-only {
  display: none;
}

html.is-touch .touch-only {
  display: revert;
}

html.is-touch .keyboard-only {
  display: none;
}

.no-anim {
  animation: none !important;
}