:root{--bg:#08111f;--panel:#101d31;--line:#223d61;--text:#ecf7ff;--muted:#8ea5bd;--accent:#7ef0ff;--accent2:#ffd45e;--danger:#ff627e;--good:#77f49b}
*{box-sizing:border-box} html,body{margin:0;height:100%;background:radial-gradient(circle at 50% 0,#13294a 0,#08111f 55%,#050b14 100%);color:var(--text);font-family:Inter,Pretendard,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}
button{font:inherit} .app{height:100%;display:flex;flex-direction:column}.topbar{height:58px;display:flex;align-items:center;gap:12px;padding:0 16px;background:rgba(5,11,20,.8);backdrop-filter:blur(10px);border-bottom:1px solid rgba(126,240,255,.14);z-index:10}
.brand{font-weight:900;letter-spacing:.02em}.brand b{color:var(--accent)}.chip{font-size:12px;color:var(--muted);padding:6px 9px;border:1px solid #1f3551;border-radius:999px}.spacer{flex:1}.topbtn{border:1px solid #284969;background:#12243a;color:#dff7ff;border-radius:10px;padding:8px 11px;cursor:pointer}
.stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:10px}.frame{position:relative;width:min(100%,1100px);height:min(100%,760px);border:1px solid rgba(126,240,255,.2);border-radius:20px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.45);background:#07111d}
canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;left:14px;right:14px;top:12px;display:grid;grid-template-columns:1fr auto;gap:10px;pointer-events:none}.hudcard{background:rgba(5,11,20,.7);border:1px solid rgba(126,240,255,.14);border-radius:14px;padding:10px 12px;backdrop-filter:blur(8px)}
.row{display:flex;align-items:center;gap:8px}.label{font-size:12px;color:var(--muted)}.value{font-weight:800}.bar{height:9px;background:#0b1522;border-radius:999px;overflow:hidden;border:1px solid #1d324d}.fill{height:100%;width:50%;background:linear-gradient(90deg,#48d982,#a0ffbf)}.fill.xp{background:linear-gradient(90deg,#56a4ff,#7ef0ff)}
.stats{display:flex;gap:12px;align-items:center}.stats span{font-weight:800}.bossbar{position:absolute;left:50%;transform:translateX(-50%);top:84px;width:min(620px,70%);display:none;pointer-events:none}.bossbar .bar{height:13px;background:#2a0d18;border-color:#69233a}.bossbar .fill{background:linear-gradient(90deg,#ff405f,#ff9b59)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(3,8,14,.68);backdrop-filter:blur(6px);z-index:20}.panel{width:min(700px,92%);max-height:88%;overflow:auto;background:linear-gradient(180deg,#13233a,#0d1828);border:1px solid #2b4d71;border-radius:22px;padding:24px;box-shadow:0 28px 90px rgba(0,0,0,.55)}
.hero h1{margin:0 0 6px;font-size:clamp(32px,6vw,58px);line-height:1}.hero h1 b{color:var(--accent)}.hero p{color:#a8bed1;line-height:1.6;margin:10px 0 18px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.feature{border:1px solid #274461;border-radius:14px;padding:12px;background:#0d1a2b}.feature strong{display:block;margin-bottom:4px}.feature small{color:#849bb2}
.cta{width:100%;border:0;border-radius:14px;padding:14px 18px;font-weight:900;cursor:pointer;background:linear-gradient(90deg,#6ae5ff,#8fffa8);color:#061019;box-shadow:0 10px 30px rgba(126,240,255,.2)}.sub{display:flex;gap:10px;margin-top:10px}.sub button{flex:1;border:1px solid #284866;background:#112238;color:#dff7ff;border-radius:12px;padding:11px;cursor:pointer}
.level-title{margin:0 0 14px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upgrade{border:1px solid #2a4d72;background:#102038;color:#eaf7ff;border-radius:16px;padding:16px;text-align:left;cursor:pointer;transition:.15s transform,.15s border-color}.upgrade:hover{transform:translateY(-2px);border-color:var(--accent)}.upgrade .ico{font-size:30px}.upgrade h3{margin:10px 0 6px}.upgrade p{margin:0;color:#9bb2c8;line-height:1.45;font-size:13px}
.joystick{position:absolute;left:24px;bottom:24px;width:126px;height:126px;border-radius:50%;background:rgba(10,25,41,.45);border:1px solid rgba(126,240,255,.18);display:none;touch-action:none}.stick{position:absolute;width:56px;height:56px;border-radius:50%;left:35px;top:35px;background:rgba(126,240,255,.35);border:1px solid rgba(126,240,255,.65);box-shadow:0 0 25px rgba(126,240,255,.18)}
.mobile-help{position:absolute;right:22px;bottom:24px;display:none;background:rgba(8,17,31,.6);border:1px solid #2b4864;color:#9db4c8;border-radius:999px;padding:8px 11px;font-size:12px;pointer-events:none}
.toast{position:absolute;left:50%;top:130px;transform:translateX(-50%);background:rgba(8,17,31,.88);border:1px solid #2d5277;border-radius:999px;padding:9px 14px;font-weight:800;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(4px)}
.footer-note{position:absolute;right:14px;bottom:12px;color:#6e8398;font-size:11px;pointer-events:none}
@media(max-width:720px){.topbar{height:50px;padding:0 10px}.chip{display:none}.stage{padding:0}.frame{width:100%;height:100%;border:0;border-radius:0}.hud{left:8px;right:8px;top:8px}.hudcard{padding:8px 9px}.stats{gap:8px;font-size:13px}.features,.cards{grid-template-columns:1fr}.panel{padding:18px}.joystick,.mobile-help{display:block}.footer-note{display:none}.bossbar{top:76px;width:75%}}
html,body{min-height:680px}
.app{min-height:680px;height:100vh}
.platform-note{line-height:1.55}
.cta:disabled{opacity:.55;cursor:wait;filter:saturate(.55)}
body.is-host-fullscreen .app{min-height:100vh}
@media(max-width:720px){html,body,.app{min-height:680px}}


.weapons{grid-column:1/-1;font-size:11px;color:#91a8be;border-top:1px solid rgba(126,240,255,.12);padding-top:6px;margin-top:2px}.weapons span{color:#d9f8ff;font-weight:800}.rarity-label{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.03em;margin-bottom:8px;background:#1d3147;color:#c4d5e5}.upgrade.rarity-common{border-color:#39536c}.upgrade.rarity-rare{border-color:#4a9cff;box-shadow:inset 0 0 24px rgba(74,156,255,.05)}.upgrade.rarity-rare .rarity-label{background:#153c6e;color:#8ec7ff}.upgrade.rarity-epic{border-color:#b16dff;box-shadow:inset 0 0 26px rgba(177,109,255,.07)}.upgrade.rarity-epic .rarity-label{background:#48236e;color:#d5a9ff}.upgrade.rarity-legendary{border-color:#ffd260;box-shadow:0 0 24px rgba(255,210,96,.12),inset 0 0 30px rgba(255,210,96,.08)}.upgrade.rarity-legendary .rarity-label{background:#644b12;color:#ffe89a}.chest-title{font-size:13px;font-weight:900;color:#ffd968;letter-spacing:.08em;margin-bottom:8px}.upgrade:active{transform:translateY(1px)}
@media(max-width:720px){.hud{grid-template-columns:minmax(0,1fr) auto}.stats{max-width:170px;flex-wrap:wrap}.weapons{width:100%;font-size:10px}.cards{gap:8px}.upgrade{padding:13px}.upgrade .ico{font-size:26px}.upgrade h3{font-size:15px;margin:7px 0 4px}.upgrade p{font-size:12px}}


/* v1.1.2 mobile landscape + fullscreen */
.topbtn{white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rotate-hint{display:none;position:absolute;left:50%;bottom:82px;transform:translateX(-50%);z-index:8;max-width:88%;padding:7px 10px;border:1px solid rgba(126,240,255,.22);border-radius:999px;background:rgba(4,12,22,.78);color:#b8d3e8;font-size:11px;font-weight:750;text-align:center;pointer-events:none;backdrop-filter:blur(7px)}
body.is-host-fullscreen,body.is-native-fullscreen{height:100dvh;min-height:0;overflow:hidden}
body.is-host-fullscreen .app,body.is-native-fullscreen .app{height:100dvh;min-height:0}
body.is-host-fullscreen .stage,body.is-native-fullscreen .stage{padding:0;min-height:0}
body.is-host-fullscreen .frame,body.is-native-fullscreen .frame{width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0}
body.is-host-fullscreen .topbar,body.is-native-fullscreen .topbar{flex:0 0 auto}
@media (pointer:coarse) and (orientation:portrait) and (max-width:720px){
  .rotate-hint{display:block}
  .topbtn{padding:7px 8px;font-size:11px}
}
@media (pointer:coarse) and (orientation:landscape), (max-height:560px) and (orientation:landscape){
  html,body,.app{min-height:0!important;height:100dvh!important}
  body{overscroll-behavior:none}
  .topbar{height:42px;min-height:42px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));gap:6px}
  .brand{font-size:13px}.chip{display:none}.topbtn{padding:5px 7px;border-radius:8px;font-size:10px;min-height:30px}
  .stage{padding:0;min-height:0}
  .frame{width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0}
  .hud{left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));top:6px;grid-template-columns:minmax(210px,29vw) minmax(0,1fr);gap:7px}
  .hudcard{padding:6px 8px;border-radius:10px}.hud .row{gap:5px}.hud .label{font-size:10px}.hud .value{font-size:12px}.hud .bar{height:7px}
  .stats{justify-self:end;max-width:none;flex-wrap:nowrap;gap:7px;font-size:11px}.stats>div{white-space:nowrap}.weapons{display:none}
  .bossbar{top:50px;width:min(480px,48%)}.bossbar .bar{height:10px}.bossbar .row{margin-bottom:2px!important}.bossbar .value{font-size:11px}
  .toast{top:56px;font-size:11px;padding:7px 11px}
  .joystick{display:block;width:104px;height:104px;left:calc(max(10px,env(safe-area-inset-left)) + 2px);bottom:calc(max(10px,env(safe-area-inset-bottom)) + 2px)}
  .stick{width:46px;height:46px;left:29px;top:29px}
  .mobile-help,.rotate-hint,.footer-note{display:none!important}
  .panel{width:min(760px,94%);max-height:94%;padding:14px;border-radius:16px}
  .hero h1{font-size:clamp(27px,7vh,38px);margin-bottom:3px}.hero p{font-size:11px;line-height:1.35;margin:5px 0 8px}
  .features{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px;margin:8px 0}.feature{padding:8px;border-radius:10px}.feature strong{font-size:12px}.feature small{font-size:9px}
  .cta{padding:9px 13px;border-radius:10px;font-size:12px}.sub{margin-top:6px}.sub button{padding:7px;font-size:11px}
  .platform-note{display:none}.level-title{font-size:16px;margin-bottom:8px}.chest-title{font-size:11px;margin-bottom:4px}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px}.upgrade{min-width:0;padding:9px;border-radius:11px}.upgrade .ico{font-size:20px}.upgrade h3{font-size:12px;margin:4px 0 3px}.upgrade p{font-size:10px;line-height:1.3}.rarity-label{font-size:8px;padding:2px 5px;margin-bottom:3px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:410px){
  .topbar{height:36px;min-height:36px}.brand{display:none}.topbtn{min-height:27px;padding:4px 6px;font-size:9px}
  .hud{top:4px;grid-template-columns:minmax(190px,31vw) 1fr}.hudcard{padding:4px 6px}.hud .bar{height:6px}.stats{font-size:10px}
  .bossbar{top:42px}.toast{top:45px}.joystick{width:92px;height:92px}.stick{width:40px;height:40px;left:26px;top:26px}
  .panel{padding:10px;max-height:96%}.hero p{display:none}.features{margin:5px 0}.feature{padding:6px}.feature small{display:none}.cta{padding:8px}.sub{display:none}
  .upgrade{padding:7px}.upgrade p{font-size:9px}.upgrade .ico{font-size:18px}
}


/* v1.1.3 true immersive mobile landscape
   The in-game controls float over the canvas instead of consuming vertical layout space. */
@media (pointer:coarse) and (orientation:landscape), (max-height:560px) and (orientation:landscape){
  html,body,.app{width:100%;height:100dvh!important;min-height:0!important}
  .app{position:relative;display:block!important;overflow:hidden}
  .stage{position:absolute!important;inset:0!important;width:100%!important;height:100dvh!important;min-height:0!important;padding:0!important;display:block!important}
  .frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important}
  .topbar{position:absolute!important;z-index:45!important;top:max(6px,env(safe-area-inset-top))!important;right:max(7px,env(safe-area-inset-right))!important;left:auto!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;gap:5px!important;background:transparent!important;border:0!important;backdrop-filter:none!important;pointer-events:none!important}
  .topbar .brand,.topbar .chip,.topbar .spacer{display:none!important}
  .topbar .topbtn{pointer-events:auto!important;min-height:30px!important;padding:5px 8px!important;border-radius:9px!important;background:rgba(8,24,40,.78)!important;border-color:rgba(83,177,226,.42)!important;box-shadow:0 4px 18px rgba(0,0,0,.20)!important;backdrop-filter:blur(7px)!important;font-size:10px!important}
  .hud{top:max(6px,env(safe-area-inset-top))!important;left:max(7px,env(safe-area-inset-left))!important;right:max(7px,env(safe-area-inset-right))!important;grid-template-columns:minmax(205px,30vw) minmax(130px,1fr)!important;gap:7px!important}
  .hud .stats{margin-top:36px!important;justify-self:end!important}
  .bossbar{top:max(48px,calc(env(safe-area-inset-top) + 44px))!important}
  .toast{top:max(52px,calc(env(safe-area-inset-top) + 48px))!important}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:410px){
  .topbar{top:max(4px,env(safe-area-inset-top))!important;right:max(5px,env(safe-area-inset-right))!important;gap:4px!important}
  .topbar .topbtn{min-height:27px!important;padding:4px 6px!important;font-size:9px!important}
  .hud{top:max(4px,env(safe-area-inset-top))!important;grid-template-columns:minmax(185px,30vw) minmax(120px,1fr)!important}
  .hud .stats{margin-top:30px!important}
  .bossbar{top:max(39px,calc(env(safe-area-inset-top) + 35px))!important}
  .toast{top:max(42px,calc(env(safe-area-inset-top) + 38px))!important}
}


/* v1.1.4 mobile landscape safe gutters + calmer aspect ratio */
@media (pointer:coarse) and (orientation:landscape), (max-height:560px) and (orientation:landscape){
  html,body,.app{width:100dvw!important;height:100dvh!important;background:#02070d!important}
  .stage{position:absolute!important;inset:0!important;width:100dvw!important;height:100dvh!important;padding:0!important;display:block!important}
  .frame{
    position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    width:min(calc(100dvw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 12px) * 1.92))!important;
    height:calc(100dvh - 12px)!important;max-width:none!important;max-height:none!important;
    border:1px solid rgba(126,240,255,.16)!important;border-radius:14px!important;overflow:hidden!important;
    box-shadow:0 18px 55px rgba(0,0,0,.42)!important
  }
  .topbar{top:8px!important;right:8px!important;gap:4px!important}
  .topbar .topbtn{min-height:27px!important;padding:4px 7px!important;font-size:9px!important;border-radius:8px!important}
  .hud{top:8px!important;left:9px!important;right:9px!important;grid-template-columns:minmax(175px,28%) minmax(120px,1fr)!important;gap:6px!important}
  .hudcard{padding:5px 7px!important;border-radius:9px!important}.hud .label{font-size:9px!important}.hud .value{font-size:11px!important}.hud .bar{height:6px!important}
  .hud .stats{margin-top:31px!important;font-size:10px!important;gap:6px!important}
  .joystick{width:88px!important;height:88px!important;left:12px!important;bottom:12px!important}.stick{width:38px!important;height:38px!important;left:24px!important;top:24px!important}
  .bossbar{top:44px!important;width:min(420px,46%)!important}.toast{top:48px!important}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:410px){
  .frame{width:min(calc(100dvw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 10px) * 1.92))!important;height:calc(100dvh - 10px)!important;border-radius:12px!important}
  .topbar{top:6px!important;right:6px!important}.topbar .topbtn{min-height:24px!important;padding:3px 5px!important;font-size:8px!important}
  .hud{top:6px!important;left:7px!important;right:7px!important;grid-template-columns:minmax(160px,27%) minmax(110px,1fr)!important}.hud .stats{margin-top:27px!important;font-size:9px!important}
  .joystick{width:80px!important;height:80px!important;left:10px!important;bottom:10px!important}.stick{width:34px!important;height:34px!important;left:22px!important;top:22px!important}
  .bossbar{top:38px!important}.toast{top:41px!important}
}


/* v1.1.5 game-frame-only fullscreen
   Native fullscreen targets #frame itself, so the parent site's header/play toolbar is never part of the fullscreen tree. */
.frame-actions{display:none;position:absolute;z-index:60;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));gap:5px;align-items:center;pointer-events:auto}
.frame-action-btn{min-height:30px;padding:5px 8px;border:1px solid rgba(126,240,255,.34);border-radius:9px;background:rgba(5,17,29,.82);color:#e7fbff;font-size:10px;font-weight:800;box-shadow:0 5px 20px rgba(0,0,0,.28);backdrop-filter:blur(8px);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.is-native-fullscreen .frame-actions{display:flex}
body.is-native-fullscreen .topbar{display:none!important}
body.is-native-fullscreen .stage{position:fixed!important;inset:0!important;width:100dvw!important;height:100dvh!important;padding:0!important;background:#02070d!important}
body.is-native-fullscreen .frame,
.frame:fullscreen,
.frame:-webkit-full-screen{position:fixed!important;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;transform:none!important;width:100dvw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;background:#02070d!important;box-shadow:none!important;overflow:hidden!important}
body.is-native-fullscreen .hud{top:max(8px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important;padding-right:270px!important}
body.is-native-fullscreen .bossbar{top:max(48px,calc(env(safe-area-inset-top) + 42px))!important}
body.is-native-fullscreen .toast{top:max(52px,calc(env(safe-area-inset-top) + 46px))!important}
body.is-native-fullscreen .joystick{left:max(12px,env(safe-area-inset-left))!important;bottom:max(12px,env(safe-area-inset-bottom))!important}
@media (max-width:780px),(max-height:520px){
 body.is-native-fullscreen .hud{padding-right:225px!important}
 .frame-action-btn{min-height:27px;padding:4px 6px;font-size:9px}
}
@media (max-width:640px),(max-height:390px){
 body.is-native-fullscreen .hud{padding-right:190px!important}
 .frame-actions{top:max(5px,env(safe-area-inset-top));right:max(5px,env(safe-area-inset-right));gap:3px}
 .frame-action-btn{min-height:24px;padding:3px 5px;font-size:8px}
}