/* Ported from sherlock-prototype.html. Snowy blue-grey paper, ink navy, cranberry accent. */
:root{
  --bg:#eef2f5; --surface:#ffffff; --row-a:#f6f8fa; --row-b:#e9eef2;
  --fg:#18233a; --muted:#5d6b80; --line:#d3dbe3;
  --accent:#a8233b; --accent-fg:#ffffff;
  --good:#2f8a4e; --bad:#c73a3a; --gold:#d4a017; --silver:#9aa6b2; --bronze:#b5733a;
  --shadow:0 8px 30px rgba(24,35,58,.18);
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1722; --surface:#172231; --row-a:#1a2636; --row-b:#141e2b;
  --fg:#e5ebf2; --muted:#93a1b4; --line:#2a384b;
  --accent:#e05a72; --accent-fg:#1a0b10;
  --good:#3fae66; --bad:#e2575a; --gold:#e8b931; --silver:#b4bfcb; --bronze:#d08a4f;
  --shadow:0 8px 30px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1722; --surface:#172231; --row-a:#1a2636; --row-b:#141e2b;
  --fg:#e5ebf2; --muted:#93a1b4; --line:#2a384b;
  --accent:#e05a72; --accent-fg:#1a0b10;
  --good:#3fae66; --bad:#e2575a; --gold:#e8b931; --silver:#b4bfcb; --bronze:#d08a4f;
  --shadow:0 8px 30px rgba(0,0,0,.5); color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg);margin:0}
body{font-family:var(--body);font-size:15px;line-height:1.4}
a{color:var(--accent)}
.wrap{max-width:600px;margin:0 auto;padding-inline:16px;padding-block:10px 60px;display:flex;flex-direction:column;gap:14px}
header{display:flex;align-items:center;gap:10px}
header h1{min-width:0}
h1{font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0;letter-spacing:.01em}
h1 small{display:block;font-family:var(--body);font-size:.7rem;color:var(--muted);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.timer{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.toggle{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600;cursor:pointer;user-select:none}
.toggle input{margin:0;accent-color:var(--gold);cursor:pointer}
button,select{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 11px;cursor:pointer}
button:focus-visible,select:focus-visible,.mini:focus-visible,.cell:focus-visible,.door:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
button:disabled{opacity:.45;cursor:default}
button.link{border:0;background:none;padding:4px 6px;color:var(--muted);font-weight:600}
select.lang{padding:4px 6px;color:var(--muted);font-weight:600;font-size:.85rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:7px 10px}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.hint{color:var(--muted);font-size:.85rem;margin:0}
.status{display:flex;gap:12px;font-size:.85rem;color:var(--muted);flex-wrap:wrap}
.status b{color:var(--fg);font-variant-numeric:tabular-nums}
.status .err b{color:var(--bad)}
.tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--row-b);color:var(--muted);vertical-align:middle}
.tag.hard{background:var(--accent);color:var(--accent-fg)}

