/* ===== CSS Variables ===== */
:root {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #252525;
    --bg-card: #1e1e1e;

    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;

    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    --border-color: #333333;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-life: var(--font-family);

    /* Animation intensity multipliers */
    --anim-scale: 1;
    --anim-duration: 1;
}

/* Theme: Casual */
[data-theme="casual"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #1f2937;
    --bg-card: #1f2937;
    --accent-primary: #6366f1;
}

/* Theme: Dark (default) */
[data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #1a1a1a;
    --accent-primary: #8b5cf6;
}

/* Theme: Streamer */
[data-theme="streamer"] {
    --bg-primary: #0f0f23;
    --bg-secondary: #1a1a3e;
    --bg-tertiary: #252550;
    --bg-card: #252550;
    --accent-primary: #00d4ff;
}

/* Theme: White Mana (Plains) */
[data-theme="mana-white"] {
    --bg-primary: #f5f5f0;
    --bg-secondary: #e8e8e0;
    --bg-tertiary: #d4d4c8;
    --bg-card: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #7a7a7a;
    --accent-primary: #f9e076;
    --border-color: #c4c4b8;
}

/* Theme: Blue Mana (Island) */
[data-theme="mana-blue"] {
    --bg-primary: #0a1628;
    --bg-secondary: #0f2744;
    --bg-tertiary: #163860;
    --bg-card: #1a3a5c;
    --accent-primary: #0ea5e9;
    --border-color: #1e4976;
}

/* Theme: Black Mana (Swamp) */
[data-theme="mana-black"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #121212;
    --bg-tertiary: #1a1a1a;
    --bg-card: #0f0f0f;
    --accent-primary: #a855f7;
    --border-color: #2a2a2a;
    --text-muted: #555555;
}

/* Theme: Red Mana (Mountain) */
[data-theme="mana-red"] {
    --bg-primary: #1a0a0a;
    --bg-secondary: #2a1010;
    --bg-tertiary: #3a1818;
    --bg-card: #2d1212;
    --accent-primary: #ef4444;
    --danger: #f87171;
    --border-color: #4a2020;
}

/* Theme: Green Mana (Forest) */
[data-theme="mana-green"] {
    --bg-primary: #0a1a0a;
    --bg-secondary: #102810;
    --bg-tertiary: #183818;
    --bg-card: #122d12;
    --accent-primary: #22c55e;
    --success: #4ade80;
    --border-color: #204a20;
}

/* Theme: High Contrast */
[data-theme="high-contrast"] {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #1a1a1a;
    --bg-card: #000000;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #b0b0b0;
    --accent-primary: #ffff00;
    --success: #00ff00;
    --warning: #ffaa00;
    --danger: #ff0000;
    --border-color: #ffffff;
}

/* Font Styles */
[data-font="default"] {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-life: 'Inter', sans-serif;
}

[data-font="beleren"] {
    --font-family: 'Cinzel', 'Times New Roman', serif;
    --font-life: 'Cinzel', serif;
}

[data-font="pixel"] {
    --font-family: 'Courier New', 'Consolas', monospace;
    --font-life: 'Courier New', monospace;
}

[data-font="gothic"] {
    --font-family: 'Old English Text MT', 'Blackletter', serif;
    --font-life: 'Georgia', serif;
}

[data-font="elegant"] {
    --font-family: 'Playfair Display', 'Georgia', serif;
    --font-life: 'Playfair Display', serif;
}

[data-font="rounded"] {
    --font-family: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
    --font-life: 'Nunito', sans-serif;
}

/* Pixel font special styles */
[data-font="pixel"] .life-value {
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}

/* Gothic font special styles */
[data-font="gothic"] .life-value {
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* Elegant font special styles */
[data-font="elegant"] .life-value {
    font-weight: 300;
    letter-spacing: 1px;
}

/* Beleren (MTG-like) special styles */
[data-font="beleren"] .life-value {
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Animation intensity: Subtle */
[data-anim-intensity="subtle"] {
    --anim-scale: 0.5;
    --anim-duration: 0.7;
}

/* Animation intensity: Intense */
[data-anim-intensity="intense"] {
    --anim-scale: 1.5;
    --anim-duration: 1.3;
}

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

html {
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    line-height: 1.5;
}

body.no-animations * {
    animation: none !important;
    transition: none !important;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input, select {
    font-family: inherit;
    border: none;
    background: none;
    color: inherit;
}

select {
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
}

/* ===== Utilities ===== */
.screen {
    display: none;
    min-height: 100vh;
    min-height: 100dvh;
}

.screen.active {
    display: block;
}

/* ===== Setup Screen ===== */
.setup-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    padding-bottom: 4rem;
}

.setup-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.setup-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.setup-section {
    margin-bottom: 1.5rem;
}

.setup-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.player-count-selector,
.starting-life-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.count-btn,
.life-btn {
    flex: 1;
    min-width: 50px;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.count-btn:hover,
.life-btn:hover {
    background: var(--bg-card);
}

.count-btn.active,
.life-btn.active {
    background: var(--accent-primary);
    color: white;
}

.custom-life-input {
    flex: 1;
    min-width: 80px;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    text-align: center;
    font-weight: 600;
}

.custom-life-input:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* Layout Presets */
.layout-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.layout-preset-btn {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.layout-preset-btn:hover {
    background: var(--bg-card);
}

.layout-preset-btn.active {
    background: var(--accent-primary);
    color: white;
}

.layout-presets-small {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.layout-presets-small .layout-preset-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.table-mode-toggle {
    margin-top: 0.5rem;
}

.table-mode-toggle label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.table-mode-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
}

/* Theme Selector */
.theme-selector {
    display: flex;
    gap: 0.5rem;
}

.theme-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.theme-btn:hover {
    background: var(--bg-card);
}

.theme-btn.active {
    background: var(--accent-primary);
    color: white;
}

.theme-selector-settings {
    display: flex;
    gap: 0.375rem;
}

.theme-btn-sm {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.theme-btn-sm:hover {
    background: var(--bg-card);
}

.theme-btn-sm.active {
    background: var(--accent-primary);
    color: white;
}

/* Mana Theme Buttons */
.mana-themes,
.mana-themes-sm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.theme-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.mana-btn {
    flex: 0 0 auto;
    min-width: 2.5rem;
    padding: 0.5rem;
    font-size: 1rem;
    text-align: center;
}

.theme-btn-sm.mana-btn {
    min-width: 2rem;
    padding: 0.375rem;
    font-size: 0.9rem;
}

.mana-btn[data-theme="mana-white"] { background: #e8e8e0; }
.mana-btn[data-theme="mana-blue"] { background: #163860; }
.mana-btn[data-theme="mana-black"] { background: #1a1a1a; }
.mana-btn[data-theme="mana-red"] { background: #3a1818; }
.mana-btn[data-theme="mana-green"] { background: #183818; }

.mana-btn.active {
    box-shadow: 0 0 0 2px var(--accent-primary), 0 0 10px var(--accent-primary);
    transform: scale(1.1);
}

/* Player Setup List */
.setup-label-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.setup-label-toggle .toggle-icon {
    font-size: 0.625rem;
    transition: transform var(--transition-fast);
}

.setup-section-players.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.setup-section-players.collapsed .player-setup-list {
    display: none;
}

.player-setup-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.player-setup-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.player-color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.player-color-dot:hover {
    transform: scale(1.1);
}

.player-setup-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
}

.player-setup-input:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.player-setup-tag {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    background: var(--accent-primary);
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.start-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    transition: all var(--transition-fast);
}

.start-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.start-btn:active {
    transform: translateY(0);
}

/* ===== Game Screen ===== */
#game-screen {
    display: none;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

#game-screen.active {
    display: flex;
}

/* Animated Background Canvas */
.animated-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

.animated-bg-canvas.hidden {
    display: none;
}

#game-screen > *:not(.animated-bg-canvas) {
    position: relative;
    z-index: 1;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 0.5rem;
}

.header-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.header-btn svg {
    width: 20px;
    height: 20px;
}

.header-btn:hover {
    background: var(--accent-primary);
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

/* Sidebars - hidden by default, shown in landscape */
.sidebar-left,
.sidebar-right {
    display: none;
}

.turn-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

#turn-count {
    font-weight: 700;
    font-size: 0.875rem;
}

#active-player-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.undo-btn.has-undo {
    background: var(--warning);
    animation: undoPulse 1s ease infinite;
}

@keyframes undoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Floating Undo Button */
.floating-undo-btn {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--warning);
    color: #000;
    border-radius: var(--border-radius);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    animation: floatIn 300ms ease;
}

.floating-undo-btn svg {
    width: 20px;
    height: 20px;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== Players Grid ===== */
.players-grid {
    flex: 1;
    display: grid;
    gap: 0.375rem;
    padding: 0.375rem;
    overflow: hidden;
}

/* Dynamic grid layout - generated by JS based on layout config */
.players-grid.layout-rows-1 { grid-template-rows: 1fr; }
.players-grid.layout-rows-2 { grid-template-rows: 1fr 1fr; }
.players-grid.layout-rows-3 { grid-template-rows: 1fr 1fr 1fr; }
.players-grid.layout-rows-4 { grid-template-rows: 1fr 1fr 1fr 1fr; }

/* Larger life values for fewer players */
.players-grid[data-players="2"] .life-value {
    font-size: clamp(5rem, 22vw, 12rem);
}

.players-grid[data-players="3"] .life-value,
.players-grid[data-players="4"] .life-value {
    font-size: clamp(5rem, 19vw, 9rem);
}

.players-grid[data-players="5"] .life-value,
.players-grid[data-players="6"] .life-value {
    font-size: clamp(3rem, 12vw, 6rem);
}

/* ===== Player Card ===== */
.player-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--border-color);
    overflow: hidden;
    position: relative;
    transition: all var(--transition-normal);
}

/* Rotation for table mode */
.player-card[data-rotation="0"] {
    transform: rotate(0deg);
}

.player-card[data-rotation="180"] {
    transform: rotate(180deg);
}

.player-card[data-rotation="90"] {
    transform: rotate(90deg);
}

.player-card[data-rotation="270"] {
    transform: rotate(270deg);
}

/* Background image/GIF support */
.player-card-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.player-card-background.has-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.player-card.gif-paused .player-card-background {
    animation-play-state: paused;
}

.player-card > *:not(.player-card-background) {
    position: relative;
    z-index: 1;
}

.player-card.active-turn {
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.player-card.low-life {
    animation: lowLifePulse calc(2s * var(--anim-duration)) ease-in-out infinite;
}

.player-card.critical-life {
    animation: criticalLifePulse calc(1s * var(--anim-duration)) ease-in-out infinite;
}

.player-card.eliminated {
    opacity: 0.5;
    filter: grayscale(0.8);
}

.player-card.winner {
    border-color: var(--success);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}

/* Monarch Epic Visual */
.player-card.is-monarch {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2);
    animation: monarchGlow 2s ease-in-out infinite;
}

@keyframes monarchGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3); }
}

.monarch-badge-inline {
    font-size: 1rem;
    margin-left: 0.25rem;
    animation: crownPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}

@keyframes crownPulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 1));
        transform: scale(1.1);
    }
}

.player-card.random-highlight {
    border-color: var(--warning);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
    transform: scale(calc(1 + 0.02 * var(--anim-scale)));
}

@keyframes lowLifePulse {
    0%, 100% { border-color: var(--border-color); }
    50% { border-color: var(--danger); }
}

@keyframes criticalLifePulse {
    0%, 100% { border-color: var(--danger); box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
    50% { border-color: var(--danger); box-shadow: 0 0 30px rgba(239, 68, 68, 0.8); }
}

/* Player Header */
.player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    background: var(--player-color, var(--accent-primary));
    background: linear-gradient(135deg, var(--player-color, var(--accent-primary)), rgba(0,0,0,0.3));
}

.player-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
}

.player-status-badges {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.player-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    object-fit: cover;
    flex-shrink: 0;
}

.player-emoji {
    font-size: 1rem;
    flex-shrink: 0;
}

