/* Base styles */
:root {
    --axe-red: #c0392b;
    --axe-red-light: #e74c3c;
    --axe-dark: #1a1a2e;
    --axe-darker: #0f0f23;
    --axe-blue: #3498db;
    --axe-green: #27ae60;
}

html, body {
    min-height: 100vh;
    background: var(--axe-dark);
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--axe-darker) 0%, var(--axe-dark) 100%);
}

main {
    flex: 1;
}

/* Navbar - slim and sleek */
.navbar {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.35rem 0 !important;
    min-height: auto;
}

.navbar .container-fluid {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand {
    padding: 0.25rem 0;
}

.navbar-brand img {
    height: 32px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.navbar-brand:hover img {
    transform: scale(1.03);
    filter: brightness(1.1);
}

.navbar .btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.navbar .btn-sm {
    border-radius: 6px;
}

.navbar .text-light {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Page container styles */
.container, .container-fluid {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Dark theme cards */
.card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    border-radius: 12px 12px 0 0;
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    color: white;
    font-weight: 600;
}

.card-text {
    color: rgba(255, 255, 255, 0.7);
}

/* Nested cards (like lane cards in dashboard) */
.card .card {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.06);
}

.card .card:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Form controls for dark theme */
.form-control, .form-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--axe-blue);
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Dropdown options for dark theme */
.form-select option {
    background: #1a1a2e;
    color: white;
}

.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background: #3498db;
    color: white;
}

