/* ============================================================
   KNOCKOUT — Championship Boxing — Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;600;700&family=Teko:wght@400;600;700&display=swap');

:root {
    --red: #e8242a;
    --blue: #1a5fff;
    --gold: #f0c040;
    --gold-dim: rgba(240, 192, 64, .5);
    --dark: #0a0a0c;
    --panel: rgba(8, 8, 12, .88);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    overflow: hidden;
    background: var(--dark);
    font-family: 'Oswald', sans-serif;
    user-select: none;
    color: #fff;
}

canvas {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 0;
}

/* ======================== HUD ======================== */
#hud {
    position: fixed; top: 0; left: 0;
    width: 100%; z-index: 10;
    pointer-events: none;
}

.top-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 10px 20px 0;
}

.fighter-bar {
    width: 38%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 18px 10px;
    background: var(--panel);
    border-bottom: 2px solid rgba(255, 255, 255, .06);
}
.fighter-bar.left {
    border-radius: 8px 0 0 0;
    border-left: 3px solid var(--red);
}
.fighter-bar.right {
    border-radius: 0 8px 0 0;
    border-right: 3px solid var(--blue);
    text-align: right;
}

.fname {
    font-family: 'Teko', sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1;
}
.fighter-bar.left .fname { color: var(--red); }
.fighter-bar.right .fname { color: var(--blue); }

.bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fighter-bar.right .bar-row { flex-direction: row-reverse; }

.bar-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, .3);
    font-weight: 600;
    width: 22px;
    text-align: center;
}

