/* ==========================================================================
   game.css — the interface, at full resolution.

   Since 8 Oct 2026 the interface is real HTML and CSS over the picture, not
   a 320 x 240 bitmap. Every size here is a multiple of --u, the CSS pixels
   one layout unit is on this screen (js/main.js sets it), so the layout is
   the one that was signed off at any resolution, and nothing is stretched.

   TYPE: Verdana, the site's own UI face, bold and tracked uppercase for the
   game's voice. No webfont is downloaded. (Archivo Narrow is the site's
   display face and is used in exactly three places there; this is not a
   fourth.)

   THE LOOK is the site's grammar, drawn sharp: flat cel fills, hard offset
   shadows never blurred, square corners, the gold aura and cyan halo of the
   palette. Our own design; nothing taken from any existing game.

   NO COLOUR IS NAMED HERE. js/palette.js is the game's only colour file;
   js/main.js copies the colours into --ab-* and --t-* custom properties.
   ========================================================================== */

:root {
  color-scheme: dark;
  --u: 1;
  --px: calc(var(--u) * 1px);                  /* one layout unit */
  --font: Verdana, Geneva, 'DejaVu Sans', sans-serif;
  --hard: calc(var(--px) * 1.5) calc(var(--px) * 1.5) 0 var(--ab-black);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ab-page);
  color: var(--ab-ink);
  font: 11px/1.45 var(--font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.ab { height: 100%; display: flex; }
.ab[data-layout='stack'] { flex-direction: column; }
.ab[data-layout='side'] { flex-direction: row; }

.ab__screen, .ab__pad {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--ab-plate);
}

.ab__screen canvas { position: absolute; top: 0; left: 0; }
#cut[hidden] { display: none; }
.hud { position: absolute; top: 0; left: 0; pointer-events: none; }
.hud button, .hud a { pointer-events: auto; }

/* --- shared pieces -------------------------------------------------------- */

.chips { display: inline-flex; gap: calc(var(--px) * 1.5); vertical-align: middle; }
.chip {
  display: inline-grid;
  place-items: center;
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 11);
  background: var(--c);
  color: var(--ab-black);
  font: bold calc(var(--px) * 7.5) / 1 var(--font);
  box-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 var(--ab-black);
}

.btn {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 calc(var(--px) * 6);
  min-height: 44px;                             /* touch, whatever the scale */
  background: var(--ab-plate);
  color: var(--ab-ink);
  border: calc(var(--px) * 1.5) solid var(--ab-edge);
  box-shadow: var(--hard);
  font: bold calc(var(--px) * 11) / 1 var(--font);
  letter-spacing: .14em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:hover { border-color: var(--ab-accent); color: var(--ab-accent); background: var(--ab-edgeLo); }

/* An accent ring backed by an ink ring, as on the site, so it shows on any
   surface the picture puts under it. */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ab-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ab-focus-back);
}

/* --- the aura bars -------------------------------------------------------- */

.bars {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: calc(var(--px) * 4);
  padding: calc(var(--px) * 6) calc(var(--px) * 6) 0;
}
body[data-screen='select'] .bars { display: none; }
.bar--r { grid-column: 3; }
.bar__track {
  position: relative;
  height: calc(var(--px) * 12);
  background: var(--ab-plate);
  border: calc(var(--px) * 1.5) solid var(--ab-accent);
  box-shadow: var(--hard);
  overflow: hidden;
}
.bar__fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: linear-gradient(var(--ab-white), var(--ab-accent) 22%, var(--ab-accent) 72%, var(--ab-accent3));
  transition: width .5s steps(10, end);
}
.bar--r .bar__fill { left: auto; right: 0; }
.bar__ticks { position: absolute; inset: 0; display: flex; justify-content: space-evenly; }
.bar__ticks i { width: calc(var(--px) * 1); background: var(--ab-plate); opacity: .7; }
.bar__name {
  display: flex; align-items: center; gap: calc(var(--px) * 4);
  margin-top: calc(var(--px) * 3);
  font: bold calc(var(--px) * 9) / 1 var(--font);
  letter-spacing: .1em;
  text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 var(--ab-black);
}
.bar--r .bar__name { flex-direction: row-reverse; }
.bar__last { font-weight: normal; font-size: calc(var(--px) * 7.5); color: var(--ab-soft); letter-spacing: .06em; }
.bars__aura {
  grid-column: 2; grid-row: 1;
  align-self: start;
  padding-top: calc(var(--px) * 1);
  color: var(--ab-soft);
  font: bold calc(var(--px) * 8) / 1.4 var(--font);
  letter-spacing: .2em;
  text-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 var(--ab-black);
}
.bar--l { grid-column: 1; grid-row: 1; }
.bar--r { grid-row: 1; }

