@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;700&display=swap');
:root{color-scheme:dark;--paper:#f1eee0;--accent:#e9a961;--panel:#191e18;--line:#f3ead43b;font-family:"DM Sans",system-ui,sans-serif;color:var(--paper)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body,#viewport{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#252e28;overscroll-behavior:none}
#viewport{position:fixed;inset:0;touch-action:none}
canvas{width:100%;height:100%;display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:#191e18d9;padding:.65rem .9rem;border-radius:.35rem}
button:disabled{opacity:.65;cursor:wait}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#menu{position:absolute;inset:0;overflow:auto;background:linear-gradient(90deg,#141914 4%,#151a16f2 22%,#151a1670 53%,#161b1620 95%);padding:clamp(24px,6vw,100px);display:flex;align-items:safe center}
.menu-inner{width:min(100%,390px)}
h1{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-size:clamp(4.3rem,9vw,8.3rem);line-height:.77;letter-spacing:-.035em;margin:.12em 0 .22em}
.location,.objective span,.score span{font-size:.7rem;letter-spacing:.18em;font-weight:700;color:var(--accent)}
.premise{font-size:clamp(.87rem,1.3vw,1.05rem);color:#e0d6c1;margin:0 0 1.35rem}
fieldset{border:0;margin:0 0 .9rem;padding:0}
legend,label,summary{font-size:.83rem;color:#dfd9c7;margin-bottom:.35rem}
.coats{display:flex;gap:.4rem;flex-wrap:wrap}
.coats button{padding:.4rem .6rem;font-size:.76rem}
.coats [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.primary{width:100%;background:var(--accent);color:#211b13;font-weight:700;border-color:transparent;text-align:left}
#room{margin-top:.9rem}
#room>div{display:flex;gap:.45rem;margin-top:.33rem}
input{flex:1;min-width:0;border:1px solid var(--line);border-radius:.35rem;background:#151a17b0;padding:.55rem .7rem;text-transform:uppercase}
#room-status,details p{font-size:.8rem;color:#e0d6c1}
details{margin-top:.7rem;max-width:24rem}
details p{line-height:1.65}
.hud{position:absolute;top:max(1rem,env(safe-area-inset-top));left:1rem;right:1rem;display:flex;gap:.6rem;pointer-events:none}
.hud button{pointer-events:auto}
.readout,.objective,#prompt,#notice,.keys{background:#171d17d9;border:1px solid var(--line);border-radius:.38rem;padding:.55rem .7rem;text-shadow:0 1px 2px #000}
.readout{display:grid;gap:.15rem}
.readout>span:not(.score span){font-size:.72rem;color:#d0c8b6}
.score{margin-left:auto;min-width:4.8rem}
.score strong{font-variant-numeric:tabular-nums}
.objective{position:absolute;left:1rem;top:5.2rem;display:grid;gap:.28rem;max-width:min(20rem,80vw);pointer-events:none}
.objective strong{font-size:.86rem;font-weight:500}
#notice,#prompt,#crosshair,.keys{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
#notice{bottom:24%;max-width:80%;width:max-content;font-size:.9rem;opacity:0;transition:opacity .18s}
#notice.visible{opacity:1}
#prompt{bottom:15%;width:max-content;max-width:86%;font-size:.8rem}
#crosshair{top:47%;font-size:2rem;color:#fff;opacity:.72}
.keys{bottom:1rem;width:max-content;max-width:94%;font-size:.71rem;color:#d7cdb9}
#touch{position:absolute;inset:0;pointer-events:none;touch-action:none}
#stick{position:absolute;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));width:112px;height:112px;border:1px solid #efe4cb75;border-radius:50%;background:#171d1766;pointer-events:auto;touch-action:none}
#stick i{position:absolute;width:45px;height:45px;left:calc(50% - 22.5px);top:calc(50% - 22.5px);border-radius:50%;background:#e6d9ba91;pointer-events:none}
.actions{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));right:max(.8rem,env(safe-area-inset-right));display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:.27rem}
.actions button{pointer-events:auto;touch-action:none;font-size:.72rem;padding:.48rem .55rem;min-height:36px}
@media (pointer:coarse){#prompt{bottom:34%}#notice{bottom:43%}.objective{top:4.65rem}.keys{display:none}}
@media (max-width:580px){#menu{background:linear-gradient(90deg,#141914ed,#14191490);padding:1.2rem}.hud{left:.65rem;right:.65rem}.objective{left:.65rem}}
.cat-preview .preview-menu{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(1rem,6vw,6rem);background:linear-gradient(90deg,#141914f7,#141914d0 23%,#151a1655 43%,transparent 66%);pointer-events:none}
.preview-panel{width:min(28rem,100%);pointer-events:auto}
.preview-panel h1{font-size:clamp(3.7rem,7.8vw,6.8rem)}
.preview-panel fieldset{margin-bottom:1rem}
.preview-panel .coats button{display:flex;align-items:center;gap:.4rem}
.coat-sample{width:.76rem;height:.76rem;border-radius:50%;border:1px solid #ffffff52;background:var(--swatch)}
.preview-status,.orbit-hint{color:#e0d6c1;font-size:.77rem}
.orbit-hint{position:absolute;bottom:1rem;right:1rem;padding:.42rem .63rem;border:1px solid var(--line);border-radius:.35rem;background:#191e18d9;pointer-events:none}
@media(max-width:720px){.cat-preview .preview-menu{align-items:end;padding:1rem 1rem max(1rem,env(safe-area-inset-bottom));background:linear-gradient(0deg,#141914,#141914da 25%,#14191412 52%,transparent)}.preview-panel h1{font-size:clamp(2.8rem,9vw,4.2rem)}.preview-panel .location{margin:0}.preview-panel fieldset{margin-bottom:.6rem}.orbit-hint{top:.7rem;bottom:auto}}
.preview-play,.preview-link{display:inline-block;color:var(--accent);font-size:.83rem}
.preview-play{background:var(--accent);color:#211b13;font-weight:700;text-decoration:none;padding:.58rem .76rem;border-radius:.35rem}
.life span{color:var(--accent)!important;letter-spacing:.12em;font-size:.69rem!important}
.actions [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.multiplayer{width:100%;margin-top:.45rem;font-weight:700;text-align:left}