:root{--panel: #fff6e8;--ink: #2a2438;--ink-soft: #5c5470;--teal: #1fa5a0;--coral: #ff7a59;--glimmer: #ffc940;--xp: #8b6cf6;--dark-panel: rgba(42, 36, 56, .72);--radius: 16px;--scale: 1;font-family:ui-rounded,SF Pro Rounded,Nunito,Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#6fb6f2;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#app{position:fixed;inset:0}#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}#ui{position:absolute;inset:0;pointer-events:none}button{font:inherit;color:inherit}.btn{pointer-events:auto;min-height:48px;padding:10px 22px;border:0;border-radius:14px;background:#fff;color:var(--ink);font-weight:700;font-size:17px;box-shadow:0 3px #2a24382e;cursor:pointer;transition:transform .08s ease}.btn:active{transform:translateY(2px);box-shadow:0 1px #2a24382e}.btn-play{background:var(--teal);color:#fff;font-size:22px;padding:14px 44px;box-shadow:0 4px #147a76}.btn-small{min-height:44px;font-size:15px;padding:8px 16px}.btn.ghost{background:transparent;box-shadow:none;color:var(--ink-soft)}.title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#fff6e80d,#2a243840)}.title-card{pointer-events:auto;text-align:center;padding:28px 36px 24px;border-radius:28px;background:#fff6e8e6;box-shadow:0 10px 40px #2a243840;max-width:min(520px,92vw)}.logo{margin:0;font-size:clamp(40px,8vw,72px);font-weight:900;letter-spacing:4px;line-height:1;color:var(--ink);text-shadow:0 4px 0 rgba(42,36,56,.12)}.logo-wild{color:var(--teal)}.tagline{margin:10px 0 20px;font-size:17px;color:var(--ink-soft)}.you{margin:14px 0 8px;font-size:14px;color:var(--ink-soft)}.title-row,.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.loading{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--ink-soft)}.spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(42,36,56,.2);border-top-color:var(--teal);animation:spin .8s linear infinite}.error{color:#d7263d}@keyframes spin{to{transform:rotate(360deg)}}.hud{position:absolute;inset:0;font-size:calc(15px * var(--scale))}.badge{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:#fff6e8e0;box-shadow:0 2px 10px #2a243826}.ring{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.ring span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--panel);font-weight:800}.badge-text{display:flex;flex-direction:column;line-height:1.15}.glimmer{font-weight:800}.lvl{font-size:12px;color:var(--ink-soft)}.gem{display:inline-block;width:12px;height:12px;transform:rotate(45deg);background:linear-gradient(135deg,#fff4c8,var(--glimmer) 60%,#e0a020);border-radius:2px;margin-right:3px}.place-name{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(66px,calc(env(safe-area-inset-right) + 66px));padding:6px 12px;border-radius:999px;background:var(--dark-panel);color:#fff;font-size:13px;font-weight:700}.hint{position:absolute;top:max(64px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#fff6e8f0;font-weight:800;font-size:calc(17px * var(--scale));box-shadow:0 4px 16px #2a243833;white-space:nowrap}.hint.idle{animation:pulse 1.2s ease-in-out infinite}.hint-icon{color:var(--teal)}.hint-skip{pointer-events:auto;border:0;background:transparent;color:var(--ink-soft);font-size:13px;text-decoration:underline;cursor:pointer;min-height:32px}@keyframes pulse{50%{transform:translate(-50%) scale(1.07)}}.mode-panel{position:absolute;top:max(118px,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;text-shadow:0 2px 6px rgba(42,36,56,.6)}.mode-panel.home{top:auto;bottom:calc(96px * var(--scale) + env(safe-area-inset-bottom));flex-direction:row}.timer{font-size:calc(34px * var(--scale));font-weight:900;font-variant-numeric:tabular-nums}.timer.running{color:#fff4c8}.flags,.best,.medals{font-weight:700;font-size:14px}.chip{padding:6px 12px;border-radius:999px;background:var(--dark-panel);font-weight:700;font-size:13px;text-shadow:none}.chip.build{background:var(--teal)}.crosshair{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#ffffffe6;box-shadow:0 0 2px #2a2438cc;border-radius:2px}.crosshair:before{left:8px;top:2px;width:2px;height:14px}.crosshair:after{top:8px;left:2px;width:14px;height:2px}.hotbar{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:4px;padding:5px;border-radius:18px;background:#fff6e8d1;box-shadow:0 4px 16px #2a243833}.slot{pointer-events:auto;position:relative;width:max(48px,54px * var(--scale));height:max(48px,54px * var(--scale));border:0;border-radius:12px;background:#2a243814;display:grid;place-items:center;cursor:pointer;padding:0}.slot img{width:78%;height:78%;image-rendering:pixelated}.slot.active{background:#fff;box-shadow:0 0 0 3px var(--teal)}.slot .count{position:absolute;right:5px;bottom:3px;font-size:12px;font-weight:800;color:var(--ink)}.slot .key{position:absolute;left:5px;top:2px;font-size:10px;color:var(--ink-soft)}.toasts{position:absolute;top:34%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.toast{padding:8px 16px;border-radius:999px;background:#fff6e8f0;font-weight:800;animation:rise .3s ease-out;box-shadow:0 3px 12px #2a243833}.toast.level{background:var(--xp);color:#fff;font-size:1.3em}.toast.medal{background:var(--glimmer)}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.fps{position:absolute;right:8px;bottom:8px;color:#fff;font-size:12px;text-shadow:0 1px 2px #000}.touch{position:absolute;inset:0}.tbtn{pointer-events:auto;position:absolute;width:56px;height:56px;border-radius:50%;border:0;background:#fff6e88c;color:var(--ink);font-weight:800;font-size:12px;touch-action:none;box-shadow:0 2px 8px #2a243833}.tbtn.on{background:var(--teal);color:#fff}.tbtn.jump{width:72px;height:72px;right:max(22px,env(safe-area-inset-right));bottom:max(96px,calc(env(safe-area-inset-bottom) + 90px));font-size:14px}.tbtn.sneak{right:max(104px,calc(env(safe-area-inset-right) + 104px));bottom:max(104px,calc(env(safe-area-inset-bottom) + 98px))}.tbtn.fly{right:max(30px,calc(env(safe-area-inset-right) + 30px));bottom:max(182px,calc(env(safe-area-inset-bottom) + 176px))}.tbtn.palette{right:max(104px,calc(env(safe-area-inset-right) + 104px));bottom:max(176px,calc(env(safe-area-inset-bottom) + 170px))}.tbtn.flag{right:max(30px,calc(env(safe-area-inset-right) + 30px));bottom:max(182px,calc(env(safe-area-inset-bottom) + 176px));font-size:22px}.tbtn.restart{right:max(104px,calc(env(safe-area-inset-right) + 104px));bottom:max(176px,calc(env(safe-area-inset-bottom) + 170px));font-size:22px}.tbtn.break{right:max(180px,calc(env(safe-area-inset-right) + 180px));bottom:max(110px,calc(env(safe-area-inset-bottom) + 104px))}.tbtn.place{right:max(180px,calc(env(safe-area-inset-right) + 180px));bottom:max(182px,calc(env(safe-area-inset-bottom) + 176px))}.tbtn.menu{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:48px;height:48px;font-size:20px}.joy{position:absolute;width:120px;height:120px;border-radius:50%;background:#fff6e838;border:2px solid rgba(255,246,232,.5)}.knob{position:absolute;left:36px;top:36px;width:48px;height:48px;border-radius:50%;background:#fff6e8d9}.panel-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#2a243859;pointer-events:auto;padding:12px}.panel{width:min(460px,94vw);max-height:94vh;overflow:auto;padding:20px 22px;border-radius:24px;background:var(--panel);box-shadow:0 12px 40px #2a243859;display:flex;flex-direction:column;gap:10px}.panel h2{margin:0 0 6px;text-align:center}.panel .dim,.panel .note{color:var(--ink-soft);font-size:14px}.field{display:flex;flex-direction:column;gap:6px;font-weight:700}.field.check{flex-direction:row;align-items:center;gap:10px}.field input[type=checkbox]{width:22px;height:22px}.field select{min-height:44px;border-radius:12px;border:0;padding:0 12px;font:inherit}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{min-height:40px;padding:6px 12px;border-radius:12px;border:0;background:#fff;cursor:pointer}.seg button.on{background:var(--teal);color:#fff}.palette{width:min(640px,96vw)}.palette-slots{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}.swatch{border:0;border-radius:12px;background:#fff;aspect-ratio:1;cursor:pointer;display:grid;place-items:center;padding:4px}.swatch img{width:100%;image-rendering:pixelated}.swatch:hover{box-shadow:0 0 0 3px var(--teal)}.curtain{position:absolute;inset:0;background:radial-gradient(circle,#fff,#fff4dc);pointer-events:none;transition:opacity .1s linear}@media(orientation:portrait)and (max-width:700px){.hint{font-size:14px}}
