:root{
  --gold:#e8c06a;--red:#e05b58;--blue:#68a8ff;--muted:#9aa8bb;--txt:#eef3f8;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(circle at 50% -12%,#1f2938 0,#0a0e15 34%,#05070b 75%);color:var(--txt);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;overflow-x:hidden}
button{font:inherit;color:inherit}
.wrap{max-width:560px;margin:auto;padding:10px 10px 28px}
.hidden{display:none!important}
.brand{font-family:Georgia,serif;font-weight:900;letter-spacing:1.4px;font-size:28px}
.brand span{color:var(--gold)}
.sub{color:var(--muted);font-size:11px;line-height:1.4}
.panel{border:1px solid #2d394d;background:linear-gradient(145deg,#111824,#0b1018);border-radius:16px;padding:12px;margin-top:10px}
.menu p{color:var(--muted);line-height:1.55;font-size:13px}
.menuBtn,.action{width:100%;min-height:48px;border:1px solid #42516b;border-radius:12px;background:#172131;font-weight:900;margin-top:8px;cursor:pointer}
.menuBtn.primary{background:linear-gradient(#303c50,#1a2331);border-color:#856d3d;color:#f2d38c}
.metaGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}
.metaCard{border:1px solid #344158;background:#0d141e;border-radius:11px;padding:9px;text-align:center;font-size:10px;color:var(--muted)}
.metaCard b{display:block;color:var(--txt);font-size:16px;margin-top:3px}
.upgradeGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:8px}
.upBtn{min-height:74px;border:1px solid #39475f;background:#121b27;border-radius:11px;padding:7px;font-size:10px;cursor:pointer}
.upBtn b{display:block;font-size:12px;color:#f2d28d}.upBtn:disabled{opacity:.42}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.topStats{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pill{border:1px solid #37455d;background:#0d141e;border-radius:10px;padding:7px 8px;font-size:10px;white-space:nowrap}
.arenaShell{position:relative;border:1px solid #344158;border-radius:18px;overflow:hidden;background:#070b11}
canvas{width:100%;display:block;touch-action:manipulation;background:radial-gradient(circle at 50% 50%,#142131 0,#0a1018 43%,#070a0f 76%)}
.hudOverlay{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.waveBox{background:#070b10cc;border:1px solid #3a4659;border-radius:10px;padding:7px 9px}
.waveBox b{font-family:Georgia,serif;color:var(--gold);font-size:18px}.waveBox small{display:block;color:#9ca9bb;font-size:9px}
.speedBtn,.pauseBtn,.soundBtn{pointer-events:auto;width:44px;height:44px;border:1px solid #47556e;border-radius:11px;background:#0b111acc;font-weight:900;cursor:pointer}
.soundBtn.off{opacity:.45}
.banner{position:absolute;left:0;right:0;top:32%;text-align:center;font-family:Georgia,serif;font-weight:900;font-size:38px;letter-spacing:2px;color:var(--gold);text-shadow:0 0 24px #e8c06aaa,0 3px 0 #000;pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .22s ease-out, transform .4s cubic-bezier(.2,1.7,.5,1)}
.banner.show{opacity:1;transform:scale(1)}
.banner .bSub{font-family:system-ui;font-weight:700;font-size:13px;letter-spacing:3px;color:#dfe9f5;margin-top:6px;text-shadow:0 0 10px #000}
.comboHud{position:absolute;right:12px;top:78px;font-family:Georgia,serif;font-weight:900;font-size:28px;color:#ffd479;text-shadow:0 0 16px #ffb04099,0 2px 0 #000;pointer-events:none;opacity:0;transform:scale(.8);transition:.12s}
.comboHud.on{opacity:1;transform:scale(1)}
.comboHud small{display:block;font-family:system-ui;font-size:9px;letter-spacing:2px;color:#f0d9a6;text-align:right}
.vignette{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;box-shadow:inset 0 0 90px 30px #a02020}
.bossBar{position:absolute;left:10px;right:10px;top:62px;background:#0a0f16dd;border:1px solid #6b3a3a;border-radius:10px;padding:6px 8px;pointer-events:none;box-shadow:0 0 24px #b9434333}
.bossBar .bName{display:flex;justify-content:space-between;font-size:10px;font-weight:900;color:#f0b0a0;letter-spacing:.5px}
.bossBar .bTrack{height:8px;background:#2a1a1c;border-radius:5px;overflow:hidden;margin-top:4px;border:1px solid #4a2a2a}
.bossBar .bTrack i{display:block;height:100%;background:linear-gradient(90deg,#8e2c2c,#e05b58,#ffa07a);transition:width .1s}
.bottomHud{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px;background:#0b1119;border-top:1px solid #293448}
.barLabel{display:flex;justify-content:space-between;font-size:9px;color:#adb8c7;margin-bottom:3px}
.bar{height:11px;border:1px solid #3c485b;border-radius:8px;overflow:hidden;background:#252d38}
.bar i{display:block;height:100%;transition:.12s width}
.hp i{background:linear-gradient(90deg,#b64042,#ec6e62)}.shield i{background:linear-gradient(90deg,#317fc6,#78b9ff)}.heat i{background:linear-gradient(90deg,#d87539,#f4c55f)}.pulse i{background:linear-gradient(90deg,#5f61ce,#b17ee5)}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px;background:#0b1119;border-top:1px solid #293448}
.skillBtn{min-height:56px;border:1px solid #465672;background:#152031;border-radius:11px;text-align:left;padding:8px;cursor:pointer}
.skillBtn b{display:block;font-size:13px}.skillBtn small{display:block;font-size:9px;color:#9eacc0;margin-top:2px}
.skillBtn.ready{border-color:#9f8247;box-shadow:inset 0 0 15px #e3b65d22}.skillBtn.active{border-color:#6faee8;box-shadow:inset 0 0 18px #68a8ff2b}.skillBtn:disabled{opacity:.5}
.infoStrip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:7px;background:#0a1017;border-top:1px solid #293448}
.infoStrip div{text-align:center;font-size:8px;color:#8f9db0}.infoStrip b{display:block;font-size:11px;color:#e8edf3;margin-top:2px}
.log{min-height:40px;padding:8px 10px;font-size:10px;line-height:1.4;color:#b9c4d2;background:#090e15;border-top:1px solid #293448}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:9px;border:1px solid #344157;background:#111923;border-radius:8px;padding:5px 7px}
.overlay{position:absolute;inset:0;background:#05080def;display:none;z-index:10;padding:10px;overflow:auto}
.overlay.on{display:flex;align-items:flex-start}
.modal{width:100%;margin:auto;background:#111925;border:1px solid #48566d;border-radius:15px;padding:12px}
.modal h2{font-family:Georgia,serif;margin:0 0 4px}.modal p{font-size:11px;color:#a8b4c4;line-height:1.5}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.card{min-height:112px;border:1px solid #46536a;background:linear-gradient(145deg,#172231,#111923);border-radius:11px;padding:10px;text-align:left;cursor:pointer}
.card b{display:block;font-size:13px}.card small{display:block;color:#a8b4c4;line-height:1.35;font-size:10px;margin-top:5px}.card em{font-style:normal;font-size:9px;font-weight:900}
.card.common em{color:#d7dde6}.card.rare{border-color:#397c9d}.card.rare em{color:#69c8e7}.card.epic{border-color:#7650a4}.card.epic em{color:#bc8ce8}.card.legend{border-color:#9b793e;box-shadow:inset 0 0 18px #e9b95322}.card.legend em{color:#f1ca77}
.reroll{width:100%;min-height:44px;margin-top:8px;border:1px solid #665735;background:#1a1c1f;border-radius:10px;color:#efd08a;font-weight:900;cursor:pointer}
.statsModal{font-size:11px;color:#b4bfcd;line-height:1.7}
.statsModal b{color:#eef2f6}
.bossReward{border:1px solid #845d36;background:#1c1711;border-radius:10px;padding:8px;color:#f1cf87;font-size:10px;margin-bottom:7px}
.workshop{margin-top:8px;border:1px solid #314159;background:#0c131d;border-radius:13px;padding:8px}
.workshopHead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#94a4b8;margin-bottom:6px}
.workshopHead b{font-size:11px;color:#e7edf5}
.workshopGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.shopBtn{min-height:50px;border:1px solid #3c4c64;border-radius:10px;background:#121c29;padding:6px 5px;font-size:9px;cursor:pointer;line-height:1.25}
.shopBtn b{display:block;color:#f0d08b;font-size:10px;margin-bottom:2px}.shopBtn:disabled{opacity:.38}
@media(max-width:370px){.cards{grid-template-columns:1fr}.brand{font-size:24px}.infoStrip{grid-template-columns:repeat(3,1fr)}.banner{font-size:26px}}


/* PlayMarket mobile finishing layer */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#090e15}
body{min-height:100dvh;overscroll-behavior-y:contain;padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #75c7ff;outline-offset:2px}
.storage-warning{position:fixed;z-index:9999;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#713d0c;color:#fff;text-align:center;font-size:13px}
@media(max-width:600px){
  button,.btn,.menuBtn,input,select{min-height:44px}
  [class*="modal"],[class~="panel"]{max-width:100%}
}
@media(max-height:500px) and (orientation:landscape){
  [class*="modal"]{max-height:94dvh;overflow:auto;overscroll-behavior:contain}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.menu{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.modal{max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain}