/* ==========================================================
   BATTLE MVP HUB
   Compatible with includes/layout.php
   ========================================================== */

:root{
    --hub-bg:#050b12;
    --hub-card:#0c1218;
    --hub-card2:#0f171f;

    --hub-accent:#00ffa6;
    --hub-accent-dim:rgba(0,255,166,.12);

    --hub-text:#eaf1ff;
    --hub-text2:#7c8a9a;

    --hub-border:#1a2530;

    --hub-live:#ff3860;
    --hub-radius:12px;
}

/* ==========================================================
   PAGE
   ========================================================== */

.hub-page{
    display:flex;
    flex-direction:column;
    gap:24px;
    width:100%;
}

.hub-main{
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* ==========================================================
   LIVE TICKER
   ========================================================== */

.ticker-wrap{

    background:
        linear-gradient(
            90deg,
            rgba(255,56,96,.08),
            transparent 40%,
            transparent 60%,
            rgba(255,56,96,.08)
        );

    border:1px solid var(--hub-border);
    border-radius:12px;

    overflow:hidden;
    white-space:nowrap;

    position:relative;

    padding:10px 0;
}

.ticker-wrap::before{

    content:"? LIVE";

    position:absolute;

    left:18px;
    top:50%;

    transform:translateY(-50%);

    color:var(--hub-live);

    font-weight:700;

    letter-spacing:.08em;

    font-size:12px;

    z-index:3;

    background:#050b12;

    padding-right:14px;
}

.ticker-track{

    display:flex;

    gap:40px;

    padding-left:100px;

    animation:hubTicker 32s linear infinite;
}

.ticker-wrap:hover .ticker-track{
    animation-play-state:paused;
}

@keyframes hubTicker{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

.ticker-item{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--hub-text2);

    font-size:13px;
}

.ticker-item b{
    color:#fff;
}

.score{

    color:var(--hub-accent);

    font-weight:700;
}

.map-tag{

    padding:2px 8px;

    border-radius:6px;

    background:var(--hub-card2);

    color:var(--hub-text2);

    font-size:11px;
}

/* ==========================================================
   WELCOME
   ========================================================== */

.welcome-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;
}

.welcome-row h1{

    font-size:34px;

    font-weight:800;

    margin:0;
}

.sub{

    margin-top:8px;

    color:var(--hub-text2);
}

/* ==========================================================
   STATS
   ========================================================== */

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:18px;
}

.stat-card{

    background:var(--hub-card);

    border:1px solid var(--hub-border);

    border-radius:12px;

    padding:22px;
}

.stat-card .label{

    color:var(--hub-text2);

    text-transform:uppercase;

    font-size:11px;
}

.stat-card .value{

    margin-top:10px;

    font-size:28px;

    font-weight:800;
}

.stat-card .accent{

    color:var(--hub-accent);
}

.delta{

    margin-top:8px;

    color:var(--hub-text2);

    font-size:12px;
}

.delta.up{

    color:var(--hub-accent);
}

/* ==========================================================
   CARDS
   ========================================================== */

.card{

    background:var(--hub-card);

    border:1px solid var(--hub-border);

    border-radius:12px;
}

/* ==========================================================
   MISSION
   ========================================================== */

.mission-strip{

    display:flex;

    gap:18px;

    padding:20px;
}

.ico{

    width:42px;

    height:42px;

    border-radius:10px;

    background:var(--hub-accent-dim);

    color:var(--hub-accent);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.body{

    flex:1;
}

.progress-bar{

    margin-top:10px;

    height:6px;

    background:#202a35;

    border-radius:30px;

    overflow:hidden;
}

.progress-bar i{

    display:block;

    height:100%;

    background:var(--hub-accent);
}

/* ==========================================================
   FEED
   ========================================================== */

.feed-tabs{

    display:flex;

    gap:8px;

    margin-top:12px;
}

.feed-tab{

    padding:7px 14px;

    border-radius:8px;

    border:1px solid var(--hub-border);

    background:var(--hub-card);

    cursor:pointer;

    color:var(--hub-text2);
}

.feed-tab.active{

    background:var(--hub-accent-dim);

    color:var(--hub-accent);

    border-color:transparent;
}

.feed-card{

    display:flex;

    gap:14px;

    padding:20px;

    border-bottom:1px solid var(--hub-border);
}

.feed-card:last-child{

    border-bottom:none;
}

.avatar{

    width:42px;

    height:42px;

    border-radius:10px;

    background:var(--hub-card2);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#9ca9b6;

    flex-shrink:0;
}

.feed-body{

    flex:1;
}

.feed-top{

    display:flex;

    gap:10px;

    align-items:center;
}

.feed-time{

    margin-left:auto;

    color:var(--hub-text2);

    font-size:12px;
}

.feed-text{

    margin-top:8px;

    color:var(--hub-text2);

    line-height:1.6;
}

.feed-actions{

    display:flex;

    gap:18px;

    margin-top:10px;

    color:var(--hub-text2);

    font-size:13px;
}

.tag{

    padding:3px 8px;

    border-radius:6px;

    font-size:11px;

    text-transform:uppercase;
}

.rankup{

    background:rgba(0,255,166,.12);

    color:var(--hub-accent);
}

.finished{

    background:rgba(73,131,255,.15);

    color:#7fb4ff;
}

.highlight{

    background:rgba(255,177,0,.15);

    color:#ffb100;
}

.data-note{

    padding:14px 20px;

    color:#586472;

    font-size:11px;

    font-style:italic;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:1000px){

    .grid-3{

        grid-template-columns:1fr;
    }

}
.friends-count{
    font-size:14px;
    color:var(--hub-text2);
}
.progress-fill{
    width:66%;
}

/* ===== HUB LAYOUT ===== */

.hub-page{
    width:100%;
}

.hub-content{
    width:100%;
    max-width:1400px;
    margin:0 auto;
}

.hub-main{
    width:100%;
}

.welcome-row,
.grid-3,
.mission-strip,
.section-head,
.feed-tabs,
.card{
    width:100%;
}
.hub-main{
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:8px 0 30px;
}

/* ==========================================================
   HUB NAVIGATION
   ========================================================== */

.hub-nav{

    display:flex;
    gap:12px;

    margin:18px 0 28px;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;

}

.hub-nav::-webkit-scrollbar{
    display:none;
}

.hub-nav-item{

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:14px;

    text-decoration:none;

    color:var(--hub-text2);

    background:var(--hub-card);

    border:1px solid var(--hub-border);

    transition:.25s;

    white-space:nowrap;

    font-size:14px;

    font-weight:600;

}

.hub-nav-item:hover{

    transform:translateY(-2px);

    border-color:var(--hub-accent);

    color:var(--hub-text);

}

.hub-nav-item.active{

    background:linear-gradient(
        135deg,
        rgba(0,255,166,.18),
        rgba(0,255,166,.05)
    );

    color:var(--hub-accent);

    border-color:var(--hub-accent);

    box-shadow:0 0 18px rgba(0,255,166,.18);

}

.hub-nav-item span:first-child{

    font-size:18px;

}


/* ==========================================================
   COMMAND CENTER
   ========================================================== */

.command-center{

    background:linear-gradient(
        180deg,
        rgba(0,255,166,.06),
        rgba(8,14,22,.96)
    );

    border:1px solid rgba(0,255,166,.12);

    border-radius:18px;

    padding:26px;

    margin-bottom:26px;

}

.cc-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

    margin-bottom:24px;

}

