/* play.css · the shell every weekly game wears
   =========================================================================
   Loaded after brand.css and depth.css. It styles the board, the HUD, the
   options, the clock and the end screen, so a game file ships content and
   nothing else.

   Same two rules as depth.css: no gradients, and nothing here may hide
   information. Right and wrong are marked by shape and by words as well as
   by color, because a red border and a green border are the same border to a
   colorblind reader.
   ========================================================================= */

.play{
  position:relative;background:var(--burg-deep);border-radius:20px;
  padding:18px 18px 22px;color:var(--on-dark);overflow:hidden;isolation:isolate;
  min-height:440px;display:flex;flex-direction:column}
.play > *{position:relative;z-index:2}

/* the particle layer. never interactive, never in the way */
canvas.play-fx{position:absolute;inset:0;z-index:5;pointer-events:none}

/* ---- the HUD ------------------------------------------------------------ */
.play-hud{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  /* the clock is pinned in the corner, so keep the row out from under it */
  padding-right:74px}
.play-grow{flex:1;min-width:0}
.play-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);
  border:1px solid var(--burg-line);border-radius:99px;padding:7px 14px;
  font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--on-dark-dim)}
.play-chip b{color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
.play-combo{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.11)}
.play-mult{font-style:normal;font-size:11px;font-weight:800;color:var(--red-on-dark);
  letter-spacing:.06em}
.play-score b{min-width:3ch;text-align:right;display:inline-block}
/* An element with its own display beats the browser rule for [hidden], so the
   combo chip stayed on screen at a run of one. Say it here or hidden is a lie. */
.play-chip[hidden],.play-ring[hidden],.play-fb[hidden]{display:none!important}

.play-lives{display:inline-flex;gap:5px;align-items:center}
.play-life{width:11px;height:11px;border-radius:50%;background:var(--red);
  box-shadow:var(--glow-soft);transition:.2s}
.play-life.gone{background:rgba(255,255,255,.15);box-shadow:none;transform:scale(.72)}

.play-mute{background:none;border:1px solid var(--burg-line);border-radius:99px;
  color:var(--on-dark-faint);font:700 11px/1 var(--font);letter-spacing:.08em;
  text-transform:uppercase;padding:9px 13px;cursor:pointer;min-height:34px}
.play-mute:hover{color:#fff;border-color:rgba(255,255,255,.34)}

/* ---- the clock ----------------------------------------------------------
   A ring, not a bar. A ring reads as time left at a glance from across a
   room, which is how these get played in a session. */
.play-ring{position:absolute;top:14px;right:16px;width:60px;height:60px;z-index:6}
.play-ring svg{width:60px;height:60px;transform:rotate(-90deg)}
.play-ring circle{fill:none;stroke-width:3.4;stroke-linecap:round}
.play-ring-bg{stroke:rgba(255,255,255,.13)}
.play-ring-fg{stroke:#fff;transition:stroke-dashoffset .12s linear}
.play-ring span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.play-ring.low .play-ring-fg{stroke:var(--red)}
.play-ring.low span{color:var(--red-on-dark)}
.js-motion .play-ring.low{animation:playpulse .85s ease-in-out infinite}
@keyframes playpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* ---- the board ---------------------------------------------------------- */
.play-board{flex:1;display:flex;align-items:stretch}
.play-card{background:var(--glass);border:1px solid var(--burg-line);border-radius:16px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:26px 26px 24px;width:100%;display:flex;flex-direction:column}
.play-kicker{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-faint)}
.play-card h2{color:#fff;font-size:29px;letter-spacing:-.02em;margin:10px 0 8px}
.play-card p{color:var(--on-dark-dim);font-size:14.5px}

/* the prompt. big, because it is the thing being read under a clock */
.play-prompt{color:#fff;font-size:20px;line-height:1.42;font-weight:600;margin:12px 0 4px;
  max-width:62ch}
.play-detail{font-family:var(--mono);font-size:12.6px;line-height:1.7;color:var(--on-dark-dim);
  background:rgba(0,0,0,.26);border:1px solid var(--burg-line);border-radius:10px;
  padding:12px 14px;margin-top:12px;
  /* pre, not pre-wrap. This block is a sample of real data laid out in
     columns, and a wrapped column is not the same information: a phone was
     turning three aligned rows into seven ragged ones. It scrolls inside its
     own box instead, which is what brand.css already does with tables. */
  white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* A figure. Some subjects cannot be taught in text: a question about a
   misleading axis needs the axis. Scrolls inside its own box on a phone so a
   wide chart never drags the page sideways. */
.play-figure{margin-top:14px;background:rgba(0,0,0,.22);border:1px solid var(--burg-line);
  border-radius:12px;padding:16px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* An SVG with a viewBox and no width collapses to whatever the flex line
   gives it, which was about a hundred pixels and unreadable. Give it the
   width and let the viewBox do the scaling. */
.play-figure svg{display:block;width:100%;height:auto}
.play-figure .fig-row{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;
  justify-content:center}
.play-figure .fig-row > figure,
.play-figure .fig-row > svg{flex:1 1 240px;min-width:210px;max-width:330px;margin:0}
.play-figure figcaption,.play-figure .fig-cap{font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-faint);
  text-align:center;margin-top:8px}

/* ---- the options -------------------------------------------------------- */
.play-opts{display:grid;gap:9px;margin-top:16px}
.play-opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:rgba(255,255,255,.05);border:1.5px solid var(--burg-line);border-radius:12px;
  padding:14px 16px;min-height:52px;color:var(--on-dark);cursor:pointer;
  font:600 14.5px/1.45 var(--font);transition:.13s}
.play-opt:hover:not(:disabled){background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.34);
  transform:translateY(-1px)}
.play-opt:active:not(:disabled){transform:scale(.985)}   /* the squash. a press should feel pressed */
.play-opt:disabled{cursor:default}
.play-key{flex:none;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.1);
  border:1px solid var(--burg-line);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--on-dark-dim);margin-top:1px}
