:root {
    --bg-color: #121214;
    --surface-color: #1e1e24;
    --primary-color: #00e5ff;
    /* Cyan for Player/Win */
    --secondary-color: #ff2a6d;
    /* Pink for Enemy/Lose */
    --text-color: #ffffff;
    --text-muted: #8b8b99;
    --accent-color: #ffcc00;
    /* Yellow for highlights */

    --font-main: 'Inter', sans-serif;
    --font-jp: 'Noto Sans JP', sans-serif;

    --card-width: 100px;
    /* Adjusted to 100px */
    --card-height: 140px;
    /* Restored to original height */

    /* 
       --- Z-INDEX HIERARCHY ---
       500: Settings Overlay (.overlay)
       200: Evolution Overlay (#evolution-overlay)
       150: Serve Overlay (#serve-overlay)
       110: Result Marks (.result-overlay-container)
       100: Miss Animation (.miss-x-container)
        50: Floating Buttons (#voy-container, #vamos-container)
        20: Player Hand (#player-hand)
        15: Crack Effects (.crack-effect)
        10: Header (#header), Selected Card, Serve Cursor
         5: Active Scene (.scene.active)
         2: Tokens, Card Back, Highlights
         1: Persistent Characters, Net, Backgrounds
    */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-jp);
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#app {
    width: 100%;
    max-width: 480px;
    /* Mobile focused */
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--bg-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* --- Header --- */
#header {
    position: relative;
    /* For absolute menu */
    flex: 0 0 auto;
    padding: 5px 10px 5px 10px;
    /* Increased top padding to 25px */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 10;
}

.header-info-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* Push Phase left, Leader right */
    gap: 0;
    align-items: center;
    padding: 0 10px;
    /* Add some padding from edges */
    padding-right: 60px;
    /* Space for absolute MENU button */
}

/* Absolute Menu Button */
#btn-menu {
    position: absolute;
    right: 15px;
    top: 5px;
    margin: 0;
    /* Override generic margins */
}

#phase-display {
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--text-muted);
}

#score-board {
    display: flex;
    align-items: center;
    gap: 30px;
}

.score-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* or baseline */
    gap: 10px;
}

.score-box .label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.score-box .score {
    font-size: 2.5rem;
    /* Reduced from 3rem */
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 1;
}

.player .score {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.enemy .score {
    color: var(--secondary-color);
    text-shadow: 0 0 10px rgba(255, 42, 109, 0.3);
}

.server-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffd700;
    /* Gold */
    opacity: 0;
    /* Hidden by default */
    margin: 0 8px;
    transition: opacity 0.3s;
}

.server-icon.active {
    opacity: 1;
}

.state-badge {
    font-size: 0.6rem;
    background: #333;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 5px;
    border: 1px solid #555;
    /* Default border */
}

#leader-display {
    font-size: 0.7rem;
    color: var(--accent-color);
    text-align: right;
}

/* --- Mini Court --- */
#mini-court {
    width: 250px;
    height: 120px;
    background-color: #2a3b55;
    border: 2px solid #fff;
    margin: 2px 0 0 0;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.court-line {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.6);
}

/* NET: Vertical Middle */
.court-line.net {
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    z-index: 1;
}

/* Service Lines: Vertical */
/* Player (Left): ~70% from Net to Left Wall -> 15% from Left */
.court-line.service-p {
    width: 2px;
    height: 100%;
    left: 20%;
    top: 0;
}

/* Enemy (Right): ~70% from Net to Right Wall -> 85% from Left */
.court-line.service-e {
    width: 2px;
    height: 100%;
    right: 20%;
    top: 0;
}

/* Center Line: Horizontal Middle (Between Service Lines) */
.court-line.center {
    width: auto;
    left: 20%;
    right: 20%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

.token {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.7rem;
    position: absolute;
    top: 50%;
    /* Center vertical */
    transform: translate(-50%, -50%);
    transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.token.player {
    background-color: var(--primary-color);
    color: #000;
}

.token.enemy {
    background-color: var(--secondary-color);
    color: #000;
}

/* --- 2vs2 Tokens --- */
.token.pair {
    font-size: 0.6rem;
    opacity: 0.8;
    /* Slightly dimmer to distinguish main */
}

/* Serve Arrow (Simple Line + Triangle) */
#serve-arrow {
    position: absolute;
    width: 60%;
    height: 2px;
    background-color: rgba(255, 255, 0, 0.7);
    top: 50%;
    left: 50%;
    transform-origin: center;
    z-index: 5;
    pointer-events: none;
}

#serve-arrow::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -4px;
    width: 0;
    height: 0;
    border-left: 10px solid rgba(255, 255, 0, 0.7);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* State Positions (X axis) */
/* Player (Left Side) */
/* Attack: Near Net (45%) */
/* Defense: Back (10%) */
.token.player.pos-attack {
    left: calc(45% - 10px);
}

.token.player.pos-defense {
    left: 10%;
}

/* Enemy (Right Side) */
/* Attack: Near Net (55%) */
/* Defense: Back (90%) */
.token.enemy.pos-attack {
    left: calc(55% + 10px);
}

.token.enemy.pos-defense {
    left: 90%;
}

/* 2vs2 Specific Position Classes */
/* Vertical Positioning (Forehand/Backhand) */
/* Player Side (Bottom) vs Enemy Side (Top) ?? NO */
/* Mini Court is 2D Top-Down View */
/* Let's define: P is LEFT Team, E is RIGHT Team (as per original CSS) */
/* BUT User Request says: Self(Near), Enemy(Far) */
/* Original CSS has .token.player LEFT, .token.enemy RIGHT */
/* This implies Side view ?? Or Split screen? */
/* Wait, existing tokens are P (Left) and E (Right). */
/* User says: "Forehand = Left", "Backhand = Right" (screen coords) */
/* AND "Self(Near): Left=P, Right=Pair" */
/* This implies the court is viewed from ABOVE with Player at BOTTOM? */
/* BUT current CSS: .token.player { left: 45% }  */
/* This suggests Horizontal Court (Left vs Right). */
/* Let's stick to Horizontal Court for now as it's the current implementation. */
/* Player Team = LEFT SIDE */
/* Enemy Team = RIGHT SIDE */
/* "Forehand" (for Player) = Top (if we assume standard tennis TV view from side? No, usually Bottom/Top is sides) */
/* IF Court is Horizontal: */
/* Top Half = Forehand? Bottom Half = Backhand? */
/* User said: "Forehand side = Left", "Backhand side = Right". This contradicts Horizontal layout if referring to screen structure. */
/* UNLESS user imagines Vertical Court (Bottom vs Top). */
/* Let's check `mini-court` dimensions: width 250px, height 100px. */
/* It is WIDER than TALL. It is a Horizontal Court. */
/* Left Side = Player. Right Side = Enemy. */
/* So "Forehand/Backhand" must map to Top/Bottom. */
/* Let's Assume: Top = Forehand, Bottom = Backhand (or vice-versa). */
/* User RFI: "Left=P, Right=Pair" (Near/Self) */
/* This suggests the USER sees themselves at the BOTTOM maybe?? */
/* Actually, if "Left=P", maybe P is Top-Left? */
/* Let's map strictly to user's "Left/Right" request within the 2D box. */
/* The box is 250x100. */
/* If Player is LEFT SIDE of Screen. */
/* "Left" relative to Player facing net? */
/* Let's use: Top = Left (Forehand?), Bottom = Right (Backhand?) */
/* No, usually: Right-Handed Player -> Forehand is Right side, Backhand is Left side. */
/* Let's just follow the User's explicit grid: */
/* Self (Left Side of Screen?): Left=P, Right=Pair */
/* This implies P is at Top (if rotated) or P is Left (if horizontal). */
/* PROBLEM: The user says "Self (Near)" and "Enemy (Far)". This implies Vertical Court. */
/* BUT CSS is Horizontal (`width: 250px; height: 100px;`). */
/* AND `service-p` is `left: 20%`, `service-e` is `right: 20%`. */
/* So Player is LEFT, Enemy is RIGHT. */
/* How to map "Left=P, Right=Pair" to this? */
/* Maybe "Left" = Top half? "Right" = Bottom half? */
/* Let's assume Top = Left, Bottom = Right for PLAYER. */
/* So P = Top-Left, Pair = Bottom-Left. */

/* Positioning Classes */
.token.pos-top {
    top: 25%;
}

.token.pos-bottom {
    top: 75%;
}

.token.pos-mid {
    top: 50%;
}

/* Default */
.token {
    top: 50%;
}

/* Overrides default */


/* --- Main / Scenes --- */
#game-stage {
    flex: 1 1 auto;
    /* Grow to fill space */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.scene {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.scene.active {
    opacity: 1;
    pointer-events: all;
    z-index: 5;
}

/* --- Title Scene --- */
.main-title {
    text-align: center;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 5px;
    /* Reduced from 40px */
    transform: skew(-5deg);
}

.main-title .small {
    font-size: 1rem;
    color: var(--primary-color);
    letter-spacing: 4px;
    font-weight: 400;
}

/* --- Components --- */
.btn-primary,
.btn-secondary {
    padding: 20px 15px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 150px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

#btn-start {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 20px 60px;
    margin-top: 5px;
    /* Reduced from 45px to pull buttons up */
    /* Elevated by 75px */
    font-size: 1.2rem;
    letter-spacing: 6px;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#btn-start:hover {
    background: rgba(0, 229, 255, 0.1);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.6);
    letter-spacing: 8px;
    transform: scale(1.05);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--text-muted);
    color: var(--text-muted);
    margin-top: 10px;
}