.bar-track {
    flex: 1;
    height: 10px;
    background: rgba(255, 255, 255, .06);
    border-radius: 2px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .12s ease;
}
.bar-fill.hp-red { background: linear-gradient(90deg, #cc1a1a, #ff4444); }
.bar-fill.hp-blue { background: linear-gradient(90deg, #1a55ee, #44aaff); }
.fighter-bar.right .bar-fill,
.fighter-bar.left .bar-fill { float: right; }
.bar-fill.sta { background: linear-gradient(90deg, #d4a020, #f0d060); height: 5px; }
.sta-track { height: 5px; margin-top: 1px; }

/* ======================== Body Map (12-Zone Diagram) ======================== */
.body-map {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
    padding: 3px 0;
}
.bm-head, .bm-torso, .bm-legs {
    display: flex;
    gap: 1px;
    justify-content: center;
}
.bm-head {
    flex-wrap: wrap;
    width: 32px;
}
.bm-head .bz {
    width: 9px;
    height: 7px;
}
.bm-head .bz-jaw {
    width: 19px;
    height: 6px;
}
.bm-torso .bz {
    width: 8px;
    height: 10px;
}
.bm-torso .bz-wide {
    width: 14px;
    height: 10px;
}
.bm-legs .bz {
    width: 10px;
    height: 12px;
    margin: 0 1px;
}
.bz {
    border-radius: 2px;
    background: #2a6e2a;
    transition: background .2s ease;
    position: relative;
}
.bz.bz-hit {
    animation: zoneFlash .3s ease;
}
@keyframes zoneFlash {
    0%   { box-shadow: 0 0 6px 2px #fff; transform: scale(1.3); }
    100% { box-shadow: none; transform: scale(1); }
}
.bm-hit {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px 2px rgba(255,100,100,.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

/* ======================== Round Hub ======================== */
.round-hub {
    width: 24%;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    border-bottom: 2px solid var(--gold-dim);
    padding: 6px 12px 8px;
}
.round-tag {
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 3px;
}
.round-clock {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(24px, 5vw, 44px);
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, .12);
}
.round-score {
    font-size: 12px;
    color: rgba(255, 255, 255, .3);
    letter-spacing: 2px;
    margin-top: 1px;
}

/* ======================== Announcements ======================== */
#ann {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    pointer-events: none;
    text-align: center;
}
.ann-main {
    font-family: 'Teko', sans-serif;
    font-size: clamp(30px, 10vw, 88px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 6px;
    text-shadow: 0 0 60px var(--gold), 0 4px 0 rgba(0, 0, 0, .6);
    opacity: 0;
    transform: scale(1.8);
    transition: all .35s cubic-bezier(.2, .9, .3, 1.2);
}
.ann-main.v { opacity: 1; transform: scale(1); }
.ann-sub {
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, .6);
    letter-spacing: 6px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity .4s ease .2s;
}
.ann-sub.v { opacity: 1; }

/* ======================== Combo ======================== */
#combo {
    position: fixed;
    right: 40px; top: 42%;
    z-index: 20;
    pointer-events: none;
    text-align: right;
    opacity: 0;
    transition: opacity .2s;
}
#combo.v { opacity: 1; }
.cn {
    font-family: 'Teko', sans-serif;
    font-size: clamp(28px, 8vw, 72px);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 25px var(--gold-dim);
}
.cl {
    font-size: 14px;
    letter-spacing: 4px;
    color: rgba(240, 192, 64, .6);
    font-weight: 600;
}

/* ======================== Flashes ======================== */
.flash {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity .04s;
}
.flash.a { opacity: 1; }
.flash.fr { background: radial-gradient(ellipse at 40% 50%, rgba(255, 20, 20, .25), transparent 60%); }
.flash.fb { background: radial-gradient(ellipse at 60% 50%, rgba(20, 60, 255, .25), transparent 60%); }
.flash.fg { background: radial-gradient(circle at 50% 50%, rgba(240, 192, 64, .2), transparent 55%); }
.flash.fw { background: radial-gradient(circle at 50% 50%, rgba(100, 180, 255, .18), transparent 55%); }
.flash.fp { background: radial-gradient(circle at 50% 50%, rgba(40, 255, 80, .30), transparent 55%); }

/* ======================== Damage Text ======================== */
.dmg {
    position: fixed;
    pointer-events: none;
    z-index: 30;
    font-family: 'Teko', sans-serif;
    font-weight: 700;
    text-shadow: 0 0 10px var(--gold-dim), 0 2px 0 rgba(0, 0, 0, .7);
    animation: dmgUp .8s ease-out forwards;
}
.dmg.cnt {
    color: #ff4444 !important;
    font-size: 32px !important;
    text-shadow: 0 0 15px rgba(255, 50, 50, .6);
}

@keyframes dmgUp {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-55px) scale(1.3); }
}

/* ======================== Event Text ======================== */
.evt {
    position: fixed;
    pointer-events: none;
    z-index: 28;
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    letter-spacing: 3px;
    font-size: 22px;
    animation: evtUp 1s ease-out forwards;
}
.evt.blk { color: #6af; }
.evt.ddg { color: #6f6; }
.evt.ctr { color: #ff4; }
.evt.prf { color: #4f4; font-size: 28px; text-shadow: 0 0 12px rgba(40, 255, 80, .7), 0 2px 0 rgba(0,0,0,.7); }
.evt.pry { color: #f8f; }

@keyframes evtUp {
    0%   { opacity: 1; transform: translateY(0) scale(.8); }
    30%  { opacity: 1; transform: translateY(-10px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-45px) scale(.7); }
}

/* ======================== Knockdown Recovery ======================== */
#kd-overlay {
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
#kd-overlay.v {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}
.kd-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 13vw, 120px);
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 40px rgba(255, 40, 40, .6), 0 4px 0 rgba(0, 0, 0, .5);
    animation: kdPulse 0.8s ease-in-out infinite;
}
@keyframes kdPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.kd-prompt {
    font-family: 'Teko', sans-serif;
    font-size: clamp(18px, 4vw, 32px);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 6px;
    text-shadow: 0 0 20px var(--gold-dim);
    animation: kdBlink 0.5s ease-in-out infinite alternate;
}
@keyframes kdBlink {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}
.kd-bar-track {
    width: clamp(180px, 50vw, 260px);
    height: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 7px;
    overflow: hidden;
}
.kd-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #cc1a1a, #f0c040, #2a6e2a);
    border-radius: 7px;
    transition: width .08s ease;
}
.kd-clicks {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, .3);
    letter-spacing: 2px;
}

/* ======================== Victory Screen ======================== */
#victory {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
}
#victory.v {
    opacity: 1;
    pointer-events: auto;
}
.vic-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at 50% 40%, rgba(30, 15, 0, .92), rgba(4, 4, 6, .96) 70%);
}
.vic-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.vic-sponsors-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.vic-presents {
    font-size: 10px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .2);
    font-weight: 300;
}
.vic-sponsor {
    font-family: 'Teko', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 2px;
    transition: color .2s;
}
.vic-sponsor:hover { color: #fff; }

.vic-result {
    font-family: 'Teko', sans-serif;
    font-size: clamp(36px, 11vw, 100px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: 8px;
    color: #fff;
    text-shadow: 0 0 80px var(--gold), 0 0 40px rgba(255, 200, 60, .4), 0 6px 0 rgba(0, 0, 0, .5);
    transform: scale(0);
    animation: vicReveal .6s cubic-bezier(.2, .9, .3, 1.15) .3s forwards;
}
#victory.v .vic-result { animation-play-state: running; }

.vic-result.defeat { color: #cc3333; text-shadow: 0 0 60px rgba(200, 30, 30, .5), 0 6px 0 rgba(0, 0, 0, .5); }
.vic-result.draw { color: #999; text-shadow: 0 0 40px rgba(150, 150, 150, .3), 0 6px 0 rgba(0, 0, 0, .5); }

@keyframes vicReveal {
    0% { transform: scale(2.5) rotate(-4deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.vic-method {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 6px;
    color: var(--gold-dim);
    opacity: 0;
    animation: vicFade .5s ease .7s forwards;
}
.vic-winner {
    font-family: 'Teko', sans-serif;
    font-size: clamp(22px, 5vw, 42px);
    font-weight: 700;
    letter-spacing: 5px;
    color: #fff;
    margin-top: 2px;
    opacity: 0;
    animation: vicFade .5s ease .9s forwards;
}
.vic-score {
    font-size: 16px;
    color: rgba(255, 255, 255, .35);
    letter-spacing: 4px;
    opacity: 0;
    animation: vicFade .5s ease 1.1s forwards;
}
@keyframes vicFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.vic-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 12px 0 8px;
    width: clamp(260px, 70vw, 420px);
    opacity: 0;
    animation: vicFade .5s ease 1.4s forwards;
}
.vic-stat-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
}
.vic-stat-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: 6px;
    margin-bottom: 2px;
}
.vic-stat-p1, .vic-stat-p2 {
    width: clamp(42px, 10vw, 70px);
    font-family: 'Teko', sans-serif;
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}
.vic-stat-header .vic-stat-p1,
.vic-stat-header .vic-stat-p2 {
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .3);
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
}
.vic-stat-p1 { text-align: right; }
.vic-stat-p2 { text-align: left; }
.vic-stat-label {
    flex: 1;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .25);
    text-transform: uppercase;
    padding: 0 12px;
}
.vic-stat-sep {
    height: 1px;
    margin: 4px 0;
    background: rgba(255, 255, 255, .06);
}
.vic-stat-bar {
    position: absolute;
    height: 100%;
    top: 0;
    opacity: .08;
    border-radius: 2px;
}

.vic-sponsors {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 12px 0 6px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 6px;
    opacity: 0;
    animation: vicFade .5s ease 1.7s forwards;
}
.vic-logo {
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color .2s, text-shadow .2s;
}
.vic-logo:nth-child(1) { color: #55aaff; }
.vic-logo:nth-child(2) { color: #ffffff; }
.vic-logo:nth-child(3) { color: #ffdd44; }
.vic-logo:hover { text-shadow: 0 0 15px currentColor; }

.vic-btn {
    margin-top: 14px;
    padding: 12px clamp(28px, 5vw, 52px);
    font-family: 'Teko', sans-serif;
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 600;
    letter-spacing: 5px;
    color: #fff;
    background: linear-gradient(135deg, #b81c1c, #e83030);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(220, 40, 40, .3);
    transition: all .2s;
    opacity: 0;
    animation: vicFade .5s ease 2.0s forwards;
}
.vic-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(220, 40, 40, .5);
}

/* ======================== Vignette ======================== */
#vig {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 4;
    transition: opacity .5s;
}

/* ======================== Controls Panel ======================== */
#ctrl-panel {
    position: fixed;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
    transition: opacity .6s;
}
#ctrl-panel.hide { opacity: 0; }

.ctrl-box {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    background: rgba(6, 6, 10, .9);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 10px;
    backdrop-filter: blur(6px);
}

.ctrl-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 8px;
    border-right: 1px solid rgba(255, 255, 255, .05);
}
.ctrl-group:last-child { border-right: none; }

.ctrl-group-title {
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, .22);
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 600;
}

.ctrl-row {
    display: flex;
    gap: 3px;
    align-items: center;
}

.ctrl-key {
    min-width: 28px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    padding: 0 5px;
}
.ctrl-key.red { color: #ff6666; border-color: rgba(255, 100, 100, .18); }
.ctrl-key.cyan { color: #6af; border-color: rgba(100, 170, 255, .18); }

.ctrl-desc {
    font-size: 9px;
    color: rgba(255, 255, 255, .25);
    letter-spacing: .5px;
    margin-top: 1px;
}

#ctrl-toggle {
    position: fixed;
    bottom: 16px; right: 20px;
    z-index: 22;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 6, 10, .8);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: rgba(255, 255, 255, .4);
    transition: all .2s;
}
#ctrl-toggle:hover {
    color: var(--gold);
    border-color: var(--gold-dim);
}

