:root {
  color-scheme: dark;
  --bg: #090b10;
  --panel: rgba(20, 23, 32, 0.88);
  --panel-2: rgba(29, 33, 45, 0.92);
  --line: rgba(255,255,255,.1);
  --text: #f3f5f8;
  --muted: #939aab;
  --accent: #ffbe5b;
  --good: #7ce6af;
  --danger: #ff6868;
  --radius: 18px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 30% -10%, #252234 0, transparent 33%), radial-gradient(circle at 90% 10%, #17282c 0, transparent 30%), var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.topbar { position: sticky; top: 0; z-index: 10; min-height: 74px; padding: 12px clamp(16px, 3vw, 40px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(9,11,16,.82); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); font-size: 22px; }
.brand strong { display:block; font-size: 14px; }
.brand small { display:block; color: var(--muted); font-size: 10px; margin-top: 3px; }
nav { display:flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); }
.nav-button { border: 0; border-radius: 999px; padding: 8px 16px; background: transparent; color: var(--muted); }
.nav-button.active { color: var(--text); background: rgba(255,255,255,.09); }
.profile { justify-self: end; display:flex; align-items:center; gap: 9px; }
.profile input { width: 120px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text); }
#mode-badge { font-size: 9px; letter-spacing: .14em; color: #ffbd70; border: 1px solid rgba(255,189,112,.3); border-radius: 999px; padding: 6px 8px; }
#mode-badge.online { color: var(--good); border-color: rgba(124,230,175,.3); }
main { width: min(1500px, calc(100% - 32px)); margin: 26px auto 60px; }
.battle-layout { display:grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .8fr); gap: 22px; }
.arena, .side-column { display:flex; flex-direction:column; gap: 16px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 55%), var(--panel); box-shadow: 0 18px 60px rgba(0,0,0,.2); }
.enemy-panel, .player-panel { padding: 20px; }
.actor-heading, .section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { margin-bottom: 7px; }
.eyebrow { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.intent { display:flex; flex-direction:column; text-align:right; border: 1px solid rgba(255,104,104,.22); background: rgba(255,104,104,.07); padding: 8px 11px; border-radius: 11px; }
.intent strong { font-size: 12px; color: #ff9292; }
.intent span { color: var(--muted); font-size: 10px; margin-top: 2px; }
.hp { margin-top: 8px; }
.hp-track { height: 9px; overflow:hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.hp-track span { display:block; height:100%; width:100%; background: linear-gradient(90deg, #8e3945, #ff6b6b); transition: width .25s ease; }
.hp-track.player span { background: linear-gradient(90deg, #326b5f, #6fd5ac); }
.hp small { display:block; color: var(--muted); margin-top: 5px; font-size: 10px; }
.enemy-placeholder { margin-top: 17px; min-height: 160px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.12); display:grid; place-items:center; align-content:center; gap: 7px; background: radial-gradient(circle, rgba(255,255,255,.06), transparent 62%); }
.enemy-placeholder span { font: 700 60px/1 Georgia,serif; color: rgba(255,255,255,.28); }
.enemy-placeholder small, .card-art small { color: var(--muted); font-size: 8px; letter-spacing: .15em; }
.battle-strip { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding: 4px 8px; }
.battle-strip > div:first-child { display:flex; flex-direction:column; }
.battle-strip b { font-size: 26px; }
.energy-orb { width: 70px; height:70px; border-radius:50%; display:grid; place-items:center; align-content:center; background: radial-gradient(circle at 30% 25%, #ffe1a5, #c17920 65%, #754213); border: 2px solid rgba(255,255,255,.35); color:#171008; box-shadow: 0 0 35px rgba(255,180,70,.14); }
.energy-orb span { font-size:28px; font-weight:900; line-height:1; }
.energy-orb small { font-size:7px; font-weight:900; letter-spacing:.13em; margin-top:4px; }
.primary, .combine-button, .ghost { border-radius: 11px; padding: 10px 14px; font-weight: 750; }
.primary { justify-self:end; border: 1px solid rgba(255,190,91,.25); background: linear-gradient(180deg, #e4a84c, #b57424); color:#171008; }
.combine-button { border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.04); }
.combine-button.active { border-color: rgba(255,190,91,.45); color:var(--accent); background:rgba(255,190,91,.08); }
.ghost { border:1px solid var(--line); background:transparent; color:var(--muted); font-size:11px; }
.rack-section { padding: 5px 0 0; }
.rack { margin-top: 11px; display:grid; grid-template-columns: repeat(6, minmax(88px, 1fr)); gap: 9px; }
.mini-card { position:relative; min-height:128px; padding:14px 9px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:linear-gradient(160deg, var(--family-a, #303440), #11131a 67%); transition: transform .12s ease,border-color .12s ease; }
.mini-card:hover { transform:translateY(-3px); }
.mini-card.selected { outline:2px solid var(--accent); border-color:transparent; }
.mini-card .tier { position:absolute; top:7px; left:8px; color:var(--muted); font-size:8px; font-weight:800; }
.glyph { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.11); font:800 18px/1 Georgia,serif; }
.mini-card strong { font-size:11px; }
.family-fire { --family-a:#552a25; --family-b:#f17745; }
.family-water { --family-a:#183f55; --family-b:#55a7d3; }
.family-nature { --family-a:#234832; --family-b:#6ac184; }
.family-earth { --family-a:#4b3b2b; --family-b:#b3905a; }
.family-time { --family-a:#3e3155; --family-b:#a988d6; }
.family-arcane { --family-a:#38384b; --family-b:#9e9ebd; }
.combine-panel { padding:16px; }
.combine-formula { display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap:10px; align-items:center; text-align:center; }
.combine-formula span,.combine-formula strong { padding:12px 8px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.035); }
.combine-formula strong { color:var(--good); }
.combine-formula strong.unknown { color:var(--accent); }
.combine-panel > .primary { display:block; margin:12px auto 0; }
.brew-queue { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.brew-item { display:flex; gap:10px; align-items:center; }
.brew-item .flask { font-size:26px; }
.brew-item div { display:flex; flex-direction:column; }
.brew-item small,.empty { color:var(--muted); font-size:10px; }
.detail-card { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:linear-gradient(160deg, var(--family-a,#303440), #12141b 60%); box-shadow:0 24px 80px rgba(0,0,0,.28); }
.card-art { min-height:220px; display:grid; place-items:center; align-content:center; gap:12px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 50% 35%, var(--family-b,#777) 0, transparent 18%), radial-gradient(circle at 50% 45%, rgba(255,255,255,.08), transparent 55%); }
.card-art > span { display:grid; place-items:center; width:105px; height:105px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(0,0,0,.22); font:800 37px/1 Georgia,serif; box-shadow: inset 0 0 50px rgba(255,255,255,.05); }
.card-heading { display:flex; justify-content:space-between; gap:10px; padding:17px 17px 0; }
.card-heading h2 { font-size:27px; }
.family-tag { align-self:flex-start; text-transform:uppercase; font-size:8px; letter-spacing:.13em; padding:6px 8px; border:1px solid var(--line); border-radius:999px; }
.description { padding:0 17px; color:#c2c7d1; font-size:12px; line-height:1.55; }
.moves { display:grid; gap:8px; padding:5px 12px 14px; }
.move { position:relative; text-align:left; padding:11px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.19); color:var(--text); }
.move:hover:not(:disabled) { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06); }
.move-top { display:flex; justify-content:space-between; gap:8px; margin-bottom:5px; }
.move strong { font-size:11px; }
.move b { color:var(--accent); font-size:10px; }
.move > span:last-of-type { color:var(--muted); font-size:10px; line-height:1.4; }
.move em { position:absolute; right:10px; bottom:8px; color:var(--good); font-size:7px; font-style:normal; font-weight:900; }
.log-card { padding:15px; }
.log-card ol { margin:10px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.log-card li { padding-top:7px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:10px; line-height:1.45; }
.result-banner { text-align:center; padding:12px; border:1px solid rgba(124,230,175,.25); border-radius:12px; color:var(--good); background:rgba(124,230,175,.06); font-size:18px; font-weight:900; letter-spacing:.18em; }
.codex { padding:22px 0; }
.codex-header { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:22px; }
.codex-header h1 { font-size:clamp(34px,6vw,72px); letter-spacing:-.05em; margin:4px 0; }
.codex-header p { color:var(--muted); }
.codex-note { max-width:420px; line-height:1.6; font-size:12px; }
.codex-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.codex-card { display:flex; gap:14px; padding:15px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,var(--family-a,#303440),#12141b 70%); }
.codex-card h3 { margin:3px 0 5px; }
.codex-card p { color:var(--muted); font-size:10px; line-height:1.45; margin:0; }
.toast { position:fixed; z-index:30; left:50%; bottom:25px; transform:translate(-50%,20px); opacity:0; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#1d2029; color:var(--text); pointer-events:none; transition:.2s ease; box-shadow:0 15px 50px rgba(0,0,0,.4); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal { position:fixed; z-index:40; inset:0; display:none; place-items:center; padding:20px; background:rgba(4,5,8,.82); backdrop-filter:blur(14px); }
.modal.open { display:grid; }
.modal-card { width:min(440px,100%); padding:30px; text-align:center; border:1px solid rgba(255,190,91,.25); border-radius:24px; background:radial-gradient(circle at 50% 10%,rgba(255,190,91,.12),transparent 35%),#141720; box-shadow:0 30px 100px rgba(0,0,0,.6); }
.discovery-glyph { width:120px; height:120px; margin:20px auto; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; font:800 42px/1 Georgia,serif; background:rgba(255,255,255,.04); }
.modal-card p { color:var(--muted); line-height:1.55; }
.modal-card > strong { display:block; margin:20px 0; font-size:11px; color:var(--accent); }
@media (max-width: 980px) { .battle-layout { grid-template-columns:1fr; } .side-column { display:grid; grid-template-columns:1fr 1fr; } .rack { grid-template-columns:repeat(3,1fr); } .codex-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 680px) { .topbar { grid-template-columns:1fr auto; } .topbar nav { order:3; grid-column:1/-1; justify-self:center; } .brand small,#mode-badge { display:none; } .profile input { width:90px; } main { width:min(100% - 20px,1500px); margin-top:12px; } .side-column { display:flex; } .rack { display:flex; overflow-x:auto; padding-bottom:6px; } .mini-card { min-width:104px; } .battle-strip { grid-template-columns:1fr auto 1fr; } .codex-grid { grid-template-columns:1fr; } .codex-header { display:block; } .combine-formula { grid-template-columns:1fr auto 1fr; } .combine-formula b:nth-of-type(2),#combine-result { grid-column:2/4; } }