.btn-primary:active {
    transform: scale(0.95);
}

.btn-danger {
    background-color: var(--secondary-color);
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 42, 109, 0.4);
    /* Same base styles as btn-primary */
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-danger:active {
    transform: scale(0.95);
}

/* Outline Variants */
.btn-primary-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary-outline:active {
    transform: scale(0.95);
}

.btn-danger-outline {
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    box-shadow: 0 0 10px rgba(255, 42, 109, 0.2);
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-danger-outline:active {
    transform: scale(0.95);
}

.hidden {
    display: none !important;
}

/* --- Card Styles (General) --- */
.card-container {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

#player-hand {
    margin-top: 80px;
    /* Reduced from 40px to maintain position while closing gap */
    margin-bottom: 1vh;
}

#narrative-action,
#narrative-result,
#narrative-coin {
    min-height: 2em;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    width: var(--card-width);
    height: var(--card-height);
    background: var(--surface-color);
    border: 2px solid #555;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Prevent shrinking */
    align-items: center;
    /* Center Align */
    justify-content: flex-start;
    /* Text to Top */
    padding-top: 15px;
    padding-left: 0;
    /* Reset Spacing */
    /* Spacing */
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    /* Text Center */
    position: relative;
    color: #fff;
    box-sizing: border-box;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.card:not(.card-enemy):not(.flippable):not(.selected):hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    /* Simple shadow instead of glow */
    cursor: pointer;
}

.card.selected {
    background: var(--primary-color) !important;
    color: #000 !important;
    border-color: #fff !important;
    box-shadow: none;
    /* Removed neon glow */
    transform: scale(1.1) translateY(-10px) !important;
    z-index: 10;
    animation: cardSelectPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cardSelectPop {
    0% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1.2) translateY(-15px);
    }

    100% {
        transform: scale(1.1) translateY(-10px);
    }
}


.card.flippable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    padding: 0 !important;
}

/* --- Action Scene Updates --- */
#enemy-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    /* Move down */
    margin-bottom: 5px;
    perspective: 1000px;
    min-height: var(--card-height);
    width: 100%;
}

.card-enemy {
    border-color: var(--secondary-color);
    cursor: not-allowed !important;
    opacity: 0.4;
    /* Further reduced from 0.7 */
    filter: grayscale(0.8) brightness(0.6);
    transform: scale(0.8);
    /* Reduced from 0.9 */
    transition: all 0.3s ease;
}

.card-enemy.flippable {
    opacity: 1;
    /* Reset for 3D container */
    filter: none;
    transform: none;
}

.card-enemy .card-back {
    background: repeating-linear-gradient(45deg,
            #1a1a1f,
            #1a1a1f 10px,
            #25252b 10px,
            #25252b 20px) !important;
    color: #333 !important;
    /* Question mark color */
    border-color: #444 !important;
}

/* 3D Flip System */
.flippable {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    perspective: 1000px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.flippable.flipped {
    transform: rotateY(180deg) !important;
    -webkit-transform: rotateY(180deg) !important;
}

.card-back,
.card-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    /* Center Align */
    justify-content: flex-start;
    /* Top Align */
    padding-top: 15px;
    padding-left: 0;
    /* Reset Spacing */
    border-radius: 8px;
    box-sizing: border-box;
    border: 2px solid #555;
    font-weight: bold;
    font-size: 0.9rem;
    color: #fff;
    text-align: center;
    /* Text Center */
    transition: opacity 0.3s;
}

.card-back {
    background: #2a2a30;
    color: #555;
    font-size: 2rem;
    z-index: 2;
    transform: rotateY(0deg);
}

.card-front {
    background: var(--surface-color);
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    z-index: 1;
}

.flippable.flipped .card-back {
    opacity: 0;
    /* Fallback for transparency issues in 3D */
}

.flippable.flipped .card-front {
    opacity: 1;
}

/* Specific border colors for result cards */
#result-card-p .card-front,
#result-card-p .card-back {
    border-color: var(--primary-color);
}

#result-card-e .card-front,
#result-card-e .card-back {
    border-color: var(--secondary-color);
}

/* Result Scene Specifics */
.match-card .card {
    cursor: default;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.match-card.player .card {
    border-color: var(--primary-color);
}

.match-card.enemy .card {
    border-color: var(--secondary-color);
}

/* --- Miss Label Animation --- */
.miss-x-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* Full width for text */
    height: 100%;
    z-index: 100;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.miss-label {
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 1.8rem;
    color: #ffcc00;
    /* Flashy Yellow */
    text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff6600;
    font-style: italic;
    transform: skew(-15deg);
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: missLabelPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes missLabelPop {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg) skew(-15deg);
        opacity: 0;
    }

    70% {
        transform: translate(00%, 00%) scale(1.3) rotate(5deg) skew(-15deg);
        opacity: 1;
    }

    100% {
        transform: translate(00%, 00%) scale(1) rotate(0deg) skew(-15deg);
        opacity: 1;
    }
}

/* --- Round Result Overlays (○, ×, △) --- */
.result-overlay-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    z-index: 110;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    /* Higher transparency to see text */
}

/* ○ (Win) */
.overlay-circle {
    width: 50px;
    height: 50px;
    border: 5px solid var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--primary-color);
    animation: overlayPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

/* × (Lose) */
.overlay-cross {
    position: relative;
    width: 45px;
    height: 45px;
    animation: overlayPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.overlay-cross::before,
.overlay-cross::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--secondary-color);
    border-radius: 3px;
    box-shadow: 0 0 10px var(--secondary-color);
}

.overlay-cross::before {
    transform: rotate(45deg);
}

.overlay-cross::after {
    transform: rotate(-45deg);
}

/* △ (Draw) */
.overlay-triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid var(--accent-color);
    filter: drop-shadow(0 0 10px var(--accent-color));
    position: relative;
    animation: overlayPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

/* Hole for triangle to make it an outline/shape */
.overlay-triangle::after {
    content: '';
    position: absolute;
    top: 12px;
    left: -18px;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 30px solid var(--surface-color);
}

@keyframes overlayPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.matchup-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    /* Reduced from 5px */
    min-height: var(--card-height);
    perspective: 1000px;
}

.matchup-display.flipped {
    flex-direction: row-reverse;
}


.match-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    /* Reduced from 10px to minimize gap between card and label */
    animation: fadeIn 0.5s ease-out;
}

.match-card span {
    font-size: 1.2rem;
    font-weight: 800;
    font-style: italic;
    color: var(--text-muted);
    min-width: 60px;
    /* Ensure stable width for label */
    text-align: center;
}

.match-card .card {
    cursor: default;
}

.match-card.player .card {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}

.match-card.enemy .card {
    border-color: var(--secondary-color);
    box-shadow: 0 0 15px rgba(255, 42, 109, 0.2);
}

.vs {
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    color: var(--text-muted);
}

#round-result-text {
    font-size: 3rem;
    font-weight: 900;
    font-style: italic;
    text-align: center;
    margin-top: -5px;
    /* Negative margin to pull it extremely close */
    margin-bottom: 0px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    height: 60px;
}

.text-primary {
    color: var(--primary-color) !important;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.text-danger {
    color: var(--secondary-color) !important;
    text-shadow: 0 0 10px rgba(255, 0, 100, 0.5);
}

.reason-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 5px;
    /* Reduced from 10px */
    text-align: center;
    max-width: 100%;
    /* Max width */
    white-space: nowrap;
    /* Prevent wrapping */
    overflow: visible;
}


/* --- Footer / Narrative --- */
#footer {
    flex: 0 0 auto;
    padding: 20px 20px 40px 20px;
    min-height: 20px;
    /* Reduced from 100px */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    transition: all 0.3s ease;
    /* Speed up */
    overflow: hidden;
}

#footer.collapsed {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden;
    /* Ensure it's gone */
    transition: all 0.3s ease, visibility 0s 0.3s;
    /* Speed up */
}

.narrative-box {
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    color: var(--text-color);
    opacity: 0.9;
    position: relative;
    /* Ensure z-index works */
    z-index: 200;
    /* Above court (150) and characters */
    transform: translateY(-10px);
    /* マイナスで上に、プラスで下に移動 */
}

/* Plain style for Continue */
.text-muted {
    color: #888 !important;
    font-size: 2.5rem !important;
    /* Smaller than standard result text */
    text-shadow: none !important;
}

/* Style for Counter */
/* Style for Counter - now integrated into unified non-score style */
.text-counter {
    /* Deprecated in favor of generic non-score style, but kept for safety */
    color: #00ccff !important;
    font-size: 2.0rem !important;
    text-shadow: none !important;
}

/* Unified style for all non-scoring results (Block, Continue, Counter) */
.text-non-score {
    /* Fallback/Base */
    font-size: 2.0rem !important;
    text-shadow: none !important;
}

.text-adv-player {
    color: #00ccff !important;
    /* Cyan (Player Adv) */
    font-size: 2.0rem !important;
    text-shadow: none !important;
}

.text-adv-enemy {
    color: var(--secondary-color) !important;
    /* LOSE Color (Pink/Red) */
    font-size: 2.0rem !important;
    text-shadow: none !important;
    /* No glow */
}

/* Flashy animation for Scoring */
/* Flashy animation for Scoring */
.text-score-flash {
    animation: scoreFlash 0.5s ease-out forwards;
    /* Font size falls back to ID (3rem) */
    text-shadow: 0 0 20px currentColor !important;
    display: block;
}