.cc-pretitle{

    display:inline-block;

    color:var(--hub-accent);

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:10px;

}

.cc-header h2{

    margin:0;

    font-size:34px;

    color:var(--hub-text);

}

.cc-header p{

    margin:10px 0 0;

    color:var(--hub-text2);

    max-width:520px;

}

.cc-season{

    text-align:right;

}

.cc-value{

    font-size:22px;

    font-weight:700;

    color:var(--hub-accent);

}

.cc-label{

    color:var(--hub-text2);

    margin-top:6px;

}

.cc-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:18px;

}

.cc-card{

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    border-radius:16px;

    padding:22px;

    transition:.25s;

}

.cc-card:hover{

    transform:translateY(-4px);

    border-color:rgba(0,255,166,.45);

}

.cc-icon{

    font-size:28px;

    margin-bottom:14px;

}

.cc-title{

    font-size:16px;

    font-weight:700;

    color:var(--hub-text);

}

.cc-text{

    margin-top:8px;

    color:var(--hub-text2);

}

@media(max-width:1100px){

    .cc-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:700px){

    .cc-header{

        flex-direction:column;

    }

    .cc-season{

        text-align:left;

    }

    .cc-grid{

        grid-template-columns:1fr;

    }

}


.cc-text{

    margin-top:8px;

    color:var(--hub-text2);

    line-height:1.6;

}