#reload-btn {
    position: fixed;
    bottom: 16px; right: 64px;
    z-index: 22;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 6, 10, .8);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    color: rgba(255, 255, 255, .4);
    transition: all .2s;
}
#reload-btn:hover {
    color: #ff6666;
    border-color: rgba(255, 100, 100, .3);
}

/* ======================== Start Screen ======================== */
#start {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 100;
    background: radial-gradient(
        ellipse 70% 80% at 50% 55%,
        rgba(6, 6, 8, .05) 0%,
        rgba(6, 6, 8, .4) 40%,
        rgba(6, 6, 8, .88) 70%,
        rgba(6, 6, 8, .96) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: clamp(24px, 5vh, 60px);
}

.title-wrap {
    text-align: center;
    z-index: 1;
}

.title-pre {
    font-size: 14px;
    letter-spacing: 12px;
    color: var(--gold-dim);
    font-weight: 300;
    margin-bottom: 4px;
}

.title {
    font-family: 'Teko', sans-serif;
    font-size: clamp(42px, 13vw, 130px);
    font-weight: 700;
    line-height: .85;
    color: #fff;
    letter-spacing: 10px;
    text-shadow: 0 0 80px rgba(255, 60, 0, .4), 0 6px 0 rgba(0, 0, 0, .5);
    animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 80px rgba(255, 60, 0, .4), 0 6px 0 rgba(0, 0, 0, .5); }
    50%      { text-shadow: 0 0 110px rgba(255, 80, 0, .6), 0 6px 0 rgba(0, 0, 0, .5); }
}