@keyframes scoreFlash {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Animations --- */
.coin-container {
    perspective: 1000px;
    margin-bottom: 20px;
    margin-top: 200px;
}

#coin {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-out;
    /* Controlled via JS mostly */
}

.side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 4px solid;
    font-size: 0.8rem;
}

.side.heads {
    background: var(--primary-color);
    color: #000;
    border-color: #fff;
}

.side.tails {
    background: var(--secondary-color);
    color: #000;
    border-color: #fff;
    transform: rotateY(180deg);
}

.animate-spin {
    animation: spin 0.2s infinite linear;
}

@keyframes spin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Vibration/Shake Effect */
.shake {
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Change Court Flip */
.court-flipped {
    transform: scaleX(-1);
}

.court-flipped .token {
    transform: translate(-50%, -50%) scaleX(-1);
    /* Unflip text */
}

/* Swap Animations */
.anim-swap-p {
    animation: swap-p 1.2s ease-in-out forwards;
}

.anim-swap-e {
    animation: swap-e 1.2s ease-in-out forwards;
}

@keyframes swap-p {
    0% {
        left: 20%;
        top: 50%;
    }

    50% {
        left: 50%;
        top: 10%;
    }

    /* Arc Top */
    100% {
        left: 80%;
        top: 50%;
    }
}

@keyframes swap-e {
    0% {
        left: 80%;
        top: 50%;
    }

    100% {
        left: 20%;
        top: 50%;
    }
}

/* Summary Table */
.summary-table {
    margin: 5px auto;
    /* Reduced from 20px */
    width: 100%;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 15px;
    /* Reduced from 15px */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.summary-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    /* Slightly smaller to fit rate */
}

.summary-table th,
.summary-table td {
    padding: 10px 4px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-table .rate {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-left: 2px;
    font-weight: normal;
}

.summary-table th {
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
}

.summary-table td:first-child {
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
}

.summary-table td:nth-child(2) {
    color: var(--primary-color);
    font-weight: 800;
}

.summary-table td:nth-child(3) {
    color: var(--secondary-color);
    font-weight: 800;
}

.summary-table tr:last-child td {
    border-bottom: none;
}

/* --- Character Visuals --- */
.char-container {
    width: 80px;
    /* Reduced base size */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
    z-index: 1;
    pointer-events: none;
    /* Add this to prevent intercepting clicks */
}

.char-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Animations */
@keyframes charFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes charJump {

    0%,
    100% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-40px);
    }

    40% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(-20px);
    }

    80% {
        transform: translateY(0);
    }
}

@keyframes charShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px) rotate(-1deg);
    }

    75% {
        transform: translateX(3px) rotate(1deg);
    }
}

@keyframes charNod {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Persistent Character Layer */
#persistent-chars {
    position: absolute;
    bottom: 300px;
    /* Adjusted to be roughly 30px below the card selection area */
    left: 50%;
    transform: translateX(-50%);
    width: 390px;
    /* narrowed by 30px (15px each side) */
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px;
    pointer-events: none;
    z-index: 1;
    /* Below UI (z=5) */
    transition: flex-direction 0.5s ease-in-out;
}

/* --- Selection Mode Adjustment --- */
.mode-char-select #persistent-chars {
    /* Allow custom positioning for children */
    pointer-events: none;
}

/* High specificity to ensure hiding */
body.mode-char-select #game-stage #persistent-chars #char-persistent-p {
    display: none !important;
}

body.mode-char-select #footer {
    display: none !important;
}

/* Hide Enemy (not needed during Player Selection) */
.mode-char-select #char-persistent-e {
    opacity: 0;
    pointer-events: none;
}

#persistent-chars.court-flipped {
    transform: translateX(-50%) scaleX(-1);
}

/* #persistent-chars.court-flipped .char-container rule removed (was empty) */

#persistent-chars .char-container {
    width: 110px;
    opacity: 0;
    /* Control via entrance class */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    /* Enable left/right offsets */
}

/* Entrance Animations */
#persistent-chars.entrance .char-container.player {
    animation: slideInLeft 0.8s forwards, charFloat 3s infinite ease-in-out 0.8s;
}

#persistent-chars.entrance .char-container.enemy {
    animation: slideInRight 0.8s forwards, charFloat 3s infinite ease-in-out 1s;
}

/* Static State (Keep after entrance) */
#persistent-chars:not(.entrance) .char-container {
    opacity: 1;
    transform: translateX(0);
    animation: charFloat 3s infinite ease-in-out;
}

.char-container.player {
    transform-origin: bottom center;
}

.char-container.enemy {
    transform-origin: bottom center;
}

/* Flip Enemy Visuals to face Left */
.char-container.enemy img,
.char-container.enemy::before {
    transform: scaleX(-1);
}

.stats-display {
    position: absolute;
    bottom: -35px;
    /* Below the character (which is bottom:220px in scene? No, relative to container) */
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
    z-index: 200;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    line-height: 1.2;
}

.char-container.enemy .stats-display {
    border-color: rgba(255, 100, 100, 0.4);
}

.char-container.player .stats-display {
    border-color: rgba(100, 255, 100, 0.4);
}

/* --- Difficulty Selection Cards --- */
.difficulty-card {
    border-left: 5px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.difficulty-card .note {
    font-size: 0.75rem;
    color: #ffd700;
    margin-top: 5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Easy (Green) */
.diff-easy {
    border-color: #4ade80 !important;
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.diff-easy h3 {
    color: #4ade80 !important;
}

.diff-easy:hover {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
}

/* Normal (Blue) */
.diff-normal {
    border-color: #60a5fa !important;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.diff-normal h3 {
    color: #60a5fa !important;
}

.diff-normal:hover {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
}

/* Hard (Red) */
.diff-hard {
    border-color: #f87171 !important;
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.diff-hard h3 {
    color: #f87171 !important;
}

.diff-hard:hover {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 0 15px rgba(248, 113, 113, 0.4);
}



/* --- Trophy Styles --- */
.trophy-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid #ffd700;
    color: #ffd700;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    z-index: 10;
}

.trophy-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.9rem;
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

#persistent-chars.court-flipped .stats-display {
    transform: translateX(-50%) scaleX(-1);
    /* Invert scale, keep centering (translateX(-50%) works in local coord?) */
}

/* Character States */
.char-container.bandeja-anim img {
    visibility: hidden !important;
}

.char-container.bandeja-anim::before {
    content: '';
    display: block;
    position: absolute;
    top: -9px;
    /* Centering: (110 - 128) / 2 = -9px */
    left: -9px;
    width: 110px;
    height: 110px;
    /* 1:1 Aspect Ratio per user request */
    background-image: var(--sprite-bandeja, url('assets/images/cards/bandeja_sprite.png'));
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: bandeja-frames 0.6s steps(1) forwards;
    z-index: 128;
    /* Above filters and other effects */
}


/* Player stays facing right, Enemy faces left */
.char-container.enemy.bandeja-anim::before {
    background-image: var(--sprite-bandeja-opp, url('assets/images/cards/opp_bandeja_sprite.png'));
    transform: scaleX(-1);
}

@keyframes bandeja-frames {
    0% {
        background-position: 0% 0%;
    }

    /* TL (Freeze Start) */
    50% {
        background-position: 0% 0%;
    }

    /* TL (Freeze End at 0.3s) - Frame 2 (TR) */
    66% {
        background-position: 100% 0%;
        /* Keep 100% for now, check if wrapping happens here too */
    }

    /* TR - Frame 3 (BL) */
    83% {
        background-position: 0% 100%;
        /* Pull up slightly from bottom if needed, but X=0% is fine */
    }

    /* BL - Frame 4 (BR) */
    100% {
        background-position: 100% 100%;
        /* Pull in from right/bottom to avoid wrap */
    }
}

/* --- VOLLEY (STROKE) ANIMATION --- */
.char-container.volley-anim img {
    visibility: hidden !important;
}

.char-container.volley-anim::before {
    content: '';
    display: block;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 110px;
    height: 110px;
    background-image: var(--sprite-volley, url('assets/images/cards/volley_sprite.png'));
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: volley-frames 0.6s steps(1) forwards;
    z-index: 128;
}

.char-container.enemy.volley-anim::before {
    background-image: var(--sprite-volley-opp, url('assets/images/cards/opp_volley_sprite.png'));
    transform: scaleX(-1);
}

@keyframes volley-frames {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 0%;
    }

    66% {
        background-position: 100% 0%;
    }

    83% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* --- DROP ANIMATION --- */
.char-container.drop-anim img {
    visibility: hidden !important;
}

.char-container.drop-anim::before {
    content: '';
    display: block;
    position: absolute;
    top: -9px;
    left: -9px;
    width: 110px;
    height: 110px;
    background-image: var(--sprite-drop, url('assets/images/cards/drop_sprite.png'));
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: drop-frames 0.6s steps(1) forwards;
    z-index: 128;
}

.char-container.enemy.drop-anim::before {
    background-image: var(--sprite-drop-opp, url('assets/images/cards/opp_drop_sprite.png'));
    transform: scaleX(-1);
}

@keyframes drop-frames {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 0%;
    }

    66% {
        background-position: 100% 0%;
    }

    83% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 100%;
    }
}


/* --- REBOTE (DEFENSE) ANIMATION --- */
.char-container.rebote-anim img {
    visibility: hidden !important;
}

.char-container.rebote-anim::before {
    content: '';
    display: block;
    position: absolute;
    /* Center 128px (assumed size for defense sprite) over 110px container */
    top: -9px;
    left: -9px;
    width: 110px;
    height: 110px;
    background-image: var(--sprite-rebote, url('assets/images/cards/rebote_sprite.png'));
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: rebote-frames 0.6s steps(1) forwards;
    z-index: 128;
}