.form-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Modal dark theme */
.modal-content {
    background: var(--axe-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Alert dark adjustments */
.alert-warning {
    background: rgba(241, 196, 15, 0.2);
    border-color: rgba(241, 196, 15, 0.3);
    color: #f1c40f;
}

.alert-info {
    background: rgba(52, 152, 219, 0.2);
    border-color: rgba(52, 152, 219, 0.3);
    color: #3498db;
}

.alert-success {
    background: rgba(39, 174, 96, 0.2);
    border-color: rgba(39, 174, 96, 0.3);
    color: var(--axe-green);
}

.alert-danger {
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.3);
    color: var(--axe-red-light);
}

/* Text utilities */
h1, h2, h3, h4, h5, h6 {
    color: white;
}

.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Footer */
.footer {
    background: rgba(0, 0, 0, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem 0 !important;
}

.footer span {
    font-size: 0.85rem;
}

/* Code styling */
code {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    color: #e74c3c;
    font-size: 0.875em;
}

/* Badge improvements */
.badge {
    font-weight: 500;
    padding: 0.4em 0.65em;
}

/* Link styling */
a {
    color: var(--axe-blue);
    text-decoration: none;
}

a:hover {
    color: #5dade2;
}

/* Spinner */
.spinner-border {
    color: var(--axe-red) !important;
}

/* Button enhancements */
.btn {
    transition: all 0.2s ease;
}

.btn-primary {
    background: linear-gradient(145deg, var(--axe-red), var(--axe-red-light));
    border: none;
    box-shadow: 0 2px 8px rgba(192, 57, 43, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(145deg, #a93226, var(--axe-red));
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.4);
    transform: translateY(-1px);
}

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

.btn-outline-primary {
    color: var(--axe-blue);
    border-color: var(--axe-blue);
}

.btn-outline-primary:hover {
    background: var(--axe-blue);
    border-color: var(--axe-blue);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
}

.btn-outline-success {
    color: var(--axe-green);
    border-color: var(--axe-green);
}

.btn-outline-success:hover {
    background: var(--axe-green);
    border-color: var(--axe-green);
}

.btn-outline-danger:hover {
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

/* Target board styles */
.target-board {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.target-ring {
    position: absolute;
    border-radius: 50%;
    border: 3px solid #333;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ring-outer {
    width: 380px;
    height: 380px;
    background: #2d4a3e;
}

.ring-middle {
    width: 260px;
    height: 260px;
    background: #4a6b5d;
}

.ring-bullseye {
    width: 120px;
    height: 120px;
    background: #c0392b;
}

.clutch-zone {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #3498db;
    border: 2px solid #2980b9;
    border-radius: 50%;
}

.clutch-top {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.clutch-bottom {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Scoring buttons */
.score-btn {
    width: 100%;
    height: 80px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 12px;
    transition: transform 0.1s, box-shadow 0.1s;
}

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

/* IATF scoring buttons */
.score-btn-5 {
    background: linear-gradient(145deg, #c0392b, #e74c3c);
    border: none;
    color: white;
}

.score-btn-3 {
    background: linear-gradient(145deg, #4a6b5d, #5d8a73);
    border: none;
    color: white;
}

.score-btn-1 {
    background: linear-gradient(145deg, #2d4a3e, #3d5c4f);
    border: none;
    color: white;
}

.score-btn-0 {
    background: linear-gradient(145deg, #555, #777);
    border: none;
    color: white;
}

.score-btn-clutch {
    background: linear-gradient(145deg, #2980b9, #3498db);
    border: none;
    color: white;
}

/* WATL scoring buttons */
.score-btn-6 {
    background: linear-gradient(145deg, #c0392b, #e74c3c);
    border: none;
    color: white;
}

.score-btn-5 {
    background: linear-gradient(145deg, #d35400, #e67e22);
    border: none;
    color: white;
}

.score-btn-4 {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    border: none;
    color: white;
}

.score-btn-3 {
    background: linear-gradient(145deg, #16a085, #1abc9c);
    border: none;
    color: white;
}

.score-btn-2 {
    background: linear-gradient(145deg, #8e44ad, #9b59b6);
    border: none;
    color: white;
}

.score-btn-killshot {
    background: linear-gradient(145deg, #2471a3, #2e86c1);
    border: none;
    color: white;
}

/* Player cards */
.player-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.player-card.active {
    background: rgba(52, 152, 219, 0.3);
    border: 2px solid #3498db;
    transform: scale(1.02);
}

.player-card.winner {
    background: linear-gradient(145deg, rgba(241, 196, 15, 0.3), rgba(243, 156, 18, 0.3));
    border: 2px solid #f1c40f;
}

/* Scoreboard */
.scoreboard {
    background: #16213e;
    border-radius: 16px;
    padding: 2rem;
}

.round-cell {
    width: 60px;
    text-align: center;
    padding: 0.5rem;
}

.throw-badge {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.875rem;
}

.throw-5 { background: #c0392b; color: white; }
.throw-3 { background: #4a6b5d; color: white; }
.throw-1 { background: #2d4a3e; color: white; }
.throw-0 { background: #555; color: white; }
.throw-7 { background: #3498db; color: white; }
.throw-clutch { background: linear-gradient(145deg, #3498db, #2980b9); color: white; }

/* Animation for score updates */
@keyframes scoreUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.score-updated {
    animation: scoreUpdate 0.3s ease;
}

/* Loading spinner */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .target-board {
        width: 300px;
        height: 300px;
    }

    .ring-outer { width: 280px; height: 280px; }
    .ring-middle { width: 190px; height: 190px; }
    .ring-bullseye { width: 90px; height: 90px; }

    .score-btn {
        height: 60px;
        font-size: 1.25rem;
    }
}

/* Full screen board view */
.board-fullscreen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #000000;
}

.board-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 2rem;
}

.board-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Large projector board layout */
.board-game-layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.board-target-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.board-target {
    position: relative;
    width: 70vh;
    height: 70vh;
    max-width: 700px;
    max-height: 700px;
    min-width: 400px;
    min-height: 400px;
}

.board-ring {
    position: absolute;
    border-radius: 50%;
    border: 4px solid #1a1a1a;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==================== IATF Target ==================== */
/* IATF: 3 rings - white outlines for projection visibility */
/* Outer (1pt), Middle (3pt), Bullseye (5pt) */

.iatf-ring-outer {
    width: 100%;
    height: 100%;
    background: #000000;
    border: 10px solid #ffffff;
}

.iatf-ring-middle {
    width: 66%;
    height: 66%;
    background: #000000;
    border: 10px solid #ffffff;
}

.iatf-ring-bullseye {
    width: 28%;
    height: 28%;
    background: #000000;
    border: 10px solid #ffffff;
}

/* ==================== WATL Target ==================== */
/* WATL 2024: 5 rings (1-5 pts), center bullseye (6 pts), 4 outer bullseyes in 4-ring (6 pts), 4 killshots in 1-ring (8 pts) */
/* Light wood-tone background for projection display */

.watl-target-container {
    position: relative;
}

.watl-target {
    position: relative;
    background: #000000;
    border-radius: 50%;
}

/* Main target rings - white OUTLINE rings for projection visibility */
/* Ring sizes based on actual WATL target: evenly spaced ~16.5% apart */
/* Rings: 1(100%), 2(83%), 3(67%), 4(50%), 5(33%), bullseye area(17%) */
.watl-ring-1 {
    width: 100%;
    height: 100%;
    background: transparent;
    border: 10px solid #ffffff;
}

.watl-ring-2 {
    width: 78%;
    height: 78%;
    background: transparent;
    border: 10px solid #ffffff;
}

.watl-ring-3 {
    width: 56%;
    height: 56%;
    background: transparent;
    border: 10px solid #ffffff;
}

.watl-ring-4 {
    width: 34%;
    height: 34%;
    background: transparent;
    border: 10px solid #ffffff;
}

/* Ring 5 - innermost scoring ring around bullseye area */
.watl-ring-5 {
    width: 12%;
    height: 12%;
    background: transparent;
    border: 10px solid #ffffff;
}

/* Center bullseye - small red dot */
.watl-ring-bullseye {
    width: 4%;
    height: 4%;
    background: #e74c3c;
}

/* 4 Outer bullseyes - red dots positioned in innermost scoring band at diagonal positions */
/* Band between ring 5 (33%) and bullseye (17%), center at ~25% from center */
.watl-outer-bullseye {
    position: absolute;
    width: 5%;
    height: 5%;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.watl-outer-bullseye-ring {
    display: none;
}

.watl-outer-bullseye-center {
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: #e74c3c;
    border: none;
    z-index: 1;
}

/* Outer bullseye positions - diagonal positions (X formation) in innermost scoring band */
/* Band center at 25% diameter, at 45° angles: 50% ± 8.8% ≈ 41% and 59% */
.watl-outer-bullseye-top {
    top: 37%;
    left: 33%;
}

.watl-outer-bullseye-bottom {
    top: 63%;
    left: 33%;
}

.watl-outer-bullseye-left {
    top: 63%;
    left: 67%;
}

.watl-outer-bullseye-right {
    top: 37%;
    left: 67%;
}

/* 4 Killshots - blue circles positioned BETWEEN ring 1 (100%) and ring 2 (83%) */
/* Band center at ~91.5%, at 45° angles: 50% ± (91.5%/2 * 0.707) = 50% ± 32.3% */
.watl-killshot {
    position: absolute;
    width: 4%;
    height: 4%;
    border-radius: 50%;
    background: #3498db;
    border: 2px solid #1a5276;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
    transform: translate(-50%, -50%);
}

/* Killshot positions - diagonal corners between ring 1 (100%) and ring 2 (83%) */
/* Moved inward to be clearly between the rings, not at container edge */
.watl-killshot-top-left {
    top: 16%;
    left: 23%;
}

.watl-killshot-top-right {
    top: 16%;
    left: 77%;
}

.watl-killshot-bottom-left {
    top: 84%;
    left: 23%;
}

.watl-killshot-bottom-right {
    top: 84%;
    left: 77%;
}

/* Dimmed killshot when not available */
.watl-killshot-inactive {
    opacity: 0.3;
    box-shadow: none;
}

/* Clutch zones - upper corners outside the rings (IATF standard) */
.board-clutch {
    position: absolute;
    width: 5.6vh;
    height: 5.6vh;
    background: radial-gradient(circle, #27ae60 0%, #1e8449 100%);
    border: 3px solid #145a32;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(39, 174, 96, 0.5);
}

/* Dimmed clutch when not available */
.board-clutch-inactive {
    opacity: 0.4;
    box-shadow: none;
}

/* Current player overlay */
.board-current-player {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.75rem 2rem;
    border-radius: 12px;
    border: 2px solid #3498db;
}

.current-player-name {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.current-player-info {
    font-size: 1.25rem;
    color: #3498db;
}

/* Compact scoreboard at bottom */
.board-scoreboard {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    margin-top: 1rem;
}

.board-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    min-width: 120px;
}

.board-player-active {
    background: rgba(52, 152, 219, 0.4);
    border: 2px solid #3498db;
}

.board-player-name {
    font-size: 1.1rem;
    color: #ccc;
}

.board-player-active .board-player-name {
    color: #fff;
    font-weight: bold;
}

.board-player-score {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}

/* Connection status */
.connection-status {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
}

.connection-connected {
    background: rgba(39, 174, 96, 0.9);
    color: white;
}

.connection-disconnected {
    background: rgba(231, 76, 60, 0.9);
    color: white;
}

.connection-connecting {
    background: rgba(241, 196, 15, 0.9);
    color: #333;
}

/* Calibration Screen Styles */
.calibration-screen {
    min-height: 100vh;
    background: #000000;
    position: relative;
    overflow: hidden;
}

.calibration-target-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calibration-target {
    position: relative;
    width: 70vh;
    height: 70vh;
    max-width: 700px;
    max-height: 700px;
    min-width: 400px;
    min-height: 400px;
    transition: transform 0.1s ease;
}

.calibration-scoreboard {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    transition: transform 0.1s ease, bottom 0.1s ease;
}

.calibration-player-overlay {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.75rem 2rem;
    border-radius: 12px;
    border: 2px solid #3498db;
    transition: transform 0.1s ease, top 0.1s ease;
}

.calibration-controls {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    border-left: 1px solid #333;
    transition: right 0.3s ease;
    z-index: 1000;
    display: flex;
}

.calibration-controls.show {
    right: 0;
}

.calibration-toggle {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #333;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calibration-toggle:hover {
    background: rgba(52, 152, 219, 0.5);
}

.controls-panel {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}

.control-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.control-section h6 {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.control-row label {
    color: #aaa;
    font-size: 0.875rem;
}

.control-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-buttons .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-value {
    color: white;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
}

.control-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.calibration-info {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 100;
}

/* ==================== Pyramid Game Styles ==================== */
.pyramid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
}

.pyramid-target {
    width: 100%;
    max-width: 200px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.5rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

/* Pyramid levels - gradient from bottom to top, decreasing widths */
.pyramid-level-1 {
    max-width: 300px;
    background: linear-gradient(145deg, #a855f7, #c084fc);
}
.pyramid-level-2 {
    max-width: 260px;
    background: linear-gradient(145deg, #3b82f6, #60a5fa);
}
.pyramid-level-3 {
    max-width: 215px;
    background: linear-gradient(145deg, #22c55e, #4ade80);
}
.pyramid-level-4 {
    max-width: 165px;
    background: linear-gradient(145deg, #f59e0b, #fbbf24);
}
.pyramid-level-5 {
    max-width: 115px;
    background: linear-gradient(145deg, #f97316, #fb923c);
}
.pyramid-level-6 {
    max-width: 70px;
    background: linear-gradient(145deg, #ef4444, #f87171);
    border: 4px solid #fbbf24;
}

/* Current target highlight */
.pyramid-target.current {
    transform: scale(1.05);
    box-shadow: none;
    border: 3px solid white;
}

/* Completed levels */
.pyramid-target.completed {
    opacity: 0.5;
    filter: grayscale(30%);
}

/* Locked levels (above current) */
.pyramid-target.locked {
    opacity: 0.3;
    filter: grayscale(70%);
}

/* Pyramid player cards */
.pyramid-player-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    min-width: 180px;
    text-align: center;
    transition: all 0.3s ease;
}

.pyramid-player-card.active {
    background: rgba(52, 152, 219, 0.3);
    border-color: #3498db;
    transform: scale(1.05);
}

.pyramid-player-card.eliminated {
    opacity: 0.5;
    background: rgba(231, 76, 60, 0.2);
    border-color: rgba(231, 76, 60, 0.5);
}

.pyramid-player-card.winner {
    background: linear-gradient(145deg, rgba(241, 196, 15, 0.3), rgba(243, 156, 18, 0.3));
    border-color: gold;
}

.pyramid-player-name {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
}

.pyramid-player-level {
    font-size: 2rem;
    font-weight: bold;
    color: #3498db;
}

.pyramid-player-chunks {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 0.5rem;
}

.pyramid-chunk {
    width: 16px;
    height: 16px;
    background: linear-gradient(145deg, #c0392b, #e74c3c);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pyramid-chunk.lost {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0.3;
}

/* Pyramid scoring buttons */
.pyramid-score-btn {
    width: 100%;
    height: 100px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 16px;
    border: none;
    transition: all 0.2s ease;
}

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

.pyramid-score-btn.hit {
    background: linear-gradient(145deg, #27ae60, #2ecc71);
    color: white;
}

.pyramid-score-btn.hit:hover {
    background: linear-gradient(145deg, #1e8449, #27ae60);
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.4);
}

.pyramid-score-btn.miss {
    background: linear-gradient(145deg, #c0392b, #e74c3c);
    color: white;
}

.pyramid-score-btn.miss:hover {
    background: linear-gradient(145deg, #922b21, #c0392b);
    box-shadow: 0 4px 20px rgba(192, 57, 43, 0.4);
}

/* Board pyramid layout */
.board-pyramid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

.board-pyramid-target {
    height: 8vh;
    min-height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 2rem;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.board-pyramid-level-1 {
    width: 55vh;
    max-width: 450px;
    min-width: 280px;
    background: linear-gradient(145deg, #8e44ad, #9b59b6);
}
.board-pyramid-level-2 {
    width: 48vh;
    max-width: 400px;
    min-width: 240px;
    background: linear-gradient(145deg, #2980b9, #3498db);
}
.board-pyramid-level-3 {
    width: 40vh;
    max-width: 340px;
    min-width: 200px;
    background: linear-gradient(145deg, #27ae60, #2ecc71);
}
.board-pyramid-level-4 {
    width: 31vh;
    max-width: 270px;
    min-width: 160px;
    background: linear-gradient(145deg, #f39c12, #f1c40f);
}
.board-pyramid-level-5 {
    width: 21vh;
    max-width: 190px;
    min-width: 120px;
    background: linear-gradient(145deg, #e67e22, #e74c3c);
}
.board-pyramid-level-6 {
    width: 12vh;
    max-width: 120px;
    min-width: 80px;
    background: linear-gradient(145deg, #c0392b, #e74c3c);
    border: 4px solid gold;
}

.board-pyramid-target.current {
    transform: scale(1.1);
    box-shadow: none;
    border: 4px solid white;
    z-index: 10;
}

.board-pyramid-target.completed {
    opacity: 0.4;
    filter: grayscale(40%);
}

.board-pyramid-target.locked {
    opacity: 0.25;
    filter: grayscale(80%);
}

/* ==================== Throw Result Animations ==================== */

/* Pyramid level hit animation */
@keyframes pyramidHit {
    0% { transform: scale(1.15); box-shadow: 0 0 40px rgba(39, 174, 96, 0.8); }
    50% { transform: scale(1.25); box-shadow: 0 0 80px rgba(39, 174, 96, 1), 0 0 120px rgba(39, 174, 96, 0.6); }
    100% { transform: scale(1.15); box-shadow: 0 0 40px rgba(39, 174, 96, 0.8); }
}

@keyframes pyramidMiss {
    0% { transform: scale(1.15); box-shadow: 0 0 40px rgba(231, 76, 60, 0.8); }
    50% { transform: scale(1.05); box-shadow: 0 0 80px rgba(231, 76, 60, 1), 0 0 120px rgba(231, 76, 60, 0.6); }
    100% { transform: scale(1.15); box-shadow: 0 0 40px rgba(231, 76, 60, 0.8); }
}

.board-pyramid-target.hit-animation {
    animation: pyramidHit 0.6s ease-in-out;
    border-color: #2ecc71 !important;
    box-shadow: 0 0 60px rgba(39, 174, 96, 0.9) !important;
}

.board-pyramid-target.miss-animation {
    animation: pyramidMiss 0.8s ease-in-out;
    border-color: #e74c3c !important;
}

/* Wrapper for pyramid levels to allow absolute positioning of drop marker */
.board-pyramid-level-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

/* Drop marker - animated indicator that falls down levels */
.pyramid-drop-marker {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    border: 4px solid #fbbf24;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
    animation: pyramidDrop 0.8s ease-in forwards;
    pointer-events: none;
    z-index: 20;
}

@keyframes pyramidDrop {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(calc((8vh + 0.75rem) * var(--drop-levels, 1)));
        opacity: 1;
    }
}

/* Standard target zone glow animations */
@keyframes zoneGlow {
    0% { filter: brightness(1); }
    25% { filter: brightness(1.8); }
    50% { filter: brightness(2.2); }
    75% { filter: brightness(1.8); }
    100% { filter: brightness(1); }
}

@keyframes bullseyeHit {
    0%, 100% { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.8), 0 0 40px rgba(231, 76, 60, 0.8); }
}

@keyframes clutchHit {
    0%, 100% { box-shadow: 0 0 10px rgba(46, 204, 113, 0.5); }
    50% { box-shadow: 0 0 50px rgba(46, 204, 113, 1), 0 0 80px rgba(46, 204, 113, 0.6); }
}

.board-ring.hit-animation {
    animation: zoneGlow 0.8s ease-in-out;
}

.iatf-ring-bullseye.hit-animation,
.watl-ring-bullseye.hit-animation {
    animation: bullseyeHit 0.8s ease-in-out;
}

.board-clutch.hit-animation {
    animation: clutchHit 0.8s ease-in-out;
}

/* Throw result overlay */
.throw-result-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    pointer-events: none;
}

.throw-result-score {
    font-size: 12rem;
    font-weight: bold;
    text-shadow: 0 0 40px currentColor, 0 0 80px currentColor;
    animation: scorePopIn 0.8s ease-out forwards;
}

.throw-result-score.score-hit {
    color: #2ecc71;
}

.throw-result-score.score-miss {
    color: #e74c3c;
}

.throw-result-score.score-high {
    color: #f1c40f;
}

.throw-result-score.score-clutch {
    color: #9b59b6;
}

@keyframes scorePopIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 0.9; }
}

@keyframes scoreFadeOut {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

.throw-result-overlay.fading .throw-result-score {
    animation: scoreFadeOut 0.4s ease-out forwards;
}

/* Player transition highlight */
.board-player.just-scored {
    background: rgba(39, 174, 96, 0.4) !important;
    border-color: #2ecc71 !important;
    transition: all 0.3s ease;
}

.board-player.just-missed {
    background: rgba(231, 76, 60, 0.4) !important;
    border-color: #e74c3c !important;
    transition: all 0.3s ease;
}

/* ======================== */
/* AXEMAN GAME STYLES       */
/* ======================== */

/* Axeman Board Layout */
.axeman-board-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 2rem;
}

.axeman-figures-row {
    display: flex;
    justify-content: center;
    gap: 8vw;
    width: 100%;
}

/* Single figure display (centered) */
.axeman-single-figure {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Axeman Figure Container */
.axeman-figure-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.axeman-figure {
    width: 25vh;
    height: 37.5vh;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.axeman-figure.pulse-animation {
    animation: axemanPulse 0.5s ease-in-out;
}

@keyframes axemanPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.axeman-player-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Axeman Body Parts */
.axeman-part {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 4;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

/* Body part colors when intact - bright and saturated */
.axeman-part.leg-left,
.axeman-part.leg-right {
    fill: #a855f7;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.5));
}

.axeman-part.arm-left,
.axeman-part.arm-right {
    fill: #3b82f6;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

.axeman-part.body {
    fill: #22c55e;
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
}

.axeman-part.head {
    fill: #f59e0b;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.5));
}

/* Hit state - bright red with glow */
.axeman-part.hit {
    fill: #ef4444 !important;
    opacity: 0.6;
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6));
}

/* Next target - pulsing highlight to show which part will be hit next */
.axeman-part.next-target {
    stroke: #fff;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    animation: nextTargetPulse 1.5s ease-in-out infinite;
}

@keyframes nextTargetPulse {
    0%, 100% { stroke-width: 4; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); }
    50% { stroke-width: 6; filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)); }
}

.axeman-part.hit-animation {
    animation: partHitFlash 0.6s ease-out;
}

@keyframes partHitFlash {
    0% { fill: #fff; transform: scale(1.2); }
    50% { fill: #e74c3c; }
    100% { fill: #e74c3c; transform: scale(1); }
}

/* Axeman Board Scoreboard */
.axeman-board-scoreboard {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 1.5rem;
    min-width: 50vw;
}

.axeman-board-status {
    text-align: center;
    margin-bottom: 1rem;
}

.axeman-phase-message {
    font-size: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.axeman-phase-message.throw-pending {
    color: #e74c3c;
    animation: throwPending 1s ease-in-out infinite;
}

.axeman-phase-message.guessing {
    color: #3498db;
}

@keyframes throwPending {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.axeman-words-display {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.axeman-word-box {
    text-align: center;
}

.axeman-word-player {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.axeman-word-masked {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.axeman-letter {
    font-size: 2rem;
    font-weight: bold;
    font-family: monospace;
    width: 2.5rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border-bottom: 3px solid rgba(255, 255, 255, 0.3);
}

.axeman-letter.hidden {
    color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.axeman-letter.revealed {
    color: #2ecc71;
    border-bottom-color: #2ecc71;
}

.axeman-last-guess {
    text-align: center;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 1.2rem;
}

.axeman-last-guess.correct {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.axeman-last-guess.incorrect {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.axeman-last-guess .letter {
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0 0.5rem;
}

/* Axeman Player Overlay */
.axeman-overlay {
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem 2rem;
    border-radius: 12px;
}

.axeman-throwing {
    color: #e74c3c;
}

/* Axeman Scoring Page Styles */
.axeman-scoreboard .axeman-player-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.axeman-player-card .player-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.axeman-player-card.guessing {
    border-color: #3498db;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.3);
}

.axeman-player-card.throwing {
    border-color: #e74c3c;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
}

.axeman-player-card.winner {
    border-color: #f1c40f;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.4);
}

.axeman-player-card.eliminated {
    opacity: 0.5;
}

.axeman-player-card .turn-indicator {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.axeman-player-card .turn-indicator.throwing {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.axeman-player-card .winner-badge {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    color: #f1c40f;
}

.axeman-player-card .team-members {
    font-size: 0.85rem;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 0.5rem;
}

.axeman-player-card.red {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.15);
}

.axeman-player-card.blue {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.15);
}

/* Mini Axeman Figure for Scoreboard */
.axeman-mini-figure {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

.mini-figure {
    width: 60px;
    height: 90px;
}

.mini-figure ellipse,
.mini-figure circle {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
}

.mini-figure .intact {
    fill: #27ae60;
}

.mini-figure .hit {
    fill: #e74c3c;
    opacity: 0.5;
}

.parts-hit-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Axeman Word Entry */
.axeman-word-entry {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.word-input-container input {
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
}

/* Axeman Guessing Keyboard */
.axeman-guessing {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.axeman-word-display {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.axeman-letter-box {
    width: 3rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    font-family: monospace;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border-bottom: 4px solid rgba(255, 255, 255, 0.3);
}

.axeman-letter-box.hidden {
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.axeman-letter-box.revealed {
    color: #2ecc71;
    border-bottom-color: #2ecc71;
}

.axeman-keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.keyboard-row {
    display: flex;
    gap: 0.4rem;
}

.keyboard-key {
    width: 2.5rem;
    height: 3rem;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.keyboard-key:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.keyboard-key:active:not(:disabled) {
    transform: translateY(0);
}

.keyboard-key.used {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

.axeman-solve-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.solve-input-container input {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
}

/* Axeman Throw Buttons */
.axeman-throw-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.axeman-throw-btn {
    width: 100%;
    padding: 2rem 1rem;
    border: none;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.axeman-throw-btn.hit {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
}

.axeman-throw-btn.hit:hover:not(:disabled) {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.4);
}

.axeman-throw-btn.miss {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.axeman-throw-btn.miss:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.02);
}

.axeman-throw-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.axeman-body-parts-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.body-part-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.body-part-indicator.intact {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.body-part-indicator.hit {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

/* Axeman Settings */
.axeman-settings .stat-box {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
}

.axeman-settings .stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: #3498db;
}

.axeman-settings .stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ===== QUIZ GAME STYLES ===== */

/* Quiz Board Layout - Horizontal with sidebar */
.quiz-board-layout {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 2rem;
    gap: 2rem;
}

.quiz-main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-sidebar {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Quiz Current Turn Box */
.quiz-current-turn {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.quiz-current-turn .turn-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.quiz-current-turn .turn-player {
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
}

/* Quiz Question Container */
.quiz-board-container {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 900px;
    width: 100%;
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.quiz-subject-badge {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quiz-question-counter {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    font-weight: 500;
}

.quiz-board-container .quiz-question-text {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Quiz Answers Grid */
.quiz-board-container .quiz-answers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.quiz-board-container .quiz-answer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.quiz-board-container .quiz-answer.eliminated {
    background: rgba(100, 100, 100, 0.2);
    opacity: 0.4;
}

.quiz-board-container .quiz-answer.eliminated .quiz-answer-letter {
    background: #666 !important;
}

.quiz-board-container .quiz-answer.correct {
    background: rgba(46, 204, 113, 0.3);
    border-color: #2ecc71;
    animation: correct-pulse 1s ease infinite;
}

@keyframes correct-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
    50% { box-shadow: 0 0 20px 10px rgba(46, 204, 113, 0.3); }
}

.quiz-board-container .quiz-answer-letter {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.quiz-board-container .quiz-answer.answer-a .quiz-answer-letter { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }
.quiz-board-container .quiz-answer.answer-b .quiz-answer-letter { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
.quiz-board-container .quiz-answer.answer-c .quiz-answer-letter { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); }
.quiz-board-container .quiz-answer.answer-d .quiz-answer-letter { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); }

.quiz-board-container .quiz-answer-text {
    font-size: 1.4rem;
    color: white;
    line-height: 1.3;
}

.quiz-waiting {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.7);
}

.quiz-waiting p {
    font-size: 1.2rem;
    margin-top: 1rem;
}

/* Quiz Board Scoreboard */
.quiz-board-scoreboard {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 1.5rem;
}

.quiz-scoreboard-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quiz-players-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-player-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.quiz-player-score.current-player {
    background: rgba(155, 89, 182, 0.3);
    border-left: 4px solid #9b59b6;
}

.quiz-player-score .player-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: white;
}

.quiz-player-score .player-score {
    font-size: 1.3rem;
    font-weight: bold;
}

.quiz-player-score .player-score.positive { color: #2ecc71; }
.quiz-player-score .player-score.negative { color: #e74c3c; }

/* Quiz Player Overlay */
.quiz-overlay {
    background: rgba(155, 89, 182, 0.9) !important;
}

/* Quiz Scoring Page Styles */
.quiz-scoreboard-mini {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
}

.quiz-player-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    min-width: 100px;
    text-align: center;
    transition: all 0.3s ease;
}

.quiz-player-card.active {
    background: rgba(155, 89, 182, 0.4);
    border: 2px solid #9b59b6;
    transform: scale(1.05);
}

.quiz-player-card .player-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
    margin-bottom: 0.25rem;
}

.quiz-player-card .player-score {
    font-size: 1.2rem;
    font-weight: bold;
}

.quiz-progress {
    font-size: 0.85rem;
}

/* Quiz Answer Buttons */
.quiz-answer-buttons {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.quiz-current-player {
    text-align: center;
    font-size: 1.2rem;
    color: white;
}

.quiz-question-mini {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.quiz-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quiz-answer-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
}

.quiz-answer-btn .answer-letter {
    font-size: 1.5rem;
    font-weight: bold;
}

.quiz-answer-btn .answer-text {
    font-size: 0.9rem;
    opacity: 0.9;
}

.quiz-answer-btn.answer-a {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.quiz-answer-btn.answer-b {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.quiz-answer-btn.answer-c {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.quiz-answer-btn.answer-d {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.quiz-answer-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.quiz-answer-btn:disabled {
    background: #6c757d;
    opacity: 0.5;
    cursor: not-allowed;
}

.quiz-miss-section .btn {
    padding: 1rem;
    font-size: 1.1rem;
}

/* Quiz Result Feedback */
.quiz-result-feedback {
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    animation: result-pop 0.3s ease;
}

@keyframes result-pop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.quiz-result-feedback.result-correct {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.quiz-result-feedback.result-wrong {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.quiz-result-feedback.result-miss {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
    border: 1px solid #f1c40f;
}

/* Quiz Game Settings */
.quiz-game-settings .stat-box {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
}

.quiz-game-settings .stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: #9b59b6;
}

.quiz-game-settings .stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Quiz Board Status */
.quiz-question-counter {
    text-align: center;
    margin-bottom: 1rem;
}

.quiz-question-counter .badge {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}