.title-sub {
    font-size: 16px;
    letter-spacing: 10px;
    color: rgba(255, 200, 100, .35);
    font-weight: 300;
    margin-top: 4px;
}

.sponsor-line {
    font-size: 11px;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .18);
    font-weight: 300;
    margin-top: 12px;
}
.sponsor-line a {
    color: var(--gold-dim);
    text-decoration: none;
    transition: color .2s;
}
.sponsor-line a:hover { color: var(--gold); }

.title-line {
    width: clamp(100px, 30vw, 200px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
    margin: 24px auto;
}

.start-btn {
    margin-top: 8px;
    padding: 14px clamp(32px, 6vw, 64px);
    font-family: 'Teko', sans-serif;
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 600;
    letter-spacing: 6px;
    color: #fff;
    background: linear-gradient(135deg, #b81c1c, #e83030);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 40px rgba(220, 40, 40, .3);
    transition: all .2s;
    z-index: 1;
}
.start-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 60px rgba(220, 40, 40, .5);
}

.mp-btn {
    background: linear-gradient(135deg, #1a4fd0, #2060ff);
    box-shadow: 0 0 40px rgba(32, 96, 255, .3);
    margin-left: 12px;
}
.mp-btn:hover {
    box-shadow: 0 0 60px rgba(32, 96, 255, .5);
}

/* ======================== MULTIPLAYER LOBBY ======================== */
#mp-lobby {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 20px 30px;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    z-index: 2;
}
#mp-lobby.v { display: flex; }

.mp-title {
    font-family: 'Teko', sans-serif;
    font-size: 22px;
    letter-spacing: 5px;
    color: rgba(255, 255, 255, .6);
}
.mp-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mp-action {
    padding: 10px 24px;
    font-family: 'Teko', sans-serif;
    font-size: 18px;
    letter-spacing: 3px;
    color: #fff;
    background: linear-gradient(135deg, #1a4fd0, #2060ff);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
}
.mp-action:hover { transform: scale(1.03); }
.mp-input {
    padding: 10px 16px;
    font-family: 'Teko', sans-serif;
    font-size: 22px;
    letter-spacing: 6px;
    text-align: center;
    width: 120px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 4px;
    outline: none;
}
.mp-input::placeholder { color: rgba(255, 255, 255, .2); letter-spacing: 3px; font-size: 14px; }
.mp-status {
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--gold);
    min-height: 20px;
}
.mp-room-display {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    letter-spacing: 12px;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(240, 192, 64, .4);
}
.mp-back {
    margin-top: 6px;
    padding: 6px 20px;
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, .4);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
    cursor: pointer;
}
.mp-back:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* Room browser */
.mp-divider {
    width: 100%;
    text-align: center;
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, .25);
    position: relative;
    margin: 4px 0;
}
.mp-divider::before, .mp-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: rgba(255, 255, 255, .1);
}
.mp-divider::before { left: 0; }
.mp-divider::after { right: 0; }

