:root{
  --cellar:#1c1422;--plum:#2b1f33;--plum-2:#3a2b43;--plum-line:#463650;--candle:#f1e6d2;--candle-dim:#c3b4bf;
  --parchment:#efe4cf;--ink:#2e2320;--oxblood:#6e2238;--wax-gold:#b9862f;--dock:150px;
}
:where(.invite,.game) button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.game :focus-visible,.invite :focus-visible{outline:2px solid var(--wax-gold);outline-offset:2px}

/* Front-page invitation */
.invite{position:relative;width:100%;max-width:440px;margin-top:auto;background:#fffdf9;border-radius:18px;padding:14px;box-shadow:0 18px 40px -18px #000;color:var(--ink);text-align:left}
.invite-main{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center}
.mini-plan{width:86px;height:86px;display:block}
.mini-seal{transform-box:fill-box;transform-origin:center;animation:press-in .5s cubic-bezier(.2,1.4,.5,1) .5s backwards}
.mini-seal.two{animation-delay:.85s}
@keyframes press-in{from{transform:scale(1.9);opacity:0}to{transform:none;opacity:1}}
.invite h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:25px;line-height:1.05;color:var(--oxblood)}
.invite-text{font-size:13.5px;line-height:1.35;color:#594a44;margin-top:4px}
.invite-clue{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:20px;line-height:1.15;color:var(--oxblood);margin-top:3px}
.days{display:flex;align-items:center;gap:4px;margin:11px 0 10px}
.days i{flex:1;height:5px;border-radius:3px;background:#e8dccb}
.days i.on{background:var(--wax-gold)}
.days i.today{background:var(--oxblood)}
.days span{font-size:12px;color:#594a44;margin-left:5px;white-space:nowrap}
.play{display:block;width:100%;background:var(--oxblood);color:#fff6ef;border:0;border-radius:13px;padding:14px 12px;font-size:16.5px;font-weight:500}

/* Game layout: the board and statements are always on screen together */
.game{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;background:var(--cellar);color:var(--candle);font-family:Inter,system-ui,sans-serif;font-weight:300}
.game[hidden],.overlay[hidden]{display:none}
.bar{flex:none;display:flex;align-items:center;gap:2px;height:calc(46px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 4px 0;width:100%;max-width:1040px;margin:0 auto}
.bar button{background:none;border:0;color:var(--candle);padding:9px 8px;font-size:14px;font-weight:400;border-radius:9px;white-space:nowrap}
.bar .back{font-size:21px;line-height:1;padding:7px 9px 9px}
.bar .case-name{flex:1;min-width:0;text-align:left;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:19px;overflow:hidden;text-overflow:ellipsis;padding-left:2px}
.bar .time{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--candle-dim);padding:0 4px}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:1040px;margin:0 auto}
.board-wrap{flex:none;display:flex;justify-content:center;padding:0 8px}
.plan{width:100%;width:min(100%,calc(100vh - 46px - var(--dock) - 118px));width:min(100%,calc(100dvh - 46px - env(safe-area-inset-top) - var(--dock) - 118px));background:var(--parchment);border-radius:3px;padding:4px;box-shadow:0 0 0 1px #000}
.side{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.notes{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:7px 14px 48px}
.dock{flex:none;position:relative;background:var(--plum);border-top:1px solid var(--plum-line);padding:7px 8px calc(env(safe-area-inset-bottom) + 7px)}
@media (min-aspect-ratio:1/1){
  .stage{flex-direction:row;gap:10px;padding:0 8px 8px 0}
  .board-wrap{align-items:flex-start;padding:0 0 0 8px}
  .plan{width:calc(100vh - 62px);width:calc(100dvh - 62px - env(safe-area-inset-top));max-width:700px}
  .dock{border:1px solid var(--plum-line);border-radius:10px}
}

/* The plan */
.grid{position:relative;display:grid;border:3px solid var(--ink)}
.cell{position:relative;aspect-ratio:1;min-width:0;border:0;border-right:.5px solid rgba(46,35,32,.2);border-bottom:.5px solid rgba(46,35,32,.2);padding:0;color:var(--ink);display:block}
.cell.wall-r{border-right:3px solid var(--ink)}
.cell.wall-b{border-bottom:3px solid var(--ink)}
.cell.taken::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(46,35,32,.14) 0 2px,transparent 2px 6px);pointer-events:none}
.cell.pickup{box-shadow:inset 0 0 0 2px rgba(110,34,56,.34)}
.piece{position:absolute;pointer-events:none}
.piece.block{inset:3%;color:#4b3829}
.piece.feature{right:4%;bottom:4%;width:40%;height:40%;color:#7d6652}
.mark{position:absolute;inset:26%;color:#8c2238;pointer-events:none}
.room-name{position:absolute;pointer-events:none;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600;font-size:13.5px;line-height:1;color:#4f3d31;padding:3px 0 0 4px;white-space:nowrap;overflow:hidden;z-index:1}
.room-name.evidence{color:var(--oxblood)}
.seal{position:absolute;inset:6%;z-index:2;pointer-events:none;filter:drop-shadow(0 1.5px 1.5px rgba(30,15,15,.5))}
.cell.named .seal{inset:24% 3% 3% 24%}
.seal.fresh{animation:press .26s cubic-bezier(.2,1.4,.5,1)}
@keyframes press{from{transform:scale(1.5);opacity:.3}to{transform:scale(1);opacity:1}}
.seal text,.chip-seal text,.closed-seal text,.demo-seal text{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-variant-numeric:lining-nums;fill:rgba(255,245,230,.95);text-anchor:middle}

/* Statements */
.statement{display:block;width:100%;background:none;border:0;border-bottom:1px solid var(--plum-line);padding:8px 2px;text-align:left;color:var(--candle);font-size:14.5px;line-height:1.32;font-weight:300}
.statement.about{color:#ffe6ad;font-weight:400}
.statement.done{color:#7d6d7a;text-decoration:line-through;text-decoration-thickness:1px}
.statement.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,50%{background:#59401d}100%{background:transparent}}
.rule{font-size:13px;line-height:1.35;color:#ecd59f;padding-bottom:7px;border-bottom:1px solid var(--plum-line)}
.key{display:flex;flex-wrap:wrap;gap:4px 13px;padding-top:9px;font-size:12px;color:var(--candle-dim)}
.key span{display:inline-flex;align-items:center;gap:5px}
.key svg{width:16px;height:16px;color:var(--parchment)}

/* Dock */
.toast{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:6;background:#f5e7cf;color:#3d2b1c;font-size:13.5px;font-weight:400;line-height:1.25;text-align:center;padding:7px 10px;border-radius:9px;box-shadow:0 6px 14px -5px #000;pointer-events:none}
.toast:empty{display:none}
.tray{display:grid;grid-template-columns:repeat(var(--seals),minmax(0,1fr));gap:2px;margin-bottom:6px}
.chip{min-width:0;background:none;border:0;border-radius:10px;padding:3px 0 2px;color:var(--candle);display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;font-weight:400}
.chip-seal{width:34px;height:34px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));transition:transform .14s}
.chip.sel{background:#52405c}
.chip.sel .chip-seal{transform:translateY(-2px) scale(1.12)}
.chip.used .chip-seal{opacity:.22;filter:none}
.chip.used{color:#8d7e8a}
.chip span{max-width:100%;white-space:nowrap}
.tray.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.tray.compact .chip{flex-direction:row;gap:3px;padding:2px 1px;justify-content:flex-start;font-size:10px;letter-spacing:-.025em}
.tray.compact .chip-seal{width:22px;height:22px;flex:none}
.tools{display:flex;gap:5px}
.tools button{flex:1;background:var(--plum-2);border:0;border-radius:9px;color:var(--candle);padding:8px 2px;font-size:13.5px;font-weight:400}
.tools button:disabled{opacity:.38;cursor:default}

@media (min-aspect-ratio:1/1) and (max-width:760px){
  .tray,.tray.compact{grid-template-columns:repeat(var(--seals),minmax(0,1fr))}
  .tray .chip span{display:none}
  .tray .chip-seal,.tray.compact .chip-seal{width:26px;height:26px}
  .tray.compact .chip{justify-content:center}
  .room-name{font-size:11px}
}

/* Panels */
.overlay{position:absolute;inset:0;z-index:20;background:rgba(14,9,18,.86);display:flex;align-items:flex-end;justify-content:center}
.panel{width:100%;max-width:520px;max-height:94%;overflow-y:auto;background:#f3ead8;color:var(--ink);border-radius:18px 18px 0 0;padding:20px 18px calc(env(safe-area-inset-bottom) + 16px)}
.panel small{display:block;font-size:13px;color:#7a6a62;margin-bottom:2px}
.panel h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:30px;line-height:1.08;color:var(--oxblood);margin-bottom:9px}
.panel p{font-size:15.5px;line-height:1.45;margin-bottom:12px}
.panel ol{margin:0 0 12px 18px;display:grid;gap:7px;font-size:14.5px;line-height:1.38}
.panel .primary{display:block;width:100%;background:var(--oxblood);color:#fff6ef;border:0;border-radius:12px;padding:13px;font-size:15.5px;font-weight:500;margin-top:6px}
.panel .secondary{display:block;width:100%;background:none;border:0;color:var(--oxblood);padding:11px;font-size:14.5px;font-weight:400;margin-top:1px}
.demo{display:grid;grid-template-columns:repeat(3,44px);width:138px;margin:0 auto 12px;border:3px solid var(--ink);background:var(--parchment)}
.demo div{position:relative;height:44px;border-right:.5px solid rgba(46,35,32,.25);border-bottom:.5px solid rgba(46,35,32,.25)}
.demo .taken{background:repeating-linear-gradient(135deg,rgba(46,35,32,.17) 0 2px,transparent 2px 6px)}
.demo-seal{position:absolute;inset:6%}
.closed-seal{display:block;width:88px;height:88px;margin:0 auto 6px;animation:stamp .5s cubic-bezier(.2,1.5,.45,1)}
@keyframes stamp{from{transform:scale(2.3) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.panel.closed{text-align:center}
.your-clue{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:23px;line-height:1.2;color:var(--oxblood);border-top:1px solid #d9c9aa;border-bottom:1px solid #d9c9aa;padding:12px 4px;margin:4px 0 11px}
.stat{font-size:13px;color:#7a6a62;margin-bottom:9px}
.file-row{display:flex;align-items:baseline;gap:10px;width:100%;background:none;border:0;border-top:1px solid #d9c9aa;padding:11px 2px;text-align:left;color:var(--ink);font-size:15px;font-weight:400}
.file-row b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-variant-numeric:lining-nums;font-size:19px;color:var(--oxblood);width:18px}
.file-row em{margin-left:auto;font-style:normal;font-size:13px;color:#7a6a62;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.seal.fresh,.closed-seal,.statement.flash,.mini-seal{animation:none}.chip-seal{transition:none}}