body { margin: 0; overflow: hidden; background: #000; font-family: 'Courier New', monospace; color: #fff; }

#setup {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #111; padding: 15px; border: 3px solid #f00; z-index: 100;
    width: 95vw; max-width: 850px; text-align: center; border-radius: 8px;
    max-height: 92vh; overflow-y: auto; box-sizing: border-box;
    scrollbar-gutter: stable; /* reserve scrollbar space up front so its width never shows up mid-layout and squeezes the bracket row into wrapping */
}
.title { color: #f00; margin: 0 0 10px; }

#mode-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; }
.mode-tab {
    padding: 10px 18px; background: #222; color: #999; border: 1px solid #444;
    font-weight: 900; text-transform: uppercase; cursor: pointer; border-radius: 4px;
}
.mode-tab.active { background: #f00; color: #fff; border-color: #f00; }
.mode-blurb { color: #999; font-size: 13px; margin: 4px 0 14px; }

#ai-model-panel { background: #1a0022; border: 1px solid #a020f0; border-radius: 6px; padding: 12px; margin-bottom: 14px; }
#ai-model-panel p { margin: 4px 0; font-size: 13px; }
.model-choice-row { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
.model-choice-btn {
    flex: 1; max-width: 220px; padding: 10px; background: #300; color: #fff;
    border: 2px solid #444; border-radius: 4px; cursor: pointer; font-weight: 900;
}
.model-choice-btn small { font-weight: normal; text-transform: none; opacity: .8; }
.model-choice-btn.selected { border-color: gold; background: #402000; }
#loadModelBtn { background: #a020f0; }
#modelProgressWrap { margin-top: 10px; }
#modelProgressBar { width: 100%; height: 16px; background: #222; border: 2px solid #a020f0; border-radius: 8px; overflow: hidden; }
#modelProgressFill { height: 100%; width: 0%; background: #a020f0; transition: width 0.2s; }
#modelProgressText { font-size: 12px; margin-top: 4px; color: #ccc; }
.ready-text { color: #7fff7f; font-weight: bold; }
.error-text { color: #ff6666; font-weight: bold; }

.bracket-row {
    display: flex; justify-content: center; gap: 6px; margin: 10px 0;
    flex-wrap: nowrap; /* every row must stay on one line - wrapping breaks the bracket layout */
}
.slot {
    width: 95px; height: 95px; border: 1px solid #444; background: #1a1a1a;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 10px; cursor: pointer; border-radius: 4px; position: relative; text-align: center; padding: 2px; box-sizing: border-box;
}
.slot img { width: 60%; height: 60%; object-fit: cover; display: none; border: 1px solid #f00; margin-bottom: 4%; }

/* Tier 0 has 8 slots - the row most likely to run out of room. Instead of
   picking one fixed pixel size that happens to fit one particular window
   width (the bug just reported - it fit at 1920px and broke at anything
   narrower), these slots FLEX: they shrink together to whatever width
   actually fits, and never wrap, at any window size down to a phone. */
#tier-0.bracket-row { flex-wrap: nowrap; overflow-x: auto; }
#tier-0 .slot {
    flex: 1 1 0; width: auto; height: auto; min-width: 40px; max-width: 95px;
    aspect-ratio: 1 / 1;
}
.slot.filled { border: 2px solid #f00; background: #300; }
.slot.filled img { display: block; }
.slot.thinking { border-color: gold; color: gold; cursor: wait; }
/* "designing" = the face image already arrived and is showing, but the AI
   is still working out this fighter's stats - the portrait proves the click
   registered instead of the slot looking dead for however long generation
   takes. */
.slot.designing { border-color: #a020f0; color: #d9a0ff; cursor: wait; }
.slot.designing img { display: block; }
.slot.locked { cursor: default; }
.champion-slot { width: 140px; color: gold; }

/* Small pulsing badge that overlays a designing slot's portrait so it's
   clear stats generation is still in progress, not finished. */
.gen-badge {
    position: absolute; left: 0; right: 0; bottom: 2px;
    font-size: 8px; letter-spacing: .5px; color: #fff; background: rgba(160, 32, 240, 0.85);
    padding: 1px 0; pointer-events: none; animation: gen-badge-pulse 1.1s ease-in-out infinite;
}
@keyframes gen-badge-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.btn-group { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
button { padding: 12px 25px; background: #f00; color: #fff; border: none; font-weight: 900; cursor: pointer; border-radius: 4px; text-transform: uppercase; }
button:disabled { background: #444; cursor: not-allowed; }
button.secondary { background: #444; }

/* START WARZONE stays red/disabled until every fighter has actually
   resolved (bracketUI.setStartEnabled(true) only fires then) - only at
   that point does it flip green and reveal the play triangle. */
#startBtn .play-icon { display: none; margin-right: 8px; }
#startBtn.ready { background: #1a9c3a; }
#startBtn.ready .play-icon { display: inline; }

#ui { display: none; position: absolute; top: 20px; width: 100%; justify-content: space-between; padding: 0 40px; box-sizing: border-box; pointer-events: none; }
.hp-container { display: flex; flex-direction: column; }
.hp-bar { width: 350px; height: 30px; background: #222; border: 3px solid #fff; border-radius: 15px; overflow: hidden; }
.fill { height: 100%; background: #f00; width: 100%; transition: width 0.1s; }
.p-name { font-size: 28px; font-weight: bold; margin-bottom: 2px; text-shadow: 2px 2px #000; }
.ability-caption { font-size: 14px; color: gold; margin-bottom: 5px; text-shadow: 1px 1px #000; }
#timer-ui { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 30px; color: #f00; font-weight: bold; text-align: center; }

#victory-screen { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.95); padding: 40px; border: 4px solid #f00; text-align: center; z-index: 1000; }
#podium-screen { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, #300 0%, #000 100%); z-index: 2000; flex-direction: column; align-items: center; justify-content: center; }
.champion-title { font-size: 60px; color: gold; margin-bottom: 0; }
.champ-img { width: 300px; height: 300px; border-radius: 50%; border: 10px solid gold; box-shadow: 0 0 50px gold; margin: 20px; object-fit: cover; }
.reset-note { color: gold; font-weight: bold; font-style: italic; }
.moving-portrait { position: fixed; z-index: 9999; border: 3px solid gold; border-radius: 4px; pointer-events: none; transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1); }

canvas { display: none; background: #000; }