* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, Segoe UI, Arial, sans-serif; color: #eaeaf0; background: #0e0f13; }

.topbar { display: flex; align-items: center; padding: 10px 14px; background: #141622; border-bottom: 1px solid #2a2e3d; position: sticky; top: 0; z-index: 2; }
.brand { font-weight: 800; letter-spacing: 0.5px; margin-right: 16px; }
.tabs { display: flex; gap: 8px; align-items: center; width: 100%; }
.tab-btn { background: #1b1f2e; border: 1px solid #2b3147; color: #cfd6ff; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.tab-btn:hover { background: #242a3f; }
.spacer { flex: 1; }
.wallet { color: #93a1ff; }

main { padding: 16px; }
.tab { display: none; }
.tab.active { display: block; }

.panel { background: #121625; border: 1px solid #2b3147; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.panel h3 { margin: 0 0 8px; font-size: 16px; color: #cfd6ff; }
.panel-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }

.play-layout { display: grid; grid-template-columns: 280px 1fr; gap: 12px; }
.left-panel { display: flex; flex-direction: column; }
.game-panel { position: relative; background: #0b0d14; border: 1px solid #2b3147; border-radius: 10px; overflow: hidden; }
#game { display: block; width: 100%; height: auto; background: #0b0d14; }
.bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; background: linear-gradient(180deg, rgba(14,15,19,0) 0%, rgba(14,15,19,0.8) 40%, rgba(14,15,19,1) 100%); border-top: 1px solid #2b3147; }
.unit-bar { display: flex; gap: 8px; }
.unit-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; padding: 6px; background: #141a2d; border: 1px solid #313a5c; border-radius: 8px; cursor: pointer; }
.unit-card.selected { outline: 2px solid #7aa2ff; }
.unit-name { font-size: 12px; text-align: center; }
.unit-actions { display:flex; gap:4px; }
.btn-mini { font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.badge { font-size: 11px; padding: 2px 6px; border-radius: 999px; }
.badge.Rare { background: #254bff22; color: #7aa2ff; border: 1px solid #254bff77; }
.badge.Epic { background: #8a2be222; color: #c798ff; border: 1px solid #8a2be277; }
.badge.Legendary { background: #ffd70022; color: #ffd86b; border: 1px solid #ffd70077; }
.badge.Mythic { background: #ff450022; color: #ff7a7a; border: 1px solid #ff450077; }
.badge.Secret { background: #00ffaa22; color: #7affc7; border: 1px solid #00ffaa77; }
.cost { font-size: 12px; opacity: 0.8; }

.selected-info.empty { opacity: 0.7; }
.selected-info .row { display: flex; justify-content: space-between; }

.hint { font-size: 12px; opacity: 0.8; margin-top: 6px; }

.summon-layout, .inventory-layout { display: grid; grid-template-columns: 1fr; gap: 12px; }
.traits-layout { display: grid; grid-template-columns: 1fr; gap: 12px; }
.summon-controls { display: flex; gap: 8px; margin-bottom: 8px; }
.summon-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.card { background: #141a2d; border: 1px solid #313a5c; border-radius: 10px; padding: 8px; }
.card .title { font-weight: 700; font-size: 14px; }
.card .subtitle { font-size: 12px; opacity: 0.9; }

.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.inventory-controls { display: flex; gap: 8px; margin-bottom: 8px; }

footer { padding: 8px 12px; border-top: 1px solid #2a2e3d; opacity: 0.7; }
.footer-inner { max-width: 1200px; margin: 0 auto; font-size: 12px; text-align: center; }

button { background: #1a2140; color: #e7eaff; border: 1px solid #2d3863; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
button:hover { background: #212a53; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: grid; place-items: center; z-index: 10; }
.modal-overlay[hidden] { display: none !important; }
.modal { width: min(680px, 92vw); max-height: 80vh; overflow: auto; background: #0f1322; border: 1px solid #2b3147; border-radius: 12px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #2b3147; }
.modal-body { padding: 12px; display: grid; grid-template-columns: 1fr; gap: 8px; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }