:root {
  color-scheme: dark;
  --ink: #f5f1e8;
  --muted: #a8a5b5;
  --panel: rgba(13, 14, 25, .91);
  --panel-solid: #111321;
  --line: #39384c;
  --line-bright: #68617f;
  --gold: #e8c268;
  --gold-soft: #8f7340;
  --violet: #8f72ff;
  --danger: #ef6b75;
  --good: #65dcaa;
  --warning: #f4c96b;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #070810;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: #070810; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 12% 4%, #30275c 0, transparent 31%), radial-gradient(circle at 92% 74%, #123c3a 0, transparent 30%), linear-gradient(155deg, #0b0b16, #070810 55%); }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 94%); }
button, input, select { font: inherit; }
button, .button-link { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #202335; color: var(--ink); cursor: pointer; font-weight: 800; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease; }
button:hover, .button-link:hover { border-color: var(--line-bright); transform: translateY(-1px); }
button:active, .button-link:active { transform: translateY(0); }
button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(232, 194, 104, .75); outline-offset: 3px; }
.hidden { display: none !important; }
.dev-only { display: none; }
.dev-mode .dev-only { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { width: min(1440px, calc(100% - 36px)); margin: auto; padding-bottom: 52px; }
.topbar { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; gap: 13px; align-items: center; text-decoration: none; color: var(--ink); font-weight: 900; letter-spacing: .1em; }
.brand small { display: block; color: var(--gold); font-size: .62rem; margin-top: 4px; letter-spacing: .14em; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--gold); transform: rotate(45deg); color: var(--gold); font: 1.35rem Georgia, serif; box-shadow: 0 0 22px rgba(232, 194, 104, .12); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.topbar-status, .session { display: flex; align-items: center; gap: 12px; }
.panel { background: linear-gradient(145deg, rgba(21, 22, 37, .94), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 23px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.primary { background: linear-gradient(135deg, #7053d8, #a16fff); border-color: #b198ff; }
.danger { color: #ffd5d8; border-color: #7e3841; background: #421e27; }
.quiet { background: transparent; }
.large { padding: 13px 22px; }
.text-link { color: var(--gold); font-weight: 800; text-decoration: none; }
.muted { color: var(--muted); line-height: 1.55; }
.compact-copy { margin: 8px 0 0; font-size: .78rem; }
.fine-print { color: var(--muted); font-size: .72rem; line-height: 1.5; margin: 17px 0 0; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: .67rem; font-weight: 900; letter-spacing: .19em; }
.pill, .counter { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 100px; padding: 6px 10px; font-size: .64rem; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.pill.good { color: var(--good); border-color: #2d7058; }
.pill.warning { color: var(--warning); border-color: #746037; }
.pill.bad { color: #ffafb5; border-color: #72373e; }
.counter { min-width: 30px; justify-content: center; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }

.auth-layout { min-height: calc(100vh - 130px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .58fr); gap: clamp(38px, 7vw, 110px); align-items: center; }
.hero-copy h1, .hub-heading h1, .match-lobby h1, .result-view h1 { font: 700 clamp(2.8rem, 5.3vw, 5.4rem)/.94 Georgia, serif; letter-spacing: -.045em; margin: 10px 0 22px; }
.hero-copy > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.auth-panel { max-width: 470px; justify-self: end; width: 100%; }
.tabs { display: flex; border-bottom: 1px solid var(--line); margin: -4px 0 24px; }
.tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); }
.tabs button.active { color: var(--ink); border-color: var(--gold); }
form { display: grid; gap: 12px; }
label { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .025em; }
input, select { width: 100%; min-height: 43px; background: #090b14; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; }
input:focus, select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(143,114,255,.16); }
.error { min-height: 1.35em; color: #ff9aa2; }

.hub-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 30px 0 24px; }
.hub-heading h1 { font-size: clamp(2.6rem, 5vw, 4.9rem); margin-bottom: 8px; }
.hub-heading p:last-child { margin: 0; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.span-two { grid-column: span 2; }
.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.section-head h2 { margin: 0; font: 700 1.55rem Georgia, serif; }
.active-match { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: #74644a; background: linear-gradient(100deg, rgba(105, 83, 39, .26), rgba(21, 22, 37, .95)); }
.active-match h2 { margin: 0 0 5px; font: 700 1.55rem Georgia, serif; }
.deck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.deck-choice { position: relative; text-align: left; min-height: 112px; padding: 13px; overflow: hidden; background: linear-gradient(150deg, #24273a, #12141f); }
.deck-choice::after { content: ""; position: absolute; inset: auto -20px -35px auto; width: 100px; height: 100px; border-radius: 50%; background: var(--deck-accent, #7053d8); opacity: .15; filter: blur(2px); }
.deck-choice.selected { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 22px rgba(232,194,104,.12); }
.deck-choice b, .deck-choice small, .deck-choice em { position: relative; z-index: 1; display: block; }
.deck-choice b { margin: 8px 0 5px; }
.deck-choice small { color: var(--muted); }
.deck-choice em { margin-top: 8px; color: var(--good); font-size: .67rem; font-style: normal; font-weight: 900; }
.inline-form { grid-template-columns: 1fr auto; }
.stack { display: grid; gap: 10px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.row-main { min-width: 0; }
.row-main b, .row-main small { display: block; }
.row-main small { margin-top: 4px; color: var(--muted); }
.row-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.friend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.friend-card { border: 1px solid var(--line); border-radius: 13px; padding: 14px; display: flex; gap: 14px; align-items: center; justify-content: space-between; background: rgba(255,255,255,.018); }
.friend-card b, .friend-card small { display: block; }
.friend-card small { color: var(--muted); margin-top: 4px; }
.presence-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #696c7a; }
.presence-dot.online { background: var(--good); box-shadow: 0 0 8px var(--good); }
.presence-dot.game { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.empty { margin: 0; color: var(--muted); padding: 12px 0; }
.export-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.match-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 8px 0 18px; padding: 14px 18px; }
.match-title { text-align: center; font-weight: 900; letter-spacing: .08em; }
.match-title small { display: block; color: var(--muted); margin-top: 4px; letter-spacing: 0; }
.network-state { justify-self: end; text-align: right; display: grid; gap: 4px; }
.network-state small { color: var(--muted); max-width: 440px; overflow: hidden; text-overflow: ellipsis; }
.match-lobby { max-width: 980px; margin: 7vh auto; text-align: center; }
.match-lobby h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
.lobby-players { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 32px 0; }
.lobby-players::before { content: "VS"; grid-column: 2; grid-row: 1; color: var(--gold); font: 700 1.3rem Georgia, serif; }
.lobby-player { grid-row: 1; border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: left; background: #0d0f19; }
.lobby-player:first-child { grid-column: 1; }
.lobby-player:last-child { grid-column: 3; }
.lobby-player h3 { margin: 9px 0; font: 700 1.35rem Georgia, serif; }
.lobby-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.lobby-actions { display: flex; gap: 15px; align-items: center; justify-content: center; }

.battle-stage { position: relative; display: grid; grid-template-columns: minmax(270px, .88fr) minmax(330px, 1.15fr) minmax(270px, .88fr); gap: 14px; align-items: stretch; }
.combatant { min-width: 0; overflow: hidden; }
.combatant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.combatant h2 { margin: 0; font: 700 1.3rem Georgia, serif; }
.combatant-name small { color: var(--muted); display: block; margin-top: 3px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.stat { padding: 8px 6px; text-align: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: .72rem; }
.stat b { display: block; color: var(--ink); font-size: 1rem; margin-top: 2px; }
.zone-title { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 8px; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.cards, .units { display: grid; gap: 7px; }
.cards { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); }
.units { grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); min-height: 82px; }
.game-card, .unit-card, .card-back { position: relative; min-height: 128px; border-radius: 11px; overflow: hidden; padding: 0; text-align: left; background: linear-gradient(150deg, #302853, #111421); border-color: #4c4964; }
.game-card .art, .unit-card .art { height: 70px; background: radial-gradient(circle at 50% 25%, var(--element, #8f72ff), #171421 72%); background-position: center; background-size: cover; }
.game-card .card-copy, .unit-card .card-copy { display: block; padding: 7px; }
.game-card b, .unit-card b { display: block; font-size: .72rem; line-height: 1.15; }
.game-card small, .unit-card small { display: block; color: var(--muted); margin-top: 4px; font-size: .65rem; }
.game-card .cost { position: absolute; z-index: 2; top: 5px; left: 5px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #342c83; color: white; font-size: .72rem; font-weight: 900; box-shadow: 0 2px 8px #000; }
.unit-card { min-height: 115px; }
.unit-card.ready { border-color: var(--good); }
.unit-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(232,194,104,.25); }
.unit-card.frozen::after { content: "❄ CONGELADA"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(66,157,210,.48); font-size: .68rem; font-weight: 900; }
.card-back { min-height: 70px; background: radial-gradient(circle at 50% 50%, #5d4a96, #151526 48%, #0c0d16 50%); border-color: #5f577b; }
.battle-center { display: flex; flex-direction: column; }
.turn-banner { padding: 13px; border: 1px solid var(--gold-soft); border-radius: 11px; text-align: center; color: var(--gold); font-weight: 900; letter-spacing: .08em; background: rgba(109,84,33,.15); }
.connection-message { margin-top: 9px; padding: 10px; border: 1px solid #746037; border-radius: 9px; color: var(--warning); text-align: center; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.actions button small { display: block; margin-top: 3px; color: #d5cee8; font-size: .63rem; }
.choice-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 9px; margin-top: 8px; }
.combat-inspector { min-height: 92px; margin-top: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #090b13; font-size: .74rem; line-height: 1.45; }
.combat-inspector b { color: var(--gold); }
.public-log { margin-top: 12px; }
.public-log summary { cursor: pointer; color: var(--muted); font-size: .76rem; font-weight: 800; }
.event-log { max-height: 160px; overflow: auto; margin-top: 9px; padding: 10px; border: 1px solid #242737; border-radius: 9px; background: #070910; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.event-line { padding: 5px 0; border-bottom: 1px solid #1d1f2c; }
.attack-arrows { position: fixed; inset: 0; z-index: 30; width: 100vw; height: 100vh; pointer-events: none; }
.attack-arrows line { stroke: var(--gold); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 5px var(--gold)); marker-end: url(#online-arrowhead); }
.attack-arrows polygon { fill: var(--gold); }
.attack-arrows.active line { opacity: .95; }
.death-vfx { position: fixed; pointer-events: none; z-index: 40; }
.death-vfx.active::before, .death-vfx.active::after { content: "✦"; position: absolute; color: #e7d6ff; animation: fragment .75s ease-out forwards; }
.death-vfx.active::after { animation-delay: .06s; color: var(--danger); transform: translate(12px, 4px); }
.battle-stage.impact { animation: impact .28s ease-out; }

.result-view { max-width: 780px; margin: 7vh auto; text-align: center; border-color: #76613b; }
.result-view h1 { font-size: clamp(3rem, 7vw, 6rem); margin-bottom: 14px; }
.result-summary { color: var(--muted); font-size: 1.05rem; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0; }
.result-stat { border: 1px solid var(--line); border-radius: 11px; padding: 13px; color: var(--muted); }
.result-stat b { display: block; color: var(--ink); font-size: 1.08rem; margin-top: 4px; }
.result-actions, .modal-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }

.network-overlay, .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; background: rgba(4,5,10,.78); backdrop-filter: blur(9px); }
.network-card, .modal-card { width: min(540px, 100%); padding: 28px; border: 1px solid var(--line-bright); border-radius: 18px; background: #11131f; box-shadow: var(--shadow); text-align: center; }
.network-card h2, .modal-card h2 { margin: 7px 0 13px; font: 700 1.8rem/1.1 Georgia, serif; }
.modal-card p { color: var(--muted); line-height: 1.55; }
.spinner { display: block; width: 38px; height: 38px; margin: 0 auto 18px; border: 3px solid #33354b; border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 150; max-width: 390px; padding: 13px 16px; border: 1px solid #6a58a3; border-radius: 11px; background: #19152a; box-shadow: var(--shadow); }
.toast.bad { border-color: #873f48; color: #ffc2c7; }
.toast.good { border-color: #2e725a; color: #b8ffdf; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes impact { 50% { transform: translateX(3px); filter: brightness(1.22); } }
@keyframes fragment { to { opacity: 0; transform: translate(var(--dx, 24px), var(--dy, -38px)) rotate(90deg) scale(.4); } }

@media (max-width: 1180px) {
  .deck-grid { grid-template-columns: repeat(3, 1fr); }
  .battle-stage { grid-template-columns: minmax(235px, .8fr) minmax(310px, 1.1fr) minmax(235px, .8fr); }
  .panel { padding: 18px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .auth-layout, .battle-stage { grid-template-columns: 1fr; }
  .auth-panel { justify-self: stretch; max-width: none; }
  .hero-copy h1 { font-size: 3.2rem; }
  .hub-grid { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .deck-grid { grid-template-columns: repeat(2, 1fr); }
  .friend-grid { grid-template-columns: 1fr; }
  .match-toolbar { grid-template-columns: auto 1fr; }
  .match-title { text-align: left; }
  .network-state { grid-column: 1 / -1; justify-self: stretch; text-align: left; }
  .battle-center { order: -1; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}

@media (max-width: 600px) {
  .shell { width: min(100% - 20px, 1440px); }
  .topbar { padding: 14px 0; align-items: flex-start; }
  .topbar-status { align-items: flex-end; flex-direction: column; }
  .brand { font-size: .82rem; }
  .brand-mark { width: 36px; height: 36px; }
  .hub-heading { align-items: flex-start; flex-direction: column; }
  .deck-grid { grid-template-columns: 1fr; }
  .row, .friend-card, .active-match { align-items: flex-start; flex-direction: column; }
  .row-actions { justify-content: flex-start; }
  .lobby-players { grid-template-columns: 1fr; }
  .lobby-players::before { grid-column: 1; grid-row: 2; }
  .lobby-player:first-child { grid-column: 1; grid-row: 1; }
  .lobby-player:last-child { grid-column: 1; grid-row: 3; }
  .actions { grid-template-columns: 1fr; }
  .choice-row { grid-template-columns: 1fr; }
  .result-stats { grid-template-columns: 1fr; }
  .export-actions { justify-content: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}