.mp-rooms {
    width: 100%;
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.mp-rooms::-webkit-scrollbar { width: 4px; }
.mp-rooms::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.mp-rooms-empty {
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .2);
    text-align: center;
    padding: 12px 0;
}

.mp-room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
}
.mp-room-item:hover {
    background: rgba(32, 96, 255, .15);
    border-color: rgba(32, 96, 255, .4);
}
.mp-room-code-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 6px;
    color: var(--gold);
}
.mp-room-age {
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .3);
}
.mp-room-join {
    padding: 4px 16px;
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #1a4fd0, #2060ff);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
}
.mp-room-join:hover { transform: scale(1.05); }

.mp-manual-row {
    margin-top: 2px;
}
.mp-join-sm {
    padding: 8px 16px;
    font-size: 15px;
}

/* Room status badges */
.mp-room-status-live {
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    color: #ff4444;
    background: rgba(255, 68, 68, .15);
    padding: 2px 8px;
    border-radius: 3px;
    animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.mp-room-spec {
    font-family: 'Teko', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .35);
}

.mp-room-watch {
    padding: 4px 16px;
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all .15s;
}
.mp-room-watch:hover { transform: scale(1.05); }

/* ======================== VOICE TOGGLE ======================== */
#voice-toggle {
    position: fixed;
    bottom: 50px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    background: rgba(0, 0, 0, .6);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    color: #4f4;
    cursor: pointer;
    z-index: 100;
    transition: all .2s;
}
#voice-toggle:hover { background: rgba(0, 0, 0, .8); transform: scale(1.1); }
#voice-toggle.muted { color: #f44; border-color: rgba(255, 68, 68, .3); }

/* ======================== SPECTATOR UI ======================== */
#spec-count {
    position: fixed;
    top: 8px;
    right: 16px;
    font-family: 'Teko', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .4);
    z-index: 100;
}
#spec-label {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 12px;
    color: rgba(255, 255, 255, .15);
    pointer-events: none;
    z-index: 90;
}
#spec-label.v { display: block; }

/* ======================== NETCODE STATUS ======================== */
#net-status {
    position: fixed;
    bottom: 8px; right: 8px;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .35);
    z-index: 50;
    pointer-events: none;
}
#net-status .ping { color: #4f8; }
#net-status .rollback { color: #f84; }
#net-status .desync { color: #f22; font-weight: bold; animation: desync-blink 0.5s infinite; }
@keyframes desync-blink { 50% { opacity: 0.3; } }

.sc {
    margin-top: 20px;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 40px;
    padding: 20px 30px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 8px;
}

.sc-title {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, .25);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.sc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
}
.sc-row .k {
    font-weight: 700;
    color: var(--gold);
    min-width: 30px;
    text-align: center;
}

.sc-section {
    grid-column: 1 / -1;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255, 100, 100, .4);
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 4px;
    text-align: center;
}

/* ======================== Share / Invite ======================== */

