/* Word Wise LXVI: earthy & warm theme.
   Sand paper, terracotta for actions, olive for "right/selected", deep brown ink. Flat colours, no glow, no gradients.
   Phones use the light "sand" palette. The big screen (display.html) sets data-theme="dark" for a cocoa palette that is
   easier on the eyes on a projector in a dim room. Every colour below is a variable, so a retheme is one block. */
:root{
  --bg:#F2E7D3; --surface:#FBF4E6; --surface2:#E8D8BA; --ink:#3A2819; --muted:#6E5844;
  --accent:#B54E2C; --accent-deep:#8A361B; --accent-ink:#FFF8EC;
  --olive:#5B6B2E; --olive-ink:#FFF8EC;
  --line:#D9C6A2; --edge:#9C8058; --good:#4A6A22; --bad:#A3321C;
  --tint:rgba(181,78,44,.09); --good-tint:rgba(74,106,34,.10); --bad-tint:rgba(163,50,28,.08);
  --shadow:90,60,30; --card:var(--surface);
  --display:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --grain:.35;
}
:root[data-theme="dark"]{
  --bg:#2A1E16; --surface:#3A2B20; --surface2:#4A382A; --ink:#F5E9D4; --muted:#CDB898;
  --accent:#DD8458; --accent-deep:#A85A36; --accent-ink:#2A1208;
  --olive:#A3B36A; --olive-ink:#1F2A0A;
  --line:#5A4636; --edge:#7C6450; --good:#B5CB78; --bad:#F29B84;
  --tint:rgba(221,132,88,.12); --good-tint:rgba(181,203,120,.12); --bad-tint:rgba(242,155,132,.10);
  --shadow:0,0,0; --grain:.12;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{
  background:var(--bg);
  color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.45;-webkit-text-size-adjust:100%;
}
/* paper grain: a quiet speckle so the flat colour doesn't feel like a screen */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
button,input{font:inherit;}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:700;letter-spacing:-0.01em;line-height:1.1;}
h1{font-size:clamp(44px,14vw,66px);font-weight:800;color:var(--ink);}
h1 span{font-family:var(--display);font-weight:800;color:var(--accent);}
h2{font-size:26px;}
p{margin:0 0 12px;}
a{color:var(--accent);text-underline-offset:3px;}
.muted{color:var(--muted);}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

/* ---------- phone app ---------- */
.app{max-width:520px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 20px max(44px,env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;margin-bottom:14px;color:var(--muted);font-size:15px;}
.top .brand{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);}
/* a small olive leaf instead of a sparkle */
.brand::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.5em;background:var(--olive);border-radius:0 100% 0 100%;transform:rotate(-8deg) translateY(-.04em);}
.top .mid{flex:1;text-align:center;font-weight:700;}
.linkbtn{background:none;border:0;color:var(--muted);padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.iconbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;border:2px solid var(--edge);background:transparent;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.iconbtn:hover{color:var(--ink);border-color:var(--accent);background:var(--tint);}
.lede{font-family:var(--serif);font-size:19px;color:var(--muted);margin:14px 0 24px;line-height:1.5;}
.stack{display:flex;flex-direction:column;gap:12px;}
.grow{flex:1;}
.btn{display:block;width:100%;border:0;border-radius:15px 17px 16px 18px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:18px;padding:16px 18px;cursor:pointer;min-height:58px;
  box-shadow:0 4px 0 var(--accent-deep);transition:transform .08s,box-shadow .08s,background .15s;margin-bottom:5px;}
.btn:hover{background:#C0572F;}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep);}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:0 4px 0 var(--accent-deep);transform:none;background:var(--accent);}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 2px var(--edge) inset;}
.btn.ghost:hover{background:var(--tint);}
.btn.ghost:active{transform:none;box-shadow:0 0 0 2px var(--accent) inset;}
.btn.small{font-size:16px;min-height:46px;padding:10px 14px;box-shadow:0 0 0 2px var(--edge) inset;background:transparent;color:var(--ink);}
.btn.small:hover{background:var(--tint);}
.btn.small:active{transform:none;}
.input{width:100%;font-size:18px;color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:13px 15px 14px 16px;padding:14px;min-height:54px;transition:border-color .15s,box-shadow .15s;}
.input::placeholder{color:var(--muted);opacity:.7;}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px rgba(181,78,44,.18);}
.input.code{font-family:var(--serif);font-size:36px;font-weight:800;letter-spacing:.35em;text-align:center;text-transform:uppercase;padding-left:calc(14px + .35em);}
.seg{display:grid;gap:8px;}
.seg.c2{grid-template-columns:repeat(2,1fr);} .seg.c3{grid-template-columns:repeat(3,1fr);} .seg.c4{grid-template-columns:repeat(4,1fr);}
.seg button{font-weight:700;padding:12px 4px;border-radius:13px 15px 14px 16px;border:2px solid var(--edge);background:transparent;color:var(--ink);cursor:pointer;min-height:48px;transition:background .15s,border-color .15s;}
.seg button:hover{background:var(--tint);}
.seg button[aria-pressed="true"]{background:var(--olive);color:var(--olive-ink);border-color:var(--olive);}
.label{font-weight:800;margin:20px 0 8px;font-size:16px;}
.hint{color:var(--muted);font-size:15px;margin:8px 0 0;}
.err{color:var(--bad);font-weight:700;margin:10px 0 0;min-height:22px;}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;margin:22px 0;}
.divider::before,.divider::after{content:"";flex:1;height:0;border-top:2px dotted var(--edge);opacity:.6;}
.tag{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:99px;background:var(--olive);color:var(--olive-ink);}
.prompt{font-family:var(--serif);font-size:26px;line-height:1.28;font-weight:600;margin:12px 0 16px;}
/* question card: paper with a stitched edge */
.qcard{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:20px 22px 19px 23px;padding:16px 20px 6px;margin:6px 0 20px;box-shadow:0 3px 0 rgba(var(--shadow),.14);}
.qcard::after{content:"";position:absolute;inset:6px;border:2px dashed var(--line);border-radius:15px 17px 14px 18px;pointer-events:none;}