.play-lb{flex:1;min-width:0}

/* Right and wrong carry a word as well as a color, set in the corner, so the
   marking survives a colorblind reader and a bad projector. */
.play-opt.right,.play-opt.wrong{position:relative;padding-right:66px}
.play-opt.right{border-color:#2FCB6B;background:rgba(47,203,107,.14);color:#CFF5DF}
.play-opt.wrong{border-color:var(--red);background:rgba(230,0,0,.16);color:#FFD2D2}
.play-opt.right:after,.play-opt.wrong:after{position:absolute;right:14px;top:16px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.play-opt.right:after{content:"right";color:#2FCB6B}
.play-opt.wrong:after{content:"yours";color:var(--red-on-dark)}
.play-opt.right .play-key{background:rgba(47,203,107,.2);border-color:rgba(47,203,107,.4)}

/* ---- feedback ----------------------------------------------------------- */
.play-fb{margin-top:14px;padding:13px 16px;border-radius:11px;font-size:14px;line-height:1.55;
  border-left:4px solid}
.play-fb b{color:#fff}
.play-fb.ok{background:rgba(47,203,107,.12);border-color:#2FCB6B;color:#CFF5DF}
.play-fb.no{background:rgba(230,0,0,.13);border-color:var(--red);color:#FFD2D2}

/* ---- the intro and the end screen --------------------------------------- */
.play-intro,.play-over{align-items:flex-start}
.play-rules{list-style:none;margin:16px 0 20px;padding:0;max-width:60ch}
.play-rules li{position:relative;padding-left:20px;margin-bottom:7px;font-size:13.8px;
  color:var(--on-dark-dim)}
.play-rules li:before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--red)}
.play-go{align-self:flex-start;padding:13px 26px;font-size:15px}
.play-hint{font-size:11.5px;color:var(--on-dark-faint);margin-top:14px;letter-spacing:.02em}

.play-over{align-items:center;text-align:center;justify-content:center}
.play-big{font-size:76px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.04em;
  margin:12px 0 6px;font-variant-numeric:tabular-nums}
.play-sub{font-size:15px;color:var(--on-dark-dim)}
.play-best{margin-top:8px;font-size:13px;font-weight:700;color:var(--red-on-dark)}
.play-actions{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:22px}

/* ---- the score pop ------------------------------------------------------
   Lives on the body, not in the board, so it is never clipped by the card. */
.play-pop{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;
  font-size:27px;font-weight:800;color:#fff;text-shadow:0 0 18px rgba(230,0,0,.85);
  animation:playfly .95s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes playfly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-64%) scale(1.16)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}

/* ---- the shake ----------------------------------------------------------
   A miss moves the world. It is short and it is small, because a big shake
   on a page somebody reads for an hour is a headache, not feedback. */
.play-shake{animation:playshake .38s}
@keyframes playshake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-7px)}45%{transform:translateX(6px)}
  70%{transform:translateX(-4px)}88%{transform:translateX(3px)}}

/* ---- the live region ---------------------------------------------------- */
/* Visible to a screen reader, out of the way of everybody else. Never
   display:none, which would take it out of the accessibility tree too. */
.play-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---- reduced motion -----------------------------------------------------
   The game keeps every rule, every point and every word. It stops moving. */
@media (prefers-reduced-motion: reduce){
  .play-shake,.play-pop,.js-motion .play-ring.low{animation:none}
  .play-opt:hover:not(:disabled),.play-opt:active:not(:disabled){transform:none}
  .play-ring-fg{transition:none}
}

/* ==========================================================================
   PHONE
   --------------------------------------------------------------------------
   Everything for small screens lives at the bottom, and it has to. A media
   query adds no specificity, so a phone rule written above the base rule it
   overrides simply loses, silently, and looks like it works because the
   selector is right. Nineteen declarations in this file were dead that way
   before they were moved down here.
   ========================================================================== */
@media(max-width:560px){
  /* Everything shrinks, and the row still wraps to two: the chips, the lives
     and the sound button come to about 305px and there are 256px to put them
     in once the clock has its corner. That is fine. What was not fine was
     `.play-grow` flinging the sound button to the right of the second row
     with a hand span of empty beside it, which read as a mistake rather than
     a control. Switching the spacer off puts it at the left of row two where
     it looks deliberate. */
  .play-hud{padding-right:54px;gap:6px}
  .play-grow{display:none}
  .play-chip{padding:6px 10px;font-size:11px;gap:5px}
  .play-chip b{font-size:12.5px}
  .play-life{width:9px;height:9px}
  .play-mute{padding:7px 10px;font-size:10px;min-height:30px}
}

@media(max-width:560px){.play-ring{width:48px;height:48px;top:10px;right:10px}
  .play-ring svg{width:48px;height:48px}.play-ring span{font-size:16px}}

@media(max-width:560px){
  .play-prompt{font-size:17px}
  .play-card{padding:20px 17px}
  .play-detail{font-size:11.6px;padding:10px 12px}
  /* On a phone the label goes under the text rather than beside it, so a long
     option keeps its full width instead of growing two lines taller the
     moment it is marked. */
  .play-opt.right,.play-opt.wrong{padding-right:16px;padding-bottom:28px}
  .play-opt.right:after,.play-opt.wrong:after{top:auto;bottom:9px;right:14px}
}

@media(max-width:560px){.play-big{font-size:56px}}