/* --- the banner and the score popup -------------------------------------- */

.banner {
  position: absolute; left: 50%; top: calc(var(--px) * 36);
  transform: translateX(-50%);
  display: none; align-items: center; gap: calc(var(--px) * 5);
  padding: calc(var(--px) * 3) calc(var(--px) * 7);
  white-space: nowrap;
  background: var(--ab-plate);
  border: calc(var(--px) * 1.5) solid var(--ab-accent);
  box-shadow: var(--hard);
  font: bold calc(var(--px) * 9) / 1.2 var(--font);
  letter-spacing: .08em;
}
.banner.is-on { display: inline-flex; }

.popup {
  position: absolute;
  display: none;
  flex-direction: column; align-items: center;
  text-align: center;
  font: bold calc(var(--px) * 16) / 1 var(--font);
  color: var(--ab-ink);
  text-shadow: calc(var(--px) * 1.5) calc(var(--px) * 1.5) 0 var(--ab-black), 0 0 calc(var(--px) * 2) var(--ab-black);
}
.popup small { font-size: calc(var(--px) * 8); letter-spacing: .1em; margin-top: calc(var(--px) * 3); }
.popup.is-answer b { color: var(--ab-accent); font-size: calc(var(--px) * 20); }
.popup.is-on { display: flex; animation: rise 1.4s steps(14, end) forwards; }
@keyframes rise { from { translate: 0 0; } to { translate: 0 calc(var(--px) * -14); } }

/* --- lock-in and reveal --------------------------------------------------- */

/* Two cards under the bars, one a side. CHOOSING (dim), then LOCKED IN (the
   gold edge and a hard stamp), then both turn face up together with the
   move and its type. */
.reveal {
  position: absolute; left: 0; right: 0; top: calc(var(--px) * 58);
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--px) * 10);
  padding: 0 calc(var(--px) * 10);
}
.reveal.is-on { display: grid; }
.card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--px) * 4);
  min-height: calc(var(--px) * 40);
  padding: calc(var(--px) * 5);
  background: var(--ab-plate);
  border: calc(var(--px) * 1.5) dashed var(--ab-edge);
  box-shadow: var(--hard);
  color: var(--ab-soft);
}
.card__who { font: bold calc(var(--px) * 8) / 1 var(--font); letter-spacing: .16em; }
.card__state { font: bold calc(var(--px) * 11) / 1 var(--font); letter-spacing: .14em; }
.card.is-locked { border-style: solid; border-color: var(--ab-accent); color: var(--ab-ink); }
.card.is-locked .card__state { color: var(--ab-accent); animation: stamp .12s steps(3, end) both; }
.card.is-revealed { border-style: solid; border-color: var(--ab-white); color: var(--ab-ink); animation: stamp .12s steps(3, end) both; }
.card__read, .card__cancel { font: bold calc(var(--px) * 8) / 1 var(--font); letter-spacing: .12em; padding: calc(var(--px) * 2) calc(var(--px) * 4); }
.card__read { background: var(--ab-accent); color: var(--ab-black); }
.card__cancel { background: var(--ab-accent3); color: var(--ab-black); }
.card.is-reader { border-color: var(--ab-accent); }
.card.is-cancelled .card__move { text-decoration: line-through; text-decoration-thickness: calc(var(--px) * 1.5); }
.popup__cancel { color: var(--ab-accent3); }
.key__read { margin: calc(var(--px) * 10) 0 0; font: calc(var(--px) * 10) / 1.35 var(--font); color: var(--ab-soft); }
.card__move { display: inline-flex; align-items: center; gap: calc(var(--px) * 5); font: bold calc(var(--px) * 10) / 1.2 var(--font); letter-spacing: .06em; text-align: center; }
@keyframes stamp { from { scale: 1.4; opacity: 0; } to { scale: 1; opacity: 1; } }

/* --- select --------------------------------------------------------------- */

