*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05070e;color:#f6f8ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit;color:inherit}.hide{display:none!important}.glass{border:1px solid #31405d;background:linear-gradient(180deg,rgba(20,29,48,.96),rgba(8,13,23,.96));box-shadow:0 18px 55px #0008}.small{font-size:12px;color:#9da9c3}
.menu,.game{height:100vh;padding:10px;background:radial-gradient(circle at 75% 6%,#5b40ff36,transparent 31%),radial-gradient(circle at 45% 58%,#23c8ff1a,transparent 37%),linear-gradient(135deg,#05070e,#101423)}.menu{display:grid;grid-template-columns:260px 1fr;gap:12px}.side{border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0}.logoBox{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center}.logoBox h2,.logoBox p{margin:0}.crest{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#37236d,#10182a);border:1px solid #7c65ff;font-size:28px}.nav{display:grid;gap:8px}.nav button,.btn,.mode,.tiny{border:1px solid #2e3a55;border-radius:12px;background:linear-gradient(180deg,#182239,#0d1321);padding:8px 10px;cursor:pointer;font-weight:900}.nav button{text-align:left}.nav span{display:block;color:#9da9c3;font-size:12px;font-weight:600}.nav button.on,.nav button:hover,.btn:hover,.mode:hover,.tiny:hover{border-color:#69e5ff}.menuMain{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}.title h1{margin:0;font:700 52px/.92 Georgia,serif;letter-spacing:2px}.title p{color:#cbd5ea;margin:8px 0 0}#menuBody{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel{border-radius:16px;overflow:hidden;min-height:0}.hero{position:relative;padding:22px;display:grid;align-content:end}.hero:after{content:"";position:absolute;right:48px;top:50px;width:230px;height:230px;background:conic-gradient(#9a75ff,transparent,#69e5ff,transparent,#f7cf68,#9a75ff);clip-path:polygon(50% 0,92% 25%,92% 75%,50% 100%,8% 75%,8% 25%);opacity:.22}.hero h2{font-size:32px;margin:0 0 8px}.hero p,.help{color:#c8d2e8;line-height:1.55}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.mode{text-align:left;min-height:96px}.mode em{display:block;color:#9da9c3;font-style:normal;font-size:12px;margin-top:6px}.panel h3{margin:0;padding:12px;border-bottom:1px solid #2e3a55}.codex,.itemCodex{padding:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;overflow:auto;max-height:100%;scrollbar-width:thin}.codex.wide{grid-template-columns:repeat(5,minmax(0,1fr))}.mini{border:1px solid #2a3650;border-radius:12px;background:#0a101b;padding:9px;min-height:112px}.mini p{clear:both;margin:6px 0 0;color:#9da9c3;font-size:11px;line-height:1.35}.face{float:left;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--u,#202a40);margin-right:8px}.tag{display:inline-block;border:1px solid #3b4762;border-radius:999px;padding:2px 7px;background:#070b13;color:#c9d4ec;font-size:10px;margin:5px 3px 0 0}
.game{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;overflow:hidden}.top{border-radius:14px;padding:7px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.brand h1{margin:0;font-size:22px}.brand p{margin:2px 0 0;color:#9da9c3;font-size:11px}.hud{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.stat{min-width:58px;text-align:center;border:1px solid #2e3a55;border-radius:12px;background:#070b13;padding:5px}.stat span{display:block;color:#9da9c3;font-size:10px}.stat b{color:#f7cf68;font-size:15px}.battleLayout{height:100%;min-height:0;display:grid;grid-template-columns:210px minmax(720px,1fr) 330px;gap:8px;overflow:hidden}.itemRail,.infoRail{height:100%;min-height:0;overflow:hidden;border-radius:16px;display:grid;gap:8px;padding:8px}.itemRail{grid-template-rows:190px minmax(0,1fr)}.infoRail{grid-template-rows:170px 130px minmax(0,1fr)}.fieldColumn{height:100%;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) 126px 156px;gap:8px}.railBlock{min-height:0;overflow:hidden;border:1px solid #2a3650;border-radius:14px;background:#0b111d;display:grid;grid-template-rows:34px minmax(0,1fr)}.head{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 10px;border-bottom:1px solid #2e3a55;background:#121a2b}.head h2{font-size:15px;margin:0}.arena{position:relative;display:grid;grid-template-rows:34px minmax(0,1fr);background:radial-gradient(circle at 50% 12%,#ffaa501f,transparent 25%),linear-gradient(180deg,#151d2e,#080d16)}.stage{position:relative;min-height:0;padding:13px;overflow:hidden}.stage:before{content:"";position:absolute;inset:7px;border:1px solid #7186b738;border-radius:18px}.zoneLabel{position:absolute;left:18px;z-index:2;color:#7f8ba7;font-size:11px;font-weight:900;pointer-events:none}.enemyLabel{top:16px}.allyLabel{bottom:16px}.board{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}.hex{position:relative;clip-path:polygon(18% 8%,82% 8%,100% 50%,82% 92%,18% 92%,0 50%);background:linear-gradient(145deg,#263045,#101725);border:0;min-height:0;cursor:pointer;overflow:hidden}.hex.enemyZone{background:linear-gradient(145deg,#302334,#111827)}.hex.allyZone{background:linear-gradient(145deg,#293247,#121929)}.hex.sel{outline:3px solid #f7cf68}.piece{position:absolute;inset:7px;clip-path:inherit;background:linear-gradient(135deg,var(--u),#151b26);display:grid;place-items:center;text-align:center;border:1px solid #ffffff38;box-shadow:inset 0 0 22px #fff2,0 10px 20px #0008}.piece b{display:grid;gap:0;font-size:11px;line-height:1.0;max-width:78%;align-items:center}.piece b span{font-size:21px}.piece b em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.star{position:absolute;top:5px;left:8px;color:#f7cf68;font-size:11px;z-index:2;text-shadow:0 2px 4px #000}.star small{margin-left:3px}.hp,.mp{position:absolute;left:14px;right:14px;height:5px;background:#080c13;border-radius:99px;overflow:hidden;z-index:2}.hp{bottom:12px}.mp{bottom:6px}.hp i,.mp i{display:block;height:100%}.hp i{background:linear-gradient(90deg,#54ef8a,#f8e46b)}.mp i{background:linear-gradient(90deg,#54dcff,#996dff)}.benchPanel{display:grid;grid-template-rows:34px minmax(0,1fr)}.bench{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding:12px 10px;min-height:0}.bench button{height:82px;border-radius:12px;border:1px solid #2a3650;background:#080d16;position:relative;overflow:hidden;cursor:pointer}.bench .piece{inset:5px}.shopDock{border-radius:16px;display:grid;grid-template-rows:34px minmax(0,1fr) 28px;overflow:hidden}.dockTop,.bottomLine{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 8px;border-bottom:1px solid #2e3a55;background:#121a2b}.dockActions{display:flex;gap:6px;flex-wrap:wrap}.bottomLine{border-top:1px solid #2e3a55;border-bottom:0;background:#0e1422}.bottomLine>span{color:#9da9c3;font-size:10px;flex:1}.shop{padding:7px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;overflow:hidden;min-height:0}.unit{position:relative;border:1px solid #2b3854;border-radius:12px;background:#0b111d;padding:7px;text-align:left;min-height:0;height:100%}.unit.empty{display:grid;place-items:center;color:#71809d}.unit:hover{border-color:#69e5ff}.unit b{font-size:13px}.cost{position:absolute;right:8px;top:8px;border-radius:999px;background:#f7cf68;color:#140d05;padding:2px 8px;font-size:12px;font-weight:900}.stats{display:none}.cardBtns{position:absolute;left:7px;bottom:5px;display:flex;gap:6px}.tiny{border-radius:8px;padding:2px 6px;font-size:10px}.tiny.buy{background:#213457;border-color:#5d7fc0}.btn{padding:5px 8px;white-space:nowrap}.primary{background:linear-gradient(135deg,#2f75ff,#7d58ff);border-color:#6f91ff}.red{background:#351722;border-color:#7e3146;color:#ffdce3}.xp{height:7px;width:110px;border-radius:99px;background:#080c13;overflow:hidden}.xp i{display:block;height:100%;background:linear-gradient(90deg,#69e5ff,#9a75ff)}.items,.traits,.detailCard,.damageMeter,.enemyPrev{padding:8px;overflow-y:auto;min-height:0;scrollbar-width:thin}.items{display:grid;grid-template-columns:1fr;gap:7px;align-content:start}.item{border:1px solid #384963;background:#0a101b;border-radius:12px;min-height:42px;padding:6px 8px;text-align:left;cursor:pointer;position:relative;display:grid;grid-template-columns:28px 1fr;align-items:center}.item.sel{outline:2px solid #f7cf68}.item b{font-size:20px;line-height:1}.item span{font-size:12px;font-weight:800;color:#e7edff}.item:hover{border-color:#f7cf68;z-index:20}.item:hover:after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:0;width:230px;background:#090e19;border:1px solid #f7cf68aa;border-radius:12px;padding:10px;color:#dfe8ff;font-size:12px;line-height:1.45;box-shadow:0 14px 30px #000b;white-space:pre-line;pointer-events:none}.trait{border:1px solid #2a3650;border-radius:10px;background:#080d16;padding:7px;margin-bottom:6px}.trait.on{border-color:#69e5ff;background:linear-gradient(135deg,#69e5ff20,#080d16)}.trait div{display:flex;justify-content:space-between;font-size:12px;font-weight:900}.trait p{margin:4px 0 0;color:#9da9c3;font-size:11px}.enemyPrev{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.cell{min-height:46px;border:1px solid #2a3650;border-radius:11px;background:#0a101b;position:relative;overflow:hidden;cursor:pointer}.cell .piece{inset:4px}.damageRow{border:1px solid #2a3650;border-radius:10px;background:#080d16;padding:7px;margin-bottom:6px}.damageRow b{display:block;color:#f7cf68}.damageBar{height:6px;background:#080c13;border-radius:99px;overflow:hidden;margin-top:5px}.damageBar i{display:block;height:100%;background:linear-gradient(90deg,#7d58ff,#69e5ff)}.detailTop{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;border:1px solid #2a3650;border-radius:12px;background:#0a101b;padding:7px}.detailTop b{font-size:15px}.detailTop p{margin:2px 0 0;color:#9da9c3;font-size:12px}.bigFace{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--u,#1b2436);font-size:24px}.detailGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin:8px 0}.detailGrid span{border:1px solid #2a3650;border-radius:10px;background:#080d16;padding:6px;font-size:11px}.detailGrid b{color:#f7cf68}.skill,.recipeLine{margin:8px 0;border:1px solid #3a4762;border-radius:12px;background:#111a2c;padding:8px;font-size:11px;line-height:1.45}.skill b,.recipeLine b{color:#69e5ff}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#02040899;backdrop-filter:blur(4px)}.dialog{width:min(650px,92vw);border-radius:18px;padding:22px;text-align:center}.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;background:#0b101b;border:1px solid #55688a;border-radius:999px;padding:10px 16px;font-weight:900}.fx{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:900;text-shadow:0 2px 8px #000;animation:f .55s forwards;pointer-events:none}.c3{border-color:#6684ff55}.c4{border-color:#d06cff77;box-shadow:inset 0 0 16px #c05cff14}.c5{border-color:#f7cf68aa;box-shadow:inset 0 0 18px #f7cf6820,0 0 18px #f7cf6814}@keyframes f{to{opacity:0;transform:translate(-50%,-90%) scale(1.12)}}@media(max-width:1360px){.battleLayout{grid-template-columns:185px minmax(620px,1fr) 300px}.fieldColumn{grid-template-rows:minmax(0,1fr) 112px 146px}.itemRail{grid-template-rows:160px minmax(0,1fr)}.infoRail{grid-template-rows:145px 110px minmax(0,1fr)}.bench{padding:10px 8px}.bench button{height:74px}.unit b{font-size:12px}.btn{padding:4px 7px;font-size:12px}.piece b em{font-size:10px}.piece b span{font-size:18px}.board{gap:7px}.stage{padding:10px}}@media(max-height:820px){.fieldColumn{grid-template-rows:minmax(0,1fr) 104px 138px}.itemRail{grid-template-rows:130px minmax(0,1fr)}.infoRail{grid-template-rows:125px 88px minmax(0,1fr)}.shopDock{grid-template-rows:30px minmax(0,1fr) 26px}.bench{padding:8px}.bench button{height:66px}.shop{padding:5px}.unit{padding:6px}.tag{display:none}.cardBtns{bottom:4px}.tiny{padding:2px 5px;font-size:10px}.bottomLine>span{font-size:9px}.xp{width:80px}.head{height:30px}.arena{grid-template-rows:30px minmax(0,1fr)}.stage{padding:9px}.board{gap:6px}.item{min-height:36px}.detailGrid span{font-size:10px}.skill{font-size:10px}}@media(max-width:1120px){html,body{overflow:auto}.menu,.game{height:auto;min-height:100vh;overflow:auto}.menu,#menuBody,.battleLayout{grid-template-columns:1fr}.fieldColumn{grid-template-rows:auto auto auto}.board{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,90px)}.shop{grid-template-columns:1fr}.unit{min-height:110px}.itemRail,.infoRail{min-height:360px}.item:hover:after{left:0;top:100%;width:260px}.bench{grid-template-columns:repeat(4,1fr)}.top{grid-template-columns:1fr}.hud{justify-content:flex-start}.title h1{font-size:38px}.codex,.codex.wide,.itemCodex{grid-template-columns:1fr}.modes{grid-template-columns:1fr}}