/* ── OCTOPONG · how to play ──────────────────────────────────
   Built from References/How To Play, which is a poster: a CORE
   RULES column, a big labelled arena diagram, a facts rail, and a
   strip of mode cards under a gold CTA. The first fold reproduces
   that layout; the hazard and power-up detail continues below it.

   Everything structural comes from theme.css (.panel, .panel-head,
   .btn, .pill, .chip, .pips, .scr-title, the .m-* mode colours).
   Only what does not exist there is defined here, prefixed .how- or
   scoped inside .howto so nothing leaks into another screen.

   TWO TRAPS, both already paid for once on this project:

     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, flooding the face. The chained
        zero-blur drop-shadow chain (theme.css .edged) follows the
        clipped silhouette exactly and sits outside the element.

     2. `outline` is painted BY the element, so clip-path clips it
        away and a chevron button gets no focus ring at all. Focus
        on clipped controls here swaps --edge in that same chain.
   ─────────────────────────────────────────────────────────── */

.howto{
  --h-label:#a9c7dd;        /* 10.0:1 on the card face  */
  --cut:14px;
  grid-template-rows:auto minmax(0,1fr) auto;
  font-size:calc(16px * var(--op-ui-scale,1));
}

/* the arena keeps rendering behind this; hold it down hard enough
   that 12px body text still reads over it */
.howto::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,18,.95), rgba(5,9,24,.92) 40%, rgba(4,7,18,.96)),
    radial-gradient(ellipse 80% 55% at 50% 30%, rgba(24,46,96,.6), rgba(4,7,18,0) 72%);
  /* NO backdrop-filter here. pause.css can afford one because the
     simulation is frozen behind it; these two screens sit over a LIVE
     attract match, so a full-screen blur would be re-evaluated against
     a 4K WebGL backdrop every frame for a difference the dim gradient
     above already hides. The 60fps floor is not worth it. */
}

/* ── head ─────────────────────────────────────────────────── */

