:root{--space:#05070d;--paper:#f4f1e8;--ink:#111318;--regolith:#8c9096;--gold:#e2a93b;--signal:#ff6a2b;--capcom:#3d7be0;--hand:"Patrick Hand", "Comic Sans MS", cursive;--block:"Silkscreen", monospace;--shadow:4px 4px 0 var(--ink)}*{box-sizing:border-box}html,body,#root{background:var(--space);height:100%;color:var(--ink);font-family:var(--hand);margin:0;overflow:hidden}canvas{touch-action:none;display:block}.ui{pointer-events:none;position:fixed;inset:0}.ui>*{pointer-events:auto}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:3px solid var(--signal);outline-offset:3px}.btn{font-family:var(--block);background:var(--gold);border:2px solid var(--ink);box-shadow:var(--shadow);padding:.7rem 1.6rem;font-size:1.1rem;transition:transform .12s,box-shadow .12s}.btn:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.btn:active{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.paper{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow)}.title{pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;display:flex;position:absolute;inset:0}.title>*{pointer-events:auto}.title h1{font-family:var(--block);color:var(--paper);text-shadow:5px 5px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink);pointer-events:none;margin:0;font-size:clamp(2.4rem,7vw,5.5rem);line-height:.95;animation:.9s cubic-bezier(.2,1.4,.4,1) both drop-in}.callsign{color:var(--paper);align-items:center;gap:.6rem;font-size:1.2rem;display:flex}.callsign input{font:inherit;background:var(--paper);border:2px solid var(--ink);width:10rem;box-shadow:var(--shadow);padding:.3rem .6rem;font-size:1.2rem}.title-buttons{gap:1rem;display:flex}.hint{color:var(--paper);pointer-events:none;text-shadow:2px 2px 0 var(--ink), -1px -1px 0 var(--ink);margin:0;font-size:1.05rem}.hint.small{opacity:.8;font-size:.9rem}.tile{background:var(--paper);border:2px solid var(--ink);width:56px;height:56px;box-shadow:var(--shadow);font-size:1.6rem;position:absolute;right:24px}.tile.top{top:24px}.tile.bottom{bottom:24px}.tile.music{bottom:96px}.dot{background:var(--signal);border:2px solid var(--ink);border-radius:50%;width:14px;height:14px;position:absolute;top:-6px;right:-6px}.online{color:var(--paper);pointer-events:none;text-shadow:1px 1px 0 var(--ink);font-size:1.1rem;position:absolute;top:24px;left:24px}.online small{opacity:.7;font-size:.85rem;display:block}.card{padding:1.1rem 1.4rem;font-size:1.15rem;position:absolute}.log{width:min(360px,100vw - 120px);animation:.18s ease-out pop;top:24px;right:96px;transform:rotate(-1deg)}.log h3,.log h4{font-family:var(--block);margin:0 0 .6rem;font-size:1rem}.log h4{margin-top:1rem}.log ol{margin:0;padding-left:1.3rem}.log li.locked{opacity:.45}.log li.done,.log ul li.done{opacity:.6;text-decoration:line-through}.log ul{padding-left:1rem;font-size:1rem;list-style:"– "}.log .logged{padding:0;list-style:none}.log .logged button{text-align:left;background:0 0;border:none;padding:.1rem 0;text-decoration:underline}.emotes{grid-template-columns:repeat(5,44px);gap:6px;padding:.7rem;animation:.18s ease-out pop;display:grid;bottom:24px;right:96px}.emotes button{background:0 0;border:none;border-radius:6px;font-size:1.6rem}.emotes button:hover{background:#0001}.tile.suit{bottom:168px}.tile.suit i,.suits button{border:2px solid var(--ink);border-radius:50%;width:28px;height:28px;margin:auto;display:block}.suits{gap:8px;padding:.7rem;animation:.18s ease-out pop;display:flex;bottom:168px;right:96px}.suits button{width:36px;height:36px}.suits button.on{outline:3px solid var(--ink);outline-offset:2px}.dialogue{background:var(--paper);border:2px solid var(--ink);width:min(720px,100vw - 32px);box-shadow:var(--shadow);padding:1.6rem 4rem 1.4rem 1.8rem;animation:.22s ease-out rise;position:absolute;bottom:7vh;left:50%;transform:translate(-50%)perspective(900px)rotateX(6deg)rotate(-.6deg)}.dialogue p{text-transform:uppercase;letter-spacing:.02em;min-height:3.6rem;margin:0;font-size:1.35rem}.dialogue-tab{background:var(--capcom);color:var(--paper);font-family:var(--block);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.25rem 1rem;position:absolute;top:-1.4rem;left:1rem}.dialogue-next{width:46px;height:46px;color:var(--capcom);background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:1.3rem;position:absolute;bottom:-14px;right:-14px}.backdrop{background:#05070d88;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.artefact{width:min(560px,100%);max-height:calc(100vh - 32px);animation:.2s ease-out pop;position:relative;overflow:auto;transform:rotate(.8deg)}.artefact h2{font-family:var(--block);margin:.2rem 7.5rem .4rem 0;font-size:1.4rem;line-height:1.15}.eyebrow{text-transform:uppercase;color:#55585e;margin:0;font-size:.95rem}.location{margin:0 0 .8rem}.summary{font-size:1.25rem}.fun{color:var(--capcom)}.artefact footer{flex-wrap:wrap;gap:.3rem .8rem;font-size:.95rem;display:flex}.artefact a{color:var(--ink)}.draft{background:var(--gold);border:1px solid var(--ink);padding:0 .4rem}.close{margin-top:1rem;padding:.4rem 1rem;font-size:.9rem}.stamp{font-family:var(--block);color:var(--signal);border:3px solid var(--signal);padding:.1rem .6rem;animation:.35s cubic-bezier(.2,1.6,.4,1) .15s both stamp;position:absolute;top:1rem;right:1rem;transform:rotate(12deg)}.pause{flex-direction:column;gap:.6rem;width:min(420px,100%);max-height:calc(100vh - 32px);animation:.2s ease-out pop;display:flex;position:relative;overflow:auto;transform:rotate(-.6deg)}.pause h2,.pause h3,.end h3{font-family:var(--block);margin:.4rem 0 0;font-size:1rem}.pause h2{margin:0;font-size:1.4rem}.slider{grid-template-columns:5rem 1fr;align-items:center;display:grid}.slider input{accent-color:var(--signal)}.controls{margin:0;font-size:1rem}.controls div{border-bottom:1px dashed var(--regolith);justify-content:space-between;display:flex}.controls dt{font-family:var(--block);font-size:.8rem}.controls dd{margin:0}.end ul{margin:.3rem 0 .6rem;padding-left:1.2rem;font-size:1rem}.prompt span,.nametag{font-family:var(--block);white-space:nowrap}.prompt span{background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.2rem .6rem;font-size:.85rem}.nametag{color:var(--paper);text-shadow:1px 1px 0 var(--ink);pointer-events:none;font-size:.75rem}.emote-bubble span{background:var(--paper);border:2px solid var(--ink);border-radius:50%;place-items:center;width:3rem;height:3rem;font-size:1.8rem;animation:3s ease-out forwards bubble;display:grid}@keyframes drop-in{0%{opacity:0;transform:translateY(-40px)scale(1.15)}}@keyframes pop{0%{opacity:0;transform:scale(.94)}}@keyframes rise{0%{opacity:0;transform:translate(-50%)translateY(30px)}}@keyframes stamp{0%{opacity:0;transform:rotate(12deg)scale(2.4)}}@keyframes bubble{0%{transform:scale(0)}10%{transform:scale(1)}85%{opacity:1}to{opacity:0;transform:translateY(-12px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}