.select { position: absolute; display: none; flex-direction: column; }
body[data-screen='select'] .select { display: flex; }
body[data-screen='select'] .hud { background: color-mix(in srgb, var(--ab-plate) 55%, transparent); }
.select__title {
  margin: calc(var(--px) * 4) 0 calc(var(--px) * 8);
  text-align: center;
  color: var(--ab-accent);
  font: bold calc(var(--px) * 12) / 1 var(--font);
  letter-spacing: .22em;
  text-shadow: calc(var(--px) * 1.5) calc(var(--px) * 1.5) 0 var(--ab-black);
}
.select__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc(var(--px) * 66);
  gap: calc(var(--px) * 4) calc(var(--px) * 5);
}
.tile {
  position: relative;
  display: block;
  margin: 0; padding: 0;
  background: var(--ab-plate);
  border: calc(var(--px) * 1.5) solid var(--ab-edge);
  box-shadow: var(--hard);
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}
.tile__pic { position: absolute; inset: 0 0 calc(var(--px) * 13) 0; }
.tile__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__pic img.tile__crop { object-fit: none; object-position: 50% 8%; transform: scale(.4); transform-origin: 50% 0; }
.tile__plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--px) * 13);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--px) * 4);
  background: var(--ab-plate);
}
.tile__name { font: bold calc(var(--px) * 8.5) / 1 var(--font); letter-spacing: .1em; color: var(--ab-ink); }
.tile__types { display: flex; gap: calc(var(--px) * 1.5); }
.tile__types i { width: calc(var(--px) * 5); height: calc(var(--px) * 5); background: var(--c); box-shadow: calc(var(--px) * 1) calc(var(--px) * 1) 0 var(--ab-black); }
.tile:hover, .tile.is-chosen { border-color: var(--ab-accent); }
.tile:hover .tile__name, .tile.is-chosen .tile__name { color: var(--ab-accent); }
.tile:disabled { cursor: default; }

/* --- the slam ------------------------------------------------------------- */

.slam { position: absolute; display: none; }
.slam.is-on { display: block; }
body[data-screen='select'] .slam.is-on ~ * { pointer-events: none; }
.slam::before {
  content: ''; position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ab-black) 72%, transparent);
  animation: fade .2s steps(4, end) both;
}
.slam__name {
  position: absolute;
  display: flex; flex-direction: column;
  font: bold calc(var(--px) * 30) / 1 var(--font);
  letter-spacing: .04em;
  -webkit-text-stroke: calc(var(--px) * 1) var(--ab-black);
  text-shadow: calc(var(--px) * 2.5) calc(var(--px) * 2.5) 0 var(--ab-black);
}
.slam__name small { font-size: calc(var(--px) * 9); letter-spacing: .2em; -webkit-text-stroke: 0; color: var(--ab-ink); margin-top: calc(var(--px) * 4); }
.slam__name--l { left: calc(var(--px) * 14); top: calc(var(--px) * 10); color: var(--ab-accent); animation: in-l .14s steps(5, end) both; }
.slam__name--r { right: calc(var(--px) * 14); top: calc(var(--px) * 64); align-items: flex-end; color: var(--ab-accent2); animation: in-r .14s steps(5, end) .38s both; }
.slam__vs {
  position: absolute; left: 50%; top: calc(var(--px) * 34); transform: translateX(-50%);
  color: var(--ab-accent3);
  font: bold calc(var(--px) * 40) / 1 var(--font);
  -webkit-text-stroke: calc(var(--px) * 1.5) var(--ab-black);
  text-shadow: calc(var(--px) * 3) calc(var(--px) * 3) 0 var(--ab-black);
  animation: pop .1s steps(3, end) .3s both;
}
@keyframes in-l { from { translate: -120vw 0; } to { translate: 0 0; } }
@keyframes in-r { from { translate: 120vw 0; } to { translate: 0 0; } }
@keyframes pop { from { scale: 2.2; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* --- the result ------------------------------------------------------------- */

/* An opaque plate ABOVE the fighters' heads; nothing is laid over them. */
.result {
  position: absolute; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: var(--ab-plate);
  border: calc(var(--px) * 2) solid var(--ab-accent3);
  box-shadow: var(--hard);
}
body[data-screen='result'] .result { display: flex; }
.result.is-won { border-color: var(--ab-accent); }
.result__head {
  font: bold calc(var(--px) * 24) / 1 var(--font);
  letter-spacing: .06em;
  color: var(--ab-accent3);
  -webkit-text-stroke: calc(var(--px) * .8) var(--ab-black);
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ab-black);
}
.result.is-won .result__head { color: var(--ab-accent); }
.result__line { margin-top: calc(var(--px) * 5); font: bold calc(var(--px) * 8) / 1.2 var(--font); letter-spacing: .1em; }
.result__score { font: calc(var(--px) * 7.5) / 1.4 var(--font); color: var(--ab-soft); letter-spacing: .06em; text-transform: uppercase; }

.paused {
  position: absolute; inset: 0; display: none;
  place-items: center;
  background: color-mix(in srgb, var(--ab-black) 50%, transparent);
  color: var(--ab-accent);
  font: bold calc(var(--px) * 28) / 1 var(--font);
  letter-spacing: .2em;
  text-shadow: calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ab-black);
}
body.is-paused .paused { display: grid; }