/* Rebote Defense: Facing needs care */
/* Player Defending (on left): Face Right -> Normal */
/* Enemy Defending (on right): Face Left -> Flipped */
.char-container.enemy.rebote-anim::before {
    background-image: var(--sprite-rebote-opp, url('assets/images/cards/opp_rebote_sprite.png'));
    transform: scaleX(-1);
}

@keyframes rebote-frames {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 0%;
    }

    66% {
        background-position: 100% 0%;
    }

    83% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 100%;
    }
}


/* --- CUT (DEFENSE) ANIMATION --- */
.char-container.cut-anim img {
    visibility: hidden !important;
}

.char-container.cut-anim::before {
    content: '';
    display: block;
    position: absolute;
    /* Center 128px (assumed size for defense sprite) over 110px container */
    top: -9px;
    left: -9px;
    width: 110px;
    height: 110px;
    background-image: var(--sprite-cut, url('assets/images/cards/cut_sprite.png'));
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: cut-frames 0.6s steps(1) forwards;
    z-index: 128;
}

.char-container.enemy.cut-anim::before {
    background-image: var(--sprite-cut-opp, url('assets/images/cards/opp_cut_sprite.png'));
    transform: scaleX(-1);
}

@keyframes cut-frames {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 0%;
    }

    66% {
        background-position: 100% 0%;
    }

    83% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 100%;
    }
}


/* --- STROKE (DEFENSE) ANIMATION --- */
.char-container.stroke-anim img {
    visibility: hidden !important;
}

.char-container.stroke-anim::before {
    content: '';
    display: block;
    position: absolute;
    /* Center 128px (assumed size for defense sprite) over 110px container */
    top: -9px;
    left: -9px;
    width: 110px;
    height: 110px;
    background-image: var(--sprite-stroke, url('assets/images/cards/stroke_sprite.png'));
    background-size: 200% 200%;
    background-repeat: no-repeat;
    animation: stroke-frames 0.6s steps(1) forwards;
    z-index: 128;
}

.char-container.enemy.stroke-anim::before {
    background-image: var(--sprite-stroke-opp, url('assets/images/cards/opp_stroke_sprite.png'));
    transform: scaleX(-1);
}

@keyframes stroke-frames {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 0% 0%;
    }

    66% {
        background-position: 100% 0%;
    }

    83% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* Character Defense Offsets */
/* Player: Left + is Right (Forward) */
.char-container.player.char-def-rebote {
    left: -20px;
}

.char-container.player.char-def-stroke {
    left: 20px;
}

.char-container.player.char-def-cut {
    left: 50px;
}

/* Enemy: Right + is Left (Forward) in standard view? 
   Wait, they are flex items in #persistent-chars.
   Actually, #persistent-chars uses transform: translateX(-50%).
   The chars are just children.
   Let's use transform: translateX() on the container relative to its default.
   
   Player (Left child): 
   Rebote (Back) -> Left (-X)
   Stroke (Forward) -> Right (+X)
   
   Enemy (Right child):
   Rebote (Back) -> Right (+X)
   Stroke (Forward) -> Left (-X)
*/

.char-container.enemy.char-def-rebote {
    right: -20px;
}

.char-container.enemy.char-def-stroke {
    right: 20px;
}

.char-container.enemy.char-def-cut {
    right: 50px;
}

/* States (Reaction Animations) - Extreme specificity to ensure visibility and motion */
#persistent-chars .char-container.win,
#persistent-chars.entrance .char-container.win,
#persistent-chars.court-flipped .char-container.win {
    animation: charJump 0.8s ease-in-out infinite !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: brightness(1.5) contrast(1.2) drop-shadow(0 0 15px rgba(0, 229, 255, 0.8)) !important;
    z-index: 100 !important;
}

#persistent-chars .char-container.lose,
#persistent-chars.entrance .char-container.lose,
#persistent-chars.court-flipped .char-container.lose {
    animation: charShake 0.1s infinite !important;
    filter: grayscale(1) contrast(0.5) brightness(0.6) !important;
    opacity: 0.5 !important;
}

/* Subtle Reactions (Shot Outcome) */
#persistent-chars .char-container.win-shot,
#persistent-chars.entrance .char-container.win-shot,
#persistent-chars.court-flipped .char-container.win-shot {
    animation: charNod 0.4s ease-in-out 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 50 !important;
}

#persistent-chars .char-container.lose-shot,
#persistent-chars.entrance .char-container.lose-shot,
#persistent-chars.court-flipped .char-container.lose-shot {
    animation: charShake 0.1s 4 !important;
    /* Brief shake */
    opacity: 0.9 !important;
}

/* Prevent reaction animations while Bandeja is active */
.char-container.bandeja-anim.win,
.char-container.bandeja-anim.win-shot,
.char-container.bandeja-anim.lose,
.char-container.bandeja-anim.lose-shot,
.char-container.volley-anim.win,
.char-container.volley-anim.win-shot,
.char-container.volley-anim.lose,
.char-container.volley-anim.lose-shot,
.char-container.drop-anim.win,
.char-container.drop-anim.win-shot,
.char-container.drop-anim.lose,
.char-container.drop-anim.lose-shot,
.char-container.stroke-anim.win,
.char-container.stroke-anim.win-shot,
.char-container.stroke-anim.lose,
.char-container.stroke-anim.lose-shot,
.char-container.rebote-anim.win,
.char-container.rebote-anim.win-shot,
.char-container.rebote-anim.lose,
.char-container.rebote-anim.lose-shot,
.char-container.cut-anim.win,
.char-container.cut-anim.win-shot,
.char-container.cut-anim.lose,
.char-container.cut-anim.lose-shot {
    animation: none !important;
    /* Don't jump/shake while swinging */
    filter: none !important;
    /* Keep sprite raw color */
}

.result-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 0px;
    /* Reduced from 5px */
    margin-bottom: 20px;
    width: 100%;
    z-index: 100;
    /* Bring to front */
}

/* Ensure game over buttons are also interactive */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 5px;
    /* Reduced from 20px */
    width: 100%;
    align-items: center;
    z-index: 100;
}

/* Game Ball Styles */
#game-ball {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #e1ff00;
    /* Padel Ball Neon Yellow */
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 10px #e1ff00, 0 0 20px #fff;
    bottom: 80px;
    /* Base height */
    left: 50%;
    transform: translateX(-50%);
}

#game-ball.hidden {
    display: none !important;
}

/* Base Shots (P to E) */
.ball-volley-p {
    animation: shotVolleyP 0.4s ease-out forwards;
}

