/* ── OCTOPONG · pause overlay ────────────────────────────────
   Built from References/Gameplay: a two-tone outlined PAUSED
   wordmark on a magenta shard, a vertical action stack, and a
   right-hand rail of MATCH SUMMARY / QUICK CONTROLS / PRO TIP.
   The arena stays visible and dimmed on the left.

   Everything structural comes from theme.css (.panel, .btn,
   .panel-head, .chip, .pill, .edged). Only the things that do not
   exist there are defined here, and they are all prefixed .pause-
   or scoped inside .pause so nothing leaks into another screen.

   TWO TRAPS, both already paid for once:

     1. Do NOT outline a clipped shape with a ::before at
        z-index:-1. clip-path and filter each open a stacking
        context, and a negative-z child of one paints ABOVE its
        parent's background. Use the chained zero-blur
        drop-shadow chain (theme.css .edged) instead.

     2. `outline` is painted BY the element, so clip-path clips it
        away — theme.css's `.btn:focus-visible{outline:...}` is
        invisible on a chevron button. Focus here is drawn with a
        thicker, brighter --edge in the drop-shadow chain, which
        sits outside the clip and therefore cannot be hidden.
   ─────────────────────────────────────────────────────────── */

.pause{
  /* local tokens — nothing here overrides a theme token */
  --p-teal:#17708a; --p-teal-lo:#0b4356;
  --p-teal-hi:#1e8aa8; --p-teal-hi-lo:#0e556b;
  --p-label:#a9c7dd;          /* 8.7:1 on panel — safe for 11px caps  */
  --p-rose:#ff8fbc;           /* 5.8:1 on panel — the readable magenta */
  --p-face:#0f1e42;
  --p-line:rgba(140,190,230,.20);
  --p-scale:1;
  font-size:calc(16px * var(--p-scale));
  /* one row, filled — the body centres itself. minmax(0,…) rather than a
     bare 1fr so the row cannot floor at the body's min-content and push
     RESUME past the fold on a short window; see theme.css .screen. */
  grid-template-rows:minmax(0,1fr);
}

/* theme.css's .panel-head is white on #ff3d8b, which measures 3.34:1.
   Same shape, darker face, 5.4:1. Scoped so no other screen shifts. */
.pause .panel-head{
  background:linear-gradient(180deg,#c8206a,#8f0f4a);
  font-size:14px; letter-spacing:.13em; padding:10px 18px;
}

/* keep the arena readable behind the overlay: light on the left,
   where the ring shows through, heavy under the text on the right */
.pause::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,7,18,.62) 0%, rgba(4,7,18,.48) 22%,
                    rgba(4,7,18,.70) 40%, rgba(4,7,18,.88) 58%, rgba(4,7,18,.93) 100%),
    radial-gradient(ellipse 60% 70% at 22% 52%, rgba(4,7,18,0) 0%, rgba(4,7,18,.55) 100%);
  backdrop-filter:blur(2px) saturate(.85);
}

/* ── layout ──────────────────────────────────────────────────
   [ arena hole | action column | info rail ] — mirrors the
   reference, which keeps the ring on the left of the menu. */
.pause-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(400px,31vw) minmax(320px,24vw);
  align-items:center; gap:26px; padding:14px 22px; min-height:0;
}
.pause-hole{ pointer-events:none; }