.player-name {
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-tag {
    font-size: 0.5rem;
    padding: 0.125rem 0.375rem;
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    flex-shrink: 0;
}

/* Viado Badge */
.viado-badge {
    font-size: 0.9rem;
    padding: 0.1rem;
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
    background-size: 300% 300%;
    animation: rainbow-shift 3s ease infinite;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
}

@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Viado Result in Settings */
.viado-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(254,202,87,0.2), rgba(72,219,251,0.2), rgba(255,159,243,0.2));
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.3);
}

.viado-label {
    font-size: 0.9rem;
    font-weight: 600;
}

.viado-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #feca57;
}

/* Two-Headed Giant Team Badge */
.team-badge {
    font-size: 0.85rem;
    padding: 0.1rem 0.2rem;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1;
}

.team-badge.team-1 {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.team-badge.team-2 {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    color: white;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
}

/* Two-Headed Giant Player Card Team Styling */
.player-card.team-1 {
    border-left: 4px solid #6366f1;
}

.player-card.team-2 {
    border-left: 4px solid #ec4899;
}

.player-card.team-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, transparent);
    z-index: 5;
}

.player-card.team-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ec4899, transparent);
    z-index: 5;
}

.player-actions {
    display: flex;
    gap: 0.25rem;
}

.player-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: var(--border-radius-sm);
    font-size: 0.625rem;
    transition: background var(--transition-fast);
}

.player-action-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* Life Display */
.player-life-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
}

.life-control {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    user-select: none;
    -webkit-user-select: none;
}

.life-control:active {
    background: rgba(255,255,255,0.05);
}

.life-control.minus:active {
    color: var(--danger);
}

.life-control.plus:active {
    color: var(--success);
}

.life-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.life-value {
    font-size: clamp(2.5rem, 12vw, 5rem);
    font-weight: 800;
    line-height: 1;
    transition: all var(--transition-fast);
}

.life-value.changed {
    animation: lifeChange calc(300ms * var(--anim-duration)) ease;
}

.life-value.damage {
    animation: lifeDamage calc(300ms * var(--anim-duration)) ease;
}

.life-value.heal {
    animation: lifeHeal calc(300ms * var(--anim-duration)) ease;
}

@keyframes lifeChange {
    0% { transform: scale(1); }
    50% { transform: scale(calc(1 + 0.1 * var(--anim-scale))); }
    100% { transform: scale(1); }
}

@keyframes lifeDamage {
    0% { transform: scale(1); color: var(--text-primary); }
    50% { transform: scale(calc(1 + 0.1 * var(--anim-scale))); color: var(--danger); }
    100% { transform: scale(1); color: var(--text-primary); }
}

@keyframes lifeHeal {
    0% { transform: scale(1); color: var(--text-primary); }
    50% { transform: scale(calc(1 + 0.1 * var(--anim-scale))); color: var(--success); }
    100% { transform: scale(1); color: var(--text-primary); }
}

.life-label {
    font-size: 0.5rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Life value row - contains life value and damage shadow */
.life-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

/* Damage Shadow - shows accumulated damage/heal */
.damage-shadow {
    font-size: 2rem;
    font-weight: 700;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.damage-shadow.damage {
    color: #ff4444;
}

.damage-shadow.heal {
    color: #44ff44;
}

.damage-shadow.active {
    animation: damageShadowPulse 0.3s ease;
}

@keyframes damageShadowPulse {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Life Change Indicator */
.life-change-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}

.life-change-indicator.show {
    animation: lifeChangeFloat calc(800ms * var(--anim-duration)) ease-out forwards;
}

.life-change-indicator.positive {
    color: var(--success);
}

.life-change-indicator.negative {
    color: var(--danger);
}

@keyframes lifeChangeFloat {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(calc(1 + 0.2 * var(--anim-scale)));
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150%) scale(1);
    }
}

/* Particle Effects Container */
.particle-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 15;
    border-radius: inherit;
}

/* Fire Particles (Damage) */
.particle.fire {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ff6b35, #ff4500, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: fireParticle 0.8s ease-out forwards;
}

@keyframes fireParticle {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.3);
    }
}

/* Heal Particles (Green Sparkles) */
.particle.heal {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #22c55e, #16a34a, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: healParticle 1s ease-out forwards;
    box-shadow: 0 0 6px #22c55e;
}

@keyframes healParticle {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) translateX(var(--tx, 0)) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) translateX(var(--tx, 0)) scale(0.5);
    }
}

/* Poison Particles (Purple) */
.particle.poison {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #a855f7, #7c3aed, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: poisonParticle 1.2s ease-out forwards;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

@keyframes poisonParticle {
    0% {
        opacity: 0.8;
        transform: translateY(0) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.4);
    }
}

/* Energy Particles (Blue Lightning) */
.particle.energy {
    position: absolute;
    width: 4px;
    height: 12px;
    background: linear-gradient(to bottom, #3b82f6, #60a5fa, transparent);
    opacity: 0;
    animation: energyParticle 0.6s ease-out forwards;
    box-shadow: 0 0 6px #3b82f6;
}

@keyframes energyParticle {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) rotate(var(--rot, 0deg)) scale(0.5);
    }
}

/* Experience Particles (Gold Stars) */
.particle.experience {
    position: absolute;
    font-size: 12px;
    opacity: 0;
    animation: expParticle 1s ease-out forwards;
    filter: drop-shadow(0 0 4px #fbbf24);
}

@keyframes expParticle {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-25px) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.5) rotate(360deg);
    }
}

/* Life Shortcuts Popup */
.life-shortcuts-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
}

.life-shortcuts-popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.life-shortcut-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
    -webkit-user-select: none;
}

