/* GuessDaily — design tokens + the ported Recipedle look (rolodex of cards, hand-drawn
   annotations). Dark is the default; light is html[data-theme="light"]. The per-game accent
   (--accent / --accent-d) is set at runtime from the game config — never hardcode a colour
   in a component, use the variables. */

:root {
  --bg:#12100E; --bg-2:#1A1714; --panel:#20190f; --panel-edge:#352a1a;
  --ink:#F3ECDE; --ink-soft:#B9AE9B; --ink-faint:#82796B;
  --accent:#E4572E; --accent-d:#C7431E;      /* per-game, set at runtime */
  --saffron:#F2A93B; --kraft:#C9A46A;
  --card:#FBF5E6; --card-edge:#EADFC4; --card-ink:#3A322A; --card-red:#C0392B;
  --card-rule:#CFE0E8; --card-margin:#E4A79B;
  --draw-green:#2E8B4E;
  --shadow:0 22px 46px -22px rgba(0,0,0,.8);
  --maxw:640px;
}

/* Light theme — same accent, warmer paper-on-cream surfaces. */
html[data-theme="light"] {
  --bg:#F4EEE2; --bg-2:#FBF6EC; --panel:#FBF6EC; --panel-edge:#E4DAC7;
  --ink:#2C2620; --ink-soft:#5F564A; --ink-faint:#8A8072;
  --kraft:#9A7B45;
  --shadow:0 22px 46px -26px rgba(80,60,30,.35);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background: radial-gradient(1100px 560px at 50% -14%, color-mix(in srgb, var(--accent) 14%, var(--bg)) 0%, var(--bg) 55%) fixed;
  color:var(--ink); font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
}
.center { width:100%; max-width:var(--maxw); margin:0 auto; }

/* ---------- Top bar ---------- */
.topbar { flex:0 0 auto; padding:10px 14px 9px; border-bottom:1px solid var(--panel-edge);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 72%, transparent)); backdrop-filter:blur(6px); }
.brandrow { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.brand { display:flex; flex-direction:column; }
.kicker { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.kicker b { color:var(--saffron); font-weight:700; }
.wordmark { font-family:"Fraunces",serif; font-weight:700; font-size:clamp(24px,6.4vw,32px); line-height:1;
  letter-spacing:-.01em; display:inline-flex; align-items:center; gap:.22em; }
.wordmark .dle { color:var(--accent); } .wordmark .ic { font-size:.6em; transform:translateY(1px); }

.rightcluster { display:flex; align-items:center; gap:8px; }
.iconbtn { width:40px; height:40px; border-radius:11px; border:1px solid var(--panel-edge); background:var(--panel); color:var(--ink);
  font-size:17px; cursor:pointer; flex:0 0 auto; transition:.15s; display:grid; place-items:center; }
.iconbtn:hover { border-color:var(--kraft); }
.iconbtn:focus-visible, .gbtn:focus-visible, .arch-row:focus-visible, .suggest button:focus-visible, input:focus-visible {
  outline:2px solid var(--saffron); outline-offset:2px; }

.mini { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:12px; padding:7px 11px 7px 8px; cursor:default; }
.mini.solved, .mini.lost { cursor:pointer; }
.mini.solved:hover, .mini.lost:hover { border-color:var(--kraft); }
.mini .qmark { width:34px; height:34px; flex:0 0 34px; border-radius:9px; display:grid; place-items:center; font-size:19px;
  background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--kraft) 22%, var(--panel)), color-mix(in srgb, var(--kraft) 22%, var(--panel)) 5px, var(--panel) 5px, var(--panel) 10px); border:1px dashed var(--panel-edge); }
.mini .mt-l { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--kraft); font-weight:700; }
.mini .mt-n { font-family:"Fraunces",serif; font-size:16px; font-weight:600; margin-top:1px; line-height:1; }
.mini.solved .mt-n { color:var(--saffron); } .mini.lost .mt-n { color:var(--accent); }
.mini .tries { margin-left:2px; text-align:center; padding-left:10px; border-left:1px solid var(--panel-edge); }
.mini .tries .big { font-family:"Fraunces",serif; font-size:18px; font-weight:700; line-height:1; }
.mini .tries .lab { font-size:8.5px; color:var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }

.legend { margin-top:9px; display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; font-size:11.5px; color:var(--ink-soft); }
.legend .lg { display:inline-flex; align-items:center; gap:6px; }
.legend .demo { background:var(--card); color:var(--card-ink); font-family:"Fraunces",serif; font-weight:600; font-size:13px;
  padding:3px 12px; border-radius:6px; display:inline-block; }