.share-btn {
    display: block;
    margin: 12px auto 0;
    padding: 10px clamp(24px, 5vw, 48px);
    font-family: 'Teko', sans-serif;
    font-size: clamp(16px, 3vw, 22px);
    font-weight: 600;
    letter-spacing: 5px;
    color: var(--gold);
    background: transparent;
    border: 1px solid rgba(240, 192, 64, .35);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    z-index: 1;
}
.share-btn:hover {
    background: rgba(240, 192, 64, .1);
    border-color: var(--gold);
    box-shadow: 0 0 30px rgba(240, 192, 64, .15);
    transform: scale(1.03);
}

/* Version / cache-clear button */
.version-btn {
    position: absolute;
    bottom: 8px;
    right: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.35);
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    z-index: 5;
}
.version-btn:hover {
    background: rgba(240,192,64,.15);
    color: var(--gold);
    border-color: var(--gold);
}

.mp-invite-row {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.mp-invite-row.v { display: flex; }

.mp-copy-btn {
    background: transparent !important;
    border: 1px solid rgba(240, 192, 64, .35) !important;
    color: var(--gold) !important;
}
.mp-copy-btn:hover {
    background: rgba(240, 192, 64, .1) !important;
    border-color: var(--gold) !important;
}

.mp-invite-btn {
    background: linear-gradient(135deg, #b88a10, #d4a020) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(240, 192, 64, .2);
}
.mp-invite-btn:hover {
    box-shadow: 0 0 30px rgba(240, 192, 64, .3);
}

.share-result-btn {
    background: transparent !important;
    border: 1px solid rgba(240, 192, 64, .35) !important;
    color: var(--gold) !important;
    box-shadow: none !important;
    margin-top: 8px;
    opacity: 0;
    animation: vicFade .5s ease 2.3s forwards;
}
.share-result-btn:hover {
    background: rgba(240, 192, 64, .1) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 30px rgba(240, 192, 64, .2) !important;
}

#share-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 200;
    padding: 10px 28px;
    font-family: 'Teko', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #000;
    background: rgba(240, 192, 64, .95);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
    opacity: 0;
    pointer-events: none;
    transition: all .3s cubic-bezier(.2, .9, .3, 1.1);
}
#share-toast.v {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ======================== Responsive ======================== */

/* --- Tablet / small desktop (≤900px) --- */
@media (max-width: 900px) {
    .top-bar { padding: 6px 10px 0; }
    .fighter-bar { padding: 8px 12px 6px; }
    .fname { font-size: 16px; letter-spacing: 2px; }
    .bar-track { height: 8px; }
    .bar-fill.sta { height: 4px; }
    .sta-track { height: 4px; }
    .body-map { display: none; }
    .round-hub { min-width: 100px; padding: 4px 8px 6px; }
    .round-tag { font-size: 11px; letter-spacing: 2px; }
    .round-score { font-size: 10px; }

    #combo { right: 16px; }
    .cl { font-size: 11px; letter-spacing: 2px; }

    .sc { gap: 4px 20px; padding: 14px 20px; }
    .sc-row { font-size: 11px; gap: 6px; }
    .sc-row .k { min-width: 24px; }

    #ctrl-panel { display: none; }
    #ctrl-toggle { display: none; }
    #reload-btn { right: 20px; }

    .vic-content { padding: 0 16px; }
    .vic-method { font-size: 14px; letter-spacing: 4px; }
    .vic-score { font-size: 13px; letter-spacing: 3px; }
    .vic-stat-label { font-size: 9px; padding: 0 8px; }
    .vic-sponsors { gap: 16px; padding: 8px 18px; }
    .vic-logo { font-size: 16px; }

    .kd-prompt { letter-spacing: 4px; }
}

/* --- Small tablet / large phone landscape (≤640px) --- */
@media (max-width: 640px) {
    .top-bar { padding: 4px 6px 0; }
    .fighter-bar { width: 40%; padding: 6px 8px 4px; }
    .fname { font-size: 13px; letter-spacing: 1px; }
    .bar-label { font-size: 7px; width: 16px; }
    .bar-track { height: 6px; }
    .bar-fill.sta { height: 3px; }
    .sta-track { height: 3px; }
    .round-hub { width: 20%; min-width: 70px; padding: 2px 4px 4px; }
    .round-tag { font-size: 9px; letter-spacing: 1px; }
    .round-score { font-size: 9px; letter-spacing: 1px; }

    .ann-sub { font-size: 14px; letter-spacing: 3px; }
    .cl { font-size: 10px; letter-spacing: 1px; }

    #start {
        padding: 12px;
        padding-bottom: 16px;
    }
    .title-pre { font-size: 10px; letter-spacing: 6px; }
    .title { letter-spacing: 4px; }
    .title-sub { font-size: 12px; letter-spacing: 5px; }
    .sponsor-line { font-size: 9px; letter-spacing: 2px; }
    .title-line { margin: 14px auto; }

    .sc { display: none; }

    .vic-content { padding: 0 12px; }
    .vic-result { letter-spacing: 4px; }
    .vic-method { letter-spacing: 3px; }
    .vic-winner { letter-spacing: 3px; }
    .vic-score { letter-spacing: 2px; }
    .vic-stat-label { font-size: 8px; padding: 0 6px; letter-spacing: 1px; }
    .vic-stat-header .vic-stat-p1,
    .vic-stat-header .vic-stat-p2 { font-size: 10px; letter-spacing: 1px; }
    .vic-sponsors { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 6px 12px; }
    .vic-logo { font-size: 14px; }

    .kd-prompt { letter-spacing: 3px; }
    .kd-clicks { font-size: 11px; }
    .share-btn { letter-spacing: 3px; }
    .mp-invite-row { flex-direction: column; gap: 6px; }
}