.life-shortcut-btn[data-amount^="-"] {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.life-shortcut-btn[data-amount^="-"]:hover,
.life-shortcut-btn[data-amount^="-"]:active {
    background: rgba(239, 68, 68, 0.4);
    transform: scale(1.05);
}

.life-shortcut-btn[data-amount^="+"] {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.life-shortcut-btn[data-amount^="+"]:hover,
.life-shortcut-btn[data-amount^="+"]:active {
    background: rgba(34, 197, 94, 0.4);
    transform: scale(1.05);
}

/* Player Footer - Counters Preview */
.player-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.375rem;
    border-top: 1px solid var(--border-color);
    min-height: 2rem;
}

.counter-badge {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
}

.counter-badge.poison {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.counter-badge.poison.lethal {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.counter-badge.experience {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.counter-badge.energy {
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-primary);
}

.counter-badge.storm {
    background: rgba(147, 197, 253, 0.2);
    color: #93c5fd;
}

/* Clickable counter badges */
.counter-badge.clickable {
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.counter-badge.clickable:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.counter-badge.clickable:active {
    transform: scale(0.95);
}

.counter-badge.monarch {
    background: rgba(245, 158, 11, 0.3);
    color: var(--warning);
}

.counter-badge.commander-damage {
    background: rgba(239, 68, 68, 0.15);
    color: var(--text-secondary);
}

.counter-badge.commander-damage.lethal {
    background: rgba(239, 68, 68, 0.3);
    color: var(--danger);
}

/* Commander Deaths Badge */
.counter-badge.commander-deaths {
    background: rgba(139, 92, 246, 0.2);
    color: var(--accent-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.counter-badge.commander-deaths:hover {
    background: rgba(139, 92, 246, 0.4);
    transform: scale(1.05);
}

.counter-badge.commander-deaths .tax-value {
    font-weight: 700;
    margin-left: 0.25rem;
    color: var(--warning);
}

.counter-badge.commander-deaths.pulse {
    animation: commanderDeathPulse calc(500ms * var(--anim-duration)) ease;
}

@keyframes commanderDeathPulse {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); background: rgba(139, 92, 246, 0.5); }
    50% { transform: scale(1.15); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ===== Random Starter Overlay ===== */
.random-starter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.random-starter-overlay.active {
    display: flex;
}

.random-starter-content {
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.random-starter-content h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text-secondary);
}

.random-starter-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    min-height: 100px;
}

.random-starter-player {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 3px solid var(--border-color);
    transition: all 100ms ease;
}

.random-starter-player.highlight {
    border-color: var(--warning);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
    transform: scale(1.1);
}

.random-starter-player.winner {
    border-color: var(--success);
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.8);
    transform: scale(1.2);
    animation: winnerPulse 500ms ease infinite;
}

@keyframes winnerPulse {
    0%, 100% { transform: scale(1.2); }
    50% { transform: scale(1.25); }
}

.random-starter-player .player-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 0.25rem;
}

.random-starter-player .player-name {
    font-size: 0.625rem;
    color: var(--text-secondary);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.random-starter-result {
    margin-bottom: 2rem;
}

.random-starter-result .result-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

.random-starter-result .result-name {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--success);
    margin-top: 0.5rem;
}

.random-starter-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ===== Viado Overlay ===== */
.viado-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.viado-overlay.active {
    display: flex;
}

.viado-overlay-content {
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.viado-overlay-title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
    background-size: 300% 300%;
    animation: rainbow-shift 2s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.viado-animation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    min-height: 100px;
}

.viado-animation .player-option {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    transform: scale(0.9);
    transition: all 0.15s ease;
}

.viado-animation .player-option.highlight {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.viado-animation .player-option.selected {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.8),
                0 0 60px rgba(254, 202, 87, 0.6),
                0 0 90px rgba(72, 219, 251, 0.4);
    animation: viado-winner-pulse 0.5s ease infinite alternate;
}

@keyframes viado-winner-pulse {
    from { transform: scale(1.2); }
    to { transform: scale(1.25); }
}

.viado-animation .player-option .name {
    font-size: 0.7rem;
    color: white;
    margin-top: 0.25rem;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viado-overlay-result {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.viado-result-emoji {
    font-size: 3rem;
    animation: bounce 0.6s ease infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

.viado-result-label {
    font-size: 1rem;
    color: var(--text-secondary);
}

.viado-winner-name {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
    background-size: 300% 300%;
    animation: rainbow-shift 2s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.viado-overlay-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ===== Modals ===== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    padding-top: max(0.6rem, env(safe-area-inset-top, 0));
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom, 0));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 500px;
    /* dvh evita o "salto" da barra do navegador no iOS; vh é o fallback. */
    max-height: 92dvh;
    max-height: min(92dvh, 92vh);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    animation: modalSlideIn 200ms ease;
}

/* Celular deitado (altura pequena): aproveita o espaço todo, encosta no topo. */
@media (max-height: 520px) {
    .modal {
        padding: 0.35rem;
        align-items: flex-start;
    }
    .modal-content {
        max-height: calc(100dvh - 0.7rem);
    }
    .modal-header {
        padding: 0.45rem 0.85rem;
    }
    .modal-header h2 {
        font-size: 0.9rem;
    }
}

.settings-modal-content,
.player-settings-modal-content {
    max-width: 450px;
}

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

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 100;
}

.modal-header h2 {
    font-size: 1rem;
    font-weight: 700;
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Commander Damage Modal */
.commander-modal-content {
    max-width: 600px;
}

.commander-damage-grid {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
}

.commander-damage-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

.commander-damage-item.lethal {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.commander-damage-item.danger {
    border-color: var(--warning);
}

.commander-color-indicator {
    width: 12px;
    height: 40px;
    border-radius: 4px;
    flex-shrink: 0;
}

.commander-damage-info {
    flex: 1;
}

.commander-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.commander-damage-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.commander-damage-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.commander-damage-value {
    font-size: 1.5rem;
    font-weight: 700;
    min-width: 3rem;
    text-align: center;
}

.commander-damage-value.lethal {
    color: var(--danger);
}

.commander-damage-value.danger {
    color: var(--warning);
}

.damage-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
    font-size: 1.25rem;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.damage-btn:hover {
    background: var(--accent-primary);
}

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

/* Counters Modal */
.counters-list {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.counter-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
}

.counter-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
}

.counter-info {
    flex: 1;
}

.counter-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.counter-lethal-info {
    font-size: 0.625rem;
    color: var(--danger);
}

.counter-tax-info {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.counter-tax-info strong {
    color: var(--warning);
    font-weight: 700;
}

.commander-deaths-item {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.commander-deaths-item .counter-icon {
    background: rgba(139, 92, 246, 0.2);
}

.counter-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.counter-value {
    font-size: 1.25rem;
    font-weight: 700;
    min-width: 2.5rem;
    text-align: center;
}

.counter-value.lethal {
    color: var(--danger);
}

.counter-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.counter-btn:hover {
    background: var(--accent-primary);
}

.counter-btn.remove {
    background: var(--danger);
    font-size: 0.875rem;
}

.counter-toggle {
    width: 48px;
    height: 28px;
    background: var(--bg-card);
    border-radius: 14px;
    position: relative;
    transition: background var(--transition-fast);
}

.counter-toggle.active {
    background: var(--accent-primary);
}

.counter-toggle::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.counter-toggle.active::after {
    transform: translateX(20px);
}

.add-counter-section {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.25rem 1.25rem;
}

#custom-counter-name {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}

#custom-counter-name:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.add-counter-btn {
    padding: 0.75rem 1rem;
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.add-counter-btn:hover {
    background: var(--accent-secondary);
}

/* Settings Modal */
.settings-list {
    padding: 1rem;
}

/* Game Timer Display */
.game-timer-display {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.game-timer-icon {
    font-size: 2rem;
}

.game-timer-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.game-timer-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.game-timer-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--accent-primary);
}

/* Quick Actions Section */
.settings-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.settings-quick-actions .tool-btn {
    width: 100%;
}

.settings-action-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.settings-action-row button {
    flex: 1;
}

.settings-group {
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.settings-group h3 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.setting-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.setting-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
}

.setting-item input[type="range"] {
    width: 120px;
    accent-color: var(--accent-primary);
}

.setting-item input[type="number"] {
    width: 70px;
    padding: 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    text-align: center;
    font-size: 0.875rem;
}

.setting-item select {
    font-size: 0.875rem;
}

.setting-item-info {
    padding: 0.25rem 0 0.5rem;
}

.setting-item-info small {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

.setting-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.75rem 0;
}

.small-btn {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.small-btn:hover {
    background: var(--accent-primary);
}

.game-mode-selector {
    display: flex;
    gap: 0.375rem;
}

.mode-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.mode-btn:hover {
    background: var(--bg-card);
}

.mode-btn.active {
    background: var(--accent-primary);
    color: white;
}

.settings-list hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

/* Player Settings Modal */
.player-settings-form {
    padding: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.form-group input[type="text"] {
    width: 100%;
    padding: 0.625rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
}

.form-group input[type="text"]:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.emoji-picker,
.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.emoji-option,
.tag-option {
    padding: 0.375rem 0.625rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.emoji-option:hover,
.tag-option:hover {
    background: var(--bg-card);
}

.emoji-option.selected,
.tag-option.selected {
    background: var(--accent-primary);
    color: white;
}

.color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.color-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all var(--transition-fast);
    border: 3px solid transparent;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: white;
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.avatar-upload,
.background-upload {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.upload-btn,
.clear-btn {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
    transition: all var(--transition-fast);
}

.upload-btn:hover,
.clear-btn:hover {
    background: var(--accent-primary);
}

/* ===== Media Preview System ===== */
.media-group {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
}

.media-group > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.media-type-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    background: var(--accent-primary);
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.media-type-badge.gif {
    background: var(--success);
}

.media-type-badge.image {
    background: var(--accent-secondary);
}

.media-preview-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.media-preview {
    width: 100px;
    height: 100px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.media-preview.has-media {
    border-style: solid;
    border-color: var(--accent-primary);
}

.media-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-preview-img.paused {
    filter: grayscale(0.5);
}

.media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
}

.media-placeholder span {
    font-size: 1.5rem;
    opacity: 0.5;
}

.media-placeholder small {
    font-size: 0.625rem;
}

.media-controls {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    display: flex;
    gap: 0.25rem;
}

.media-control-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 0.75rem;
    transition: all var(--transition-fast);
}

.media-control-btn:hover {
    background: var(--accent-primary);
}

.media-control-btn.active {
    background: var(--warning);
}

.media-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.media-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.media-btn:hover {
    background: var(--accent-primary);
}

.media-btn.search {
    background: var(--accent-secondary);
}

.media-btn.search:hover {
    background: var(--accent-primary);
}

.media-btn.danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.media-btn.danger:hover {
    background: var(--danger);
    color: white;
}

.media-btn-icon {
    font-size: 1rem;
}

.background-preview-container {
    width: 140px;
    height: 80px;
}

/* Legacy support */
.avatar-preview,
.background-preview {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    object-fit: cover;
    margin-top: 0.5rem;
}

.background-preview {
    width: 100px;
    height: 60px;
}

.sound-uploads {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sound-upload-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.sound-upload-item span {
    min-width: 50px;
    color: var(--text-secondary);
}

.upload-btn-sm,
.clear-btn-sm {
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.upload-btn-sm:hover {
    background: var(--accent-primary);
}

.clear-btn-sm {
    background: var(--danger);
}

/* Buttons */
.primary-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.primary-btn:hover {
    background: var(--accent-secondary);
}

.secondary-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    border-radius: var(--border-radius);
    margin-top: 0.5rem;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.secondary-btn:hover {
    background: var(--bg-card);
}

.danger-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--danger);
    color: white;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.danger-btn:hover {
    background: #dc2626;
}

/* Winner Overlay */
.winner-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.winner-overlay.active {
    display: flex;
}

.winner-content {
    text-align: center;
    animation: winnerBounce 500ms ease;
}

@keyframes winnerBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.winner-trophy {
    font-size: 5rem;
    animation: trophyFloat 2s ease-in-out infinite;
}

@keyframes trophyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.winner-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.winner-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--success);
    margin-bottom: 2rem;
}

/* Epic Victory Confetti */
.winner-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 201;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confettiFall var(--fall-duration, 3s) linear forwards;
    animation-delay: var(--delay, 0s);
}

.confetti-piece.square {
    border-radius: 2px;
}

.confetti-piece.circle {
    border-radius: 50%;
}

.confetti-piece.ribbon {
    width: 8px;
    height: 20px;
    border-radius: 3px;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-100px) rotate(0deg) scale(1);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

/* Firework Burst */
.firework-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 200;
}

.firework {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: fireworkBurst 1.5s ease-out forwards;
}

@keyframes fireworkBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(0);
        opacity: 0;
    }
}

/* Sparkle effect on trophy */
.winner-trophy {
    position: relative;
}

.winner-overlay.active .winner-trophy::before,
.winner-overlay.active .winner-trophy::after {
    content: '✨';
    position: absolute;
    font-size: 1.5rem;
    animation: sparkle 0.8s ease-in-out infinite;
}

.winner-overlay.active .winner-trophy::before {
    top: 0;
    left: -20px;
    animation-delay: 0s;
}

.winner-overlay.active .winner-trophy::after {
    top: 0;
    right: -20px;
    animation-delay: 0.4s;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Victory glow effect */
.winner-overlay.active {
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.3), rgba(0, 0, 0, 0.95));
}

.winner-overlay.active .winner-content {
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

/* ===== Vitória Escandalosa ===== */
/* Oito segundos de constrangimento público. Ver src/ts/victory.ts. */

/* Flash de tela. O JS pisca a ~2,4 Hz (abaixo do limite de 3 Hz de
   fotossensibilidade) e não pisca nada em prefers-reduced-motion. */
.escandalo-flash {
    position: fixed;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 60ms linear;
}

.escandalo-flash.on {
    opacity: 0.92;
}

/* Confete em tamanho vergonhoso */
.confetti-piece.escandalo-mega {
    width: 16px;
    height: 16px;
}

.confetti-piece.escandalo-mega.ribbon {
    width: 12px;
    height: 32px;
}

/* O overlay inteiro entra em modo escândalo */
.winner-overlay.escandaloso {
    animation: escandaloBg 700ms steps(1) infinite;
}

@keyframes escandaloBg {
    0% { background: radial-gradient(circle at center, rgba(234, 179, 8, 0.55), rgba(0, 0, 0, 0.9)); }
    25% { background: radial-gradient(circle at center, rgba(244, 63, 94, 0.55), rgba(0, 0, 0, 0.9)); }
    50% { background: radial-gradient(circle at center, rgba(139, 92, 246, 0.55), rgba(0, 0, 0, 0.9)); }
    75% { background: radial-gradient(circle at center, rgba(34, 197, 94, 0.55), rgba(0, 0, 0, 0.9)); }
}

.winner-overlay.escandaloso .winner-content {
    animation: escandaloShake 220ms ease-in-out infinite;
}

@keyframes escandaloShake {
    0%, 100% { transform: translate(0, 0) rotate(-1.5deg) scale(1.04); }
    25% { transform: translate(-8px, 5px) rotate(1.5deg) scale(1.08); }
    50% { transform: translate(7px, -6px) rotate(-2deg) scale(1.05); }
    75% { transform: translate(-5px, -4px) rotate(2deg) scale(1.09); }
}

.winner-overlay.escandaloso .winner-trophy {
    font-size: 7rem;
    animation: escandaloTrofeu 500ms linear infinite;
}

@keyframes escandaloTrofeu {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.35); }
    100% { transform: rotate(360deg) scale(1); }
}

.winner-overlay.escandaloso .winner-title {
    font-size: 3.5rem;
    letter-spacing: 0.05em;
    animation: escandaloCor 300ms steps(1) infinite;
}

.winner-overlay.escandaloso .winner-name {
    font-size: 3rem;
    text-transform: uppercase;
    animation: escandaloCor 300ms steps(1) infinite reverse;
}

