:root {
  --bg: #f7f2e8;
  --card: #fffdf8;
  --ink: #1d2a24;
  --muted: #6b7a72;
  --line: #e2dccd;
  --brand: #1f4d3a;
  --brand-ink: #ffffff;
  --good: #2e9e5b;
  --warn: #e0b030;
  --bad: #c9c3b4;
  --err: #b3402f;
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121a16; --card: #1b2520; --ink: #eef3ef; --muted: #98a89f; --line: #2b3832;
    --brand: #3f9b6e; --brand-ink: #08130d; --bad: #3a4640; --err: #ff8a78;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 16px calc(24px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto;
}
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; text-align: center; line-height: 1.1; font-family: "Courier Prime", "American Typewriter", "Courier New", Courier, monospace; font-weight: 700; font-size: 24px; letter-spacing: 2px; }
.top h1 small { display: block; font-weight: 400; font-size: 12px; letter-spacing: .6px; color: var(--muted); margin-top: 3px; }
.top-right { justify-self: end; display: flex; gap: 4px; }
.icon-btn { background: none; border: 0; color: var(--ink); font-size: 20px; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; }
.icon-btn:active { background: var(--line); }
.meta { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0 6px; letter-spacing: .3px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--brand); color: var(--brand-ink); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-left: 6px; }

.clue { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.clue-word {
  flex: 1; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 8px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 7vw, 32px); font-weight: 700; text-transform: capitalize;
  overflow-wrap: anywhere;
}
.how { text-align: center; color: var(--muted); font-size: 14px; margin: 6px 0 14px; }

