:root{--bg: #2c3142;--panel: #353b50;--panel-2: #3f4661;--ink: #f3eee2;--muted: #b8bccb;--blue: #7fd1ff;--green: #9cff9c;--gold: #ffd23f;--pink: #ff7d9c;--radius: 14px;--font: "Segoe UI", system-ui, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);font-family:var(--font);color:var(--ink);overflow:hidden;-webkit-user-select:none;user-select:none}#app{position:relative;width:100vw;height:100vh;height:100dvh}#game-root{position:absolute;inset:0}#game-root canvas{display:block;width:100%;height:100%;touch-action:none}#ui-root{position:absolute;inset:0;pointer-events:none;font-size:15px}#ui-root button,#ui-root .panel,#ui-root .interactive{pointer-events:auto}.hud-top-left{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:8px}.hud-pill{background:#353b50eb;border:2px solid rgba(127,209,255,.25);border-radius:var(--radius);padding:8px 14px;min-width:168px;box-shadow:0 4px 14px #0000004d}.hud-pill .label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.hud-pill .value{font-size:22px;font-weight:700}.hud-pill .value.donations{color:var(--blue)}.hud-pill .value.rep{color:var(--gold)}.capacity{position:absolute;top:14px;left:50%;transform:translate(-50%);background:#353b50eb;border:2px solid rgba(127,209,255,.25);border-radius:var(--radius);padding:8px 16px;text-align:center;min-width:200px}.capacity .label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.capacity .bar{height:12px;background:#232838;border-radius:8px;overflow:hidden;margin-top:6px}.capacity .bar>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .18s ease}.capacity.full{border-color:var(--green);animation:pulse .8s ease-in-out infinite}.capacity .count{font-size:16px;font-weight:700;margin-top:4px}@keyframes pulse{0%,to{box-shadow:0 0 #9cff9c00}50%{box-shadow:0 0 0 6px #9cff9c40}}.event-banner{position:absolute;top:120px;left:50%;transform:translate(-50%);background:linear-gradient(90deg,#ffd23ff2,#ff7d9cf2);color:#2c2118;font-weight:800;font-size:15px;padding:8px 18px;border-radius:12px;box-shadow:0 4px 14px #00000059;animation:toastin .3s ease;z-index:5}.combo{position:absolute;top:96px;left:50%;transform:translate(-50%);font-size:20px;font-weight:800;color:var(--gold);text-shadow:0 2px 0 #1c1c22;opacity:0;transition:opacity .2s}.combo.show{opacity:1}.hud-buttons{position:absolute;bottom:72px;right:16px;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;max-width:60vw;transition:transform .25s ease,opacity .2s ease;transform-origin:bottom right}.hud-buttons.collapsed{transform:translateY(160%) scale(.96);opacity:0;pointer-events:none}.hud-toggle{position:absolute;bottom:16px;right:16px;z-index:12;min-width:0;padding:10px 15px;font-size:18px;line-height:1}.btn{background:var(--panel-2);color:var(--ink);border:2px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:10px 16px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .08s ease,background .15s ease;box-shadow:0 3px 10px #0000004d}.btn:hover{background:#4a5273}.btn:active{transform:translateY(1px) scale(.98)}.btn.primary{background:#2f6ea5;border-color:#7fd1ff66}.btn.danger{background:#7a3a3a}.btn:disabled{opacity:.5;cursor:not-allowed}.hint{position:absolute;bottom:16px;left:16px;color:var(--muted);font-size:13px;background:#353b50cc;padding:8px 12px;border-radius:10px;max-width:320px;line-height:1.4}.overlay{position:absolute;inset:0;background:#1416208c;display:none;align-items:center;justify-content:center;pointer-events:auto;z-index:100}#ui-root.panel-open .joystick,#ui-root.panel-open .hud-toggle,#ui-root.panel-open .hud-buttons,#ui-root.panel-open .toasts{display:none}.overlay.open{display:flex}.panel{background:var(--panel);border-radius:18px;width:min(720px,92vw);max-height:86vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 50px #00000080;border:2px solid rgba(127,209,255,.18)}.panel header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--panel-2)}.panel header h2{margin:0;font-size:20px}.panel .body{padding:16px 20px;overflow-y:auto}.panel .close{background:none;border:none;color:var(--ink);font-size:24px;cursor:pointer;line-height:1;min-width:44px;min-height:44px;padding:8px;margin:-8px -8px -8px 0;display:flex;align-items:center;justify-content:center}.tabbar{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 12px;background:var(--panel-2)}.tabbar .tab{background:none;border:none;color:var(--muted);font-size:15px;font-weight:600;padding:8px 12px;cursor:pointer;border-bottom:3px solid transparent}.tabbar .tab.active{color:var(--ink);border-color:var(--blue)}.upgrade{display:flex;align-items:center;gap:14px;background:var(--panel-2);border-radius:12px;padding:12px 14px;margin-bottom:10px}.upgrade .info{flex:1}.upgrade .info .name{font-weight:700;font-size:16px}.upgrade .info .desc{color:var(--muted);font-size:13px;margin-top:2px}.upgrade .info .lvl{color:var(--blue);font-size:13px;margin-top:4px}.upgrade .buy{min-width:110px;text-align:center}.zone{display:flex;align-items:center;gap:14px;background:var(--panel-2);border-radius:12px;padding:12px 14px;margin-bottom:10px}.zone .info{flex:1}.zone .info .name{font-weight:700;font-size:16px}.zone .info .desc{color:var(--muted);font-size:13px;margin-top:2px}.zone .tag{font-size:12px;padding:3px 8px;border-radius:8px;background:#2a2f42;color:var(--muted)}.zone .tag.current{color:var(--green)}.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.catcard{background:var(--panel-2);border-radius:12px;padding:10px;text-align:center}.catcard.undiscovered{opacity:.55}.catcard .dot{width:34px;height:34px;border-radius:50%;margin:4px auto 6px;border:2px solid rgba(255,255,255,.15)}.catcard .catdex-ico{width:56px;height:56px;object-fit:contain;display:block;margin:2px auto 4px}.catcard .catdex-ico.silhouette{filter:brightness(0);opacity:.35}.catcard .name{font-size:13px;font-weight:700}.catcard .meta{font-size:11px;color:var(--muted);margin-top:2px}.catcard.rare{border:2px solid var(--gold)}.catcard .meta.pers{color:var(--blue);margin-top:4px;font-size:10px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.catcard .meta.variants{color:var(--pink);margin-top:4px;font-size:10px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.catcard.shinyseen{border-color:var(--gold);box-shadow:0 0 10px #ffd23f40}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.stats-grid .row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding:6px 0}.stats-grid .row .k{color:var(--muted)}.toasts{position:absolute;bottom:76px;left:50%;transform:translate(-50%);display:flex;flex-direction:column-reverse;gap:8px;align-items:center}.toast{background:#353b50f2;border-left:4px solid var(--blue);padding:10px 16px;border-radius:10px;font-size:14px;animation:toastin .25s ease;box-shadow:0 4px 14px #00000059}.toast.good{border-color:var(--green)}.toast.great{border-color:var(--gold)}@keyframes toastin{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.discovery{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) scale(.9);background:var(--panel);border:3px solid var(--gold);border-radius:18px;padding:22px 30px;text-align:center;opacity:0;pointer-events:none;box-shadow:0 18px 50px #00000080;transition:opacity .2s,transform .2s}.discovery.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.discovery .dot{width:60px;height:60px;border-radius:50%;margin:0 auto 10px}.discovery .title{font-size:13px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase}.discovery .name{font-size:24px;font-weight:800;margin:4px 0}.discovery .fact{color:var(--muted);font-size:13px;max-width:280px}.title-screen{position:absolute;inset:0;background:linear-gradient(160deg,#2c3142,#1d2030);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:auto;text-align:center}.title-screen h1{font-size:46px;margin:0}.title-screen p{color:var(--muted);max-width:460px;margin:0;line-height:1.5}.title-screen .cat-emoji{font-size:64px}.title-screen .player-label{color:var(--gold);font-weight:700;font-size:15px;margin-top:2px}.title-screen .title-logo{width:210px;height:210px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}.stat-ico{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:2px}.btn{background-color:#8a6534;background-image:url(../tiles/ui_wood.png);background-size:cover;background-blend-mode:multiply;color:#fff7e8;border:2px solid rgba(60,40,20,.28);text-shadow:0 1px 1px rgba(80,50,20,.55)}.btn:hover{filter:brightness(1.08);background-color:#97713c}.btn.primary{background-color:#2f6ea5}.btn.danger{background-color:#a34f4f}.btn:disabled{filter:grayscale(.4) brightness(.9)}.panel{background-color:#f3e6c8;background-image:url(../tiles/ui_panel.png);background-size:cover;color:#3f2f1e;border-color:#c9a96e}.panel header{background:#78562e29;color:#3f2f1e}.panel header h2{color:#3f2f1e}.panel .close{color:#5a4326}.tabbar{background:#78562e1f}.tabbar .tab{color:#6a5334}.tabbar .tab.active{color:#3f2f1e;border-color:#c46a6a}.upgrade,.zone,.mission-row,.setting-row{background:#fff6;border:1px solid rgba(120,86,46,.2)}.catcard{background:#ffffff6b}.catcard.undiscovered{opacity:.45}.panel .name,.upgrade .info .name,.zone .info .name,.mission-row .name,.catcard .name{color:#3f2f1e}.panel .desc,.upgrade .info .desc,.zone .info .desc,.mission-row .desc,.catcard .meta,.setting-row .k,.stats-grid .row .k{color:#7a6244}.upgrade .info .lvl,.zone .info .lvl,.catcard .meta.pers{color:#3a6fa0}.stats-grid .row{border-bottom-color:#78562e2e}.hint.interactive{color:#5d4a30;background:#ffffff59}.zone .tag{background:#78562e2e;color:#5d4a30}.zone .tag.current{color:#1f5e33}.m-bar.wide,.mission-pill .m-bar{background:#5a3c1e40}.mission-pill{position:absolute;top:14px;right:14px;background:#353b50eb;border:2px solid rgba(255,210,63,.3);border-radius:var(--radius);padding:8px 14px;min-width:190px;box-shadow:0 4px 14px #0000004d}.mission-pill .label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.mission-pill .m-title{font-weight:700;font-size:15px;margin:2px 0}.mission-pill .m-bar,.m-bar.wide{height:8px;background:#232838;border-radius:6px;overflow:hidden}.mission-pill .m-bar>span,.m-bar.wide>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--pink));transition:width .2s ease}.mission-pill .m-count{font-size:12px;color:var(--muted);margin-top:4px}.mission-row{background:var(--panel-2);border-radius:12px;padding:12px 14px;margin-bottom:10px}.mission-row .name{font-weight:700;font-size:16px}.mission-row .desc{color:var(--muted);font-size:13px;margin:2px 0 8px}.mission-row .m-bar.wide{margin-bottom:6px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--panel-2);border-radius:12px;padding:12px 14px;margin-bottom:10px}.setting-row .k{font-weight:600}.setting-row input[type=range]{flex:1;max-width:260px;accent-color:var(--blue)}.setting-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--blue);cursor:pointer}.joystick{position:absolute;left:26px;bottom:90px;width:132px;height:132px;border-radius:50%;background:#353b5080;border:2px solid rgba(127,209,255,.3);touch-action:none;pointer-events:auto}.joy-thumb{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#7fd1ffd9;box-shadow:0 2px 10px #0006}.decor-done{position:absolute;bottom:max(84px,calc(env(safe-area-inset-bottom) + 76px));left:50%;transform:translate(-50%);z-index:40;box-shadow:0 6px 20px #00000073}.shelter-exit{position:absolute;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));left:50%;transform:translate(-50%);z-index:40;box-shadow:0 6px 20px #00000073}#ui-root.indoors .hud-top-left,#ui-root.indoors .capacity,#ui-root.indoors .mission-pill,#ui-root.indoors .daily-pill,#ui-root.indoors .combo,#ui-root.indoors .event-banner,#ui-root.indoors .hint:not(.interactive),#ui-root.indoors .hud-buttons,#ui-root.indoors .hud-toggle,#ui-root.indoors .joystick{display:none!important}.daily-pill{top:118px;cursor:pointer;border-color:#ffd23f59}.daily-pill .m-bar>span{background:linear-gradient(90deg,var(--blue),var(--gold))}html.reduce-motion .capacity.full,html.reduce-motion .toast{animation:none}html.reduce-motion .hud-buttons{animation:none;transition:none}html.reduce-motion .discovery{transition:opacity .2s;transform:translate(-50%,-50%) scale(1)}html.reduce-motion .splash-cat{animation:none}@media(pointer:coarse){#ui-root{font-size:13px}.hud-top-left{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));gap:6px}.hud-pill{min-width:0;padding:4px 9px;border-width:1px}.hud-pill .label{font-size:9px}.hud-pill .value{font-size:15px}.capacity{top:max(10px,env(safe-area-inset-top));min-width:0;max-width:34vw;padding:4px 10px;border-width:1px}.capacity .label{font-size:9px}.capacity .bar{height:8px;margin-top:3px}.capacity .count{font-size:12px;margin-top:2px}.mission-pill{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));min-width:0;max-width:30vw;padding:4px 9px}.mission-pill .m-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mission-pill .label,.mission-pill .m-count{font-size:9px}.mission-pill .m-title{font-size:11px;margin:1px 0}.daily-pill{top:calc(max(10px,env(safe-area-inset-top)) + 78px)}.combo{font-size:15px;top:62px}.event-banner{top:82px;font-size:11px;padding:5px 10px}.hud-buttons{gap:5px;max-width:62vw;bottom:max(74px,calc(env(safe-area-inset-bottom) + 66px));right:max(10px,env(safe-area-inset-right))}.hud-buttons .btn{padding:7px 9px;font-size:11px;min-width:0;min-height:40px}.hud-toggle{bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right))}.hint:not(.interactive){display:none}.joystick{width:112px;height:112px;left:max(18px,calc(env(safe-area-inset-left) + 10px));bottom:max(76px,calc(env(safe-area-inset-bottom) + 68px))}.joy-thumb{width:48px;height:48px;margin:-24px 0 0 -24px}.panel{width:94vw;max-height:88vh}.panel header{padding:12px 14px}.panel header h2{font-size:16px}.panel .body{padding:12px 14px}.tabbar{padding:0 12px 10px}.tabbar .tab{font-size:12px;padding:8px;min-height:40px}.btn{min-height:40px}}@media(max-height:480px){.title-screen{gap:8px}.title-screen h1{font-size:24px}.title-screen p{display:none}.title-logo,.title-screen img{max-height:88px}.combo{top:54px}.event-banner{top:74px}.toasts{bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px))}.joystick{width:96px;height:96px;left:max(20px,calc(env(safe-area-inset-left) + 12px));bottom:max(30px,calc(env(safe-area-inset-bottom) + 22px))}.joy-thumb{width:42px;height:42px;margin:-21px 0 0 -21px}.hud-buttons{bottom:max(66px,calc(env(safe-area-inset-bottom) + 56px));right:max(14px,calc(env(safe-area-inset-right) + 8px))}.hud-toggle{bottom:max(12px,calc(env(safe-area-inset-bottom) + 6px))}.panel{max-height:94vh}}@media(max-width:720px)and (pointer:fine){.panel{width:94vw}.title-screen h1{font-size:34px}}