/* --- the pad ------------------------------------------------------------- */

.ab__pad { padding: calc(var(--px) * 6); }
.pad { display: none; height: 100%; flex-direction: column; gap: calc(var(--px) * 6); }
body[data-screen='select'] .pad--select,
body[data-screen='battle'] .pad--battle,
body[data-screen='result'] .pad--result { display: flex; }
.pad .btn--exit, .pad__row { flex: none; height: calc(var(--px) * 28); }
.pad__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--px) * 6); }
.pad__stack { display: flex; flex-direction: column; gap: calc(var(--px) * 6); margin-top: auto; }
.btn--big { height: calc(var(--px) * 40); font-size: calc(var(--px) * 14); }

/* the answer key */
.key { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 calc(var(--px) * 6); }
.key__head { margin: 0 0 calc(var(--px) * 10); font: bold calc(var(--px) * 12) / 1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.key__list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--px) * 7); }
.key__list li { display: grid; grid-template-columns: auto 1fr auto auto 1fr; align-items: center; gap: calc(var(--px) * 6); font: bold calc(var(--px) * 11) / 1 var(--font); letter-spacing: .08em; }
.key__arrow { font-weight: normal; font-size: calc(var(--px) * 8); color: var(--ab-soft); text-transform: uppercase; letter-spacing: .12em; }
.key__chip .chip { width: calc(var(--px) * 15); height: calc(var(--px) * 15); font-size: calc(var(--px) * 10); }

/* the moves */
.moves { flex: 1; display: flex; flex-direction: column; gap: calc(var(--px) * 6); min-height: 0; }
.move {
  flex: 1;
  display: flex; align-items: center; gap: calc(var(--px) * 8);
  margin: 0; padding: 0 calc(var(--px) * 10);
  min-height: 44px;
  background: var(--ab-plate);
  color: var(--ab-ink);
  border: calc(var(--px) * 1.5) solid var(--ab-edge);
  box-shadow: var(--hard);
  font: bold calc(var(--px) * 12.5) / 1 var(--font);
  letter-spacing: .08em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.move[hidden] { display: none; }
.move__chips .chip { width: calc(var(--px) * 16); height: calc(var(--px) * 16); font-size: calc(var(--px) * 10.5); }
.move__chips { gap: calc(var(--px) * 3); }
.move__name { flex: 1; }
.move__x { color: var(--ab-accent); font-size: calc(var(--px) * 12.5); }
.move:disabled { opacity: .5; cursor: default; }
.move:not(:disabled):hover { background: var(--ab-edgeLo); border-color: var(--ab-ink); }
.move.is-answer { border-color: var(--ab-accent); }

/* the tally */
.tally { flex: 1; display: grid; align-content: center; gap: calc(var(--px) * 4); padding: 0 calc(var(--px) * 4); }
.tally p { margin: 0; }
.tally__head { color: var(--ab-soft); font: bold calc(var(--px) * 10) / 1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.tally__row { font: bold calc(var(--px) * 13) / 1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.tally__vs { color: var(--ab-accent); font: bold calc(var(--px) * 12) / 1.3 var(--font); letter-spacing: .1em; }

/* --- reduced motion: no animation at all ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

.ab__fail {
  max-width: 30em;
  margin: auto;
  padding: 16px;
  background: var(--ab-plate);
  border: 1px solid var(--ab-edge);
}
.ab__fail a { color: var(--ab-accent); }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}