@keyframes escandaloCor {
    0% { color: #fde047; text-shadow: 0 0 30px #fde047; }
    33% { color: #f43f5e; text-shadow: 0 0 30px #f43f5e; }
    66% { color: #22d3ee; text-shadow: 0 0 30px #22d3ee; }
}

/* Faixa de estádio passando na tela */
.escandalo-banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 8%;
    overflow: hidden;
    pointer-events: none;
    z-index: 202;
    background: rgba(0, 0, 0, 0.55);
    border-top: 3px solid #fde047;
    border-bottom: 3px solid #fde047;
    padding: 0.35rem 0;
}

.escandalo-marquee {
    display: inline-block;
    white-space: nowrap;
    font-size: 2rem;
    font-weight: 800;
    color: #fde047;
    text-shadow: 0 0 12px rgba(253, 224, 71, 0.8);
    animation: escandaloMarquee 4s linear infinite;
}

@keyframes escandaloMarquee {
    0% { transform: translateX(10%); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 600px) {
    .winner-overlay.escandaloso .winner-title { font-size: 2.4rem; }
    .winner-overlay.escandaloso .winner-name { font-size: 2rem; }
    .escandalo-marquee { font-size: 1.4rem; }
}

/* Quem pediu menos movimento recebe menos movimento (o áudio continua) */
@media (prefers-reduced-motion: reduce) {
    .escandalo-flash.on { opacity: 0; }
    .winner-overlay.escandaloso,
    .winner-overlay.escandaloso .winner-content,
    .winner-overlay.escandaloso .winner-trophy,
    .winner-overlay.escandaloso .winner-title,
    .winner-overlay.escandaloso .winner-name,
    .escandalo-marquee {
        animation: none;
    }
}

/* Dice Roller Modal */
.dice-roller-modal .modal-content {
    max-width: 400px;
    width: 95%;
}

.dice-roller-content {
    text-align: center;
    padding: 0.5rem;
}

.dice-result-area {
    padding: 1rem;
    margin-bottom: 0.75rem;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
}

/* ===== Universal Dice Box System ===== */
.dice-box-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.dice-box {
    width: 140px;
    height: 100px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #0f3460;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.5),
        0 4px 15px rgba(0,0,0,0.3);
    perspective: 500px;
}

.dice-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
    border-radius: 9px 9px 0 0;
    pointer-events: none;
    z-index: 5;
}

.dice-box-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

/* Individual dice in the box */
.box-die {
    position: absolute;
    width: 36px;
    height: 36px;
    transform-style: preserve-3d;
}

.box-die-face {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    backface-visibility: hidden;
}

.box-die-front { transform: rotateY(0deg) translateZ(18px); }
.box-die-back { transform: rotateY(180deg) translateZ(18px); }
.box-die-left { transform: rotateY(-90deg) translateZ(18px); }
.box-die-right { transform: rotateY(90deg) translateZ(18px); }
.box-die-top { transform: rotateX(90deg) translateZ(18px); }
.box-die-bottom { transform: rotateX(-90deg) translateZ(18px); }

/* Single die position (D4-D20) */
.box-die-single {
    left: 50%;
    top: 50%;
    margin-left: -18px;
    margin-top: -18px;
}

/* Second die for D100 */
.box-die-second {
    left: 50%;
    top: 50%;
    margin-left: -18px;
    margin-top: -18px;
}

/* Color per die type */
.box-die.d4 .box-die-face { background: linear-gradient(145deg, #ef4444, #dc2626); border: 2px solid #b91c1c; }
.box-die.d6 .box-die-face { background: linear-gradient(145deg, #ffffff, #e5e7eb); border: 2px solid #9ca3af; color: #1f2937; }
.box-die.d8 .box-die-face { background: linear-gradient(145deg, #3b82f6, #2563eb); border: 2px solid #1d4ed8; }
.box-die.d10 .box-die-face { background: linear-gradient(145deg, #10b981, #059669); border: 2px solid #047857; }
.box-die.d12 .box-die-face { background: linear-gradient(145deg, #8b5cf6, #7c3aed); border: 2px solid #6d28d9; }
.box-die.d20 .box-die-face { background: linear-gradient(145deg, #f59e0b, #d97706); border: 2px solid #b45309; }
.box-die.d100-tens .box-die-face { background: linear-gradient(145deg, #10b981, #059669); border: 2px solid #047857; }
.box-die.d100-ones .box-die-face { background: linear-gradient(145deg, #3b82f6, #2563eb); border: 2px solid #1d4ed8; }

/* Bouncing animation for single die */
.box-die-single.rolling {
    animation: bounceSingle 0.7s ease-in-out infinite;
}

@keyframes bounceSingle {
    0% {
        left: 50%; top: 50%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    12% {
        left: 20%; top: 25%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(120deg) rotateY(90deg) rotateZ(30deg);
    }
    25% {
        left: 75%; top: 20%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(240deg) rotateY(180deg) rotateZ(60deg);
    }
    37% {
        left: 80%; top: 70%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(360deg) rotateY(270deg) rotateZ(90deg);
    }
    50% {
        left: 30%; top: 75%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(480deg) rotateY(360deg) rotateZ(120deg);
    }
    62% {
        left: 15%; top: 40%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(600deg) rotateY(450deg) rotateZ(150deg);
    }
    75% {
        left: 70%; top: 35%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(720deg) rotateY(540deg) rotateZ(180deg);
    }
    87% {
        left: 55%; top: 65%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(840deg) rotateY(630deg) rotateZ(210deg);
    }
    100% {
        left: 50%; top: 50%;
        margin-left: -18px; margin-top: -18px;
        transform: rotateX(960deg) rotateY(720deg) rotateZ(240deg);
    }
}

/* D100 two-die animations */
.box-die-single.d100-tens.rolling {
    animation: bounceD100Tens 0.8s ease-in-out infinite;
}

.box-die-second.d100-ones.rolling {
    animation: bounceD100Ones 0.75s ease-in-out infinite;
}

@keyframes bounceD100Tens {
    0% { left: 25%; top: 50%; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    15% { left: 65%; top: 20%; transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg); }
    30% { left: 75%; top: 65%; transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
    45% { left: 35%; top: 75%; transform: rotateX(540deg) rotateY(270deg) rotateZ(135deg); }
    60% { left: 15%; top: 35%; transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
    75% { left: 55%; top: 25%; transform: rotateX(900deg) rotateY(450deg) rotateZ(225deg); }
    90% { left: 40%; top: 60%; transform: rotateX(1080deg) rotateY(540deg) rotateZ(270deg); }
    100% { left: 25%; top: 50%; transform: rotateX(1260deg) rotateY(630deg) rotateZ(315deg); }
}

@keyframes bounceD100Ones {
    0% { left: 65%; top: 50%; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    12% { left: 25%; top: 65%; transform: rotateX(120deg) rotateY(60deg) rotateZ(30deg); }
    25% { left: 20%; top: 25%; transform: rotateX(240deg) rotateY(120deg) rotateZ(60deg); }
    37% { left: 70%; top: 20%; transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
    50% { left: 80%; top: 55%; transform: rotateX(480deg) rotateY(240deg) rotateZ(120deg); }
    62% { left: 45%; top: 70%; transform: rotateX(600deg) rotateY(300deg) rotateZ(150deg); }
    75% { left: 30%; top: 35%; transform: rotateX(720deg) rotateY(360deg) rotateZ(180deg); }
    87% { left: 60%; top: 30%; transform: rotateX(840deg) rotateY(420deg) rotateZ(210deg); }
    100% { left: 65%; top: 50%; transform: rotateX(960deg) rotateY(480deg) rotateZ(240deg); }
}

/* Settled positions */
.box-die-single.settled {
    left: 50% !important;
    top: 50% !important;
    margin-left: -18px !important;
    margin-top: -18px !important;
    animation: none;
    transition: all 0.3s ease-out;
    transform: rotateX(-15deg) rotateY(15deg);
}

.box-die-single.d100-tens.settled {
    left: 30% !important;
    top: 50% !important;
}

.box-die-second.d100-ones.settled {
    left: 70% !important;
    top: 50% !important;
    margin-left: -18px !important;
    margin-top: -18px !important;
    animation: none;
    transition: all 0.3s ease-out;
    transform: rotateX(-10deg) rotateY(-15deg);
}

/* ===== Coin Box ===== */
.coin-box {
    width: 120px;
    height: 100px;
}

.box-coin {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    transform-style: preserve-3d;
}

.box-coin-face {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    backface-visibility: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.box-coin-heads {
    background: linear-gradient(145deg, #fcd34d, #f59e0b);
    border: 3px solid #d97706;
    transform: rotateY(0deg);
}

.box-coin-tails {
    background: linear-gradient(145deg, #c0c0c0, #a0a0a0);
    border: 3px solid #808080;
    transform: rotateY(180deg);
}

.box-coin.rolling {
    animation: coinBounce 0.8s ease-in-out infinite;
}

@keyframes coinBounce {
    0% { left: 50%; top: 50%; transform: rotateX(0deg) rotateY(0deg); }
    15% { left: 25%; top: 30%; transform: rotateX(180deg) rotateY(360deg); }
    30% { left: 70%; top: 25%; transform: rotateX(360deg) rotateY(720deg); }
    45% { left: 75%; top: 65%; transform: rotateX(540deg) rotateY(1080deg); }
    60% { left: 35%; top: 70%; transform: rotateX(720deg) rotateY(1440deg); }
    75% { left: 20%; top: 45%; transform: rotateX(900deg) rotateY(1800deg); }
    90% { left: 60%; top: 40%; transform: rotateX(1080deg) rotateY(2160deg); }
    100% { left: 50%; top: 50%; transform: rotateX(1260deg) rotateY(2520deg); }
}

.box-coin.settled {
    left: 50% !important;
    top: 50% !important;
    animation: none;
    transition: all 0.3s ease-out;
}

.box-coin.show-heads { transform: rotateX(0deg) rotateY(0deg); }
.box-coin.show-tails { transform: rotateX(0deg) rotateY(180deg); }

/* ===== Planar Die Box ===== */
.planar-box {
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
    border-color: #4338ca;
}

.box-die-planar {
    left: 50%;
    top: 50%;
    margin-left: -18px;
    margin-top: -18px;
    width: 40px;
    height: 40px;
}

.box-die-planar .box-die-face {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #6366f1, #4f46e5);
    border: 2px solid #4338ca;
    font-size: 1.5rem;
}

.box-die-planar .box-die-front { transform: rotateY(0deg) translateZ(20px); }
.box-die-planar .box-die-back { transform: rotateY(180deg) translateZ(20px); }
.box-die-planar .box-die-left { transform: rotateY(-90deg) translateZ(20px); }
.box-die-planar .box-die-right { transform: rotateY(90deg) translateZ(20px); }
.box-die-planar .box-die-top { transform: rotateX(90deg) translateZ(20px); }
.box-die-planar .box-die-bottom { transform: rotateX(-90deg) translateZ(20px); }

.box-die-planar.rolling {
    animation: bouncePlanar 0.6s ease-in-out infinite;
}

@keyframes bouncePlanar {
    0% { left: 50%; top: 50%; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16% { left: 25%; top: 30%; transform: rotateX(120deg) rotateY(90deg) rotateZ(30deg); }
    33% { left: 70%; top: 25%; transform: rotateX(240deg) rotateY(180deg) rotateZ(60deg); }
    50% { left: 75%; top: 65%; transform: rotateX(360deg) rotateY(270deg) rotateZ(90deg); }
    66% { left: 30%; top: 70%; transform: rotateX(480deg) rotateY(360deg) rotateZ(120deg); }
    83% { left: 20%; top: 40%; transform: rotateX(600deg) rotateY(450deg) rotateZ(150deg); }
    100% { left: 50%; top: 50%; transform: rotateX(720deg) rotateY(540deg) rotateZ(180deg); }
}

.box-die-planar.settled {
    left: 50% !important;
    top: 50% !important;
    animation: none;
    transition: all 0.3s ease-out;
    transform: rotateX(-15deg) rotateY(15deg);
}

/* Fallback dice result (for special dice) */
.dice-result {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.dice-result.rolling {
    animation: diceShake 0.5s ease-in-out infinite;
}

@keyframes diceShake {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.1); }
    50% { transform: rotate(15deg) scale(1.15); }
    75% { transform: rotate(-10deg) scale(1.1); }
}

.dice-result-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-primary);
    min-height: 3.5rem;
}

.dice-result-value.crit {
    color: var(--success);
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.8);
    animation: critPulse 0.5s ease;
}

.dice-result-value.fail {
    color: var(--danger);
    animation: failShake 0.5s ease;
}

@keyframes critPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes failShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

.dice-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

.dice-btn {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dice-btn:hover,
.dice-btn:active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.05);
}

.dice-btn.coin-btn {
    grid-column: span 3;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #f59e0b;
    color: #000;
}

.dice-btn.coin-btn:hover {
    background: linear-gradient(135deg, #fcd34d, #fbbf24);
    border-color: #fbbf24;
}

.dice-history {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
}

.dice-history-label {
    color: var(--text-muted);
    white-space: nowrap;
}

.dice-history-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dice-history-item {
    padding: 0.25rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.dice-history-item.crit {
    background: rgba(34, 197, 94, 0.3);
    color: var(--success);
}

.dice-history-item.fail {
    background: rgba(239, 68, 68, 0.3);
    color: var(--danger);
}

/* Dice Result Details */
.dice-result-details {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    min-height: 1rem;
}

/* Compact Dice Grid */
.dice-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0 0.5rem;
    margin-bottom: 0.75rem;
}

.dice-grid-compact .dice-btn {
    padding: 0.75rem 0.5rem;
    font-size: 0.95rem;
}

.dice-btn.planar-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: #8b5cf6;
}

.dice-btn.planar-btn:hover {
    background: linear-gradient(135deg, #a78bfa, #818cf8);
}

/* Compact Modifiers Row */
.dice-mods-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin: 0 0.5rem 0.75rem;
    flex-wrap: wrap;
}

.dice-mods-row label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dice-mods-row input {
    width: 45px;
    padding: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: center;
}

.dice-mods-row input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.dice-btn-mini {
    padding: 0.35rem 0.5rem;
    background: var(--accent-primary);
    border: none;
    border-radius: var(--border-radius-sm);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
}

.dice-btn-mini:hover {
    opacity: 0.9;
}

/* Compact History Row */
.dice-history-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    margin: 0 0.5rem;
    font-size: 0.8rem;
}

.dice-history-row > span {
    color: var(--text-muted);
    white-space: nowrap;
}

/* 3D Dice Roll Animation */
@keyframes diceRoll3D {
    0% { transform: rotateX(0deg) rotateY(0deg) scale(1); }
    25% { transform: rotateX(90deg) rotateY(45deg) scale(1.15); }
    50% { transform: rotateX(180deg) rotateY(90deg) scale(1.2); }
    75% { transform: rotateX(270deg) rotateY(135deg) scale(1.15); }
    100% { transform: rotateX(360deg) rotateY(180deg) scale(1); }
}

.dice-result.rolling {
    animation: diceRoll3D 0.5s ease-in-out infinite;
    transform-style: preserve-3d;
}

/* Rules & Keywords Modal */
.rules-modal-content {
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.rules-search {
    padding: 0.5rem 0;
}

.rules-search input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.rules-search input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.rules-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.rules-cat-btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rules-cat-btn:hover {
    background: var(--bg-secondary);
}

.rules-cat-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.rules-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.rules-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--accent-primary);
}

.rules-item[data-category="combat"] {
    border-left-color: #ef4444;
}

.rules-item[data-category="mana"] {
    border-left-color: #3b82f6;
}

.rules-item[data-category="abilities"] {
    border-left-color: #8b5cf6;
}

.rules-item[data-category="counters"] {
    border-left-color: #22c55e;
}

.rules-item-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.rules-item-name {
    font-weight: 700;
    color: var(--text-primary);
}

.rules-item-reminder {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.rules-item-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.rules-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
}

/* Share Modal */
.share-modal-content {
    max-width: 650px;
}

.share-preview-container {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

#share-canvas {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.share-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.share-actions .action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.share-actions .action-btn:hover {
    background: var(--bg-secondary);
    transform: translateY(-2px);
}

.share-actions .action-btn.primary {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.share-actions .action-btn.primary:hover {
    filter: brightness(1.1);
}

.share-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* Tool Button */
.tool-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.tool-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

/* Special Moment Overlay */
.special-moment-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 150;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    pointer-events: none;
}

.special-moment-overlay.active {
    display: flex;
    animation: specialMomentFade 1.5s ease forwards;
}

@keyframes specialMomentFade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.special-moment-content {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

/* History Panel */
.history-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 150;
    transition: right var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.history-panel.active {
    right: 0;
}

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.history-header h3 {
    font-weight: 700;
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
}

.close-btn:hover {
    background: var(--bg-tertiary);
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

.history-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    font-style: italic;
}

.history-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    border-left: 3px solid var(--player-color, var(--accent-primary));
}

.history-icon {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.history-text {
    flex: 1;
    color: var(--text-primary);
    line-height: 1.3;
}

.history-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.history-event {
    color: var(--text-primary);
}

.history-event.damage {
    color: var(--danger);
}

.history-event.heal {
    color: var(--success);
}

/* Timer Display */
.timer-display {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    z-index: 50;
    display: none;
}

.timer-display.active {
    display: block;
}

.timer-display.warning {
    color: var(--warning);
    animation: timerPulse 1s ease infinite;
}

.timer-display.danger {
    color: var(--danger);
    animation: timerPulse 0.5s ease infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== Color Picker Modal ===== */
.color-picker-modal-content {
    max-width: 340px;
}

.color-picker-body {
    padding: 1rem;
}

.color-picker-main {
    position: relative;
    margin-bottom: 0.75rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

#color-picker-canvas {
    width: 100%;
    height: 200px;
    cursor: crosshair;
    display: block;
}

.color-picker-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.color-picker-hue {
    position: relative;
    margin-bottom: 1rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

#hue-picker-canvas {
    width: 100%;
    height: 20px;
    cursor: pointer;
    display: block;
}

.hue-picker-cursor {
    position: absolute;
    top: -2px;
    width: 6px;
    height: 24px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    pointer-events: none;
    transform: translateX(-50%);
}

.color-picker-preview-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.color-picker-result {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.color-picker-inputs {
    display: flex;
    gap: 0.5rem;
    flex: 1;
}

.color-input-group {
    flex: 1;
}

.color-input-group label {
    display: block;
    font-size: 0.625rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-align: center;
}

.color-input-group input {
    width: 100%;
    padding: 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    text-align: center;
    font-size: 0.75rem;
}

.color-input-group input:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* Custom color picker button */
.color-picker-custom {
    background: linear-gradient(135deg, #ff0000, #00ff00, #0000ff, #ff0000) !important;
    font-size: 1.25rem !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.custom-color-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}

.color-preview-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.2);
}

#color-preview-hex {
    font-size: 0.875rem;
    font-family: monospace;
}

/* ===== Image Search Modal ===== */
.image-search-modal-content {
    max-width: 500px;
    max-height: 80vh;
}

.image-search-body {
    padding: 1rem;
}

.image-search-input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

#image-search-input {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
}

#image-search-input:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

.search-action-btn {
    padding: 0.75rem 1.25rem;
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.search-action-btn:hover {
    background: var(--accent-secondary);
}

.image-search-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.image-tab {
    flex: 1;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.image-tab:hover {
    background: var(--bg-card);
}

.image-tab.active {
    background: var(--accent-primary);
    color: white;
}

.image-search-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.image-search-results::-webkit-scrollbar {
    width: 4px;
}

.image-search-results::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.image-search-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.image-search-placeholder .placeholder-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.image-search-placeholder p {
    font-size: 0.875rem;
}

/* Image Search Suggestions */
.image-search-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

.suggestion-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.suggestion-chip {
    padding: 0.25rem 0.625rem;
    background: var(--bg-card);
    border-radius: 12px;
    font-size: 0.75rem;
    transition: all var(--transition-fast);
}

.suggestion-chip:hover {
    background: var(--accent-primary);
    color: white;
}

/* Image Preview Section */
.image-preview-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.preview-divider {
    text-align: center;
    margin-bottom: 0.75rem;
}

.preview-divider span {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.image-preview-card {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid var(--accent-primary);
    background: var(--bg-card);
}

.selected-image-preview {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    display: block;
}

.preview-info {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.preview-type-badge {
    padding: 0.125rem 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.preview-type-badge.gif {
    background: var(--success);
}

.preview-type-badge.image {
    background: var(--accent-secondary);
}

.preview-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.primary-btn-sm,
.secondary-btn-sm {
    padding: 0.5rem 1.25rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.primary-btn-sm {
    background: var(--accent-primary);
    color: white;
}

.primary-btn-sm:hover {
    background: var(--accent-secondary);
}

.secondary-btn-sm {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.secondary-btn-sm:hover {
    background: var(--bg-card);
}

.image-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary);
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.image-result-item {
    aspect-ratio: 1;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.image-result-item:hover {
    transform: scale(1.05);
    border-color: var(--accent-primary);
}

.image-result-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-btn {
    background: var(--accent-secondary) !important;
}

/* ===== Revive Player Button ===== */
.player-card.eliminated .revive-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.revive-btn {
    padding: 0.75rem 1.5rem;
    background: var(--success);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.revive-btn:hover {
    background: #16a34a;
    transform: scale(1.05);
}

.revive-btn:active {
    transform: scale(0.98);
}

/* ===== Collapsible Counters ===== */
.player-footer {
    position: relative;
}

.player-footer.collapsed .counter-badge:not(.counter-badge-main) {
    display: none;
}

.counters-expand-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 50%;
    font-size: 0.625rem;
    transition: all var(--transition-fast);
}

.counters-expand-btn:hover {
    background: var(--accent-primary);
}

.counters-expand-btn.expanded {
    transform: rotate(180deg);
}

.counter-badge-main {
    font-weight: 700;
}

/* ===== Mobile-First Improvements ===== */

/* Larger touch targets for mobile */
@media (pointer: coarse) {
    .life-control {
        min-height: 60px;
        font-size: 2.5rem;
    }

    .player-action-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .header-btn {
        width: 48px;
        height: 48px;
    }

    .header-btn svg {
        width: 24px;
        height: 24px;
    }

    .damage-btn,
    .counter-btn {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .count-btn,
    .life-btn {
        min-height: 48px;
        font-size: 1.125rem;
    }

    .emoji-option,
    .tag-option {
        padding: 0.625rem 0.875rem;
        font-size: 1rem;
    }

    .color-option {
        width: 44px;
        height: 44px;
    }

    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 2rem;
    }

    .floating-undo-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        bottom: 1.5rem;
    }

    .revive-btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}

/* Improved spacing for small screens */
@media (max-width: 400px) {
    .setup-container {
        padding: 1rem;
    }

    .setup-title {
        font-size: 2rem;
    }

    .player-card .life-value {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .modal-content {
        max-height: 95vh;
        margin: 0.5rem;
    }

    .game-header {
        padding: 0.375rem;
    }

    .players-grid {
        gap: 0.25rem;
        padding: 0.25rem;
    }

    .player-header {
        padding: 0.25rem 0.375rem;
    }

    .player-name {
        font-size: 0.7rem;
        max-width: 60px;
    }

    .player-footer {
        padding: 0.25rem;
    }

    .counter-badge {
        font-size: 0.5rem;
        padding: 0.125rem 0.25rem;
    }

    /* Hide floating undo on small mobile - header button is sufficient */
    .floating-undo-btn {
        display: none !important;
    }

    /* Random Starter Overlay - Mobile */
    .random-starter-overlay {
        padding: 1rem;
        overflow-y: auto;
    }

    .random-starter-content {
        max-width: 100%;
    }

    .random-starter-content h2 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .random-starter-display {
        gap: 0.5rem;
        margin-bottom: 1rem;
        min-height: 60px;
    }

    .random-starter-player {
        width: 55px;
        height: 55px;
    }

    .random-starter-player .player-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .random-starter-player .player-name {
        font-size: 0.5rem;
        max-width: 50px;
    }

    .random-starter-result .result-name {
        font-size: 1.5rem;
    }

    .random-starter-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .random-starter-actions button {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    /* Viado Overlay - Mobile */
    .viado-overlay {
        padding: 1rem;
        overflow-y: auto;
    }

    .viado-overlay-content {
        max-width: 100%;
    }

    .viado-overlay-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }

    .viado-animation {
        gap: 0.5rem;
        margin-bottom: 1rem;
        min-height: 60px;
    }

    .viado-animation .player-option {
        width: 55px;
        height: 55px;
    }

    .viado-animation .player-option .name {
        font-size: 0.5rem;
        max-width: 50px;
    }

    .viado-result-emoji {
        font-size: 2rem;
    }

    .viado-winner-name {
        font-size: 1.5rem;
    }

    .viado-overlay-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .viado-overlay-actions button {
        width: 100%;
        padding: 0.75rem 1rem;
    }
}

/* Medium screens - tablets */
@media (min-width: 600px) and (max-width: 1024px) {
    .players-grid {
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .player-card .life-value {
        font-size: clamp(3rem, 8vw, 5rem);
    }

    .player-name {
        font-size: 0.875rem;
    }

    .player-avatar {
        width: 32px;
        height: 32px;
    }
}

/* Landscape mode adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    /* Game screen layout in landscape */
    #game-screen.active {
        position: relative;
    }

    /* Hide main header in landscape - use sidebars instead */
    #game-screen.active .game-header {
        display: none !important;
    }

    /* Hide sidebars when game screen is not active (setup screen visible) */
    #game-screen:not(.active) .sidebar-left,
    #game-screen:not(.active) .sidebar-right {
        display: none !important;
        visibility: hidden !important;
    }

    /* Left Sidebar */
    #game-screen.active .sidebar-left {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 48px;
        height: 100%;
        padding: 0.5rem 0.25rem;
        border-right: 1px solid var(--border-color);
        z-index: 50;
        background: var(--bg-primary);
        gap: 0.375rem;
        align-items: center;
    }

    /* Right Sidebar */
    #game-screen.active .sidebar-right {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 48px;
        height: 100%;
        padding: 0.5rem 0.25rem;
        border-left: 1px solid var(--border-color);
        z-index: 50;
        background: var(--bg-primary);
        gap: 0.375rem;
        align-items: center;
    }

    .sidebar-left .header-btn,
    .sidebar-right .header-btn {
        width: 36px;
        height: 36px;
    }

    .sidebar-left .header-btn svg,
    .sidebar-right .header-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Adjust players grid to account for both sidebars */
    .players-grid {
        width: calc(100% - 96px) !important;
        margin-left: 48px !important;
        margin-right: 48px !important;
    }

    .player-header {
        padding: 0.25rem 0.5rem;
    }

    /* Better player name visibility in landscape */
    .player-name {
        font-size: 0.7rem;
        max-width: 80px;
    }

    .player-info {
        gap: 0.25rem;
    }

    .player-avatar,
    .player-emoji {
        width: 18px;
        height: 18px;
        font-size: 0.75rem;
    }

    .player-tag {
        display: none;
    }

    .player-footer {
        padding: 0.25rem;
        min-height: 1.5rem;
    }

    /* Larger life value with more vertical space in landscape */
    .life-value {
        font-size: clamp(2.5rem, 12vw, 5rem);
    }

    /* Even larger for fewer players in landscape */
    .players-grid[data-players="2"] .life-value {
        font-size: clamp(3.5rem, 16vw, 7rem);
    }

    .players-grid[data-players="3"] .life-value,
    .players-grid[data-players="4"] .life-value {
        font-size: clamp(3rem, 14vw, 6rem);
    }

    .life-control {
        font-size: 1.75rem;
    }

    /* Hide floating undo button on mobile landscape - sidebar button is enough */
    .floating-undo-btn {
        display: none !important;
    }

    /* Better modal layout for landscape */
    .modal {
        padding: 0.5rem;
    }

    .modal-content {
        max-width: 95vw;
        max-height: 90vh;
        margin: 0;
        padding: 0;
        overflow-y: auto;
    }

    .modal-header {
        padding: 0.75rem 1rem;
        margin-bottom: 0;
    }

    /* Content padding for modals in landscape */
    .settings-list,
    .dice-roller-content,
    .commander-damage-grid,
    .counters-list,
    .player-settings-form {
        padding: 0.5rem 0.75rem;
    }

    .modal-header h2 {
        font-size: 1rem;
    }

    /* Settings modal - horizontal layout */
    .settings-modal-content {
        display: flex;
        flex-direction: column;
        max-height: 85vh;
    }

    .settings-modal-content .settings-group {
        padding: 0.5rem;
    }

    .settings-modal-content .settings-group h3 {
        font-size: 0.8rem;
        margin-bottom: 0.375rem;
    }

    .settings-modal-content label {
        font-size: 0.75rem;
    }

    /* Dice roller modal - compact for landscape */
    .dice-roller-content {
        padding: 0.5rem;
    }

    .dice-result-area {
        padding: 0.75rem 0.5rem;
        margin-bottom: 0.5rem;
    }

    .dice-result {
        font-size: 3rem;
    }

    .dice-result-value {
        font-size: 2rem;
        min-height: 2.5rem;
    }

    .dice-options {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
        padding: 0;
        margin-bottom: 0.5rem;
    }

    .dice-btn {
        padding: 0.5rem 0.25rem;
        font-size: 0.85rem;
        min-width: auto;
    }

    .dice-btn.coin-btn {
        grid-column: span 4;
        padding: 0.5rem;
    }

    .dice-history {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    /* Commander damage - horizontal scroll */
    .commander-damage-grid {
        padding: 0.5rem;
        gap: 0.375rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .commander-damage-item {
        padding: 0.375rem;
        min-width: 80px;
        flex: 0 0 auto;
    }

    .commander-damage-item .player-info-mini {
        gap: 0.25rem;
    }

    .commander-damage-item .damage-value {
        font-size: 1.25rem;
    }

    .damage-btn {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    /* Counters modal - compact */
    .counters-list {
        padding: 0.5rem;
        gap: 0.375rem;
    }

    .counter-item {
        padding: 0.375rem 0.5rem;
    }

    .counter-item .counter-name {
        font-size: 0.8rem;
    }

    .counter-item .counter-value {
        font-size: 1.1rem;
    }

    .counter-btn {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    /* Player settings modal - compact */
    .player-settings-modal-content {
        max-height: 85vh;
    }

    .player-settings-modal-content .form-group {
        margin-bottom: 0.5rem;
    }

    .player-settings-modal-content label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .player-settings-modal-content input {
        padding: 0.375rem 0.5rem;
        font-size: 0.85rem;
    }

    /* Random starter overlay - compact */
    .random-starter-content {
        padding: 1rem;
    }

    .random-starter-content h2 {
        font-size: 1.1rem;
    }

    .random-starter-display {
        font-size: 1.25rem;
        padding: 0.75rem;
    }

    .random-starter-result {
        font-size: 1.5rem;
        margin: 0.5rem 0;
    }

    /* History panel adjustment for landscape */
    .history-panel {
        width: 280px;
        right: -280px;
    }

    /* Life shortcuts popup - compact */
    .life-shortcuts-popup {
        gap: 0.375rem;
        padding: 0.5rem;
    }

    .life-shortcut-btn {
        min-width: 2.5rem;
        height: 2rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.9rem;
    }

    /* Random Starter Overlay - Landscape */
    .random-starter-overlay {
        padding: 0.5rem;
        overflow-y: auto;
    }

    .random-starter-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .random-starter-content h2 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .random-starter-display {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        min-height: auto;
    }

    .random-starter-player {
        width: 50px;
        height: 50px;
    }

    .random-starter-player .player-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .random-starter-player .player-name {
        font-size: 0.45rem;
    }

    .random-starter-result {
        margin-bottom: 0.5rem;
    }

    .random-starter-result .result-name {
        font-size: 1.25rem;
        margin-top: 0.25rem;
    }

    .random-starter-actions {
        gap: 0.5rem;
    }

    .random-starter-actions button {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    /* Viado Overlay - Landscape */
    .viado-overlay {
        padding: 0.5rem;
        overflow-y: auto;
    }

    .viado-overlay-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .viado-overlay-title {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .viado-animation {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        min-height: auto;
    }

    .viado-animation .player-option {
        width: 50px;
        height: 50px;
    }

    .viado-animation .player-option .name {
        font-size: 0.45rem;
    }

    .viado-overlay-result {
        margin-bottom: 0.5rem;
        gap: 0.25rem;
    }

    .viado-result-emoji {
        font-size: 1.5rem;
    }

    .viado-result-label {
        font-size: 0.8rem;
    }

    .viado-winner-name {
        font-size: 1.25rem;
    }

    .viado-overlay-actions {
        gap: 0.5rem;
    }

    .viado-overlay-actions button {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    /* ===== Dice Roller Modal - Landscape Compact ===== */
    .dice-roller-content {
        padding: 0.5rem;
        max-height: 85vh;
        overflow-y: auto;
    }

    .dice-result-area {
        padding: 0.5rem;
        min-height: 100px;
    }

    .dice-box {
        width: 110px;
        height: 80px;
    }

    .box-die {
        width: 28px;
        height: 28px;
    }

    .box-die-face {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .box-die-front { transform: rotateY(0deg) translateZ(14px); }
    .box-die-back { transform: rotateY(180deg) translateZ(14px); }
    .box-die-left { transform: rotateY(-90deg) translateZ(14px); }
    .box-die-right { transform: rotateY(90deg) translateZ(14px); }
    .box-die-top { transform: rotateX(90deg) translateZ(14px); }
    .box-die-bottom { transform: rotateX(-90deg) translateZ(14px); }

    .coin-box {
        width: 100px;
        height: 80px;
    }

    .box-coin {
        width: 36px;
        height: 36px;
        margin-left: -18px;
        margin-top: -18px;
    }

    .box-coin-face {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .dice-result-value {
        font-size: 1.5rem;
        min-height: 2rem;
    }

    .dice-result-details {
        font-size: 0.7rem;
    }

    .dice-grid-compact {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.35rem;
        padding: 0 0.25rem;
        margin-bottom: 0.5rem;
    }

    .dice-grid-compact .dice-btn {
        padding: 0.4rem 0.25rem;
        font-size: 0.8rem;
    }

    .dice-mods-row {
        padding: 0.35rem;
        gap: 0.5rem;
        margin: 0 0.25rem 0.5rem;
    }

    .dice-mods-row input {
        width: 38px;
        padding: 0.25rem;
        font-size: 0.8rem;
    }

    .dice-history {
        max-height: 50px;
        padding: 0.35rem;
        font-size: 0.7rem;
        margin: 0 0.25rem;
    }

    /* Settings modal - compact */
    .settings-modal-content {
        max-height: 85vh;
        overflow-y: auto;
    }

    .settings-group {
        padding: 0.5rem;
    }

    .settings-group h3 {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }

    /* Player settings modal */
    .player-settings-modal-content {
        max-height: 85vh;
    }

    .color-picker-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 0.25rem;
    }

    .color-option {
        width: 26px;
        height: 26px;
    }

    .color-option {
        width: 28px;
        height: 28px;
    }

    /* Commander damage modal - horizontal */
    .commander-modal-content {
        max-width: 95vw;
    }

    .commander-damage-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .commander-damage-item {
        flex: 0 0 auto;
        min-width: 100px;
        padding: 0.5rem;
    }
}

/* Large landscape - tablet in landscape */
@media (orientation: landscape) and (min-height: 500px) {
    .players-grid {
        gap: 0.5rem;
    }

    .player-card .life-value {
        font-size: clamp(3rem, 6vw, 4rem);
    }
}

/* Touch feedback enhancements */
@media (hover: none) {
    .life-control:active {
        background: rgba(255,255,255,0.15);
        transform: scale(0.98);
    }

    .player-action-btn:active {
        background: rgba(255,255,255,0.3);
        transform: scale(0.95);
    }

    .damage-btn:active,
    .counter-btn:active {
        transform: scale(0.9);
    }

    /* Hide floating undo on touch devices - header button is sufficient */
    .floating-undo-btn {
        display: none !important;
    }
}

/* Swipe hint indicator */
.swipe-hint {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.player-card:active .swipe-hint {
    opacity: 1;
}

/* Hide scrollbar but allow scrolling */
.history-list::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
    width: 6px;
}

.history-list::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.history-list::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===== Enhanced Undo System ===== */
.floating-undo-btn {
    animation: floatIn 300ms ease, undoPulse 2s ease infinite;
}

.floating-undo-btn:active {
    transform: translateX(-50%) scale(0.95);
}

/* Undo action confirmation toast */
.undo-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    z-index: 60;
    animation: toastSlideUp 300ms ease, toastFadeOut 300ms ease 2s forwards;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes toastFadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
}

/* ===== Safe Area Support for Mobile ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .game-header {
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }

    .floating-undo-btn {
        bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .timer-display {
        bottom: max(1rem, env(safe-area-inset-bottom));
        right: max(1rem, env(safe-area-inset-right));
    }

    .modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== Setup Screen Mobile Landscape ===== */
@media (orientation: landscape) and (max-height: 500px) {
    #setup-screen {
        overflow-y: auto;
    }

    .setup-container {
        max-width: 100%;
        padding: 0.75rem 1rem;
        padding-bottom: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title title"
            "players life"
            "layout theme"
            "playerlist playerlist"
            "start start";
        gap: 0.5rem 1rem;
        align-items: start;
    }

    .setup-title {
        grid-area: title;
        font-size: 1.5rem;
        margin-bottom: 0;
    }

    .setup-subtitle {
        display: none;
    }

    .setup-section {
        margin-bottom: 0;
    }

    .setup-section:nth-child(2) {
        grid-area: players;
    }

    .setup-section:nth-child(3) {
        grid-area: life;
    }

    .setup-section:nth-child(4) {
        grid-area: layout;
    }

    .setup-section:nth-child(5) {
        grid-area: theme;
    }

    .setup-section:nth-child(6) {
        grid-area: playerlist;
    }

    .setup-label {
        font-size: 0.7rem;
        margin-bottom: 0.375rem;
    }

    .player-count-selector,
    .starting-life-selector {
        gap: 0.25rem;
    }

    .count-btn,
    .life-btn {
        min-width: 32px;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    .custom-life-input {
        min-width: 50px;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    .layout-presets {
        gap: 0.25rem;
        margin-bottom: 0.375rem;
    }

    .layout-preset-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }

    .table-mode-toggle {
        margin-top: 0.25rem;
    }

    .table-mode-toggle label {
        font-size: 0.65rem;
        gap: 0.25rem;
    }

    .table-mode-toggle input {
        width: 14px;
        height: 14px;
    }

    .theme-selector {
        gap: 0.25rem;
    }

    .theme-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.7rem;
    }

    /* Player setup list - horizontal scroll on landscape */
    .player-setup-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .player-setup-item {
        flex-shrink: 0;
        min-width: 150px;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .player-color-dot {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .player-setup-input {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        min-width: 80px;
    }

    .start-btn {
        grid-area: start;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }
}

/* Setup screen for small portrait screens */
@media (max-width: 400px) and (orientation: portrait) {
    .setup-container {
        padding: 1rem;
        padding-bottom: 2rem;
    }

    .setup-title {
        font-size: 1.75rem;
    }

    .setup-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .setup-section {
        margin-bottom: 1rem;
    }

    .setup-label {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .count-btn,
    .life-btn {
        min-width: 36px;
        padding: 0.5rem 0.625rem;
        font-size: 0.8rem;
    }

    .player-setup-item {
        padding: 0.625rem;
        gap: 0.5rem;
    }

    .player-color-dot {
        width: 28px;
        height: 28px;
    }

    .player-setup-input {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }

    .start-btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* ===== Taunt System ===== */
.taunt-modal-content {
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
}

.taunt-player-name {
    text-align: center;
    font-size: 1.1rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.taunt-section {
    margin-bottom: 1.25rem;
}

.taunt-section h3 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.taunt-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.taunt-btn {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 44px;
    text-align: center;
}

.taunt-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

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

.taunt-phrases-grid .taunt-btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

.taunt-custom-input {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.taunt-custom-input input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.taunt-custom-input input::placeholder {
    color: var(--text-muted);
}

.taunt-custom-input .action-btn {
    padding: 0.5rem 0.75rem;
    min-width: auto;
}

/* Taunt Overlay */
.taunt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.taunt-overlay.active {
    opacity: 1;
    visibility: visible;
}

.taunt-display {
    text-align: center;
    animation: tauntBounce 0.5s ease-out;
}

.taunt-from {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.taunt-text {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 20px var(--accent-primary), 0 0 40px var(--accent-primary);
    animation: tauntPulse 0.3s ease-in-out infinite alternate;
}

@keyframes tauntBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes tauntPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* Rainbow animation for LGBT taunts */
.taunt-text.rainbow {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowMove 1s linear infinite, tauntPulse 0.3s ease-in-out infinite alternate;
}

@keyframes rainbowMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ===== Print Styles (for debugging) ===== */
@media print {
    .game-header,
    .floating-undo-btn,
    .timer-display,
    .player-actions {
        display: none !important;
    }

    .player-card {
        break-inside: avoid;
    }
}

/* ===== Card Scanner Modal ===== */
.card-scan-content {
    max-width: 440px;
}

.card-scan-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.cs-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.cs-camera-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 48vh;
    background: #000;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.cs-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-frame-guide {
    position: absolute;
    inset: 8% 16%;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    pointer-events: none;
}

.cs-camera-msg {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    min-height: 1.1em;
}

.cs-capture-actions {
    display: flex;
    gap: 0.6rem;
    width: 100%;
}

.cs-capture-actions .primary-btn {
    flex: 2;
    width: auto;
}

.cs-capture-actions .cs-gallery-btn {
    flex: 1;
    width: auto;
}

.cs-capture-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cs-gallery-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.cs-gallery-btn:hover {
    background: var(--border-color);
}

.cs-retry-btn {
    margin-top: 0.5rem;
}

/* Resultado */
.cs-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
}

.cs-card-img {
    width: 62%;
    max-width: 220px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.cs-card-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cs-card-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}

.cs-card-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

.cs-card-row {
    font-size: 0.85rem;
}

.cs-label {
    display: inline-block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-right: 0.4rem;
}

.cs-card-oracle {
    font-size: 0.85rem;
    line-height: 1.45;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 0.75rem;
}

.cs-card-set {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cs-scryfall-link {
    font-size: 0.8rem;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
}

.cs-card-warn,
.cs-card-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 0.5rem 0.6rem;
    border-radius: var(--border-radius-sm);
}

.cs-confidence {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.cs-confidence-high {
    color: var(--success);
}

.cs-confidence-mid {
    color: #f59e0b;
}

.cs-confidence-low {
    color: var(--danger);
}

/* Erro */
.cs-error-icon {
    font-size: 2rem;
}

.cs-error-msg {
    margin: 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Tabs de modo */
.cs-tabs {
    display: flex;
    gap: 0.3rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: var(--border-radius);
}

.cs-tab {
    flex: 1;
    padding: 0.5rem 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.cs-tab.active {
    background: var(--accent-primary);
    color: #fff;
}

/* Miniaturas do modo interação */
.cs-shots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.cs-shot-thumb {
    width: 54px;
    height: 76px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--accent-primary);
}

.cs-judge-clear {
    align-self: flex-start;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 0.85rem;
}

/* Juiz / respostas em texto */
.cs-judge-input {
    width: 100%;
    resize: vertical;
    min-height: 70px;
    padding: 0.6rem 0.75rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
}

.cs-judge-answer,
.cs-answer {
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.5;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    padding: 0.7rem 0.85rem;
    text-align: left;
}

.cs-judge-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cs-answer-error {
    color: var(--danger);
    font-size: 0.85rem;
}

/* ===== Finger Picker ===== */
.finger-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: radial-gradient(circle at center, #1a1a2e 0%, #050509 100%);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.fp-instructions {
    position: absolute;
    top: 8%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    pointer-events: none;
    padding: 0 1rem;
}

.fp-instructions h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 0.4rem;
}

.fp-instructions p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.fp-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.fp-status {
    position: absolute;
    bottom: 9%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    padding: 0 1rem;
}

.fp-dot {
    position: fixed;
    width: 92px;
    height: 92px;
    margin: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid rgba(255, 255, 255, 0.85);
    transition: opacity 350ms ease, transform 350ms ease;
    pointer-events: none;
}

.fp-counting .fp-dot {
    animation: fpPulse 0.7s ease-in-out infinite;
}

@keyframes fpPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.18); }
}

.fp-dot.fp-loser {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
}

.fp-dot.fp-winner {
    transform: translate(-50%, -50%) scale(1.6);
    border-color: #fff;
    animation: fpWinner 0.9s ease-in-out infinite;
    z-index: 1;
}

@keyframes fpWinner {
    0%, 100% { transform: translate(-50%, -50%) scale(1.55); }
    50% { transform: translate(-50%, -50%) scale(1.75); }
}

.fp-result {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}

.fp-result-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.fp-btn {
    padding: 0.7rem 1.2rem;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.fp-btn-primary {
    background: var(--accent-primary);
}

/* ===== Promo do APK Android ===== */
.apk-promo-content {
    max-width: 360px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.apk-promo-emoji {
    font-size: 2.5rem;
}

.apk-promo-content h2 {
    font-size: 1.15rem;
    font-weight: 800;
}

.apk-promo-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.apk-promo-download {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-top: 0.3rem;
}

.apk-promo-dismiss {
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 0.4rem;
}

/* ===== Comando de voz ===== */
.voice-listening {
    color: #fff;
    background: var(--danger);
    animation: voicePulse 1.1s ease-in-out infinite;
}

@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.voice-armed {
    color: #fff;
    background: var(--success);
    animation: voicePulseGreen 1.1s ease-in-out infinite;
}

@keyframes voicePulseGreen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

.voice-overlay {
    position: fixed;
    left: 50%;
    bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 250;
    max-width: 94vw;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem 0.3rem 0.7rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0.96;
}

.voice-mic {
    font-size: 1.05rem;
    animation: voicePulse 1.1s ease-in-out infinite;
    border-radius: 50%;
}

.voice-text {
    flex: 1;
    min-width: 0;
}

.voice-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voice-heard {
    font-size: 0.66rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1em;
}

.voice-text {
    max-width: 60vw;
}

.voice-stop {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-weight: 600;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.voice-toast {
    position: fixed;
    left: 50%;
    top: 18%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 260;
    padding: 0.7rem 1.1rem;
    border-radius: var(--border-radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.voice-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.voice-toast-ok {
    border-left: 4px solid var(--success);
}

/* Botão de download do APK na home */
.apk-home-btn {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.7rem 1rem;
    text-align: center;
    text-decoration: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.apk-home-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ===== Modal Ferramentas ===== */
.tools-modal-content {
    max-width: 420px;
}

.tools-body {
    padding: 0.5rem 1.25rem 1.25rem;
}

.tools-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.9rem 0 0.5rem;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.9rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.82rem;
    text-align: center;
    transition: all var(--transition-fast);
}

.tool-item:hover {
    background: var(--border-color);
}

.tool-ic {
    font-size: 1.7rem;
    line-height: 1;
}

/* ===== Abas do modal Configurações ===== */
.settings-tabs-nav {
    display: flex;
    gap: 0.3rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: var(--border-radius);
    margin: 0 1rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 4;
}

.settings-tab {
    flex: 1;
    padding: 0.55rem 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.settings-tab.active {
    background: var(--accent-primary);
    color: #fff;
}

/* ===== Modal Pódio (registrar resultado manual) ===== */
.podium-modal-content {
    max-width: 440px;
}

.podium-body {
    padding: 0.85rem 1.25rem 1.25rem;
}

.podium-help {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0 0 0.7rem;
    line-height: 1.35;
}

.podium-slots {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.podium-slot {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    border: 2px dashed var(--border-color);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.podium-slot.filled {
    border-style: solid;
    border-color: var(--accent-primary);
    background: var(--bg-card);
}

.podium-place {
    font-weight: 800;
    min-width: 34px;
    font-size: 1.05rem;
}

.podium-name {
    font-weight: 600;
    color: var(--text-primary);
}

.podium-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.podium-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.podium-chip {
    padding: 0.5rem 0.9rem;
    background: var(--accent-primary);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.podium-chip:hover {
    background: var(--accent-secondary);
}

.podium-actions {
    display: flex;
    gap: 0.5rem;
}

.podium-actions .primary-btn,
.podium-actions .cs-gallery-btn {
    width: auto;
    flex: 1;
    margin-top: 0;
}

/* ===== Modal Ranking ===== */
.ranking-modal-content {
    max-width: 480px;
}

.ranking-body {
    padding: 0.75rem 1.25rem 1.25rem;
}

.ranking-tabs {
    display: flex;
    gap: 0.3rem;
    background: var(--bg-tertiary);
    padding: 0.25rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.85rem;
}

.ranking-tab {
    flex: 1;
    padding: 0.55rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.ranking-tab.active {
    background: var(--accent-primary);
    color: #fff;
}

.ranking-table {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ranking-row {
    display: grid;
    grid-template-columns: 38px 1fr 56px 36px 36px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.7rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
}

.ranking-head {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.7rem 0;
    font-weight: 700;
}

.ranking-place {
    font-weight: 800;
    font-size: 1rem;
}

.ranking-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-pts {
    font-weight: 800;
    color: var(--accent-primary);
    text-align: right;
}

.ranking-wins,
.ranking-matches {
    text-align: right;
    color: var(--text-secondary);
}

.ranking-empty {
    padding: 1.2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== Base única: perfis, ranking do servidor, histórico, atualização ===== */
.lc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 2px solid rgba(255,255,255,0.12);
    vertical-align: middle;
}
.lc-avatar-initials {
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}
.lc-avatar-sm { width: 30px; height: 30px; font-size: 0.75rem; }
.lc-avatar-xs { width: 22px; height: 22px; font-size: 0.6rem; border-width: 1px; }

/* Setup: jogador = perfil (foto + nome) */
.player-profile-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.player-setup-avatar { width: 44px; height: 44px; }
.player-setup-avatar-empty {
    color: var(--text-secondary);
    font-size: 1.4rem;
    border: 2px dashed var(--text-muted);
    background: transparent;
}
.player-setup-item.no-profile { border-style: dashed; }
.player-setup-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.player-setup-name {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-setup-placeholder {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
}
.start-btn.start-btn-waiting {
    opacity: 0.75;
    filter: saturate(0.6);
}
.setup-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.75rem;
}
.setup-footer-btn {
    padding: 0.5rem 0.9rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.setup-version {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 0.25rem;
}
.setup-version #sync-status-label { color: var(--warning); display: block; }

/* Seletor de perfil */
.profile-picker-content { max-width: 520px; }
.profile-picker-body { padding: 0.85rem 1.25rem 1.25rem; }
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.6rem;
}
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.4rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.profile-card:hover { border-color: var(--accent-primary); }
.profile-card.selected { border-color: var(--accent-primary); background: rgba(99,102,241,0.18); }
.profile-card.taken { opacity: 0.4; cursor: not-allowed; }
.profile-card-avatar { width: 64px; height: 64px; font-size: 1.3rem; }
.profile-card-name {
    font-weight: 600;
    font-size: 0.85rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-card-taken { font-size: 0.65rem; color: var(--text-muted); }
.profile-card-new .profile-card-avatar { background: transparent; border: 2px dashed var(--text-muted); color: var(--text-secondary); }
.profile-new-form { margin-top: 0.5rem; }
.profile-new-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; }
.profile-new-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
}
.profile-new-avatar { width: 72px; height: 72px; font-size: 1.6rem; border: 2px dashed var(--text-muted); }
.profile-new-photo-hint { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.profile-new-name {
    flex: 1;
    padding: 0.7rem 0.85rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    font-size: 1.05rem;
    color: var(--text-primary);
}
.profile-new-name:focus { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.profile-new-error { color: var(--danger); font-size: 0.8rem; min-height: 1.1em; margin-bottom: 0.5rem; }
.profile-picker-footer { margin-top: 0.9rem; }
.profile-picker-footer .cs-gallery-btn { width: 100%; }

/* Gerenciar perfis */
.profiles-manage { display: flex; flex-direction: column; gap: 0.45rem; }
.profile-manage-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}
.profile-manage-row.busy { opacity: 0.5; pointer-events: none; }
.profile-manage-photo { cursor: pointer; display: flex; }
.profile-manage-avatar { width: 46px; height: 46px; }
.profile-manage-name {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
}
.profile-manage-preset { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }
.profile-manage-del { background: none; font-size: 1.1rem; padding: 0.3rem; cursor: pointer; }

/* Ranking (servidor) e histórico */
.ranking-source {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: -0.35rem 0 0.6rem;
    text-align: center;
}
.ranking-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ranking-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row.ranking-leader { border: 1px solid var(--accent-primary); }
.history-match {
    padding: 0.6rem 0.7rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.history-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.history-date { font-weight: 700; color: var(--text-secondary); }
.history-meta { flex: 1; }
.history-del { background: none; cursor: pointer; font-size: 0.95rem; padding: 0.1rem 0.3rem; opacity: 0.7; }
.history-del:hover { opacity: 1; }
.history-winner { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.history-others { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; font-size: 0.78rem; color: var(--text-secondary); }
.history-other { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Atualização do APK */
.update-modal-content { max-width: 420px; }
.update-body { padding: 0.85rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.update-current { font-size: 0.9rem; }
.update-muted { color: var(--text-muted); font-size: 0.8rem; }
.update-note { margin: 0; line-height: 1.35; }
.update-status { font-size: 0.95rem; line-height: 1.4; }
.update-progress { height: 8px; background: var(--bg-tertiary); border-radius: 999px; overflow: hidden; }
.update-progress-bar { height: 100%; width: 0; background: var(--accent-primary); transition: width 0.25s; }
.update-changelog {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 0.6rem 0.75rem;
    border-radius: var(--border-radius-sm);
    line-height: 1.4;
}
.update-actions { display: flex; gap: 0.5rem; }
.update-actions .primary-btn, .update-actions .cs-gallery-btn { width: auto; flex: 1; margin-top: 0; text-align: center; text-decoration: none; }
.update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    padding-top: calc(0.55rem + env(safe-area-inset-top));
    background: var(--accent-primary);
    color: #fff;
    font-size: 0.85rem;
    box-shadow: var(--shadow-md);
}
.update-banner > span { flex: 1; }
.update-banner-btn {
    background: #fff;
    color: var(--accent-primary);
    font-weight: 700;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
}
.update-banner-x { background: none; color: #fff; font-size: 1.2rem; padding: 0 0.3rem; }

@media (max-width: 480px) {
    .profile-grid { grid-template-columns: repeat(3, 1fr); }
    .profile-card-avatar { width: 56px; height: 56px; }
}

/* ===== Comando de voz: botão no meio da mesa (push-to-talk) + ajuda ===== */
.voice-fab {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 240;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.85;
    transition: transform var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.voice-fab:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
.voice-fab:active { transform: translate(-50%, -50%) scale(0.94); }
.voice-fab.voice-fab-listening {
    opacity: 1;
    background: var(--danger);
    border-color: transparent;
    animation: voicePulse 1.1s ease-in-out infinite;
}
.voice-fab.voice-fab-ambient {
    opacity: 1;
    background: var(--success);
    border-color: transparent;
    animation: voicePulseGreen 1.1s ease-in-out infinite;
}
.voice-help-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.voice-help-content { max-width: 480px; }
.voice-help-body { padding: 0.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.voice-help-group .podium-section-label { margin-bottom: 0.2rem; }
.voice-help-line { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }

@media (max-width: 480px) {
    .voice-fab { width: 50px; height: 50px; font-size: 1.3rem; }
}

/* ===== Diálogos próprios ===== */
.lc-dialog-content { max-width: 380px; padding: 1.1rem 1.25rem; }
.lc-dialog-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 0.5rem; }
.lc-dialog-message { font-size: 0.95rem; line-height: 1.45; color: var(--text-primary); }
.lc-dialog-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.8rem; font-size: 0.85rem; color: var(--text-secondary); }
.lc-dialog-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.lc-dialog-actions .primary-btn, .lc-dialog-actions .danger-btn, .lc-dialog-actions .cs-gallery-btn { width: auto; flex: 1; margin-top: 0; }
.lc-dialog-danger .lc-dialog-title { color: var(--danger); }
.lc-countdown {
    position: fixed;
    left: 50%;
    bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2600;
    width: min(92vw, 420px);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--warning);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    font-size: 0.85rem;
}
.lc-countdown-msg { flex: 1; font-weight: 600; }
.lc-countdown-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.08); border-radius: 0 0 var(--border-radius) var(--border-radius); overflow: hidden; }
.lc-countdown-fill { display: block; height: 100%; width: 100%; background: var(--warning); transform-origin: left; animation: lcCountdown linear forwards; }
@keyframes lcCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.lc-countdown-cancel { padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--danger); color: #fff; font-weight: 700; font-size: 0.78rem; }

/* ===== Encerrar partida / silencioso ===== */
.end-game-btn { margin-bottom: 0.4rem; }
.end-game-btn:disabled { opacity: 0.55; }
.winner-continue-btn { width: auto; margin-top: 0.5rem; font-size: 0.8rem; }
.silent-btn { font-size: 1rem; }
.silent-btn.silent-on { background: var(--warning); color: #111; }
.change-profile-btn { width: 100%; margin-top: 0.4rem; }

/* ===== Histórico: separador de turno ===== */
.history-turn-sep { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0.6rem 0 0.3rem; }
.history-filters { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.history-select { flex: 1; padding: 0.45rem 0.5rem; background: var(--bg-tertiary); color: var(--text-primary); border-radius: var(--border-radius-sm); font-size: 0.8rem; }
.history-clickable, .ranking-clickable { cursor: pointer; }
.history-clickable:hover, .ranking-clickable:hover { outline: 1px solid var(--accent-primary); }
.ranking-hint { text-align: center; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.4rem; }
.ranking-cfg-btn { margin-right: 0.3rem; width: 32px; height: 32px; font-size: 0.95rem; }
.ranking-modal-content .modal-header { display: flex; align-items: center; }
.ranking-modal-content .modal-header h2 { flex: 1; }

/* ===== Página de perfil / detalhe da partida ===== */
.profile-page-content { max-width: 520px; }
.profile-page-body { padding: 0.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; max-height: 80vh; overflow-y: auto; }
.pp-hero { display: flex; align-items: center; gap: 1rem; }
.pp-avatar { width: 88px; height: 88px; font-size: 1.8rem; }
.pp-name { font-size: 1.3rem; font-weight: 800; }
.pp-ranks { font-size: 0.85rem; color: var(--text-secondary); }
.pp-aliases { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
.pp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.pp-stat { background: var(--bg-tertiary); border-radius: var(--border-radius-sm); padding: 0.5rem 0.3rem; text-align: center; }
.pp-stat-value { font-weight: 800; font-size: 1.05rem; }
.pp-stat-label { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pp-section { display: flex; flex-direction: column; gap: 0.35rem; }
.pp-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.3rem; }
.pp-chip { padding: 0.3rem 0.6rem; background: var(--bg-tertiary); border-radius: 999px; font-size: 0.8rem; }
.pp-ach { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.pp-ach-item { display: flex; align-items: center; gap: 0.4rem; background: var(--bg-tertiary); border-radius: var(--border-radius-sm); padding: 0.4rem 0.5rem; font-size: 0.78rem; }
.pp-ach-icon { font-size: 1.2rem; }
.pp-ach-title { flex: 1; font-weight: 600; }
.pp-ach-date { font-size: 0.62rem; color: var(--text-muted); }
.pp-recent { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; background: var(--bg-tertiary); border-radius: var(--border-radius-sm); font-size: 0.82rem; cursor: pointer; }
.pp-recent-date { flex: 1; }
.md-head { font-size: 0.8rem; color: var(--text-secondary); }
.md-podium { display: flex; flex-direction: column; gap: 0.35rem; }
.md-place { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; background: var(--bg-tertiary); border-radius: var(--border-radius-sm); font-size: 0.85rem; flex-wrap: wrap; }
.md-medal { font-weight: 800; min-width: 28px; }
.md-name { font-weight: 700; }
.md-log { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; }
.md-event { padding: 0.25rem 0.4rem; border-left: 2px solid var(--border-color); color: var(--text-secondary); }
.md-player_eliminated, .md-player_win { color: var(--text-primary); font-weight: 600; border-left-color: var(--danger); }
.md-player_win { border-left-color: var(--success); }
.season-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.season-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-secondary); }
.season-form select, .season-form input { padding: 0.5rem 0.6rem; background: var(--bg-tertiary); color: var(--text-primary); border-radius: var(--border-radius-sm); font-size: 0.9rem; }
.profile-manage-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.profile-manage-aliases { padding: 0.3rem 0.5rem; background: var(--bg-secondary); border-radius: var(--border-radius-sm); color: var(--text-secondary); font-size: 0.72rem; }
.profile-manage-stats { background: none; font-size: 1rem; padding: 0.3rem; cursor: pointer; }

/* ===== Mecânicas de mesa ===== */
.mech-modal-content { max-width: 520px; }
.mech-body { padding: 0.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; max-height: 80vh; overflow-y: auto; }
.mech-section { display: flex; flex-direction: column; gap: 0.45rem; }
.mech-row { display: flex; gap: 0.4rem; }
.mech-row.mech-wrap { flex-wrap: wrap; }
.mech-btn { flex: 1; padding: 0.55rem 0.5rem; background: var(--bg-tertiary); color: var(--text-primary); border-radius: var(--border-radius-sm); font-weight: 600; font-size: 0.82rem; border: 2px solid transparent; }
.mech-btn.active { border-color: var(--accent-primary); }
.mech-btn.primary { background: var(--accent-primary); color: #fff; }
.mech-help { font-size: 0.72rem; color: var(--text-muted); margin: 0; line-height: 1.35; }
.mech-muted { font-size: 0.75rem; color: var(--text-secondary); }
.mech-card { background: var(--bg-tertiary); border-radius: var(--border-radius); padding: 0.7rem 0.8rem; border-left: 4px solid var(--accent-primary); }
.mech-card.mech-phen { border-left-color: var(--warning); }
.mech-card.mech-scheme { border-left-color: var(--danger); }
.mech-card-name { font-weight: 800; font-size: 0.95rem; }
.mech-card-world { font-weight: 500; font-size: 0.7rem; color: var(--text-muted); margin-left: 0.3rem; }
.mech-card-text { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.4; }
.mech-card-chaos { font-size: 0.78rem; color: var(--warning); margin-top: 0.35rem; }
.mech-die { font-weight: 700; font-size: 0.9rem; min-height: 1.2em; }
.mech-ongoing { display: flex; flex-direction: column; gap: 0.25rem; }
.mech-ongoing-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; padding: 0.3rem 0.5rem; background: var(--bg-tertiary); border-radius: var(--border-radius-sm); }
.mech-link { background: none; color: var(--accent-primary); font-size: 0.75rem; cursor: pointer; }
.mechanics-badge {
    position: absolute;
    top: 3.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.7rem;
    background: rgba(0,0,0,0.55);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--text-primary);
    backdrop-filter: blur(4px);
    cursor: pointer;
    max-width: 90vw;
    white-space: nowrap;
    overflow: hidden;
}

@media (max-width: 480px) {
    .pp-stats { grid-template-columns: repeat(3, 1fr); }
    .pp-ach { grid-template-columns: 1fr; }
}