:root{--bg:#0e1622;--pn:#16202f;--pn2:#1d2a3d;--bd:#33465f;--tx:#e9eef5;--mu:#93a3b8;--go:#e8c14a;--rd:#d2504a;--gr:#58b368;--bl:#4a90d9}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#16324a;color:var(--tx);font:14px/1.4 'Trebuchet MS',system-ui,sans-serif;user-select:none}
canvas#c{position:fixed;inset:0;touch-action:none;cursor:grab}
#hud{position:fixed;top:0;left:0;right:0;display:flex;flex-wrap:wrap;gap:6px;padding:6px;pointer-events:none;z-index:5}
.chip{pointer-events:auto;background:rgba(14,22,34,.88);border:1px solid var(--bd);border-radius:10px;padding:5px 9px;display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.chip small{color:var(--mu);font-weight:600}.chip .pos{color:var(--gr)}.chip .neg{color:var(--rd)}
#flagc{width:26px;height:17px;image-rendering:pixelated;border-radius:2px}
#bar{position:fixed;bottom:0;left:0;right:0;display:flex;gap:6px;justify-content:center;padding:8px;z-index:5;flex-wrap:wrap;pointer-events:none}
.btn{pointer-events:auto;background:linear-gradient(#2a3b55,#1d2a3d);color:var(--tx);border:1px solid var(--bd);border-radius:10px;padding:9px 14px;font:700 14px inherit;cursor:pointer;font-family:inherit}
.btn:hover{border-color:var(--go)}.btn:active{transform:translateY(1px)}.btn.pri{background:linear-gradient(#e8c14a,#c79a2a);color:#241a05;border-color:#f3d878}
.btn.dng{background:linear-gradient(#c0413a,#8f2a25)}.btn[disabled],.btn.off{opacity:.45;pointer-events:none}.btn.sm{padding:5px 9px;font-size:12px}
#obj{position:fixed;bottom:60px;left:6px;max-width:330px;z-index:4;background:rgba(14,22,34,.88);border:1px solid var(--go);border-radius:10px;padding:7px 10px;font-size:13px;cursor:pointer}
#obj b{color:var(--go)}
#toast{position:fixed;top:92px;right:8px;display:flex;flex-direction:column;gap:6px;z-index:6;pointer-events:none;max-width:300px}
.ts{background:rgba(14,22,34,.94);border-left:4px solid var(--go);border-radius:8px;padding:7px 10px;font-size:13px;animation:fi .3s}
.ts.bad{border-color:var(--rd)}.ts.good{border-color:var(--gr)}
@keyframes fi{from{opacity:0;transform:translateX(20px)}}
#sheet,#modal,#title{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;background:rgba(5,9,15,.72);padding:10px}
#modal{z-index:12}#title{z-index:20;background:radial-gradient(circle at 50% 30%,#1e3a5c,#0b1420)}
.pn{background:var(--pn);border:1px solid var(--bd);border-radius:14px;width:min(860px,100%);max-height:94vh;overflow:auto;padding:16px;box-shadow:0 12px 50px #000a;position:relative}
.pn h2{margin:0 0 8px;font-size:20px;color:var(--go)}.pn h3{margin:12px 0 6px;font-size:15px;color:#fff}
.x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--mu);font-size:24px;cursor:pointer}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.card{background:var(--pn2);border:1px solid var(--bd);border-radius:10px;padding:9px 10px;cursor:pointer}
.card:hover{border-color:var(--go)}.card.sel{border-color:var(--go);background:#27364e}.card.off{opacity:.5}
.card b{display:block}.mu{color:var(--mu);font-size:12px}.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:6px;background:#2a3b55;margin:1px 2px 1px 0}
.tag.g{background:#1f4a2c;color:#8fe0a0}.tag.r{background:#5a2522;color:#ffaaa4}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.tab{padding:6px 11px;border-radius:8px;background:var(--pn2);border:1px solid var(--bd);cursor:pointer;font-weight:700;font-size:13px}.tab.on{background:var(--go);color:#241a05}
.bar{height:9px;background:#0b121c;border-radius:6px;overflow:hidden;border:1px solid var(--bd)}.bar i{display:block;height:100%;background:var(--gr)}
input[type=text],input[type=password]{background:#0b121c;border:1px solid var(--bd);border-radius:8px;color:var(--tx);padding:8px 10px;font:inherit;width:100%}
ul.fl{margin:4px 0 4px 16px;padding:0}ul.fl li{margin:2px 0}
.sp{flex:1}.pos{color:var(--gr)}.neg{color:var(--rd)}
#battle{position:fixed;inset:0;z-index:14;background:rgba(3,6,10,.88);display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px}
#battle canvas{max-width:100%;border:2px solid var(--bd);border-radius:10px;background:#5a7a48}
.opt{display:block;width:100%;text-align:left;margin:6px 0}.opt small{display:block;color:#ffffffaa;font-weight:500;font-size:12px}
.big{font-size:40px;font-weight:900;letter-spacing:2px;color:var(--go);text-align:center;text-shadow:0 3px 0 #000}
.story{font-size:16px;line-height:1.6;text-align:center;padding:10px 6px}
@media(max-width:600px){.btn{padding:8px 9px;font-size:13px}#obj{max-width:230px;font-size:12px}}