.ball-bandeja-p {
    animation: shotBandejaP 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ball-drop-p {
    animation: shotDropP 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* Base Shots (E to P) */
.ball-volley-e {
    animation: shotVolleyE 0.4s ease-out forwards;
}

.ball-bandeja-e {
    animation: shotBandejaE 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ball-drop-e {
    animation: shotDropE 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* Bandeja Interactions (P) */
.ball-bandeja-cut-p {
    animation: shotBandejaCutP 1s ease-in-out forwards;
}

.ball-bandeja-rebote-p {
    animation: shotBandejaReboteP 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Bandeja Interactions (E) */
.ball-bandeja-cut-e {
    animation: shotBandejaCutE 1s ease-in-out forwards;
}

.ball-bandeja-rebote-e {
    animation: shotBandejaReboteE 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Volley Interactions (P) */
.ball-volley-rebote-p {
    animation: shotVolleyReboteP 1.2s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

/* Volley Interactions (E) */
.ball-volley-rebote-e {
    animation: shotVolleyReboteE 1.2s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

/* Keyframes: Volley vs Rebote (Wall Bounce) */
/* Player: Fast to 95% (Wall) -> Reflect back to 50% */
@keyframes shotVolleyReboteP {
    0% {
        left: 20%;
        bottom: 75px;
        transform: scale(1);
    }

    30% {
        left: 95%;
        /* Wall fast */
        bottom: 20px;
    }

    40% {
        left: 95%;
        bottom: 20px;
        transform: scaleX(0.8);
        /* Squish */
    }

    100% {
        left: 40%;
        /* Bounce back */
        bottom: 100px;
        /* Mid-high */
        transform: scale(0.9);
        opacity: 0.9;
    }
}

/* Enemy: Fast to 5% (Wall) -> Reflect back to 50% */
@keyframes shotVolleyReboteE {
    0% {
        left: 80%;
        bottom: 75px;
        transform: scale(1);
    }

    30% {
        left: 5%;
        /* Wall fast */
        bottom: 20px;
    }

    40% {
        left: 5%;
        bottom: 20px;
        transform: scaleX(0.8);
        /* Squish */
    }

    100% {
        left: 60%;
        /* Bounce back */
        bottom: 100px;
        /* Mid-high */
        transform: scale(0.9);
        opacity: 0.9;
    }
}

/* Keyframes: Volley (Fast & Straight) - Refined height */
@keyframes shotVolleyP {
    0% {
        left: 20%;
        bottom: 75px;
        opacity: 1;
        transform: scale(1);
    }

    100% {
        left: 80%;
        bottom: 20px;
        opacity: 1;
        transform: scale(0.8);
    }
}

@keyframes shotVolleyE {
    0% {
        left: 80%;
        bottom: 75px;
        opacity: 1;
        transform: scale(1);
    }

    100% {
        left: 20%;
        bottom: 20px;
        opacity: 1;
        transform: scale(0.8);
    }
}

/* Keyframes: Bandeja (High Strike to Floor) */
@keyframes shotBandejaP {
    0% {
        left: 20%;
        bottom: 120px;
        opacity: 1;
        transform: scale(1.2);
    }

    30% {
        left: 40%;
        bottom: 130px;
    }

    100% {
        left: 80%;
        bottom: 35px;
        opacity: 1;
        transform: scale(0.6);
    }
}

@keyframes shotBandejaE {
    0% {
        left: 80%;
        bottom: 120px;
        opacity: 1;
        transform: scale(1.2);
    }

    30% {
        left: 60%;
        bottom: 130px;
    }

    100% {
        left: 20%;
        bottom: 35px;
        opacity: 1;
        transform: scale(0.6);
    }
}

/* Keyframes: Bandeja vs Cut (Bounce Back) */
/* Player: Fly to ~75% (Cut Pos) -> Bounce back to ~50% */
@keyframes shotBandejaCutP {
    0% {
        left: 20%;
        bottom: 120px;
        transform: scale(1.2);
    }

    60% {
        left: 75%;
        /* Hit Cut player */
        bottom: 35px;
    }

    100% {
        left: 50%;
        /* Bounce back */
        bottom: 80px;
        transform: scale(0.8);
        opacity: 0.8;
    }
}

/* Enemy: Fly to ~25% (Cut Pos) -> Bounce back to ~50% */
@keyframes shotBandejaCutE {
    0% {
        left: 80%;
        bottom: 120px;
        transform: scale(1.2);
    }

    60% {
        left: 25%;
        /* Hit Cut player */
        bottom: 35px;
    }

    100% {
        left: 50%;
        /* Bounce back */
        bottom: 80px;
        transform: scale(0.8);
        opacity: 0.8;
    }
}

/* Keyframes: Bandeja vs Rebote (Wall Lob Return) */
/* Player: Fly to 95% (Wall) -> High Arc back to 20% (Enemy) */
@keyframes shotBandejaReboteP {
    0% {
        left: 20%;
        bottom: 120px;
        transform: scale(1.2);
    }

    40% {
        left: 95%;
        /* Wall */
        bottom: 35px;
        /* Floor */
    }

    50% {
        left: 95%;
        bottom: 35px;
        transform: scaleY(0.8);
        /* Squish */
    }

    100% {
        left: 40%;
        /* Lob back */
        bottom: 150px;
        /* High */
        transform: scale(0.9);
        opacity: 0.9;
    }
}

/* Enemy: Fly to 5% (Wall) -> High Arc back to 80% (Player) */
@keyframes shotBandejaReboteE {
    0% {
        left: 80%;
        bottom: 120px;
        transform: scale(1.2);
    }

    40% {
        left: 5%;
        /* Wall */
        bottom: 35px;
        /* Floor */
    }

    50% {
        left: 5%;
        bottom: 35px;
        transform: scaleY(0.8);
        /* Squish */
    }

    100% {
        left: 60%;
        /* Lob back */
        bottom: 150px;
        /* High */
        transform: scale(0.9);
        opacity: 0.9;
    }
}

/* Keyframes: Drop (Soft Parabola to Net/Center) */
@keyframes shotDropP {
    0% {
        left: 20%;
        bottom: 55px;
        opacity: 1;
        transform: scale(1);
    }

    50% {
        left: 40%;
        bottom: 80px;
        transform: scale(1.1);
    }

    100% {
        left: 50%;
        bottom: 15px;
        opacity: 0;
        transform: scale(0.8);
    }
}

/* --- Serve Overlay --- */
#serve-overlay {
    position: fixed;
    top: 190px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
    z-index: 150;
    /* Above cards */
    backdrop-filter: blur(2px);
}

#serve-overlay.hidden {
    display: none !important;
}

/* --- Serve Meter --- */
#serve-meter-container {
    position: relative;
    width: 300px;
    height: 40px;
    background: #333;
    border: 3px solid #fff;
    border-radius: 20px;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
    display: none;
    /* Hidden by default until startServeMeter calls */
}

#serve-meter-container.active {
    display: block;
}

#serve-meter-bar {
    display: flex;
    width: 100%;
    height: 100%;
}

.zone {
    height: 100%;
}

.zone.miss {
    background: #ff2a6d;
    /* Danger */
    width: 15%;
}

.zone.ok {
    background: #00ccff;
    /* Safe */
    width: 25%;
    /* 15+25 = 40% side */
}

.zone.perfect {
    background: #e1ff00;
    /* Perfect Yellow */
    width: 20%;
    /* Center 20% (40-60) */
    box-shadow: 0 0 15px #e1ff00;
    z-index: 2;
}

#serve-cursor {
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: 50%;
    /* Start Center */
    width: 6px;
    background: #fff;
    border: 1px solid #000;
    box-shadow: 0 0 10px #fff;
    z-index: 10;
    transform: translateX(-50%);
}

#btn-serve {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    box-shadow: none;
    /* Removed neon glow */
    margin-top: 5px;
    border: 4px solid rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

#btn-serve:active {
    transform: scale(0.95);
}

#btn-serve.btn-danger {
    box-shadow: none;
    /* Removed neon glow */
}

#serve-status {
    margin-bottom: 5px;
    font-size: 2.5rem;
    /* Reduced from 3.5rem */
    font-weight: 900;
    font-style: italic;
    color: #fff;
    text-shadow: none;
    /* Removed neon glow */
    min-height: 10px;
    text-align: center;
    width: 100%;
}

/* --- Game Over / Result Compact Styles --- */
#scene-gameover {
    /* Center content tightly */
    justify-content: center;
    gap: 10px;
}

#scene-gameover h2 {
    margin-bottom: 5px;
    font-size: 3rem;
    margin-top: 5px;
}

#narrative-end {
    margin: 5px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.summary-table {
    width: 90%;
    max-width: 400px;
    margin: 10px auto;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 5px;
    backdrop-filter: blur(5px);
}

.summary-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.summary-table th,
.summary-table td {
    padding: 4px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-table th {
    color: var(--primary-color);
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 6px;
}

.summary-table tr:last-child td {
    border-bottom: none;
}

.summary-table .rate {
    font-size: 0.8em;
    color: #aaa;
    margin-left: 4px;
}

#scene-gameover .button-group {
    margin-top: 0;
    gap: 5px;
}

@keyframes shotDropE {
    0% {
        left: 80%;
        bottom: 55px;
        opacity: 1;
        transform: scale(1);
    }

    50% {
        left: 60%;
        bottom: 80px;
        transform: scale(1.1);
    }

    100% {
        left: 50%;
        bottom: 15px;
        opacity: 0;
        transform: scale(0.8);
    }
}

/* --- Card Evolution System --- */

/* Evolution Popup Text */
.evolve-pop {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 900;
    font-size: 1.4rem;
    text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    animation: evolveTextPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes evolveTextPop {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5) rotate(5deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.0) rotate(0deg);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* Crack/Flash Effect Container */
.crack-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    z-index: 15;
    pointer-events: none;
    overflow: hidden;
    animation: crackShake 0.4s ease-out;
}

/* Flash Overlay */
.crack-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    animation: flashFade 0.3s ease-out;
}

/* Crack Lines (Simulated via clip-path or gradients for "broken glass" look) */
.crack-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.5) 40px,
            rgba(255, 255, 255, 0.8) 42px);
    opacity: 0;
    transform: rotate(20deg);
    animation: crackLines 0.4s ease-out;
}

