@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;700&family=Fredoka:wght@400;500;600;700&family=Lilita+One&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}
body[data-controls=touch] #prompt{bottom:34%}body[data-controls=touch] #notice{bottom:43%}body[data-controls=touch] .objective{top:4.65rem}
@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}
.profile{display:grid;grid-template-columns:1.4fr 1fr;gap:.5rem;margin-bottom:.75rem}
.profile label{display:grid;gap:.28rem;margin:0}
.profile input,.profile select{width:100%;text-transform:none}
.profile select,textarea{font:inherit;color:inherit;border:1px solid var(--line);border-radius:.35rem;background:#151a17;padding:.55rem .7rem}
#nameplates{position:absolute;inset:0;pointer-events:none}
.cat-nameplate{position:absolute;transform:translate(-50%,-100%);background:#141b16df;border:1px solid #ffffff39;border-radius:.3rem;padding:.2rem .42rem;font-size:.72rem;white-space:nowrap}
#family,#pair-card{position:absolute;background:#171d17e9;border:1px solid var(--line);border-radius:.38rem;padding:.55rem .7rem;font-size:.82rem}
#family{right:1rem;top:5.05rem;pointer-events:none}
#pair-card{right:1rem;top:7.7rem;display:flex;flex-wrap:wrap;gap:.4rem;max-width:min(22rem,86vw)}
#pair-card strong{width:100%;font-weight:500}
#pair-card button{padding:.42rem .55rem}
#mutation-list{padding-left:1.1rem;font-size:.78rem}
#mutation-list li{margin:.35rem 0}
#feedback-dialog{background:#1c231c;color:var(--paper);border:1px solid var(--line);border-radius:.55rem;max-width:min(28rem,92vw);padding:1.25rem}
#feedback-dialog::backdrop{background:#101611a8}
#feedback-dialog h2{font-size:1.25rem;margin:0}
#feedback-dialog p{font-size:.85rem;color:#d6cdbb}
#feedback-dialog textarea{display:block;width:100%;resize:vertical;margin-top:.35rem}
#feedback-dialog form>div{display:flex;justify-content:end;gap:.45rem}
#feedback-send{background:var(--accent);color:#231c14;font-weight:700}
body[data-controls=touch] .actions{grid-template-columns:repeat(4,minmax(43px,1fr))}body[data-controls=touch] .actions button{padding:.38rem .4rem}body[data-controls=touch] #feedback-open{font-size:.71rem;padding:.3rem .5rem}
@media(max-width:580px){#feedback-open{display:none}#family{top:8.25rem;right:.65rem}#pair-card{top:10.45rem;right:.65rem}}
.feedback-menu{font-size:.77rem;padding:.28rem .45rem;margin-left:.4rem}
#menu{color-scheme:light;display:grid;grid-template-columns:minmax(20rem,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(2rem,6vw,7rem);background:#f7efdf;color:#30291f;padding:clamp(1.3rem,5vw,5.2rem) clamp(1.25rem,6vw,7rem);--line:#cbbb9f;--accent:#915132}
#menu .menu-inner{width:min(100%,35rem);justify-self:center}
#menu .location{margin:0 0 .65rem;color:#8c5136}
#menu h1{font-family:"Barlow Condensed","Arial Narrow",sans-serif;line-height:.94;font-size:clamp(3.1rem,7.3vw,7.6rem);letter-spacing:-.036em;margin:0 0 .54rem}
#menu .premise{color:#644a3a;margin-bottom:1.5rem;font-size:1rem}
#menu label,#menu legend,#menu summary{color:#574532;font-weight:600}
#menu button,#menu input,#menu select{color:#382b20;background:#fcf7ed;border-color:#cbb99e}
#menu input[type=checkbox]{accent-color:#a35d3d}
#menu .profile input,#menu .profile select{height:2.65rem}
#menu .profile{margin-bottom:1.2rem}
#menu .coats button{padding:.48rem .60rem}
#menu #coats button{display:flex;align-items:center;gap:.35rem}
#menu .coats [aria-pressed=true]{border-color:#965739;background:#edd8bf;color:#60351f}
#menu .primary{background:#a65332;color:#fff7e9;border-color:#a65332}
.menu-play{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:1.1rem}
.menu-play .multiplayer{margin-top:0}
#menu #room-status,#menu details p{color:#624b37}
#room-status:empty{display:none}
.menu-settings{margin-top:1rem}
.menu-settings[open] summary{margin-bottom:.6rem}
.menu-settings label{display:inline-flex;align-items:center;gap:.25rem}
.menu-links{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
#menu .feedback-menu{margin-left:0}
.menu-gallery{min-width:0;position:relative;margin:0;background:#4a3b30;border-radius:1rem;overflow:hidden;box-shadow:0 12px 34px #5a46363d;align-self:center}
.menu-gallery img{display:block;width:100%;height:min(68dvh,42rem);object-fit:cover}
.menu-gallery figcaption{position:absolute;inset:auto 0 0;display:flex;align-items:end;justify-content:space-between;gap:.8rem;padding:2.5rem 1.2rem .95rem;background:linear-gradient(transparent,#201912f2);color:#fff0d6}
.menu-gallery figcaption span{font-size:.65rem;letter-spacing:.12em;color:#e2c4a3}
.menu-gallery figcaption p{margin:.15rem 0 0;font-weight:700}
.gallery-buttons{display:flex;gap:.3rem}
#menu .gallery-buttons button{padding:0;width:2.55rem;height:2.55rem;background:#30241cbd;color:#fff0d6;border-color:#ffe6c57d;font-size:1.1rem}
@media(max-width:770px){#menu{grid-template-columns:1fr;gap:1.3rem;align-items:start}.menu-gallery{width:min(100%,35rem);justify-self:center}.menu-gallery img{height:clamp(12rem,42vw,23rem)}}
@media(max-width:380px){.menu-play{grid-template-columns:1fr}}
.night-option{display:inline-flex;align-items:center;gap:.25rem;margin-left:.45rem}
#waypoint{position:absolute;right:1rem;bottom:1rem;pointer-events:none;text-align:right}
#waypoint-direction{color:var(--accent);font-variant-numeric:tabular-nums;font-size:.88rem}
#map-dialog{background:#1a211b;color:var(--paper);border:1px solid var(--line);border-radius:.75rem;width:min(64rem,95vw);max-height:92dvh;padding:clamp(.7rem,2vw,1.35rem)}
#map-dialog::backdrop{background:#0e1510cb}
body:has(#map-dialog[open]) #menu{visibility:hidden}
.map-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.map-heading h2{margin:0;font-size:clamp(1.35rem,3vw,2.2rem);font-family:"Barlow Condensed","Arial Narrow",sans-serif}
.map-heading button{white-space:nowrap}
#inventory-dialog{width:min(28rem,94vw);border:1px solid var(--line);border-radius:.65rem;background:#1c231d;color:var(--paper);padding:1.2rem}
#inventory-dialog::backdrop{background:#101611c0}
#inventory-digestion{font-size:.85rem;color:#d7cdb9}
#inventory-items{display:grid;gap:.4rem}
#inventory-items button{text-align:left}
body:has(#inventory-dialog[open]) #menu{visibility:hidden}
.map-tabs{display:flex;gap:.35rem;margin-bottom:.65rem}
.map-tabs button{padding:.38rem .8rem}
.map-tabs [aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
#journal-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.65rem}
#journal-body article{display:grid;align-content:start;justify-items:start;gap:.4rem;padding:.82rem;border:1px solid var(--line);border-radius:.4rem;background:#252c24}
#journal-body article span{font-size:.72rem;color:var(--accent)}
#journal-body h3,#journal-body p{margin:0}
#journal-body h3{font-size:1.04rem}
#journal-body p{font-size:.85rem;color:#d5cdbb;line-height:1.4}
#journal-body button{padding:.33rem .66rem;font-size:.8rem}
.map-body{display:grid;grid-template-columns:minmax(0,1fr) 11.6rem;gap:.75rem;align-items:start}
#neighborhood-map{border:1px solid var(--line);border-radius:.38rem;height:auto;aspect-ratio:3/2}
#map-places{display:grid;gap:.27rem}
#map-places button{padding:.44rem .55rem;text-align:left;font-size:.79rem}
#map-places [aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#59402a}
.map-key{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.75rem;color:#d5cdbb;font-size:.74rem}
.map-key span{display:flex;align-items:center;gap:.34rem}
.map-key i{display:inline-block;width:.66rem;height:.66rem;border-radius:50%;background:#f6fbfa}
.map-key span:nth-child(2) i{background:#f5ae60}
.map-key span:nth-child(3) i{background:#d6c88d}
body[data-controls=touch] #waypoint{bottom:auto;top:7.35rem}
@media(max-width:690px){.map-body{grid-template-columns:1fr}#map-places{grid-template-columns:repeat(2,minmax(0,1fr))}#map-places button{min-height:2.3rem}.hud{gap:.3rem}.hud button{padding:.48rem}}

.zoom-readout{min-width:92px}
.zoom-readout span{display:flex;align-items:center;justify-content:space-between;gap:.42rem}
.zoom-readout b{color:#ddd1b6;font-size:.68rem;letter-spacing:0}
.zoom-readout[data-ready="true"] b{color:#d8ed9a}
.zoom-readout progress{display:block;width:100%;height:.42rem;margin-top:.36rem;accent-color:#c6dc77}

.menu-gallery #menu-shot{filter:brightness(.48) saturate(.73) blur(2px);transform:scale(1.025)}
.menu-gallery #menu-cat{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.menu-gallery figcaption{z-index:2}
@media(max-width:770px){#menu .menu-gallery{grid-row:1}.menu-gallery img{height:clamp(13rem,48vw,23rem)}}

#pose-wheel{position:absolute;z-index:9;inset:0;background:#171b167d;display:grid;place-items:center;touch-action:none}
.pose-wheel-center{display:grid;gap:.35rem;text-align:center;padding:.9rem;border-radius:1rem;background:#292e23;color:#fff3df;font-weight:700}
#pose-wheel button{color:#fff3df;background:#292e23;border-color:#81765a}
#pose-wheel .pose-choice{position:absolute;left:calc(50% + var(--pose-x)*min(34vw,29vh,14rem));top:calc(50% + var(--pose-z)*min(34vw,29vh,14rem));transform:translate(-50%,-50%);width:clamp(4.2rem,15vw,6.3rem);min-height:2.4rem;padding:.25rem;font-size:clamp(.63rem,2.1vw,.82rem)}
#pose-wheel button:is(:focus-visible,:hover,[aria-pressed=true]){color:#292e23;background:#f1d7a5;outline-offset:2px}

#menu .control-choice{display:flex;gap:.6rem;margin:.45rem 0 .7rem}#menu #control-mode{padding:.32rem .44rem}

/* ===== UI overhaul: cinematic dark theme, glass panels, polished controls ===== */
:root{--ink:#0b0f0c;--glass:#111712c7;--glass-strong:#141b15ea;--edge:#ffecc92e;--edge-hot:#f4bd7a99;--accent:#f2b673;--accent-2:#e2784a;--glow:0 0 0 1px #f2b67326,0 10px 34px #00000070;--ease:cubic-bezier(.2,.8,.2,1)}
body{background:var(--ink)}
button{border-radius:.6rem;transition:transform .16s var(--ease),background .16s,border-color .16s,box-shadow .16s,color .16s}
button:not(:disabled):hover{transform:translateY(-1px);border-color:var(--edge-hot)}
button:not(:disabled):active{transform:translateY(0) scale(.98)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Main menu */
#menu{color-scheme:dark;color:#f6ecd8;--line:var(--edge);--accent:#f2b673;
  background:radial-gradient(70rem 40rem at 78% 40%,#3a2a1c70,transparent 60%),radial-gradient(50rem 30rem at 5% 100%,#2b3a2c66,transparent 60%),linear-gradient(160deg,#0b0f0c,#141a14 55%,#0d120e);
  gap:clamp(1.5rem,4vw,4.5rem)}
#menu::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px);opacity:.5}
#menu .menu-inner{position:relative;padding:clamp(1.2rem,2.4vw,2.2rem);background:var(--glass);border:1px solid var(--edge);border-radius:1.25rem;backdrop-filter:blur(16px) saturate(1.2);box-shadow:var(--glow);animation:menuIn .7s var(--ease) both}
@keyframes menuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#menu .location{color:var(--accent);letter-spacing:.32em;font-size:.68rem;display:flex;align-items:center;gap:.7rem}
#menu .location::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--edge-hot),transparent)}
#menu h1{text-transform:uppercase;font-size:clamp(3rem,6.4vw,6.4rem);line-height:.88;letter-spacing:-.01em;background:linear-gradient(180deg,#fff6e3 20%,#f2b673 95%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px #f2b67338)}
#menu .premise{color:#d4c6ab;font-style:italic}
#menu label,#menu legend,#menu summary{color:#d9c9a8;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
#menu button,#menu input,#menu select{color:#f6ecd8;background:#ffffff0d;border:1px solid var(--edge)}
#menu input,#menu select{border-radius:.6rem}
#menu input:focus,#menu select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #f2b67333}
#menu select option{background:#151b16;color:#f6ecd8}
#menu .profile input,#menu .profile select{height:2.8rem;font-size:.95rem}
#menu .coats{gap:.45rem}
#menu .coats button{border-radius:999px;padding:.5rem .85rem;font-size:.8rem}
#menu .coats button:hover{background:#ffffff1a}
#menu .coats [aria-pressed=true]{background:linear-gradient(180deg,#f2b67344,#f2b67322);border-color:var(--accent);color:#ffe7c4;box-shadow:0 0 18px #f2b67338}
#menu .coat-sample{width:.9rem;height:.9rem}
.menu-play{margin-top:1.4rem;gap:.65rem}
#menu .primary,#menu .multiplayer{min-height:3.3rem;border-radius:.8rem;font-size:1rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center}
#menu .primary{background:linear-gradient(180deg,#f7c58a,#e2784a);color:#2a1408;border-color:#ffd9ab;box-shadow:0 8px 26px #e2784a55,inset 0 1px 0 #fff6;position:relative;overflow:hidden}
#menu .primary:not(:disabled):hover{box-shadow:0 12px 34px #e2784a88,inset 0 1px 0 #fff8;filter:brightness(1.06)}
#menu .primary:not(:disabled)::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff55 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
#menu .primary:disabled{background:#ffffff12;color:#bfb298;box-shadow:none;border-color:var(--edge)}
#menu .multiplayer{background:#ffffff10}
#menu .multiplayer:not(:disabled):hover{background:#ffffff1c}
#menu details{max-width:none;border-top:1px solid var(--edge);padding-top:.8rem}
#menu summary{cursor:pointer;list-style:none}
#menu summary::before{content:"▸";display:inline-block;margin-right:.5rem;color:var(--accent);transition:transform .2s}
#menu details[open]>summary::before{transform:rotate(90deg)}
#menu .menu-settings label{margin-right:.6rem;text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500}
#menu #help{color:#bdb096;font-size:.76rem}
#menu a.preview-link{color:var(--accent);text-decoration:none;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-bottom:1px solid #f2b67355}
#menu a.preview-link:hover{border-color:var(--accent)}
#menu .feedback-menu{border-radius:.5rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.menu-gallery{background:#0b0f0c;border:1px solid var(--edge);border-radius:1.4rem;box-shadow:0 24px 70px #000000a0,0 0 80px #e2784a1f;animation:menuIn .9s .1s var(--ease) both}
.menu-gallery::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 90px #000000a8;z-index:1}
.menu-gallery figcaption{z-index:3;background:linear-gradient(transparent,#070a08f2)}
.menu-gallery figcaption span{color:var(--accent);letter-spacing:.22em}
.menu-gallery figcaption p{font-family:"Barlow Condensed",sans-serif;font-size:1.35rem;letter-spacing:.03em;text-transform:uppercase}
#menu .gallery-buttons button{border-radius:50%;background:#0b0f0ccc;border-color:var(--edge-hot);backdrop-filter:blur(6px)}
#menu .gallery-buttons button:hover{background:var(--accent);color:#2a1408}

/* HUD */
.readout,.objective,#prompt,#notice,.keys,#family,#pair-card{background:var(--glass);backdrop-filter:blur(10px) saturate(1.2);border:1px solid var(--edge);border-radius:.75rem;box-shadow:0 6px 22px #00000055}
.readout{position:relative;padding:.5rem .8rem}
.readout:not(#waypoint)::before{content:"";position:absolute;left:.8rem;right:.8rem;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--accent),transparent)}
.score strong,.life strong{font-family:"Barlow Condensed",sans-serif;font-size:1.5rem;line-height:1;letter-spacing:.04em;color:#fff4de}
.readout>strong:first-child{font-family:"Barlow Condensed",sans-serif;letter-spacing:.14em;font-size:1rem}
.hud button{background:var(--glass);backdrop-filter:blur(10px);border-radius:.75rem;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:.55rem .9rem}
.hud button:hover{background:#f2b67326}
.zoom-readout progress{appearance:none;-webkit-appearance:none;height:.36rem;border:0;border-radius:99px;overflow:hidden;background:#ffffff1f}
.zoom-readout progress::-webkit-progress-bar{background:#ffffff1f}
.zoom-readout progress::-webkit-progress-value{background:linear-gradient(90deg,#9fc457,#e5f59f);border-radius:99px;transition:width .15s}
.zoom-readout progress::-moz-progress-bar{background:linear-gradient(90deg,#9fc457,#e5f59f);border-radius:99px}
.objective{border-left:3px solid var(--accent);padding-left:.9rem}
.objective span{letter-spacing:.28em}
.objective strong{font-size:.9rem;line-height:1.35}
#notice{font-size:.95rem;padding:.65rem 1.1rem;border-radius:999px;border-color:var(--edge-hot)}
#prompt{border-radius:999px;padding:.45rem 1rem;border-color:var(--edge-hot);font-size:.85rem;font-weight:600;letter-spacing:.02em}
.keys{font-size:.68rem;opacity:.62;transition:opacity .3s;border-radius:.6rem}
.cat-nameplate{background:#0e140fcc;border-radius:999px;border-color:var(--edge);padding:.18rem .6rem;font-weight:700;letter-spacing:.04em;backdrop-filter:blur(6px)}

/* Dialogs */
#map-dialog,#inventory-dialog,#feedback-dialog{background:var(--glass-strong);backdrop-filter:blur(20px);border:1px solid var(--edge);border-radius:1.1rem;box-shadow:0 30px 90px #000000b8,0 0 0 1px #f2b67314;animation:menuIn .35s var(--ease) both}
#map-dialog::backdrop,#inventory-dialog::backdrop,#feedback-dialog::backdrop{background:#050805bf;backdrop-filter:blur(4px)}
.map-heading h2,#feedback-dialog h2{text-transform:uppercase;letter-spacing:.08em;color:#fff2d9}
.map-tabs button{border-radius:999px;text-transform:uppercase;font-size:.72rem;letter-spacing:.12em;font-weight:700}
.map-tabs [aria-pressed=true]{background:#f2b67328}
#neighborhood-map{border-radius:.8rem;box-shadow:inset 0 0 40px #0008}
#map-places button,#inventory-items button{border-radius:.6rem;background:#ffffff0b}
#map-places button:hover,#inventory-items button:not(:disabled):hover{background:#f2b67322}
#journal-body article{border-radius:.8rem;background:#ffffff0a;transition:border-color .2s,transform .2s}
#journal-body article:hover{border-color:var(--edge-hot);transform:translateY(-2px)}
#feedback-send{background:linear-gradient(180deg,#f7c58a,#e2784a);border-color:#ffd9ab;border-radius:.6rem}
#feedback-dialog textarea,.profile select,textarea{background:#ffffff0d;border-radius:.6rem}

/* Pose wheel and touch controls */
#pose-wheel{background:radial-gradient(circle,#0b0f0c66,#0b0f0ccc);backdrop-filter:blur(6px)}
.pose-wheel-center{border-radius:50%;width:8rem;height:8rem;align-content:center;background:var(--glass-strong);border:1px solid var(--edge-hot);box-shadow:var(--glow);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
#pose-wheel .pose-choice{border-radius:999px;background:var(--glass-strong);border-color:var(--edge);backdrop-filter:blur(10px);font-weight:700}
#pose-wheel button:is(:focus-visible,:hover,[aria-pressed=true]){background:linear-gradient(180deg,#f7c58a,#e2784a);color:#2a1408;border-color:#ffd9ab;box-shadow:0 0 22px #e2784a66}
#stick{background:radial-gradient(circle,#ffffff10,#0b0f0c80);border-color:var(--edge-hot);backdrop-filter:blur(6px)}
#stick i{background:radial-gradient(circle at 35% 30%,#ffe7c4,#e2a465);box-shadow:0 4px 14px #0008}
.actions button{border-radius:.9rem;background:var(--glass);backdrop-filter:blur(8px);font-weight:700;letter-spacing:.04em}
.actions button:active{background:#f2b67344}
#waypoint-direction{font-family:"Barlow Condensed",sans-serif;font-size:1.15rem}
::selection{background:#f2b67355}
*{scrollbar-width:thin;scrollbar-color:#f2b67355 transparent}
@media(max-width:770px){#menu{align-content:start;align-items:start;grid-auto-rows:min-content;padding:1rem}#menu h1{font-size:clamp(2.6rem,13vw,4rem)}.menu-gallery img{height:clamp(11rem,44vw,18rem)}}
@media(min-width:771px){#menu{align-content:safe center}#menu h1{font-size:clamp(2.8rem,min(6.4vw,10.5vh),6.4rem)}}

/* ===== Playful pass: bright cartoon "goat-sim" style ===== */
:root{--ink:#2a1840;--cream:#fff6dc;--sun:#ffd23f;--lime:#7ddc3a;--sky:#57c7ff;--pink:#ff6fa8;--orange:#ff8a2a;--edge:#2a1840;--edge-hot:#2a1840;--accent:#ff8a2a;--glass:#fff6dc;--glass-strong:#fff6dc;--pop:cubic-bezier(.34,1.56,.64,1);--fun:"Lilita One","Fredoka","Barlow Condensed",system-ui,sans-serif;--body:"Fredoka","DM Sans",system-ui,sans-serif}
:root{font-family:var(--body)}
button:not(:disabled):hover{transform:translateY(-2px) rotate(-1deg)}
button{transition:transform .18s var(--pop),background .15s,box-shadow .15s}

/* Menu */
#menu{color-scheme:light;color:var(--ink);font-family:var(--body);--line:var(--ink);--accent:var(--orange);
  background:
   radial-gradient(circle at 78% 30%,#fff9c4 0 7rem,#fff9c400 7.1rem),
   repeating-conic-gradient(from 0deg at 78% 30%,#ffffff2e 0 7deg,#ffffff00 7deg 14deg),
   linear-gradient(180deg,#3db8ff 0%,#8fdcff 55%,#c9f3ff 70%);
  overflow:auto}
#menu::before{content:"";position:fixed;left:-5%;right:-5%;bottom:-8vh;height:26vh;background:radial-gradient(120% 100% at 30% 100%,#59c534 0 55%,transparent 55.5%),radial-gradient(110% 100% at 85% 100%,#44ad2a 0 50%,transparent 50.5%);opacity:1;pointer-events:none;z-index:0;background-repeat:no-repeat}
#menu>*{position:relative;z-index:1}
#menu .menu-inner{background:var(--cream);border:4px solid var(--ink);border-radius:1.6rem;backdrop-filter:none;box-shadow:8px 8px 0 var(--ink);transform:rotate(-.8deg);animation:popIn .6s var(--pop) both;padding:clamp(1.1rem,2.2vw,2rem)}
@keyframes popIn{from{opacity:0;transform:scale(.88) rotate(-4deg)}to{opacity:1;transform:rotate(-.8deg)}}
#menu .location{color:#fff;background:var(--pink);border:3px solid var(--ink);border-radius:999px;display:inline-flex;padding:.2rem .8rem;letter-spacing:.12em;font-family:var(--fun);font-size:.8rem;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
#menu .location::after{display:none}
#menu h1{font-family:var(--fun);text-transform:uppercase;font-weight:400;color:var(--sun);background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--ink);filter:none;letter-spacing:.01em;line-height:.92;margin:.7rem 0 .6rem;transform:rotate(-3deg);transform-origin:left;animation:wobble 3.2s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-1deg) scale(1.02)}}
#menu .premise{color:var(--ink);font-style:normal;font-weight:600;font-size:1.02rem}
#menu label,#menu legend,#menu summary{color:var(--ink);font-family:var(--fun);font-weight:400;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
#menu button,#menu input,#menu select{color:var(--ink);background:#fff;border:3px solid var(--ink);font-family:var(--body);font-weight:600}
#menu input,#menu select{border-radius:.8rem}
#menu input:focus,#menu select:focus{border-color:var(--orange);box-shadow:0 0 0 4px #ff8a2a55}
#menu select option{background:#fff;color:var(--ink)}
#menu .coats button{border-radius:999px;box-shadow:2px 3px 0 var(--ink);padding:.4rem .8rem}
#menu .coats button:hover{background:#fff1b8}
#menu .coats [aria-pressed=true]{background:var(--sun);color:var(--ink);border-color:var(--ink);box-shadow:3px 4px 0 var(--ink);transform:translateY(-2px) rotate(-1.5deg)}
#menu .coat-sample{border:2px solid var(--ink);width:1rem;height:1rem}
#menu .primary,#menu .multiplayer{font-family:var(--fun);font-weight:400;font-size:1.25rem;letter-spacing:.05em;border:4px solid var(--ink);border-radius:1.1rem;min-height:3.6rem;box-shadow:0 6px 0 var(--ink);transition:transform .12s var(--pop),box-shadow .12s}
#menu .primary{background:linear-gradient(180deg,#a6f05a,var(--lime));color:var(--ink)}
#menu .primary:not(:disabled):hover{filter:none;transform:translateY(-3px) rotate(-1.5deg) scale(1.03);box-shadow:0 9px 0 var(--ink)}
#menu .primary:not(:disabled):active,#menu .multiplayer:not(:disabled):active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
#menu .primary:not(:disabled)::after{background:linear-gradient(105deg,transparent 35%,#ffffff99 50%,transparent 65%)}
#menu .primary:disabled{background:#d9d2bf;color:#6d6458;box-shadow:0 4px 0 var(--ink)}
#menu .multiplayer{background:linear-gradient(180deg,#ff9ec7,var(--pink));color:#fff;text-shadow:2px 2px 0 var(--ink)}
#menu .multiplayer:not(:disabled):hover{background:linear-gradient(180deg,#ffb0d2,var(--pink));transform:translateY(-3px) rotate(1.5deg) scale(1.03);box-shadow:0 9px 0 var(--ink)}
#menu details{border-top:3px dashed #2a184055}
#menu summary::before{color:var(--orange)}
#menu .menu-settings label{font-family:var(--body);font-weight:600;font-size:.9rem;text-transform:none;letter-spacing:0}
#menu #help,#menu #room-status,#menu details p{color:#5a4670}
#menu a.preview-link{color:#c2410c;border-bottom:3px solid #c2410c55;font-family:var(--fun);font-weight:400;letter-spacing:.05em}
#menu .feedback-menu{box-shadow:2px 3px 0 var(--ink);font-family:var(--fun);font-weight:400}
.menu-gallery{background:#fff;border:5px solid var(--ink);border-radius:1.6rem;box-shadow:10px 10px 0 var(--ink);transform:rotate(1.6deg);animation:popIn2 .7s .1s var(--pop) both}
@keyframes popIn2{from{opacity:0;transform:scale(.85) rotate(5deg)}to{opacity:1;transform:rotate(1.6deg)}}
.menu-gallery::after{box-shadow:none}
.menu-gallery #menu-shot{filter:brightness(.8) saturate(1.25) blur(2px)}
.menu-gallery figcaption{background:linear-gradient(transparent,#2a1840e6)}
.menu-gallery figcaption span{color:var(--sun);letter-spacing:.14em;font-family:var(--fun)}
.menu-gallery figcaption p{font-family:var(--fun);color:#fff;font-weight:400}
#menu .gallery-buttons button{background:var(--sun);color:var(--ink);border:3px solid var(--ink);backdrop-filter:none;box-shadow:2px 3px 0 var(--ink)}
#menu .gallery-buttons button:hover{background:#fff}

/* HUD */
.readout,.objective,#prompt,#notice,.keys,#family,#pair-card{background:var(--cream);color:var(--ink);backdrop-filter:none;border:3px solid var(--ink);border-radius:1rem;box-shadow:4px 4px 0 var(--ink);text-shadow:none}
.readout::before{display:none!important}
.readout>span:not(.score span),.readout span{color:#6a4f86}
.score span,.objective span,.life span{color:#e0561a!important;font-family:var(--fun);letter-spacing:.1em}
.score strong,.life strong{font-family:var(--fun);font-weight:400;color:var(--ink);font-size:1.6rem}
.readout>strong:first-child{font-family:var(--fun);font-weight:400;color:var(--ink);letter-spacing:.08em}
.objective{border-left:3px solid var(--ink);background:#e6ffcf;transform:rotate(-.6deg)}
.objective strong{color:var(--ink);font-weight:600}
.hud button{background:var(--sun);color:var(--ink);border:3px solid var(--ink);backdrop-filter:none;box-shadow:3px 3px 0 var(--ink);font-family:var(--fun);font-weight:400;font-size:.9rem}
.hud button:hover{background:#fff1b8}
.hud button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.zoom-readout b{color:#2f8a12}
.zoom-readout progress{height:.6rem;border:2px solid var(--ink);background:#fff}
.zoom-readout progress::-webkit-progress-bar{background:#fff}
.zoom-readout progress::-webkit-progress-value{background:linear-gradient(90deg,var(--lime),#d6ff6a)}
.zoom-readout progress::-moz-progress-bar{background:var(--lime)}
#notice{background:var(--sun);font-family:var(--fun);font-size:1.1rem;font-weight:400;border-radius:999px;box-shadow:4px 4px 0 var(--ink)}
#prompt{background:#fff;font-family:var(--fun);font-weight:400;font-size:.95rem;border-radius:999px}
.keys{opacity:.8;font-weight:600;color:var(--ink);font-size:.7rem;background:#fff6dcd9}
#waypoint-direction{color:#e0561a;font-family:var(--fun)}
.cat-nameplate{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:var(--fun);font-weight:400;backdrop-filter:none}
#pair-card button{background:var(--sun);color:var(--ink);border:3px solid var(--ink);font-weight:700}

/* Dialogs */
#map-dialog,#inventory-dialog,#feedback-dialog{background:var(--cream);color:var(--ink);backdrop-filter:none;border:5px solid var(--ink);border-radius:1.5rem;box-shadow:10px 10px 0 var(--ink)}
#map-dialog::backdrop,#inventory-dialog::backdrop,#feedback-dialog::backdrop{background:#2a1840b3;backdrop-filter:blur(2px)}
.map-heading h2,#feedback-dialog h2,#inventory-title{font-family:var(--fun);font-weight:400;color:var(--orange);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);letter-spacing:.04em}
#map-dialog button,#inventory-dialog button,#feedback-dialog button{color:var(--ink);background:#fff;border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);font-weight:700}
#map-dialog button:hover,#inventory-dialog button:not(:disabled):hover{background:#fff1b8}
.map-tabs [aria-pressed=true],#map-places [aria-pressed=true]{background:var(--sun)!important;color:var(--ink);border-color:var(--ink)}
#inventory-digestion,.map-key,#feedback-dialog p{color:#5a4670}
#neighborhood-map{border:4px solid var(--ink);border-radius:1rem;box-shadow:none}
#journal-body article{background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
#journal-body article span{color:#e0561a;font-weight:700}
#journal-body p{color:#4b3a60}
#feedback-send{background:var(--lime)!important;color:var(--ink)}
#feedback-dialog textarea{background:#fff;color:var(--ink);border:3px solid var(--ink)}

/* Pose wheel and touch */
#pose-wheel{background:radial-gradient(circle,#2a184066,#2a1840cc);backdrop-filter:blur(3px)}
.pose-wheel-center{background:var(--sun);color:var(--ink);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--fun);font-weight:400;letter-spacing:.06em;font-size:.85rem}
#pose-wheel .pose-choice{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--fun);font-weight:400;backdrop-filter:none}
#pose-wheel button:is(:focus-visible,:hover,[aria-pressed=true]){background:var(--lime);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:translate(-50%,-50%) scale(1.12) rotate(-3deg)}
#stick{background:#ffffff40;border:4px solid var(--ink);backdrop-filter:none}
#stick i{background:var(--sun);border:3px solid var(--ink);box-shadow:none}
.actions button{background:#fff6dccc;color:var(--ink);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink);backdrop-filter:none;font-family:var(--fun);font-weight:400;border-radius:1rem}
.actions button:active{background:var(--sun);transform:translate(1px,2px);box-shadow:1px 1px 0 var(--ink)}
.actions [aria-pressed=true]{background:var(--lime);color:var(--ink)}
::selection{background:#ffd23f}
*{scrollbar-color:#ff8a2a transparent}
@media(max-width:770px){#menu::before{height:14vh}#menu .menu-inner{transform:none;animation:none}.menu-gallery{transform:rotate(1deg);animation:none}}
#menu::before{top:auto;inset:auto -5% -8vh -5%;position:fixed}
@media(min-width:771px){#menu h1{font-size:clamp(2.4rem,min(4.6vw,9vh),5rem)}#menu .menu-inner{padding:1.1rem 1.4rem}#menu .premise{margin-bottom:.9rem}#menu .profile{margin-bottom:.7rem}#menu .menu-play{margin-top:.9rem}#menu fieldset{margin-bottom:.55rem}#menu .coats{gap:.35rem}#menu .coats button{padding:.3rem .65rem;font-size:.78rem}}
.zoom-readout[data-ready="true"] b,.zoom-readout b{color:#2f8a12}

/* Menu over a live bird's-eye 3D view; small plain card for the cat preview */
#menu{background:linear-gradient(90deg,#1d104a59,#1d104a14 55%,transparent);overflow:auto}
#menu::before{display:none}
#menu{grid-template-columns:minmax(20rem,35rem) minmax(0,1fr);justify-content:center}
.menu-stage{justify-self:center;width:min(20rem,100%);height:min(26rem,62dvh);background:radial-gradient(circle at 50% 38%,#fff9c9 0,#ffe27a 45%,#ffbf3c 100%);border:5px solid var(--ink);border-radius:1.6rem;box-shadow:8px 8px 0 var(--ink);transform:rotate(1.6deg);overflow:hidden}
.menu-stage::after{display:none}
.menu-stage #menu-cat{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;z-index:2}
@media(max-width:770px){#menu{background:linear-gradient(180deg,#1d104a40,#1d104a26)}.menu-stage{width:min(15rem,70%);height:15rem;grid-row:1}}
@media(max-width:770px){#menu{grid-template-columns:minmax(0,1fr);justify-content:stretch}}

/* Loading screen */
#loading{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1.2rem;background:radial-gradient(circle at 50% 35%,#fff9c9 0,#ffd96a 38%,#ff9f3a 100%);transition:opacity .55s ease,visibility .55s}
#loading.done{opacity:0;visibility:hidden}
#loading::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 38%,#ffffff2e 0 7deg,#ffffff00 7deg 14deg);animation:spinRays 40s linear infinite}
@keyframes spinRays{to{transform:rotate(360deg)}}
.load-card{position:relative;width:min(26rem,100%);padding:1.6rem 1.6rem 1.3rem;text-align:center;background:var(--cream);border:5px solid var(--ink);border-radius:1.6rem;box-shadow:9px 9px 0 var(--ink);transform:rotate(-1deg);color:var(--ink);font-family:var(--body)}
.load-kicker{display:inline-block;margin:0;padding:.2rem .8rem;background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:999px;font-family:var(--fun);font-size:.8rem;letter-spacing:.12em;box-shadow:3px 3px 0 var(--ink)}
.load-card h2{margin:.7rem 0 .3rem;font-family:var(--fun);font-weight:400;font-size:clamp(2.4rem,9vw,3.4rem);line-height:.95;text-transform:uppercase;color:var(--sun);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--ink);animation:wobble 2.4s ease-in-out infinite}
#load-tip{min-height:2.6em;margin:.5rem 0 .9rem;font-weight:600}
.load-bar{height:1.5rem;background:#fff;border:4px solid var(--ink);border-radius:999px;overflow:hidden}
.load-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(135deg,#a6f05a 0 12px,#7ddc3a 12px 24px);background-size:34px 34px;animation:barMove .7s linear infinite;transition:width .2s}
@keyframes barMove{to{background-position:34px 0}}
#load-pct{display:block;margin-top:.5rem;font-family:var(--fun);font-size:1.2rem}

/* Loading rays: oversized, centred on the card, spin around their own centre so no edges or gaps show */
#loading{overflow:hidden;background:radial-gradient(circle at 50% 50%,#fff9c9 0,#ffd96a 36%,#ff9f3a 100%)}
#loading::before{inset:auto;left:50%;top:50%;width:260vmax;height:260vmax;margin:0;background:repeating-conic-gradient(from 0deg at 50% 50%,#ffffff40 0 8deg,#ffffff00 8deg 16deg);transform:translate(-50%,-50%);animation:raysTurn 70s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 0,#000 4%,transparent 42%);mask-image:radial-gradient(circle,#000 0,#000 4%,transparent 42%)}
@keyframes raysTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}