/* Board */
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:5px 9px;user-select:none;-webkit-user-select:none}
.board.busy{cursor:progress}
.hnum{text-align:center;font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.05em;padding-bottom:2px}
.cell{position:relative;aspect-ratio:1;max-width:100%;border-radius:6px;border:1px solid var(--line);container-type:inline-size;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);padding:3px;cursor:pointer;transition:background .15s}
.cell.ra{background:var(--row-a)} .cell.rb{background:var(--row-b)}
.cell.sel{box-shadow:inset 0 0 0 3px var(--accent)}
.mini{display:flex;align-items:center;justify-content:center;font-family:var(--emoji);font-size:24cqi;line-height:1;border-radius:4px}
.mini.gone{opacity:0} /* still tappable: tap the empty spot to bring it back */
.mode-direct .mini:not(.gone):hover{background:var(--line)}
.placed{grid-column:1/-1;grid-row:1/-1;display:flex;align-items:center;justify-content:center;font-family:var(--emoji);font-size:58cqi;line-height:1}
.cell.err::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
.cell.flash-bad{animation:bad .5s}
.cell.flash-good{animation:good .45s}
@keyframes bad{0%,100%{transform:none}20%{transform:translateX(-4px);background:var(--bad)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}}
@keyframes good{0%{transform:scale(.85)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.cell.flash-bad,.cell.flash-good{animation:none}}
.mini.pressing{background:var(--accent);transition:background .55s linear}

/* Clues */
.clues h2{font-family:var(--display);font-weight:400;font-size:1.05rem;margin:4px 0 6px}
.cgroup{display:flex;flex-wrap:wrap;gap:6px;min-height:40px}
.czone{margin-bottom:4px}
.clue-tools{gap:2px;font-size:.85rem}
.clue-tools .muted{color:var(--muted);margin-right:2px}
.ghead{display:flex;align-items:center;gap:4px;margin:4px 0 6px}
.gname{font-family:var(--display);font-size:1.05rem;color:var(--fg);background:none;border:1px solid transparent;border-radius:6px;padding:1px 4px;margin-left:-5px;min-width:0;max-width:100%;field-sizing:content}
.gname:hover{border-color:var(--line)}
.gname:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.gdel{font-size:.8rem;opacity:.5}
.gdel:hover{opacity:1}
.cgroup:empty{border:1px dashed var(--line);border-radius:8px}
.cgroup:empty::before{content:"Drag clues here";color:var(--muted);font-size:.85rem;align-self:center;padding:0 10px}
.clue[draggable]{cursor:grab}
.clue.dragging{opacity:.25;outline:2px dashed var(--accent)}
.clue{display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 6px;font-family:var(--emoji);font-size:22px;line-height:1;cursor:pointer;min-height:40px;user-select:none;-webkit-user-select:none}
.clue.used{opacity:.3}
.clue.v{flex-direction:column;padding:4px 7px;gap:1px}
.clue .op{font-family:var(--body);font-size:13px;font-weight:700;color:var(--muted);padding:0 2px}
.clue .op.no{color:var(--bad)}
.clue .dots{display:flex;gap:2px;margin-left:4px}
.clue .dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.clue .dots i.on{background:var(--accent)}
.clue.v .op{line-height:.8}
.legend{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.85rem;color:var(--muted);margin-top:8px;align-items:center}
.legend .clue{font-size:16px;min-height:0;cursor:default;justify-self:start}
details summary{cursor:pointer;color:var(--muted);font-size:.85rem;font-weight:600;margin-top:10px}

/* Zoom tray: sits right under the board, never on top of it */
.tray{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;margin-top:-6px}
.tray[hidden]{display:none}
.tray-head{display:flex;align-items:baseline;gap:8px;font-size:.85rem;font-weight:600}
.tray-head .muted{margin-left:auto;color:var(--muted);font-weight:500;font-size:.78rem}
.opts{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%}
.opt{display:flex;flex-direction:column;gap:5px;align-items:stretch;min-width:0}
.opt .big{font-family:var(--emoji);font-size:30px;line-height:1;padding:9px 0;border-radius:10px;text-align:center;background:var(--row-a);border:1px solid var(--line)}
.opt.off .big{opacity:.3;background:transparent;border-style:dashed}
.opt.wrong .big{opacity:.15;text-decoration:line-through}
.opt .placebtn{padding:7px 0;font-size:.78rem;font-weight:600}
.opt:not(.off) .placebtn{border-color:var(--fg)}
.tools .status{gap:10px}
#helpBtn{width:38px;padding-inline:0;font-weight:700}

/* Result */
.overlay{position:fixed;inset:0;background:rgba(10,15,25,.55);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.overlay[hidden]{display:none}
.result{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:20px;max-width:380px;width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;max-height:calc(100vh - 32px);overflow:auto}
.result h2{font-family:var(--display);font-weight:400;margin:0;font-size:1.5rem}
.rgrid{display:grid;grid-template-columns:repeat(6,26px);gap:4px}
.rgrid i{width:26px;height:26px;border-radius:5px;background:var(--good)}
.rgrid i.bad{background:var(--bad)}
.rgrid i.hint{background:var(--gold)}
.result .meta{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums;text-align:center}
.namerow{display:flex;gap:8px;width:100%}
.namerow input{flex:1;min-width:0;font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.result textarea{width:100%;font-family:var(--emoji),var(--body);font-size:13px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);padding:6px;resize:none}
.note{font-size:.8rem;color:var(--muted);text-align:center;margin:0}
.loading{padding:40px 0;text-align:center;color:var(--muted)}

/* Calendar */
.intro{margin:0;color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.door{position:relative;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;cursor:pointer;color:var(--fg);text-decoration:none;font:inherit}
.door .num{font-family:var(--display);font-size:1.5rem;line-height:1}
.door .sub{font-size:.7rem;color:var(--muted);font-weight:600;min-height:1em;font-family:var(--emoji),var(--body)}
.door.hard{border-color:var(--accent);border-width:2px}
.door.today{box-shadow:0 0 0 3px var(--accent)}
.door.locked{background:var(--row-b);color:var(--muted);cursor:default;opacity:.7}
.door.gold .sub,.door.silver .sub,.door.bronze .sub{font-size:1.05rem;line-height:1} .door.silver .sub{color:var(--silver)} .door.bronze .sub{color:var(--bronze)}
.door .badge{position:absolute;top:3px;right:5px;font-size:.75rem;font-family:var(--emoji)}
.door .star{width:20px;height:20px}
.door.finale{background:linear-gradient(135deg,var(--surface),var(--row-b))}
.keyrow{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}

/* Highscore */
table.scores{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.scores th,.scores td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line)}
.scores th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.scores td.n{text-align:right;width:3.2em}
.scores th.n{text-align:right}
.scores tr.me td{background:var(--row-b);font-weight:600}
.scores .name{word-break:break-word}
.empty{color:var(--muted);text-align:center;padding:24px 0}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:10px;box-shadow:var(--shadow);z-index:20;font-weight:600;max-width:calc(100% - 32px);text-align:center}
.toast[hidden]{display:none}
.solvedbanner{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px}

/* Calendar link to the wrap-up */
.wrapbanner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--accent);color:var(--accent-fg);text-decoration:none;box-shadow:var(--shadow)}
.wrapbanner span:first-child{font-family:var(--emoji);font-size:1.8rem;line-height:1}
.wrapbanner span:last-child{margin-left:auto;font-size:1.6rem;line-height:1}

