:root {
  --wall-top:#1a242b; --wall-bottom:#2c3840; --frame-light:#947c69; --frame-dark:#6b5a4a;
  --text-strong:#22313c; --text-body:#5a6e7c; --text-muted:#7c909d; --text-on-dark:#a5b7c2; --text-invert:#f2f8fc;
  --font-serif:"Noto Serif SC","Songti SC","STSong",serif; --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1); --shadow-card:0 24px 60px -12px rgba(30,51,66,.22); --shadow-btn:0 8px 20px -4px rgba(33,49,61,.28);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { color:var(--text-strong); font-family:var(--font-sans); background:radial-gradient(ellipse at 50% 40%,#38454d00 22%,#111b2266 100%),linear-gradient(155deg,var(--wall-top),var(--wall-bottom)); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; opacity:.04; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible,canvas:focus-visible { outline:2px solid #cba97a; outline-offset:5px; }
button { touch-action:manipulation; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:28px 64px 66px; }
.window { flex-shrink:0; width:min(1312px,100%,calc((100svh - 188px) * 1.95031 + 56px)); padding:28px; position:relative; border-radius:6px; background:linear-gradient(90deg,#5b493a44,transparent 3%,#e0c2a20d 48%,#3b2c2355),linear-gradient(180deg,#a58d78 0%,#89715e 2%,#816b59 47%,#6b5747 98%,#aa8c71); box-shadow:0 32px 64px -18px #0c141bcc,0 3px 7px #0c1319b3,inset 0 1px 1px #e1c8ae80,inset 0 -2px 2px #372a2099; }
.window::before { content:""; position:absolute; inset:8px; border:1px solid #2e221d40; border-radius:3px; box-shadow:0 1px #dec1a426,inset 0 1px #d6bda026; pointer-events:none; }
.window::after { content:""; position:absolute; height:8px; left:-6px; right:-6px; bottom:-6px; background:linear-gradient(#937c66,#655142); border-radius:1px 1px 3px 3px; box-shadow:0 4px 7px #0b131a66; }
.glass { position:relative; width:100%; aspect-ratio:1256 / 644; overflow:hidden; isolation:isolate; border-radius:2px; background:#dce6ec; box-shadow:0 0 0 2px #493a2f,inset 0 0 15px #17273440; }
.scene,.scene-wrap,.targets,.mask,.frost,.glass-shine { position:absolute; inset:0; width:100%; height:100%; }
.scene { object-fit:fill; user-select:none; pointer-events:none; }
.scene-wrap { z-index:0; }
.glass-shine { z-index:6; pointer-events:none; box-shadow:inset 0 0 22px #3041501c,inset 1px 1px 4px #24384440; }
.frost--home { background:radial-gradient(ellipse at 50% 43%,#f5f9fc90 0%,#f3f7facc 26%,#eef6f8a8 43%,#f5f9fbed 76%,#fff 100%); }
.frost--home::after { content:""; position:absolute; inset:0; background:url('../assets/frost-crystals.svg') center / 100% 100%; opacity:.57; }
.home-copy { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; transform:translateY(-6px); }
.eyebrow { margin:0 0 16px; font-size:12px; letter-spacing:.2em; font-weight:400; color:var(--text-body); }
h1,h2 { font-family:var(--font-serif); font-weight:300; margin:0; }
h1 { font-size:56px; line-height:74px; letter-spacing:.14em; padding-left:.14em; }
.little-rule { height:1px; width:28px; background:#7f969e80; margin:24px 0; }
.sub { font-weight:300; font-size:16px; line-height:30px; color:var(--text-body); margin:0; letter-spacing:.05em; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:48px; padding:0 28px; border-radius:999px; border:1px solid transparent; font-size:15px; font-weight:500; transition:background 160ms,transform 160ms,box-shadow 160ms; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn--primary { background:#263b47; color:var(--text-invert); box-shadow:var(--shadow-btn); }
.btn--primary:hover { background:#344e5d; }
.btn--ghost { background:transparent; color:var(--text-body); border-color:#b4c2cb80; }
.btn--ghost:hover { background:#eaf0f5; }
#btn-start { margin-top:32px; min-width:156px; }
.ico-arrow { font:24px/1 var(--font-sans); font-weight:300; }
.foot-hint { color:var(--text-on-dark); font-size:13px; line-height:20px; text-align:center; margin:32px 0 0; letter-spacing:.07em; }
.mask { z-index:1; touch-action:none; cursor:none; }
.mask--outgoing { pointer-events:none; z-index:2; }
#hint-slot { position:absolute; inset:0; z-index:3; pointer-events:none; }
.hud { position:absolute; z-index:4; top:24px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; gap:12px; }
.pill,.counter { background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.18); box-shadow:0 3px 14px #3f586512; backdrop-filter:blur(8px); display:flex; align-items:center; border-radius:999px; height:38px; padding:0 16px; font-size:13px; white-space:nowrap; }
.pill { gap:9px; }
.dot { width:5px; height:5px; background:#819f9e; border-radius:50%; }
.layer-dots { display:flex; gap:4px; padding-left:12px; margin-left:5px; border-left:1px solid #73889133; }
.layer-dots i { width:4px; height:4px; background:#c4cfd4; border-radius:50%; }
.layer-dots i.active { background:#637f87; }
.counter { gap:9px; color:var(--text-body); }
.counter b { color:var(--text-strong); font-size:16px; font-weight:500; display:inline-block; }
.counter-divider { color:#b0bec7; }
.counter b.pop { animation:count-pop 220ms ease-out; }
.cursor-hint { position:absolute; left:50%; top:51%; width:62px; height:62px; margin:-31px 0 0 -31px; border:1px solid #fff9; border-radius:50%; z-index:3; pointer-events:none; animation:gentle-wipe 3s ease-in-out infinite; box-shadow:0 0 0 9px #fff2; }
.cursor-hint span { position:absolute; width:6px; height:6px; border-radius:50%; background:#a4b6c080; top:27px; left:27px; }
.brush-cursor { z-index:5; position:absolute; border:1px solid #fff9; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); box-shadow:0 0 0 1px #2946590d; }
.game-controls { position:absolute; bottom:34px; right:64px; display:flex; align-items:center; gap:14px; }
.quiet-button { background:none; border:0; color:var(--text-on-dark); padding:10px 4px; font-size:12px; transition:color 160ms; }
.quiet-button:hover { color:#f2f8fc; }
.quiet-button span { font-size:19px; vertical-align:-1px; margin-right:3px; }
.control-separator { height:13px; width:1px; background:#93a7b433; }
.audio-toggle { height:42px; padding:0 16px; border-radius:999px; border:1px solid #ffffff2e; background:#ffffff14; display:flex; align-items:center; gap:8px; color:#d1dce4; font-size:12px; transition:opacity 300ms,background 160ms; }
.audio-toggle:hover { background:#ffffff20; }
.music-credit { font-size:10px; color:var(--text-on-dark); text-underline-offset:3px; opacity:.75; }
.music-credit:hover { opacity:1; }
.audio-toggle svg { width:17px; height:17px; }
.mute-slash { display:none; }
.audio-toggle[aria-pressed="false"] { opacity:.55; }
.audio-toggle[aria-pressed="false"] .mute-slash { display:block; }
.target { position:absolute; opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.94); transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out); border-radius:50%; }
.target img { width:100%; height:100%; object-fit:contain; display:block; }
.target.is-found { opacity:1; transform:translate(-50%,-50%) scale(1); animation:found-ring 600ms ease-out; }
.target[data-id="pine"] { transform:translate(-50%,-50%) rotate(3deg) scale(.94); }
.target[data-id="pine"].is-found { transform:translate(-50%,-50%) rotate(0deg) scale(1); }
.target[data-id="moonlight"].is-found { animation:found-ring 600ms ease-out,moonlight-spread 600ms var(--ease-out); }
.target[data-id="moon"].is-found { animation:found-ring 600ms ease-out,moon-light 600ms ease-out; }
.target[data-id="footprints"].is-found img { animation:footprints-reveal 360ms steps(6,end) both; }
.target[data-id="star"].is-found img { animation:star-light 600ms var(--ease-out) both; }
.target[data-id="ice"]::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,#fff9 48%,transparent 60%); opacity:0; }
.target[data-id="ice"].is-found::after { animation:ice-sweep 600ms ease-out; }
.hint-glow { position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.32) 0%,rgba(255,255,255,.14) 45%,rgba(255,255,255,0) 72%); pointer-events:none; animation:hint-breath 1.6s ease-in-out 2 both; }
.finish { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:24px; }
.finish-card { width:564px; padding:40px 40px 30px; border-radius:24px; background:rgba(255,255,255,.94); backdrop-filter:blur(2px); text-align:center; box-shadow:var(--shadow-card); border:1px solid #ffffffb3; animation:card-in 420ms var(--ease-out) both; }
.finish-mark { width:32px; height:32px; margin:0 auto 24px; border:1px solid #8ca7a466; border-radius:50%; display:grid; place-items:center; color:#819f9e; font-size:15px; }
.finish .eyebrow { font-size:11px; }
h2 { font-size:42px; line-height:58px; letter-spacing:.05em; margin:6px 0 16px; }
.finish-actions { display:flex; gap:12px; justify-content:center; margin:28px 0 24px; }
.finish-meta { color:var(--text-muted); margin:0; font-size:11px; letter-spacing:.06em; }
.meta-dot { padding:0 12px; }
body[data-scene="night"] .window { background:linear-gradient(180deg,#66564a,#57493f 3%,#463a32 95%,#3b322c); }
body[data-scene="night"] .window::after { background:linear-gradient(#665448,#3b322c); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.noscript { position:fixed; bottom:10px; width:100%; text-align:center; color:#fff; }
@keyframes card-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes count-pop { 50% { transform:scale(1.18); } }
@keyframes gentle-wipe { 0%,100% { transform:translate(-22px,8px); opacity:.35; } 50% { transform:translate(22px,-8px); opacity:1; } }
@keyframes found-ring { 0% { box-shadow:0 0 0 0 #ffffffe6; } 100% { box-shadow:0 0 0 18px #fff0; } }
@keyframes hint-breath { 0% { opacity:0; transform:scale(.86); } 40% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(1.08); } }
@keyframes moonlight-spread { from { transform:translate(-50%,-50%) scale(.6); } to { transform:translate(-50%,-50%) scale(1); } }
@keyframes moon-light { from { filter:brightness(.3); } to { filter:brightness(1); } }
@keyframes footprints-reveal { from { clip-path:inset(100% 0 0 0); } to { clip-path:inset(0); } }
@keyframes star-light { from { transform:scale(.2); opacity:.4; } to { transform:scale(1); opacity:1; } }
@keyframes ice-sweep { 0% { opacity:0; transform:translateX(-30%); } 35% { opacity:1; } 100% { opacity:0; transform:translateX(30%); } }
@media (max-width:899px) {
  .screen { padding:20px 24px 96px; }
  .window { padding:18px; width:min(100%,calc((100svh - 280px) * .542553 + 36px)); }
  .glass { aspect-ratio:306 / 564; }
  .window::before { inset:5px; }
  .window::after { left:-3px; right:-3px; height:5px; bottom:-4px; }
  .home-copy { padding:12px 8px; transform:translateY(-4px); }
  .eyebrow { font-size:10px; letter-spacing:.12em; margin-bottom:15px; }
  h1 { font-size:34px; line-height:48px; }
  .sub { font-size:12px; line-height:22px; letter-spacing:0; }
  .little-rule { margin:20px 0; width:22px; }
  .btn { font-size:14px; min-height:44px; padding:0 22px; gap:18px; }
  #btn-start { margin-top:26px; min-width:138px; }
  .foot-hint { margin-top:26px; font-size:11px; line-height:18px; letter-spacing:0; white-space:nowrap; }
  .hud { top:14px; left:12px; right:12px; gap:6px; }
  .pill,.counter { height:32px; font-size:11px; padding:0 10px; }
  .pill { gap:6px; }
  .layer-dots { display:none; }
  .counter { gap:5px; }
  .counter b { font-size:14px; }
  .game-controls { bottom:max(32px,env(safe-area-inset-bottom)); right:0; width:100%; justify-content:center; gap:16px; }
  .audio-toggle { height:36px; padding:0 13px; font-size:11px; }
  .quiet-button { font-size:11px; }
  .finish { padding:32px; }
  .finish-card { width:100%; padding:28px 18px 24px; border-radius:24px; }
  .finish-mark { margin-bottom:20px; }
  .finish .eyebrow { font-size:9px; letter-spacing:.08em; }
  h2 { font-size:32px; line-height:46px; }
  .finish-actions { flex-direction:column; align-items:stretch; gap:10px; margin:24px 8px 20px; }
  .finish-actions .btn { min-height:44px; }
  .finish-meta { font-size:10px; letter-spacing:0; }
  .meta-dot { padding:0 7px; }
}
@media (max-width:899px) and (max-height:650px) {
  .screen { padding-bottom:72px; padding-top:12px; }
  .window { width:min(100%,calc((100svh - 216px) * .542553 + 36px)); }
  .home-copy .eyebrow { font-size:8px; letter-spacing:0; margin-bottom:9px; }
  .home-copy h1 { font-size:30px; line-height:40px; }
  .home-copy .sub { font-size:10px; line-height:19px; }
  .little-rule { margin:12px 0; }
  #btn-start { margin-top:20px; }
  .foot-hint { margin-top:22px; font-size:10px; }
  .game-controls { bottom:17px; }
  .hud { top:10px; left:7px; right:7px; }
  .pill,.counter { padding:0 7px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  .hint-glow { animation-duration:1.6s !important; animation-iteration-count:2 !important; }
}