@import"https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap";:root{font-family:Kanit,system-ui,sans-serif;color:#f8eccd;background:#102e37}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit}#game{position:absolute;inset:0}#game canvas{display:block}#ui{position:absolute;inset:0;pointer-events:none}#topbar{position:absolute;top:0;left:0;right:0;height:68px;background:linear-gradient(#092630df,#09263044);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 22px}.brand{font-size:25px;font-weight:700;color:#ffe3a4;text-shadow:0 2px 2px #000}.brand small{display:block;font-size:11px;letter-spacing:1px;color:#e6eee2;font-weight:300;margin-top:-9px}.brand:first-letter{color:#a6ecbe}#timer,#score{font-size:18px;font-weight:600;letter-spacing:1px}#shopBtn{pointer-events:auto;border:1px solid #cfad69;border-radius:12px;background:#264a48;padding:9px 17px;box-shadow:0 3px 14px #0008}#hud{position:absolute;bottom:17px;left:50%;transform:translate(-50%);width:min(690px,calc(100% - 200px));min-height:114px;display:flex;align-items:center;gap:16px;background:linear-gradient(125deg,#153b45ed,#11303cf2);border:2px solid #b8a26a;border-radius:18px;box-shadow:0 10px 25px #041923aa;pointer-events:auto;padding:9px 14px}.avatar{width:76px;height:86px;display:grid;place-items:center;background:#34585b;border:1px solid #d7bd83;border-radius:12px;flex-shrink:0;overflow:hidden}.avatar img{height:100%;width:100%;object-fit:contain}#stats{width:140px;min-width:108px}#heroName{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#level{font-size:12px;color:#e5c88b}.bar{height:10px;border-radius:6px;background:#0b2431;border:1px solid #40616b;margin:5px 0;overflow:hidden}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22894f,#7bea79);transition:width .1s}.bar.blue i{background:linear-gradient(90deg,#3287d8,#7ce5fb)}#statsText{font-size:11px;color:#beced1}#abilities{display:flex;justify-content:center;gap:7px;flex:1}.ability{position:relative;min-width:58px;max-width:88px;flex:1;background:linear-gradient(145deg,#355b62,#203b47);border:1px solid #98a29b;border-radius:10px;min-height:80px;padding:6px 4px;display:grid;justify-items:center;gap:0;overflow:hidden}.ability>span{font-size:28px}.ability b{position:absolute;top:4px;left:5px;font-size:10px;border-radius:4px;background:#06191b;padding:1px 5px}.ability small{font-size:10px;color:#fae5b6;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.cool{position:absolute;inset:0;background:#10212de0;display:none;place-items:center;font-size:23px;font-style:normal;color:#fff}.gold{font-size:18px;color:#ffe28b;white-space:nowrap;align-self:center;font-weight:700}#minimap{position:absolute;bottom:18px;left:18px;border:3px solid #b2a071;border-radius:12px;background:#1b4348;box-shadow:0 8px 20px #04191fbb;overflow:hidden}#mini{display:block;width:170px;height:125px}#notices{position:absolute;top:80px;left:50%;transform:translate(-50%);width:min(440px,85%);display:grid;gap:8px}.toast{background:#123740f0;border:1px solid #caad71;border-radius:12px;padding:8px 16px;box-shadow:0 5px 15px #0007;animation:toastin .2s ease;text-align:center;font-size:14px}@keyframes toastin{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}.mobile-control{position:absolute;right:18px;bottom:145px;pointer-events:auto;display:flex;gap:7px}.mobile-control button{width:51px;height:51px;border-radius:50%;background:#214854dd;border:1px solid #d3c08a;box-shadow:0 5px 16px #0006;font-size:22px}.modal{position:absolute;inset:0;background:radial-gradient(circle at 48% 30%,#4a756082,#08191ce8);z-index:50;display:flex;align-items:center;justify-content:center;padding:14px;overflow-y:auto}.hidden{display:none!important}.panel{position:relative;width:min(850px,100%);background:linear-gradient(140deg,#244e54f8,#163443f8);border:2px solid #bfab75;border-radius:24px;padding:28px 33px;box-shadow:0 20px 70px #031419db;text-align:center}.eyebrow{font-size:12px;letter-spacing:5px;color:#f3ca82}.panel h1{font-size:clamp(36px,6vw,66px);color:#f4d999;margin:0;line-height:1.3;text-shadow:0 4px #173138}.panel h1 em{font-style:normal;font-size:.53em;display:block;color:#b6f0d1;margin-top:-12px}.panel p{color:#cfdee0;font-size:15px;margin:8px auto 20px}#heroGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.hero-card{position:relative;background:linear-gradient(#376574,#1f4246);border:2px solid var(--accent);border-radius:17px;padding:6px 5px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .15s;min-height:245px}.hero-card:hover{transform:translateY(-5px);box-shadow:0 0 18px color-mix(in srgb,var(--accent),transparent 60%)}.hero-card img{width:100%;max-height:165px;object-fit:contain;filter:drop-shadow(0 7px 7px #082328aa)}.hero-card b{font-size:16px;display:block}.hero-card small{color:#f0d6ae;font-size:12px}.play-pill{background:#e9cb86;color:#18393b;padding:3px 24px;border-radius:40px;font-size:12px;font-weight:700;margin-top:auto}.foot{padding:18px 0 0;color:#b8cdd0;font-size:12px}#shop .panel,#finish .panel{width:min(590px,95%)}#closeShop{position:absolute;right:15px;top:12px;background:transparent;border:none;font-size:22px}.panel h2{margin:0 0 24px;color:#ffe2a4}#shopItems{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.item{display:grid;justify-items:center;align-content:center;gap:3px;padding:12px 3px;border:1px solid #7fab9a;border-radius:13px;background:#2a5260}.item span{font-size:27px}.item small{font-size:12px;color:#f2d798}#restart{border:none;padding:14px 35px;border-radius:14px;background:#e7c47e;color:#1e3a3e;font-weight:700;font-size:18px}@media(max-width:1024px){#topbar{height:48px;padding:3px 8px;gap:5px}.brand{font-size:16px}.brand small{font-size:9px}.brand small{margin-top:-7px}#timer,#score{font-size:12px}#shopBtn{padding:5px;font-size:11px}#hud{bottom:4px;width:calc(100% - 10px);min-height:65px;padding:3px 5px;gap:5px;border-radius:10px}.avatar{width:45px;height:57px;border-radius:6px}#stats{width:80px;min-width:75px}#heroName{font-size:10px}#statsText,#level{font-size:9px}.bar{height:6px;margin:3px 0}.ability{min-width:36px;min-height:56px;max-width:55px;padding:2px}.ability>span{font-size:19px}.ability small{font-size:7px}.ability b{font-size:8px;padding:1px 3px}.gold{font-size:12px}#minimap{left:5px;bottom:75px;border-width:2px}#mini{width:100px;height:75px}.mobile-control{right:6px;bottom:75px}.mobile-control button{width:40px;height:40px;font-size:17px}.panel{padding:13px}.hero-card{min-height:130px;padding:2px}.hero-card img{height:87px}.hero-card b{font-size:10px}.hero-card small{font-size:9px}.play-pill{font-size:9px;padding:1px 12px}#heroGrid{gap:5px}.foot{font-size:10px;padding-top:6px}.panel p{font-size:12px;margin:4px auto 9px}#notices{top:52px}}@media(max-width:480px)and (orientation:portrait){#heroGrid{grid-template-columns:repeat(2,1fr)}.hero-card{min-height:145px}.hero-card img{height:90px}#hud{width:calc(100% - 8px)}#hudPortrait{display:none}.ability{min-width:30px}.gold{font-size:10px}#minimap{bottom:86px}}#viewControls{display:flex;gap:5px;pointer-events:auto;align-items:center}#viewControls button{background:#1b4a53e8;border:1px solid #baa779;border-radius:9px;padding:6px 9px;font-size:18px;min-height:36px;box-shadow:0 3px 14px #061a1c55}#viewControls button span{font-size:11px;margin-left:3px}.tutorial-panel{max-width:670px}.tutorial-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left;margin:12px auto 18px}.tutorial-steps>div{display:grid;grid-template-columns:30px 1fr;gap:0 8px;align-items:center;background:#183740;border:1px solid #587e78;border-radius:11px;padding:9px}.tutorial-steps b{font-size:14px}.tutorial-steps small{grid-column:2;color:#c9e5df;font-size:12px}.close-tutorial{position:absolute;right:12px;top:10px;border:none;background:#2d565b;padding:3px 10px;border-radius:7px;font-size:21px}#gotIt{border:none;font-size:17px;padding:9px 35px;display:inline-block}#rotationGuard{display:none}@media(max-width:950px){#viewControls button span{display:none}#viewControls button{min-height:33px;padding:3px 7px;font-size:15px}#topbar{gap:4px}#heroGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-height:560px){#selection .panel{padding:8px 15px}#selection .panel h1{font-size:28px}#selection .panel h1 em{margin-top:-7px}#selection .panel p{margin:3px auto 6px;font-size:11px}#heroGrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}#heroGrid .hero-card{min-height:112px;padding:2px}#heroGrid .hero-card img{max-height:60px;height:60px}#heroGrid .hero-card b{font-size:10px}#heroGrid .hero-card small{font-size:9px}#heroGrid .play-pill{padding:1px 10px;font-size:9px}#selection .foot{font-size:10px;padding:4px 0 0}}@media(max-width:650px)and (orientation:portrait){#rotationGuard{position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#102c39f7;color:#f8e6ad;padding:20px}#rotationGuard .rotate-emoji{font-size:55px}#rotationGuard h2{font-size:22px;margin:8px auto}#rotationGuard p{color:#bfe0d5}#rotationGuard button{background:#e9d19b;border:none;padding:10px 14px;border-radius:10px;color:#193a3a}#selection:not(.hidden)~#rotationGuard{display:none}}@media(max-width:440px){.tutorial-steps{grid-template-columns:1fr}}@media(min-width:651px)and (max-width:1024px)and (orientation:landscape){#viewControls button{min-width:44px;min-height:44px;padding:3px}#topbar{min-height:49px;height:49px}.ability{min-width:48px;max-width:62px;min-height:60px}.mobile-control button{width:48px;height:48px}#notices{left:auto;right:8px;top:56px;transform:none;width:210px;gap:4px}.toast{font-size:11px;padding:5px 8px;opacity:.9;line-height:1.2}}@media(max-width:650px)and (orientation:portrait){#topbar{height:52px;min-height:52px;padding:2px 4px;gap:3px}#score{display:none}#viewControls{gap:2px;flex-shrink:0}#viewControls button{width:44px;min-width:44px;height:44px;min-height:44px;padding:2px;font-size:19px}#shopBtn{min-height:44px;padding:5px 6px}#rotationGuard button{min-height:48px;padding:10px 18px}}.gold .lh-count{display:block;text-align:right;font-size:11px;color:#c8efd5;font-weight:600;letter-spacing:.01em}@media(max-width:1024px){.gold .lh-count{font-size:9px}}