/* --- Phone portrait (≤420px) --- */
@media (max-width: 420px) {
    .top-bar { padding: 2px 4px 0; }
    .fighter-bar { padding: 4px 6px 3px; gap: 2px; }
    .fname { font-size: 11px; letter-spacing: 0; }
    .bar-label { display: none; }
    .bar-row { gap: 3px; }
    .bar-track { height: 5px; border-radius: 1px; }
    .bar-fill.sta { height: 2px; }
    .sta-track { height: 2px; }
    .round-hub { min-width: 52px; padding: 2px 3px; }
    .round-tag { font-size: 8px; letter-spacing: 0; }
    .round-score { display: none; }

    .ann-sub { font-size: 12px; letter-spacing: 2px; }
    #combo { right: 8px; }

    .title-pre { font-size: 8px; letter-spacing: 4px; }
    .title { letter-spacing: 2px; }
    .title-sub { font-size: 10px; letter-spacing: 3px; }
    .sponsor-line { font-size: 8px; }
    .vic-stats { gap: 1px; margin: 8px 0 4px; }
    .vic-stat-row { padding: 2px 0; }
    .vic-stat-label { font-size: 7px; padding: 0 4px; }
    .vic-sponsors { margin: 8px 0 4px; gap: 8px; }
    .vic-logo { font-size: 12px; letter-spacing: 1px; }
    .vic-btn { margin-top: 8px; }

    .kd-prompt { letter-spacing: 2px; }
    .kd-bar-track { height: 10px; }
    .kd-clicks { font-size: 10px; }

    #reload-btn { bottom: 8px; right: 8px; width: 30px; height: 30px; font-size: 16px; }
}

/* ======================== TOUCH CONTROLS ======================== */

#touch-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 15;
    display: none;
    touch-action: none;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.touch-device.touch-active #touch-overlay {
    display: flex;
    pointer-events: auto;
}

/* Left side: punches + defense */
#touch-action-zone {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 16px 8px;
}