.legend b { color:var(--ink); font-weight:700; }

/* ---------- Archive panel ---------- */
.archive { position:fixed; top:66px; left:50%; transform:translateX(-50%); width:min(94vw,430px); max-height:64vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--panel-edge); border-radius:16px; box-shadow:var(--shadow); z-index:56; padding:10px; }
.archive[hidden] { display:none; }
.arch-head { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--kraft); font-weight:700; padding:6px 8px 8px; display:flex; justify-content:space-between; align-items:center; }
.arch-head .x { cursor:pointer; color:var(--ink-soft); font-size:16px; background:none; border:none; }
.arch-row { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; border-radius:10px; padding:11px 10px; cursor:pointer; color:var(--ink); font-family:inherit; text-align:left; }
.arch-row:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.arch-row.current { background:color-mix(in srgb, var(--accent) 14%, transparent); }
.arch-row .an { font-family:"Fraunces",serif; font-weight:700; font-size:14px; width:54px; flex:0 0 54px; }
.arch-row .ad { flex:1; font-size:13px; color:var(--ink-soft); }
.arch-row .st { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.st.solved { background:rgba(46,139,78,.18); color:#63d494; }
.st.missed { background:color-mix(in srgb, var(--accent) 16%, transparent); color:#f0a58c; }
.st.play, .st.today { background:rgba(242,169,59,.16); color:var(--saffron); }

/* ---------- Stage (rolodex) ---------- */
.stage { flex:1 1 auto; min-height:0; position:relative; display:flex; align-items:stretch; }
.rail { position:absolute; top:14px; left:0; right:0; height:20px; z-index:4; pointer-events:none; }
.rail::before { content:""; position:absolute; left:50%; top:9px; transform:translateX(-50%); width:180px; height:8px;
  border-radius:99px; background:linear-gradient(180deg,#5a5148,#2b2620); box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15); }
.rail .ring { position:absolute; top:0; left:50%; width:24px; height:20px; border:3px solid #6b6155; border-bottom:none; border-radius:13px 13px 0 0; }
.rail .ring.l { transform:translateX(-60px); } .rail .ring.r { transform:translateX(36px); }

.rack { width:100%; display:flex; gap:20px; align-items:center; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; padding:34px calc(50% - 190px) 20px; scrollbar-width:none; perspective:1500px; }
.rack::-webkit-scrollbar { display:none; }
@media (max-width:520px){ .rack { padding:34px 7vw 18px; } }

.recipe {
  scroll-snap-align:center; flex:0 0 min(86vw, 372px); max-width:372px; position:relative;
  background: repeating-linear-gradient(var(--card) 0, var(--card) 27px, var(--card-rule) 27px, var(--card-rule) 28px);
  background-color:var(--card); border-radius:12px; padding:24px 18px 16px 40px; color:var(--card-ink);
  box-shadow:var(--shadow); border:1px solid var(--card-edge); transform:rotate(var(--tilt,-.6deg)); transform-origin:top center;
}
.recipe::before { content:""; position:absolute; top:0; bottom:0; left:31px; width:2px; background:var(--card-margin); opacity:.8; }
.recipe::after { content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:88px; height:12px;
  background:
    radial-gradient(circle 6px at 13px 6px, #b9ab8d 0 5px, rgba(0,0,0,.28) 5px 6px, transparent 6px),
    radial-gradient(circle 6px at 75px 6px, #b9ab8d 0 5px, rgba(0,0,0,.28) 5px 6px, transparent 6px); }
.recipe.flipin { animation:flipin .55s cubic-bezier(.2,.8,.25,1) both; }
@keyframes flipin { from { transform:rotateX(-88deg) rotate(var(--tilt,-.6deg)); opacity:0; } to { transform:rotateX(0) rotate(var(--tilt,-.6deg)); opacity:1; } }
.recipe.win { box-shadow:0 0 0 2px var(--draw-green), var(--shadow); }

.r-num { position:absolute; top:13px; right:15px; font-family:"Caveat",cursive; font-size:19px; color:var(--card-red); font-weight:700; transform:rotate(4deg); }
.r-title { font-family:"Fraunces",serif; font-weight:700; font-size:22px; line-height:1.08; padding-top:11px; display:flex; align-items:center; gap:7px; }
.r-rule { height:0; border-bottom:2px solid var(--card-red); margin:6px 0 3px; position:relative; }
.r-rule::after { content:""; position:absolute; left:0; right:0; top:3px; border-bottom:1px solid var(--card-red); opacity:.5; }
.r-tags { display:flex; flex-wrap:wrap; gap:5px; margin:9px 0 2px; }
.r-tag { font-family:"Inter"; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:4px; background:#EDE7D8; color:#8a7f6a; transform:rotate(-1deg); }
.r-tag.g { background:#DCF0E2; color:#2E7D46; }

.r-fields { margin-top:8px; }
.frow { display:flex; align-items:baseline; gap:7px; padding:4px 0; min-height:26px; }
.frow .fl { font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--card-red); opacity:.85; flex:0 0 auto; }
.frow .lead { flex:1; border-bottom:1.5px dotted #cdbf9f; transform:translateY(-3px); }
.frow .fv { font-family:"Fraunces",serif; font-size:16px; font-weight:600; display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; color:var(--card-ink); }
.frow .arw { display:inline-flex; align-items:center; }

/* ---------- hand-drawn marks ---------- */
.mk { position:relative; display:inline-block; }
.ann { position:absolute; top:-6px; left:-9px; right:-9px; bottom:-6px; overflow:visible; pointer-events:none; }
.ann path { fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; filter:url(#rough); }
.ann.circle path { stroke:var(--draw-green); stroke-width:2.1; }
.ann.strike path { stroke:#BE4A2E; stroke-width:2.6; filter:url(#rough2); }
.ann.check { position:static; inset:auto; width:20px; height:20px; display:inline-block; }
.ann.check path { stroke:var(--draw-green); stroke-width:2.8; filter:url(#rough2); }
.ann.arrow { position:static; inset:auto; width:15px; height:19px; display:inline-block; vertical-align:-4px; }
.ann.arrow path { stroke:#6b5a49; stroke-width:2.3; filter:url(#rough2); }

.mk.hl { position:relative; }
.mk.hl .hilite { position:absolute; top:-3px; left:-8px; right:-8px; bottom:-2px; z-index:-1; mix-blend-mode:multiply; overflow:visible; transform:rotate(-1.2deg); }
.mk.hl .hilite .swipe  { fill:rgba(247,206,64,.52); filter:url(#rough2); }
.mk.hl .hilite .swipe2 { fill:rgba(236,188,44,.42); filter:url(#rough2); }

.recipe.flipin .ann path { stroke-dasharray:1; stroke-dashoffset:1; animation:draw .5s .2s ease forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.recipe.flipin .mk.hl .hilite { animation:hlin .42s .22s ease both; }
@keyframes hlin { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .recipe.flipin { animation:none; }
  .recipe.flipin .ann path { animation:none; stroke-dashoffset:0; }
  .recipe.flipin .mk.hl .hilite { animation:none; clip-path:none; }
  .modal, .scrim.show, .toast { animation:none !important; }
}

.r-ing { margin-top:10px; }
.r-ing .ih { font-family:"Caveat",cursive; font-size:19px; font-weight:700; color:var(--card-red); }
.r-ing ul { list-style:none; margin-top:2px; }
.r-ing li { display:flex; align-items:center; gap:7px; padding:3px 0; font-family:"Fraunces",serif; font-size:15px; }
.r-ing li .chk { width:20px; height:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center; }
.r-ing li.off { color:#8f8676; }
.r-ing li .mainflag { font-family:"Inter"; font-size:9px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:var(--card-red); background:#F6E9C7; padding:1px 6px; border-radius:4px; margin-left:4px; }

.stamp { position:absolute; bottom:16px; right:16px; font-family:"Fraunces",serif; font-weight:700; font-size:16px; color:var(--draw-green);
  border:3px double var(--draw-green); border-radius:8px; padding:3px 11px; transform:rotate(-11deg); opacity:.9; letter-spacing:.04em; }

.recipe.blank { display:grid; place-items:center; text-align:center; color:#a89c82; min-height:452px; --tilt:-.6deg; }
.recipe.blank .bh { font-family:"Caveat",cursive; font-size:26px; color:var(--card-red); }
.recipe.blank .bs { font-family:"Fraunces",serif; font-size:15px; margin-top:6px; max-width:220px; }

.chev { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; z-index:5;
  border:1px solid var(--panel-edge); background:color-mix(in srgb, var(--bg) 82%, transparent); color:var(--ink); font-size:18px; cursor:pointer;
  display:grid; place-items:center; transition:.15s; backdrop-filter:blur(3px); }
.chev:hover { border-color:var(--kraft); }
.chev:disabled { opacity:0; pointer-events:none; }
.chev.prev { left:10px; } .chev.next { right:10px; }

/* ---------- Guess dock ---------- */
.dock { flex:0 0 auto; padding:8px 14px 6px; }
.dockpanel { background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px; box-shadow:var(--shadow); padding:10px; position:relative; }
.dots { display:flex; gap:5px; justify-content:center; margin-bottom:9px; flex-wrap:wrap; }
.dots i { width:6px; height:6px; border-radius:50%; background:var(--panel-edge); display:block; transition:.2s; }
.dots i.on { background:var(--accent); width:16px; border-radius:99px; }
.dots i.win { background:var(--draw-green); }
.inputrow { display:flex; gap:9px; }
.field { flex:1; position:relative; }
.field input { width:100%; background:color-mix(in srgb, var(--bg) 70%, #000 8%); border:1.5px solid var(--panel-edge); color:var(--ink); font-size:16px; font-family:inherit;
  padding:14px 15px; border-radius:12px; outline:none; transition:border-color .15s; }
.field input::placeholder { color:var(--ink-faint); }
.field input:focus { border-color:var(--accent); }
.gbtn { background:var(--accent); color:#fff; border:none; font-weight:700; font-size:15px; padding:0 20px; border-radius:12px;
  cursor:pointer; font-family:inherit; transition:background .15s, transform .05s; }
.gbtn:hover { background:var(--accent-d); } .gbtn:active { transform:translateY(1px); }
.gbtn:disabled { background:var(--panel-edge); color:var(--ink-faint); cursor:not-allowed; }
.donebar { display:none; gap:9px; }
.donebar .gbtn { flex:1; padding:13px 0; }
.suggest { position:absolute; left:10px; right:10px; bottom:calc(100% + 6px); background:var(--bg-2); border:1px solid var(--panel-edge);
  border-radius:13px; box-shadow:var(--shadow); overflow:hidden; max-height:44vh; overflow-y:auto; z-index:30; }
.suggest button { display:flex; width:100%; align-items:center; gap:10px; text-align:left; background:none; border:none; color:var(--ink);
  font-family:inherit; font-size:15px; padding:12px 15px; cursor:pointer; border-bottom:1px solid color-mix(in srgb, var(--ink) 4%, transparent); }
.suggest button:last-child { border-bottom:none; }
.suggest button:hover, .suggest button.hi { background:color-mix(in srgb, var(--accent) 15%, transparent); }
.suggest .dishname { font-weight:500; }

footer { flex:0 0 auto; text-align:center; font-size:11px; color:var(--ink-faint); padding:7px 14px 9px;
  border-top:1px solid var(--panel-edge); background:color-mix(in srgb, var(--bg) 88%, #000 6%); }
footer .fam { color:var(--ink-soft); } footer a { color:var(--ink-soft); text-decoration:none; } footer a:hover { color:var(--saffron); }

.scrim { position:fixed; inset:0; background:rgba(8,7,6,.74); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; z-index:60; }
.scrim.show { display:flex; animation:fade .2s; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.modal { position:relative; background:var(--bg-2); border:1px solid var(--panel-edge); border-radius:22px; width:100%; max-width:390px; padding:26px 24px; text-align:center; box-shadow:var(--shadow); animation:popm .3s cubic-bezier(.2,.9,.3,1.3); }
@keyframes popm { from { transform:scale(.9); opacity:0; } to { transform:none; opacity:1; } }
.mclose { position:absolute; top:12px; right:14px; width:30px; height:30px; border-radius:50%; border:1px solid var(--panel-edge); background:transparent; color:var(--ink-soft); font-size:18px; cursor:pointer; line-height:1; }
.mclose:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); }
.modal .rlabel { font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--saffron); }
.modal h2 { font-family:"Fraunces",serif; font-size:27px; margin:8px 0 2px; }
.modal .answer { font-family:"Fraunces",serif; font-size:22px; color:var(--accent); margin:2px 0 4px; }
.modal .flagbig { font-size:38px; margin:2px 0; }
.modal p { color:var(--ink-soft); font-size:14px; line-height:1.5; }
.modal .grid { margin:14px 0; font-size:15px; line-height:1.35; letter-spacing:2px; font-family:monospace; }
.modal .row2 { display:flex; gap:10px; margin-top:16px; }
.modal .row2 .gbtn { flex:1; padding:13px 0; }
.gbtn.ghost { background:transparent; border:1.5px solid var(--panel-edge); color:var(--ink); }
.gbtn.ghost:hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
.countdown { margin-top:14px; font-size:12px; color:var(--ink-faint); }
.countdown b { color:var(--ink); font-variant-numeric:tabular-nums; }

.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg);
  font-weight:600; font-size:14px; padding:11px 18px; border-radius:12px; opacity:0; pointer-events:none; transition:.25s; z-index:70; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }