:root{--bg:#13161a;--panel:#1d2228;--panel2:#262c34;--panel3:#2f3640;--line:#343c46;--text:#f3f6f9;--sub:#aeb8c4;--accent:#e0a23b;--accent2:#3ba0e0;--good:#4caf6f;--bad:#d9534f;--boss:#b0497a;--el-Regular:#b6bdc6;--el-Combat:#ef6f6f;--el-Stone:#c2a279;--el-Spirit:#b89cf0;--el-Telekinetic:#d98fe0;--el-Aero:#86c5f7;--el-Insect:#a8d96a;--el-Soil:#cf9a63;--el-Lightning:#ffd54a;--el-Aqua:#48c4f5;--el-Heat:#ff8a52}*{box-sizing:border-box}html,body{margin:0}body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:16px;line-height:1.55;font-size:16px;font-weight:500}#app{max-width:1000px;margin:0 auto}h1{font-size:28px;margin:0;letter-spacing:.5px;font-weight:800}h2{font-size:22px;margin:0 0 12px;font-weight:800}.screen{display:none}.screen.active{display:block}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px}.sub{color:var(--sub);font-size:15px;font-weight:500}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spread{justify-content:space-between}button{font-family:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:11px 18px;font-size:15.5px;font-weight:700;transition:background .15s,border-color .15s,transform .08s}button:hover{background:var(--panel3);border-color:var(--accent)}button:active{transform:scale(.98)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#1a1a1a;border-color:var(--accent);font-weight:800}button.primary:hover{background:#f0b24b}button.ghost{background:transparent}.back-btn{background:transparent;border:none;color:var(--sub);padding:6px 4px;font-size:14.5px;font-weight:600}.back-btn:hover{color:var(--text);background:transparent;border:none}.menu-hero{text-align:center;padding:22px 0 10px}.menu-hero .tagline{color:var(--sub);font-size:15.5px;margin-top:6px;font-weight:600}.menu-buttons{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}.menu-btn{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:100%;max-width:360px;padding:16px 18px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;cursor:pointer}.menu-btn:hover{border-color:var(--accent);background:var(--panel3)}.menu-btn .mb-title{font-size:18px;font-weight:800}.menu-btn .mb-sub{font-size:13.5px;color:var(--sub);font-weight:500}.menu-btn.danger:hover{border-color:var(--bad)}.progress-wrap{margin-top:8px}.progress-track{height:10px;background:var(--panel2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}.progress-fill{height:100%;background:var(--accent);width:0%;transition:width .4s}.progress-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--sub);margin-top:6px;font-weight:600}.card{width:124px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;position:relative}.card.lg{width:168px}.card.sm{width:96px}.card .img-wrap{width:100%;aspect-ratio:1/1;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}.card .img-wrap img{width:100%;height:100%;object-fit:contain;display:block}.card .meta{padding:6px 7px 8px}.card.sm .meta{padding:4px 5px 6px}.card .name{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card.sm .name{font-size:12px}.card .typelevel{display:flex;justify-content:space-between;align-items:center;margin-top:3px}.type-pill{font-size:11px;font-weight:700;padding:1.5px 7px;border-radius:10px;border:1px solid currentColor;color:var(--sub);opacity:.95}.card.sm .type-pill{font-size:9.5px;padding:1px 5px}.level-badge{font-size:12px;font-weight:800;padding:1.5px 7px;border-radius:4px;background:var(--accent);color:#1a1a1a}.card.sm .level-badge{font-size:10.5px}.count-badge{position:absolute;top:5px;right:5px;background:#000000c7;color:#fff;font-size:12.5px;font-weight:800;padding:1.5px 7px;border-radius:10px}.card.selectable{cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}.card.selectable:hover{transform:translateY(-4px) scale(1.06);border-color:var(--accent);box-shadow:0 8px 20px #0006}.card.peekable{cursor:zoom-in;transition:transform .15s,border-color .15s,box-shadow .15s}.card.peekable:hover{transform:translateY(-4px) scale(1.06);border-color:var(--accent2);box-shadow:0 8px 20px #0006}.card.selected{border-color:var(--accent2);box-shadow:0 0 0 2px var(--accent2)}.card.disabledpick{opacity:.35;cursor:not-allowed}.card.disabledpick:hover{transform:none;border-color:var(--line)}.card.winner-glow{box-shadow:0 0 0 3px var(--good);border-color:var(--good)}.card.loser-fade{opacity:.45}.card-grid{display:flex;flex-wrap:wrap;gap:8px}.empty-note{color:var(--sub);font-size:14.5px;padding:8px 2px}.tag{border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--panel2)}.tag.active{background:var(--accent);color:#1a1a1a;border-color:var(--accent);font-weight:800}.filter-tags{display:flex;gap:6px;flex-wrap:wrap}#campaign-list,.campaign-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}#world-map{display:flex;flex-direction:column;gap:18px}.act-region{border:1px solid var(--line);border-radius:12px;padding:14px;background:#0000001f}.act-region-head{margin-bottom:12px}.act-region-name{font-size:15px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}.act-region-blurb{font-size:14px;color:var(--sub);margin-top:3px;font-weight:500}.act-region-lock{font-size:13.5px;color:var(--sub);font-style:italic;margin-top:6px}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.zone-node{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;transition:transform .12s,border-color .12s,box-shadow .12s}.zone-node.clickable{cursor:pointer}.zone-node.clickable:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 6px 16px #00000059}.zone-node.locked{opacity:.5}.zone-node.cleared{border-color:var(--good)}.zone-emoji{font-size:34px;line-height:1}.zone-name{font-size:16px;font-weight:800}.zone-element{font-size:12.5px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;font-weight:800}.zone-status{font-size:12.5px;color:var(--sub);margin-top:2px;font-weight:600}.zone-node.cleared .zone-status{color:var(--good)}.convergence-node{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:18px 12px;border:2px solid var(--boss);border-radius:14px;background:#b0497a1f;transition:transform .12s,box-shadow .12s}.convergence-node.clickable{cursor:pointer}.convergence-node.clickable:hover{transform:translateY(-3px);box-shadow:0 6px 18px #b0497a66}.convergence-node.locked{opacity:.55}.convergence-node.cleared{border-color:var(--good)}.opp-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}.opp-card.locked{opacity:.6}.opp-card.boss{border-color:var(--boss)}.opp-head{display:flex;align-items:center;gap:10px}.opp-emoji{font-size:30px}.opp-title-wrap{flex:1}.opp-name{font-weight:800;font-size:17px}.opp-meta{font-size:12.5px;color:var(--sub);font-weight:600}.opp-badge{font-size:12px;padding:3px 9px;border-radius:10px;font-weight:700}.opp-badge.beaten{background:#4caf6f33;color:var(--good);border:1px solid var(--good)}.opp-badge.locked{background:var(--panel3);color:var(--sub)}.opp-blurb{font-size:14px;color:var(--sub);flex:1;font-weight:500}.opp-locked-note{font-size:13.5px;color:var(--sub);font-style:italic}.hs-banner{display:flex;align-items:center;gap:10px;margin-bottom:4px}.hs-banner .em{font-size:24px}#hs-grid{display:flex;flex-wrap:wrap;gap:10px;max-height:460px;overflow-y:auto;margin-top:10px}.hs-card{display:flex;flex-direction:column;gap:4px;align-items:center;padding:6px;border-radius:10px;border:1px solid transparent}.hs-card.bringing{border-color:var(--accent2);background:#3ba0e014}.stepper{display:flex;align-items:center;gap:6px}.step-btn{padding:3px 11px;font-size:16px;line-height:1;border-radius:6px}.step-num{font-size:12.5px;color:var(--sub);min-width:32px;text-align:center;font-weight:700}.scoreboard{display:flex;align-items:stretch;gap:10px;margin-bottom:12px}.score-side{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.score-side .s-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.score-side .s-label{font-size:12.5px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;font-weight:700}.score-side .s-count{font-size:24px;font-weight:800}.spoils-pile{display:flex;align-items:center;min-height:54px;padding-left:4px;overflow-x:auto}.pile-card{width:42px;height:42px;border-radius:6px;overflow:hidden;border:2px solid var(--panel);flex:0 0 auto;background:#0e1114}.pile-card img{width:100%;height:100%;object-fit:cover}.pile-empty{color:var(--sub);font-size:13px}.battle-center{text-align:center;font-size:13.5px;color:var(--sub);margin-bottom:8px;font-weight:600}.battlefield{display:flex;justify-content:center;align-items:center;gap:24px;margin:10px 0;min-height:220px}.bf-slot{display:flex;flex-direction:column;align-items:center;gap:6px}.bf-slot .who{font-size:12.5px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;font-weight:700}.vs-mark{font-size:20px;color:var(--sub);font-weight:800}.empty-slot{width:168px;height:168px;border:2px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:13.5px;text-align:center;padding:8px}.battle-hint{text-align:center;font-size:14px;color:var(--accent);min-height:18px;margin-top:4px;font-weight:600}.log{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;max-height:200px;overflow-y:auto}.log .entry{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}.log .entry:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.log .turnnum{color:var(--accent);font-weight:700}.log .reason{color:var(--sub)}.pm-banner{text-align:center;font-size:34px;font-weight:800;margin-bottom:4px}.pm-sub{text-align:center;color:var(--sub);font-size:15.5px;margin-bottom:10px;font-weight:600}.pm-unlock{text-align:center;color:var(--accent);font-size:14.5px;margin-bottom:10px;padding:8px;background:#e0a23b1a;border-radius:8px;font-weight:600}.overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:50;align-items:center;justify-content:center;padding:20px}.overlay-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;max-width:420px;width:100%}.detail-box{max-width:420px;text-align:center}.detail-box img{width:320px;height:320px;object-fit:contain;background:#fff;border-radius:10px;margin-bottom:10px}.detail-meta{display:flex;gap:8px;justify-content:center;margin:8px 0}.detail-desc{font-size:15px;color:var(--sub);text-align:left;margin-top:8px;line-height:1.6}.howto p{font-size:15.5px;line-height:1.7;margin:0 0 12px}.howto strong{color:var(--accent)}.wheel-line{font-family:monospace;font-size:13.5px;color:var(--text);background:var(--panel2);padding:10px;border-radius:8px;line-height:1.8;word-break:break-word}.controls-row{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}input[type=range]{flex:1;min-width:120px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.el-Regular{color:var(--el-Regular)}.el-Combat{color:var(--el-Combat)}.el-Stone{color:var(--el-Stone)}.el-Spirit{color:var(--el-Spirit)}.el-Telekinetic{color:var(--el-Telekinetic)}.el-Aero{color:var(--el-Aero)}.el-Insect{color:var(--el-Insect)}.el-Soil{color:var(--el-Soil)}.el-Lightning{color:var(--el-Lightning)}.el-Aqua{color:var(--el-Aqua)}.el-Heat{color:var(--el-Heat)}