:root{--color-paper:#fff8ea;--color-paper-deep:#f4ead2;--color-ink:#22222a;--color-ink-soft:#4a4754;--color-sky:#55b8ee;--color-sky-soft:#dff4ff;--color-grass:#67c96b;--color-grass-soft:#e6f8df;--color-tomato:#f35b4f;--color-tomato-soft:#ffe0dc;--color-balloon-yellow:#ffd45a;--color-balloon-pink:#f7a6c7;--color-balloon-blue:#73c7ff;--color-orange:#ff9f43;--color-card:#fff;--color-muted:#ece8dc;--glow-active:#ffd45a8c;--grain-opacity:.06;--shadow-soft:0 12px 30px #22222a1f;--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);color:var(--color-ink);background:var(--color-paper);font-synthesis:none;text-rendering:geometricprecision;font-family:Trebuchet MS,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 18% 12%,#ffd45a3d,#0000 24%),linear-gradient(145deg,#fff8ea 0%,#f4ead2 100%);min-width:320px;min-height:100vh;margin:0;overflow:hidden}button{font:inherit}.app-shell{min-height:100vh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.game-surface{background:var(--color-paper);width:100vw;height:100vh;position:relative;overflow:hidden}.game-host{width:100%;height:100%}.game-host canvas{display:block}.hud{z-index:5;top:max(14px, env(safe-area-inset-top));min-height:106px;box-shadow:0 7px 0 #22222a0f, var(--shadow-soft);background:linear-gradient(#fff8eaf7,#f4ead2e0),#fff8eaf5;border:3px solid #22222ae6;border-radius:8px;grid-template-columns:58px 174px minmax(360px,1fr) auto;align-items:center;gap:12px;padding:8px 12px;display:grid;position:absolute;left:20px;right:20px}.hud:after{content:"";pointer-events:none;border:2px dashed #22222a1f;border-radius:5px;position:absolute;inset:6px}.hud--compact{grid-template-columns:56px 170px minmax(220px,1fr) auto;width:min(900px,100vw - 32px);min-height:70px;padding:8px 10px;left:50%;right:auto;transform:translate(-50%)}.hud--compact .hud-title,.hud--compact .progress-dots{display:none}.hud--expanded .hud-title{transform:translateY(0)}.hud--expanded .hud-title strong{font-size:clamp(27px,2.6vw,34px)}.hud--expanded .progress-dots{transform:translateY(18px)}.hud-hidden{z-index:5;pointer-events:none;position:absolute;inset:0}.hud-hidden .score-chip,.hud-tab{pointer-events:auto}.hud-tab{top:max(0px, env(safe-area-inset-top));border:4px solid var(--color-ink);width:94px;height:70px;color:var(--color-ink);box-shadow:var(--shadow-soft);cursor:pointer;background:#fff8eaf7;border-top:0;border-radius:0 0 8px 8px;place-items:center;display:grid;position:absolute;left:50%;transform:translate(-50%)}.score-chip{top:max(18px, env(safe-area-inset-top));border:4px solid var(--color-ink);min-width:154px;min-height:64px;box-shadow:var(--shadow-soft);background:#fff8eaf5;border-radius:8px;justify-content:center;align-items:center;gap:12px;padding:8px 18px;display:inline-flex;position:absolute;left:22px}.hud-score{background:#fff8ea9e;border:2px solid #22222ad1;border-radius:8px;justify-content:center;align-items:center;gap:10px;min-height:56px;padding:7px 13px;display:inline-flex}.score-star{border:2px solid var(--color-ink);background:var(--color-balloon-yellow);width:36px;height:36px;color:var(--color-ink);border-radius:50%;place-items:center;font-size:22px;line-height:1;display:grid}.score-text{flex-direction:column;align-items:flex-start;min-width:0;line-height:1.04;display:flex}.score-text small{color:var(--color-ink-soft);letter-spacing:0;text-transform:uppercase;font-size:11px;font-weight:800}.score-chip strong,.hud-score strong{white-space:nowrap;font-family:Segoe Print,Comic Sans MS,Trebuchet MS,sans-serif;font-size:22px}.hud-title{flex-direction:column;grid-area:1/3;place-self:center;align-items:center;min-width:0;line-height:1.02;display:flex}.hud-title strong{letter-spacing:0;text-align:center;white-space:nowrap;font-family:Segoe Print,Comic Sans MS,Trebuchet MS,sans-serif;font-size:clamp(27px,3vw,38px)}.hud-title span{color:var(--color-ink-soft);text-align:center;white-space:nowrap;margin-top:2px;font-size:13px;font-weight:800}.hud-actions{grid-column:4;justify-content:flex-end;align-items:center;gap:9px;display:flex}.hud-icon,.hud-button,.panel-heading button,.modal-actions button{background:var(--color-card);min-width:54px;min-height:54px;color:var(--color-ink);cursor:pointer;transition:transform .15s var(--ease-bounce), box-shadow .15s ease, background .15s ease;border:3px solid #22222ae6;border-radius:999px;box-shadow:0 6px #22222a24}.hud-menu{background:#fff8ead1}.hud-icon:hover,.hud-button:hover,.panel-heading button:hover,.modal-actions button:hover{transform:translateY(-1px)}.hud-icon:active,.hud-button:active,.panel-heading button:active,.modal-actions button:active{transform:translateY(3px)scale(.98);box-shadow:0 2px #22222a29}.hud-icon.is-on{background:var(--color-sky-soft)}.hud-button{justify-content:center;align-items:center;gap:8px;min-width:116px;padding:0 16px;font-weight:800;display:inline-flex}.progress-dots{grid-area:1/3;justify-content:space-between;place-self:end center;width:min(380px,100%);margin:0;padding:0 6px;list-style:none;display:flex;position:relative}.progress-dots:before{content:"";background:#22222a24;border-radius:999px;height:3px;position:absolute;top:50%;left:20px;right:20px;transform:translateY(-50%)}.progress-dots li{z-index:1;background:var(--color-card);width:18px;min-width:18px;height:18px;color:var(--color-ink);border:2px solid #22222ac7;border-radius:999px;place-items:center;font-size:0;font-weight:800;display:grid;position:relative}.progress-dots li span{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.progress-dots li.is-complete{background:var(--color-grass);border-color:#22222ab8}.progress-dots li.is-active{background:var(--color-balloon-yellow);border-color:var(--color-ink);box-shadow:0 0 0 6px #ffd45a52}.side-panel{z-index:6;border:4px solid var(--color-ink);width:min(380px,100vw - 40px);box-shadow:var(--shadow-soft);background:linear-gradient(90deg,#f4ead2e6 0 18px,#0000 18px),linear-gradient(#fff8eafa,#f4ead2ed);border-radius:8px;padding:18px;position:absolute;top:112px;bottom:24px;right:20px;overflow:auto}.side-panel:before{content:"";background:#22222a2e;border-radius:999px;width:4px;position:absolute;top:22px;bottom:22px;left:22px}.panel-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;display:flex}.panel-heading>div{min-width:0}.panel-heading h2,.confirm-modal h2{letter-spacing:0;margin:0;font-family:Segoe Print,Comic Sans MS,Trebuchet MS,sans-serif;font-size:32px}.panel-heading p{color:var(--color-ink-soft);margin:2px 0 0;font-size:15px;font-weight:800}.panel-heading button{border-radius:999px;min-width:96px;min-height:48px;padding:0 18px;font-weight:800}.album-meter{background:#fff8eabf;border:2px solid #22222a8c;border-radius:999px;height:13px;margin:2px 0 16px 18px;overflow:hidden}.album-meter span{border-radius:inherit;background:linear-gradient(90deg, var(--color-grass), var(--color-balloon-yellow));height:100%;display:block}.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-left:18px;display:grid}.reward-tile{background:radial-gradient(circle at 50% 12%, #ffd45a1a, transparent 36%), var(--color-card);text-align:center;min-height:108px;transition:transform .15s var(--ease-bounce), opacity .15s ease;border:3px solid #22222ad9;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:8px;display:flex}.reward-tile.is-locked{color:var(--color-ink-soft);background:#fff8eac2;border-style:dashed}.reward-tile.is-unlocked{border-color:#22222ab8;box-shadow:0 6px #67c96b38}.reward-art{background:#ffd45a42;border:3px solid #22222a9e;border-radius:50%;place-items:center;width:54px;height:54px;font-size:36px;display:grid}.reward-art img{object-fit:contain;max-width:42px;max-height:42px;display:block}.reward-tile.is-locked .reward-art{background:#ece8dc8a}.reward-tile.is-locked .reward-art img{filter:saturate(.55);opacity:.42}.reward-tile strong{font-size:13.5px;line-height:1.2}.reward-tile small{color:var(--color-ink-soft);font-size:12px;font-weight:800}.empty-note{color:var(--color-ink-soft);text-align:center;border:2px dashed #22222a3d;border-radius:8px;grid-column:1/-1;margin:6px 0 0;padding:12px 14px;font-size:18px;line-height:1.4}.modal-backdrop{z-index:7;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#22222a7a;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.confirm-modal{border:5px solid var(--color-ink);background:radial-gradient(circle at 15% 20%, #ffd45a29, transparent 28%), var(--color-paper);width:min(760px,100vw - 48px);box-shadow:0 18px 0 #22222a1f, var(--shadow-soft);text-align:center;border-radius:8px;padding:44px 46px 38px}.confirm-modal p{color:var(--color-ink);margin:12px 0 34px;font-size:25px;font-weight:800;line-height:1.4}.modal-actions{justify-content:center;gap:24px;display:flex}.modal-actions button{border-radius:8px;min-width:250px;min-height:76px;padding:0 18px;font-size:26px;font-weight:900}.modal-actions .continue{background:#a8c863}.modal-actions .danger{background:var(--color-tomato);color:var(--color-ink)}@media (width<=820px){.hud{grid-template-columns:58px 1fr auto;gap:8px;min-height:68px;padding:8px;left:10px;right:10px}.hud--compact{grid-template-columns:50px minmax(92px,1fr) auto;width:calc(100vw - 20px)}.hud--compact .hud-score{min-height:50px;padding:5px 9px}.hud--compact .score-star{width:34px;height:34px;font-size:21px}.hud--compact .hud-score strong{font-size:18px}.hud--compact .hud-actions .hud-icon:nth-child(2),.progress-dots{display:none}.hud-title strong{font-size:23px}.hud-actions{gap:6px}.hud-icon,.hud-button{min-width:48px;min-height:48px}.hud-button{min-width:48px;padding:0 10px}.hud-button span{display:none}.score-chip{min-width:124px;min-height:56px;padding:7px 12px;left:10px}.hud-tab{width:82px;height:62px}.modal-actions{flex-direction:column;gap:12px}.modal-actions button{width:100%;min-width:0}}@media (orientation:landscape) and (height<=520px){.game-host{width:100%;height:auto;position:absolute;inset:102px 0 0}.hud,.hud--compact{top:max(6px, env(safe-area-inset-top));grid-template-columns:52px 150px 1fr auto;gap:6px;width:auto;min-height:74px;padding:6px 8px;left:8px;right:8px;overflow:hidden;transform:none}.hud:after{inset:4px}.hud-title,.progress-dots{display:none}.hud-score{min-height:52px;padding:5px 9px}.score-star{width:34px;height:34px;font-size:21px}.score-chip strong,.hud-score strong{font-size:19px}.hud-actions{gap:5px;min-width:0}.hud-actions .hud-icon:nth-child(2){display:none}.hud-icon,.hud-button{min-width:48px;min-height:48px}.hud-button{min-width:48px;padding:0 10px}.hud-button span{display:none}.hud-hidden .score-chip{top:max(8px, env(safe-area-inset-top));min-width:116px;min-height:52px;padding:6px 10px;left:10px}.hud-tab{width:72px;height:56px}.side-panel{width:min(360px,100vw - 16px);top:88px;bottom:8px;right:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}