form { display: grid; gap: 10px; }
.field { display: grid; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.field input {
  font: inherit; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 14px; width: 100%;
}
.field input:focus { outline: none; border-color: var(--brand); }
.primary {
  font: inherit; font-weight: 700; font-size: 17px; background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: 12px; padding: 15px; cursor: pointer;
}
.primary:disabled { opacity: .5; }
.ghost { background: none; border: 1px dashed var(--line); color: var(--muted); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.error { color: var(--err); min-height: 20px; margin: 8px 2px 0; font-size: 14px; }

.hints { margin: 6px 0; }
.hint-bar { height: 6px; border-radius: 3px; background: var(--line); margin: 8px 0 0; overflow: hidden; }
.hint-bar i { display: block; height: 100%; width: 0; background: var(--brand); }
.hints ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.hints li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; }

.attempts { display: grid; gap: 8px; margin-top: 14px; }
.row { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-words { font-weight: 700; font-size: 17px; text-transform: capitalize; overflow-wrap: anywhere; }
.tiles { display: flex; gap: 5px; flex: none; }
.tile { width: 26px; height: 26px; border-radius: 7px; background: var(--bad); }
.tile.correct, .tile.gold { background: var(--good); }
.tile.silver { background: var(--warn); }
.row-msg { color: var(--muted); font-size: 13px; margin-top: 6px; }
.legend { color: var(--muted); font-size: 12px; text-align: center; margin: 10px 0; }

.result { margin-top: 14px; background: var(--card); border: 2px solid var(--brand); border-radius: var(--radius); padding: 16px; text-align: center; }
.result h2 { margin: 0 0 4px; font-family: Georgia, serif; }
.answer { font-size: 24px; font-weight: 800; text-transform: capitalize; margin: 6px 0 12px; }
.result .primary { width: 100%; margin-top: 10px; }
.countdown { color: var(--muted); font-size: 14px; margin-top: 12px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; align-items: end; justify-items: center; z-index: 10; }
.modal[hidden] { display: none; }
.sheet { background: var(--bg); width: 100%; max-width: 520px; max-height: 88dvh; overflow: auto; border-radius: 20px 20px 0 0; padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); position: relative; }
.sheet h2 { margin: 0 0 10px; font-family: Georgia, serif; }
.sheet p, .sheet li { line-height: 1.45; }
.close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 30px; color: var(--muted); cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; margin: 12px 0; }
.stats-grid b { display: block; font-size: 26px; }
.stats-grid span { font-size: 11px; color: var(--muted); }
.bar { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.bar i { display: block; height: 18px; background: var(--brand); border-radius: 4px; min-width: 18px; color: var(--brand-ink); font-style: normal; font-size: 12px; text-align: right; padding: 0 5px; line-height: 18px; }
.arch { display: grid; gap: 6px; margin-top: 8px; }
.arch button { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--line); color: var(--ink); font: inherit; border-radius: 10px; padding: 12px; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 20; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---- timer and scoring ---- */
.top-right .icon-btn { width: 40px; }
.timer { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.timer[hidden] { display: none; }
.clock { font-size: 22px; font-weight: 700; }
.speed { font-size: 14px; color: var(--muted); }
.speed.hot { color: var(--warn); font-weight: 700; }
.score-big { font-size: 44px; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.score-big small { font-size: 16px; font-weight: 600; color: var(--muted); }
.breakdown { list-style: none; padding: 0; margin: 10px 0; text-align: left; font-size: 14px; }
.breakdown li { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px dashed var(--line); }
.breakdown li:last-child { border-bottom: 0; }
.breakdown .neg { color: var(--err); }
.rankline { margin: 8px 0; font-weight: 600; }
.practice { color: var(--muted); font-size: 13px; margin: 6px 0; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.btn-row .primary { margin: 0; width: 100%; }
.secondary { font: inherit; font-weight: 700; font-size: 17px; background: none; color: var(--brand); border: 2px solid var(--brand); border-radius: 12px; padding: 13px; cursor: pointer; }
.lb { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.lb li { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.lb li.you { border-color: var(--brand); border-width: 2px; }
.lb .rk { font-weight: 800; color: var(--muted); text-align: center; }
.lb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb .nm small { display: block; color: var(--muted); font-size: 12px; }
.lb .pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.namebox { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0; }
.namebox input { font: inherit; font-size: 16px; background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; padding: 10px; width: 100%; }
.namebox button { font: inherit; font-weight: 700; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 10px; padding: 0 16px; cursor: pointer; }
.muted { color: var(--muted); font-size: 13px; }

/* three puzzles a day */
.slots{display:flex;gap:8px;margin:4px 0 8px}
.slots button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:2px solid var(--line,#d9d4c7);border-radius:12px;background:var(--card,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.slots button b{font-size:14px;text-transform:capitalize}
.slots button.on{border-color:var(--brand,#1f4d3a);box-shadow:0 0 0 1px var(--brand,#1f4d3a) inset}
.slots button:disabled{opacity:.5;cursor:default}
.slots button small{opacity:.75}
.daytotal{margin:6px 0;font-weight:600}

/* hints: gold button, definitions button */
.hint-row{display:flex;gap:8px}
.hint-row button{flex:1}
.hint-gold{position:relative;overflow:hidden;border:0;border-radius:14px;padding:13px 12px;font:inherit;font-weight:800;font-size:15px;color:#3a2600;cursor:pointer;
  background:linear-gradient(135deg,#ffe27a,#f5b301 55%,#ffd24d);box-shadow:0 3px 0 #b87d00,0 8px 16px rgba(245,179,1,.35);transition:transform .08s,box-shadow .08s}
.hint-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
.hint-gold:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #b87d00,0 4px 10px rgba(245,179,1,.3)}
.hint-gold:disabled{filter:grayscale(.55) brightness(1.02);box-shadow:none;cursor:default}
.hint-gold:disabled::after{animation:none;opacity:0}
.hint-gold.give{background:linear-gradient(135deg,#ffb09a,#e8573a);color:#3b0b00;box-shadow:0 3px 0 #a53a22,0 8px 16px rgba(232,87,58,.3)}
.hint-gold small{display:block;font-weight:600;font-size:12px;opacity:.8}
.def-btn{border:2px solid #4a7fd0;background:transparent;color:#4a7fd0;border-radius:14px;padding:11px 12px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.def-btn small{display:block;font-weight:600;font-size:12px;opacity:.8}
.def-btn:disabled{opacity:.5}
.hint-bar i{background:linear-gradient(90deg,#f5b301,#ffe27a)}
.defs{margin-top:8px;background:var(--card);border:1px solid #4a7fd0;border-radius:10px;padding:8px 12px;font-size:14px;display:grid;gap:4px}
.defs b{color:#4a7fd0}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.hint-gold::after{animation:none}}

.def{font-style:normal;text-transform:none;letter-spacing:0;font-size:14px;color:#4a7fd0;margin:0 2px}

.daynav{display:flex;justify-content:space-between;gap:8px;margin:0 0 6px}
.daynav button,.linkbtn{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:6px 4px;text-decoration:underline}
.daynav button:disabled{opacity:.4;text-decoration:none}
.foot{text-align:center;margin:18px 0 8px}

/* header: big FOSOCONI with the subtitle spread to exactly the same width underneath */
.top h1 { display: block; width: max-content; justify-self: center; font-size: 28px; letter-spacing: 1px; }
.top h1 .brand { display: block; margin-right: -1px; } /* cancels the trailing letter space so it centers exactly */
.top h1 small { display: block; width: 100%; text-align: center; font-size: 11px; margin-top: 2px; }
.top h1 small span { display: inline-block; white-space: nowrap; }
.help-btn { background: none; border: 0; color: var(--ink); width: 44px; height: 44px; border-radius: 12px; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: "Courier Prime", "American Typewriter", "Courier New", Courier, monospace; font-weight: 700; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .3px; }
.help-btn:active { background: var(--line); }
.help-btn span { display: block; text-align: center; }

/* true-centered title, one icon each side, the rest in a row underneath */
.top > :first-child { justify-self: start; }
.top-right { justify-self: end; }
.subbar { display: flex; justify-content: center; gap: 8px; padding: 8px 0 2px; }
.subbar button { flex: 1; white-space: nowrap; background: var(--card); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 12px; padding: 8px 4px; border-radius: 99px; cursor: pointer; }
.subbar button:active { background: var(--line); }

/* ---- compact play screen: clue, answers, guess and hints fit on one phone screen ---- */
main { padding-bottom: 8px; }
.top { padding: 6px 0; }
.top h1 { font-size: 32px; }
.top h1 small { font-size: 12px; margin-top: 1px; }
.help-btn, .icon-btn { height: 38px; }
.subbar { padding: 6px 0 0; gap: 6px; }
.subbar button { padding: 6px 4px; font-size: 11.5px; }
.slots { margin: 6px 0 2px; gap: 6px; }
.slots button { padding: 5px 2px; font-size: 11px; border-radius: 10px; }
.slots button b { font-size: 13px; }
.daynav { margin: 0; }
.daynav button { padding: 2px 4px; font-size: 12px; }
.meta { margin: 4px 0 2px; font-size: 12px; }
.chip { padding: 1px 7px; font-size: 10px; margin-left: 4px; }
.clue { margin: 4px 0; gap: 8px; }
.clue-word { padding: 15px 6px; font-size: clamp(21px, 6.6vw, 29px); }
.timer { margin: 2px 0; }
.clock { font-size: 18px; }
.speed { font-size: 13px; }
.how { display: none; }
form { gap: 6px; }
.field { gap: 2px; font-size: 11px; }
.field input { padding: 11px 12px; font-size: 17px; }
.def { font-size: 13px; }
.primary { padding: 13px; font-size: 16px; }
.error { min-height: 0; margin: 4px 2px 0; font-size: 13px; }
.error:empty { display: none; }
.hints { margin: 6px 0 0; }
.hint-gold { padding: 8px 10px; font-size: 14px; }
.def-btn { padding: 7px 10px; font-size: 13px; }
.hint-row { align-items: stretch; }
.hint-bar { margin: 6px 0 0; height: 5px; }
.hints ul { margin: 6px 0 0; gap: 4px; }
.hints li { padding: 6px 10px; font-size: 13px; }
.foot { display: none; }

/* finished puzzle: the result takes over the screen, so there is nothing to scroll past */
main.done .clue, main.done .attempts, main.done .legend, main.done .how, main.done #error, main.done .timer { display: none; }
.result { margin-top: 8px; padding: 14px 14px 12px; animation: pop .3s ease-out; }
.result h2 { margin: 0 0 6px; font-size: 22px; }
.result .answer { font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 700; text-transform: capitalize; margin: 2px 0 6px; }
.result .score-big { font-size: 40px; margin: 2px 0; }
.result .primary { width: 100%; margin-top: 10px; }
.how-scored { margin-top: 10px; text-align: left; font-size: 14px; }
.how-scored summary { cursor: pointer; color: var(--muted); text-align: center; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* the hidden attribute must always win over component display rules */
[hidden] { display: none !important; }
main.done #guess-form, main.done #hints { display: none !important; }

/* guess feedback: words marked right or wrong, rhyme badge */
.row-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; }
.gw.ok { color: var(--good); } .gw.no { color: var(--err); }
.dot { color: var(--muted); }
.rbadge { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--bad); color: var(--ink); white-space: nowrap; }
.rbadge.gold { background: var(--good); color: #fff; } .rbadge.silver { background: var(--warn); color: #3a2600; }
.field input.ok { border-color: var(--good); } .field input.bad { border-color: var(--err); }

/* first-time tour */
.modal.tour{align-items:center;background:rgba(10,20,15,.72)}
.modal.tour .sheet{border-radius:22px;max-width:380px;width:calc(100% - 32px);padding:26px 22px 20px;text-align:center}
.modal.tour #modal-close{display:none}
.tour-card h2{margin:0 0 4px;font-family:Georgia,serif;font-size:24px}
.tour-brand{font-family:"Courier Prime","American Typewriter","Courier New",monospace;letter-spacing:2px;display:block;font-size:30px}
.tour-sub{font-family:"Courier Prime","Courier New",monospace;color:var(--muted);margin-bottom:10px}
.tour-card p{margin:10px 0}
.tour-card .muted{color:var(--muted);font-size:14px}
.tour-clue,.tour-pairs>div,.tour-rhyme{display:flex;gap:10px;justify-content:center;margin:14px 0}
.tour-pairs{display:grid;gap:10px;margin:16px 0}
.tour-clue span,.tc{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 16px;font-weight:800;letter-spacing:2px;font-size:18px}
.tc{min-width:112px}
.ta,.tw{border-radius:12px;padding:10px 16px;font-weight:800;letter-spacing:2px;font-size:18px;background:var(--good);color:#fff;min-width:96px;opacity:0;animation:tourIn .5s ease forwards}
.ta.a1{animation-delay:.35s}.ta.a2{animation-delay:1s}
.tw:nth-child(1){animation-delay:.2s}.tw:nth-child(2){animation-delay:.7s}
.tour-badge{display:inline-block;background:rgba(46,158,91,.15);color:var(--good);font-weight:800;border-radius:999px;padding:5px 14px;opacity:0;animation:tourIn .5s ease 1.3s forwards}
.tour-fake{display:inline-block;padding:12px 26px;border-radius:14px}
.tour-hint{margin:14px 0}
@keyframes tourIn{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.tour-dots{display:flex;gap:7px;justify-content:center;margin:18px 0 14px}
.tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.tour-dots i.on{background:var(--brand);width:22px;border-radius:6px}
.tour-next{width:100%;padding:15px;font-size:17px;font-weight:800}
.linkbtn{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;margin-top:10px;padding:6px;cursor:pointer;text-decoration:underline}

.tour-levels{display:flex;gap:8px;justify-content:center;margin:12px 0}
.tour-levels span{border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px;background:var(--card)}
.tour-lead{margin:6px 0 12px;font-size:15px}
.tour-ex{display:grid;gap:9px;margin:4px 0 10px}
.tour-row{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px}
.tour-clues{display:flex;gap:8px;justify-content:center;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.tour-clues span+span::before{content:"\00b7";margin-right:8px}
.tour-answers{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:6px;flex-wrap:wrap}
.tour-row .tw{min-width:0;padding:7px 14px;font-size:16px;animation-delay:calc(var(--d) + .25s)}
.tour-row .tw:nth-child(2){animation-delay:calc(var(--d) + .6s)}
.tour-row .tour-badge{font-size:12px;padding:4px 10px;animation-delay:calc(var(--d) + .95s)}
/* live green tick + tap to start */
.inwrap{position:relative;display:block}
.inwrap input{width:100%}
.tick{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:var(--good);color:#fff;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:800;text-transform:none;letter-spacing:0;pointer-events:none}
.tick[hidden]{display:none}
.tick.pop{animation:tickPop .55s ease}
@keyframes tickPop{0%{transform:translateY(-50%) scale(.4);opacity:0}55%{transform:translateY(-50%) scale(1.25);opacity:1}100%{transform:translateY(-50%) scale(1)}}
.field input.ok{background:rgba(46,158,91,.10);box-shadow:0 0 0 3px rgba(46,158,91,.25);transition:box-shadow .3s}
.gate{position:fixed;inset:0;z-index:9;border:0;margin:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,#2c6b52,#173a2c);color:#fff;font:inherit;padding:24px}
.gate[hidden]{display:none}
.gate-brand{font-family:"Courier Prime","American Typewriter","Courier New",monospace;font-weight:700;letter-spacing:4px;font-size:22px;opacity:.85}
.gate-kind{font-family:Georgia,serif;font-size:38px;font-weight:700;margin-top:18px}
.gate-sub{opacity:.8;font-size:16px}
.start-btn{display:block;width:100%;max-width:340px;margin:0 auto;border:0;cursor:pointer;font-family:inherit;background:linear-gradient(180deg,#ffd75a,#f5b301);color:#3a2600;border-radius:22px;padding:22px 38px;font-weight:900;font-size:28px;letter-spacing:3px;text-align:center;box-shadow:0 6px 0 #b87d00,0 14px 30px rgba(0,0,0,.28);animation:gatePulse 1.6s ease-in-out infinite}
.start-btn:active,.gate:active .start-btn{transform:translateY(4px);box-shadow:0 2px 0 #b87d00}
.gate-go{margin-top:34px}
.gate-note{margin-top:22px;opacity:.7;font-size:14px}
@keyframes gatePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.tour-row .tw{padding:6px 11px;font-size:15px;letter-spacing:1px}
.tour-row .tour-badge{padding:3px 8px;font-size:11px}
.tour-answers{gap:6px;flex-wrap:nowrap}

/* tour v3: numbered steps, arrow cells, back button */
.tour-steps{list-style:none;margin:12px 0 4px;padding:0;display:grid;gap:12px;text-align:left}
.tour-steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;line-height:1.35;font-size:15px}
.tour-steps li>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:15px}
.tour-row{display:grid;gap:5px;justify-items:center}
.tour-cells{display:flex;gap:12px;justify-content:center}
.tour-cell{display:grid;justify-items:center;gap:1px}
.tour-cell .cw{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.tour-cell i{font-style:normal;color:var(--muted);font-size:12px;line-height:1}
.tour-row .tour-badge{font-size:12px;padding:3px 10px}
.tour-nav{display:flex;gap:10px}
.tour-back{flex:0 0 30%;font-size:16px;padding:15px 0}
.tour-nav .tour-next{flex:1}

.tour-ex{gap:7px;margin:4px 0 12px}
.tour-row{padding:6px 8px;gap:3px}

/* tour v4: animated demo phone */
.demo{margin:6px 0 2px;text-align:left}
.demo-cap{min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:15px;line-height:1.25;margin-bottom:6px;padding:0 4px}
.demo-cap.in{animation:capIn .4s ease}
@keyframes capIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.demo-screen{position:relative;border:2px solid var(--line);border-radius:18px;padding:9px;background:var(--bg);overflow:hidden;pointer-events:none;user-select:none;min-height:318px}
.demo .clue{margin:0 0 6px;gap:8px}
.demo .clue-word{padding:10px 6px;font-size:21px;transition:box-shadow .3s}
.demo .clue.hl .clue-word{box-shadow:0 0 0 3px rgba(245,179,1,.7)}
.demo-form{display:grid;gap:5px}
.demo .field{gap:2px;font-size:10px}
.demo .field input{padding:8px 11px;font-size:16px;width:100%}
.demo .def{font-size:12px}
.demo .primary{padding:10px;font-size:15px;transition:transform .15s}
.demo .hints{margin:8px 0 0}
.demo .hint-gold{padding:7px 8px;font-size:13px}
.demo .hint-gold small{display:block;font-size:11px;font-weight:600;opacity:.8}
.demo .def-btn{padding:6px 8px;font-size:12px}
.demo .hints ul{margin:6px 0 0;gap:4px;list-style:none;padding:0;display:grid;min-height:0}
.demo .hints li{padding:5px 9px;font-size:12px;animation:capIn .35s ease}
.demo .press{transform:translateY(2px) scale(.97)}
.demo-result{display:grid;align-content:center;min-height:296px}
.demo-result .result{margin:0;animation:pop .3s ease-out}
.demo-result .tour-badge{opacity:1;animation:none;margin-top:6px;font-size:12px}
.demo-finger{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(40,40,40,.3);border:2px solid rgba(255,255,255,.95);box-shadow:0 3px 10px rgba(0,0,0,.35);transition:left .5s ease,top .5s ease,opacity .25s;opacity:0;z-index:2}
.demo-finger.tap{animation:fingerTap .35s ease}
@keyframes fingerTap{0%{transform:scale(1)}40%{transform:scale(.7);background:rgba(40,40,40,.5)}100%{transform:scale(1)}}
.tour-pts{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:12px;text-align:left}
.tour-pts li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;line-height:1.35;font-size:15px}
.tour-pts li>span{font-size:24px;text-align:center}
.modal.tour .sheet{max-height:94dvh}
.demo-hints .demo-screen{min-height:388px}
.demo-hints .demo-result{min-height:366px}

/* tour card 1: short steps with pop-out chips */
.tour-steps{gap:14px}
.tour-steps li{font-size:17px;align-items:center}
.tour-steps li>span{display:grid;gap:6px}
.chips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-style:normal}
.chips i{font-style:normal;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;font-size:15px;border-radius:10px;padding:6px 12px}
.chips .cc{background:linear-gradient(180deg,#ffd75a,#f5b301);color:#3a2600;box-shadow:0 2px 0 #b87d00}
.chips .ca{background:var(--good);color:#fff;box-shadow:0 2px 0 #1f7a43}
.chips .ok{background:rgba(46,158,91,.15);color:var(--good);font-size:12px;letter-spacing:0;padding:4px 9px;text-transform:none}
.tour-lead{font-size:16px;font-weight:700}
.tour-steps li>span{display:block}
.tour-steps .chips{margin-top:7px}
.pairs{display:grid;gap:7px;margin-top:7px;font-style:normal}
.pr{display:flex;align-items:center;gap:9px}
.pr i{font-style:normal;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;font-size:15px;border-radius:10px;padding:6px 12px}
.pr .cc{background:linear-gradient(180deg,#ffd75a,#f5b301);color:#3a2600;box-shadow:0 2px 0 #b87d00}
.pr .ca{background:var(--good);color:#fff;box-shadow:0 2px 0 #1f7a43}
.pr u{text-decoration:none;font-weight:900;font-size:22px;line-height:1;color:var(--muted)}
.pr .cc{min-width:92px;text-align:center}
.pr .ca{min-width:64px;text-align:center}
.primary.last{background:var(--err);color:#fff;animation:lastPulse 1.4s ease-in-out infinite}
@keyframes lastPulse{0%,100%{box-shadow:0 0 0 0 rgba(179,64,47,.45)}50%{box-shadow:0 0 0 6px rgba(179,64,47,0)}}
.tour-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 12px}
.tour-levels span{border:2px solid var(--line);border-radius:12px;padding:8px 4px;background:var(--card);font-weight:800;font-size:14px}

/* tutorial card: compact so it fits one screen */
.modal.tour .sheet{padding:16px 18px 12px;max-height:none;overflow:visible}
.tour-card h2{font-size:21px}
.tour-brand{font-size:26px}
.tour-sub{margin-bottom:4px;font-size:14px}
.tour-lead{margin:4px 0 6px}
.tour-levels{margin:6px 0 8px}
.tour-levels span{padding:6px 4px}
.tour-steps{gap:10px;margin:8px 0 2px}
.tour-steps li{font-size:16px}
.tour-steps .chips,.pairs{margin-top:5px}
.chips i,.pr i{padding:5px 11px;font-size:14px}
.chips .ok{padding:4px 8px;font-size:12px}
.pairs{gap:5px}
.tour-dots{margin:10px 0 10px}
.tour-next,.tour-back{padding:13px 0}
.tour-nav .tour-next{padding:13px}
.linkbtn{margin-top:4px;padding:4px}
.demo-cap{min-height:38px;font-size:14px;margin-bottom:4px}
.tour-pts{gap:10px}

/* notes */
.linkbtn{display:block;margin:10px auto 0;background:none;border:0;color:inherit;text-decoration:underline;opacity:.75;font:inherit;font-size:14px;padding:6px}
.ideabox{margin:12px 0 4px;padding:10px 12px;border-radius:12px;background:rgba(212,175,55,.16);border:1px solid rgba(212,175,55,.5);display:grid;gap:2px;text-align:center}
.ideabox span{font-size:13px;opacity:.8}
.seg{display:flex;gap:6px;margin:6px 0 10px}.seg button{flex:1;padding:8px;border-radius:10px;border:1px solid rgba(128,128,128,.4);background:none;color:inherit;font:inherit}
.seg button.on{background:rgba(212,175,55,.25);border-color:#d4af37;font-weight:700}
.noterow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
#modal textarea,#modal #note-contact,.noterow input{width:100%;box-sizing:border-box;padding:10px;border-radius:10px;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;font:inherit;margin-bottom:8px}
.secondary.wide{display:block;width:100%;margin-top:8px}

/* answer reveal: clue, arrow down, answer, then why */
.reveal{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 6px}
.rv{display:grid;justify-items:center;gap:2px}
.rv-clue{font-weight:700;font-size:17px;text-transform:capitalize;padding:4px 14px;border-radius:99px;background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.6)}
.rv-arrow{font-size:22px;line-height:1;opacity:.7}
.rv-ans{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:26px;text-transform:capitalize;padding:2px 14px;border-radius:12px;background:rgba(46,160,67,.18);border:1px solid rgba(46,160,67,.6)}
.why{text-align:left;font-size:14px;margin:4px 0 10px;opacity:.9}
.why ul{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.why li:last-child{opacity:.8}

/* home screen */
.home{position:fixed;inset:0;z-index:8;overflow-y:auto;background:var(--bg);color:var(--ink)}
.home[hidden]{display:none}
.home-in{max-width:460px;margin:0 auto;padding:22px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;min-height:100%;box-sizing:border-box}
.home-top{text-align:center;margin-top:6px}
.home-brand{margin:0;font-family:"Courier Prime","American Typewriter","Courier New",monospace;font-weight:700;letter-spacing:5px;font-size:34px;color:var(--brand)}
.home-sub{margin:2px 0 0;font-family:Georgia,serif;font-style:italic;opacity:.75}
.home-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.home-label{display:block;font-size:13px;font-weight:700;opacity:.7;margin-bottom:6px}
.home-card .namebox{margin:0}
.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.home-stats div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 4px;text-align:center;display:grid;gap:2px}
.home-stats b{font-size:20px}.home-stats span{font-size:11px;opacity:.7}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-tile{display:grid;justify-items:center;gap:4px;padding:14px 8px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:inherit;font:inherit;font-weight:700;cursor:pointer}
.home-tile span{font-size:24px}
.home-tile:active{background:var(--line)}
.home-idea{padding:13px;border-radius:14px;border:2px dashed rgba(212,175,55,.8);background:rgba(212,175,55,.14);color:inherit;font:inherit;font-weight:700;cursor:pointer}
.home-play{margin-top:auto;padding-top:8px;display:grid;gap:6px;text-align:center;position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 30%)}
.home-play small{opacity:.7;font-size:13px}

/* bigger buttons and text outside the game frame */
.subbar{gap:8px;padding:10px 0 4px}
.subbar button{font-size:15px;padding:11px 6px;font-weight:600}
.home-in{max-width:480px;gap:16px}
.home-brand{font-size:40px}.home-sub{font-size:19px}
.home-label{font-size:15px}.home-label2{margin-top:12px}.home-label2 em{font-style:normal;font-weight:500;opacity:.8}
.home-card .namebox input,.home-email{font-size:19px;padding:13px}
.home-email{width:100%;box-sizing:border-box;font:inherit;font-size:19px;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:13px}
.home-card .namebox button{font-size:18px;padding:0 20px}
.home-stats b{font-size:26px}.home-stats span{font-size:13px}
.home-tile{font-size:19px;padding:20px 8px}.home-tile span{font-size:32px}
.home-idea{font-size:19px;padding:17px}
.home-play{gap:8px;padding-top:12px}
.home-play #home-what{font-size:22px;font-family:Georgia,serif}
.home-play small{font-size:15px}
.gate-kind{font-size:42px}.gate-sub{font-size:19px}.gate-note{font-size:16px}
.sheet{font-size:17px}.sheet h2{font-size:28px}
.sheet .primary,.sheet .secondary,.sheet button.primary{font-size:19px;padding:15px}
.sheet input,.sheet textarea{font-size:18px}
.linkbtn{font-size:16px}.ideabox b{font-size:18px}.ideabox span{font-size:15px}
.home-play{background:var(--bg);padding-bottom:10px;margin-top:auto}

/* instant check of a player's own clue */
.vcheck{margin:2px 0 10px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--card);font-size:16px}
.vcheck b{display:block;font-size:19px;margin-bottom:4px}
.vcheck ul{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.vcheck.works{border-color:var(--good);background:rgba(46,158,91,.12)} .vcheck.works b{color:var(--good)}
.vcheck.fix{border-color:var(--err);background:rgba(179,64,47,.08)} .vcheck.fix b{color:var(--err)}
.vcheck.unsure{border-color:var(--warn)}
.vcheck li.yes{color:var(--good)} .vcheck li.no{color:var(--err);font-weight:700} .vcheck li.maybe{opacity:.8}

/* archive calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 6px; font-size: 18px; }
.cal-head button { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; width: 44px; height: 44px; font-size: 24px; cursor: pointer; }
.cal-head button:disabled { opacity: .3; cursor: default; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal em { text-align: center; font-style: normal; font-size: 12px; color: var(--muted, #888); padding: 2px 0; }
.cal-off { text-align: center; padding: 12px 0; opacity: .3; font-size: 14px; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font: inherit; border-radius: 10px; padding: 8px 0 7px; cursor: pointer; }
.cal-day b { font-weight: 600; font-size: 15px; }
.cal-day.today { border-color: #e0b030; box-shadow: 0 0 0 1px #e0b030; }
.cal-day i { display: flex; gap: 3px; }
.cal u, .cal-key u { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1px solid var(--line); text-decoration: none; }
.cal u.won, .cal-key u.won { background: #3a9d63; border-color: #3a9d63; }
.cal u.lost, .cal-key u.lost { background: #c0584a; border-color: #c0584a; }
.cal u.part, .cal-key u.part { background: #e0b030; border-color: #e0b030; }
.cal-key { font-size: 12px; line-height: 1.8; }
.crowd { margin: 6px 0; font-size: 14px; color: var(--muted, #888); }

/* tutorial: how words rhyme */
.tour-rhyme { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 12px; text-align: left; }
.tour-rhyme li { font-size: 15px; line-height: 1.35; }
.tour-rhyme .rr { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; font-size: 15px; }
.tour-rhyme .rr i { font-style: normal; font-weight: 700; }
.tour-rhyme .rr u { text-decoration: none; margin-left: auto; font-size: 12px; opacity: .7; }
.tour-rhyme .rr.good { background: rgba(46,158,91,.14); color: var(--good); }
.tour-rhyme .rr.bad { background: rgba(192,88,74,.14); color: #c0584a; }
.tour-note { font-size: 13px; line-height: 1.4; margin: 6px 0 0; opacity: .85; text-align: left; }

/* spelling hint: close to an answer but not a word */
.near { display: block; font-style: normal; font-size: 14px; font-weight: 600; color: #b8860b; margin-top: 6px; }
.near[hidden] { display: none; }

/* letter tiles for the answer boxes */
#guess-form .inwrap.tiled input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; }
.tiles { display: flex; gap: 6px; justify-content: center; cursor: text; }
.tiles .t { flex: 1 1 0; min-width: 0; max-width: 46px; aspect-ratio: 1; display: grid; place-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 10px; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; user-select: none; }
.tiles .t.f { border-color: var(--muted, #999); }
.tiles .t.cur { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,77,58,.25); }
.tiles .t.gap { box-shadow: -4px 0 0 0 var(--err); }
.tiles .t.mk-ok { background: rgba(46,158,91,.20); border-color: var(--good); }
.tiles .t.mk-bad { background: rgba(192,88,74,.20); border-color: var(--err); }
.inwrap.tiled input.ok ~ .tiles .t.f { background: rgba(46,158,91,.22); border-color: var(--good); }
.inwrap.tiled input.bad ~ .tiles .t.f { background: rgba(192,88,74,.18); border-color: var(--err); }
.inwrap.tiled .tick { position: static; display: inline-block; transform: none; margin: 8px 0 0; }
.inwrap.tiled .tick.pop { animation: tickPop2 .55s ease; }
@keyframes tickPop2 { 0% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
.inwrap.tiled .tick[hidden] { display: none; }
#guess-form .field input.ok { box-shadow: none; background: transparent; }