:root{color-scheme:dark;--bg:#0d1118;--panel:#171e29;--line:#2a3544;--text:#f5f1e8;--muted:#9eabba;--accent:#f2b84b;--danger:#ef6b5d;--ok:#76d18b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#1b2432 0,#0d1118 45%,#080b10 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);touch-action:manipulation;overscroll-behavior:none}body{display:flex;justify-content:center;min-height:100dvh}button,a{font:inherit}button{border:0;color:inherit}.app{width:min(100%,460px);min-height:100dvh;position:relative;overflow:hidden;background:linear-gradient(180deg,#101722 0,#0b1018 100%);box-shadow:0 0 60px #0008}.hidden{display:none!important}
.hero{min-height:100dvh;padding:calc(12vh + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(#0c1116cc,#0c1116e8),repeating-linear-gradient(90deg,transparent 0 58px,#ffffff05 59px 60px),linear-gradient(180deg,#29384b,#131a24 54%,#10151d)}.hero:before{content:"";width:220px;height:170px;position:absolute;top:29vh;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,transparent 0 8%,#090c10 8% 18%,transparent 18% 22%,#090c10 22% 78%,transparent 78% 82%,#090c10 82% 92%,transparent 92%);clip-path:polygon(8% 100%,8% 48%,18% 48%,18% 20%,32% 20%,32% 0,68% 0,68% 20%,82% 20%,82% 48%,92% 48%,92% 100%);opacity:.45;filter:drop-shadow(0 12px 20px #000)}.eyebrow{font-size:14px;letter-spacing:.22em;font-weight:800;color:var(--accent);margin-bottom:10px}h1{font-size:clamp(42px,12vw,62px);margin:0;letter-spacing:-.06em;line-height:.96;text-shadow:0 8px 30px #000}.tagline{font-size:18px;line-height:1.55;color:#d7dde5;margin:20px 0 22px;z-index:1}.tagline strong{color:#fff}.miniRules{display:grid;gap:8px;width:100%;max-width:330px;padding:16px 18px;border:1px solid #ffffff12;background:#0b1017c9;border-radius:18px;text-align:left;color:#cad2dc;font-size:14px;z-index:1;backdrop-filter:blur(6px)}.primary{margin-top:22px;width:100%;max-width:330px;border-radius:16px;padding:16px 18px;background:linear-gradient(180deg,#f7c45b,#e6a936);color:#1a1307;font-weight:900;font-size:17px;box-shadow:0 8px 24px #0007,inset 0 1px #fff8;cursor:pointer;transition:transform .08s ease}.primary:active{transform:translateY(2px) scale(.99)}.best{font-size:14px;letter-spacing:.18em;color:#77879a;margin-top:14px}
.game{min-height:100dvh;display:flex;flex-direction:column;background:#0d131b}.hud{height:62px;padding:calc(8px + env(safe-area-inset-top)) 18px 6px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;background:#0d1219;border-bottom:1px solid #1f2934}.hudItem{display:flex;flex-direction:column;line-height:1.05}.hudItem.center{text-align:center}.hudItem:last-child{text-align:right}.hudItem small{font-size:14px;letter-spacing:.14em;color:#8090a2;font-weight:800}.hudItem strong{font-size:19px;margin-top:4px}.gateBar{height:5px;background:#242d37}.gateBarFill{height:100%;width:100%;background:linear-gradient(90deg,#d44f49,#efb24a 52%,#67cf88);transform-origin:left center;transition:width .2s ease,background .2s ease}.battleWrap{position:relative;flex:1;min-height:0;background:#111923;overflow:hidden}#battle{display:block;width:100%;height:100%;min-height:450px;max-height:calc(100dvh - 155px);touch-action:none;cursor:crosshair}.callout{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.9);pointer-events:none;font-weight:1000;font-size:25px;letter-spacing:-.04em;text-shadow:0 3px 16px #000;color:#fff;opacity:0;white-space:nowrap}.callout.show{animation:callout .7s ease-out}@keyframes callout{0%{opacity:0;transform:translate(-50%,-45%) scale(.7)}20%{opacity:1;transform:translate(-50%,-55%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-90%) scale(.95)}}.waveBanner{position:absolute;left:50%;top:12%;transform:translateX(-50%);background:#0b0f15d9;border:1px solid #ffffff18;border-radius:999px;padding:8px 15px;font-size:14px;font-weight:900;letter-spacing:.13em;opacity:0;pointer-events:none}.waveBanner.show{animation:banner 1.35s ease}@keyframes banner{0%{opacity:0;transform:translate(-50%,-8px)}18%,72%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,6px)}}
.controls{height:88px;display:grid;grid-template-columns:116px 1fr;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#0c1118;border-top:1px solid #1e2935}.oilButton{border-radius:14px;background:#211a17;border:1px solid #5e3b27;display:flex;align-items:center;gap:8px;padding:9px 10px;text-align:left;cursor:pointer}.oilButton.ready{box-shadow:0 0 0 1px #d77a3d55 inset,0 0 24px #f0782b18}.oilButton:disabled{opacity:.5}.skillIcon{font-size:25px}.skillText{display:flex;flex-direction:column}.skillText strong{font-size:14px}.skillText small{font-size:14px;color:#d79a71;margin-top:3px}.cannonPanel{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 4px}.cannonTop{display:flex;justify-content:space-between;font-size:14px;font-weight:900}.cannonTop strong{color:var(--accent);letter-spacing:.05em}.reloadTrack{height:12px;background:#252d36;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 4px #000}.reloadFill{height:100%;width:100%;background:linear-gradient(90deg,#d99831,#f8cf70);transform-origin:left center}.cannonPanel small{font-size:14px;color:#8290a0}
.overlay{position:fixed;inset:0;z-index:20;background:#070a0edb;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(5px)}.panel{width:min(100%,400px);background:linear-gradient(180deg,#1b2430,#121923);border:1px solid #2b3948;border-radius:22px;padding:24px 18px 20px;box-shadow:0 22px 70px #000}.panel h2{margin:0 0 18px;font-size:24px;letter-spacing:-.04em}.cards{display:grid;gap:10px}.upgradeCard{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:16px;background:#111821;border:1px solid #2d3a48;cursor:pointer}.upgradeCard:active{transform:scale(.99)}.upgradeIcon{font-size:28px}.upgradeCard strong{display:block;font-size:15px}.upgradeCard small{display:block;color:#92a0af;font-size:14px;margin-top:4px;line-height:1.3}.upgradeLevel{font-size:14px;color:var(--accent);font-weight:800}.resultPanel{text-align:center}.resultStats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.resultStats div{background:#0d131b;border:1px solid #25313e;border-radius:14px;padding:13px}.resultStats small{display:block;color:#8190a2;font-size:14px}.resultStats strong{display:block;font-size:20px;margin-top:4px}.resultPanel p{color:#c5ced8;line-height:1.55;font-size:14px;min-height:44px}.homeLink{display:inline-block;color:#8191a4;margin-top:16px;text-decoration:none;font-size:14px}@media (max-height:690px){.hero{padding-top:8vh}.tagline{margin:13px 0}.miniRules{padding:12px 15px}.primary{margin-top:14px}.controls{height:80px}.hud{height:56px}}