:root{
  --bg:#05060A;
  --panel:#0A0D14;
  --panel-2:#0E1220;
  --line:#1A2133;
  --line-2:#26304A;
  --text:#C8D3E6;
  --dim:#6B7894;
  --faint:#3A4560;
  --red:#FF2E3A;
  --red-dim:#7A0F16;
  --cyan:#2EE6D6;
  --cyan-dim:#0D5C56;
  --amber:#FFB020;
  --green:#3BF07A;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --pixel:"VT323",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:15px;line-height:1.55}
body{min-height:100vh;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--cyan)}
::selection{background:var(--red);color:#fff}

/* CRT overlay */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:49;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}

.wrap{max-width:900px;margin:0 auto;padding:28px 16px 48px}

/* Brand */
.brand{text-align:center;margin:8px 0 22px}
.logo{
  font-family:var(--pixel);font-weight:400;letter-spacing:.04em;line-height:.9;
  font-size:clamp(3rem,11vw,5.6rem);color:#fff;
  text-shadow:0 0 18px rgba(255,46,58,.45),3px 3px 0 var(--red-dim);
}
.logo span{color:var(--red)}
.logo-link{display:inline-block;text-decoration:none;transition:transform .15s}
.logo-link:hover{transform:scale(1.02)}
.logo-link:active{transform:scale(.98)}

/* Touch + keyboard polish */
html{-webkit-tap-highlight-color:transparent}
button,.tab,.menu-item,.preset,.chip,.logo-link{touch-action:manipulation;-webkit-user-select:none;user-select:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.field:focus-within :focus-visible,textarea:focus-visible{outline:none}
.count-warn{color:var(--amber)!important}
.count-full{color:var(--red)!important}
.tagline{color:var(--dim);font-size:.85rem;margin-top:6px;letter-spacing:.08em;text-transform:uppercase}

/* Terminal window */
.term{
  background:var(--panel);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 1px #000,0 30px 80px -20px rgba(255,46,58,.18);
}
.term-bar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--panel-2);
  border-bottom:1px solid var(--line);font-size:.78rem;color:var(--faint);
}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#FF5F57}.dot.y{background:#FEBC2E}.dot.g{background:#28C840}
.term-bar .path{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-bar .status{margin-left:auto;color:var(--green);white-space:nowrap}
.screen{padding:22px clamp(16px,4vw,32px) 28px;min-height:420px}

/* Type */
h2.h{font-family:var(--pixel);font-weight:400;font-size:2rem;line-height:1;color:#fff;margin-bottom:6px;letter-spacing:.03em}
.sub{color:var(--dim);font-size:.85rem}
.prompt-line{color:var(--dim)}
.prompt-line::before{content:"> ";color:var(--red)}
.amber{color:var(--amber)}.green{color:var(--green)}.red{color:var(--red)}.cyan{color:var(--cyan)}.dim{color:var(--dim)}
.cursor::after{content:"█";animation:blink 1s steps(1) infinite;margin-left:2px;color:var(--text)}
@keyframes blink{50%{opacity:0}}
.blink{animation:blink 1.1s steps(1) infinite}
hr.sep{border:0;border-top:1px dashed var(--line-2);margin:20px 0}
.small{font-size:.8rem}

/* Inputs */
.field{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);background:#06080D;border-radius:6px;padding:10px 12px}
.field label{color:var(--red);white-space:nowrap;font-size:.85rem}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;text-transform:uppercase;letter-spacing:.06em}
.field:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,46,58,.12)}
textarea.army{
  width:100%;min-height:150px;resize:vertical;background:#06080D;border:1px solid var(--line-2);border-radius:6px;
  padding:14px;outline:0;line-height:1.6;
}
textarea.army:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,46,58,.12)}
textarea.army:disabled{opacity:.6}

