:root{color:#3d2a1a;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:#8ecae6;font-family:Fredoka,Trebuchet MS,sans-serif}*{box-sizing:border-box}html,body,#app{touch-action:manipulation;width:100%;height:100%;margin:0;overflow:hidden}body{min-height:100dvh}.title-screen{min-height:100dvh;padding:24px 20px calc(24px + env(safe-area-inset-bottom));text-align:center;background:radial-gradient(circle at 20% 20%,#fff7,#0000 28%),linear-gradient(#8ecae6,#8ecae6 38%,#7ec850 38%,#6bb33d);flex-direction:column;justify-content:center;align-items:center;display:flex}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#355c7d;margin:0;font-weight:600}h1{color:#fff8e7;text-shadow:0 4px #d4921a;margin:6px 0 18px;font-size:clamp(42px,10vw,68px);line-height:.95}.title-house{width:170px;margin-bottom:22px}.title-roof{clip-path:polygon(50% 0,100% 100%,0 100%);background:#c45c26;height:54px}.title-wall{background:#f4b942;border-radius:0 0 10px 10px;height:88px;margin:-6px 12px 0;position:relative}.title-window{background:#fff4c8;border:3px solid #d4921a;width:28px;height:24px;position:absolute;top:16px;left:16px}.title-door{color:#f3e2b8;background:#7a4a2a;justify-content:center;align-items:flex-start;width:34px;height:44px;padding-top:8px;font-size:9px;font-weight:700;display:flex;position:absolute;bottom:0;right:28px}#play,.hud-btn{color:#fff8ee;background:#ff8c42;border:0;border-radius:999px;min-width:160px;min-height:52px;padding:12px 28px;font:700 22px Fredoka,sans-serif;box-shadow:0 5px #c45c26}#play:active,.hud-btn:active{transform:translateY(3px);box-shadow:0 2px #c45c26}.hint{color:#2d5a27;max-width:22rem;margin:16px 0 0;font-weight:600}.game-root{background:#8ecae6;width:100%;height:100dvh;position:relative}#game-canvas{touch-action:none;width:100%;height:100%;display:block}.speech-layer{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.speech-bubble{color:#3d2a1a;text-align:center;background:#fff8e7;border-radius:16px;max-width:11rem;padding:8px 12px;font:700 15px Fredoka,sans-serif;position:absolute;transform:translate(-50%,-120%);box-shadow:0 4px #3d2a1a2e}.beat-caption{left:50%;top:calc(58px + env(safe-area-inset-top));pointer-events:none;background:#fff8e6f0;border-radius:999px;margin:0;padding:8px 16px;font-weight:700;position:absolute;transform:translate(-50%)}.beat-caption[hidden]{display:none}.hud-top{top:calc(10px + env(safe-area-inset-top));pointer-events:none;background:#fff8e6eb;border-radius:999px;padding:8px 18px;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.hud-top p{margin:0}.sticker-row{justify-content:center;align-items:center;gap:6px;margin-top:4px;display:flex}.sticker-dot{background:#e8d5b5;border-radius:50%;width:12px;height:12px;box-shadow:inset 0 0 0 2px #d4c49a}.sticker-dot.earned{background:#f4b942;box-shadow:inset 0 0 0 2px #c45c26}.carry-chip{color:#5a3820;background:#ffe7b8;border-radius:999px;margin-left:4px;padding:1px 8px;font-size:12px}.sticker-list{gap:8px;margin:0 0 12px;display:grid}.sticker-card{background:#f0e2c4;border-radius:14px;padding:10px 12px}.sticker-card.earned{background:#ffe7b8}.sticker-card strong{display:block;margin-bottom:2px}.sticker-card p{color:#7a5a3a;margin:0;font-size:14px}.install-tip{z-index:4;left:50%;top:calc(72px + env(safe-area-inset-top));text-align:center;width:min(320px,calc(100% - 24px));padding:14px 14px 12px;background:#fff8e7;border-radius:20px;position:absolute;transform:translate(-50%);box-shadow:0 6px #3d2a1a2e}.install-tip[hidden]{display:none}.install-tip p{margin:0 0 8px;font-weight:700}.install-tip .install-how{color:#7a5a3a;font-size:14px;font-weight:600}.install-tip .hud-btn{min-width:120px;min-height:44px;font-size:18px}.hud-actions{left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;gap:10px;padding:0 12px;display:flex;position:absolute}.dpad{display:none;width:132px;height:132px;left:calc(10px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;gap:4px;z-index:3;touch-action:none;pointer-events:auto;position:absolute}.dpad-btn{color:#3d2a1a;background:#fff8e6eb;border:0;border-radius:14px;width:40px;height:40px;padding:0;font:700 16px Fredoka,sans-serif;box-shadow:0 3px #c45c26;touch-action:none;user-select:none;-webkit-user-select:none}.dpad-btn.held,.dpad-btn:active{transform:translateY(2px);box-shadow:0 1px #c45c26;background:#ffe7b8}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}@media(max-width:820px),(hover:none),(pointer:coarse){.dpad{display:grid}.hud-actions{left:calc(148px + env(safe-area-inset-left));padding:0 10px}}.hud-btn.primary{background:#2d6cdf;box-shadow:0 5px #1d4e9e}.panel{background:#28180c59;justify-content:center;align-items:flex-end;padding:12px;display:flex;position:absolute;top:0;right:0;bottom:0;left:0}.panel[hidden]{display:none}.sheet{width:min(520px,100%);max-height:min(78dvh,720px);padding:18px 16px calc(16px + env(safe-area-inset-bottom));background:#fff8e7;border-radius:24px 24px 16px 16px;overflow:auto;box-shadow:0 -8px 30px #00000026}.sheet h2{margin:0 0 6px;font-size:26px}.sheet p,.sheet label{margin:0 0 10px;font-weight:600}.swatch-row,.chip-row{flex-wrap:wrap;gap:10px;margin-bottom:14px;display:flex}.swatch,.tone,.chip,.hud-btn{cursor:pointer}.swatch{color:#3d2a1a;border:4px solid #0000;border-radius:18px;justify-content:center;align-items:flex-end;width:72px;min-height:72px;padding:6px;font:700 12px Fredoka,sans-serif;display:flex;box-shadow:0 3px #00000026}.swatch span{background:#fff8e6e0;border-radius:8px;padding:2px 4px}.tone{border:4px solid #0000;border-radius:50%;width:52px;height:52px}.chip{color:#3d2a1a;background:#f0e2c4;border:0;border-radius:16px;min-width:52px;min-height:52px;padding:8px 14px;font:700 16px Fredoka,sans-serif}.swatch.selected,.tone.selected,.chip.selected{border-color:#2d6cdf;outline:3px solid #fff}#door-input{border:3px solid #d4c49a;border-radius:14px;width:100%;min-height:52px;margin-bottom:8px;padding:10px 12px;font:700 22px Fredoka,sans-serif}.fine{color:#7a5a3a;font-size:14px}.sheet-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.slot p{margin-bottom:6px}@media(min-width:800px){.sheet{border-radius:24px;margin-bottom:28px}}