.pause-center{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  /* UI SCALE: zoom actually resizes everything, where a font-size on the
     wrapper would not — almost every rule below is authored in px.
     max-height has to be divided back out or the column overflows. */
  zoom:var(--p-scale); max-height:calc(100% / var(--p-scale));
  overflow-y:auto; overflow-x:hidden; padding:8px 6px 10px;
  scrollbar-width:thin; scrollbar-color:#2c4a86 transparent;
}
.pause-center::-webkit-scrollbar{ width:8px; }
.pause-center::-webkit-scrollbar-thumb{ background:#2c4a86; border-radius:99px; }

/* ── the PAUSED wordmark ─────────────────────────────────── */
.pause-mark{ position:relative; display:inline-block; padding:20px 34px 24px; }
.pause-shard{
  position:absolute; inset:-4% -6%;
  background:linear-gradient(160deg,#ff6fb0,#e02a76 55%,#a5164f);
  clip-path:polygon(
    1% 34%, 8% 13%, 14% 28%, 23% 5%, 32% 23%, 41% 7%, 50% 21%, 59% 3%,
    68% 23%, 77% 9%, 85% 27%, 93% 15%, 99% 35%, 92% 47%, 100% 61%,
    90% 71%, 96% 88%, 83% 81%, 77% 97%, 67% 83%, 57% 99%, 49% 83%,
    39% 97%, 31% 81%, 21% 95%, 14% 79%, 5% 87%, 9% 69%, 0% 59%, 6% 45%);
  --edge:var(--outline);
  filter:
    drop-shadow(2.5px 0 0 var(--edge))  drop-shadow(-2.5px 0 0 var(--edge))
    drop-shadow(0 2.5px 0 var(--edge))  drop-shadow(0 -2.5px 0 var(--edge))
    drop-shadow(0 10px 26px rgba(0,0,0,.55));
}
/* a second, aqua shard peeking out behind the magenta one */
.pause-shard.back{
  inset:-9% -11%; background:linear-gradient(160deg,#37d8ff,#1a6fa8);
  opacity:.55; transform:rotate(-1.5deg);
}
.pause-word{
  position:relative; display:block; margin:0;   /* it is an <h2>: kill the UA margin */
  font:900 clamp(52px,5.6vw,92px)/0.94 var(--display);
  letter-spacing:.03em; text-transform:uppercase; text-align:center;
  color:var(--gold);                       /* fallback if text-clip fails */
  /* the stroke must scale with the type — a fixed 8px swallows the
     gradient whole at the small end of the clamp */
  -webkit-text-stroke:.085em var(--outline); paint-order:stroke fill;
  background:linear-gradient(180deg,#fff3bd 8%,#ffc63d 48%,#ef8a18 94%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 0 rgba(3,6,16,.7));
}

/* ── the action stack ────────────────────────────────────── */
.pause-stack{ display:flex; flex-direction:column; gap:10px; width:min(460px,100%); }
.pause-stack .btn{
  width:100%; padding:14px 24px 14px 13px; gap:14px;
  font-size:clamp(16px,1.4vw,22px); letter-spacing:.05em;
  background:linear-gradient(180deg,var(--p-teal),var(--p-teal-lo));
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
}
.pause-stack .btn:hover{ background:linear-gradient(180deg,var(--p-teal-hi),var(--p-teal-hi-lo)); }
.pause-stack .btn .ico{
  width:38px; height:38px; font-size:19px;
  background:linear-gradient(180deg,#26a0bd,#0d5064);
}
.pause .btn .ico svg{ display:block; width:22px; height:22px; }

/* RESUME — the one gold thing on the screen, same weight as the rest */
.pause-stack .btn.primary{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  color:#2a1500; text-shadow:0 1px 0 rgba(255,255,255,.4);
  --edge:var(--outline); --lift:0 5px 0 rgba(3,6,16,.6);
  filter:
    drop-shadow(2px 0 0 var(--edge))  drop-shadow(-2px 0 0 var(--edge))
    drop-shadow(0 2px 0 var(--edge))  drop-shadow(0 -2px 0 var(--edge))
    drop-shadow(var(--lift)) drop-shadow(0 0 20px rgba(255,198,61,.45));
}
.pause-stack .btn.primary:hover{ background:linear-gradient(180deg,#fff3c4,var(--gold-hi) 55%,var(--gold)); }
.pause-stack .btn.primary .ico{
  background:linear-gradient(180deg,#ff6fb0,#c01e5e); color:#fff;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45);
}
/* the theme's .btn.danger has the same specificity as .pause-stack .btn,
   so it needs saying again here or the teal face wins on source order */
.pause-stack .btn.danger{
  background:linear-gradient(180deg,#ff7ab5,var(--hot));
  color:#3d0018; text-shadow:0 1px 0 rgba(255,255,255,.32);
}
.pause-stack .btn.danger:hover{ background:linear-gradient(180deg,#ff6ba7,#d42a6c); }
.pause-stack .btn.danger .ico{ background:linear-gradient(180deg,#ff9ecb,#a5164f); color:#3d0018; }
.pause-stack hr{
  width:100%; height:0; margin:3px 0; border:0; border-top:2px solid var(--p-line);
}

/* ── focus. See trap 2 at the top of this file. ──────────── */
/* :focus, not :focus-visible — moving focus with the keyboard AFTER a
   click leaves :focus-visible false in Chrome, and a menu whose current
   item is invisible is unusable. This is a modal game menu: always show it. */
.pause :is(.btn,.pill,.tile):focus{
  outline:none; --edge:#8ff9ee;
  /* belt and braces: the outer aqua edge rides the drop-shadow chain,
     and an INSET ring guarantees a visible focus even where the clip
     silhouette makes the outer one hard to read */
  box-shadow:inset 0 0 0 3px #8ff9ee, inset 0 0 0 7px rgba(2,8,18,.92);
  filter:
    drop-shadow(3px 0 0 var(--edge))  drop-shadow(-3px 0 0 var(--edge))
    drop-shadow(0 3px 0 var(--edge))  drop-shadow(0 -3px 0 var(--edge))
    drop-shadow(0 0 16px rgba(143,249,238,.95))
    drop-shadow(var(--lift));
}
.pause .sw:focus,
.pause .rng:focus{
  outline:3px solid #8ff9ee; outline-offset:3px;   /* unclipped — outline is fine here */
}

.pause-hint{
  display:flex; align-items:center; gap:9px; margin:2px 0 0;
  font:800 12px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--p-label);
}
.kbd{
  display:inline-grid; place-items:center; min-width:34px; height:24px; padding:0 8px;
  background:linear-gradient(180deg,#22406f,#101f42); color:#eaf6ff;
  font:800 11px/1 var(--ui); letter-spacing:.08em; border-radius:5px;
  box-shadow:0 0 0 2px var(--outline), 0 3px 0 rgba(0,0,0,.55);
}

/* ── right rail ──────────────────────────────────────────── */
.pause-rail{
  display:flex; flex-direction:column; gap:14px; width:100%;
  zoom:var(--p-scale); max-height:calc(100% / var(--p-scale));
  overflow:auto; padding:6px 4px 6px 0;
  scrollbar-width:thin; scrollbar-color:#2c4a86 transparent;
}
.pause-rail::-webkit-scrollbar{ width:8px; }
.pause-rail::-webkit-scrollbar-thumb{ background:#2c4a86; border-radius:99px; }
.pause-rail .panel{ overflow:visible; }
.pause-rail .panel-head{ display:flex; align-items:center; gap:8px; }

/* label / value grid used by MATCH SUMMARY */
.kv{ margin:0; display:grid; grid-template-columns:1fr auto; gap:9px 14px; align-items:baseline; }
.kv dt{
  font:800 11px/1.25 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--p-label); margin:0;
}
.kv dd{
  margin:0; text-align:right;
  font:900 17px/1 var(--display); letter-spacing:.02em; color:var(--ink);
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
.kv dd.big{ font-size:22px; color:var(--gold); }
.kv dd.aqua{ color:var(--aqua-hi); }
.kv .sep{ grid-column:1 / -1; height:0; border-top:2px solid var(--p-line); margin:2px 0; }

.pips-row{ display:flex; gap:4px; justify-content:flex-end; }
.pips-row i{
  width:18px; height:9px; border-radius:2px; background:var(--lime);
  box-shadow:0 0 0 1.5px var(--outline);
}
.pips-row i.off{ background:#26365c; }

/* QUICK CONTROLS */
.ctl{ display:flex; flex-direction:column; gap:10px; }
.ctl-row{ display:flex; align-items:center; gap:11px; }
.ctl-key{
  flex:none; min-width:62px; height:26px; padding:0 9px;
  display:grid; place-items:center;
  font:900 11px/1 var(--ui); letter-spacing:.08em; color:#08170c;
  background:linear-gradient(180deg,#b6ff6e,#6fce2f);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  box-shadow:0 0 0 2px var(--outline), 0 3px 0 rgba(0,0,0,.5);
}
.ctl-key.gold{ background:linear-gradient(180deg,#ffdf7a,#e0a01c); color:#2a1500; }
.ctl-key.aqua{ background:linear-gradient(180deg,#7ff5ea,#12a094); color:#04231f; }
.ctl-key.rose{ background:linear-gradient(180deg,#ff9ec8,#c8256b); color:#33000f; }
.ctl-row span{ font:700 13px/1.35 var(--ui); color:var(--ink); }

/* PRO TIP */
.tip{ display:flex; align-items:flex-start; gap:12px; }
.tip-mascot{
  flex:none; width:60px; height:60px; display:grid; place-items:center;
  filter:drop-shadow(0 3px 0 rgba(3,6,16,.6));
}
.tip-mascot svg{ width:100%; height:100%; display:block; }
.tip p{ margin:0; font:700 13px/1.5 var(--ui); color:var(--ink); }
.tip b{ display:block; margin-bottom:3px; font:900 14px/1 var(--display);
        letter-spacing:.06em; color:var(--gold); }

/* ── sub-pages (HOW TO PLAY / AUDIO / ACCESSIBILITY / confirms) ──
   Every control on the root stack leads somewhere real. These are
   where the ones this screen owns actually live. */
.pause-page{ width:min(460px,100%); margin-top:6px; display:flex; flex-direction:column; gap:12px; }
.pause-page h3{
  margin:0; font:900 clamp(20px,2vw,28px)/1 var(--display);
  letter-spacing:.04em; text-transform:uppercase; color:var(--aqua);
  -webkit-text-stroke:4px var(--outline); paint-order:stroke fill;
}
.pause-page h3.warn{ color:var(--hot); }
.pause-page .lead{ margin:0; font:700 13.5px/1.55 var(--ui); color:var(--ink); }
.pause-page .note{
  margin:0; font:700 12px/1.5 var(--ui); color:var(--p-label);
  padding:9px 12px; background:rgba(9,18,40,.75);
  border-left:4px solid var(--gold);
}
.pause-page .note.warn{ border-left-color:var(--hot); color:#ffd0e2; }
.pause-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }
.pause-actions .btn{ flex:1 1 auto; justify-content:center; padding:11px 24px 11px 18px; }

/* rules list */
.rules{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.rules li{ display:flex; gap:11px; align-items:flex-start;
           font:700 13px/1.5 var(--ui); color:var(--ink); }
.rules .n{
  flex:none; width:24px; height:24px; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--aqua),var(--aqua-lo)); color:#04231f;
  font:900 12px/1 var(--ui);
  clip-path:polygon(50% 0,100% 28%,100% 72%,50% 100%,0 72%,0 28%);
}

/* a settings row: label on the left, control on the right */
.opt-row{
  display:flex; align-items:center; gap:14px; padding:9px 0;
  border-bottom:2px solid var(--p-line);
}
.opt-row:last-child{ border-bottom:0; }
.opt-row .lbl{ flex:1; min-width:0; }
.opt-row .lbl b{ display:block; font:800 13px/1.25 var(--ui); letter-spacing:.05em;
                 text-transform:uppercase; color:var(--ink); }
.opt-row .lbl small{ display:block; margin-top:2px; font:600 11.5px/1.4 var(--ui);
                     color:var(--p-label); letter-spacing:.01em; }

/* toggle switch */
.sw{
  flex:none; width:64px; height:30px; border:0; cursor:pointer; padding:0;
  position:relative; border-radius:99px; background:#0a1430;
  box-shadow:inset 0 0 0 2.5px var(--outline), 0 3px 0 rgba(0,0,0,.5);
  transition:background .14s;
}
.sw::after{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:linear-gradient(180deg,#93b2d6,#4d6d99);
  box-shadow:0 0 0 2px var(--outline);
  transition:transform .16s cubic-bezier(.3,1.5,.5,1), background .14s;
}
.sw[aria-checked="true"]{ background:linear-gradient(180deg,#2fe6d6,#128d85); }
.sw[aria-checked="true"]::after{ transform:translateX(34px);
  background:linear-gradient(180deg,#ffffff,#cfe9f5); }

/* slider */
.rng{
  flex:none; width:132px; height:22px; -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer;
}
.rng::-webkit-slider-runnable-track{
  height:12px; border-radius:99px; background:#0a1430;
  box-shadow:inset 0 0 0 2px var(--outline);
}
.rng::-moz-range-track{
  height:12px; border-radius:99px; background:#0a1430;
  box-shadow:inset 0 0 0 2px var(--outline);
}
.rng::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-4px;
  border-radius:50%; background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  box-shadow:0 0 0 2.5px var(--outline);
}
.rng::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  box-shadow:0 0 0 2.5px var(--outline);
}
.opt-val{
  flex:none; min-width:44px; text-align:right;
  font:900 14px/1 var(--display); color:var(--gold); text-shadow:0 2px 0 rgba(0,0,0,.5);
}

/* segmented choice, reusing the theme .pill */
.seg{ display:flex; gap:6px; flex:none; }
.seg .pill{ min-width:38px; padding:8px 11px; font-size:12px; }

/* the live region that announces what just happened */
.pause-say{
  margin:0; min-height:18px; text-align:center;
  font:800 12px/1.4 var(--ui); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold);
}

/* ── accessibility options this screen actually implements ── */
.pause.a11y-glyphs .seat-glyph{ display:inline; }
.seat-glyph{ display:none; margin-left:5px; font-size:.85em; opacity:.95; }

.pause.a11y-contrast{ --p-face:#050b1c; }
.pause.a11y-contrast::before{ background:rgba(3,5,14,.94); backdrop-filter:none; }
.pause.a11y-contrast .panel{ background:linear-gradient(180deg,#0f1f42,#060d22); }
.pause.a11y-contrast .btn::after{ display:none; }
.pause.a11y-contrast .btn{ --edge:#dff7ff; }
.pause.a11y-contrast .kv dt,
.pause.a11y-contrast .opt-row .lbl small{ color:#dff7ff; }

.pause.a11y-still *,
.pause.a11y-still *::before,
.pause.a11y-still *::after{ transition:none !important; animation:none !important; }
.pause.a11y-still .btn:hover{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .pause *,.pause *::before,.pause *::after{ transition:none !important; animation:none !important; }
  .pause .btn:hover{ transform:none; }
}

/* ── narrow / short ──────────────────────────────────────── */
@media (max-width:1150px){
  .pause-body{ grid-template-columns:minmax(360px,1fr) minmax(280px,34vw); gap:18px; }
  .pause-hole{ display:none; }
}
@media (max-width:820px){
  .pause-body{ grid-template-columns:1fr; align-items:start; overflow:auto; padding:0 14px 14px; }
  .pause-rail{ max-height:none; overflow:visible; }
  .pause-center{ max-height:none; overflow:visible; }
}
@media (max-height:760px){
  .pause-mark{ padding:12px 26px 14px; }
  .pause-word{ font-size:clamp(38px,4.2vw,58px); }
  .pause-stack{ gap:7px; }
  .pause-stack .btn{ padding:9px 20px 9px 10px; font-size:14px; }
  .pause-stack .btn .ico{ width:28px; height:28px; font-size:15px; }
}

/* ── PAUSE MUST NOT READ THROUGH SETTINGS / HOW TO PLAY ──────
   Measured, not guessed: opening SETTINGS from the pause menu leaves
   FOUR screens on at once — `hud`, `tray-layer`, `pause`, `settings`
   — because main.js `openSettings()` / `openHowTo()` (unlike
   `_openScreen()`, which hides the menu and the mode grid first) open
   the overlay without standing the pause screen down. The pause rail
   and the big RESUME chevron then read straight up through the
   settings scrim. Same for HOW TO PLAY.

   THE REAL FIX IS ONE LINE IN main.js AND IT IS IN THE REPORT —
   src/gfx/main.js is not this agent's to edit. This rule is the
   safety net, and it is deliberately narrow: it names the two
   screens that are actually stacked on top of pause rather than
   hiding pause under "any later screen", which would also catch the
   results overlay and the tray. `visibility` rather than `display`
   so nothing inside is re-laid-out and the reveal costs no reflow;
   pause keeps its own state and comes back untouched when the
   overlay closes.

   If main.js is fixed, this rule becomes a no-op rather than a
   conflict — pause will already be off by the time settings is on. */
#ui .screen.pause.on:has(~ .screen.settings.on),
#ui .screen.pause.on:has(~ .screen.howto.on){
  visibility:hidden;
}

/* ── the close hint reads for the device holding it ──────────
   "Press ESC to close" was the only exit instruction on screen, and
   a phone has no Esc. Both strings ship and the media query picks;
   a JS pointer test would be evaluated once and then be wrong for a
   convertible that gets folded into a tablet mid-match. */
.pause-hint-tap{ display:none; }
@media (pointer: coarse){
  .pause-hint-key{ display:none; }
  .pause-hint-tap{ display:inline; }
}
.pause-hint-tap b{ color:var(--gold,#ffc63d); }