/* ==========================================================================
   HOME KIT LOOK — the shared home, results and pause screens (shared/home.js).
   Sizes are in --hu: one logical px of the 288-wide frame (set by home.js), so every game
   looks the same on the same screen. Each game keeps its own art, colours and showcase.
   ========================================================================== */

:root { --hu: 1.3px; }

.ah-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: hidden;
  border-radius: calc(var(--hu) * 3);
  background: radial-gradient(ellipse 120% 70% at 50% 28%, #0e1640 0%, #070a1f 55%, #04060f 100%);
  box-shadow: 0 0 calc(var(--hu) * 14) rgba(31, 77, 255, 0.16);
  font-family: var(--font-arcade);
  color: var(--text);
  touch-action: none;
}
.ah-frame[hidden], .ah-frame [hidden] { display: none !important; }

/* the arcade's CRT: faint scanlines + vignette, over everything in the frame */
.ah-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px);
}

/* each game's colour for the pill (and anything else that follows the title) */
.ah--orange { --ah-accent: #f7931a; --ah-accent-bg: rgba(40, 18, 4, 0.55); --ah-accent-glow: rgba(247, 147, 26, 0.35); }
.ah--gold { --ah-accent: #ffc21a; --ah-accent-bg: rgba(40, 30, 4, 0.55); --ah-accent-glow: rgba(255, 194, 26, 0.35); }
.ah--purple { --ah-accent: #8a2be2; --ah-accent-bg: rgba(24, 8, 44, 0.6); --ah-accent-glow: rgba(138, 43, 226, 0.4); }
.ah--green { --ah-accent: #34c759; --ah-accent-bg: rgba(4, 30, 12, 0.55); --ah-accent-glow: rgba(52, 199, 89, 0.35); }

.ah-home, .ah-over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ah-home {
  justify-content: space-between;
  gap: calc(var(--hu) * 5);              /* the least room between the groups (short frames) */
  padding: 0 calc(var(--hu) * 12) calc(var(--hu) * 6);
}
.ah-home > *, .ah-over > * { flex: none; }
.ah-frame p, .ah-frame h1, .ah-frame h2 { margin: 0; font-weight: 400; }

.ah-top { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ah-hero {
  position: relative;
  width: calc(var(--hu) * 288);
  height: calc(var(--hu) * var(--hero-h));
  margin: 0 calc(var(--hu) * -12);
}
/* phones: the corner buttons sit over the top of the art. A soft dark band behind them keeps them clean and readable;
   the art shows in full just below it (v3.0). Computers: no band (the buttons are far away: .ah-clear). */
.ah-frame:not(.ah-clear) .ah-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--ah-band, 0px) + var(--hu) * 18);
  background: linear-gradient(to bottom, rgba(4, 6, 15, 0.96) 0%, rgba(4, 6, 15, 0.9) calc(var(--ah-band, 0px) * 0.75), rgba(4, 6, 15, 0) 100%);
  pointer-events: none;
}
.ah-hero-cv, .ah-title-cv { display: block; width: 100%; height: 100%; }
/* computers: the corner buttons are far from the frame, so the art's top band (kept clear for them) moves up */
.ah-clear .ah-hero { margin-top: calc(var(--hu) * -28); }
.ah-title {
  position: relative;
  width: calc(var(--hu) * 288);
  height: calc(var(--hu) * var(--title-h));
  margin: calc(var(--hu) * var(--title-pull) * -1) calc(var(--hu) * -12) 0;
}
.ah-title-cv { position: absolute; inset: 0; }
.ah-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ah-pill {
  margin-top: calc(var(--hu) * 7) !important;
  padding: calc(var(--hu) * 5) calc(var(--hu) * 10);
  border: max(1.5px, calc(var(--hu) * 1.5)) solid var(--ah-accent);
  border-radius: 999px;
  background: var(--ah-accent-bg);
  box-shadow: 0 0 calc(var(--hu) * 8) var(--ah-accent-glow);
  font-size: calc(var(--hu) * 6.5);
  line-height: 1.1;
  color: #ffd27a;
  white-space: nowrap;
}
.ah-premise {
  margin-top: calc(var(--hu) * 5.5) !important;
  font-size: calc(var(--hu) * 6.5);
  line-height: 1.1;
  color: #9aa3bf;
  white-space: nowrap;
}

/* ---------- panels: the showcase, HOW TO PLAY, the results details ---------- */
.ah-panel {
  box-sizing: border-box;
  width: calc(var(--hu) * 264);
  border: max(1.5px, calc(var(--hu) * 1.5)) solid #2b55ff;
  border-radius: calc(var(--hu) * 6);
  background: rgba(9, 14, 44, 0.92);
  box-shadow: 0 0 calc(var(--hu) * 10) rgba(43, 85, 255, 0.42), inset 0 0 calc(var(--hu) * 13) rgba(43, 85, 255, 0.12);
}
.ah-head { font-size: calc(var(--hu) * 7); line-height: 1; color: #ffc23a; }
.ah-head--left { align-self: flex-start; }
.ah-show {
  padding: calc(var(--hu) * 6) calc(var(--hu) * 7) calc(var(--hu) * 7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--hu) * 6);
}
.ah-show-body { width: 100%; }

/* ---------- BEST, the PLAY key, the controls ---------- */
.ah-act { display: flex; flex-direction: column; align-items: center; }
.ah-best {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hu) * 5);
  min-height: calc(var(--hu) * 12);
  font-size: calc(var(--hu) * 7);
  line-height: 1;
  color: #4fd8f0;
  white-space: nowrap;
}
.ah-trophy { width: calc(var(--hu) * 12); height: calc(var(--hu) * 12); flex: none; }
.ah-best-img { flex: none; image-rendering: pixelated; }
.ah-best--new { color: #ffc23a; animation: ah-pulse 1.2s ease-in-out infinite; }
@keyframes ah-pulse { 50% { text-shadow: 0 0 calc(var(--hu) * 8) rgba(255, 194, 58, 0.9); } }

/* The PLAY key: stepped pixel corners, a deep edge that presses down, a slow shine, a breathing glow. */
.ah-keywrap {
  display: inline-block;
  margin-top: calc(var(--hu) * 7);
  border-radius: calc(var(--hu) * 4);
  animation: ah-glow 2.6s ease-in-out infinite;
}
@keyframes ah-glow {
  0%, 100% { filter: drop-shadow(0 0 calc(var(--hu) * 5) rgba(247, 147, 26, 0.45)); }
  50% { filter: drop-shadow(0 0 calc(var(--hu) * 12) rgba(247, 147, 26, 0.85)); }
}
.ah-key {
  --n: calc(var(--hu) * 4.5);      /* outer corner step */
  --m: calc(var(--hu) * 2.25);     /* inner step */
  position: relative;
  display: block;
  width: calc(var(--hu) * 180);
  height: calc(var(--hu) * 38);
  padding: 0;
  border: 0;
  background: #2a0d00;
  cursor: pointer;
  font-family: var(--font-arcade);
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--m), calc(100% - var(--m)) var(--m),
    calc(100% - var(--m)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--m)) calc(100% - var(--n)),
    calc(100% - var(--m)) calc(100% - var(--m)), calc(100% - var(--n)) calc(100% - var(--m)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--m)), var(--m) calc(100% - var(--m)), var(--m) calc(100% - var(--n)),
    0 calc(100% - var(--n)), 0 var(--n), var(--m) var(--n), var(--m) var(--m), var(--n) var(--m));
}
.ah-key::before {                 /* the deep edge under the face */
  content: "";
  position: absolute;
  inset: var(--m);
  background: #9a4800;
  clip-path: polygon(var(--m) 0, calc(100% - var(--m)) 0, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0 calc(100% - var(--m)), 0 var(--m));
}
.ah-key-face {
  position: absolute;
  left: var(--m);
  right: var(--m);
  top: var(--m);
  height: calc(100% - var(--m) * 2 - var(--hu) * 4.5);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hu) * 8);
  background: linear-gradient(180deg, #ffd04a 0%, #ffb12e 50%, #f7931a 100%);
  box-shadow: inset 0 calc(var(--hu) * 2) 0 #ffeeb0, inset 0 calc(var(--hu) * -2) 0 #e07a10;
  clip-path: polygon(var(--m) 0, calc(100% - var(--m)) 0, 100% var(--m), 100% calc(100% - var(--m)), calc(100% - var(--m)) 100%, var(--m) 100%, 0 calc(100% - var(--m)), 0 var(--m));
  color: #1a0a00;
  font-size: calc(var(--hu) * 9);
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.06s ease;
}
.ah-key:active .ah-key-face { transform: translateY(calc(var(--hu) * 3)); }
.ah-key-ico { position: relative; width: calc(var(--hu) * 4.5); height: calc(var(--hu) * 8); flex: none; }
.ah-key-label { position: relative; }
.ah-shine {
  position: absolute;
  left: 0;
  top: -20%;
  width: calc(var(--hu) * 16);
  height: 140%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(calc(var(--hu) * -40)) skewX(-20deg);
  animation: ah-shine 3.4s ease-in-out infinite;
}
@keyframes ah-shine {
  0% { transform: translateX(calc(var(--hu) * -40)) skewX(-20deg); }
  26%, 100% { transform: translateX(calc(var(--hu) * 220)) skewX(-20deg); }
}
.ah-keywrap:has(.ah-key:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
@supports selector(:has(*)) { .ah-key:focus { outline: none; } }   /* (older browsers keep their own focus ring) */

.ah-controls {
  margin-top: calc(var(--hu) * 9);
  display: flex;
  justify-content: center;
  gap: calc(var(--hu) * 11);
}
.ah-ctl { display: flex; align-items: center; gap: calc(var(--hu) * 5); }
.ah-caps { display: flex; gap: calc(var(--hu) * 2.5); }
.ah-cap {
  box-sizing: border-box;
  min-width: calc(var(--hu) * 22);
  height: calc(var(--hu) * 22);
  padding: 0 calc(var(--hu) * 4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: max(1.5px, calc(var(--hu) * 1.5)) solid #2b55ff;
  border-radius: calc(var(--hu) * 3.5);
  background: #0a1030;
  box-shadow: 0 calc(var(--hu) * 2) 0 #13246e, 0 0 calc(var(--hu) * 6) rgba(43, 85, 255, 0.45);
  color: #fff;
  font-size: calc(var(--hu) * 6);
  line-height: 1;
}
.ah-cap--wide { min-width: calc(var(--hu) * 30); }
.ah-cap img { image-rendering: pixelated; }
.ah-ico { width: calc(var(--hu) * var(--iw) * 1.25); height: calc(var(--hu) * var(--ih) * 1.25); flex: none; }
.ah-ctl-words { display: flex; flex-direction: column; gap: calc(var(--hu) * 4); text-align: left; }
.ah-ctl-label { font-size: calc(var(--hu) * 6.5); line-height: 1; color: #8fa6ff; white-space: nowrap; }
.ah-ctl-sub { font-size: calc(var(--hu) * 6); line-height: 1; color: #9aa3bf; white-space: nowrap; }
.ah-ctl-sub:empty { display: none; }

/* ---------- HOW TO PLAY ---------- */
.ah-howto {
  padding: calc(var(--hu) * 6) calc(var(--hu) * 7) calc(var(--hu) * 7);
  display: flex;
  flex-direction: column;
  gap: calc(var(--hu) * 6);
}
.ah-howto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--hu) * 6);
  row-gap: calc(var(--hu) * 6);
  text-align: left;
}
.ah-how { display: flex; align-items: center; gap: calc(var(--hu) * 4); min-width: 0; }
.ah-how-ico { width: calc(var(--hu) * 17); height: calc(var(--hu) * 17); flex: none; display: flex; align-items: center; justify-content: center; }
.ah-how-ico img { image-rendering: pixelated; }
.ah-how-words { display: flex; flex-direction: column; gap: calc(var(--hu) * 4); min-width: 0; }
.ah-how-label { font-size: calc(var(--hu) * 6.5); line-height: 1; color: #f4f6ff; }
.ah-how-sub { font-size: calc(var(--hu) * 5.8); line-height: 1.35; color: #9aa3bf; }

/* ---------- the typed tip ---------- */
.ah-tip {
  position: relative;
  width: 100%;
  height: calc(var(--hu) * 10);
  font-size: calc(var(--hu) * 6.5);
  line-height: 1;
  color: #ffc23a;
  white-space: nowrap;
}
.ah-tip-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hu) * 4);
  transition: opacity 0.25s ease;
}
.ah-tip-line.fading { opacity: 0; }
.ah-tip-ico { height: calc(var(--hu) * 9); width: auto; image-rendering: pixelated; flex: none; }
.ah-tip-rest { visibility: hidden; }
.ah-cursor { display: inline-block; width: calc(var(--hu) * 4.5); height: calc(var(--hu) * 6.5); background: currentColor; animation: ah-blink 1s steps(1) infinite; }
@keyframes ah-blink { 50% { opacity: 0; } }