/* lobby */
.codebox{position:relative;text-align:center;padding:18px 10px 20px;border-radius:22px 24px 21px 25px;background:var(--surface);border:2px solid var(--line);margin:6px 0 18px;box-shadow:0 3px 0 rgba(var(--shadow),.14);}
.codebox::after{content:"";position:absolute;inset:6px;border:2px dashed var(--line);border-radius:17px 19px 16px 20px;pointer-events:none;}
.codebox .k{color:var(--muted);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.codebox .v{display:flex;justify-content:center;gap:.1em;font-family:var(--serif);font-size:clamp(46px,16vw,76px);font-weight:800;line-height:1.05;margin:8px 0 4px;}
.codebox .v span,.tv .big-code span{display:inline-block;background:var(--surface2);border:2px solid var(--edge);border-radius:.2em;padding:.04em .2em;color:var(--accent);}
.codebox .u{color:var(--muted);font-size:14px;word-break:break-all;margin-top:2px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:var(--surface);border:2px solid var(--line);font-weight:700;}
.chip small{font-weight:700;color:var(--muted);font-size:13px;}
.chip.away{opacity:.55;}
.chip.done{border-color:var(--good);background:var(--good-tint);}
.chip.done::before{content:"\2713";color:var(--good);font-weight:800;}
.chip button{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;padding:0 2px;cursor:pointer;}

/* timer */
.timer{margin:0 0 14px;}
.timer .row{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--muted);margin-bottom:6px;font-weight:700;}
.timer .n{font-family:var(--serif);font-weight:800;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;}
.timer .bar{height:10px;border-radius:99px;background:var(--surface2);overflow:hidden;}
.timer .bar i{display:block;height:100%;width:100%;background:var(--olive);transform-origin:left;transition:width .25s linear;border-radius:99px;}
.timer.low .bar i{background:var(--bad);}
.timer.low .n{color:var(--bad);}
@media (prefers-reduced-motion:no-preference){
  .timer.low .n{animation:beat .5s ease-in-out infinite alternate;}
  @keyframes beat{from{transform:scale(1)}to{transform:scale(1.14)}}
}