@keyframes crackShake {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-5px, 5px);
    }

    40% {
        transform: translate(5px, -5px);
    }

    60% {
        transform: translate(-3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes flashFade {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes crackLines {
    0% {
        opacity: 0;
        transform: scale(1.5) rotate(20deg);
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.6) rotate(25deg);
    }
}

/* Evolved Card State (Post-Evolution) */
.card-evolved {
    border-color: #ffd700 !important;
    /* Gold border */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2);
}

.card-evolved .card-front {
    background: linear-gradient(135deg, var(--surface-color) 0%, #2a2a35 100%);
}

.card-evolved .card-title {
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Reduces Motion Support */
@media (prefers-reduced-motion: reduce) {

    .evolve-pop,
    .crack-effect,
    .crack-effect::before,
    .crack-effect::after {
        animation: none;
        transition: none;
        opacity: 0;
    }
}

/* --- Settings Scene (Appended) --- */
/* --- Settings Overlay (Replaces Scene) --- */
.overlay {
    position: fixed;
    /* Fixed to cover screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Semi-transparent dim */
    backdrop-filter: blur(5px);
    z-index: 500;
    /* Topmost */
    display: flex;
    /* Flex to center content */
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.overlay.active {
    opacity: 1;
    pointer-events: all;
}

.overlay-content {
    background: var(--surface-color);
    padding: 2rem;
    border-radius: 12px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-width: 300px;
}

#scene-settings h2,
.overlay-content h2 {
    font-family: var(--font-main);
    font-size: 2rem;
    color: var(--primary-color);
    letter-spacing: 4px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

/* Menu Button */
.btn-small-icon {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 4px 8px;
    font-size: 0.6rem;
    cursor: pointer;
    font-family: var(--font-main);
    text-transform: uppercase;
    transition: all 0.2s;
    margin-left: auto;
    /* Push to right if in flex container */
}

.btn-small-icon:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.settings-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.settings-group h3 {
    font-size: 1rem;
    color: var(--text-muted);
    letter-spacing: 2px;
}

.btn-row {
    display: flex;
    gap: 15px;
}

.btn-small {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 12px 24px;
    font-family: var(--font-jp);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
    text-align: center;
    border-radius: 4px;
}

.btn-small.active {
    background: var(--primary-color);
    color: #000;
    border: 2px solid #fff;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.8);
    transform: scale(1.1);
    font-weight: 900;
}

.btn-small:hover:not(.active) {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* --- Game Over Layout Fixes --- */
/* --- Game Over Layout Fixes --- */
#scene-gameover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Start from top */
    padding-top: 185px;
    /* Remove padding to pull strictly to top */
    gap: 10px;
    height: 100%;
}

#final-result-text {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 5px;
    margin-top: 250px;
    /* Slight gap from header */
    text-shadow: 0 0 20px currentColor;
    text-align: center;
}

#narrative-end {
    margin: 5px 0 10px 0;
    font-size: 0.85rem;
    padding: 0;
    text-align: center;
    width: 95%;
    /* Widen container */
    max-width: none;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.button-group .btn-main {
    width: 200px;
}

/* Summary Table Styles */
.summary-table {
    width: 100%;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 5px;
}

.summary-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    white-space: nowrap;
    /* Prevent wrapping */
}

.summary-table th,
.summary-table td {
    padding: 4px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-table .rate {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* --- VOY Mechanic --- */
#voy-container {
    position: absolute;
    top: calc(90% + 15px);
    /* Moved up 20px from -45px */
    /* 40% - 30px - 15px */
    left: 5%;
    /* 10px + 5px */
    transform: translateY(-50%);
    z-index: 50;
}

.btn-voy {
    background: linear-gradient(45deg, #ff4e50, #f9d423);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 60px;
    /* Reduced from 80px */
    height: 60px;
    /* Reduced from 80px */
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    /* Reduced from 1.2rem */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 78, 80, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    animation: pulseVoy 2s infinite;
}

.btn-voy:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 78, 80, 0.9);
}

.btn-voy:active {
    transform: scale(0.9);
}

.btn-voy.active {
    background: linear-gradient(45deg, #ff0099, #493240);
    box-shadow: 0 0 40px #ff0099;
    animation: shake 0.5s;
    border-color: #ff0099;
}

.btn-voy:disabled {
    filter: grayscale(1);
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

@keyframes pulseVoy {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 78, 80, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 78, 80, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 78, 80, 0);
    }
}

/* --- VAMOS Mechanic --- */
#vamos-container {
    position: absolute;
    /* VOY is at top: calc(40% - 65px) */
    /* Place this one slightly below and to the right */
    top: calc(90% + 45px);
    /* -10px - 10px = -20px */
    /* 30px - 20px = 10px */
    left: 22%;
    /* 85px - 15px = 70px */
    /* VOY is 15px + 60px width + 10px gap approx */
    transform: translateY(-50%);
    z-index: 50;
}

.btn-vamos {
    background: linear-gradient(45deg, #00b09b, #96c93d);
    /* Green/Teal Gradient */
    border: 2px solid #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    color: #fff;
    font-weight: 900;
    font-size: 0.8rem;
    /* Slightly smaller to fit 6 chars */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(0, 176, 155, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    animation: pulseVamos 2s infinite;
}

.btn-vamos:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 176, 155, 0.9);
}

.btn-vamos:active {
    transform: scale(0.9);
}

.btn-vamos.active {
    background: linear-gradient(45deg, #00d2ff, #3a7bd5);
    /* Blue Active */
    box-shadow: 0 0 40px #00d2ff;
    animation: shake 0.5s;
    border-color: #00d2ff;
}

.btn-vamos:disabled {
    filter: grayscale(1);
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

@keyframes pulseVamos {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 176, 155, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(0, 176, 155, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 176, 155, 0);
    }
}


/* --- Location & Tournament Selection --- */
.location-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    align-items: center;
}

/* --- Modifiers --- */
.mod-plus {
    color: #55ffaa;
    border-color: #55ffaa;
    text-shadow: 0 0 5px rgba(85, 255, 170, 0.4);
}

.mod-minus {
    color: #ff55aa;
    border-color: #ff55aa;
    text-shadow: 0 0 5px rgba(255, 85, 170, 0.4);
}

.mod-pressure {
    color: #ffcc00;
    border-color: #ffcc00;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.4);
}

/* --- Scrollbar --- */
.location-list-container::-webkit-scrollbar {
    width: 6px;
}

.location-list-container::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

/* --- Animations --- */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.selection-card {
    animation: slideInRight 0.3s ease backwards;
}

.selection-card:nth-child(1) {
    animation-delay: 0.05s;
}

.selection-card:nth-child(2) {
    animation-delay: 0.1s;
}

.selection-card:nth-child(3) {
    animation-delay: 0.15s;
}

.selection-card:nth-child(4) {
    animation-delay: 0.2s;
}

/* --- Selection Cards (Polished) --- */
.selection-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 30, 40, 0.8);
    backdrop-filter: blur(10px);
    overflow: hidden;
    position: relative;
    min-height: 80px;
    margin-bottom: 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.2;
    transition: opacity 0.3s;
    background-size: cover;
    background-position: center;
}

.selection-card:hover .card-bg {
    opacity: 0.4;
}

.selection-card.selected .card-bg {
    opacity: 0.6;
}

.card-content {
    position: relative;
    z-index: 1;
    padding: 10px 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.selection-card h3 {
    margin: 0 0 3px 0;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.selection-card .desc {
    font-size: 0.85rem;
    color: #ccc;
    margin-bottom: 5px;
    line-height: 1.3;
}

.modifiers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0;
}

.mod-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    font-weight: 600;
}

/* --- Location Specific Backgrounds (Selection) --- */
.location-card.loc-omiya .card-bg {
    background-image: url('assets/images/bg/bg_omiya.png');
}

.location-card.loc-tokorozawa .card-bg {
    background-image: url('assets/images/bg/bg_tokorozawa.png');
}

.location-card.loc-nerima .card-bg {
    background-image: url('assets/images/bg/bg_nerima.png');
}

.location-card.loc-chigasaki .card-bg {
    background-image: url('assets/images/bg/bg_chigasaki.png');
}

/* Hover Effects */
.location-card.loc-omiya:hover {
    border-color: #aaffff;
    box-shadow: 0 5px 15px rgba(100, 100, 255, 0.4);
    transform: translateY(-3px);
}

.location-card.loc-tokorozawa:hover {
    border-color: #cccccc;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

.location-card.loc-nerima:hover {
    border-color: #ff5555;
    box-shadow: 0 5px 15px rgba(255, 50, 50, 0.4);
    transform: translateY(-3px);
}

.location-card.loc-chigasaki:hover {
    border-color: #00ccff;
    box-shadow: 0 5px 15px rgba(0, 200, 255, 0.4);
    transform: translateY(-3px);
}

/* Selected State */
.selection-card.selected {
    border-color: #fff;
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    background: rgba(50, 50, 60, 0.9);
}




/* --- Game Stage Layout --- */
#game-stage {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    overflow-y: auto;
    /* ★ここを変更 */
    -webkit-overflow-scrolling: touch;
    /* iOSの慣性スクロール */
    width: 100%;
}


/* --- App Backgrounds (Main Game) --- */
#app {
    background-color: var(--bg-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
}

#app.loc-omiya {
    background-image: url('assets/images/bg/bg_omiya.png');
}

#app.loc-tokorozawa {
    background-image: url('assets/images/bg/bg_tokorozawa.png');
}

#app.loc-nerima {
    background-image: url('assets/images/bg/bg_nerima.png');
}

#app.loc-chigasaki {
    background-image: url('assets/images/bg/bg_chigasaki.png');
}

/* Scene Background for Readability */
/* Scene Background for Readability (Applied as underlay to #game-stage) */
#app.loc-omiya #game-stage::before,
#app.loc-nerima #game-stage::before,
#app.loc-chigasaki #game-stage::before,
#app.loc-tokorozawa #game-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    /* Below characters (z=3) */
    pointer-events: none;
}

/* Phase Display Override */
#phase-display {
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 480px) {
    #phase-display {
        font-size: 0.6rem !important;
        letter-spacing: 0.5px !important;
    }
}

/* --- Restored Character Styles Removed --- */
/* The persistent characters are handled by .char-container within #persistent-chars flexbox */
#persistent-chars {
    display: none;
    /* Hidden by default to prevent flash on title screen */
}

/* --- Tournament Rank Concepts --- */
.tournament-card {
    height: 100px;
    /* Slightly taller */
    justify-content: center;
    /* Center content */
    border-width: 2px;
}

.tournament-card .card-content {
    align-items: center;
    /* Center text */
}

.tournament-card h3 {
    font-size: 1.5rem;
    font-style: italic;
    letter-spacing: 2px;
    margin-bottom: 2px;
}

#btn-char-confirm {
    width: 60%;
    margin-right: 10px;
}

#btn-char-back {
    width: 30%;
}

.menu-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.tournament-card h3 .small {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.8;
    margin-left: 5px;
}

.tournament-card .desc {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.tournament-card .note {
    font-size: 0.7rem;
    color: #ccc;
    font-weight: normal;
}

/* Themes */

/* Beginner: Bronze / Solid */
.rank-beginner {
    border-color: #cd7f32;
    /* Bronze */
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1), rgba(100, 60, 20, 0.4), rgba(205, 127, 50, 0.1));
}

.rank-beginner .card-bg {
    background: radial-gradient(circle at center, rgba(205, 127, 50, 0.2), transparent 70%);
}

.rank-beginner h3 {
    color: #cd7f32;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
}

.rank-beginner:hover {
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.4);
    background: rgba(205, 127, 50, 0.2);
}