/* ---------- results ---------- */
.ah-over {
  justify-content: center;
  gap: calc(var(--hu) * 11);
  padding: calc(var(--hu) * 40) calc(var(--hu) * 12) calc(var(--hu) * 12);
}
.ah-title--over { margin: 0 calc(var(--hu) * -12); }
.ah-score { display: flex; align-items: baseline; justify-content: center; gap: calc(var(--hu) * 5); font-size: calc(var(--hu) * 7); line-height: 1; color: #f4f6ff; white-space: nowrap; }
.ah-score-value { font-size: calc(var(--hu) * 15); color: #f7931a; text-shadow: 0 0 calc(var(--hu) * 6) rgba(247, 147, 26, 0.6), 0 calc(var(--hu) * 1.5) 0 #7a3b00; }
.ah-details { padding: calc(var(--hu) * 8) calc(var(--hu) * 7); font-size: calc(var(--hu) * 6.5); line-height: 1.75; color: #c9d2ff; text-wrap: pretty; }   /* (no lone word on the last line) */
.ah-quip { max-width: calc(var(--hu) * 252); font-size: calc(var(--hu) * 6.5); line-height: 1.6; color: #9aa3bf; text-wrap: balance; }
.ah-over-act { display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * 9); }
.ah-over-act .ah-keywrap { margin-top: 0; }
.ah-row { display: flex; justify-content: center; gap: calc(var(--hu) * 6); }

/* the blue buttons: HOME, SHARE, ARCADE, RESTART */
.ah-btn2 {
  box-sizing: border-box;
  height: calc(var(--hu) * 24);
  padding: 0 calc(var(--hu) * 7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hu) * 4);
  border: max(1.5px, calc(var(--hu) * 1.5)) solid #2b55ff;
  border-radius: calc(var(--hu) * 4);
  background: #070b22;
  box-shadow: 0 0 calc(var(--hu) * 6) rgba(43, 85, 255, 0.4);
  color: #fff;
  font-family: var(--font-arcade);
  font-size: calc(var(--hu) * 6.5);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.ah-btn2:active { transform: translateY(1px); }
.ah-btn2:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .ah-btn2:hover { border-color: #5a7dff; } }
@media (pointer: coarse) { .ah-btn2 { min-height: 40px; } }

/* ---------- a wide game on a phone held sideways: the same parts in two columns (home.js _layout) ---------- */
.ah-land .ah-home, .ah-land .ah-over {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: calc(var(--hu) * 18);
  padding: 0 calc(var(--hu) * 12) calc(var(--hu) * 6);
}
.ah-land .ah-col {
  width: calc(var(--hu) * 264);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--hu) * 5);
}
.ah-land .ah-col2 { padding-top: calc(var(--hu) * 44); }      /* clear of EN | ES and the sound button */
.ah-land .ah-col2 .ah-controls { margin-top: 0; }
.ah-land .ah-over .ah-col { justify-content: center; gap: calc(var(--hu) * 11); }
.ah-land .ah-over .ah-col1 { padding-top: calc(var(--hu) * 30); }
.ah-land .ah-over { padding-top: 0; }

/* ---------- pause: inside the game, the same buttons on a blue panel ---------- */
.screen.ah-pause { background: rgba(2, 4, 14, 0.72); }
.ah-pause .pause-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--hu) * 12);
  padding: calc(var(--hu) * 14) calc(var(--hu) * 18) calc(var(--hu) * 16);
  border: max(1.5px, calc(var(--hu) * 1.5)) solid #2b55ff;
  border-radius: calc(var(--hu) * 6);
  background: rgba(9, 14, 44, 0.95);
  box-shadow: 0 0 calc(var(--hu) * 12) rgba(43, 85, 255, 0.45);
}
.ah-pause .screen-title {
  font-size: calc(var(--hu) * 16);
  line-height: 1;
  color: #ffb12e;
  text-shadow: 0 calc(var(--hu) * 1) 0 #a8420a, calc(var(--hu) * 1) calc(var(--hu) * 2.5) 0 #3a1200, 0 0 calc(var(--hu) * 8) rgba(247, 147, 26, 0.55);
}
.ah-pause .btn-stack { display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * 8); }
.ah-pause .ah-keywrap { margin-top: 0; }
.ah-pause .ah-key { width: calc(var(--hu) * 150); }
.ah-pause .ah-btn2 { width: calc(var(--hu) * 150); }

@media (prefers-reduced-motion: reduce) {
  .ah-keywrap, .ah-shine, .ah-cursor, .ah-best--new { animation: none; }
  .ah-shine { display: none; }
}