/* SHOOGLE. The identity: ivory dice, ink-blue letters, deep green table,
   one gold verb. The room is gone (venue era retired): a clean modern
   surface, and the dice are the only stars. Serif for ceremony, sans for UI. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#f6f7f6; --ink:#1e2a4a; --text:#272a30; --muted:#79808a; --line:#e2e5e7;
  --felt:#20604b; --feltdark:#194c3b; --brass:#b98a2f; --brasslight:#dfc06a; --brassdim:#efe9dc;
  --frame:#194c3b; --pagetop:#fdfdfc; --pagebot:#edefee;
  --ivory:#f7f3e8; --gold:#e8b33b; --bad:#a63d2c; --good:#2e7d4f;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html{font-size:16px}
body{font-family:var(--sans);color:var(--text);line-height:1.45;
  background:radial-gradient(140% 100% at 50% 0%, var(--pagetop) 0%, var(--paper) 55%, var(--pagebot) 100%) fixed;
  min-height:100vh;padding:10px 10px 30px;-webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  /* a game surface, not a document: no iOS long-press lift preview, no text
     selection loupe. Press-and-hold is a game verb here. */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wrap{max-width:480px;margin:0 auto}

/* header: the title and the score ARE the header (owner: more prominent).
   Baseline alignment so SHOOGLE and the score sit on the same line. */
.top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;padding:0 2px}
/* Wee Shoog sits at the far right, past the score, facing left INTO the
   frame the way a mascot should look toward its game, not off the edge. */