@media (max-width:1100px){

    .cc-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media (max-width:700px){

    .cc-header{

        flex-direction:column;

    }

    .cc-season{

        text-align:left;

    }

    .cc-grid{

        grid-template-columns:1fr;

    }

}


/* ===== Battle DNA ===== */
.dna-wrap { padding: 8px 4px; }
.dna-head h1 { font-family: 'Rajdhani', sans-serif; font-size: 34px; margin: 4px 0; color: #eaf1ff; }
.dna-head p { color: #4a6070; max-width: 620px; }
.dna-grid { display: grid; grid-template-columns: 340px 1fr; gap: 24px; margin-top: 20px; align-items: start; }
@media (max-width: 820px){ .dna-grid { grid-template-columns: 1fr; } }
.dna-radar-card { background: #0c1218; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 16px; }
.dna-radar { width: 100%; height: auto; }
.dna-ring { fill: none; stroke: rgba(255,255,255,.06); }
.dna-spoke { stroke: rgba(255,255,255,.08); }
.dna-poly { fill: rgba(0,255,166,.18); stroke: #00ffa6; stroke-width: 2; }
.dna-axis-label { fill: #eaf1ff; font: 600 11px 'Rajdhani',sans-serif; text-anchor: middle; }
.dna-confidence { text-align: center; color: #4a6070; font: 12px 'JetBrains Mono',monospace; margin-top: 10px; }
.dna-confidence b { color: #00d8ff; }
.dna-axes-list { display: flex; flex-direction: column; gap: 10px; }
.dna-axis-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 12px; }
.dna-axis-name { font-family: 'Rajdhani',sans-serif; font-weight: 600; color: #eaf1ff; }
.dna-axis-bar { height: 8px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.dna-axis-fill { height: 100%; background: linear-gradient(90deg,#24df92,#00d8ff); border-radius: 6px; }
.dna-axis-val { text-align: right; font: 600 13px 'JetBrains Mono',monospace; color: #00ffa6; }
.dna-axis-row.is-weak .dna-axis-fill { background: linear-gradient(90deg,#ff6b2b,#ffb347); }
.dna-axis-row.is-weak .dna-axis-val { color: #ff6b2b; }
.dna-focus { margin-top: 22px; background: #0c1218; border: 1px solid rgba(255,107,43,.25); border-radius: 12px; padding: 16px 18px; }
.dna-focus-title { font-family: 'Rajdhani',sans-serif; font-weight: 700; color: #ff6b2b; margin-bottom: 6px; }
.dna-focus p { color: #eaf1ff; margin: 0; }
.dna-empty { text-align: center; padding: 60px 20px; color: #4a6070; }
.dna-empty-icon { font-size: 48px; margin-bottom: 12px; }
.dna-empty h2 { font-family: 'Rajdhani',sans-serif; color: #eaf1ff; }

/* ==================== HUB REDESIGN (hx-*) ==================== */
.hx-shell{ --hx-bg:#050b12; --hx-card:#0c1218; --hx-accent:#00ffa6; --hx-accent2:#00d8ff;
  --hx-orange:#ff6b2b; --hx-text:#eaf1ff; --hx-muted:#4a6070; --hx-line:rgba(255,255,255,.06);
  display:flex; flex-direction:column; gap:18px; }

/* ---- Live ticker ---- */
.hx-ticker{ display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:linear-gradient(90deg,rgba(0,255,166,.06),transparent);
  border:1px solid var(--hx-line); border-radius:12px; overflow:hidden; }
.hx-ticker-dot{ width:8px; height:8px; border-radius:50%; background:var(--hx-accent);
  box-shadow:0 0 10px var(--hx-accent); animation:hxpulse 1.6s ease-in-out infinite; flex:none; }
.hx-ticker-dot.idle{ background:var(--hx-muted); box-shadow:none; animation:none; }
.hx-ticker-track{ display:flex; gap:28px; white-space:nowrap; }
.hx-ticker-item{ font:600 13px/1 'Rajdhani',sans-serif; color:var(--hx-text); letter-spacing:.3px; }
.hx-ticker-item.muted{ color:var(--hx-muted); font-weight:500; }
.hx-ticker-item em{ color:var(--hx-accent); font-style:normal; margin:0 6px; }
@keyframes hxpulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Layout: deck column + content ---- */
.hx-layout{ display:grid; grid-template-columns:230px 1fr; gap:22px; align-items:start; }
@media(max-width:860px){ .hx-layout{ grid-template-columns:1fr; } }

/* ---- Command Deck (vertical module column) ---- */
.hx-deck{ display:flex; flex-direction:column; gap:6px; position:sticky; top:12px; }
@media(max-width:860px){ .hx-deck{ flex-direction:row; overflow-x:auto; position:static; padding-bottom:6px; } }
.hx-mod{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--hx-line); border-radius:12px; background:var(--hx-card);
  color:var(--hx-muted); text-decoration:none; overflow:hidden; isolation:isolate;
  opacity:0; transform:translateX(-8px); animation:hxin .4s ease forwards;
  animation-delay:calc(var(--i)*55ms); transition:color .2s, border-color .2s, transform .2s; }
.hx-mod:hover{ color:var(--hx-text); border-color:rgba(0,255,166,.3); transform:translateX(2px); }
.hx-mod-ico{ display:flex; width:22px; height:22px; flex:none; }
.hx-mod-ico svg{ width:100%; height:100%; }
.hx-mod-label{ font:600 14px/1 'Rajdhani',sans-serif; letter-spacing:.4px; flex:1; }
.hx-mod-tag{ font:600 9px/1 'JetBrains Mono',monospace; text-transform:uppercase;
  color:var(--hx-muted); border:1px solid var(--hx-line); border-radius:4px; padding:3px 5px; }
/* active state: neon left edge + glow + scan */
.hx-mod.is-active{ color:var(--hx-text); border-color:rgba(0,255,166,.35);
  background:linear-gradient(90deg,rgba(0,255,166,.10),var(--hx-card) 60%); }
.hx-mod.is-active::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--hx-accent); box-shadow:0 0 12px var(--hx-accent); }
.hx-mod.is-active .hx-mod-ico{ color:var(--hx-accent); }
.hx-mod-glow{ position:absolute; inset:0; background:radial-gradient(120px 60px at 0% 50%,rgba(0,255,166,.14),transparent);
  opacity:0; transition:opacity .3s; z-index:-1; }
.hx-mod.is-active .hx-mod-glow{ opacity:1; }
/* signature: scan-line sweeping the active module */
.hx-mod-scan{ position:absolute; left:0; right:0; height:20px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,255,166,.12),transparent);
  transform:translateY(-30px); opacity:0; }
.hx-mod.is-active .hx-mod-scan{ opacity:1; animation:hxscan 3.2s linear infinite; }
.hx-mod.is-soon{ opacity:.72; }
.hx-mod.is-soon .hx-mod-label{ color:var(--hx-muted); }
@keyframes hxscan{ 0%{transform:translateY(-30px)} 100%{transform:translateY(64px)} }
@keyframes hxin{ to{opacity:1; transform:translateX(0)} }

/* ---- Content / hero ---- */
.hx-content{ min-width:0; }
.hx-hero{ position:relative; border:1px solid var(--hx-line); border-radius:16px;
  padding:32px 30px; overflow:hidden; background:var(--hx-card); margin-bottom:18px; }
.hx-hero-bg{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(600px 200px at 15% -20%,rgba(0,255,166,.12),transparent),
             radial-gradient(500px 200px at 100% 120%,rgba(0,216,255,.08),transparent); }
.hx-hero-inner{ position:relative; z-index:1; }
.hx-eyebrow{ font:600 11px/1 'JetBrains Mono',monospace; letter-spacing:2px;
  color:var(--hx-accent); text-transform:uppercase; }
.hx-hero-title{ font:700 34px/1.1 'Rajdhani',sans-serif; color:var(--hx-text); margin:10px 0 8px; }
.hx-hero-title span{ color:var(--hx-accent); }
.hx-hero-sub{ color:var(--hx-muted); font-family:'Inter',sans-serif; margin:0; max-width:560px; }

/* ---- Glass status cards ---- */
.hx-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:720px){ .hx-cards{ grid-template-columns:1fr; } }
.hx-card{ position:relative; padding:20px; border:1px solid var(--hx-line); border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  backdrop-filter:blur(6px); transition:transform .22s, border-color .22s; }
.hx-card-link{ text-decoration:none; display:block; }
.hx-card:hover{ transform:translateY(-4px); border-color:rgba(0,255,166,.25); }
.hx-card-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hx-card-ico{ font-size:20px; filter:drop-shadow(0 0 8px rgba(0,255,166,.4)); }
.hx-card-ico[data-accent="cyan"]{ filter:drop-shadow(0 0 8px rgba(0,216,255,.4)); }
.hx-card-ico[data-accent="orange"]{ filter:drop-shadow(0 0 8px rgba(255,107,43,.4)); }
.hx-card-label{ font:600 12px/1 'JetBrains Mono',monospace; text-transform:uppercase;
  letter-spacing:1px; color:var(--hx-muted); }
.hx-card-value{ font:700 40px/1 'Rajdhani',sans-serif; color:var(--hx-text); }
.hx-card-value-sm{ font-size:26px; color:var(--hx-accent2); }
.hx-card-unit{ font-size:15px; color:var(--hx-muted); margin-left:6px; }
.hx-card-meta{ margin-top:8px; font:13px 'Inter',sans-serif; color:var(--hx-muted); }
.hx-calibrating{ font-size:26px; color:var(--hx-orange); letter-spacing:1px; }

@media(prefers-reduced-motion:reduce){
  .hx-mod,.hx-ticker-dot,.hx-mod.is-active .hx-mod-scan{ animation:none; opacity:1; transform:none; }
  .hx-card:hover,.hx-mod:hover{ transform:none; }
}

/* ---- CTA buttons ---- */
.hx-cta{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.hx-cta-btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px;
  border-radius:10px; font:700 14px/1 'Rajdhani',sans-serif; letter-spacing:.5px;
  text-decoration:none; border:1px solid var(--hx-line); color:var(--hx-text);
  background:var(--hx-card); transition:transform .18s, box-shadow .18s, border-color .18s; }
.hx-cta-btn span{ font-size:13px; }
.hx-cta-btn:hover{ transform:translateY(-2px); border-color:rgba(0,255,166,.35); }
.hx-cta-primary{ background:linear-gradient(135deg,#24df92,#00d8ff); color:#001a0f; border:none; }
.hx-cta-primary:hover{ box-shadow:0 8px 24px rgba(0,216,255,.28); }
.hx-cta-sm{ padding:9px 16px; font-size:13px; margin-top:14px; }

/* ---- Lower grid: form + pulse ---- */
.hx-lower{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-top:18px; }
@media(max-width:760px){ .hx-lower{ grid-template-columns:1fr; } }
.hx-panel{ background:var(--hx-card); border:1px solid var(--hx-line); border-radius:14px; padding:20px; }
.hx-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.hx-panel-head h2{ font:700 17px/1 'Rajdhani',sans-serif; color:var(--hx-text); margin:0; letter-spacing:.5px; }
.hx-panel-head a{ font:600 12px 'JetBrains Mono',monospace; color:var(--hx-accent2); text-decoration:none; }
.hx-panel-head a:hover{ color:var(--hx-accent); }

/* recent form empty */
.hx-panel-empty{ text-align:center; padding:24px 12px; }
.hx-panel-empty-ico{ font-size:36px; margin-bottom:10px; }
.hx-panel-empty p{ color:var(--hx-muted); font:14px/1.5 'Inter',sans-serif; max-width:380px; margin:0 auto; }

/* recent form list */
.hx-form-list{ display:flex; flex-direction:column; gap:8px; }
.hx-form-row{ display:grid; grid-template-columns:32px 1fr auto auto; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--hx-line); border-radius:10px; text-decoration:none;
  transition:border-color .18s, transform .18s; }
.hx-form-row:hover{ border-color:rgba(0,255,166,.25); transform:translateX(2px); }
.hx-form-badge{ width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font:700 13px 'Rajdhani',sans-serif; }
.hx-form-badge.win{ background:rgba(0,255,166,.15); color:var(--hx-accent); }
.hx-form-badge.loss{ background:rgba(255,107,43,.15); color:var(--hx-orange); }
.hx-form-map{ font:600 14px 'Rajdhani',sans-serif; color:var(--hx-text); }
.hx-form-score{ font:600 13px 'JetBrains Mono',monospace; color:var(--hx-muted); }
.hx-form-mode{ font:600 10px 'JetBrains Mono',monospace; color:var(--hx-muted); text-transform:uppercase; }

/* platform pulse */
.hx-pulse-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hx-pulse-item{ text-align:center; padding:16px 8px; border:1px solid var(--hx-line); border-radius:10px;
  background:linear-gradient(160deg,rgba(0,255,166,.04),transparent); }
.hx-pulse-num{ font:700 30px/1 'Rajdhani',sans-serif; color:var(--hx-accent); }
.hx-pulse-lbl{ margin-top:6px; font:11px 'JetBrains Mono',monospace; color:var(--hx-muted); text-transform:uppercase; letter-spacing:.5px; }
.hx-pulse-hint{ margin-top:14px; font:13px 'Inter',sans-serif; color:var(--hx-text); text-align:center; }
.hx-pulse-hint.muted{ color:var(--hx-muted); }

/* ==================== HUB MODULE BAR (horizontal, sliding indicator) ==================== */
.hx-bar{ position:relative; display:flex; gap:2px; padding:6px; margin-bottom:18px;
  background:var(--hx-card,#0c1218); border:1px solid rgba(255,255,255,.06); border-radius:14px;
  width:100%; min-width:0; justify-content:space-between; }
/* narrow screens only: allow scroll as a fallback */
@media(max-width:900px){ .hx-bar{ overflow-x:auto; justify-content:flex-start;
  scrollbar-width:none; } .hx-bar::-webkit-scrollbar{ display:none; } }
.hx-bar-ind{ position:absolute; top:6px; bottom:6px; left:0; border-radius:10px;
  background:linear-gradient(135deg,rgba(0,255,166,.16),rgba(0,216,255,.10));
  border:1px solid rgba(0,255,166,.35); box-shadow:0 0 18px rgba(0,255,166,.18);
  transition:transform .32s cubic-bezier(.22,1,.36,1), width .32s cubic-bezier(.22,1,.36,1), opacity .2s;
  pointer-events:none; z-index:0; opacity:0; }
.hx-tab{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px;
  padding:9px 9px; border-radius:9px; text-decoration:none; white-space:nowrap;
  color:#4a6070; transition:color .2s; flex:0 1 auto; }
.hx-tab-ico{ display:flex; width:16px; height:16px; }
.hx-tab-ico svg{ width:100%; height:100%; }
.hx-tab-label{ font:600 13px/1 'Rajdhani',sans-serif; letter-spacing:.2px; }
.hx-tab-soon{ font:600 7px/1 'JetBrains Mono',monospace; text-transform:uppercase;
  color:#4a6070; border:1px solid rgba(255,255,255,.08); border-radius:3px; padding:2px 3px; }
@media(max-width:1300px){ .hx-tab-soon{ display:none; } }
.hx-tab:hover{ color:#eaf1ff; }
.hx-tab.is-active{ color:#eaf1ff; }
.hx-tab.is-active .hx-tab-ico{ color:#00ffa6; }
.hx-tab.is-soon{ opacity:.7; }
/* fallback active highlight if JS disabled (indicator stays hidden) */
.hx-bar:not(:hover) .hx-tab.is-active{ }
@media(prefers-reduced-motion:reduce){ .hx-bar-ind{ transition:opacity .2s; } }

/* content full width (no second column) */
.hx-content{ min-width:0; width:100%; }

/* ==================== BATTLE DNA — analytical profile ==================== */
.dna-head h1{ font:700 32px/1.1 'Rajdhani',sans-serif; color:#eaf1ff; margin:6px 0; }
.dna-head p{ color:#4a6070; font-family:'Inter',sans-serif; max-width:620px; }

/* score strip */
.dna-score-strip{ display:flex; align-items:center; gap:28px; margin:20px 0;
  background:linear-gradient(135deg,rgba(0,255,166,.08),rgba(0,216,255,.04)),#0c1218;
  border:1px solid rgba(0,255,166,.2); border-radius:16px; padding:22px 26px; }
.dna-score-main{ text-align:center; }
.dna-score-num{ font:700 56px/1 'Rajdhani',sans-serif; color:#00ffa6; text-shadow:0 0 20px rgba(0,255,166,.4); }
.dna-score-lbl{ font:600 11px 'JetBrains Mono',monospace; letter-spacing:2px; color:#4a6070; margin-top:4px; }
.dna-score-meta{ display:flex; gap:30px; }
.dna-score-meta > div{ display:flex; flex-direction:column; gap:4px; }
.dna-score-meta .k{ font:11px 'JetBrains Mono',monospace; text-transform:uppercase; color:#4a6070; letter-spacing:1px; }
.dna-score-meta .v{ font:600 16px 'Rajdhani',sans-serif; color:#eaf1ff; }

/* main grid: radar + breakdown */
.dna-main-grid{ display:grid; grid-template-columns:320px 1fr; gap:22px; align-items:start; margin-bottom:20px; }
@media(max-width:900px){ .dna-main-grid{ grid-template-columns:1fr; } }
.dna-radar-card{ background:#0c1218; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px; }
.dna-radar{ width:100%; height:auto; }
.dna-ring{ fill:none; stroke:rgba(255,255,255,.06); }
.dna-spoke{ stroke:rgba(255,255,255,.08); }
.dna-poly{ fill:rgba(0,255,166,.18); stroke:#00ffa6; stroke-width:2; }
.dna-axis-label{ fill:#eaf1ff; font:600 10px 'Rajdhani',sans-serif; text-anchor:middle; }

/* breakdown list */
.dna-breakdown{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:600px){ .dna-breakdown{ grid-template-columns:1fr; } }
.dna-ax{ background:#0c1218; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:14px; }
.dna-ax.strong{ border-color:rgba(0,255,166,.25); }
.dna-ax.weak{ border-color:rgba(255,107,43,.25); }
.dna-ax-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.dna-ax-name{ font:600 15px 'Rajdhani',sans-serif; color:#eaf1ff; }
.dna-ax-val{ font:700 16px 'JetBrains Mono',monospace; color:#00ffa6; }
.dna-ax.weak .dna-ax-val{ color:#ff6b2b; }
.dna-ax-bar{ height:6px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; margin-bottom:10px; }
.dna-ax-fill{ height:100%; background:linear-gradient(90deg,#24df92,#00d8ff); border-radius:4px; }
.dna-ax.weak .dna-ax-fill{ background:linear-gradient(90deg,#ff6b2b,#ffb347); }
.dna-ax-desc{ font:13px/1.4 'Inter',sans-serif; color:#eaf1ff; margin-bottom:6px; }
.dna-ax-src{ font:11px 'JetBrains Mono',monospace; color:#4a6070; }

/* strengths / weaknesses */
.dna-sw{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media(max-width:600px){ .dna-sw{ grid-template-columns:1fr; } }
.dna-sw-col{ background:#0c1218; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:16px; }
.dna-sw-col.strong{ border-color:rgba(0,255,166,.2); }
.dna-sw-col.weak{ border-color:rgba(255,107,43,.2); }
.dna-sw-title{ font:700 14px 'Rajdhani',sans-serif; margin-bottom:12px; color:#eaf1ff; }
.dna-sw-row{ display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(255,255,255,.04); }
.dna-sw-row span{ font:600 14px 'Rajdhani',sans-serif; color:#eaf1ff; }
.dna-sw-row b{ font:700 14px 'JetBrains Mono',monospace; color:#00ffa6; }
.dna-sw-col.weak .dna-sw-row b{ color:#ff6b2b; }

/* improvement plan */
.dna-plan{ background:#0c1218; border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:20px; margin-bottom:20px; }
.dna-plan-title{ font:700 17px 'Rajdhani',sans-serif; color:#eaf1ff; margin-bottom:16px; }
.dna-plan-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid rgba(255,255,255,.04); }
.dna-plan-num{ width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:rgba(255,107,43,.15); color:#ff6b2b; font:700 13px 'Rajdhani',sans-serif; }
.dna-plan-body{ flex:1; }
.dna-plan-axis{ font:600 15px 'Rajdhani',sans-serif; color:#eaf1ff; }
.dna-plan-axis span{ color:#ff6b2b; }
.dna-plan-rec{ font:13px 'Inter',sans-serif; color:#4a6070; }
.dna-plan-rec b{ color:#00d8ff; }
.dna-plan-btn{ font:600 12px 'JetBrains Mono',monospace; color:#00ffa6; text-decoration:none;
  border:1px solid rgba(0,255,166,.3); border-radius:8px; padding:8px 12px; transition:background .2s; }
.dna-plan-btn:hover{ background:rgba(0,255,166,.1); }

/* lower grid: progress + percentile */
.dna-lower-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){ .dna-lower-grid{ grid-template-columns:1fr; } }
.dna-panel{ background:#0c1218; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:18px; }
.dna-panel-title{ font:700 15px 'Rajdhani',sans-serif; color:#eaf1ff; margin-bottom:12px; }
.dna-panel-empty{ font:13px/1.5 'Inter',sans-serif; color:#4a6070; }

/* ==================== DNA radar hero + fixes ==================== */
.dna-hero-radar{ position:relative; display:flex; justify-content:center; align-items:center;
  padding:28px; margin-bottom:20px; border:1px solid rgba(255,255,255,.06); border-radius:18px;
  background:radial-gradient(420px 300px at 50% 40%,rgba(0,255,166,.08),transparent 70%),#0c1218;
  overflow:hidden; }
.dna-hero-glow{ position:absolute; inset:0;
  background:radial-gradient(300px 300px at 50% 50%,rgba(0,216,255,.06),transparent 70%);
  animation:dnaGlow 5s ease-in-out infinite; pointer-events:none; }
@keyframes dnaGlow{ 0%,100%{opacity:.5} 50%{opacity:1} }
.dna-radar-big{ position:relative; z-index:1; width:100%; max-width:380px; height:auto; }
.dna-vertex{ fill:#00ffa6; }
.dna-radar-big .dna-poly{ fill:rgba(0,255,166,.16); stroke:#00ffa6; stroke-width:2.5;
  filter:drop-shadow(0 0 8px rgba(0,255,166,.35)); }
.dna-radar-big .dna-axis-label{ fill:#eaf1ff; font:600 11px 'Rajdhani',sans-serif; text-anchor:middle; }

/* breakdown 3-col */
.dna-breakdown-full{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
@media(max-width:900px){ .dna-breakdown-full{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .dna-breakdown-full{ grid-template-columns:1fr; } }

/* number alignment fix (all axis values) */
.dna-ax-val{ font-variant-numeric:tabular-nums; min-width:46px; text-align:right; }
.dna-sw-row b{ font-variant-numeric:tabular-nums; }

/* ==================== DNA COMPACT LAYOUT (final v2) ==================== */
/* score inline */
.dna-score-inline{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.dna-score-inline .dna-score-num{ font:700 44px/1 'Rajdhani',sans-serif; color:#00ffa6;
  text-shadow:0 0 16px rgba(0,255,166,.35); }
.dna-score-side .dna-score-lbl{ font:600 10px 'JetBrains Mono',monospace; letter-spacing:1.5px; color:#4a6070; }
.dna-score-side .dna-score-sub{ font:12px 'JetBrains Mono',monospace; color:#eaf1ff; margin-top:2px; }

/* compact 2-col: radar left, axes right */
.dna-compact{ display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start;
  background:#0c1218; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:20px; margin-bottom:16px; }
@media(max-width:820px){ .dna-compact{ grid-template-columns:1fr; } }

.dna-left{ }
.dna-radar-wrap{ background:radial-gradient(200px 160px at 50% 45%,rgba(0,255,166,.06),transparent 70%);
  border-radius:12px; padding:6px; }
.dna-radar{ width:100%; max-width:260px; height:auto; display:block; margin:0 auto; }
.dna-ring{ fill:none; stroke:rgba(255,255,255,.06); }
.dna-spoke{ stroke:rgba(255,255,255,.08); }
.dna-poly{ fill:rgba(0,255,166,.16); stroke:#00ffa6; stroke-width:2; filter:drop-shadow(0 0 6px rgba(0,255,166,.3)); }
.dna-vertex{ fill:#00ffa6; }
.dna-axis-label{ fill:#eaf1ff; font:600 10px 'Rajdhani',sans-serif; text-anchor:middle; }

/* compact axis rows with hover-reveal detail */
.dna-axes-compact{ display:flex; flex-direction:column; gap:6px; }
.dna-axc{ border:1px solid rgba(255,255,255,.05); border-radius:10px; padding:10px 12px;
  transition:border-color .2s, background .2s; cursor:default; }
.dna-axc.strong{ border-color:rgba(0,255,166,.18); }
.dna-axc.weak{ border-color:rgba(255,107,43,.18); }
.dna-axc-main{ display:grid; grid-template-columns:92px 1fr 44px; align-items:center; gap:12px; }
.dna-axc-name{ font:600 14px 'Rajdhani',sans-serif; color:#eaf1ff; }
.dna-axc-bar{ height:6px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden; }
.dna-axc-fill{ height:100%; background:linear-gradient(90deg,#24df92,#00d8ff); border-radius:4px; }
.dna-axc.weak .dna-axc-fill{ background:linear-gradient(90deg,#ff6b2b,#ffb347); }
.dna-axc-val{ font:700 14px 'JetBrains Mono',monospace; color:#00ffa6; text-align:right; font-variant-numeric:tabular-nums; }
.dna-axc.weak .dna-axc-val{ color:#ff6b2b; }
/* detail hidden by default, revealed on hover/focus */
.dna-axc-detail{ max-height:0; overflow:hidden; opacity:0; transition:max-height .25s, opacity .2s, margin .2s; }
.dna-axc:hover .dna-axc-detail, .dna-axc:focus .dna-axc-detail, .dna-axc:focus-within .dna-axc-detail{
  max-height:60px; opacity:1; margin-top:8px; }
.dna-axc-desc{ font:12px/1.4 'Inter',sans-serif; color:#eaf1ff; }
.dna-axc-src{ font:10px 'JetBrains Mono',monospace; color:#4a6070; margin-top:3px; }

/* bottom row: strengths / weaknesses / plan compact */
.dna-bottom{ display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:14px; }
@media(max-width:760px){ .dna-bottom{ grid-template-columns:1fr; } }
.dna-sw-mini, .dna-plan-mini{ background:#0c1218; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:14px; }
.dna-sw-mini.strong{ border-color:rgba(0,255,166,.18); }
.dna-sw-mini.weak{ border-color:rgba(255,107,43,.18); }
.dna-sw-title{ font:700 13px 'Rajdhani',sans-serif; color:#eaf1ff; margin-bottom:10px; }
.dna-sw-row{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid rgba(255,255,255,.04); }
.dna-sw-row span{ font:600 13px 'Rajdhani',sans-serif; color:#eaf1ff; }
.dna-sw-row b{ font:700 13px 'JetBrains Mono',monospace; color:#00ffa6; font-variant-numeric:tabular-nums; }
.dna-sw-mini.weak .dna-sw-row b{ color:#ff6b2b; }
.dna-plan-mini-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-top:1px solid rgba(255,255,255,.04); }
.dna-plan-mini-row span{ font:600 13px 'Rajdhani',sans-serif; color:#eaf1ff; }
.dna-plan-mini-row a{ font:11px 'JetBrains Mono',monospace; color:#00d8ff; text-decoration:none; }
.dna-plan-mini-row a:hover{ color:#00ffa6; }

/* ==================== DNA PLAYSTYLE PORTRAIT ==================== */
.dna-playstyle{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  background:linear-gradient(135deg,rgba(0,255,166,.06),rgba(0,216,255,.03)),#0c1218;
  border:1px solid rgba(0,255,166,.18); border-radius:16px; padding:20px 24px; margin-bottom:16px; }
@media(max-width:760px){ .dna-playstyle{ grid-template-columns:1fr; gap:14px; } }
.dna-ps-arch{ display:flex; align-items:center; gap:16px; }
.dna-ps-icon{ font-size:42px; filter:drop-shadow(0 0 10px rgba(0,255,166,.4)); }
.dna-ps-label{ font:600 10px 'JetBrains Mono',monospace; letter-spacing:2px; color:#4a6070; }
.dna-ps-name{ font:700 24px/1.1 'Rajdhani',sans-serif; color:#00ffa6; margin:2px 0; }
.dna-ps-tag{ font:13px/1.4 'Inter',sans-serif; color:#eaf1ff; max-width:340px; }
.dna-ps-insights{ display:flex; flex-direction:column; gap:8px; border-left:1px solid rgba(255,255,255,.08); padding-left:22px; }
@media(max-width:760px){ .dna-ps-insights{ border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.08); padding-top:14px; } }
.dna-ps-ins{ display:flex; gap:8px; font:13px/1.4 'Inter',sans-serif; color:#eaf1ff; }
.dna-ps-ins span{ color:#00ffa6; font-weight:700; flex:none; }


/* ==== HUB LIVE ARENA (hx-live) ==== */
.hx-live{max-width:1100px;margin:0 auto;padding:4px 0 40px}
.hx-live-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:6px 0 18px}
.hx-live-title{display:flex;align-items:center;gap:12px}
.hx-live-title h1{margin:0;font-family:'Rajdhani',sans-serif;font-size:26px;letter-spacing:.14em;color:#eaf1ff}
.hx-live-pulse{width:11px;height:11px;border-radius:50%;background:#00ffa6;box-shadow:0 0 0 0 rgba(0,255,166,.6);animation:hxpulse 1.8s infinite}
@keyframes hxpulse{0%{box-shadow:0 0 0 0 rgba(0,255,166,.55)}70%{box-shadow:0 0 0 10px rgba(0,255,166,0)}100%{box-shadow:0 0 0 0 rgba(0,255,166,0)}}
.hx-live-meta{display:flex;align-items:center;gap:14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#4a6070}
.hx-live-auto{color:#00d8ff;letter-spacing:.08em}
.hx-live-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.hx-sum{background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px}
.hx-sum b{display:block;font-family:'Rajdhani',sans-serif;font-size:28px;color:#00ffa6;line-height:1}
.hx-sum em{display:block;margin-top:4px;font-style:normal;font-size:11px;letter-spacing:.05em;color:#4a6070;text-transform:uppercase}
.hx-block{margin-bottom:26px}
.hx-block-h{font-family:'Rajdhani',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#4a6070;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.hx-match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.hx-match{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-decoration:none;background:#0c1218;border:1px solid rgba(0,255,166,.18);border-radius:12px;padding:14px;transition:border-color .15s,transform .15s}
.hx-match:hover{border-color:#00ffa6;transform:translateY(-2px)}
.hx-match-score{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:#eaf1ff;text-align:center}
.hx-match-players{font-size:11px;color:#4a6070;font-family:'JetBrains Mono',monospace}
.hx-match-live{grid-column:1/-1;font-size:10px;letter-spacing:.1em;color:#00ffa6;font-family:'JetBrains Mono',monospace}
.hx-empty{display:flex;align-items:center;gap:12px;background:#0c1218;border:1px dashed rgba(255,255,255,.1);border-radius:12px;padding:22px;color:#4a6070;font-size:13px}
.hx-empty-ic{font-size:22px}
.hx-queue{background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px 18px}
.hx-q-row{display:grid;grid-template-columns:140px 1fr 40px;align-items:center;gap:12px;padding:6px 0}
.hx-q-label{font-size:12px;color:#8aa0b0}
.hx-q-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.hx-q-bar span{display:block;height:100%;background:linear-gradient(90deg,#24df92,#00d8ff);border-radius:4px;transition:width .4s}
.hx-q-count{font-family:'JetBrains Mono',monospace;font-size:13px;color:#eaf1ff;text-align:right}
.hx-locked{background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px}
.hx-locked-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.hx-locked-item{padding:14px;border:1px solid rgba(255,255,255,.05);border-radius:10px;opacity:.55}
.hx-locked-item b{display:block;font-family:'Rajdhani',sans-serif;font-size:15px;color:#eaf1ff;margin-bottom:3px}
.hx-locked-item span{font-size:11px;color:#4a6070}
.hx-locked-note{margin:0;font-size:12px;color:#4a6070;line-height:1.5}
@media(max-width:760px){.hx-live-summary{grid-template-columns:repeat(2,1fr)}.hx-q-row{grid-template-columns:100px 1fr 34px}}
[ВСТАВИТЬ СЮДА СОДЕРЖИМОЕ ФАЙЛА 4]

/* ==== HUB LIVE ARENA (hx-live) ==== */
.hx-live{max-width:1100px;margin:0 auto;padding:4px 0 40px}
.hx-live-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:6px 0 18px}
.hx-live-title{display:flex;align-items:center;gap:12px}
.hx-live-title h1{margin:0;font-family:'Rajdhani',sans-serif;font-size:26px;letter-spacing:.14em;color:#eaf1ff}
.hx-live-pulse{width:11px;height:11px;border-radius:50%;background:#00ffa6;box-shadow:0 0 0 0 rgba(0,255,166,.6);animation:hxpulse 1.8s infinite}
@keyframes hxpulse{0%{box-shadow:0 0 0 0 rgba(0,255,166,.55)}70%{box-shadow:0 0 0 10px rgba(0,255,166,0)}100%{box-shadow:0 0 0 0 rgba(0,255,166,0)}}
.hx-live-meta{display:flex;align-items:center;gap:14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#4a6070}
.hx-live-auto{color:#00d8ff;letter-spacing:.08em}
.hx-live-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.hx-sum{background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px}
.hx-sum b{display:block;font-family:'Rajdhani',sans-serif;font-size:28px;color:#00ffa6;line-height:1}
.hx-sum em{display:block;margin-top:4px;font-style:normal;font-size:11px;letter-spacing:.05em;color:#4a6070;text-transform:uppercase}
.hx-block{margin-bottom:26px}
.hx-block-h{font-family:'Rajdhani',sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#4a6070;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.hx-match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.hx-match{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-decoration:none;background:#0c1218;border:1px solid rgba(0,255,166,.18);border-radius:12px;padding:14px;transition:border-color .15s,transform .15s}
.hx-match:hover{border-color:#00ffa6;transform:translateY(-2px)}
.hx-match-score{font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:#eaf1ff;text-align:center}
.hx-match-players{font-size:11px;color:#4a6070;font-family:'JetBrains Mono',monospace}
.hx-match-live{grid-column:1/-1;font-size:10px;letter-spacing:.1em;color:#00ffa6;font-family:'JetBrains Mono',monospace}
.hx-empty{display:flex;align-items:center;gap:12px;background:#0c1218;border:1px dashed rgba(255,255,255,.1);border-radius:12px;padding:22px;color:#4a6070;font-size:13px}
.hx-empty-ic{font-size:22px}
.hx-queue{background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px 18px}
.hx-q-row{display:grid;grid-template-columns:140px 1fr 40px;align-items:center;gap:12px;padding:6px 0}
.hx-q-label{font-size:12px;color:#8aa0b0}
.hx-q-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.hx-q-bar span{display:block;height:100%;background:linear-gradient(90deg,#24df92,#00d8ff);border-radius:4px;transition:width .4s}
.hx-q-count{font-family:'JetBrains Mono',monospace;font-size:13px;color:#eaf1ff;text-align:right}
.hx-locked{background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px}
.hx-locked-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px}
.hx-locked-item{padding:14px;border:1px solid rgba(255,255,255,.05);border-radius:10px;opacity:.55}
.hx-locked-item b{display:block;font-family:'Rajdhani',sans-serif;font-size:15px;color:#eaf1ff;margin-bottom:3px}
.hx-locked-item span{font-size:11px;color:#4a6070}
.hx-locked-note{margin:0;font-size:12px;color:#4a6070;line-height:1.5}
@media(max-width:760px){.hx-live-summary{grid-template-columns:repeat(2,1fr)}.hx-q-row{grid-template-columns:100px 1fr 34px}}

/* ==== HUB LIVE ARENA — player-first (hx-hero / hx-btn / hx-plat) ==== */
.hx-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;background:linear-gradient(135deg,rgba(0,255,166,.06),rgba(0,216,255,.03));border:1px solid rgba(0,255,166,.14);border-radius:16px;padding:26px 28px;margin:6px 0 22px}
.hx-hero-sub{max-width:560px;margin:12px 0 18px;color:#8aa0b0;font-size:14px;line-height:1.6}
.hx-hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hx-hero-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#4a6070;white-space:nowrap}
.hx-btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;padding:11px 26px;border-radius:10px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.hx-btn-primary{background:linear-gradient(135deg,#24df92,#00d8ff);color:#001a0f;box-shadow:0 4px 18px rgba(0,216,255,.18)}
.hx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,216,255,.32)}
.hx-btn-ghost{background:transparent;color:#eaf1ff;border:1px solid rgba(255,255,255,.14)}
.hx-btn-ghost:hover{border-color:#00ffa6;color:#00ffa6}
.hx-plat{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:#8aa0b0}
.hx-plat-dot{width:9px;height:9px;border-radius:50%;background:#4a6070}
.hx-plat-ok .hx-plat-dot{background:#00ffa6;box-shadow:0 0 7px #00ffa6}
.hx-plat-ok{color:#00ffa6}
.hx-plat-degraded .hx-plat-dot{background:#f5a623;box-shadow:0 0 7px #f5a623}
.hx-plat-degraded{color:#f5a623}
.hx-plat-off .hx-plat-dot{background:#ff4757}
.hx-plat-off{color:#ff4757}
.hx-sum3{grid-template-columns:repeat(3,1fr)}
.hx-sum-plat b.hx-sum-status{font-size:16px;line-height:1.2}
.hx-sum-plat.hx-plat-ok b{color:#00ffa6}
.hx-sum-plat.hx-plat-degraded b{color:#f5a623}
.hx-sum-plat.hx-plat-off b{color:#ff4757}
.hx-empty{gap:16px}
.hx-empty-txt{display:flex;flex-direction:column;gap:3px}
.hx-empty-txt b{color:#eaf1ff;font-size:14px}
.hx-empty-txt span{color:#4a6070;font-size:12px}
.hx-empty-cta{margin-left:auto;padding:9px 20px;font-size:14px}
@media(max-width:760px){.hx-hero{flex-direction:column}.hx-hero-meta{flex-direction:row;align-items:center}.hx-sum3{grid-template-columns:1fr}.hx-empty{flex-wrap:wrap}.hx-empty-cta{margin-left:0;width:100%}}

/* ===== Battle Feed (session 17) ===== */
.feed-wrap{max-width:760px;margin:0 auto;padding:8px 0 40px}
.feed-head{margin-bottom:20px}
.feed-title{font-family:'Rajdhani',sans-serif;font-size:28px;font-weight:700;letter-spacing:.5px;color:#eaf1ff;margin:0}
.feed-sub{color:#4a6070;font-size:14px;margin:4px 0 0}
.feed-empty{text-align:center;padding:56px 20px;background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:14px}
.feed-empty-icon{font-size:40px;margin-bottom:12px}
.feed-empty h2{font-family:'Rajdhani',sans-serif;color:#eaf1ff;font-size:20px;margin:0 0 8px}
.feed-empty p{color:#4a6070;font-size:14px;margin:0 auto 20px;max-width:420px;line-height:1.5}
.feed-cta{display:inline-block;padding:10px 22px;border-radius:10px;font-weight:700;font-family:'Rajdhani',sans-serif;letter-spacing:.5px;text-decoration:none;color:#001a0f;background:linear-gradient(135deg,#24df92,#00d8ff)}
.feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.feed-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#0c1218;border:1px solid rgba(255,255,255,.06);border-radius:12px;transition:border-color .15s ease}
.feed-card:hover{border-color:rgba(0,255,166,.28)}
.feed-card-avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#050b12;display:flex;align-items:center;justify-content:center}
.feed-card-avatar img{width:100%;height:100%;object-fit:cover}
.feed-avatar-fallback{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;color:#00ffa6}
.feed-card-body{flex:1;min-width:0}
.feed-card-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed-actor{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:16px;color:#eaf1ff}
.feed-verb{color:#4a6070;font-size:13px}
.feed-mode-tag{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:#00d8ff;background:rgba(0,216,255,.1);padding:2px 8px;border-radius:6px;letter-spacing:.5px}
.feed-card-line2{display:flex;align-items:center;gap:12px;margin-top:4px;flex-wrap:wrap}
.feed-score{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:#00ffa6}
.feed-map{color:#eaf1ff;font-size:13px;opacity:.8}
.feed-time{color:#4a6070;font-size:12px}
.feed-card-link{flex:0 0 auto;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;color:#00d8ff;text-decoration:none;padding:6px 12px;border:1px solid rgba(0,216,255,.24);border-radius:8px;transition:background .15s ease}
.feed-card-link:hover{background:rgba(0,216,255,.1)}
@media(max-width:560px){.feed-card-link{display:none}}

/* ===== Battle Feed CTA row (session 17) ===== */
.feed-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.feed-cta-alt{background:transparent;color:#00d8ff;border:1px solid rgba(0,216,255,.35)}
.feed-cta-alt:hover{background:rgba(0,216,255,.1)}