/* options + answers */
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-size:18px;color:var(--ink);background:var(--surface);border:2px solid var(--edge);border-radius:15px 17px 16px 18px;padding:14px 16px;cursor:pointer;min-height:60px;box-shadow:0 3px 0 rgba(var(--shadow),.12);transition:border-color .12s,background .12s,transform .08s,box-shadow .12s;}
.opt:not(:disabled):hover{border-color:var(--accent);}
.opt:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 rgba(var(--shadow),.12);}
.opt .ltr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--surface2);color:var(--ink);font-family:var(--serif);font-weight:800;font-size:16px;transition:background .12s,color .12s;}
.opt .t{flex:1;}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--tint);box-shadow:0 0 0 3px rgba(181,78,44,.28);}
.opt[aria-pressed="true"] .ltr{background:var(--accent);color:var(--accent-ink);}
.opt:disabled{opacity:.6;cursor:not-allowed;}
.opt[aria-pressed="true"]:disabled{opacity:1;}
.opt small{display:block;color:var(--muted);font-size:14px;margin-top:2px;}
.optrow{display:flex;gap:8px;align-items:stretch;}
.optrow .opt{flex:1;}
.xbtn{flex:none;width:56px;border-radius:15px;border:2px solid var(--edge);background:transparent;color:var(--muted);font-size:13px;font-weight:800;cursor:pointer;}
.xbtn.arm{border-color:var(--bad);color:var(--bad);}
.ans{border-radius:15px 17px 16px 18px;padding:14px 16px;background:var(--surface);border:2px solid var(--line);}
.ans .t{font-size:19px;font-weight:800;}
.ans .m{font-size:15px;color:var(--muted);margin-top:4px;}
.ans.real{background:var(--olive);color:var(--olive-ink);border-color:var(--olive);box-shadow:0 4px 0 rgba(var(--shadow),.25);}
.ans.real .m{color:var(--olive-ink);opacity:.9;}
.ans.accepted{border-color:var(--good);background:var(--good-tint);}
.ans .ref{font-family:var(--serif);font-style:italic;font-size:17px;margin-top:6px;}
.ans .acc{background:none;border:0;padding:6px 0 0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px;}
.board{margin-top:6px;border-top:2px solid var(--edge);}
.board .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 2px;border-bottom:2px dotted var(--line);}
.board .nm{display:flex;align-items:center;gap:12px;min-width:0;}
.board .r b{font-size:19px;overflow:hidden;text-overflow:ellipsis;}
.board .rk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface2);color:var(--muted);font-style:normal;font-family:var(--serif);font-weight:800;font-size:15px;}
.board .r.lead .rk{background:var(--accent);color:var(--accent-ink);}
.board .d{color:var(--good);font-weight:800;margin-left:2px;font-size:15px;}
.board .pts{font-family:var(--serif);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums;}
.board .r.lead .pts{color:var(--accent);}
.crown{font-size:clamp(46px,14vw,72px);line-height:1;}
.win{font-family:var(--serif);font-size:clamp(36px,11vw,56px);font-weight:800;letter-spacing:-0.02em;line-height:1.05;margin:6px 0 20px;color:var(--accent);}
.locked{border-radius:15px 17px 16px 18px;background:var(--surface);border:2px dashed var(--edge);padding:16px;margin:6px 0 18px;}
.locked b{display:block;font-family:var(--serif);font-size:20px;}
.locked span{color:var(--muted);}
.banner{position:fixed;left:0;right:0;top:0;padding:8px 12px;text-align:center;background:var(--bad);color:#FFF8EC;font-weight:800;font-size:14px;z-index:10;}
.banner[hidden]{display:none;}
.handoff{margin:8px 0 18px;}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .4s ease-out both;animation-delay:calc(var(--i,0) * .1s);}
  @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  .crown.rise{animation:bounce .9s cubic-bezier(.2,1.4,.4,1) both;}
  @keyframes bounce{0%{transform:translateY(-30px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
}

/* the streak banner (streak.js injects its own orange/pink gradient; bring it into the palette) */
#streak-banner{background:var(--accent) !important;color:var(--accent-ink) !important;box-shadow:0 4px 0 var(--accent-deep) !important;font-family:var(--display) !important;font-weight:800 !important;}

/* ---------- shared screen (display.html) ---------- */
body.tv{overflow:hidden;font-size:clamp(16px,2.1vw,34px);}
.tv .stage{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:3vh 4vw;gap:2vh;}
.tv .bar{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-weight:700;font-size:.8em;}
.tv .bar .brand{font-family:var(--serif);color:var(--ink);font-weight:700;font-size:1.25em;}
.tv .bar .right{display:flex;align-items:center;gap:1.2vw;}
.tv .iconbtn{width:max(36px,3.6vh);height:max(36px,3.6vh);}
.tv .center{flex:1;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;min-height:0;overflow:hidden;}
.tv .split{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:4vw;align-items:center;min-height:0;}
.tv .big-code{display:flex;gap:.06em;font-family:var(--serif);font-size:clamp(70px,15vw,260px);font-weight:800;line-height:1;}
.tv .join{font-size:1em;color:var(--muted);margin-top:1.2vh;}
.tv .join b{color:var(--ink);}
.tv .qr{width:min(24vh,22vw);background:#FFF8EC;padding:1.2vh;border-radius:14px;margin-top:2.5vh;border:2px solid var(--edge);}
.tv .qr svg{display:block;width:100%;height:auto;}
.tv .roster{display:flex;flex-wrap:wrap;gap:1.2vh 1.2vw;align-content:center;}
.tv .roster .chip{font-size:1.1em;padding:1vh 1.6vw;}
.tv .tprompt{font-family:var(--serif);font-weight:600;line-height:1.25;font-size:2.1em;max-width:30em;}
.tv .tprompt.sm{font-size:1.6em;}
.tv .meter{height:1.4vh;border-radius:99px;background:var(--surface2);overflow:hidden;}
.tv .meter i{display:block;height:100%;width:100%;background:var(--olive);transition:width .25s linear;border-radius:99px;}
.tv .meter.low i{background:var(--bad);}
.tv .count{font-weight:800;font-variant-numeric:tabular-nums;}
.tv .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6vh 1.6vw;margin-top:2vh;}
.tv .grid.many{grid-template-columns:repeat(3,1fr);}
.tv .grid .card{display:flex;align-items:center;gap:1vw;}
.tv .grid .card .ltr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--serif);font-weight:800;font-size:.8em;}
.tv .card{background:var(--surface);border:2px solid var(--line);border-radius:18px 20px 17px 21px;padding:1.6vh 1.4vw;font-size:.95em;font-weight:800;}
.tv .card .m{font-weight:600;color:var(--muted);font-size:.65em;margin-top:.5vh;}
.tv .card.real{background:var(--olive);color:var(--olive-ink);border-color:var(--olive);}
.tv .card.real .m{color:var(--olive-ink);opacity:.9;}
.tv .card.accepted{border-color:var(--good);background:var(--good-tint);}
.tv .card .ref{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.8em;margin-top:.4vh;}
.tv .reveal-list{display:flex;flex-direction:column;gap:1vh;margin-top:1.2vh;}
.tv .reveal-list .card{padding:1.1vh 1.2vw;}
.tv .reveal-list .card .m{font-size:.6em;margin-top:.2vh;}
.tv .center .tprompt.sm{font-size:1.35em;}
.tv .reveal-list.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2vh 1.4vw;}
.tv .reveal-list.two .card.real{grid-column:1/-1;}
.tv .board{border-top:2px solid var(--edge);margin-top:1.2vh;}
.tv .board .r{padding:.55vh .4vw;}
.tv .board.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:3vw;}
.tv .board.cols.many{grid-template-columns:1fr 1fr 1fr;column-gap:2vw;}
.tv .board .rk{width:1.5em;height:1.5em;font-size:.7em;}
.tv .board .r b{font-size:1em;}
.tv .board .pts{font-size:1.1em;}
.tv .winner{font-family:var(--serif);font-size:clamp(50px,9vw,170px);font-weight:800;letter-spacing:-0.02em;line-height:1;color:var(--accent);}
.tv .crown{font-size:clamp(60px,9vw,150px);}
.tv .pill{display:inline-block;margin-top:2vh;padding:.6vh 1.2vw;border-radius:99px;background:var(--surface2);font-weight:700;font-size:.7em;color:var(--muted);}
.tv .hide{opacity:0;transform:translateY(14px);}
.tv .show{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease;}
.tv .pop{animation:pop .6s ease-out;}
@keyframes pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
.unlock{position:fixed;left:50%;bottom:3vh;transform:translateX(-50%);z-index:20;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:max(15px,1.5vw);padding:1.2vh 2vw;border-radius:99px;box-shadow:0 4px 0 var(--accent-deep);cursor:pointer;white-space:nowrap;}
.unlock[hidden]{display:none;}
@media (prefers-reduced-motion:no-preference){.unlock{animation:nudge 1.6s ease-in-out infinite alternate;}@keyframes nudge{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-6px)}}}
@media (max-aspect-ratio:1/1){
  .tv .split{grid-template-columns:1fr;}
  .tv .grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){.tv .show{transition:none;} .tv .pop{animation:none;}}