.rightgrp{display:flex;align-items:center;gap:8px;min-width:0}
.brandwrap{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand{font-family:var(--serif);font-size:31px;font-weight:700;letter-spacing:.1em;color:var(--ink);line-height:1}
/* shoogles: the counted move, right under the felt so it reads as ammo for
   the SHOOGLE button below it */
/* the dice pill shares the ceremony line with the clue (owner), so it is a
   flex child there: no auto centering of its own */
.shooglerow{display:flex;align-items:center;flex:0 0 auto;
  background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:3px 11px}
.shooglelabel{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.daylabel{font-size:11px;color:var(--muted);font-weight:600;line-height:1.3}
/* Content pages (/how-to-play/, /faq/). The homepage is the game and only
   the game (owner); the words live on their own pages, which share the
   palette but load no game code. */
.pagebody{background:radial-gradient(140% 100% at 50% 0%, var(--pagetop) 0%, var(--paper) 55%, var(--pagebot) 100%) fixed;
  min-height:100vh;
  /* these are documents, not the game surface: let people select and copy */
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:4px 2px 14px}
.pagebrand{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:.12em;
  color:var(--ink);text-decoration:none}
.playlink{font-size:12.5px;font-weight:700;color:var(--brass);text-decoration:none;
  white-space:nowrap}
.playlink:hover{text-decoration:underline}
.about h1{font-family:var(--serif);font-size:26px;color:var(--ink);margin:0 0 12px;line-height:1.2}
.pagecta{margin:22px 0 10px}
.playbtnlink{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:800;
  color:#3d2c07;background:var(--gold);
  border:none;border-radius:14px;padding:12px 26px;text-decoration:none;
  box-shadow:0 3px 10px rgba(232,179,59,.4)}
.pagenav{font-size:13px;color:var(--muted)}
.pagenav a{color:var(--brass);font-weight:700}
/* footer links on the game page: below everything, out of the way of play */
.footnav{display:flex;gap:16px;justify-content:center;margin-top:10px}
.footnav a{font-size:11px;font-weight:700;color:var(--muted);text-decoration:none}
.footnav a:hover{color:var(--ink)}
.about{max-width:480px;margin:26px auto 0;padding:20px 18px 24px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(4px);color:var(--text)}
.about h2{font-family:var(--serif);font-size:19px;color:var(--ink);margin:18px 0 8px}
.about h2:first-child{margin-top:0}
.about h3{font-family:var(--sans);font-size:13.5px;font-weight:800;color:var(--ink);margin:14px 0 4px}
.about p{font-size:14px;line-height:1.6;margin-bottom:10px}

/* sound toggle lives quietly at the very bottom of the page */
.foot{text-align:center;margin-top:14px;padding-bottom:8px}
.mute{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--muted);
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:4px 12px;cursor:pointer}

/* score, big in the header's right corner */
.scorebox{display:flex;align-items:baseline;gap:6px}
.score{font-family:var(--serif);font-size:42px;font-weight:700;color:var(--ink);line-height:1}
.pts{font-size:12px;color:var(--muted);font-weight:700}
.penalty{font-size:12px;font-weight:700;color:var(--bad)}

/* ceremony line: clue, dice pill and penalty share one row, left aligned
   (owner), sitting just above the felt */
.ceremony{min-height:30px;margin-bottom:5px;display:flex;justify-content:flex-start;
  align-items:center;gap:7px;flex-wrap:wrap;padding:0 2px}
.intel{font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 11px;border:1.5px solid;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.intel.path{color:var(--good);border-color:var(--good);background:#e9f5ee}
.intel.gone{color:var(--bad);border-color:var(--bad);background:#f8eeea}
.intel.glow{box-shadow:0 0 14px 2px rgba(185,138,47,.6)}

/* THE TABLE: one clean modern surface. No frame, no vignette, no room:
   a deep green card with a soft shadow, and the dice do the talking. */
.feltzone{position:relative;margin-bottom:8px}
.feltwrap{position:relative;border-radius:22px;overflow:hidden;background:var(--felt);
  box-shadow:0 12px 32px rgba(25,45,38,.28), 0 2px 8px rgba(25,45,38,.14);
  height:min(50vh,420px)}
.feltwrap canvas{width:100%;height:100%;display:block;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.groove{position:absolute;left:4%;right:4%;bottom:9px;height:1.5px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);opacity:.8}
/* a cleared table answers in light: a warm glow rises from the baize and
   fades. The big variant is the Clean Sweep's. Decorative only. */
.feltglow{position:absolute;inset:0;pointer-events:none;border-radius:15px;opacity:0;
  background:radial-gradient(120% 95% at 50% 88%, rgba(240,205,120,.5), rgba(240,205,120,0) 62%)}
.feltglow.go{animation:feltglow 1.1s ease-out}
.feltglow.big.go{animation:feltglowbig 1.6s ease-out}
@keyframes feltglow{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
@keyframes feltglowbig{0%{opacity:0}18%{opacity:1}55%{opacity:.85}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.feltglow.go{animation:none}}
/* The Turn no longer touches brightness at all: any darkening of the felt
   read as a glitch and hurt legibility (owner playtest). The banner, the
   intel gauge, and a low chime carry the last-act shift. */

/* staged word + message */
.stagedrow{min-height:22px;text-align:center;margin-bottom:4px}
.msg{font-size:12.5px;font-weight:700;min-height:18px;color:var(--bad)}
.msg.ok{color:var(--good)}
/* the word being built, with its live value: serif ceremony, brass points */
.msg.build{font-family:var(--serif);font-size:16px;color:var(--ink);letter-spacing:.08em}
.msg.build b{color:var(--brass);letter-spacing:0;font-size:14px}

/* actions */
.actions{display:flex;gap:6px;margin-bottom:12px;align-items:stretch;justify-content:center;
  min-height:48px}
.actions [hidden]{display:none!important}
/* the state's most likely press grows to fill the row */
.actions .grow{flex:1 1 auto;width:auto;max-width:none}
.btn{flex:1;font-family:var(--sans);font-size:14.5px;font-weight:700;padding:13px 6px;border-radius:14px;
  cursor:pointer;border:1.5px solid var(--ink);background:#fff;color:var(--ink);touch-action:manipulation;min-height:48px}
.btn.primary{background:var(--ink);color:#f2ecd9}
.btn.quiet{border-color:var(--line);color:var(--muted)}
.btn:disabled{opacity:.4;cursor:default}
/* Done and Clear are small quiet exits; Play word flexes; SHOOGLE is the
   verb and is the biggest thing in the row */
#donebtn{flex:0 0 auto;width:52px;font-size:12.5px;padding:13px 2px}
#clearbtn{flex:0 0 auto;width:56px;font-size:13px;padding:13px 2px}
.shooglebtn{flex:0 0 auto;width:104px;border-radius:14px;border:none;cursor:pointer;
  background:var(--gold);color:#3d2c07;font-weight:800;font-size:14.5px;
  letter-spacing:.04em;min-height:48px;touch-action:manipulation;
  box-shadow:0 3px 10px rgba(232,179,59,.4)}
.shooglebtn:active{transform:translateY(1px)}
.shooglebtn:disabled{opacity:.5;box-shadow:none}
/* glow retired (owner): with a near-empty row, size and presence are the
   invitation */

/* the final count: inline below the felt, the table stays in view */
.endcard{background:#fff;border:2px solid var(--line);border-radius:16px;padding:18px 16px;
  margin-bottom:12px;text-align:center;box-shadow:0 6px 22px rgba(20,30,25,.12);
  animation:cardin .4s ease both}
.endcard[hidden]{display:none!important}
.endcard h2{font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:10px}
.endcard .btn{width:100%;max-width:280px}
.endcard .sharequiet{margin-top:8px;font-size:12.5px;min-height:40px;padding:9px 6px}
@keyframes cardin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.endcard{animation:none}}

/* played words */
.played{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.wordchip{font-size:12.5px;font-weight:700;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:5px 12px;color:var(--text)}
.wordchip b{color:var(--brass);margin-left:5px}

/* overlays */
.overlay{position:fixed;inset:0;background:rgba(24,26,20,.55);display:flex;align-items:center;
  justify-content:center;padding:16px;z-index:50}
.overlay[hidden]{display:none}
.sheet{background:var(--paper);border-radius:18px;max-width:420px;width:100%;padding:24px 20px;
  text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.4)}
.sheet h2{font-family:var(--serif);font-size:21px;color:var(--ink);margin-bottom:8px}
.sheet p{font-size:13.5px;color:var(--muted);margin-bottom:14px;line-height:1.55}
.sheetbtns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.lettergrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:14px}
.lettergrid button{font-family:var(--serif);font-size:17px;font-weight:800;padding:10px 0;border-radius:9px;
  border:2px solid var(--gold);background:#fdf3d5;color:var(--ink);cursor:pointer;min-height:44px}

/* reveal */
.mathbox{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:12px}
.mathrow{display:flex;justify-content:space-between;font-size:14px;font-weight:600;padding:2px 0}
.mathrow.total{border-top:2px solid var(--ink);margin-top:7px;padding-top:8px;font-family:var(--serif);font-size:18px;font-weight:800}
.mathrow .neg{color:var(--bad)} .mathrow .pos{color:var(--good)}
.sweepline{font-family:var(--serif);font-size:17px;font-weight:800;margin-bottom:8px}
.sweepline.sweep{color:var(--brass)}
#endtitle.stamp{animation:stamp .5s cubic-bezier(.2,2.2,.4,1) both}
@keyframes stamp{from{transform:scale(2.4);opacity:0}to{transform:scale(1);opacity:1}}
.optline{font-size:12.5px;color:var(--muted);margin-bottom:10px;line-height:1.5}
/* your words, retold inside the card */
.recap{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.recap:empty{display:none}
.statline{font-size:11.5px;color:var(--muted);margin-bottom:12px}
/* the record: played, streak, best, average, sweeps at a glance */
.statgrid{display:flex;justify-content:center;gap:16px;margin-bottom:14px}
.statgrid .stat{display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.statgrid .stat b{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);line-height:1.1}
.countdown{font-size:12px;color:var(--muted);margin-top:10px}
.countdown b{font-family:var(--serif);color:var(--ink)}
.sharenote{font-size:12px;font-weight:700;color:var(--good);min-height:16px;margin-top:8px}

/* juice: sparks fly from the groove when a word lands, the score pops,
   points float. All decorative; reduced-motion users get none of it. */
.spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:6;
  background:radial-gradient(circle at 35% 35%, #ffe9a8, var(--brass));opacity:1;
  transition:transform .85s cubic-bezier(.1,.65,.3,1), opacity .85s ease}
.spark.big{width:11px;height:11px}
.score{display:inline-block}
.score.pop{animation:scorepop .5s cubic-bezier(.2,1.9,.4,1)}
@keyframes scorepop{30%{transform:scale(1.4);color:var(--brass)}100%{transform:scale(1)}}
.scorebox{position:relative}
.floatpts{position:absolute;right:-6px;top:100%;font-family:var(--serif);font-weight:800;font-size:21px;
  color:var(--good);opacity:0;pointer-events:none}
.floatpts.go{animation:floatup 1.05s ease forwards}
@keyframes floatup{0%{opacity:0;transform:translateY(12px)}25%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
.groove.glow{height:2px;opacity:1;background:linear-gradient(90deg,transparent,var(--brasslight),transparent);
  box-shadow:0 0 12px 2px rgba(223,192,106,.55)}
@media (prefers-reduced-motion:reduce){.score.pop,.floatpts.go{animation:none}}

/* Wee Shoog: the wee Highland calf who lives in the header beside the
   score and reacts to the game. Happy at rest with an occasional bob, a
   hop of joy when a word lands or a table clears, eager lean-in for the
   last act, and the endcard verdict below. Pure decoration: never
   intercepts a tap, sits out reduced motion. */
/* far-right mascot, hooves grounded on the header line, big enough to read
   his face at a glance (sprite is trimmed tight so this is all coo). */
.shoog{flex:0 0 auto;height:82px;width:auto;margin:0 -2px -6px 0;z-index:4;
  pointer-events:none;filter:drop-shadow(0 3px 5px rgba(25,45,38,.2))}
.shoog[hidden]{display:none!important}
/* he stands still; the only motion is a soft fade-in when he first
   appears or changes pose, and the reaction hop below */
.shoog.in{animation:shoogin .4s ease both}
@keyframes shoogin{from{opacity:0}to{opacity:1}}
.shoog.happy,.shoog.watch{animation:shoogin .4s ease both}
/* a word lands, a table clears: one hop of joy, then still again */
.shoog.cheer{animation:shooghop .9s cubic-bezier(.3,1.8,.4,1) both}
@keyframes shooghop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-12px) scale(1.12)}55%{transform:translateY(0) scale(.94,.9)}75%{transform:translateY(-5px) scale(1.04)}100%{transform:translateY(0) scale(1)}}
/* endcard: the verdict, in calf form */
.endshoog{height:110px;width:auto;margin:0 auto 6px;display:block}
.endshoog[hidden]{display:none!important}
.endshoog.leap{animation:shoogleap .7s cubic-bezier(.2,1.7,.4,1) both}
@keyframes shoogleap{0%{opacity:0;transform:translateY(26px) scale(.6)}60%{transform:translateY(-8px) scale(1.06)}100%{opacity:1;transform:none}}
.endshoog.oops{animation:shoogoops .8s ease both}
@keyframes shoogoops{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .shoog,.shoog.happy,.shoog.watch,.shoog.cheer,.endshoog.leap,.endshoog.oops{animation:none}}

/* toast */
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);background:var(--ink);color:#f2ecd9;
  font-size:13px;font-weight:600;padding:9px 16px;border-radius:10px;opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:80;max-width:92vw;text-align:center}
.toast.show{opacity:1}
#soundnudge{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:70;
  font-family:var(--sans);font-size:13px;font-weight:700;color:#3d2c07;
  background:linear-gradient(160deg,#dfc06a,var(--brass));border:none;border-radius:999px;
  padding:11px 20px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}