/* ============================================================
   Woofymon Battle Simulator — Main Stylesheet
   ============================================================ */

/* --- Reset & Base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Nunito', sans-serif;
    background: #1a1a2e;
    color: #eee;
    min-height: 100vh;
}

/* --- Layout ------------------------------------------------ */
.arena-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.arena-main {
    flex: 1;
    padding: 2rem 1rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* --- Header ----------------------------------------------- */
.arena-header {
    background: linear-gradient(135deg, #16213e 0%, #0f3460 60%, #533483 100%);
    border-bottom: 3px solid #e94560;
    padding: 1.2rem 1rem;
    text-align: center;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.game-logo {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    letter-spacing: 2px;
    line-height: 1.3;
}

.logo-woofy { color: #f5c518; }
.logo-mon   { color: #e94560; }

.game-tagline {
    margin-top: 0.4rem;
    font-size: 0.95rem;
    color: #aac4e4;
    font-weight: 600;
}

.back-link {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #aac4e4;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: color 0.2s;
}

.back-link:hover { color: #f5c518; }

/* --- Trainer nav ------------------------------------------ */
.trainer-nav {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.trainer-greeting {
    color: #f5c518;
}

.trainer-nav-link {
    color: #aac4e4;
    text-decoration: none;
    transition: color 0.2s;
}

.trainer-nav-link:hover { color: #f5c518; }

.trainer-nav-link--highlight {
    color: #e94560;
}

.trainer-nav-link--highlight:hover { color: #f5c518; }

/* Reset button styling so logout looks like a link */
.trainer-nav-link--btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* --- Auth forms ------------------------------------------- */
.auth-card {
    max-width: 420px;
    margin: 3rem auto;
    background: #16213e;
    border: 2px solid #2a2a5a;
    border-radius: 12px;
    padding: 2rem 2.5rem;
}

.auth-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: #f5c518;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.auth-flash {
    padding: 0.6rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-flash--error   { background: #3d1a1a; border: 1px solid #e94560; color: #ff7a8a; }
.auth-flash--success { background: #1a3d1a; border: 1px solid #4caf50; color: #80e880; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #aac4e4;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.auth-hint {
    font-size: 0.72rem;
    font-weight: 400;
    color: #666;
}

.auth-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: #0f1b35;
    border: 1px solid #2a2a5a;
    border-radius: 6px;
    color: #eee;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.auth-input:focus { border-color: #533483; }

.auth-btn {
    margin-top: 1.2rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #e94560, #533483);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.auth-btn:hover  { opacity: 0.9; }
.auth-btn:active { transform: scale(0.98); }

.auth-switch {
    margin-top: 1.2rem;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}

.auth-switch a { color: #aac4e4; text-decoration: none; font-weight: 700; }
.auth-switch a:hover { color: #f5c518; }

/* --- Match history ---------------------------------------- */
.history-page {
    max-width: 860px;
    margin: 0 auto;
}

.history-heading {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    color: #f5c518;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.h2h-section { margin-bottom: 2.5rem; }

.h2h-title {
    font-size: 1rem;
    font-weight: 800;
    color: #aac4e4;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.h2h-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.h2h-card {
    background: #16213e;
    border: 1px solid #2a2a5a;
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    min-width: 140px;
    text-align: center;
}

.h2h-opponent {
    font-weight: 800;
    color: #eee;
    margin-bottom: 0.4rem;
}

.h2h-stats { font-size: 1.1rem; font-weight: 700; }
.h2h-wins   { color: #4caf50; }
.h2h-losses { color: #e94560; }
.h2h-sep    { color: #555; margin: 0 0.15rem; }

.h2h-played { font-size: 0.78rem; color: #666; margin-top: 0.3rem; }

.match-log-title {
    font-size: 1rem;
    font-weight: 800;
    color: #aac4e4;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.history-empty {
    color: #666;
    font-style: italic;
    padding: 2rem 0;
}

.match-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #16213e;
    border: 1px solid #2a2a5a;
    border-left: 4px solid #2a2a5a;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.match-row--win  { border-left-color: #4caf50; }
.match-row--loss { border-left-color: #e94560; }

.match-combatants {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.match-pokemon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.match-sprite {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
}

.match-pname {
    font-weight: 700;
    font-size: 0.9rem;
}

.match-vs {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #e94560;
}

.match-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-size: 0.82rem;
}

.match-result { font-weight: 800; color: #f5c518; }
.match-result--unknown { color: #666; font-weight: 400; }
.match-date   { color: #666; }
.match-opponent { color: #aac4e4; font-weight: 600; }

/* --- Footer ----------------------------------------------- */
.arena-footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.8rem;
    color: #555;
    border-top: 1px solid #2a2a4a;
}

.arena-footer a { color: #7b9ec4; text-decoration: none; }
.arena-footer a:hover { color: #f5c518; }

/* --- Battle Arena ----------------------------------------- */
.battle-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 700px) {
    .battle-arena { grid-template-columns: 1fr; }
    .vs-divider { display: none; }
}

/* --- Pokémon Panels --------------------------------------- */
.pokemon-panel {
    background: #16213e;
    border: 2px solid #2a2a5a;
    border-radius: 16px;
    padding: 1.5rem;
    transition: border-color 0.3s;
}

.pokemon-panel.has-pokemon { border-color: #0f3460; }

.panel-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: #7b9ec4;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-align: center;
}

/* --- Search Input ----------------------------------------- */
.search-wrapper {
    position: relative;
    margin-bottom: 1.2rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #0d1b2a;
    border: 2px solid #2a2a5a;
    border-radius: 10px;
    color: #eee;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: #e94560;
}

.search-input::placeholder { color: #4a5a7a; }

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0d1b2a;
    border: 2px solid #2a2a5a;
    border-top: none;
    border-radius: 0 0 10px 10px;
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
    display: none;
}

.autocomplete-list.open { display: block; }

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}

.autocomplete-item:hover,
.autocomplete-item.active { background: #1a3050; }

.autocomplete-item img {
    width: 36px;
    height: 36px;
    image-rendering: pixelated;
}

.autocomplete-item .ac-name { font-weight: 700; font-size: 0.95rem; }

.autocomplete-item .ac-types {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

/* --- Pokémon Card Display --------------------------------- */
.pokemon-display { display: none; }
.pokemon-display.visible { display: block; }

.pokemon-sprite-wrap {
    text-align: center;
    margin-bottom: 0.8rem;
}

.pokemon-sprite {
    width: 120px;
    height: 120px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 12px rgba(245, 197, 24, 0.4));
}

.pokemon-name {
    text-align: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.75rem;
    color: #f5c518;
    margin-bottom: 0.6rem;
}

.pokemon-types {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* --- Type Badges ------------------------------------------ */
.type-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.type-normal   { background: #8a8a6e; }
.type-fire     { background: #c05a20; }
.type-water    { background: #3a6acf; }
.type-electric { background: #c0a010; color: #1a1a00; }
.type-grass    { background: #4a9030; }
.type-ice      { background: #5a9898; }
.type-fighting { background: #8a2018; }
.type-poison   { background: #7a2a7a; }
.type-ground   { background: #9a7830; }
.type-flying   { background: #6858c0; }
.type-psychic  { background: #c03060; }
.type-bug      { background: #787800; }
.type-rock     { background: #787840; }
.type-ghost    { background: #483870; }
.type-dragon   { background: #4818b0; }
.type-dark     { background: #403028; }
.type-steel    { background: #7878a0; }
.type-fairy    { background: #c060a0; }

/* --- Stat Bars -------------------------------------------- */
.stat-list { list-style: none; }

.stat-row {
    display: grid;
    grid-template-columns: 80px 36px 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}

.stat-label { color: #8aaccc; font-weight: 700; }
.stat-value { text-align: right; font-weight: 800; color: #eee; }

.stat-bar-track {
    height: 8px;
    background: #0d1b2a;
    border-radius: 4px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.bar-hp     { background: #4ac44a; }
.bar-attack { background: #e06030; }
.bar-defense { background: #6890e0; }
.bar-spatk  { background: #c040c0; }
.bar-spdef  { background: #60a0d8; }
.bar-speed  { background: #e0c020; }

/* --- VS Divider ------------------------------------------- */
.vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
}

.vs-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.4rem;
    color: #e94560;
    text-shadow: 0 0 20px rgba(233, 69, 96, 0.8);
    animation: vs-pulse 1.5s ease-in-out infinite;
}

@keyframes vs-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
}

/* --- Battle Controls -------------------------------------- */
.battle-controls {
    text-align: center;
    margin: 2.5rem 0 1.5rem;
}

.battle-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.75rem, 2.5vw, 1rem);
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #e94560, #c0122a);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.5);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.battle-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(233, 69, 96, 0.7);
}

.battle-btn:active:not(:disabled) { transform: translateY(0); }

.battle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.battle-btn.loading {
    animation: btn-pulse 0.8s ease-in-out infinite;
}

@keyframes btn-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* --- Result Panel ----------------------------------------- */
.result-panel {
    display: none;
    background: linear-gradient(135deg, #16213e, #0d1b2a);
    border: 2px solid #f5c518;
    border-radius: 16px;
    padding: 2rem;
    margin-top: 1rem;
    text-align: center;
    animation: result-appear 0.4s ease;
}

.result-panel.visible { display: block; }

@keyframes result-appear {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.result-winner-line {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.7rem, 2.5vw, 1rem);
    color: #f5c518;
    margin-bottom: 1rem;
    text-shadow: 0 0 16px rgba(245, 197, 24, 0.6);
}

.result-explanation {
    font-size: 1rem;
    color: #c8d8e8;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    white-space: pre-wrap;
}

.result-error {
    color: #e94560;
    font-weight: 700;
    font-size: 0.95rem;
}

/* --- Instruction hint ------------------------------------- */
.battle-hint {
    text-align: center;
    color: #4a5a7a;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* ============================================================
   Battle a Friend — Landing Page
   ============================================================ */

.friend-page {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.friend-heading {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.95rem;
    color: #f5c518;
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

.friend-sub {
    color: #aac4e4;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.friend-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 600px) {
    .friend-options { grid-template-columns: 1fr; }
}

.friend-card {
    background: #16213e;
    border: 2px solid #2a2a5a;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.friend-card-icon { font-size: 2.5rem; }

.friend-card-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    color: #f5c518;
    line-height: 1.6;
}

.friend-card-desc {
    color: #aac4e4;
    font-size: 0.88rem;
    line-height: 1.5;
}

.friend-btn {
    padding: 0.65rem 1.4rem;
    border: none;
    border-radius: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    margin-top: 0.4rem;
}

.friend-btn--create {
    background: linear-gradient(135deg, #533483, #e94560);
    color: #fff;
}

.friend-btn--join {
    background: linear-gradient(135deg, #0f3460, #533483);
    color: #fff;
}

.friend-btn:hover  { opacity: 0.9; }
.friend-btn:active { transform: scale(0.97); }

.join-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

.join-input {
    width: 120px;
    padding: 0.6rem 1rem;
    background: #0f1b35;
    border: 2px solid #533483;
    border-radius: 8px;
    color: #f5c518;
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 4px;
    outline: none;
}

.join-input:focus { border-color: #e94560; }

.friend-back {
    margin-top: 1rem;
    font-size: 0.85rem;
}

.friend-back a { color: #aac4e4; text-decoration: none; }
.friend-back a:hover { color: #f5c518; }

/* ============================================================
   Room Page
   ============================================================ */

.room-page { max-width: 900px; margin: 0 auto; }

/* Key bar */
.room-key-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: #16213e;
    border: 1px solid #2a2a5a;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.room-key-label { color: #aac4e4; font-size: 0.85rem; font-weight: 700; }

.room-key-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.1rem;
    color: #f5c518;
    letter-spacing: 4px;
}

.room-copy-btn {
    background: none;
    border: 1px solid #533483;
    border-radius: 6px;
    color: #aac4e4;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.room-copy-btn:hover { background: #1e1e4a; }
.room-copy-confirm   { color: #4caf50; font-size: 0.8rem; font-weight: 700; }

/* Status bar */
.room-status-bar {
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    border: 1px solid transparent;
}

.room-status-bar--info  { background: #16213e; border-color: #2a2a5a; color: #aac4e4; }
.room-status-bar--warn  { background: #2d2010; border-color: #8a6000; color: #f5c518; }
.room-status-bar--error { background: #3d1a1a; border-color: #e94560; color: #ff7a8a; }
.room-status-bar--done  { background: #1a3d1a; border-color: #4caf50; color: #80e880; }

/* Arena grid */
.room-arena {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.2rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .room-arena { grid-template-columns: 1fr; }
}

.room-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3rem;
}

.room-vs .vs-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: #e94560;
}

/* Player panels */
.room-panel {
    background: #16213e;
    border: 2px solid #2a2a5a;
    border-radius: 14px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.room-panel-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    color: #f5c518;
    line-height: 1.6;
    text-align: center;
}

/* Search within room */
.room-search-wrap { position: relative; }

.room-search-input {
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: #0f1b35;
    border: 1px solid #2a2a5a;
    border-radius: 8px;
    color: #eee;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

.room-search-input:focus { border-color: #533483; }

.room-autocomplete {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #16213e;
    border: 1px solid #2a2a5a;
    border-radius: 0 0 8px 8px;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
}

.room-autocomplete li {
    padding: 0.4rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.room-autocomplete li:hover,
.room-autocomplete li.active { background: #1e2d55; }

.room-autocomplete .ac-sprite {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

/* Selected Pokémon display in room */
.room-pokemon-display { text-align: center; }

.room-sprite {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
}

.room-pokemon-name {
    font-weight: 800;
    font-size: 1rem;
    margin: 0.2rem 0;
}

.room-type-badges { display: flex; gap: 0.3rem; justify-content: center; flex-wrap: wrap; }

.room-change-btn {
    background: none;
    border: 1px solid #533483;
    border-radius: 6px;
    color: #aac4e4;
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    margin-top: 0.4rem;
    font-family: inherit;
    transition: background 0.2s;
}

.room-change-btn:hover { background: #1e1e4a; }

/* Ready button */
.room-actions { display: flex; justify-content: center; }

.room-ready-btn {
    padding: 0.6rem 1.4rem;
    border: 2px solid #533483;
    border-radius: 8px;
    background: #0f1b35;
    color: #aac4e4;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

.room-ready-btn:disabled { opacity: 0.4; cursor: default; }
.room-ready-btn.is-ready { background: #1a3d1a; border-color: #4caf50; color: #80e880; }
.room-ready-btn:not(:disabled):not(.is-ready):hover { border-color: #e94560; }

/* Opponent status */
.room-opp-status,
.room-opp-ready {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    padding: 0.5rem 0;
}

.opp-status-icon { font-size: 1.1rem; }

/* Battle wrap */
.room-battle-wrap {
    text-align: center;
    margin-bottom: 1.5rem;
}

.room-battle-btn {
    padding: 0.85rem 2.5rem;
    background: linear-gradient(135deg, #e94560, #533483);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    animation: btn-pulse 2s ease-in-out infinite;
}

.room-battle-btn:disabled {
    opacity: 0.35;
    cursor: default;
    animation: none;
}

.room-battle-btn:not(:disabled):hover  { opacity: 0.9; }
.room-battle-btn:not(:disabled):active { transform: scale(0.97); }

.room-battle-hint {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: #666;
}

/* Spinner */
.room-spinner {
    text-align: center;
    padding: 3rem 0;
}

.spinner-ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(#e94560 0deg 180deg, #fff 180deg 360deg);
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Result */
.room-result {
    text-align: center;
    animation: result-appear 0.5s ease-out;
}

.room-result-reveal { margin-bottom: 1.5rem; }

.result-pokemon-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.result-pokemon { text-align: center; }

.result-sprite {
    width: 100px;
    height: 100px;
    image-rendering: pixelated;
}

.result-name { font-weight: 800; font-size: 1rem; margin-top: 0.3rem; }

.result-vs-mini {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.8rem;
    color: #e94560;
}

.room-result-narrative {
    max-width: 600px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
    font-size: 1rem;
    color: #eee;
    background: #16213e;
    border: 1px solid #2a2a5a;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    white-space: pre-wrap;
}

.room-result-again {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: linear-gradient(135deg, #533483, #e94560);
    border-radius: 8px;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    text-decoration: none;
    transition: opacity 0.2s;
}

.room-result-again:hover { opacity: 0.9; }

/* --- Result action row -------------------------------------------------- */
.room-result-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Override: .room-result-again is now a <button> */
.room-result-again {
    border: none;
    cursor: pointer;
}

.room-result-exit {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #aaa;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.65rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.room-result-exit:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* --- Pokémon stat bars (your panel) ------------------------------------- */
.room-stats {
    width: 100%;
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.room-stat-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.room-stat-label {
    width: 3.4rem;
    text-align: right;
    color: #888;
    font-size: 0.6rem;
    flex-shrink: 0;
}

.room-stat-bar {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.room-stat-fill {
    height: 100%;
    background: linear-gradient(90deg, #56ccf2, #2f80ed);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.room-stat-num {
    width: 2rem;
    text-align: right;
    color: #ccc;
    font-size: 0.6rem;
    flex-shrink: 0;
}

/* --- Room round history ------------------------------------------------- */
.room-history {
    max-width: 640px;
    margin: 1.5rem auto 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.room-history-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
}

.room-history-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
}

.room-history-row:last-child { border-bottom: none; }

.room-history-round {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #666;
    width: 1.8rem;
    flex-shrink: 0;
}

.room-history-matchup {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    color: #ccc;
    flex-wrap: wrap;
}

.room-history-sprite {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
}

.room-history-vs {
    color: #555;
    font-size: 0.65rem;
    margin: 0 0.1rem;
}

.room-history-winner {
    color: #f1c40f;
    font-size: 0.7rem;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Room history win/loss colouring ------------------------------------ */
.room-history-row--win {
    background: rgba(39, 174, 96, 0.12);
    border-left: 3px solid #27ae60;
    padding-left: 0.5rem;
}

.room-history-row--loss {
    background: rgba(231, 76, 60, 0.12);
    border-left: 3px solid #e74c3c;
    padding-left: 0.5rem;
}

/* --- Battle result: per-pokémon stats & types --------------------------- */
.result-pokemon-pair { align-items: flex-start; }

.result-types {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.result-stats {
    width: 150px;
    max-width: 100%;
    margin: 0.5rem auto 0;
}