/* Two-column punch grid */
.touch-hands {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.touch-hand {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.touch-hand-label {
    font-family: 'Teko', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 2px;
}
.touch-hand-l .touch-hand-label { color: rgba(255, 120, 120, .55); }
.touch-hand-r .touch-hand-label { color: rgba(120, 160, 255, .55); }

/* Defense row */
.touch-defense {
    display: flex;
    gap: 5px;
    justify-content: flex-start;
}

/* Right side: joystick zone */
#touch-joy-zone {
    width: 40%;
    height: 100%;
    position: relative;
}

/* Button base */
.tbtn {
    min-width: 52px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Teko', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .75);
    background: rgba(8, 8, 12, .55);
    border: 1px solid rgba(240, 192, 64, .2);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background .08s, border-color .08s;
}
.tbtn.active {
    background: rgba(240, 192, 64, .22);
    border-color: var(--gold);
    color: #fff;
}

/* Left hand punch buttons — red tint */
.tbtn.punch-l {
    width: 100%;
    border-color: rgba(255, 100, 100, .3);
}
.tbtn.punch-l.active {
    background: rgba(255, 60, 60, .25);
    border-color: var(--red);
}

/* Right hand punch buttons — blue tint */
.tbtn.punch-r {
    width: 100%;
    border-color: rgba(100, 160, 255, .3);
}
.tbtn.punch-r.active {
    background: rgba(50, 120, 255, .25);
    border-color: var(--blue);
}

/* Defense buttons */
.tbtn.def {
    min-width: 58px;
    border-color: rgba(100, 255, 180, .3);
    flex: 1;
}
.tbtn.def.active {
    background: rgba(50, 255, 140, .2);
    border-color: #5f8;
}

/* Bob buttons */
.tbtn.bob {
    min-width: 36px;
    min-height: 40px;
    font-size: 18px;
    letter-spacing: 0;
    border-color: rgba(255, 255, 255, .12);
}
.tbtn.bob.active {
    background: rgba(240, 192, 64, .18);
    border-color: var(--gold-dim);
}

/* Joystick ring + knob */
#touch-joy-ring {
    position: fixed;
    width: 100px;
    height: 100px;
    display: none;
    border: 2px solid rgba(240, 192, 64, .3);
    border-radius: 50%;
    background: rgba(0, 0, 0, .2);
    pointer-events: none;
    z-index: 16;
}
#touch-joy-knob {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(240, 192, 64, .35);
    border: 1px solid rgba(240, 192, 64, .5);
}

/* Joystick side toggle button */
#touch-side-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    border: 1px solid rgba(240, 192, 64, .25);
    border-radius: 8px;
    background: rgba(8, 8, 12, .6);
    color: rgba(255, 255, 255, .5);
    z-index: 17;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
#touch-side-toggle:active {
    background: rgba(240, 192, 64, .2);
    color: #fff;
}

/* Joy-left: swap action zone and joystick zone sides */
#touch-overlay.joy-left {
    flex-direction: row-reverse;
}
#touch-overlay.joy-left #touch-action-zone {
    padding-left: 0;
    padding-right: 8px;
}
#touch-overlay.joy-left #touch-side-toggle {
    right: auto;
    left: 8px;
}

/* ======================== TOUCH DEVICE OVERRIDES ======================== */

/* Hide keyboard controls on touch devices */
.touch-device .sc { display: none; }
.touch-device #ctrl-panel { display: none; }
.touch-device #ctrl-toggle { display: none; }

/* Bigger tap targets for menus */
.touch-device .start-btn {
    min-height: 54px;
    padding: 16px 40px;
}
.touch-device .mp-action {
    min-height: 48px;
    padding: 12px 28px;
}
.touch-device .mp-input {
    font-size: 26px;
    width: 150px;
    padding: 12px 16px;
}
.touch-device .mp-room-item {
    min-height: 52px;
    padding: 10px 16px;
}
.touch-device .mp-back {
    min-height: 44px;
    padding: 8px 24px;
    font-size: 16px;
}
.touch-device .vic-btn {
    min-height: 54px;
    padding: 14px 44px;
}
.touch-device .share-btn {
    min-height: 48px;
    padding: 12px 36px;
}

/* Landscape: more compact */
@media (max-height: 500px) and (orientation: landscape) {
    .tbtn { min-height: 38px; font-size: 11px; }
    .tbtn.bob { min-height: 32px; min-width: 32px; }
    .touch-hands { gap: 4px; }
    .touch-hand { gap: 3px; }
    .touch-defense { gap: 4px; }
    #touch-action-zone { padding-bottom: 8px; padding-left: 6px; }
    .touch-hand-label { font-size: 9px; margin-bottom: 0; }
}

/* Very small phones */
@media (max-width: 380px) {
    .tbtn { min-width: 44px; min-height: 42px; font-size: 11px; letter-spacing: 1px; }
    .touch-hands { gap: 4px; }
    .touch-hand { gap: 3px; }
    .touch-defense { gap: 3px; }
    #touch-action-zone { padding-left: 4px; }
}