/* Season wrap-up */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hero h2{font-family:var(--display);font-weight:400;font-size:1.5rem;margin:0}
.hero p{margin:0;max-width:44ch}
h2.section{font-family:var(--display);font-weight:400;font-size:1.15rem;margin:6px 0 0}
.everyone{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.everyone li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.everyone li.me{border-color:var(--accent);border-width:2px}
.everyone .rank{font-family:var(--display);font-size:1.3rem;min-width:1.6em;text-align:center;line-height:1.3;color:var(--muted)}
.everyone .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.everyone .line{display:flex;gap:8px;align-items:baseline}
.everyone .name{font-weight:700;word-break:break-word}
.everyone .tot{margin-left:auto;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.everyone .small{font-size:.78rem;color:var(--muted)}
.strip{display:grid;grid-template-columns:repeat(24,1fr);gap:2px}
.strip i,.sw{display:block;aspect-ratio:1;border-radius:3px;background:var(--row-b);box-sizing:border-box}
.strip i.gold,.sw.gold{background:var(--gold)}
.strip i.silver,.sw.silver{background:var(--silver)}
.strip i.bronze,.sw.bronze{background:var(--bronze)}
.strip i.hard,.sw.hard{box-shadow:inset 0 -2px 0 var(--accent)}
.sw{display:inline-block;width:12px;height:12px;vertical-align:-1px}

/* stars */
.staricon.silver{color:var(--silver)} .staricon.bronze{color:var(--bronze)}

/* hints */
/* The hint box sits between the board and the clues. With no hint it is one line the player can
   click to ask for one; with a hint it grows, which only moves the clues below it. */
.hintcard{max-height:60vh;overflow:auto;border:2px solid var(--gold);border-radius:12px;background:var(--surface);padding:10px 12px;box-shadow:var(--shadow)}
.hintcard.empty{border:1px dashed var(--line);background:transparent;box-shadow:none;padding:6px 12px;text-align:center;color:var(--muted);font-size:.85rem;cursor:pointer}
.hintcard.empty:hover{color:inherit;border-color:var(--gold)}
.hintcard p{margin:6px 0;line-height:1.45}
.hintcard .hc-head{font-weight:700;font-size:.9rem}
.hintcard .hc-main{display:flex;gap:12px;align-items:flex-start;margin-top:6px}
.hintcard .hc-clues{display:flex;flex-wrap:wrap;gap:6px;max-width:40%;flex:none}
.hintcard .hc-clues .clue{cursor:default}
.hintcard .hc-body{flex:1;min-width:0}
.hintcard .hc-body>p:first-child,.hintcard .hc-body>ol:first-child{margin-top:0}
.hintcard .bar{margin-top:8px}
.hintcard .muted{color:var(--muted)}
.hintcard ol.steps{margin:6px 0;padding-left:1.4em;line-height:1.45}
.hintcard ol.steps li{cursor:pointer;padding:2px 4px;border-radius:6px;color:var(--muted)}
.hintcard ol.steps li.on{color:inherit;background:color-mix(in srgb,var(--gold) 18%,transparent)}
.hintcard ol.steps li.dead{font-weight:600;color:inherit}
.clue.hl{opacity:1;box-shadow:0 0 0 3px var(--gold);animation:hlpulse 1.6s ease-in-out infinite}
@keyframes hlpulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 45%,transparent)}}
.mini.hl-rm{box-shadow:inset 0 0 0 2px var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.mini.hl-key{box-shadow:inset 0 0 0 2px var(--gold);background:color-mix(in srgb,var(--gold) 22%,transparent)}
.cell.hl-row{box-shadow:inset 0 0 0 2px var(--gold)}
@media (prefers-reduced-motion:reduce){.clue.hl{animation:none}}
/* Mouse hover links clues and board icons, in the same gold as hint highlights but without the pulse */
.clue.hv{box-shadow:0 0 0 3px var(--gold)}
.clue.used.hv{opacity:.6}
.mini.hv,.placed.hv{box-shadow:inset 0 0 0 2px var(--gold);background:color-mix(in srgb,var(--gold) 22%,transparent);border-radius:4px}
.cell.hinted::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
/* The clicked clue: its icons stay lit until it is clicked again */
.clue.picked{box-shadow:0 0 0 3px var(--gold),0 0 0 5px var(--accent)}
.clue.used.picked{opacity:.6}

/* Puzzle layout: stacked (board, hint, clues) on narrow screens; on wide screens the hint box and
   clues get their own column right of the board, which scrolls on its own when the clues are long. */
.playarea,.boardcol,.sidecol{display:flex;flex-direction:column;gap:14px}
@media (min-width:1100px){
  .wrap.play{max-width:1200px}
  .playarea{display:grid;grid-template-columns:minmax(0,620px) minmax(340px,1fr);align-items:start;gap:28px}
  .sidecol{position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto;padding:4px 6px 4px 4px;margin:-4px -6px -4px -4px}
  .sidecol .hintcard{flex:none}
}