.how-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:18px; padding:12px 22px 4px; zoom:var(--op-ui-scale,1);
}
.how-title{ text-align:center; }
.how-title .scr-title{ margin:0; -webkit-text-stroke-width:5px; }
.how-tag{
  margin:5px 0 0; font:800 12px/1 var(--ui); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim);
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.how-nav{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.how-nav .pill{ padding:8px 12px; font-size:11.5px; letter-spacing:.1em; }

/* ── body ─────────────────────────────────────────────────── */

.how-body{
  min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:8px 22px 20px; display:flex; flex-direction:column; gap:22px;
  zoom:var(--op-ui-scale,1); max-height:calc(100% / var(--op-ui-scale,1));
  scrollbar-width:thin; scrollbar-color:#2c4a86 transparent;
}
.how-body::-webkit-scrollbar{ width:10px; }
.how-body::-webkit-scrollbar-thumb{ background:#2c4a86; border-radius:99px; }
.how-body:focus{ outline:none; }
.how-body:focus-visible{ outline:3px solid var(--aqua); outline-offset:-3px; }

/* the poster fold: rules | arena | facts, exactly as the reference
   frames it */
.how-poster{
  display:grid; grid-template-columns:minmax(250px,1fr) minmax(320px,1.25fr) minmax(250px,1fr);
  gap:16px; align-items:start;
}

/* ── core rules ──────────────────────────────────────────── */

.how-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.how-rules{ display:flex; flex-direction:column; gap:2px; }
.how-rule{
  display:flex; gap:13px; padding:11px 0;
  border-bottom:2px solid rgba(140,190,230,.16);
}
.how-rule:last-child{ border-bottom:0; padding-bottom:2px; }
.how-rule-art{ flex:none; width:46px; height:46px; display:grid; place-items:center; }
.how-rule-art.aqua{ color:var(--aqua); }
.how-rule-art.rose{ color:var(--hot); }
.how-rule-art.gold{ color:var(--gold); }
.how-rule h4{
  margin:0 0 4px; font:900 15px/1.1 var(--display); letter-spacing:.04em;
  color:var(--gold); text-transform:uppercase;
  -webkit-text-stroke:3px var(--outline); paint-order:stroke fill;
}
.how-rule p{ margin:0; font:600 12.5px/1.55 var(--ui); color:var(--h-label); }

/* ── the arena panel ─────────────────────────────────────── */

.how-arenapanel{ display:flex; flex-direction:column; gap:10px; }
.how-arenawrap{ position:relative; display:grid; place-items:center; }
/* brand.js's real mark, sunk behind the diagram the way the
   reference glows one into the arena floor */
.how-emblem{
  position:absolute; width:36%; aspect-ratio:1; pointer-events:none;
  top:44%; left:50%; transform:translate(-50%,-50%);
}
.how-emblem svg{ width:100%; height:100%; stroke-width:26; }
.how-arena{ width:100%; height:auto; max-height:44vh; display:block; }
.how-ball{ transform-origin:170px 168px; animation:howOrbit 9s linear infinite; }
@keyframes howOrbit{ to{ transform:rotate(360deg); } }
/* the second identity channel, only when the switch is on */
.how-seatglyph{ display:none; }
html.op-a11y-glyphs .how-seatglyph{ display:inline; }

.how-legend{ display:flex; flex-direction:column; gap:6px; }
.how-leg{ display:flex; align-items:flex-start; gap:9px; }
.how-leg i{
  flex:none; width:15px; height:15px; margin-top:2px; border-radius:4px;
  background:var(--c); box-shadow:0 0 0 2.5px var(--outline);
}
/* the pearl swatch is round: PADDLE and PEARL are both near-white, so
   shape is what tells the two legend entries apart, not colour */
.how-leg.round i{ border-radius:50%; }
.how-leg span{ font:600 12px/1.45 var(--ui); color:var(--h-label); }
.how-leg b{
  display:block; font:800 11px/1.5 var(--ui); letter-spacing:.14em;
  color:var(--ink); text-transform:uppercase;
}

/* ── the facts rail ──────────────────────────────────────── */

.how-rail{ display:flex; flex-direction:column; gap:14px; }
.how-lead{
  margin:0 0 6px; font:900 16px/1.3 var(--display); letter-spacing:.02em;
  color:var(--gold); -webkit-text-stroke:3px var(--outline); paint-order:stroke fill;
}
.how-note{ margin:0; font:600 12.5px/1.6 var(--ui); color:var(--h-label); }
.how-note b{ color:var(--ink); }

.how-ctls{ display:flex; flex-direction:column; gap:8px; }
.how-ctl{ display:flex; align-items:center; gap:11px;
          font:600 12.5px/1.35 var(--ui); color:var(--h-label); }
.how-keys{ flex:none; display:flex; gap:4px; min-width:96px; }
.how-kbd{
  display:grid; place-items:center; min-width:32px; height:29px; padding:0 8px;
  background:linear-gradient(180deg,#e9f4ff,#a9c2da); color:#0a1430;
  font:900 11.5px/1 var(--ui); letter-spacing:.05em; border-radius:6px;
  box-shadow:0 0 0 2.5px var(--outline), 0 3px 0 rgba(0,0,0,.55);
}
.how-kbd.aqua{ background:linear-gradient(180deg,var(--aqua-hi),var(--aqua)); color:#05221f; }
.how-kbd.gold{ background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#2a1500; }
.how-kbd.rose{ background:linear-gradient(180deg,#ffb0d0,var(--hot)); color:#3d0018; }

/* the rail's HAZARDS / POWER-UPS teasers: a line, then a row of the
   real diagrams that jumps to the full section */
.how-teaser .how-note{ margin-bottom:9px; }
.how-teaserrow{
  display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px;
  border:0; cursor:pointer; background:rgba(8,18,44,.75);
  box-shadow:inset 0 0 0 2px rgba(120,170,220,.18);
  transition:background .12s;
}
.how-teaserrow:hover{ background:rgba(20,40,84,.85); }
.how-teaserrow:focus{ outline:3px solid var(--aqua); outline-offset:2px; }
.how-teaserrow > span{ display:grid; place-items:center; }
.how-more{ margin-left:auto; color:var(--aqua); }

.how-dmg{ display:flex; align-items:flex-start; gap:12px; }
.how-dmg-art{ flex:none; width:40px; height:40px; display:grid; place-items:center; }
.how-pips{ margin-bottom:8px; }
.how-pips i{ width:22px; height:11px; }

/* ── the sections below the fold ─────────────────────────── */

.how-sec{ display:flex; flex-direction:column; gap:10px; scroll-margin-top:8px; }
.how-sec-h{
  display:flex; align-items:center; gap:10px; margin:0;
  font:900 clamp(20px,2.3vw,28px)/1 var(--display); text-transform:uppercase;
  letter-spacing:.03em;
  -webkit-text-stroke:5px var(--outline); paint-order:stroke fill;
  filter:drop-shadow(0 4px 0 rgba(3,6,16,.6));
}
.how-sec-h svg{ -webkit-text-stroke:0; flex:none; }
.how-sec-h.haz{ color:var(--gold); }
.how-sec-h.boon{ color:#dff7ff; }
.how-sec-h.mode{ color:var(--aqua); }
.how-sec-lead{ margin:0; font:600 13px/1.6 var(--ui); color:var(--h-label); max-width:78ch; }
.how-sec-lead b{ color:var(--ink); }

.how-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:13px;
}
.how-card{ display:flex; flex-direction:column; gap:7px; }
.how-card-art{ width:54px; height:54px; display:block; }
.how-card h4{
  margin:2px 0 0; font:900 17px/1 var(--display); letter-spacing:.05em;
  -webkit-text-stroke:3px var(--outline); paint-order:stroke fill;
}
.how-card.haz h4{ color:var(--gold); }
.how-card.boon h4{ color:#dff7ff; }
.how-card.haz{ --edge:var(--outline); }
.how-blurb{
  margin:0; font:800 12px/1.4 var(--ui); letter-spacing:.03em;
  color:var(--ink); text-transform:uppercase;
}
.how-card .how-note{ flex:1; }
.how-stats{ display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.how-stats .chip{
  padding:5px 10px; font-size:9.5px; letter-spacing:.12em; gap:5px;
  color:var(--h-label);
}
.how-stats .chip b{ color:var(--gold); font-size:11px; }

/* ── mode cards ──────────────────────────────────────────── */

.how-modes{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
}
.how-mode{
  padding:14px 15px; display:flex; flex-direction:column; gap:7px;
  background:linear-gradient(180deg,#1c3667,#101f42);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  --edge:var(--outline); --lift:0 5px 0 rgba(3,6,16,.55);
  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));
}
.how-mode h4{ margin:0; font:900 18px/1 var(--display); letter-spacing:.04em;
              -webkit-text-stroke:3px var(--outline); paint-order:stroke fill; }
.how-mode p{ margin:0; font:600 12.5px/1.55 var(--ui); color:var(--h-label); }
/* seat-family accents, same mapping as theme.css's mode grid */
.how-mode.m-sab{ --edge:var(--aqua); }   .how-mode.m-cha{ --edge:var(--violet); }
.how-mode.m-ars{ --edge:var(--gold); }   .how-mode.m-mae{ --edge:var(--hot); }
.how-mode.m-cla{ --edge:#dff7ff; }       .how-mode.m-pow{ --edge:var(--lime); }

/* ── pro tip ─────────────────────────────────────────────── */

.how-tipbar p{ margin:0; font:600 13px/1.6 var(--ui); color:var(--h-label); }

/* ── foot ─────────────────────────────────────────────────── */

.how-foot{
  display:flex; justify-content:center; padding:6px 22px 18px;
  zoom:var(--op-ui-scale,1);
}
.how-foot .btn.play{ font-size:clamp(19px,2.1vw,26px); padding:15px 34px 15px 22px; }
.how-foot .play-tri{ display:grid; place-items:center; width:26px; height:26px; }
.how-foot .play-tri svg{ width:26px; height:26px; }

.howto .btn.back{ padding:9px 16px; font-size:13px;
  clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%); }
.howto .btn.back svg{ transform:scaleX(-1); }

/* ── focus ────────────────────────────────────────────────
   Clipped controls cannot show an `outline` (trap 2 at the top), so
   they get a brighter --edge in the drop-shadow chain plus an inset
   ring. :focus, not :focus-visible: Chrome leaves focus-visible
   false when focus moves by keyboard after a click. */
.howto .btn:focus,
.howto .pill:focus{
  outline:none; --edge:var(--aqua);
  box-shadow:inset 0 0 0 2.5px rgba(47,230,214,.9);
}
/* theme.css's .btn.play does not read --edge, so the CTA needs its own
   chain. Four zero-blur drop-shadows, not `drop-shadow(0 0 0 3px …)` —
   drop-shadow takes at most three lengths, and a fourth silently
   invalidates the whole filter and takes the button's shadow with it. */
.howto .btn.play:focus{
  filter:
    drop-shadow(3px 0 0 #fff3c4)  drop-shadow(-3px 0 0 #fff3c4)
    drop-shadow(0 3px 0 #fff3c4)  drop-shadow(0 -3px 0 #fff3c4)
    drop-shadow(0 6px 0 rgba(3,6,16,.6));
}

/* ── reduce motion ───────────────────────────────────────────
   settings.css carries the global switch; this is the one animation
   that belongs to this screen. */
html.op-a11y-still .how-ball{ animation:none; }
@media (prefers-reduced-motion:reduce){ .how-ball{ animation:none; } }

/* ── high contrast ───────────────────────────────────────── */
html.op-a11y-contrast .howto{ --h-label:#e2f4ff; }
html.op-a11y-contrast .howto::before{ background:rgba(2,4,10,.97); backdrop-filter:none; }
html.op-a11y-contrast .how-emblem{ display:none; }

/* ── narrow / short ──────────────────────────────────────── */

@media (max-width:1180px){
  .how-poster{ grid-template-columns:minmax(260px,1fr) minmax(300px,1.2fr); }
  .how-rail{ grid-column:1 / -1; display:grid;
             grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
}
@media (max-width:860px){
  .how-poster{ grid-template-columns:1fr; }
  .how-head{ grid-template-columns:1fr; gap:8px; }
  .how-nav{ justify-content:center; }
}
@media (max-height:760px){
  /* 8px, not 6: the HOW TO PLAY title's line box is ~19px taller than
     its h2 (a 900-weight display face with a 5px stroke carries a lot
     of leading), so at 6px the top of the span box crossed y=0 and the
     overflow sweep flagged it on every short window. The GLYPHS were
     never cut — screenshotted at 1280x720 to be sure — but a title box
     hanging off the top of the document is not something to leave in
     the report as "probably fine". */
  .how-head{ padding:11px 22px 2px; }
  .how-arena{ max-height:36vh; }
}