:root{--night: #0B0920;--panel: rgba(20, 16, 46, .88);--lead: #1A1430;--gold: #D4AF5A;--ink: #FFF4D6;--soft: #CFC3EE;--grey: #9A8FC0;--dawn: #FFD27A;--indigo: #2B2A6B;--rose: #FF8FC0;--title: Fraunces, Georgia, "Times New Roman", serif;--ui: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;--mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--night);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{background:radial-gradient(120% 80% at 50% 30%,#1b1640,#0b0920 65%) fixed;font-family:var(--ui);color:var(--ink)}#stage{position:absolute;overflow:hidden;box-shadow:0 0 80px #ffd27a14}#game{position:absolute;left:0;top:0;display:block}#ui{position:absolute;left:0;top:0;transform-origin:0 0}#ui.pass{pointer-events:none}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(var(--inset-t, 0px) + 24px) 28px calc(var(--inset-b, 0px) + 24px);text-align:center}.screen.pause,.screen.results{background:#0b0920a3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.screen.title{justify-content:flex-end;padding-bottom:calc(var(--inset-b, 0px) + 120px);background:linear-gradient(180deg,#0b092000 40%,#0b0920a6)}.talkbox,.stats div,#toast .card{background:var(--panel);border:2px solid var(--lead);box-shadow:inset 0 0 0 1px #d4af5ab3,0 8px 30px #00000073}.talkbox,.stats div{overflow:hidden}.talkbox:after,.stats div:after{content:"";position:absolute;top:-40%;right:-60%;bottom:-40%;left:-60%;pointer-events:none;background:linear-gradient(115deg,transparent 44%,rgba(255,244,214,.1) 50%,transparent 56%);transform:translate(-70%);animation:sheen 6s ease-in-out infinite}.stats div{position:relative}@keyframes sheen{0%,78%{transform:translate(-70%)}to{transform:translate(70%)}}.logo{position:absolute;top:calc(var(--inset-t, 0px) + 22%);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px}.logo .mark{width:min(86vw,390px);filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(255,210,122,.16));cursor:pointer;-webkit-tap-highlight-color:transparent}.logo .mark svg{display:block;width:100%;height:auto;overflow:visible}.mark .sh{transform-box:fill-box;transform-origin:center;animation:shard .8s cubic-bezier(.16,.84,.3,1) both;animation-delay:calc(var(--i) * 14ms)}@keyframes shard{0%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6);opacity:0}55%{opacity:1}}.mark .ld,.mark .fin{animation:settle .35s ease-out 1.05s both}@keyframes settle{0%{opacity:0}}.mark .spk{transform-box:fill-box;transform-origin:center;animation:lit .5s cubic-bezier(.3,1.6,.5,1) 1.2s both}@keyframes lit{0%{transform:scale(0);opacity:0}}.mark .gl{animation:sweep 5s ease-in-out infinite;animation-delay:calc(1.6s + var(--i) * 70ms)}@keyframes sweep{0%{transform:skew(-18deg) translate(0)}30%,to{transform:skew(-18deg) translate(150px)}}.mark.ring svg{animation:ring .45s ease-out}@keyframes ring{20%{transform:translate(-2px,1px) rotate(-.6deg)}45%{transform:translate(2px,-1px) rotate(.5deg)}70%{transform:translate(-1px)}}.logo .tag{color:var(--soft);font:600 14px var(--ui);letter-spacing:.16em;text-transform:uppercase}.logo .tag.by{font-size:11px;opacity:.7;margin-top:4px}h2{margin:0 0 8px;font:800 36px var(--title);letter-spacing:.01em;color:var(--ink);text-shadow:0 2px 0 var(--lead),0 0 18px rgba(255,210,122,.35)}.btn{min-width:240px;min-height:48px;padding:10px 24px;border:1.5px solid var(--gold);border-radius:14px;background:var(--indigo);color:var(--ink);font:700 18px var(--ui);letter-spacing:.01em;cursor:pointer;box-shadow:inset 0 1px #fff4d638,0 0 0 2px var(--lead),0 4px 0 2px var(--lead);transition:transform .06s,box-shadow .06s}.btn.big{min-height:56px;min-width:260px;border:2px solid var(--lead);background:linear-gradient(180deg,#ffc861,#f08a2e);color:var(--lead);font-size:21px;font-weight:800;box-shadow:inset 0 2px #fffbea99,inset 0 -3px #a0461459,0 4px #8a4a16,0 0 30px #ffc86159}.btn.ghost{background:transparent;border-color:transparent;color:var(--soft);box-shadow:none}.btn:active{transform:translateY(3px);box-shadow:0 0 0 2px var(--lead),0 1px 0 2px var(--lead)}.btn.big:active{box-shadow:inset 0 2px #fffbea99,0 1px #8a4a16}.btn.ghost:active{box-shadow:none}.btn:focus-visible{outline:3px solid var(--dawn);outline-offset:4px}h2 small{display:block;font:700 .42em var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-top:4px;text-shadow:none}.title .mute{position:absolute;left:0;right:0;bottom:calc(var(--inset-b, 0px) + 40px);margin:0;font-size:15px;color:var(--soft);transition:opacity .8s}.title .mute.gone{opacity:0}.screen.about p{margin:0;max-width:470px;text-align:left;font-size:15px;line-height:1.5;color:var(--ink)}.screen.about p.warn{padding:14px 16px;border:1.5px solid var(--gold);border-radius:12px;background:#0b092099}.screen.about p b{color:var(--dawn)}.unlock{margin:6px 0 2px;max-width:300px;text-align:center;font-size:14px;line-height:1.4;color:var(--dawn)}.unlock.soon{font:700 italic 19px/1.3 var(--title);color:var(--ink);letter-spacing:.01em;text-shadow:0 0 18px rgba(255,210,122,.45)}.locked canvas.who{width:96px;height:96px;margin-bottom:4px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}.locked .lockinfo{margin:0 0 12px;max-width:320px;text-align:center;font-size:15px;line-height:1.45;color:var(--soft)}.st{display:inline-block;width:14px;height:14px;margin:0 1px;background:#cfc3ee33;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.st.on{background:var(--dawn)}.stars.big .st{width:64px;height:64px;margin:0 6px}.stars.big .st.on{background:linear-gradient(180deg,#FFFBEA,var(--dawn) 45%,#F08A2E)}.stars.big .st.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1);filter:drop-shadow(0 0 14px rgba(255,210,122,.8))}@keyframes pop{0%{transform:scale(.2) rotate(-30deg)}to{transform:scale(1) rotate(0)}}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:380px;margin:6px 0 10px}.stats div{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:14px}.stats span{color:var(--grey);font:700 11px var(--ui);text-transform:uppercase;letter-spacing:.12em}.stats b{font:500 22px var(--mono);color:var(--ink)}.stats em{font-style:normal;color:var(--dawn);font-size:12px}.stats em.wait{visibility:hidden}.stats em.pop{display:inline-block;animation:pop .45s cubic-bezier(.2,1.6,.4,1);text-shadow:0 0 10px rgba(255,210,122,.8)}@media (prefers-reduced-motion: reduce){.mark .sh,.mark .ld,.mark .fin,.mark .spk,.mark .gl,.mark.ring svg,.stars.big .st.pop,.stats em.pop,.talkbox:after,.stats div:after{animation:none}}.screen.talk{justify-content:flex-end;padding-bottom:calc(var(--inset-b, 0px) + 130px);background:linear-gradient(180deg,#0b092066 0% 40%,#0b0920d1)}.talkwrap{position:relative;width:100%;max-width:560px}.talkwrap .pt{position:absolute;bottom:calc(100% - 22px);width:150px;height:150px;transform-origin:50% 100%;transition:transform .2s ease,filter .2s ease;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}.talkwrap .pt.left{left:4px}.talkwrap .pt.right{right:4px}.talkwrap .pt.dim{transform:scale(.92);filter:brightness(.55) drop-shadow(0 6px 10px rgba(0,0,0,.5))}.talkbox{position:relative;min-height:132px;padding:30px 22px 22px;border-radius:14px;text-align:left;cursor:pointer}.talkwrap .who{position:absolute;top:-14px;left:164px;padding:5px 14px 4px;border-radius:999px;border:2px solid var(--lead);color:var(--lead);font:800 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 1px #ffffff8c,0 3px 0 var(--lead);z-index:1}.talkwrap.right .who{left:auto;right:164px}.talkbox .say{font:600 20px/1.38 var(--ui);color:var(--ink);min-height:2.7em}.talkbox .more{position:absolute;right:18px;bottom:10px;color:var(--gold);font:700 13px var(--ui);animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.skip{position:absolute;top:calc(var(--inset-t, 0px) + 92px);right:16px;min-width:0;min-height:44px;padding:6px 16px;font-size:16px}#toast{position:absolute;left:0;right:0;top:0;pointer-events:none;transform-origin:0 0}#toast .card{position:absolute;left:50%;top:calc(var(--inset-t, 0px) + 96px);transform:translate(-50%);max-width:520px;padding:12px 20px;border-radius:14px;color:var(--ink);font:700 17px var(--ui);text-align:center;width:max-content;animation:toast 4.2s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,-12px)}8%,85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-8px)}}#toast .card.bark{display:flex;align-items:center;gap:12px;text-align:left;max-width:400px;width:max-content;padding:10px 18px 10px 10px;font-weight:600;font-size:16px;line-height:1.3}#toast .card.bark canvas{width:52px;height:52px;flex:none}#toast .card.bark b{letter-spacing:.1em}#toast .card b{display:block;font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:var(--dawn);margin-bottom:2px}.btn small{display:block;font-size:.68em;font-weight:600;opacity:.75;margin-top:2px;letter-spacing:0;text-transform:none}.screen.map{display:block;padding:0}.map .scroll{position:absolute;top:0;right:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}.map .scroll::-webkit-scrollbar{display:none}.map .inner{position:relative;width:100%}.map .node{position:absolute;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.map .node:disabled{cursor:default}.map .node:active:not(:disabled){background:radial-gradient(circle,#fff4d647,#fff4d600 68%)}.map .node:focus-visible{outline:3px solid var(--dawn);outline-offset:2px}.mapbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--inset-t, 0px) + 12px) 14px 34px;background:linear-gradient(180deg,#0b0920f0,#0b0920b3 58%,#0b092000);pointer-events:none}.mapbar>*{pointer-events:auto}.mapbar .btn{min-width:0;padding:8px 18px 8px 8px}.mapbar .btn:before{content:"\2039";margin-right:8px;font-size:1.3em;line-height:0}.mapbar .tot{display:flex;align-items:center;gap:10px}.mapbar .tot span{display:flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;background:var(--panel);border:2px solid var(--lead);box-shadow:inset 0 0 0 1px #d4af5ab3}.mapbar .tot b{font:500 19px var(--mono);color:var(--ink)}.mapbar .tot small{font:500 14px var(--mono);color:var(--grey);margin-left:-4px}.mapbar .tot .st{width:18px;height:18px;margin:0}.mapbar .tot svg{width:16px;height:18px}.mapbar .tot em{font:800 12px var(--ui);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