/* Menu */
.menu{display:grid;gap:10px;margin:20px 0 6px}
.menu-item{
  display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:6px;padding:14px 16px;transition:.12s;
}
.menu-item:hover,.menu-item:focus-visible{border-color:var(--red);background:rgba(255,46,58,.06);outline:0}
.menu-item:hover .k{background:var(--red);color:#fff}
.menu-item .k{font-family:var(--pixel);font-size:1.35rem;line-height:1;color:var(--red);border:1px solid var(--red);border-radius:4px;padding:1px 8px;transition:.12s}
.menu-item .t{font-weight:600;color:#fff;letter-spacing:.04em}
.menu-item .d{color:var(--dim);font-size:.82rem;margin-left:auto;text-align:right}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  border:1px solid var(--line-2);background:transparent;border-radius:6px;padding:11px 18px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;transition:.12s;
}
.btn:hover{border-color:var(--text)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 22px rgba(255,46,58,.35)}
.btn.primary:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.end{justify-content:flex-end}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* Info grid on home */
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.how div{border:1px dashed var(--line-2);border-radius:6px;padding:12px;font-size:.8rem;color:var(--dim)}
.how b{display:block;font-family:var(--pixel);font-size:1.5rem;font-weight:400;color:var(--amber);line-height:1;margin-bottom:4px}

/* Room code */
.codebox{
  font-family:var(--pixel);font-size:clamp(3rem,14vw,5rem);letter-spacing:.25em;line-height:1;color:#fff;
  text-align:center;padding:18px 0 10px;text-shadow:0 0 22px rgba(46,230,214,.4);
}

/* Versus header */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:18px}
.fighter{border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.fighter.p1{border-color:var(--red-dim)}
.fighter.p2{border-color:var(--cyan-dim);text-align:right}
.fighter .who{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fighter .nm{font-weight:700;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fighter.p1 .nm{color:var(--red)}.fighter.p2 .nm{color:var(--cyan)}
.fighter .lbl{font-size:.8rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fighter .st{font-size:.78rem;margin-top:2px}
.vs{font-family:var(--pixel);font-size:2rem;color:var(--amber);line-height:1}
.hpbar{font-size:.85rem;letter-spacing:-.02em;white-space:nowrap;margin-top:6px}
.fighter.p1 .hpbar .fill{color:var(--red)}
.fighter.p2 .hpbar .fill{color:var(--cyan)}
.hpbar .empty{color:var(--faint)}
.hpbar .num{color:#fff;margin-left:6px;letter-spacing:0}
.fighter.hit{animation:shake .35s}
@keyframes shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Battle log */
.log{
  background:#04050A;border:1px solid var(--line);border-radius:8px;padding:16px;min-height:220px;
  max-height:52vh;overflow-y:auto;font-size:.9rem;
}
.log p{margin-bottom:12px}
.log .rnd{color:var(--amber);font-family:var(--pixel);font-size:1.25rem;letter-spacing:.06em;margin-bottom:2px}
.log .ko{color:#fff;font-weight:700}
.log .sys{color:var(--dim)}
.skip{font-size:.75rem;color:var(--faint);text-align:right;margin-top:6px}

/* Results */
.banner{text-align:center;margin:26px 0 8px}
.banner .big{font-family:var(--pixel);font-size:clamp(3.4rem,13vw,6rem);line-height:.9;letter-spacing:.06em}
.banner .big.win{color:var(--green);text-shadow:0 0 26px rgba(59,240,122,.45)}
.banner .big.lose{color:var(--red);text-shadow:0 0 26px rgba(255,46,58,.45)}
.badge{display:inline-block;border:1px solid var(--amber);color:var(--amber);border-radius:4px;padding:2px 10px;font-size:.75rem;letter-spacing:.14em;margin-top:8px}
.section-t{font-family:var(--pixel);font-size:1.45rem;color:var(--amber);letter-spacing:.06em;margin:24px 0 10px}
.odds{display:flex;height:34px;border-radius:5px;overflow:hidden;border:1px solid var(--line-2)}
.odds div{display:flex;align-items:center;padding:0 10px;font-weight:700;font-size:.85rem;white-space:nowrap;min-width:0;transition:width 1s ease}
.odds .o1{background:linear-gradient(90deg,var(--red-dim),var(--red));color:#fff}
.odds .o2{background:linear-gradient(90deg,var(--cyan),var(--cyan-dim));color:#00211E;justify-content:flex-end}
.dice{margin-top:10px;font-size:.85rem;color:var(--dim)}
.dice b{color:#fff}

.stats{width:100%;border-collapse:collapse;font-size:.85rem}
.stats td{padding:6px 4px;border-bottom:1px dashed var(--line)}
.stats .k{text-align:center;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;width:96px}
.stats .v{width:34px;text-align:center;font-weight:700}
.stats .bar{white-space:nowrap;letter-spacing:-.04em}
.stats .bar.l{text-align:right;color:var(--red)}
.stats .bar.r{color:var(--cyan)}
.stats .better{color:#fff}

.sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.side{border:1px solid var(--line);border-radius:8px;padding:14px;font-size:.85rem}
.side.p1{border-top:2px solid var(--red)}.side.p2{border-top:2px solid var(--cyan)}
.side h4{font-size:.95rem;color:#fff;margin-bottom:2px}
.side .meta{color:var(--dim);font-size:.78rem;margin-bottom:8px}
.side blockquote{border-left:2px solid var(--line-2);padding-left:10px;color:var(--dim);font-style:italic;margin:8px 0;white-space:pre-wrap;word-break:break-word}
.side ul{list-style:none;margin-top:6px}
.side li{padding-left:16px;position:relative;margin-bottom:3px}
.side li.plus::before{content:"+";position:absolute;left:0;color:var(--green);font-weight:700}
.side li.minus::before{content:"−";position:absolute;left:0;color:var(--red);font-weight:700}
.verdict{border:1px solid var(--line);border-radius:8px;padding:14px;font-size:.88rem}
.verdict ul{list-style:none;margin-top:8px}
.verdict li::before{content:"» ";color:var(--amber)}
.score{font-family:var(--pixel);font-size:1.6rem;text-align:center;letter-spacing:.08em}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{border:1px dashed var(--line-2);border-radius:999px;padding:4px 10px;font-size:.75rem;color:var(--dim);background:none;cursor:pointer}
.chip:hover{border-color:var(--amber);color:var(--amber)}

.notice{border:1px solid var(--amber);color:var(--amber);border-radius:6px;padding:10px 12px;font-size:.85rem;margin-top:14px}
.err{border-color:var(--red);color:var(--red)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--green);color:var(--green);padding:8px 14px;border-radius:6px;font-size:.85rem;z-index:60}

.foot{text-align:center;color:var(--faint);font-size:.75rem;margin-top:22px;letter-spacing:.08em}

/* Tabs */
.tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--panel-2);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;color:var(--dim);
  padding:10px 12px;font-size:.78rem;letter-spacing:.1em;font-weight:600;white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.on{color:#fff;border-bottom-color:var(--red)}
.tab.right{margin-left:auto}
.tab .pill{display:inline-block;background:var(--red);color:#fff;border-radius:999px;font-size:.66rem;padding:0 6px;margin-left:5px;line-height:1.5}
.tab{position:relative}
.tab .ti,.tab .ts{display:none}

/* Phones: app-style fixed bottom navigation */
@media (max-width:600px){
  body:has(#tabs:not(.hidden)){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0 0 env(safe-area-inset-bottom);
    border-top:1px solid var(--line-2);border-bottom:0;
    background:rgba(10,13,20,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;padding:6px 0;border-bottom:0;border-top:2px solid transparent;
    font-size:.68rem;letter-spacing:.04em;
  }
  .tab.on{border-top-color:var(--red);border-bottom-color:transparent;color:#fff}
  .tab.on .ti{color:var(--red)}
  .tab .ti{display:block;font-size:1.25rem;line-height:1}
  .tab .tl{display:none}
  .tab .ts{display:block;white-space:nowrap}
  .tab .pill{position:absolute;top:5px;left:calc(50% + 6px);margin:0;font-size:.64rem;padding:0 5px}
  .tab.desk-only{display:none}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}
.me-chip{color:var(--text)}
.me-chip b{color:var(--amber);font-weight:600}

/* Alerts (incoming invites) */
#alerts:empty{display:none}
#alerts{padding:10px clamp(16px,4vw,32px) 0}
.alert{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--amber);border-radius:6px;padding:8px 12px;margin-bottom:6px;background:rgba(255,176,32,.06);font-size:.85rem}
.alert .grow{flex:1;min-width:160px}
.btn.sm{padding:6px 11px;font-size:.72rem}

/* Auth */
.auth{max-width:420px;margin:10px auto 0}
.auth .field{margin-bottom:10px}
.auth .field input{text-transform:none;letter-spacing:.02em}
.switch{display:flex;gap:6px;margin-bottom:16px}
.switch .btn{flex:1}
.switch .btn.on{border-color:var(--red);color:#fff;background:rgba(255,46,58,.1)}

/* Lists + tables */
.list{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.list .item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px dashed var(--line);font-size:.87rem}
.list .item:last-child{border-bottom:0}
.list .item .grow{flex:1;min-width:0}
.list .empty{padding:18px;color:var(--dim);font-size:.85rem;text-align:center}
.nm-link{color:#fff;font-weight:600;cursor:pointer;background:none;border:0;padding:0;text-decoration:underline dotted var(--faint);text-underline-offset:3px}
.nm-link:hover{color:var(--amber)}
.nm-link.inherit{color:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
.nm-link.inherit:hover{color:var(--amber)}
.top-prompt{border-left-color:var(--amber)}
.top-prompt blockquote{max-height:none}
.tp-stats{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:.8rem}
.online{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);margin-right:8px;vertical-align:middle}
.online.on{background:var(--green);box-shadow:0 0 8px var(--green)}
.tbl{width:100%;border-collapse:collapse;font-size:.87rem}
.tbl th{text-align:left;color:var(--dim);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line-2)}
.tbl td{padding:9px 10px;border-bottom:1px dashed var(--line)}
.tbl tr.you td{background:rgba(255,46,58,.08)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.rank1{color:#FFD54A}.rank2{color:#D9E2EC}.rank3{color:#E39A5B}
.win{color:var(--green);font-weight:700}.loss{color:var(--red);font-weight:700}
.two{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}

/* Chat */
.chat{border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;height:430px;background:#04050A}
.chat-log{flex:1;overflow-y:auto;padding:10px 12px;font-size:.85rem}
.chat-log p{margin-bottom:5px;word-break:break-word}
.chat-log .t{color:var(--faint);font-size:.72rem;margin-right:6px}
.chat-log .del{color:var(--faint);font-style:italic}
.chat-log .x{background:none;border:0;color:var(--faint);cursor:pointer;margin-left:6px;font-size:.75rem}
.chat-log .x:hover{color:var(--red)}
.chat-in{display:flex;border-top:1px solid var(--line)}
.chat-in input{flex:1;min-width:0;background:none;border:0;outline:0;padding:10px 12px}
.chat-in button{border:0;border-left:1px solid var(--line);background:none;color:var(--red);font-weight:700;padding:0 14px;cursor:pointer}

/* Preset roster + pass */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.roster.locked{opacity:.55;pointer-events:none}
.preset{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  background:#06080D;border:1px solid var(--line-2);border-radius:6px;padding:10px 11px;transition:.12s;
}
.preset:hover{border-color:var(--amber)}
.preset.on{border-color:var(--red);background:rgba(255,46,58,.1);box-shadow:0 0 0 1px var(--red)}
.preset .ic{font-size:1.4rem;line-height:1}
.preset .pn{font-weight:700;color:#fff;font-size:.82rem;margin-top:4px}
.preset .pb{font-size:.7rem;color:var(--dim);line-height:1.35}
.cur-switch{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip.on{border-style:solid;border-color:var(--amber);color:var(--amber)}
.passbadge.supporter{border-color:var(--red);color:var(--red)}
.amounts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.btn.amt{min-width:84px;font-size:1rem}
.btn.amt.on{border-color:var(--red);color:#fff;background:rgba(255,46,58,.12)}
.amt-custom{width:170px;padding:6px 10px}
.amt-custom input{text-transform:none}
.passbadge{display:inline-block;border:1px solid var(--amber);color:var(--amber);border-radius:3px;padding:0 5px;font-size:.66rem;letter-spacing:.08em;font-weight:700;vertical-align:middle;line-height:1.6}

/* Recently used prompts */
.recent-prompts{display:grid;gap:6px;margin-top:12px}
.rp{
  text-align:left;cursor:pointer;background:#06080D;border:1px solid var(--line-2);border-left:3px solid var(--amber);
  border-radius:5px;padding:7px 10px;font-size:.8rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rp:hover{border-color:var(--amber);color:#fff}

/* Draft countdown */
.timer{font-family:var(--pixel);font-size:1.6rem;line-height:1;color:var(--amber);border:1px solid var(--line-2);border-radius:6px;padding:4px 10px;white-space:nowrap}
.timer.urgent{color:#fff;background:var(--red);border-color:var(--red);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}

/* A locked-in army */
.armybox{border:1px solid var(--line-2);border-left:3px solid var(--amber);border-radius:6px;padding:10px 12px;margin:0 0 14px;background:#06080D}
.armybox .ab-h{font-size:.68rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.armybox .ab-name{font-weight:700;color:#fff;margin-top:2px;font-size:.9rem}
.armybox blockquote{margin-top:6px;color:var(--text);font-size:.85rem;white-space:pre-wrap;word-break:break-word;max-height:9em;overflow-y:auto}

/* Both armies above a live battle */
.armies-top{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.armies-top .armybox{margin:0}
.armies-top .armybox.p1{border-left-color:var(--red)}
.armies-top .armybox.p2{border-left-color:var(--cyan)}
.armies-top blockquote{max-height:6.5em;font-size:.8rem}
.twist{border:1px dashed var(--amber);border-radius:6px;padding:8px 12px;margin:0 0 12px;font-size:.85rem;color:var(--amber)}
.twist b{color:#fff}
.verdict-line{text-align:center;margin-top:8px;font-size:.9rem;color:var(--text)}
@media (max-width:480px){
  .armies-top{grid-template-columns:1fr}
  .armies-top blockquote{max-height:4.8em}
}

/* Admin dashboard */
.admin .btn.sm.on{border-color:var(--red);color:#fff;background:rgba(255,46,58,.12)}
.kpis{grid-template-columns:repeat(4,1fr)}
.kpis div{min-width:0}
.kpis em{display:block;font-style:normal;font-size:.7rem;color:var(--dim);margin-top:4px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.charts.three{grid-template-columns:repeat(3,1fr)}
.chart{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#06080D;min-width:0}
.chart-t{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.chart-total{font-family:var(--pixel);font-size:1.6rem;color:#fff;line-height:1.1}
.chart-wrap{position:relative;margin-top:6px}
.chart-svg{display:block;width:100%;height:auto}
.chart-tip{position:absolute;top:-6px;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line-2);border-radius:4px;padding:3px 8px;font-size:.72rem;white-space:nowrap;pointer-events:none;color:var(--text)}
.chart-tip b{color:#fff}
.chart-x{display:flex;justify-content:space-between;font-size:.7rem;color:var(--faint);margin-top:2px}
.rank-list{display:grid;gap:7px;margin-top:10px}
.rank-row{display:grid;grid-template-columns:minmax(0,1fr) 70px auto;align-items:center;gap:8px;font-size:.8rem}
.rank-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.rank-bar span{display:block;height:100%;background:var(--cyan);border-radius:3px}
.rank-n{color:#fff;font-weight:600;text-align:right;min-width:2.5em}
.recent{display:grid;gap:6px;margin-top:10px}
.rec{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;min-width:0}
.rec.link{background:none;border:0;padding:0;text-align:left;cursor:pointer;width:100%}
.rec.link:hover{color:var(--amber)}
.rec > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){
  .charts.three{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .kpis{grid-template-columns:1fr 1fr}
  .charts,.charts.three{grid-template-columns:1fr}
}

.online-now{display:flex;align-items:center;font-size:.8rem;color:var(--green);margin-bottom:8px;letter-spacing:.04em}

/* Landing content for logged-out visitors (and search engines) */
.landing{margin-top:22px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:22px clamp(16px,4vw,32px);font-size:.9rem;line-height:1.7}
.landing h2{font-family:var(--pixel);font-weight:400;font-size:1.6rem;color:var(--amber);letter-spacing:.04em;margin:22px 0 8px;line-height:1.1}
.landing h2:first-child{margin-top:0;color:#fff}
.landing ol,.landing ul{padding-left:1.3em}
.landing li{margin-bottom:6px}
.landing b{color:#fff}
.landing em{color:var(--amber);font-style:normal}
.roster-list{color:var(--dim)}
.landing details{border:1px solid var(--line);border-radius:6px;padding:9px 12px;margin-bottom:6px}
.landing summary{cursor:pointer;color:#fff;font-weight:600}
.landing details p{margin-top:6px;color:var(--text)}
.landing-cta{text-align:center;margin-top:20px}

/* Public server-rendered pages (/battle/…, /player/…) */
.seo-page a{color:inherit}
.seo-page .armybox h2.ab-name{font-size:.95rem;margin:2px 0}
.seo-page .ab-h a,.seo-page .hist a{text-decoration:none}
.seo-page .ab-h a:hover{color:var(--amber)}
.seo-log{max-height:none}
.seo-log .rnd{font-weight:400;font-size:1.25rem}
.seo-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;text-align:center}
.seo-cta .btn{text-decoration:none}
.seo-cta p{width:100%;margin-top:4px}
a.hcard{text-decoration:none;color:inherit}

/* CODE ALPHA panel */
.alpha-stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 12px;font-size:.82rem;color:var(--dim)}
.alpha-stats b{color:#fff}
.alpha-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.alpha-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:.82rem;cursor:pointer}
.alpha-row em{display:block;font-style:normal;font-size:.7rem;color:var(--faint)}
.alpha-row input[type=number]{width:76px;background:#06080D;border:1px solid var(--line-2);border-radius:4px;padding:5px 7px;text-align:right}
.alpha-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--red);flex-shrink:0}
@media (max-width:700px){ .alpha-form{grid-template-columns:1fr} }

/* Battle history cards */
.hist{display:grid;gap:8px}
.hcard{
  display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:#06080D;border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:6px;padding:11px 14px;transition:.12s;
}
.hcard:hover{border-color:var(--line-2);background:var(--panel-2)}
.hcard.won{border-left-color:var(--green)}
.hcard.lost{border-left-color:var(--red)}
.hres{font-family:var(--pixel);font-size:1.3rem;line-height:1}
.hcard.won .hres{color:var(--green)}.hcard.lost .hres{color:var(--red)}
.hbody{display:flex;flex-direction:column;gap:2px;min-width:0}
.htitle{color:#fff;font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmatch{font-size:.8rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmeta{font-size:.72rem;color:var(--dim)}
.hdelta{font-weight:700;font-size:.85rem;text-align:right}
.hdelta.dim{font-size:.68rem;letter-spacing:.08em;font-weight:600}
.pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
@media (max-width:480px){
  .hcard{grid-template-columns:40px 1fr auto;gap:9px;padding:10px 11px}
  .hres{font-size:1.1rem}
}

/* Profile */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.statgrid div{border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.statgrid b{display:block;font-family:var(--pixel);font-size:1.9rem;font-weight:400;color:#fff;line-height:1}
.statgrid span{font-size:.7rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.elo-line{text-align:center;margin-top:8px;font-size:.95rem}
.elo-line .up{color:var(--green);font-weight:700}.elo-line .down{color:var(--red);font-weight:700}
.hidden{display:none!important}

@media (max-width:700px){
  .two{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
  .tbl .hide-sm{display:none}
  .chat{height:360px}
  .how{grid-template-columns:1fr 1fr}
  .sides{grid-template-columns:1fr}
  .menu-item{flex-wrap:wrap}
  .menu-item .d{margin-left:0;text-align:left;width:100%}
  .stats .bar{font-size:.7rem}
  .stats .k{width:76px;font-size:.68rem;letter-spacing:.04em}
}
/* Phones: keep both fighters side by side so HP bars and the battle log fit on one screen */
@media (max-width:480px){
  .wrap{padding:14px 10px 32px}
  .brand{margin:2px 0 14px}
  .screen{min-height:360px;padding:16px 14px 22px}
  .versus{gap:6px;margin-bottom:12px}
  .fighter{padding:8px 9px}
  .fighter .who{font-size:.68rem;letter-spacing:.06em}
  .fighter .nm{font-size:.85rem}
  .fighter .lbl{font-size:.7rem}
  .fighter .st{font-size:.7rem}
  .hpbar{font-size:.72rem}
  .vs{font-size:1.1rem}
  h2.h{font-size:1.6rem}
  .log{max-height:46vh;padding:12px;font-size:.86rem}
  .field{flex-wrap:wrap}
  .field input{flex:1 1 140px}
  .codebox{letter-spacing:.15em}
  .banner{margin-top:18px}
  .term-bar .path{display:none}
  .term-bar .status{margin-left:auto}
}

/* Stop iOS zooming into form fields (it zooms when text is under 16px) */
@media (max-width:700px){
  input,textarea{font-size:16px}
}

/* Comfortable tap targets on touchscreens, phones and tablets */
@media (pointer:coarse), (max-width:900px){
  .btn{min-height:44px}
  .btn.sm{min-height:38px}
  .chip{min-height:34px}
  .tab{min-height:40px}
  .field input{min-height:36px}
  .rec.link{min-height:36px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}