:root{--cork: #b2865a;--cork-dark: #a97c4f;--wood: #6b4a2c;--paper: #fffdf5;--index: #f5f1e6;--rule: #ddd6c4;--ink: #2a2620;--faint: #8a8275;--red: #c4342d;--blue: #2c5cb8;--neutral: #b9ad90;--assassin: #222222;--sticky-red: #f3e27a;--sticky-blue: #a8d4f0;--string: #b31b1b;--focus: #e0a200;--type: "Special Elite", "Courier New", monospace;--hand: "Caveat", "Comic Sans MS", cursive;--shadow: 2px 5px 10px rgb(0 0 0 / .32);--frame: 22px;color-scheme:light}@media (max-width: 640px){:root{--frame: 8px}}*{box-sizing:border-box}html,body{margin:0}body{min-height:100vh;font-family:var(--type);color:var(--ink);font-size:16px;line-height:1.4;background-color:var(--cork);background-image:radial-gradient(circle at 20% 30%,rgb(255 255 255 / .08) 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,rgb(0 0 0 / .12) 0 2px,transparent 3px);background-size:13px 13px,17px 17px;-webkit-tap-highlight-color:transparent}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;border:var(--frame) solid var(--wood);box-shadow:inset 0 0 40px #0006;pointer-events:none;z-index:50}#root{padding:var(--frame)}h1,h2,h3{margin:0 0 6px;line-height:1.1}p{margin:8px 0}.faint{color:var(--faint)}.small-text{font-size:13px}.warn{color:var(--red)!important}.red{color:var(--red)}.blue{color:var(--blue)}.hand{font-family:var(--hand);font-weight:600;font-size:22px;line-height:1.15}.big-hand{font-size:30px;font-weight:700}.on-cork{color:var(--paper);text-shadow:0 1px 2px rgb(0 0 0 / .5)}.row{display:flex;gap:8px;align-items:center}.row.between{justify-content:space-between}.pin{position:absolute;top:-6px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8 0 2px,var(--pin, #c22) 3px);box-shadow:0 3px 3px #0006;z-index:4}.pin.red{--pin: #c22}.pin.blue{--pin: #2457c5}.pin.grey{--pin: #888}.pin.black{--pin: #111}.pin.yellow{--pin: #d9a400}.paper{position:relative;background:var(--paper);padding:16px 18px;box-shadow:var(--shadow);transform:rotate(var(--tilt, 0deg))}.paper h3,.settings h3{font:700 30px var(--hand)}.paper.lined{background-image:repeating-linear-gradient(var(--paper) 0 27px,#9cc3e6 27px 28px)}.sticky{position:relative;padding:12px 14px;box-shadow:var(--shadow);font:700 26px/1.1 var(--hand);background:var(--sticky-red);transform:rotate(var(--tilt, 0deg))}.sticky.blue{background:var(--sticky-blue)}.sticky.yellow{background:var(--sticky-red)}.label-tape{background:#f5eed6eb;padding:4px 14px;box-shadow:1px 2px 4px #00000040;transform:rotate(-1deg);font-size:15px}button{font:inherit;color:inherit}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:var(--type);font-size:15px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:3px;padding:7px 14px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .05s,box-shadow .05s,opacity .15s;white-space:nowrap}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--ink);color:var(--paper)}.btn.big{width:100%;padding:12px 16px;font-size:18px}.btn.small{padding:3px 10px;font-size:13px;box-shadow:1px 1px 0 var(--ink);border-width:1.5px}.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--paper);text-shadow:0 1px 2px rgb(0 0 0 / .5)}.btn.stamp{background:var(--red);border-color:#7d1c17;box-shadow:3px 3px #7d1c17;color:#fff;letter-spacing:.08em;text-transform:uppercase}.link-btn{background:none;border:none;padding:4px 0;cursor:pointer;font:700 20px var(--hand);color:var(--faint)}.link-btn:hover{color:var(--ink)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}input,textarea,select{font:inherit;color:var(--ink);background:transparent;border:none;border-bottom:2px solid var(--ink);border-radius:0;padding:6px 2px;width:100%}textarea{border:1.5px dashed var(--faint);padding:8px;resize:vertical;background:#ffffff80}select{border:1.5px solid var(--ink);padding:6px 8px;background:var(--paper);width:auto}input:disabled,textarea:disabled,select:disabled{opacity:.65}input::placeholder,textarea::placeholder{color:#b5ad9f}.field{display:block;margin:14px 0}.field>span{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}.check{display:inline-flex;gap:8px;align-items:center;cursor:pointer;font-size:14px}.check input{width:auto}.landing{min-height:calc(100vh - 2 * var(--frame));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 16px}.landing-card{width:min(420px,100%);padding:28px 26px;text-align:center}.landing-card form{text-align:left}.logo{font:700 56px/1 var(--hand);margin:4px 0 8px}.logo-tape{font:700 24px/1.2 var(--hand)}.join-sticky{width:min(300px,100%)}.join-sticky .row{margin-top:8px}.code-input{text-transform:uppercase;letter-spacing:.2em;font-family:var(--type);font-size:18px}.case-no{font-family:var(--type);letter-spacing:.1em}.page{max-width:1320px;margin:0 auto;padding:8px 16px 32px}.room-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 18px;flex-wrap:wrap}.room-code strong{letter-spacing:.12em}.header-actions{display:flex;gap:8px;align-items:center}@media (max-width: 640px){.logo-tape{display:none}.room-header{padding-bottom:12px}}.conn-banner{position:fixed;top:calc(var(--frame) + 6px);left:50%;transform:translate(-50%) rotate(-1deg);z-index:60;background:var(--sticky-red);padding:6px 16px;box-shadow:var(--shadow);font:700 22px var(--hand)}.toasts{position:fixed;bottom:calc(var(--frame) + 14px);left:50%;transform:translate(-50%);display:grid;gap:8px;z-index:60;width:max-content;max-width:calc(100vw - 40px)}.toast{background:var(--sticky-red);padding:10px 16px;box-shadow:var(--shadow);font:700 22px/1.1 var(--hand);text-align:center;transform:rotate(-1.5deg)}.chips{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}.chip{display:inline-flex;align-items:center;font-size:15px}.chip.you{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.chip.offline{opacity:.45}.host-star{color:#b8860b}.chip-x{border:none;background:none;cursor:pointer;color:var(--faint);padding:0 0 0 4px;font-size:18px;line-height:1}.chip-x:hover{color:var(--red)}.names{list-style:none;margin:0;padding:0;line-height:1.7}.lobby{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}@media (min-width: 920px){.lobby{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}.start-bar{grid-column:1 / -1}}.lobby-teams{display:grid;gap:28px 22px;grid-template-columns:1fr 1fr;align-content:start}.lobby-teams .spectators{grid-column:1 / -1}@media (max-width: 520px){.lobby-teams{grid-template-columns:1fr}}.team-note.red h3{color:var(--red)}.team-note.blue h3{color:var(--blue)}.slot-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin:10px 0 4px}.settings{padding:18px 20px 20px}.settings h3{margin-top:14px}.settings .row:first-child h3{margin-top:0}.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 14px;margin:6px 0}.pack{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;padding:2px 0}.pack input{width:auto;margin:0;accent-color:var(--ink)}.pack span:nth-child(2){flex:1}.pack.on span:nth-child(2){text-decoration:underline wavy var(--red);text-underline-offset:4px}.pack.dim{opacity:.45}.start-bar{text-align:center;max-width:380px;margin:0 auto;width:100%}.wall-layout{display:grid;gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"wall wall" "red blue"}.wall-layout>.wall{grid-area:wall}.wall-layout>.side.red{grid-area:red}.wall-layout>.side.blue{grid-area:blue}@media (min-width: 1100px){.wall-layout{grid-template-columns:210px minmax(0,1fr) 210px;grid-template-areas:"red wall blue";align-items:start}}.side{display:grid;gap:22px;align-content:start}.team-note{padding:14px 16px;font-size:15px;transition:box-shadow .2s}.team-note.active{box-shadow:var(--shadow),0 0 0 3px var(--paper),0 0 0 6px currentColor}.team-note.red.active{color:var(--red)}.team-note.blue.active{color:var(--blue)}.team-note.active .names,.team-note.active .link-btn{color:var(--ink)}.stickies{display:flex;flex-wrap:wrap;gap:18px}@media (min-width: 1100px){.stickies{flex-direction:column}}.stickies .sticky{min-width:150px}.sticky-guesses{font-size:18px;font-weight:600;display:flex;flex-wrap:wrap;gap:0 8px;margin-top:2px}.you-are{text-align:center;font:600 22px var(--hand);color:var(--paper);text-shadow:0 1px 2px rgb(0 0 0 / .5);margin-top:18px}.wall{position:relative;display:grid;gap:26px}.string{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}.string path{stroke:var(--string);stroke-width:2.5;fill:none;filter:drop-shadow(1px 2px 1px rgb(0 0 0 / .4))}.clue-note{position:relative;justify-self:center;width:min(420px,100%);padding:16px 22px 14px;background:var(--paper) repeating-linear-gradient(var(--paper) 0 27px,#9cc3e6 27px 28px);box-shadow:var(--shadow);transform:rotate(var(--tilt, 0deg));z-index:2}.clue-note small{display:block;font:600 21px/1.2 var(--hand);color:#555}.clue-note b{display:block;font:700 48px/1 var(--hand);margin:4px 0;overflow-wrap:anywhere}.clue-note b.red{color:var(--red)}.clue-note b.blue{color:var(--blue)}.clue-note b.thinking{font-size:36px}.clue-note .urgent{color:var(--red);font-weight:700}.clue-input{display:flex;gap:8px;align-items:flex-end;margin:6px 0;flex-wrap:wrap}.clue-input input{flex:1 1 140px;font:700 40px/1 var(--hand);padding:0 2px}.clue-input input.red{color:var(--red)}.clue-input input.blue{color:var(--blue)}.clue-input select{font-size:18px}.note-actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:10px}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 16px;padding-top:6px}@media (max-width: 640px){.board{gap:12px 6px}}.card{position:relative;min-width:0;aspect-ratio:150 / 104;border:none;padding:0 3px 8%;background:var(--index);box-shadow:var(--shadow);display:flex;align-items:flex-end;justify-content:center;font-family:var(--type);font-size:clamp(9px,1.75vw,20px);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);transform:translate(var(--dx),var(--dy)) rotate(var(--rot));transition:transform .15s,box-shadow .15s}.card .word{position:relative;z-index:1;max-width:100%;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;line-height:1.05;text-align:center}.card:before{content:"";position:absolute;left:7%;right:7%;top:10%;height:50%;background:repeating-linear-gradient(0deg,var(--rule) 0 1px,transparent 1px 12px)}.card .band{position:absolute;left:7%;right:7%;top:10%;height:50%;display:flex;align-items:center;justify-content:center;font:700 clamp(12px,2vw,24px) var(--hand);text-transform:none;letter-spacing:0;color:#fff;z-index:1}.card.rev:before{background:var(--c);opacity:.88}.card.k-red{--c: var(--red)}.card.k-blue{--c: var(--blue)}.card.k-neutral{--c: var(--neutral)}.card.k-assassin{--c: var(--assassin)}.card.rev.k-neutral .band{color:#fffdf5}.card.spy.k-red:before{background:repeating-linear-gradient(45deg,#c4342d66 0 6px,transparent 6px 12px)}.card.spy.k-blue:before{background:repeating-linear-gradient(45deg,#2c5cb866 0 6px,transparent 6px 12px)}.card.spy.k-assassin:before{background:var(--assassin)}.card.spy.k-assassin .band:after{content:"assassin";color:#fff}.card.rev .word{opacity:.8}.card:disabled{cursor:default}.card.clickable{cursor:pointer}@media (hover: hover){.card.clickable:hover{transform:translate(var(--dx),calc(var(--dy) - 4px)) rotate(0);box-shadow:4px 10px 16px #00000059}}.card.armed{transform:translate(var(--dx),calc(var(--dy) - 4px)) rotate(0) scale(1.05);box-shadow:4px 10px 16px #00000059,0 0 0 3px var(--focus);z-index:3}.card.armed .band{color:var(--ink);font-size:clamp(11px,1.8vw,22px)}@media (max-width: 640px){.card{letter-spacing:0;padding-bottom:6%;font-size:clamp(8px,2.5vw,14px)}.card .pin{width:11px;height:11px;margin-left:-5px;top:-4px}.card .band{font-size:clamp(10px,3vw,16px)}}@media (max-width: 640px){.wall-layout{gap:20px 14px}.side{gap:16px}.team-note{padding:12px 10px;font-size:13px}.team-note h3{font-size:24px}.stickies .sticky{min-width:0;width:100%;font-size:22px}.sticky-guesses{font-size:16px}}.shuffle-bar{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}.shuffle-bar .hand{font-size:20px}