/* Intermediate: Silver / Cool */
.rank-intermediate {
    border-color: #c0c0c0;
    /* Silver */
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1), rgba(60, 60, 80, 0.4), rgba(192, 192, 192, 0.1));
}

.rank-intermediate .card-bg {
    background: radial-gradient(circle at center, rgba(192, 192, 192, 0.2), transparent 70%);
}

.rank-intermediate h3 {
    color: #e0e0e0;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
}

.rank-intermediate:hover {
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
    background: rgba(192, 192, 192, 0.2);
}

/* Advanced: Gold / Boss */
.rank-advanced {
    border-color: #ffd700;
    /* Gold */
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(80, 20, 20, 0.5), rgba(255, 215, 0, 0.1));
}

.rank-advanced .card-bg {
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3), transparent 70%);
}

.rank-advanced h3 {
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}

.rank-advanced:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
    /* Extra pop */
    background: rgba(255, 215, 0, 0.15);
}

/* --- How To Play Scene --- */
.howto-container {
    width: 90%;
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(30, 30, 36, 0.8);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.howto-section {
    margin-bottom: 25px;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
}

.howto-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.howto-section h3 {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.howto-section p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 8px;
}

.howto-list {
    list-style-type: disc;
    padding-left: 20px;
    color: #ccc;
    font-size: 0.9rem;
}

.howto-list li {
    margin-bottom: 5px;
}

.howto-section strong {
    color: #fff;
    font-weight: 700;
}

/* HowTo Intro Text */
.howto-intro {
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.6;
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #444;
}

.highlight-good {
    color: var(--primary-color);
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.6);
    display: block;
    margin-bottom: 5px;
}

.highlight-bad {
    color: var(--secondary-color);
    text-shadow: 0 0 15px rgba(255, 42, 109, 0.6);
    display: block;
}


/* Tournament Point Rule Display */
.point-rule {
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Tournament Info Row (Rounds + Points) */
.tour-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.tour-info-row .desc {
    margin: 0;
    /* Reset default margins */
}

.tour-info-row .point-rule {
    margin: 0;
    /* Reset default margins */
}

.tour-divider {
    color: #555;
    font-size: 0.8rem;
}

/* RESET persistent chars for relative layout */
#persistent-chars {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    margin-top: -30px;
    /* Pull up to sit behind/under hand? No, we want it between enemy area and hand */
    /* Wait, the user asked for: 30px BELOW the selection card */

    /* Current order in HTML: EnemyArea -> EvoOverlay -> PerChars -> Hand */
    /* So it flows naturally. We just need to give it space. */

    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px;
    z-index: 1;
    pointer-events: none;
}

#persistent-chars .char-container {
    bottom: auto;
    /* Reset shift */
}


/* Fix Layering and Position */
#player-hand {
    position: relative;
    z-index: 20;
    /* Ensure hand is clickable and above chars */
}

#persistent-chars {
    /* Lower by 300px as requested */
    transform: none;
    z-index: 1;
    /* Keep low */
    pointer-events: none;
    /* Ensure clicks pass through */
}

/* Result Scene Positioning */
#scene-result .result-display {
    margin-top: 250px;
    /* Adjusted to be just below mini-court */
}

/* Ensure persistent chars are hidden on Result scene to prevent overlap */
#scene-result.active~#persistent-chars {
    /* Actually persistent-chars is inside scene-action now */
    /* Wait, the user wants them visible? Usually mini-court IS visible on result? */
    /* Previous complaints were about overlap. */
    /* If they are inside scene-action, they are HIDDEN when scene-result is active? */
    /* scene-action has display:none when inactive? */
}

/* 
   Wait, if persistent-chars is INSIDE #scene-action, 
   and we switchScene('result'), #scene-action gets display:none via class removal?
   Let's check game.js switchScene.
*/

/* 
   If the user wants persistent chars visible on Result, 
   we need them outside scene-action OR 
   we need to NOT hide scene-action but overlay result? 
   Currently switchScene toggles .active which likely toggles display.
*/


/* Reset Persistent Chars back to Absolute for Stability across Scenes */
#persistent-chars {
    position: absolute;
    top: 200px;
    bottom: auto;
    transform: translate(-50%, -50%);

    /* 
       We want it visible on Action (cards at bottom) and Result (info at bottom).
       The previous issue was it was 'too high' or 'too low' relative to dynamic content.
       Let's fix it to a reliable screen percentage or px from bottom.
    */

    left: 50%;
    transform: translateX(-50%);
    width: 390px;
    height: 120px;
    display: flex;
    /* Ensure flex is active */
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px;
    pointer-events: none;
    z-index: 1;
    /* Below UI */
    margin-top: 0;
    /* Reset */
}

#persistent-chars .char-container {
    bottom: 0;
}


/* Push cards up to make room */
#player-hand {
    margin-bottom: 50px;
}

/* Character Position Overrides based on Active Scene */
/* Title Scene: Characters lower (Top 50%) */
#scene-title.active~#persistent-chars {
    top: 50% !important;
}

/* Ensure default remains Top 30% for other scenes (already set in base #persistent-chars) */

/* RPS Stats on Tournament Result */
.rps-stats-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    border: 1px solid #444;
}

.rps-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem;
    color: #aeaeae;
}

.rps-icon {
    font-size: 1.8rem;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.rps-count {
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem;
}

.rps-win-count {
    font-size: 0.75rem;
    color: var(--primary-color);
}

/* --- Pair Intervention Visuals --- */
.pair-intervention-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    z-index: 10000;
    /* High priority, logical max */
    background: rgba(0, 0, 0, 0.5);
    /* Explicit dimmer fallback */
    backdrop-filter: blur(2px);
    transform: none;
    /* No 3D interaction */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    animation: pairFlash 0.5s ease-out forwards;
}

