:root{font-family:"Segoe UI",Arial,sans-serif;color:#f4f4f5;background:#050916;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;min-height:100%;overflow:hidden}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible{outline:2px solid #ffd38a;outline-offset:6px}button[hidden]{display:none}.experience{height:100svh;min-height:320px;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#1b456d 0,transparent 58%),linear-gradient(#030b1a,#071b37 58%,#103b62);--px:0px;--py:0px}.sky-glow{position:absolute;inset:-15%;background:radial-gradient(ellipse at 50% 65%,#2766a62b,transparent 44%),radial-gradient(ellipse at 22% 75%,#247eaf20,transparent 36%);opacity:.6;transition:opacity 3s;transform:translate(var(--px),var(--py))}#effects{position:absolute;inset:0;pointer-events:none}#effects canvas{display:block;width:100%;height:100%}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse,transparent 33%,#02040caa 100%);pointer-events:none}.topbar,.bottom-bar{position:absolute;z-index:10;left:clamp(22px,4vw,72px);right:clamp(22px,4vw,72px);display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar{top:max(24px,env(safe-area-inset-top))}.bottom-bar{bottom:max(24px,env(safe-area-inset-bottom));font-size:10px;letter-spacing:2px;color:#8e98ae}.edition{font-size:10px;letter-spacing:2.6px;color:#aeb5c4}.edition span{color:#d89c60;padding:0 10px}.quiet-button{border:1px solid #ffffff24;background:#080e1c75;color:#cbd0dd;border-radius:30px;padding:10px 17px;font-size:11px;letter-spacing:.6px;transition:background .2s,border-color .2s}.quiet-button:hover{background:#ffffff14;border-color:#ffffff66}.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px 45px;text-align:center;z-index:4;transition:opacity .6s,transform .9s}.gate h1{font-size:clamp(32px,4.2vw,66px);font-weight:300;line-height:1.17;letter-spacing:-1.6px;margin:18px 0;color:#f8f3eb}.gate h1 em{font-style:normal;color:#e8b675}.eyebrow{font-size:10px;font-weight:600;letter-spacing:3px;color:#b5bdd0}.gate-copy{font-size:14px;font-weight:300;color:#9da8be;margin:0 0 28px}.primary-button{border:1px solid #ffdc9b80;border-radius:5px;background:linear-gradient(115deg,#f9d39b,#d6a167);box-shadow:0 5px 40px #e6b16a20,inset 0 1px #fff7;color:#332516;font-weight:600;font-size:13px;letter-spacing:.7px;padding:17px 36px;min-width:236px;transition:transform .2s,box-shadow .2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 44px #e6b16a44}.primary-button span{padding-left:18px}.text-button{background:none;border:0;color:#aab3c5;font-size:11px;margin-top:15px;padding:9px}.text-button:hover{color:white}.load-status{font-size:10px;letter-spacing:.4px;color:#78859c;height:16px}.tiny-orbit{width:48px;height:48px;border:1px solid #c58f5144;border-radius:50%;position:relative;margin-bottom:14px;box-shadow:0 0 36px #c58f5118}.tiny-orbit:before{content:"";position:absolute;inset:9px;border:1px solid #bfddf955;border-radius:50%}.tiny-orbit:after{content:"";position:absolute;width:16px;height:1px;background:#c9a674;transform:rotate(46deg);left:36px;top:45px}.tiny-orbit span{position:absolute;width:4px;height:4px;background:#ffd9a0;box-shadow:0 0 10px #ffca7b;border-radius:50%;left:21px;top:21px}.studio,.title-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;opacity:0;perspective:1000px}.studio-halo{position:absolute;width:72vw;height:55vh;background:radial-gradient(ellipse,#eaf4ff17,transparent 67%);filter:blur(25px)}.studio-logo{position:relative;width:min(46vw,590px);padding:20px 22px;background:none;filter:none}.studio-logo img{width:100%;display:block}.presents{font-size:clamp(14px,1.35vw,18px);letter-spacing:9px;margin:24px 0 0 9px;color:#dfc3a0}.studio-rule{width:80px;height:1px;background:linear-gradient(90deg,transparent,#d6a369,transparent);margin-top:25px}.title-scene{justify-content:center;padding-bottom:10vh;z-index:3}.title-aura{position:absolute;width:90vw;height:65vh;background:radial-gradient(ellipse,#5480cb24,transparent 67%);filter:blur(20px)}.game-logo{width:min(80vw,1120px);position:relative;transform-style:preserve-3d;filter:drop-shadow(0 18px 12px #0009) drop-shadow(0 0 28px #f5a13822)}.game-logo img{display:block;width:100%}.logo-glint{position:absolute;inset:0;opacity:0;background:linear-gradient(110deg,transparent 42%,#fff8 49%,transparent 55%);mask-image:url('assets/looknfind-logo.png');mask-size:100% 100%}.remastered-wrap{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:-1.5vw;opacity:0;width:65vw}.remastered{font-size:clamp(18px,3.1vw,48px);font-weight:800;font-style:italic;letter-spacing:.35em;text-indent:.35em;line-height:1.5;margin:0;background:linear-gradient(#fff 5%,#d6ecff 28%,#7094b4 49%,#e5f5ff 53%,#99cae4 75%,#eafaff);background-clip:text;color:transparent;filter:drop-shadow(0 2px 1px #020a20) drop-shadow(0 0 14px #65c8ff66)}.title-line{height:1px;flex:1;max-width:160px;background:linear-gradient(90deg,transparent,#a6d7ef99)}.title-line:last-child{transform:rotate(180deg)}.ready{position:absolute;left:20px;right:20px;top:66%;text-align:center;opacity:0;pointer-events:none;z-index:5}.ready-caption{font-size:9px;letter-spacing:2.6px;color:#c5bcbd;margin:0 0 24px}.prototype-note{font-size:10px;color:#8a96b1;margin-top:19px;letter-spacing:.3px}.horizon{position:absolute;inset:40% -20% -20%;background:radial-gradient(ellipse at 50% 80%,#287bb844,transparent 65%);opacity:0;transition:opacity 3s}#palms,.menu-palms{position:absolute;inset:0;opacity:0;transition:opacity 3s;transform:translate(calc(var(--px) * -1),calc(var(--py) * -.4))}.timeline{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff05;z-index:12}#progress{height:100%;width:0;background:linear-gradient(90deg,#d0914c,#f6d8a1,#8bd4ff);box-shadow:0 0 8px #f6d8a166}#flash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#b6e6ffbb,transparent 65%);opacity:0;pointer-events:none;z-index:6}.experience[data-phase="playing"] .gate,.experience[data-phase="ready"] .gate{opacity:0;transform:scale(1.05);pointer-events:none}.experience[data-phase="ready"] .ready{pointer-events:auto}.experience[data-phase="ready"] #palms,.experience[data-phase="ready"] .horizon{opacity:1}.experience[data-phase="ready"] .sky-glow{opacity:1}.boot{height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;letter-spacing:5px;color:#e7c18a;background:#060b18}.boot span{font-size:12px;letter-spacing:1px;margin-top:20px;color:#9ca9c0}#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;padding:15px;background:#481c21;z-index:100}#blazor-error-ui a{color:white} @media(max-width:600px){.edition{font-size:8px;letter-spacing:1.1px;max-width:190px;line-height:1.8}.edition span{padding:0 4px}.topbar{top:20px}.gate h1{font-size:37px;letter-spacing:-1px}.eyebrow{font-size:8px;letter-spacing:1.7px}.gate-copy{max-width:260px;line-height:1.6}.studio-logo{width:74vw;padding:16px}.presents{letter-spacing:6px}.game-logo{width:96vw}.title-scene{padding-bottom:15vh}.remastered-wrap{margin-top:10px;gap:10px;width:83vw}.remastered{font-size:24px;letter-spacing:.24em}.ready{top:62%}.ready-caption{font-size:8px;letter-spacing:1.5px;max-width:250px;margin:0 auto 22px}.bottom-bar{bottom:20px;font-size:8px;letter-spacing:1px}.quiet-button{padding:9px 12px;font-size:10px}}@media(max-height:600px) and (min-width:601px){.gate h1{font-size:34px;margin:10px}.tiny-orbit{display:none}.gate-copy{margin-bottom:15px}.game-logo{width:min(54vw,770px)}.remastered{font-size:28px}.ready{top:71%}.ready-caption{display:none}.prototype-note{margin-top:10px}.primary-button{padding:12px 26px}.title-scene{padding-bottom:10vh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.logo-glint{display:none}}

/* The studio logo uses dark lettering: a clean light scene preserves its contrast. */
#effects { z-index: 2; }
.studio { z-index: 1; background: #fff; }
.studio-halo { display: none; }
.presents { color: #586171; }
.studio-rule { background: linear-gradient(90deg, transparent, #b77d3c, transparent); }
.edition, .bottom-bar { transition: color .4s; }
.studio-lit .edition, .studio-lit .bottom-bar { color: #505a6c; }
.studio-lit .quiet-button { color: #354054; background: #ffffff70; border-color: #35405433; }
/* Begin on white, including the WASM loading screen and the sound/start gate. */
:root { background: #fff; }
.boot { background: #fff; color: #644523; }
.boot span { color: #626c7d; }
#studio-backdrop { position: absolute; inset: 0; z-index: 1; background: #fff; pointer-events: none; }
.gate h1 { color: #333b49; }
.gate h1 em { color: #a66a24; }
.gate .eyebrow, .gate-copy { color: #626c7d; }
.gate .text-button, .gate .load-status { color: #626c7d; }
.gate .text-button:hover { color: #202b3e; }
/* Layered palms frame the title; the centre stays open for controls. */
#palms,.menu-palms { pointer-events: none; }
#palms::after,.menu-palms::after { content: ''; position: absolute; bottom: -45px; left: -10%; width: 120%; height: 85px; border-radius: 50% 50% 0 0; background: #07111f; }
.palm { position: absolute; bottom: -12px; width: auto; max-height: 530px; overflow: visible; fill: #0a1928; filter: drop-shadow(1px 0 0 #3d597644); }
.palm.far { fill: #29394d; opacity: .6; filter: blur(.5px); }
.palm-crown { transform-box: view-box; transform-origin: 51.4% 21.6%; animation: palm-sway 7s ease-in-out infinite alternate; }
.palm.far .palm-crown { animation-duration: 10s; animation-delay: -3s; }
@keyframes palm-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.8deg); } }
@media(max-width:600px) { .palm:not(.far) { margin-left: -8%; max-height: 390px; } .palm.far { opacity: .45; } }
@media(prefers-reduced-motion:reduce) { .palm-crown { animation: none; } }
/* The intro begins immediately; status text is reserved for loading failures. */
#load-status { position: absolute; inset: 45% 20px auto; z-index: 12; height: auto; text-align: center; color: #626c7d; font-size: 13px; }
#load-status:empty { display: none; }
/* A quiet, shared frame for the menu preview. */
.ready { top: 63%; }
.ready-caption { margin-bottom: 16px; }
.menu-panel { display: grid; gap: 8px; width: min(340px, 100%); padding: 16px; margin: 0 auto; border: 1px solid #c4d4ef36; border-radius: 12px; background: linear-gradient(140deg, #26334b50, #070e1d80); box-shadow: 0 12px 40px #0003, inset 0 1px #ffffff08; backdrop-filter: blur(8px); }
.menu-panel button { width: 100%; min-width: 0; min-height: 42px; padding: 11px 20px; font-size: 12px; }
.dummy-button:disabled { cursor: default; opacity: 1; color: #aebbd0; border: 1px solid #b4c7e924; border-radius: 5px; background: #c4d3eb08; letter-spacing: .6px; }
.prototype-note { margin-top: 12px; }
@media(max-width:600px) { .ready { top: 53%; } .ready-caption { margin-bottom: 14px; } .menu-panel { width: min(310px, 100%); padding: 14px; } }
@media(min-width:601px) and (min-height:601px) and (max-height:820px) { .ready { top: 60%; } .game-logo { width: min(74vw, 950px, 110vh); } .title-scene { padding-bottom: 20vh; } .prototype-note { display: none; } }
@media(max-height:600px) and (min-width:601px) { .ready { top: 62%; } .menu-panel { width: min(560px, 80vw); grid-template-columns: repeat(2, 1fr); padding: 12px; } .menu-panel button { min-height: 36px; padding: 9px 14px; } .ready-caption, .prototype-note { display: none; } }
/* A small, deliberate start action unlocks browser audio. */
.entry-gate { position: absolute; inset: 80px 24px 60px; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #344052; transition: opacity .35s, transform .5s; }
.entry-label { margin: 0 0 22px; color: #9b733e; font-size: 10px; font-weight: 600; letter-spacing: 3px; }
.entry-gate h1 { margin: 0 0 14px; font-size: clamp(27px, 4vw, 44px); letter-spacing: -1px; font-weight: 400; }
.entry-copy { margin: 0 0 28px; color: #6a7482; font-size: 14px; line-height: 1.6; }
.audio-choice { display: flex; padding: 4px; margin-bottom: 22px; border: 1px solid #34405222; border-radius: 30px; background: #eef0f3; }
.audio-choice button { border: 0; border-radius: 24px; padding: 10px 23px; background: none; color: #687386; font-size: 12px; transition: background .2s, color .2s, box-shadow .2s; }
.audio-choice button[aria-pressed=true] { background: #fff; color: #344052; box-shadow: 0 2px 8px #15223a14; }
.entry-gate .primary-button { min-width: min(300px, 100%); padding: 18px 28px; font-size: 14px; }
.entry-invitation { margin-top: 16px; font-size: 11px; color: #89909b; }
.experience[data-phase=loading] #sound, .experience[data-phase=gate] #sound { visibility: hidden; }
.experience[data-phase=playing] .entry-gate, .experience[data-phase=ready] .entry-gate { opacity: 0; transform: translateY(-8px); pointer-events: none; }
@media(max-height:500px) { .entry-gate { inset: 65px 24px 42px; } .entry-label { margin-bottom: 10px; } .entry-gate h1 { font-size: 27px; margin-bottom: 8px; } .entry-copy { margin-bottom: 14px; font-size: 12px; } .audio-choice { margin-bottom: 14px; } .audio-choice button { padding: 7px 20px; } .entry-gate .primary-button { padding: 12px 24px; } .entry-invitation { margin-top: 10px; } }
/* The little visitor stands on the lower menu border, clear of the labels. */
.menu-panel { position: relative; }
.frame-monkey { position: absolute; right: 5px; bottom: -5px; width: 72px; height: 84px; pointer-events: none; z-index: 3; filter: drop-shadow(0 3px 3px #0007); }
.monkey-figure { width: 100%; height: 100%; transform-origin: 50% 95%; will-change: transform; }
.frame-monkey svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media(max-width:600px) { .frame-monkey { width: 65px; height: 76px; right: 2px; } }
@media(max-height:600px) and (min-width:601px) { .frame-monkey { width: 62px; height: 73px; right: 4px; } }
/* More room makes the footwork and articulated knees readable. */
.frame-monkey { width: 86px; height: 100px; right: -1px; }
@media(max-width:600px) { .frame-monkey { width: 76px; height: 89px; right: -3px; } }
@media(max-height:600px) and (min-width:601px) { .frame-monkey { width: 72px; height: 84px; right: 0; } }/* Classic play: quiet framing, equal image dimensions, no time pressure. */
.classic-start{border:1px solid #e8c18788;border-radius:5px;background:#eac58f;color:#30251b;font-weight:650}
.classic-start small{display:block;font-weight:400;font-size:10px;margin-top:4px;letter-spacing:.2px}
.game-open > .topbar,.game-open > .bottom-bar,.game-open > .title-scene,.game-open > .ready,.game-open > .timeline{visibility:hidden!important;pointer-events:none!important}
.game-screen[hidden]{display:none}
.game-screen{position:fixed;inset:0;z-index:20;overflow:auto;padding:22px clamp(12px,3vw,48px) 16px;background:linear-gradient(#06172bcc,#0c2b46b8);display:flex;flex-direction:column;gap:18px}
.game-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.game-brand{font-weight:850;font-size:20px;letter-spacing:1px;color:#ffd38a;text-align:center}
.game-brand span{display:block;font-size:9px;color:#b9dff4;letter-spacing:4px;margin-top:3px}
.game-stats{display:flex;align-items:center;gap:32px;width:100%;max-width:1500px;margin:0 auto}
.game-stats>div:first-child{flex:1}
.game-kicker{font-size:10px;color:#9bb8d1;letter-spacing:2px}
.game-stats h1{font-size:22px;font-weight:500;margin:6px 0 0}
.found-count{color:#bad0e1;font-size:13px}
.found-count strong{display:block;font-size:23px;color:#f6cf8d;margin-top:3px}
.game-clock{text-align:right;min-width:86px;font-size:11px;color:#bad0e1}
.game-clock strong{display:block;font-size:25px;font-weight:500;font-variant-numeric:tabular-nums;color:white;margin-top:3px}
.picture-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1500px;width:100%;margin:auto;align-items:start}
.picture-card{margin:0;min-width:0}
.picture-card figcaption{font-size:10px;letter-spacing:3px;color:#b1c8dd;margin:0 0 9px 4px}
.picture-board{position:relative;width:100%;aspect-ratio:1464/1290;max-height:calc(100svh - 242px);max-width:calc((100svh - 242px)*1464/1290);margin:0 auto;cursor:crosshair;box-shadow:0 10px 35px #0006;outline:1px solid #aac5e144;border-radius:5px}
.picture-board img{width:100%;height:100%;display:block;border-radius:5px;user-select:none}
.found-ring{position:absolute;pointer-events:none;border:3px solid #ffda70;border-radius:50%;box-shadow:0 0 0 1px #49300899,0 0 12px #ffd96860;animation:found-pop .35s ease-out}
.hint-ring{border-style:dashed;border-color:#eafaff;box-shadow:0 0 18px #88dfff;animation:hint-pulse .65s ease-in-out infinite alternate}
.keyboard-target{position:absolute;opacity:0;border:2px dashed white;background:#a4dfff44;padding:0;pointer-events:none;border-radius:4px}
.keyboard-target:focus-visible{opacity:1;outline:2px solid #14314a;outline-offset:2px}
.picture-board.miss{outline-color:#e8ae87}
.game-actions{display:flex;align-items:center;justify-content:center;gap:25px;min-height:40px}
.game-actions p{font-size:12px;color:#b4c9db;text-align:center;margin:0}
.game-actions button{white-space:nowrap}
.game-veil{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#04101ff5;backdrop-filter:blur(20px)}
.game-dialog{width:min(450px,100%);padding:35px 28px;border:1px solid #97bddb44;border-radius:18px;background:linear-gradient(150deg,#193b58,#0b2038);box-shadow:0 24px 80px #0005;text-align:center;display:grid;gap:12px}
.game-dialog h2{font-weight:500;font-size:26px;margin:0}
.game-dialog p{color:#c4d6e5;font-size:14px;line-height:1.7;margin:4px 0 15px}
.game-dialog .primary-button{min-width:0}
.result-star{font-size:55px;color:#ffd38a;text-shadow:0 0 30px #ffc75f66}
@keyframes found-pop{from{transform:scale(1.25);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes hint-pulse{to{opacity:.5}}
@media(max-width:600px){.game-screen{padding:14px 12px;gap:16px}.game-brand{font-size:15px}.game-brand span{font-size:7px;letter-spacing:2px}.game-stats{gap:14px}.game-kicker{font-size:8px;letter-spacing:.8px}.game-stats h1{font-size:18px}.found-count{font-size:10px}.found-count strong,.game-clock strong{font-size:21px}.game-clock{min-width:64px}.picture-pair{gap:10px}.picture-card figcaption{font-size:8px;letter-spacing:1px}.picture-board{max-height:none;max-width:none}.game-actions{flex-wrap:wrap;gap:12px}.game-actions p{order:3;flex-basis:100%;font-size:11px}.found-ring{border-width:2px}}
@media(max-height:550px) and (min-width:601px){.game-screen{padding:10px 20px;gap:8px}.game-heading{height:32px}.game-brand{font-size:15px}.game-brand span{font-size:7px}.game-stats h1{font-size:16px;margin:2px 0}.game-kicker{font-size:8px}.found-count strong,.game-clock strong{font-size:18px}.picture-board{max-height:calc(100svh - 170px);max-width:calc((100svh - 170px)*1464/1290)}.picture-card figcaption{margin-bottom:5px}.game-actions{min-height:30px}.game-actions .quiet-button{padding:7px 12px}}
@media(prefers-reduced-motion:reduce){.found-ring,.hint-ring{animation:none}}
#celebration{position:relative;height:105px;margin:0 auto;width:110px}#celebration .frame-monkey{position:relative;right:auto;bottom:auto;width:100px;height:116px;margin-top:-12px}

/* Two modes fit beside each other; replay and future entries share the frame. */
.menu-panel{width:min(420px,100%);grid-template-columns:repeat(2,minmax(0,1fr))}
.menu-panel #replay{grid-column:1 / -1}
.menu-panel .classic-start{min-height:58px;padding:10px 12px}
@media(max-width:600px){.menu-panel{width:min(340px,100%);padding:12px;gap:7px}.menu-panel .classic-start{font-size:12px;min-height:58px}.classic-start small{font-size:9px;line-height:1.35}}
@media(max-height:600px) and (min-width:601px){.menu-panel{width:min(580px,80vw);padding:10px;gap:6px}.menu-panel .classic-start{min-height:46px}.menu-panel #replay{min-height:34px;padding:7px 12px}}
@media(max-height:600px) and (min-width:601px){.ready{top:51%}}
.topbar-actions{display:flex;align-items:center;gap:10px}.topbar-actions #account-start{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:650px){.topbar .edition{display:none}.topbar{justify-content:flex-end}.topbar-actions #account-start{max-width:190px}}

/* Colorful arcade menu: centered play modes and Looky at his original size. */
:root{--menu-scene-background:radial-gradient(ellipse at 50% 110%,#1638c4 0,transparent 62%),linear-gradient(#020537,#080c6b 58%,#0d2196)}
.experience{overflow:clip;background:var(--menu-scene-background)}.sky-glow{background:radial-gradient(ellipse at 50% 65%,#315dff38,transparent 44%),radial-gradient(ellipse at 22% 75%,#1d32d429,transparent 36%)}.horizon{background:radial-gradient(ellipse at 50% 80%,#244bfa55,transparent 65%)}
.ready{top:55%;left:20px;right:20px}.title-scene{padding-bottom:24vh}.menu-panel{width:min(610px,100%);grid-template-columns:86px minmax(0,1fr) 86px;gap:14px;padding:18px 16px;border-radius:28px 36px 28px 36px;background:radial-gradient(ellipse at 50% 0,#244fff33,transparent 75%),linear-gradient(150deg,#152d974d,#07115366);border:1px solid #a9d1ff55;box-shadow:inset 0 1px #dcefff44,0 16px 45px #0004;backdrop-filter:blur(5px)}.menu-modes{grid-column:2;grid-row:1;display:grid;gap:10px;grid-auto-rows:1fr;min-width:0}.menu-panel .mode-button{position:relative;display:block;min-height:66px;padding:10px 12px;border:2px solid #d75b0c;border-radius:22px;background:linear-gradient(170deg,#ffe75b 0%,#ffc52c 46%,#ed8a16 100%);color:#54210d;font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;font-size:21px;font-weight:900;letter-spacing:0;text-align:center;text-shadow:0 1px #ffffff55;box-shadow:inset 0 -4px #e8761677,inset 0 2px #fff7bdbb,0 5px 0 #ac3908,0 7px 14px #0005;transition:filter .15s,transform .15s}.menu-panel #timed-start{background:linear-gradient(170deg,#ffe75b 0%,#ffc52c 46%,#ed8a16 100%);color:#54210d;text-shadow:0 1px #fff0d055}.menu-panel #friends-start{background:linear-gradient(170deg,#ffe75b 0%,#ffc52c 46%,#ed8a16 100%);color:#54210d;text-shadow:0 1px #ffffff55}.menu-panel .mode-button:before{content:'';position:absolute;left:5px;right:5px;top:4px;height:40%;border-radius:17px 17px 10px 10px;background:linear-gradient(#fffbd666,#ffffff00);pointer-events:none}.menu-panel .mode-button:hover{filter:brightness(1.07)}.menu-panel .mode-name,.menu-panel .mode-button small{position:relative;z-index:1}.menu-panel .mode-button small{display:block;margin-top:3px;font:normal 11px/1.4 "Comic Sans MS","Chalkboard SE","Comic Neue",cursive;color:#653018;letter-spacing:0;text-shadow:none}.menu-panel #timed-start small{color:#653018;text-shadow:none}.menu-looky-stage{position:relative;grid-column:3;grid-row:1 / 3;align-self:stretch;min-height:100px;pointer-events:none}.menu-looky-stage .frame-monkey{width:86px;height:100px;right:0;bottom:5px}.menu-looky-floor{position:absolute;bottom:1px;left:0;right:0;height:9px;border-radius:50%;background:linear-gradient(#b9e8ff88,#385cd144,#07124b99);border:1px solid #afd7ff55}.menu-extras{grid-column:2;grid-row:2}.menu-panel .menu-extras button{min-height:36px;font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;font-size:14px;padding:7px 16px;border-radius:20px;background:linear-gradient(170deg,#ffe75b 0%,#ffc52c 46%,#ed8a16 100%);border:1px solid #d75b0c;color:#54210d;text-align:center;box-shadow:inset 0 1px #fff7bd88,0 2px 0 #ac3908}.menu-panel .menu-extras button:hover{filter:brightness(1.07);border-color:#ed7615}.menu-sparkles{grid-column:1;grid-row:1 / 3;position:relative;pointer-events:none;align-self:stretch}.menu-sparkles span{position:absolute;font-size:25px;color:#ffe963;text-shadow:0 2px #d77920,0 4px 7px #0005;transform:rotate(-15deg);left:12px;top:20%}.menu-sparkles span:nth-child(2){font-size:18px;left:43px;top:40%;color:#ff8c7b;text-shadow:0 2px #a32c63,0 4px 7px #0005;transform:rotate(18deg)}.menu-sparkles span:nth-child(3){font-size:21px;left:17px;top:65%;color:#65e4f4;text-shadow:0 2px #276fc1,0 4px 7px #0005;transform:rotate(10deg)}
@media(max-width:600px){.ready{top:48%;left:14px;right:14px}.title-scene{padding-bottom:15vh}.menu-panel{width:min(350px,100%);grid-template-columns:minmax(0,1fr);gap:12px;padding:12px;border-radius:25px}.menu-modes{grid-column:1;grid-row:1;gap:10px}.menu-panel .mode-button{min-height:66px;padding:10px 12px;font-size:19px}.menu-panel .mode-button small{font-size:10px}.menu-looky-stage{grid-column:1;grid-row:2;justify-self:end;width:76px;height:96px;min-height:96px}.menu-looky-stage .frame-monkey{width:76px;height:89px;right:0;bottom:4px}.menu-looky-floor{height:8px}.menu-extras{grid-column:1;grid-row:2;justify-self:center;align-self:center;width:136px}.menu-panel .menu-extras button{font-size:13px;min-height:36px}.menu-sparkles{display:none}}
@media(max-height:600px) and (min-width:601px){.title-scene{right:auto;width:42%;padding:35px 0 0 14px}.game-logo{width:40vw}.remastered-wrap{width:35vw;gap:10px;margin-top:0}.remastered{font-size:20px}.ready{left:45%;right:20px;top:76px}.menu-panel{width:100%;grid-template-columns:72px minmax(0,1fr) 72px;padding:10px;gap:8px 10px}.menu-modes{gap:7px}.menu-panel .mode-button{min-height:44px;padding:6px 8px;font-size:15px;border-radius:18px}.menu-panel .mode-button small{font-size:9px;margin-top:2px}.menu-looky-stage{min-height:100px}.menu-looky-stage .frame-monkey{width:72px;height:84px;right:0;bottom:4px}.menu-looky-floor{height:8px}.menu-panel .menu-extras button{min-height:30px;padding:5px 10px;font-size:12px}.menu-sparkles span{left:8px;font-size:20px}.menu-sparkles span:nth-child(2){left:36px;font-size:15px}.menu-sparkles span:nth-child(3){left:10px;font-size:18px}}
@media(min-width:601px) and (min-height:601px) and (max-height:820px){.ready{top:49%}.title-scene{padding-bottom:34vh}}

/* Stable hover area keeps the turn from restarting as the button narrows. */
.menu-button-slot{display:block;min-width:0;perspective:900px}
.menu-button-slot>button{width:100%;height:100%;transform-origin:center}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.menu-button-slot:hover>button{animation:menu-button-turn 420ms cubic-bezier(.3,.65,.3,1) 1}
}
@keyframes menu-button-turn{from{transform:rotateX(0deg)}to{transform:rotateX(360deg)}}

/* Visible confirmation follows the player across login redirects. */
.login-welcome{position:fixed;z-index:120;top:max(78px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(600px,calc(100% - 32px));display:grid;grid-template-columns:36px minmax(0,1fr) 30px;align-items:center;gap:14px;padding:18px 20px;border:2px solid #f8a830;border-radius:22px;background:linear-gradient(135deg,#fff0ab,#ffc767);color:#38240e;box-shadow:inset 0 1px #fff9,0 8px 30px #02052a99,0 0 24px #ffc55733;font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;animation:login-welcome-arrive .4s ease-out}
.login-welcome strong{display:block;font-size:24px;line-height:1.25;overflow-wrap:anywhere}.login-welcome p{margin:6px 0 0;font-size:16px;line-height:1.4}.login-welcome-check{font:bold 32px/1 Arial,sans-serif;color:#8c4a0d}.login-welcome .login-welcome-close{border:0;border-radius:50%;width:30px;height:30px;padding:0;background:transparent;color:#542c0c;font:28px/1 Arial,sans-serif}.login-welcome .login-welcome-close:hover{background:#ffffff66}.login-welcome .login-welcome-close:focus-visible{outline:2px solid #65300c;outline-offset:3px}
@keyframes login-welcome-arrive{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:600px){.login-welcome{top:max(82px,env(safe-area-inset-top));padding:14px;gap:10px;grid-template-columns:26px minmax(0,1fr) 26px}.login-welcome strong{font-size:20px}.login-welcome p{font-size:14px}.login-welcome-check{font-size:26px}.login-welcome .login-welcome-close{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){.login-welcome{animation:none}}

.login-welcome .login-welcome-sound{display:inline-block;width:auto;height:auto;margin-top:10px;padding:8px 14px;border:1px solid #76420d;border-radius:16px;background:#15266c;color:#fff0a4;font:bold 14px/1.3 "Trebuchet MS",Arial,sans-serif}.login-welcome .login-welcome-sound[hidden]{display:none}.login-welcome .login-welcome-sound:hover{background:#263d91}.login-welcome .login-welcome-sound:focus-visible{outline:2px solid #65300c;outline-offset:3px}
/* Warm, gently domed gold faces for the three main game modes. */
.menu-panel #classic-start,.menu-panel #timed-start,.menu-panel #friends-start{
 background:radial-gradient(ellipse at 50% -35%,#fff9d6b3 0%,#fff3bd00 65%),linear-gradient(180deg,#fff0a0 0%,#f9d563 24%,#edbb3e 57%,#dfa126 100%);
 border-color:#dc831f;
 color:#182653;
 text-shadow:0 1px 0 #fff4c699;
 box-shadow:inset 0 1px 0 #fffbe3,inset 1px 0 0 #ffe8a6aa,inset -1px 0 0 #b9771b55,inset 0 -3px 3px #b8731b66,0 4px 0 #a75113,0 6px 0 #78390d,0 10px 16px #0005;
}
.menu-panel .mode-button:before{left:8px;right:8px;top:3px;height:30%;border-radius:16px 16px 50% 50%;background:linear-gradient(180deg,#fffbe88c,#fff9da26 55%,#fff7cf00);border-top:1px solid #fffce7c4}
.menu-panel .mode-button small,.menu-panel #timed-start small{color:#3e3c3b;text-shadow:0 1px 0 #ffedb044}
/* Remastered is a quieter subtitle, tucked closer to the main logo. */
.remastered-wrap{position:relative;top:-12px}
.remastered{font-size:clamp(16px,2.5vw,38px);filter:drop-shadow(0 2px 1px #020a20) drop-shadow(0 0 9px #65c8ff44)}
@media(max-width:600px){.remastered-wrap{top:-8px}.remastered{font-size:20px}}
@media(max-height:600px) and (min-width:601px){.remastered-wrap{top:-5px}.remastered{font-size:17px}}
/* Blue glass keeps the playful gold lettering while softening the menu material. */
.menu-panel #classic-start,.menu-panel #timed-start,.menu-panel #friends-start{
 border:1px solid #adcfffb3;border-bottom-color:#658cc5;
 border-radius:18px;
 background:radial-gradient(ellipse at 50% -60%,#e3f4ff55,transparent 72%),linear-gradient(180deg,#638cdb6b 0%,#355cbd6b 44%,#193b907d 45%,#12276ea8 100%);
 color:#fff09a;text-shadow:0 1px 3px #020b43;
 box-shadow:inset 0 1px 0 #f4fbffb3,inset 0 -1px 0 #a1d6ff73,inset 1px 0 0 #d6edff26,inset -1px 0 0 #d6edff26,0 5px 14px #01072d66;
 backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%);
 transition:filter .18s,border-color .18s,box-shadow .18s;
}
.menu-panel .mode-button:before{left:9px;right:9px;top:3px;height:32%;border:0;border-radius:12px 12px 50% 50%;background:linear-gradient(180deg,#f2faff24,transparent)}
.menu-panel .mode-button:after{content:'';position:absolute;left:20%;right:20%;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,#b9e6ffb3,transparent);pointer-events:none}
.menu-panel #classic-start:hover,.menu-panel #timed-start:hover,.menu-panel #friends-start:hover{filter:brightness(1.12);border-color:#e3f4ff;box-shadow:inset 0 1px #fff,inset 0 -1px #c0eaff99,0 5px 18px #01072d77,0 0 18px #5b9bff26}
.menu-panel .mode-button small,.menu-panel #timed-start small{color:#c5dbff;text-shadow:0 1px 2px #020b4380}
.menu-panel .menu-extras button{border:1px solid #9fc9ff70;background:linear-gradient(#416ab34d,#101e6080);color:#d7e8ff;box-shadow:inset 0 1px #e1f4ff40,0 3px 10px #01072d55;text-shadow:0 1px 2px #020b43}
.menu-panel .menu-extras button:hover{border-color:#cee6ff;filter:brightness(1.1)}
.experience[data-phase="ready"] .remastered{font-size:clamp(13px,1.8vw,27px);letter-spacing:.3em;filter:drop-shadow(0 1px 1px #020a20)}
.experience[data-phase="ready"] .remastered-wrap{width:min(58vw,620px);gap:16px}
@media(max-width:600px){.experience[data-phase="ready"] .remastered{font-size:15px}.experience[data-phase="ready"] .remastered-wrap{width:70vw;gap:12px}}
@media(max-height:600px) and (min-width:601px){.menu-panel #classic-start,.menu-panel #timed-start,.menu-panel #friends-start{border-radius:15px}.experience[data-phase="ready"] .remastered{font-size:13px}.experience[data-phase="ready"] .remastered-wrap{width:31vw;gap:10px}}

/* Keep build identity in the lower-right corner of the main menu. */
.menu-build-version{display:none;white-space:nowrap;letter-spacing:.8px;color:#a9b6d0;margin-left:auto;text-align:right}.experience[data-phase="ready"] .menu-build-version{display:inline}.menu-build-label{line-height:1.8}

/* No chapter captions during the opening sequence. */
.experience:not([data-phase="ready"]) .menu-build-label{visibility:hidden}

/* Automatic menu focus is only highlighted during keyboard navigation. */
.experience:not([data-keyboard-focus="true"]) .menu-panel button:focus-visible{outline:none}