:root{--ink:#f8f3dd;--muted:#a9b7c9;--bg:#09101c;--panel:#121d2e;--panel2:#192942;--gold:#ffc857;--orange:#ff8f45;--green:#72d6a0;--red:#ff6b72;--blue:#6fbcff;--line:#2d405d;--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#243e63 0,#09101c 48%);color:var(--ink)}body{overscroll-behavior:none}button,input,select{font:inherit}.topbar{position:fixed;z-index:20;inset:0 0 auto 0;height:58px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#0b1322ee,#0b1322bb,transparent);backdrop-filter:blur(9px)}.brand-mini{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px;letter-spacing:1.5px;color:var(--gold)}.icon-button{width:40px;height:40px;border:0;background:#ffffff0d;color:var(--ink);border-radius:12px;font-size:26px}.sword-sprite{width:32px;height:32px;background:url('images/swords-sheet0.webp') -1px -1px/1024px 1024px;image-rendering:pixelated;animation:swordFloat 1.7s ease-in-out infinite}.bottom-nav{position:fixed;z-index:20;left:10px;right:10px;bottom:calc(8px + var(--safe-bottom));height:66px;display:grid;grid-template-columns:repeat(4,1fr);padding:5px;background:#111d2df2;border:1px solid #31455f;border-radius:20px;box-shadow:0 12px 36px #000b;backdrop-filter:blur(12px)}.bottom-nav button{border:0;background:transparent;color:#8fa1b8;border-radius:15px;font-size:11px;font-weight:750;display:grid;place-items:center;gap:1px}.bottom-nav span{font-size:21px;line-height:1}.bottom-nav button.active{color:var(--gold);background:linear-gradient(#ffc85724,#ffc8570a)}main{min-height:100vh;padding:64px 16px calc(94px + var(--safe-bottom));max-width:780px;margin:auto}.hero{position:relative;overflow:hidden;min-height:300px;margin:-64px -16px 18px;padding:92px 20px 22px;display:flex;align-items:flex-end;background:linear-gradient(0deg,#09101c 0,transparent 65%),linear-gradient(90deg,#09101c88,transparent),url('images/townbg-sheet0.webp') center 27%/cover;image-rendering:pixelated}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#fff2 50%,transparent 65%);transform:translateX(-120%);animation:shine 6s ease-in-out infinite}.hero-content{position:relative;z-index:1}.eyebrow{margin:0 0 7px;color:var(--gold);font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{font-size:36px;line-height:.98;margin-bottom:10px;text-shadow:0 3px 0 #101423}h2{font-size:25px;margin-bottom:12px}h3{font-size:17px}.hero p{max-width:460px;color:#e6edf7;margin:0}.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0 20px}.stat{padding:13px 10px;background:linear-gradient(145deg,#1b2b44,#101a2a);border:1px solid var(--line);border-radius:16px}.stat b{display:block;font-size:19px;color:var(--gold)}.stat small{color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:end;margin:26px 2px 12px}.section-head button{border:0;background:transparent;color:var(--blue);font-weight:750}.card{position:relative;padding:16px;margin-bottom:11px;background:linear-gradient(145deg,#17243a,#101927);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 24px #0003}.card.clickable:active{transform:scale(.985)}.card-row{display:flex;gap:13px;align-items:flex-start}.card-icon{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:14px;background:#ffc85718;border:1px solid #ffc85735;font-size:24px}.card h3{margin:1px 0 5px}.card p{color:var(--muted);font-size:14px;line-height:1.5;margin:0}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:#6fbcff20;color:#8ecaff;font-size:10px;font-weight:850;letter-spacing:.5px}.priority{border-left:4px solid var(--gold)}.priority.done{opacity:.55;border-left-color:var(--green)}.check{width:24px;height:24px;accent-color:var(--green);margin-top:3px}.recommendation{padding:15px 15px 15px 52px}.recommendation .number{position:absolute;left:14px;top:15px;width:27px;height:27px;border-radius:9px;background:var(--gold);color:#1c1609;display:grid;place-items:center;font-weight:900}.why{display:block;margin-top:7px;color:#8196b0;font-size:12px}.filter-row{display:flex;gap:8px;overflow:auto;margin:0 -16px 15px;padding:0 16px;scrollbar-width:none}.chip{white-space:nowrap;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:8px 12px;border-radius:999px}.chip.active{color:#231a09;background:var(--gold);border-color:var(--gold);font-weight:850}.guide-hero{min-height:200px;margin:-64px -16px 18px;padding:86px 20px 20px;display:flex;align-items:end;background:linear-gradient(0deg,#09101c,transparent),url('images/fightbg-sheet0.webp') 0 0/auto 300px;image-rendering:pixelated}.guide-content{line-height:1.65;color:#d9e2ee}.guide-content h2{margin-top:28px;color:var(--gold);font-size:19px}.guide-content ul{padding-left:22px}.guide-content li{margin-bottom:8px}.guide-content a{color:var(--blue)}.callout{padding:14px;border:1px solid #ffc85755;border-radius:14px;background:#ffc85712;margin:14px 0}.credit{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #ffffff12}.credit span:last-child{color:var(--muted);text-align:right}.button{border:0;border-radius:14px;min-height:48px;padding:0 18px;font-weight:850}.button.primary{background:linear-gradient(#ffd66d,#f4a93c);color:#241804;box-shadow:0 4px 0 #9b5a1c}.button.ghost{background:#ffffff10;color:var(--ink);border:1px solid var(--line)}label{display:block;margin:14px 0;color:var(--muted);font-size:13px;font-weight:700}input:not([type=radio]):not([type=checkbox]),select{display:block;width:100%;margin-top:7px;padding:13px;border-radius:12px;border:1px solid var(--line);background:#0c1524;color:var(--ink)}input[type=range]{width:calc(100% - 42px);accent-color:var(--gold)}output{display:inline-block;width:36px;text-align:center;color:var(--gold);font-weight:900}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{margin:0;padding:13px;border:1px solid var(--line);border-radius:14px;background:#101b2b}.choice:has(input:checked){border-color:var(--gold);background:#ffc85712}.choice input{position:absolute;opacity:0}.choice b,.choice small{display:block}.choice b{color:var(--ink)}.choice small{margin-top:5px;color:var(--muted);font-weight:500}dialog{width:min(100% - 24px,640px);max-height:90vh;color:var(--ink);background:#0d1726;border:1px solid var(--line);border-radius:22px;padding:0;box-shadow:0 25px 80px #000d}dialog::backdrop{background:#03070dcc;backdrop-filter:blur(5px)}#onboardingDialog{max-height:calc(100vh - 20px)}.wizard{padding:22px}.wizard-step{display:none}.wizard-step.active{display:block;animation:slideIn .28s ease}.wizard-progress{height:5px;background:#ffffff12;border-radius:99px;overflow:hidden;margin-bottom:24px}.wizard-progress i{display:block;height:100%;width:25%;background:var(--gold);transition:width .3s}.wizard-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.pixel-scene{height:150px;margin:-22px -22px 22px;position:relative;overflow:hidden;background:linear-gradient(transparent,#0d1726),url('images/fightbg-sheet0.webp') 0 0/900px auto;image-rendering:pixelated}.hero-player{position:absolute;left:50%;bottom:16px;width:64px;height:64px;transform:translateX(-50%) scale(1.5);background:url('images/player-sheet0.webp') 0 0/1024px 512px;image-rendering:pixelated;animation:playerIdle .7s steps(1) infinite}.floating-clover{position:absolute;right:22%;top:40px;color:#7ee28c;font-size:25px;animation:clover 2s ease-in-out infinite}.search-sheet{padding:14px}.search-row{display:flex;gap:8px}.search-row input{margin:0}.empty{text-align:center;padding:50px 20px;color:var(--muted)}.progress-ring{--p:40;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;margin:auto;background:conic-gradient(var(--green) calc(var(--p)*1%),#26354a 0);position:relative}.progress-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#111c2d}.progress-ring b{position:relative;font-size:20px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.profile-item{padding:12px;border:1px solid var(--line);border-radius:14px;background:#101a29}.profile-item small,.profile-item b{display:block}.profile-item small{color:var(--muted);margin-bottom:4px}.danger{color:var(--red)}
@keyframes swordFloat{50%{transform:translateY(-3px) rotate(-8deg)}}@keyframes shine{0%,55%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}@keyframes slideIn{from{opacity:0;transform:translateX(16px)}}@keyframes clover{50%{transform:translateY(-8px) rotate(18deg)}}@keyframes playerIdle{0%,49%{background-position:0 0}50%,100%{background-position:-64px 0}}
@media(min-width:700px){main{padding-left:24px;padding-right:24px}.hero,.guide-hero{margin-left:-24px;margin-right:-24px}.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cards-grid .card{margin:0}.bottom-nav{max-width:620px;margin:auto}.hero{border-radius:0 0 24px 24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
.pixel-scene{height:136px;margin:-22px -22px 24px;position:relative;overflow:hidden;border-radius:21px 21px 12px 12px;background:linear-gradient(90deg,#07101ef2 0%,#0a1426a8 52%,#07101e33 100%),linear-gradient(0deg,#0d1726 0%,transparent 70%),url('images/townbg-sheet0.webp') center 32%/cover;image-rendering:pixelated;border-bottom:1px solid #ffc8573d}.pixel-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 40%,#ffc85728,transparent 30%);pointer-events:none}.scene-caption{position:absolute;z-index:2;left:22px;bottom:24px;max-width:55%;text-shadow:0 2px 8px #000}.scene-caption small,.scene-caption b{display:block}.scene-caption small{margin-bottom:5px;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase}.scene-caption b{color:#fff7dc;font-size:17px;line-height:1.15}.hero-player{position:absolute;z-index:1;left:auto;right:13%;bottom:4px;width:64px;height:64px;transform:scale(2.05);transform-origin:bottom center;background:url('images/player-sheet0.webp') 0 0/1024px 512px;image-rendering:pixelated;filter:drop-shadow(0 8px 8px #000b);animation:none}.floating-clover{position:absolute;z-index:3;right:8%;top:18px;display:grid;place-items:center;width:29px;height:29px;border:1px solid #ffc85755;border-radius:50%;background:#111d2ddd;color:var(--gold);font-size:15px;box-shadow:0 5px 16px #0008;animation:none}
.install-card{border-color:#ffc85766;background:linear-gradient(145deg,#243553,#121b2a)}.install-card .button{width:100%;margin-top:12px}.web-note{font-size:12px;color:var(--muted);margin-top:10px!important}
.install-button{margin-left:auto;margin-right:8px;border:1px solid #ffc85766;background:#ffc85718;color:var(--gold);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:850}.install-button.ready{background:var(--gold);color:#241804}
.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.resource-grid label{margin:8px 0}.calc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0 18px}.calc-strip span{padding:10px 6px;text-align:center;background:#101a29;border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:11px}.calc-strip b{display:block;color:var(--gold);font-size:15px}.score-badge{position:absolute;right:13px;top:13px;padding:4px 8px;border-radius:99px;background:#72d6a018;color:#8ce5b2;font-size:10px;font-weight:900}.plan-math{margin:10px 0 3px;padding:9px 10px;border-radius:10px;background:#091321;color:#8ecaff;font-size:12px;font-weight:750}.recommendation h3{padding-right:50px}
.why-panel{margin:10px 0;padding:12px;border-left:3px solid var(--green);border-radius:8px;background:#72d6a00d}.why-panel b{color:var(--green)}.why-panel p{margin-top:5px!important}.card-actions{display:flex;gap:7px;margin-top:11px}.card-actions .chip{font-size:12px}.explain{border-color:#72d6a066;color:#8ce5b2}.tips-list{display:grid;gap:8px}.tip{display:flex;gap:11px;align-items:flex-start;padding:12px;background:#101a29;border:1px solid var(--line);border-radius:14px}.tip span{flex:0 0 25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#ffc85720;color:var(--gold);font-weight:900}.tip p{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.45}