.pair-intervention-overlay.player {
    background: radial-gradient(circle, rgba(0, 229, 255, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
}

.pair-intervention-overlay.enemy {
    background: radial-gradient(circle, rgba(255, 42, 109, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
}

@keyframes pairFlash {
    0% {
        background-color: #fff;
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}

.pair-intervention-content {
    position: relative;
    text-align: center;
    width: 100%;
    transform: skew(-10deg);
}

.pair-intervention-text {
    font-family: var(--font-main);
    font-weight: 900;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 4px 4px 0px rgba(0, 0, 0, 1);
    text-transform: uppercase;
    line-height: 1;
    opacity: 0;
    transform: translateX(-100px) scale(1.5);
    animation: pairTextSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pair-intervention-sub {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 1.2rem;
    color: #ffd700;
    /* Gold */
    margin-top: 10px;
    opacity: 0;
    transform: translateY(20px);
    animation: pairSubFadeIn 0.3s ease 0.2s forwards;
    letter-spacing: 0.1em;
    text-shadow: 0 0 5px #000;
}

/* Shake Effect for App */
.shake-screen {
    animation: screenShake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes screenShake {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(4px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-8px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(8px, 0, 0);
    }
}

@keyframes pairTextSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-200px) scale(0.5);
    }

    70% {
        opacity: 1;
        transform: translateX(20px) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes pairSubFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Result Swap Animations */
.swap-out-right {
    animation: swapOutRight 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

.swap-in-left {
    animation: swapInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes swapOutRight {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(50px) scale(0.8);
        opacity: 0;
    }
}

@keyframes swapInLeft {
    0% {
        transform: translateX(-50px) scale(1.2);
        opacity: 0;
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

/* --- Pair Intervention Animations --- */
@keyframes pushOutToLeft {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: translateX(-200%) scale(0.8) rotate(-10deg);
        opacity: 0;
    }
}

.push-out {
    animation: pushOutToLeft 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    position: absolute !important;
    /* Force clone to overlay */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* Ensure width matches */
    top: 0;
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Element bouncing in (Right) */
@keyframes bounceInFromRight {
    0% {
        transform: translateX(100%) scale(0.5);
        opacity: 0;
    }

    60% {
        transform: translateX(-10%) scale(1.1);
        /* Overshoot */
        opacity: 1;
    }

    80% {
        transform: translateX(5%) scale(0.95);
        /* Bounce Back */
    }

    100% {
        transform: translateX(0) scale(1);
        /* Settle */
        opacity: 1;
    }
}

.bounce-in-push {
    animation: bounceInFromRight 1.15s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Added during Animation Enhancement */
.result-text-container {
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 1.5em;
}

.result-text {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: block;
    width: 100%;
    text-align: center;
}

.result-display {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Dynamic Court Change Animations (Diagonal) --- */
/* TL to BR */
.anim-move-tl-br {
    animation: move-tl-br 1.2s ease-in-out forwards;
}

@keyframes move-tl-br {
    0% {
        left: 10%;
        top: 20%;
    }

    100% {
        left: 90%;
        top: 80%;
    }
}

/* BL to TR */
.anim-move-bl-tr {
    animation: move-bl-tr 1.2s ease-in-out forwards;
}

@keyframes move-bl-tr {
    0% {
        left: 10%;
        top: 80%;
    }

    100% {
        left: 90%;
        top: 20%;
    }
}

/* TR to BL */
.anim-move-tr-bl {
    animation: move-tr-bl 1.2s ease-in-out forwards;
}

@keyframes move-tr-bl {
    0% {
        left: 90%;
        top: 20%;
    }

    100% {
        left: 10%;
        top: 80%;
    }
}

/* BR to TL */
.anim-move-br-tl {
    animation: move-br-tl 1.2s ease-in-out forwards;
}

@keyframes move-br-tl {
    0% {
        left: 90%;
        top: 80%;
    }

    100% {
        left: 10%;
        top: 20%;
    }
}

/* --- Video Overlay --- */
#video-overlay {
    background: rgba(0, 0, 0, 0.9);
    z-index: 600;
    /* Higher than settings(500) */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container {
    width: 90%;
    max-width: 400px;
    /* Smartphone width approximate */
    /* Aspect Ratio for Shorts (9:16) */
    aspect-ratio: 9 / 16;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: #000;
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    padding: 10px;
    border-radius: 10px;
}

#youtube-iframe {
    flex: 1;
    border-radius: 5px;
}

/* --- Card Visual Indicators --- */

/* Type Indicators (Stronger) */
.card-type-attack {
    border-color: rgba(0, 229, 255, 0.5) !important;
    /* Visible Cyan Border */
    background: linear-gradient(180deg, var(--surface-color) 40%, rgba(0, 229, 255, 0.3) 100%);
    /* Stronger Gradient */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
}

.card-type-defense {
    border-color: rgba(255, 42, 109, 0.5) !important;
    /* Visible Pink Border */
    background: linear-gradient(180deg, var(--surface-color) 40%, rgba(255, 42, 109, 0.3) 100%);
    /* Stronger Gradient */
    box-shadow: 0 0 10px rgba(255, 42, 109, 0.1);
}

/* Position Marks (.card-pos-*) */
/* Common Mark Style */
.card-pos-front::after,
.card-pos-mid::after,
.card-pos-back::after {
    position: absolute;
    width: auto;
    height: auto;
    padding: 2px 6px;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
    /* Center Horizontal */
    opacity: 1.0;
    /* Full opacity for text */

    /* Text Style */
    content: attr(data-pos-text);
    /* Fallback or fixed? CSS pseudo-content needs literal string or attr */
    /* We can't use dynamic attr easily without JS. Let's hardcode per class below. */

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffcc00;
    /* Yellow Accent */
    border: 1px solid #ffcc00;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* FRONT (Top of Lower Half) */
.card-pos-front::after {
    content: 'FRONT';
    top: 40%;
}

/* MID (Center of Lower Half) */
.card-pos-mid::after {
    content: 'MID';
    top: 61%;
}

/* BACK (Bottom of Lower Half) */
.card-pos-back::after {
    content: 'BACK';
    top: 82%;
}

/* Specific Adjustments for readability if needed */
.card-pos-front,
.card-pos-mid,
.card-pos-back {
    /* Ensure relative positioning for ::after */
    position: relative;
}

/* --- Score Visual Effects --- */
#score-effect-overlay {
    position: absolute;
    /* Inside #mini-court (relative) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Above tokens */
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
    /* Match mini-court radius */
}

#score-effect-overlay.hidden {
    display: none;
}

.score-effect-bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    /* Full height of mini-court */
    background: rgba(0, 0, 0, 0.85);
    /* Darker background */
    transform: translateY(-50%) scaleX(0);
    /* Start hidden */
    transform-origin: center;
}

.score-effect-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    /* Smaller font for mini-court */
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50px) skewX(-20deg);
}

/* Animations */
#score-effect-overlay.active .score-effect-bg {
    animation: bgExpand 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#score-effect-overlay.active .score-effect-text {
    animation: textSlideStrike 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Modifiers for Player/Enemy */
#score-effect-overlay.player .score-effect-text {
    color: var(--primary-color);
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.8), 4px 4px 0 #000;
}

#score-effect-overlay.enemy .score-effect-text {
    color: var(--secondary-color);
    text-shadow: 0 0 20px rgba(255, 42, 109, 0.8), 4px 4px 0 #000;
}


@keyframes bgExpand {
    0% {
        transform: translateY(-50%) scaleX(0);
        opacity: 0;
    }

    10% {
        transform: translateY(-50%) scaleX(1);
        opacity: 1;
    }

    80% {
        transform: translateY(-50%) scaleX(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) scaleX(0);
        opacity: 0;
    }
}

@keyframes textSlideStrike {
    0% {
        opacity: 0;
        transform: translateX(-300px) skewX(-20deg) scale(0.8);
    }

    15% {
        opacity: 1;
        transform: translateX(0) skewX(-20deg) scale(1.1);
    }

    25% {
        transform: translateX(0) skewX(-20deg) scale(1);
    }

    80% {
        opacity: 1;
        transform: translateX(0) skewX(-20deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(300px) skewX(-20deg) scale(1.2);
    }
}

/* YOU Button (Gold Theme) */
#you-container {
    position: absolute;
    top: calc(50% + 100px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.btn-you {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    color: #000;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border: 2px solid #fff;
    border-radius: 50px;
    padding: 6px 16px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.4);
    text-shadow: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
}

.btn-you:active {
    transform: scale(0.95);
}

.btn-you.active {
    background: #fff;
    color: #ffaa00;
    box-shadow: 0 0 20px #ffd700;
    border-color: #ffd700;
}

.btn-you.disabled {
    filter: grayscale(100%);
    opacity: 0.5;
    cursor: not-allowed;
    background: #555;
    color: #888;
    box-shadow: none;
    border-color: #666;
}

/* --- Character Selection Scene --- */
#scene-char-select .main-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.char-select-container {
    display: flex;
    gap: 0.5rem;
    /* Reduced gap from 2rem */
    /* Removed fixed height 65vh to allow compaction */
    width: 95%;
    /* Wider */
    max-width: 1000px;
    margin: 0 auto;
    align-items: flex-start;
    /* Ensure top alignment */
}

.char-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    overflow-y: auto;
    max-height: 50vh;
    /* Replaced height 100% with max-height */
    align-content: flex-start;
    padding-right: 1rem;
}

.char-card {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
    /* Reduced from 1rem */
    cursor: pointer;
    transition: all 0.2s ease;
    width: 110px;
    /* Slightly narrower */
    text-align: center;
}

.char-card:hover {
    border-color: var(--primary-color);
    background: rgba(0, 229, 255, 0.1);
    transform: translateY(-2px);
}

.char-card.selected {
    border-color: var(--primary-color);
    background: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

.char-card-avatar {
    width: 70px;
    /* Reduced from 80px */
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.2rem;
    /* Reduced from 0.5rem */
    border: 2px solid #fff;
}

.char-card-name {
    font-size: 0.8rem;
    /* Reduced from 0.9rem */
    font-weight: 700;
    color: #fff;
}

.char-details {
    flex: 1;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 0.5rem;
    /* Reduced from 1rem */
    /* Removed height: 100% to allow shrink */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Top align to remove top whitespace */
    padding-top: 2rem;
    /* Add specific top padding */
    position: relative;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.char-preview-avatar {
    position: relative;
    /* Context for Name Overlay */
    margin-bottom: 0.5rem;
    /* Reduced margin */
    display: flex;
    justify-content: center;
}

.char-preview-avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
    object-fit: cover;
    /* No margin bottom */
}

#char-name-display {
    position: absolute;
    bottom: 0;
    /* Overlap bottom of image */
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    /* wider than container to prevent wrap */
    text-align: center;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #000, 0 0 10px var(--primary-color);
    /* Strong shadow for readability */
    z-index: 10;
    pointer-events: none;
    margin: 0;

}

.char-info-block {
    margin-bottom: 0.5rem;
    /* Reduced from 2rem */
    text-align: center;
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.2rem;
    /* Reduced from 0.5rem */
}

/* ... label/value styles ... */
.info-row .label {
    font-size: 0.8rem;
    color: #ccc;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.info-row .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.info-desc {
    font-size: 0.8rem;
    color: #aaa;
}

.char-stats-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    /* Reduced from 1rem */
    height: 100px;
}

/* ... bar styles ... */
.stat-row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.stat-row .label {
    width: auto;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.bar-container {
    width: 14px;
    flex: 1;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.bar-container .bar {
    width: 100%;
    height: 0%;
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-row .val {
    width: auto;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.8rem;
}

.preview-bonus {
    margin-top: 0.2rem;
    /* Reduced from 1rem */
    margin-bottom: 0.5rem;
    /* Ensure minimal bottom space */
    font-size: 0.8rem;
    color: #ffd700;
    font-style: italic;
}

/* New Rule for Menu Buttons in Char Select */
.menu-buttons {
    margin-top: 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* --- Title Character Preview --- */
.title-char-preview {
    margin-top: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    text-align: left;
    display: inline-flex;
    flex-direction: column;
    width: 200px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Ensure clickability */
    position: relative;
    z-index: 10;
}

.title-char-preview:hover {
    border-color: var(--primary-color);
    background: rgba(0, 229, 255, 0.1);
}

.title-char-preview .label {
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.title-char-preview .content {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.title-char-preview img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #fff;
    object-fit: cover;
}

#title-char-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
/* --- Settings Menu Optimization (Added for Scroll & Compact Layout) --- */
/* Enable scrolling for long content */
.overlay-content {
    max-height: 80vh;
    overflow-y: auto;
    padding: 15px; /* Reduced from likely default */
    display: flex;
    flex-direction: column;
    /* Ensure scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

/* Compact Margins for Groups */
.settings-group {
    margin-bottom: 0.8rem !important;
}

/* Compact Headers */
.settings-group h3 {
    margin-bottom: 0.3rem !important;
    font-size: 1rem !important;
}

/* Compact Button Rows */
.btn-row {
    gap: 0.3rem !important;
    flex-wrap: wrap;
    justify-content: center;
}

/* Enhance Title/Close/Actions area */
.settings-actions {
    margin-top: 1.5rem !important;
    padding-bottom: 5px;
    flex-shrink: 0; /* Prevent shrinking when scrolling */
    width: 100%;
}