* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0b14;
    min-height: 100vh;
    padding: 20px;
    color: #e8eaed;
    position: relative;
    overflow-x: hidden;
}

/* Animated Background - Gradient Blur Effects */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.02;
    background-image: 
        linear-gradient(180deg, rgba(99, 102, 241, 0.5) 0.11%, rgba(0, 0, 0, 0) 0.11%),
        linear-gradient(90deg, rgba(99, 102, 241, 0.5) 0%, rgba(0, 0, 0, 0) 0%);
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: 
        radial-gradient(circle at -191px -191px, rgba(99, 102, 241, 0.2) 0%, transparent 50%),
        radial-gradient(circle at calc(100% - 235px) 292px, rgba(173, 70, 255, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 393px 609px, rgba(246, 51, 154, 0.2) 0%, transparent 50%);
    filter: blur(80px);
    opacity: 0.3;
}

/* Entry Screen Overlay */
.entry-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0b14;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease;
    padding-top: 40px;
    padding-bottom: 50px; /* Space for bottom anchor ad */
    overflow-y: auto;
}

.entry-content {
    position: relative;
    background: rgba(26, 27, 40, 0.7);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 500px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.entry-content h1 {
    color: #e8eaed;
    margin-bottom: 10px;
    font-size: 2.5em;
    font-weight: 600;
}

.entry-title-glossy {
    font-size: 3.8em;
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #6366f1 0%, #a78bfa 40%, #e0e7ff 55%, #a78bfa 70%, #6366f1 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glossyShine 4s ease-in-out infinite;
    margin-top: 20px;
    margin-bottom: 36px;
}

@keyframes glossyShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.entry-subtitle {
    color: #8b8d98;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.mobile-warning {
    margin-top: 20px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
}

.mobile-warning-text {
    color: #888888;
    font-size: 0.8em;
    line-height: 1.4;
    margin: 0;
    font-style: italic;
}

.mobile-warning-text strong {
    color: #a0a0a0;
    font-style: normal;
}

.entry-intro-link {
    margin-bottom: 25px;
}

.intro-button {
    padding: 10px 20px;
    font-size: 1em;
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.intro-button:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.intro-button:active {
    transform: translateY(0);
}

.intro-modal-content {
    max-width: 800px;
    max-height: 95vh;
}

.intro-modal-body {
    max-height: calc(95vh - 60px);
    overflow-y: auto;
    padding-bottom: 20px;
}

/* Combined tutorial - fits on screen without scrolling */
.intro-modal-body:has(.combined-tutorial) {
    overflow: hidden;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    height: calc(80vh - 60px);
}

/* Quick tutorial - fits on screen without scrolling */
.intro-modal-body:has(.quick-tutorial) {
    overflow: hidden;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(85vh - 100px);
}

.interactive-tutorial.quick-tutorial {
    min-height: auto;
    height: auto;
    max-height: 100%;
}

/* Interactive Tutorial Styles */
.interactive-tutorial {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 500px;
}

/* Combined tutorial - compact layout with keyboard at bottom */
.interactive-tutorial.combined-tutorial {
    min-height: auto;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Top section (progress + content) - takes available space */
.combined-tutorial-top {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Bottom section (keyboard + navigation) - always at bottom */
.combined-tutorial-bottom {
    flex: 0 0 auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-progress {
    margin-bottom: 20px;
    padding: 15px 0;
}

.combined-tutorial .tutorial-progress {
    margin-bottom: 2px;
    padding: 2px 0;
    flex: 0 0 auto;
}

.tutorial-step-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.combined-tutorial .tutorial-step-indicator {
    gap: 4px;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(139, 141, 152, 0.3);
    border: 2px solid rgba(139, 141, 152, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.combined-tutorial .step-dot {
    width: 6px;
    height: 6px;
    border-width: 1px;
}

.step-dot.active {
    background: #6366f1;
    border-color: #6366f1;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.tutorial-content {
    flex: 1;
    min-height: 400px;
    padding: 20px 0 40px 0;
}

.combined-tutorial .tutorial-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 5px 0;
    overflow-y: auto;
}

.tutorial-step-title {
    color: #6366f1;
    font-size: 1.8em;
    margin-bottom: 20px;
    text-align: center;
}

.combined-tutorial .tutorial-step-title {
    font-size: 1.1em;
    margin-bottom: 4px;
}

.tutorial-step-content {
    color: #e8eaed;
    line-height: 1.6;
}

.tutorial-step-content p {
    margin-bottom: 15px;
}

.combined-tutorial .tutorial-step-content {
    line-height: 1.4;
    font-size: 0.95em;
}

.combined-tutorial .tutorial-step-content p {
    margin-bottom: 8px;
}

/* Scoring Summary responsive styling */
.tutorial-scoring-summary {
    font-size: 0.85em;
}

.tutorial-scoring-summary .scoring-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
    line-height: 1.4;
}

.tutorial-scoring-summary .scoring-label {
    font-weight: 600;
    flex-shrink: 0;
}

.tutorial-scoring-summary .scoring-value {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

/* Smaller screens - more compact scoring summary */
@media screen and (max-height: 750px) {
    body.is-capacitor .tutorial-scoring-summary {
        font-size: 0.75em;
    }

    body.is-capacitor .tutorial-scoring-summary .scoring-row {
        margin: 3px 0;
    }
}

@media screen and (max-height: 670px) {
    body.is-capacitor .tutorial-scoring-summary {
        font-size: 0.7em;
    }

    body.is-capacitor .tutorial-scoring-summary .scoring-row {
        margin: 2px 0;
    }
}

.tutorial-keyboard-demo {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.tutorial-keyboard {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    background: rgba(26, 27, 40, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Grid lines for tutorial keyboard - using SVG overlay */
.tutorial-keyboard-with-grid {
    position: relative;
}

.tutorial-grid-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tutorial-key-row {
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* For demo keyboards in info slides - QWERTY stagger layout */
.tutorial-keyboard .tutorial-key-row-1 {
    padding-left: 0;
    justify-content: flex-start;
}

.tutorial-keyboard .tutorial-key-row-2 {
    padding-left: 0;
    justify-content: flex-start;
}

.tutorial-keyboard .tutorial-key-row-3 {
    padding-left: 12px;
    justify-content: flex-start;
}

/* For interactive keyboard - match actual gameplay keyboard layout */
.tutorial-interactive-keyboard .tutorial-key-row {
    display: flex;
    gap: 3px;
    width: 100%;
    justify-content: center;
    padding: 0 2px;
}

/* Tutorial keyboard - QWERTY stagger layout matching gameplay keyboard */
.tutorial-interactive-keyboard .tutorial-key-row-1 {
    /* Top row (QWERTYUIOP) - 10 keys, centered */
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.tutorial-interactive-keyboard .tutorial-key-row-2 {
    /* Middle row (ASDFGHJKL) - 9 keys, slightly inset for stagger */
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
}

.tutorial-interactive-keyboard .tutorial-key-row-3 {
    /* Bottom row (ZXCVBNM) - 7 keys, B should be under G */
    justify-content: center;
    padding-left: 5%;
    padding-right: 18%;
}

.tutorial-key {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(106, 114, 130, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #8b8d98;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tutorial-key-left {
    background: rgba(99, 102, 241, 0.4);
    border-color: rgba(99, 102, 241, 0.6);
    color: #a5b4fc;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

.tutorial-key-right {
    background: rgba(246, 51, 154, 0.4);
    border-color: rgba(246, 51, 154, 0.6);
    color: #f9a8d4;
    box-shadow: 0 0 10px rgba(246, 51, 154, 0.3);
}

.tutorial-key-mirror {
    background: rgba(99, 102, 241, 0.5);
    border-color: #6366f1;
    color: #c7d2fe;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    transform: scale(1.1);
}

.tutorial-key-column {
    background: rgba(99, 102, 241, 0.5);
    border-color: #6366f1;
    color: #c7d2fe;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    transform: scale(1.1);
}

.tutorial-key-row-highlight {
    background: rgba(99, 102, 241, 0.5);
    border-color: #6366f1;
    color: #c7d2fe;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    transform: scale(1.1);
}

.tutorial-key-diagonal {
    background: rgba(99, 102, 241, 0.5);
    border-color: #6366f1;
    color: #c7d2fe;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    transform: scale(1.1);
}

/* Handbook - single scrollable page, one scroll on the outer .modal-content */
.intro-modal-content:has(.tutorial-handbook) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.intro-modal-body:has(.tutorial-handbook) {
    overflow-y: visible;
    overflow: visible;
    max-height: none;
}

.tutorial-handbook {
    padding: 5px 15px 20px;
    color: #e8eaed;
    line-height: 1.6;
    overflow-x: hidden;
}

.tutorial-handbook h2 {
    color: #6366f1;
    font-size: 1.4em;
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
}

.tutorial-handbook h2:first-child {
    margin-top: 0;
}

.tutorial-handbook p {
    margin-bottom: 10px;
    font-size: 0.95em;
}

.tutorial-handbook .handbook-keyboard-demo {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    overflow: hidden;
}

/* Smaller keys for handbook keyboard to fit phone screens */
.tutorial-handbook .tutorial-keyboard {
    padding: 12px 8px;
    gap: 4px;
}

.tutorial-handbook .tutorial-key {
    width: 26px;
    height: 26px;
    font-size: 0.7em;
    border-radius: 4px;
}

.tutorial-handbook .tutorial-key-row {
    gap: 3px;
}

.tutorial-handbook .tutorial-key-row-3 {
    padding-left: 8px;
}

/* Neutral keyboard guide colors for handbook */
.tutorial-key-left-neutral {
    background: linear-gradient(145deg, #3d4654, #2d343f);
    border: 1px solid rgba(100, 116, 139, 0.6);
    color: #94a3b8;
}

.tutorial-key-right-neutral {
    background: linear-gradient(145deg, #4a4540, #3a3632);
    border: 1px solid rgba(120, 113, 108, 0.6);
    color: #a8a29e;
}

/* Handbook grid lines - match gameplay dotted style */
.tutorial-handbook .tutorial-keyboard {
    position: relative;
}

.handbook-grid-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.tutorial-handbook .close-handbook-btn {
    display: block;
    margin: 25px auto 0;
    padding: 12px 40px;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
}

.tutorial-handbook .handbook-legend {
    text-align: center;
    font-size: 0.8em;
    color: #8b8d98;
    margin-top: 8px;
}

.tutorial-handbook .goal-icon {
    margin-right: 4px;
}

.tutorial-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.combined-tutorial .tutorial-navigation {
    margin-top: 5px;
    padding-top: 5px;
    flex-shrink: 0;
}

/* Quick Tutorial Styles */
.quick-tutorial {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 100%;
    overflow: hidden;
}

.quick-tutorial-top {
    flex: 0 0 auto;
    padding: 2px 0 4px 0;
    max-height: 30vh;
    overflow-y: auto;
}

.quick-tutorial-bottom {
    flex: 0 0 auto;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.quick-tutorial .tutorial-keyboard-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

.quick-tutorial .tutorial-step-title {
    font-size: 1.05em;
    margin-bottom: 4px;
    color: #6366f1;
}

.quick-tutorial .tutorial-step-content {
    font-size: 0.85em;
    line-height: 1.35;
}

.quick-tutorial .tutorial-step-content p {
    margin-bottom: 4px;
}

.quick-tutorial .tutorial-step-content ul {
    margin: 4px 0;
    line-height: 1.4;
}

.quick-tutorial .tutorial-step-content li {
    margin-bottom: 1px;
    font-size: 0.95em;
}

.quick-tutorial .tutorial-navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 6px 0 2px 0;
}

.quick-tutorial .tutorial-practice-section {
    padding: 4px 0;
}

.quick-tutorial .tutorial-practice-hint {
    font-size: 0.95em;
    margin-bottom: 2px;
}

.quick-tutorial .tutorial-typed-word {
    font-size: 1.2em;
    min-height: 22px;
    letter-spacing: 2px;
}

.quick-tutorial .tutorial-practice-status {
    font-size: 0.85em;
    min-height: 18px;
}

.quick-tutorial .tutorial-progress {
    margin-bottom: 2px;
    padding: 0;
}

.quick-tutorial .step-dot {
    width: 7px;
    height: 7px;
    border-width: 1px;
}

.quick-tutorial .tutorial-scoring-summary {
    font-size: 0.8em;
}

.quick-tutorial .tutorial-scoring-summary .scoring-row {
    margin: 3px 0;
}

/* Keyboard for quick tutorial - normal size */
.quick-tutorial .tutorial-interactive-keyboard {
    transform: none;
    margin: 0;
}

.quick-tutorial .tutorial-int-key {
    /* All keys same width - matching gameplay keyboard */
    width: 34px;
    height: 38px;
    font-size: 0.9em;
}

/* All rows have same key width, stagger is handled by row padding */
.quick-tutorial .tutorial-key-row-1 .tutorial-int-key {
    width: 34px;
    height: 38px;
}

/* Hand divider line for symmetry tutorial - SVG-based for diagonal path */
.tutorial-hand-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.tutorial-hand-divider svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tutorial-hand-divider-line {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2;
    stroke-dasharray: 4, 4;
    fill: none;
}

/* Star pulse animation for priority goals */
@keyframes starPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
        text-shadow: 0 0 15px rgba(251, 191, 36, 1);
    }
}

.quick-finish-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.tutorial-btn-practice {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 14px 24px;
    font-size: 1.1em;
    border-radius: 10px;
}

.tutorial-btn-practice:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.tutorial-btn-menu {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e8eaed;
    padding: 12px 20px;
}

.tutorial-btn-menu:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Quick tutorial keyboard highlight for row */
.tutorial-int-key.highlight-row {
    background: rgba(34, 197, 94, 0.4) !important;
    border-color: rgba(34, 197, 94, 0.6) !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.tutorial-btn {
    padding: 12px 24px;
    font-size: 1em;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    /* Changed from 'all' to specific properties to prevent freeze */
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.combined-tutorial .tutorial-btn {
    padding: 8px 16px;
    font-size: 0.9em;
}

.quick-tutorial .tutorial-btn {
    padding: 10px 20px;
    font-size: 0.9em;
}

.tutorial-btn-prev {
    background: rgba(139, 141, 152, 0.2);
    color: #8b8d98;
    border: 1px solid rgba(139, 141, 152, 0.3);
}

.tutorial-btn-prev:hover {
    background: rgba(139, 141, 152, 0.3);
    border-color: rgba(139, 141, 152, 0.5);
}

.tutorial-btn-next {
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    margin-left: auto;
}

.tutorial-btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.tutorial-btn-finish {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    margin-left: auto;
}

.tutorial-btn-finish:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

/* Combined Tutorial Styles */
.combined-tutorial .tutorial-progress-text {
    text-align: center;
    color: #8b8d98;
    font-size: 0.75em;
    margin-top: 2px;
}

.tutorial-practice-section {
    margin: 20px 0;
    padding: 20px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.tutorial-practice-input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tutorial-practice-input {
    width: 100%;
    max-width: 300px;
    padding: 15px 20px;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 10px;
    background: rgba(26, 27, 40, 0.8);
    color: #e8eaed;
    transition: all 0.3s ease;
}

.tutorial-practice-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

.tutorial-practice-input::placeholder {
    color: #6a6c7a;
    font-size: 0.7em;
    letter-spacing: 1px;
    text-transform: none;
}

.tutorial-practice-input:disabled {
    background: rgba(39, 174, 96, 0.2);
    border-color: #27ae60;
}

.tutorial-practice-status {
    font-size: 1em;
    font-weight: 500;
    min-height: 24px;
}

/* Tutorial Practice Hint (shown above keyboard) */
.tutorial-practice-hint {
    font-size: 1.3em;
    font-weight: 600;
    color: #e8eaed;
    text-align: center;
    margin-bottom: 5px;
}

.tutorial-practice-hint strong {
    color: #6366f1;
}

/* Typed Word Display */
.tutorial-typed-word {
    font-size: 1.8em;
    font-weight: 700;
    letter-spacing: 4px;
    color: #27ae60;
    text-align: center;
    min-height: 40px;
    font-family: 'Monaco', 'Consolas', monospace;
}

/* Combined tutorial practice section - compact */
.combined-tutorial .tutorial-practice-section {
    padding: 8px 10px;
    margin: 5px 0;
    flex: 0 0 auto;
}

.combined-tutorial .tutorial-practice-hint {
    font-size: 1em;
    margin-bottom: 2px;
}

.combined-tutorial .tutorial-typed-word {
    font-size: 1.3em;
    min-height: 26px;
}

.combined-tutorial .tutorial-practice-status {
    font-size: 0.85em;
    min-height: 16px;
}

/* Tutorial Keyboard Section */
.tutorial-keyboard-section {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

.combined-tutorial .tutorial-keyboard-section {
    margin: 3px 0;
    flex-shrink: 0;
}

/* Interactive Tutorial Keyboard */
.tutorial-interactive-keyboard {
    position: relative; /* Required for hand divider absolute positioning */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px;
    background: rgba(26, 27, 40, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 390px;
}

.tutorial-int-key {
    flex: 1;
    max-width: 36px;
    height: 44px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(106, 114, 130, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e8eaed;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    /* Removed transition: all - was causing browser freeze */
    transition: transform 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tutorial-int-key:active,
.tutorial-int-key.pressed {
    transform: scale(0.95);
    background: rgba(99, 102, 241, 0.4);
}

/* Used keys (accumulated through tutorial) */
.tutorial-int-key.used {
    background: rgba(39, 174, 96, 0.4);
    border-color: rgba(39, 174, 96, 0.6);
    color: #a8e6cf;
}

/* Glow effect for keys to type */
.tutorial-int-key.glow {
    animation: tutorialKeyGlow 1s ease-in-out infinite;
    border-color: #6366f1;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
}

@keyframes tutorialKeyGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
}

/* Tutorial Goal Completion Animation */
.tutorial-goal-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    display: none;
}

.tutorial-goal-animation.active {
    display: block;
}

/* Fix for iOS/Capacitor - ensure animation shows above modal */
body.is-capacitor .tutorial-goal-animation {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.5);
}

body.is-capacitor .tutorial-goal-animation.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.is-capacitor .tutorial-goal-popup {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 0;
}

body.is-capacitor .tutorial-goal-popup.animating {
    animation: goalPopupInMobile 0.6s ease-out forwards !important;
}

body.is-capacitor .tutorial-goal-popup.flying {
    animation: goalFadeOutMobile 0.5s ease-in forwards !important;
}

@keyframes goalPopupInMobile {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    70% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

.tutorial-goal-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(26, 27, 40, 0.95);
    border-radius: 20px;
    padding: 25px 35px;
    border: 2px solid;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.tutorial-goal-popup.animating {
    animation: goalPopupIn 0.5s ease forwards;
}

.tutorial-goal-popup.flying {
    animation: goalFlyToSide 0.8s ease-in-out forwards;
}

/* Icon container with ring */
.tutorial-goal-icon-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-goal-icon {
    font-size: 2.5em;
    line-height: 1;
    z-index: 2;
}

/* Ring SVG around icon */
.tutorial-goal-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.tutorial-goal-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 4;
}

.tutorial-goal-ring-fill {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    transition: stroke-dashoffset 0.8s ease-out;
}

.tutorial-goal-popup.animating .tutorial-goal-ring-fill {
    animation: ringFill 0.8s ease-out 0.3s forwards;
}

@keyframes ringFill {
    0% { stroke-dashoffset: 226; }
    100% { stroke-dashoffset: 0; }
}

/* Sparkles */
.tutorial-goal-sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
}

.tutorial-goal-popup.animating .sparkle {
    animation: sparkle 0.6s ease-out forwards;
}

.sparkle:nth-child(1) { top: 0; left: 50%; animation-delay: 0.4s; }
.sparkle:nth-child(2) { top: 15%; left: 85%; animation-delay: 0.45s; }
.sparkle:nth-child(3) { top: 50%; left: 100%; animation-delay: 0.5s; }
.sparkle:nth-child(4) { top: 85%; left: 85%; animation-delay: 0.55s; }
.sparkle:nth-child(5) { top: 100%; left: 50%; animation-delay: 0.6s; }
.sparkle:nth-child(6) { top: 85%; left: 15%; animation-delay: 0.65s; }
.sparkle:nth-child(7) { top: 50%; left: 0; animation-delay: 0.7s; }
.sparkle:nth-child(8) { top: 15%; left: 15%; animation-delay: 0.75s; }

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

.tutorial-goal-name {
    font-size: 1.2em;
    font-weight: 700;
    color: #e8eaed;
    text-align: center;
}

.tutorial-goal-desc {
    font-size: 0.9em;
    color: #8b8d98;
    text-align: center;
}

/* Goal-specific colors */
.tutorial-goal-popup.symmetry {
    border-color: #6366f1;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
}
.tutorial-goal-popup.symmetry .tutorial-goal-ring-fill { stroke: #6366f1; }
.tutorial-goal-popup.symmetry .sparkle { background: #6366f1; box-shadow: 0 0 6px #6366f1; }

.tutorial-goal-popup.column {
    border-color: #8b5cf6;
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.4);
}
.tutorial-goal-popup.column .tutorial-goal-ring-fill { stroke: #8b5cf6; }
.tutorial-goal-popup.column .sparkle { background: #8b5cf6; box-shadow: 0 0 6px #8b5cf6; }

.tutorial-goal-popup.row {
    border-color: #ec4899;
    box-shadow: 0 10px 40px rgba(236, 72, 153, 0.4);
}
.tutorial-goal-popup.row .tutorial-goal-ring-fill { stroke: #ec4899; }
.tutorial-goal-popup.row .sparkle { background: #ec4899; box-shadow: 0 0 6px #ec4899; }

.tutorial-goal-popup.balance {
    border-color: #f59e0b;
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.4);
}
.tutorial-goal-popup.balance .tutorial-goal-ring-fill { stroke: #f59e0b; }
.tutorial-goal-popup.balance .sparkle { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }

.tutorial-goal-popup.diagonal {
    border-color: #10b981;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.4);
}
.tutorial-goal-popup.diagonal .tutorial-goal-ring-fill { stroke: #10b981; }
.tutorial-goal-popup.diagonal .sparkle { background: #10b981; box-shadow: 0 0 6px #10b981; }

@keyframes goalPopupIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes goalFlyToSide {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-150%, -50%) scale(0.3);
        opacity: 0;
    }
}

/* Tutorial Goals Preview Panel */
.tutorial-goals-preview {
    display: none;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 6px 0;
    width: 100%;
}

.tutorial-goal-mini {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    background: rgba(45, 45, 68, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.tutorial-goal-mini.completed {
    animation: goalMiniComplete 0.5s ease forwards;
}

@keyframes goalMiniComplete {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); border-color: #27ae60; background: rgba(39, 174, 96, 0.3); }
}

/* Horizontal Goals Row for Priority Goals Page */
.tutorial-goals-horizontal {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 15px 10px;
    margin-top: 10px;
    background: rgba(30, 30, 45, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-goal-h {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    background: rgba(45, 45, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

/* Priority Goal Indicators - Gameplay-matching glow */
.tutorial-goal-h.priority-goal {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 165, 0, 0.2) 100%);
    animation: tutorialPriorityGlow 2s ease-in-out infinite;
}

.tutorial-goal-h.priority-goal::after {
    content: '⭐';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.7em;
    animation: tutorialStarPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
    z-index: 10;
}

.tutorial-goal-mini.priority-goal {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 165, 0, 0.2) 100%);
    position: relative;
    animation: tutorialPriorityGlow 2s ease-in-out infinite;
}

.tutorial-goal-mini.priority-goal::after {
    content: '⭐';
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.6em;
    animation: tutorialStarPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
    z-index: 10;
}

.tutorial-goal-block.priority-goal {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.1) 100%);
    position: relative;
    animation: tutorialPriorityGlow 2s ease-in-out infinite;
}

.tutorial-goal-block.priority-goal::before {
    content: '⭐ Priority';
    position: absolute;
    top: -8px;
    right: 8px;
    font-size: 0.65em;
    color: #ffd700;
    background: rgba(30, 30, 45, 0.95);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.tutorial-goal-block.priority-goal .tutorial-goal-title {
    color: #ffd700;
}

/* Gameplay-matching glow animation */
@keyframes tutorialPriorityGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.4),
                    0 0 16px rgba(255, 165, 0, 0.2),
                    inset 0 0 8px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6),
                    0 0 25px rgba(255, 165, 0, 0.35),
                    inset 0 0 12px rgba(255, 215, 0, 0.15);
    }
}

@keyframes tutorialStarPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.15) rotate(10deg);
    }
}

/* Desktop Goal Blocks - Hidden by default, shown on desktop web only */
.tutorial-goals-desktop {
    display: none;
}

/* Native app: ALWAYS use mobile mini icons, never desktop blocks */
body.is-capacitor .tutorial-goals-desktop {
    display: none !important;
}

/* Goals mobile panel visibility is controlled via JS style.display */


/* Native app: Tutorial keyboard adjustments to match gameplay keyboard layout */
/* Matching the mobile-keyboard styles for consistency */
body.is-capacitor .combined-tutorial .tutorial-interactive-keyboard {
    padding: 4px 2px !important;
    gap: 5px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
}

body.is-capacitor .combined-tutorial .tutorial-int-key {
    /* Match mobile-key sizing */
    flex: 1 !important;
    max-width: 36px !important;
    height: 44px !important;
    font-size: 0.95em !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
}

body.is-capacitor .combined-tutorial .tutorial-key-row {
    gap: 3px !important;
    justify-content: center !important;
    padding: 0 2px !important;
    width: 100% !important;
}

body.is-capacitor .combined-tutorial .tutorial-key-row-1 {
    /* Top row (QWERTYUIOP) - 10 keys, centered */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.is-capacitor .combined-tutorial .tutorial-key-row-2 {
    /* Middle row (ASDFGHJKL) - 9 keys, slightly inset to create stagger effect */
    padding-left: 5% !important;
    padding-right: 5% !important;
}

body.is-capacitor .combined-tutorial .tutorial-key-row-3 {
    /* Bottom row (ZXCVBNM) - 7 keys, B should be under G */
    padding-left: 5% !important;
    padding-right: 18% !important;
}

body.is-capacitor .combined-tutorial .tutorial-key-row-3 .tutorial-int-key {
    /* Same size as other rows for consistent tap targets */
    max-width: 36px !important;
    height: 44px !important;
}

/* Desktop web (non-native): show goal blocks, hide mini icons */
@media screen and (min-width: 768px) {
    /* Only apply on non-native web (body without is-capacitor class) */
    body:not(.is-capacitor) .combined-tutorial .tutorial-goals-mobile {
        display: none !important;
    }

    /* Desktop goal blocks - positioned in grid */
    body:not(.is-capacitor) .tutorial-goals-desktop {
        display: flex;
        flex-direction: column;
        gap: 6px;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    body:not(.is-capacitor) .tutorial-goals-desktop.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .tutorial-goal-block {
        background: rgba(45, 46, 64, 0.5);
        border-radius: 8px;
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }

    .tutorial-goal-header {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 2px;
    }

    .tutorial-goal-checkbox {
        font-size: 0.75em;
        color: #666;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .tutorial-goal-title {
        font-size: 0.7em;
        font-weight: 600;
        color: #e8eaed;
    }

    .tutorial-goal-description {
        font-size: 0.6em;
        color: #8b8d98;
        line-height: 1.2;
    }

    /* Completed state for desktop goal blocks */
    .tutorial-goal-block.completed {
        background: rgba(39, 174, 96, 0.2);
        border-color: rgba(39, 174, 96, 0.5);
        box-shadow: 0 0 12px rgba(39, 174, 96, 0.3);
        animation: tutorialGoalBlockComplete 0.6s ease;
    }

    .tutorial-goal-block.completed .tutorial-goal-checkbox {
        color: #00bc7d;
        animation: tutorialCheckmarkPop 0.5s ease;
    }

    .tutorial-goal-block.completed .tutorial-goal-title {
        color: #00bc7d;
    }

    @keyframes tutorialGoalBlockComplete {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 rgba(39, 174, 96, 0);
        }
        30% {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(39, 174, 96, 0.6);
        }
        60% {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(39, 174, 96, 0.4);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 12px rgba(39, 174, 96, 0.3);
        }
    }

    @keyframes tutorialCheckmarkPop {
        0% { transform: scale(0); }
        50% { transform: scale(1.4); }
        100% { transform: scale(1); }
    }
}

/* Larger screens - slightly bigger goal blocks */
@media screen and (min-width: 1024px) {
    body:not(.is-capacitor) .tutorial-goal-block {
        padding: 10px 12px;
    }

    body:not(.is-capacitor) .tutorial-goal-title {
        font-size: 0.75em;
    }

    body:not(.is-capacitor) .tutorial-goal-description {
        font-size: 0.65em;
    }
}

/* Hand color highlights */
.tutorial-int-key.left-hand {
    background: rgba(99, 102, 241, 0.4);
    border-color: rgba(99, 102, 241, 0.6);
    color: #a5b4fc;
}

.tutorial-int-key.right-hand {
    background: rgba(246, 51, 154, 0.4);
    border-color: rgba(246, 51, 154, 0.6);
    color: #f9a8d4;
}

/* Special pattern highlights */
.tutorial-int-key.highlight-mirror {
    background: rgba(155, 89, 182, 0.5);
    border-color: #9b59b6;
    color: #d8b4fe;
    box-shadow: 0 0 12px rgba(155, 89, 182, 0.5);
}

.tutorial-int-key.highlight-column {
    background: rgba(52, 152, 219, 0.5);
    border-color: #3498db;
    color: #93c5fd;
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.5);
}

.tutorial-int-key.highlight-diagonal {
    background: rgba(241, 196, 15, 0.5);
    border-color: #f1c40f;
    color: #fef08a;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.5);
}

/* Combined states - used + glow */
.tutorial-int-key.used.glow {
    background: rgba(39, 174, 96, 0.5);
    animation: none;
}

/* Combined states - glow + pattern highlights */
.tutorial-int-key.glow.highlight-diagonal {
    background: rgba(241, 196, 15, 0.6);
    border-color: #f1c40f;
    border-width: 3px;
    color: #fef08a;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.7), inset 0 0 8px rgba(241, 196, 15, 0.3);
    animation: diagonalKeyGlow 1s ease-in-out infinite;
}

.tutorial-int-key.glow.highlight-column {
    background: rgba(52, 152, 219, 0.6);
    border-color: #3498db;
    border-width: 3px;
    color: #93c5fd;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.7), inset 0 0 8px rgba(52, 152, 219, 0.3);
    animation: columnKeyGlow 1s ease-in-out infinite;
}

.tutorial-int-key.glow.highlight-mirror {
    background: rgba(155, 89, 182, 0.6);
    border-color: #9b59b6;
    border-width: 3px;
    color: #d8b4fe;
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.7), inset 0 0 8px rgba(155, 89, 182, 0.3);
    animation: mirrorKeyGlow 1s ease-in-out infinite;
}

@keyframes diagonalKeyGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(241, 196, 15, 0.6), inset 0 0 6px rgba(241, 196, 15, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(241, 196, 15, 0.9), inset 0 0 10px rgba(241, 196, 15, 0.4);
    }
}

@keyframes columnKeyGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(52, 152, 219, 0.6), inset 0 0 6px rgba(52, 152, 219, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(52, 152, 219, 0.9), inset 0 0 10px rgba(52, 152, 219, 0.4);
    }
}

@keyframes mirrorKeyGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(155, 89, 182, 0.6), inset 0 0 6px rgba(155, 89, 182, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(155, 89, 182, 0.9), inset 0 0 10px rgba(155, 89, 182, 0.4);
    }
}

/* Combined states - used + pattern highlights (for showing patterns on already-typed keys) */
.tutorial-int-key.used.highlight-diagonal {
    background: rgba(241, 196, 15, 0.5);
    border-color: #f1c40f;
    border-width: 3px;
    color: #fef08a;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.5);
}

.tutorial-int-key.used.highlight-column {
    background: rgba(52, 152, 219, 0.5);
    border-color: #3498db;
    border-width: 3px;
    color: #93c5fd;
    box-shadow: 0 0 12px rgba(52, 152, 219, 0.5);
}

.tutorial-int-key.used.highlight-mirror {
    background: rgba(155, 89, 182, 0.5);
    border-color: #9b59b6;
    border-width: 3px;
    color: #d8b4fe;
    box-shadow: 0 0 12px rgba(155, 89, 182, 0.5);
}

.entry-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.entry-form label {
    font-size: 1.1em;
    color: #e8eaed;
    font-weight: bold;
}

#username-input {
    padding: 15px;
    font-size: 1.2em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s;
    background: #1a1b28;
    color: #e8eaed;
}

#username-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    background: #252538;
}

.start-button {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
}

.start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
}

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

.start-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Entry Screen Daily Leaderboard Preview */
.entry-leaderboard {
    display: block;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(26, 27, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    max-width: 350px;
    width: 100%;
}

.entry-leaderboard-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: margin-bottom 0.3s ease, padding-bottom 0.3s ease;
}

.entry-leaderboard-header.expanded {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.entry-leaderboard-icon {
    font-size: 1.2em;
}

.entry-leaderboard-title {
    font-size: 1em;
    font-weight: 600;
    color: #fbbf24;
}

.entry-leaderboard-chevron {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
    margin-left: 4px;
}

.entry-leaderboard-chevron.expanded {
    transform: rotate(180deg);
}

.entry-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    opacity: 1;
}

.entry-leaderboard-list.entry-leaderboard-list-collapsed {
    max-height: 0;
    opacity: 0;
}

.entry-leaderboard-loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    padding: 10px;
}

.entry-leaderboard-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    padding: 10px;
}

.entry-leaderboard-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    gap: 10px;
}

.entry-leaderboard-row:first-child {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.entry-leaderboard-row.entry-leaderboard-you {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.entry-leaderboard-separator {
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.85em;
    padding: 2px 0;
    letter-spacing: 3px;
}

.entry-leaderboard-rank {
    font-size: 1em;
    font-weight: 700;
    width: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.entry-leaderboard-row:first-child .entry-leaderboard-rank {
    color: #fbbf24;
}

.entry-leaderboard-name {
    flex: 1;
    font-size: 0.9em;
    color: #e8eaed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-leaderboard-score {
    font-size: 0.95em;
    font-weight: 600;
    color: #4ade80;
}

.entry-leaderboard-words {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.5);
    min-width: 45px;
    text-align: right;
}

/* Leaderboard realtime update flash */
@keyframes leaderboardPulse {
    0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    50% { box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

.leaderboard-updated {
    animation: leaderboardPulse 0.5s ease-out;
}

/* ============ Entry Stats Button ============ */

.entry-stats-button {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 24px;
    font-size: 0.95em;
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
    border: 1px solid rgba(129, 140, 248, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.entry-stats-button:hover {
    background: rgba(129, 140, 248, 0.25);
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, 0.5);
}

/* ============ Stats Dashboard ============ */

.stats-dashboard-section {
    margin: 20px 0;
}

.stats-dashboard {
    background: rgba(26, 27, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

.stats-header h3 {
    color: #818cf8;
    margin: 0 0 15px 0;
    font-size: 1.3em;
}

.stats-summary-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    gap: 10px;
}

.stats-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 10px 5px;
    background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.08) 100%);
    border: 1px solid rgba(129,140,248,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
}

.stats-summary-item .stats-value {
    font-size: 1.8em;
    font-weight: bold;
    color: #e8eaed;
    line-height: 1;
}

.stats-summary-item .stats-label {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.stats-scores-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    gap: 10px;
}

.stats-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 10px 5px;
    background: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(139,92,246,0.06) 100%);
    border: 1px solid rgba(129,140,248,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
}

.stats-score-item .stats-value {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
}

.stats-score-item .stats-label {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.stats-best .stats-value {
    color: #fbbf24;
}

.stats-avg .stats-value {
    color: #4ade80;
}

.stats-rank .stats-value {
    color: #818cf8;
}

.stats-history {
    max-height: 250px;
    overflow-y: auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.stats-history-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    background: rgba(26, 27, 40, 0.95);
}

.stats-history-header span {
    flex: 1;
    text-align: center;
}

.stats-history-header span:first-child {
    text-align: left;
}

.stats-history-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-history-row span {
    flex: 1;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.stats-history-row span:first-child {
    text-align: left;
    color: #e8eaed;
}

/* Backdrop-filter fallback */
@supports not (backdrop-filter: blur(8px)) {
    .stats-summary-item {
        background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(139,92,246,0.14) 100%);
    }
    .stats-score-item {
        background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.10) 100%);
    }
}

/* ============ Streak Flame ============ */

.streak-flame {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
}

.streak-flame-spark {
    font-size: 0.6em;
    opacity: 0.4;
    filter: grayscale(80%);
}

.streak-flame-small {
    font-size: 0.7em;
    opacity: 0.85;
    text-shadow: 0 0 4px rgba(251,191,36,0.4);
}

.streak-flame-medium {
    font-size: 0.8em;
    animation: flameGentleSway 2s ease-in-out infinite;
    text-shadow: 0 0 6px rgba(251,146,60,0.5);
}

.streak-flame-large {
    font-size: 0.9em;
    animation: flameFlicker 0.8s ease-in-out infinite alternate;
    text-shadow:
        0 0 8px rgba(251,146,60,0.7),
        0 0 16px rgba(239,68,68,0.4),
        0 -4px 12px rgba(251,191,36,0.3);
}

@keyframes flameGentleSway {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    25% { transform: translateY(-1px) scale(1.03) rotate(2deg); }
    50% { transform: translateY(-2px) scale(1.05) rotate(0deg); }
    75% { transform: translateY(-1px) scale(1.03) rotate(-2deg); }
}

@keyframes flameFlicker {
    0% { transform: translateY(0) scale(1) rotate(-2deg); }
    33% { transform: translateY(-2px) scale(1.08) rotate(2deg); }
    66% { transform: translateY(-1px) scale(1.04) rotate(-1deg); }
    100% { transform: translateY(-3px) scale(1.1) rotate(1deg); text-shadow: 0 0 12px rgba(251,146,60,0.9), 0 0 24px rgba(239,68,68,0.6), 0 -6px 16px rgba(251,191,36,0.5); }
}

/* ============ Streak Celebration Overlay ============ */

.streak-celebration-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 4000;
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.streak-celebration-overlay.active {
    background: rgba(0, 0, 0, 0.85);
    opacity: 1;
    pointer-events: auto;
}

.streak-celebration-overlay.fade-out {
    opacity: 0;
}

.streak-celebration-flame {
    font-size: 20px;
    opacity: 0;
    transform: scale(0.3);
    transition: none;
}

.streak-celebration-overlay.active .streak-celebration-flame {
    animation: flameBurst 0.8s ease-out forwards, flameDance 0.6s ease-in-out 0.8s infinite alternate;
}

.streak-celebration-text {
    font-size: 1.8em;
    font-weight: 800;
    color: #fbbf24;
    opacity: 0;
    margin-top: 16px;
    text-shadow: 0 0 20px rgba(251,191,36,0.5);
}

.streak-celebration-overlay.active .streak-celebration-text {
    animation: streakTextReveal 0.6s ease-out 0.5s forwards;
}

.streak-celebration-subtext {
    font-size: 1em;
    color: rgba(255,255,255,0.7);
    opacity: 0;
    margin-top: 8px;
}

.streak-celebration-overlay.active .streak-celebration-subtext {
    animation: streakTextReveal 0.5s ease-out 0.8s forwards;
}

.streak-celebration-glow {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,146,60,0.4) 0%, rgba(239,68,68,0.2) 40%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
}

.streak-celebration-overlay.active .streak-celebration-glow {
    animation: glowExpand 0.6s ease-out 0.1s forwards, glowPulse 0.8s ease-in-out 0.7s infinite alternate;
}

@keyframes flameBurst {
    0% {
        opacity: 0;
        transform: scale(0.2) translateY(40px);
        filter: brightness(0.3) saturate(0.5);
    }
    30% {
        opacity: 1;
        transform: scale(1.6) translateY(-15px);
        filter: brightness(2) saturate(1.5) hue-rotate(-15deg);
    }
    60% {
        transform: scale(0.9) translateY(5px);
        filter: brightness(1.1) saturate(1.2);
    }
    80% {
        transform: scale(1.2) translateY(-5px);
        filter: brightness(1.4) saturate(1.3) hue-rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
        filter: brightness(1.2) saturate(1.2);
        text-shadow: 0 0 30px rgba(251,146,60,0.8), 0 0 60px rgba(239,68,68,0.5), 0 0 80px rgba(168,85,247,0.3);
    }
}

@keyframes flameDance {
    0% {
        transform: scale(1.1) translateY(0) rotate(-3deg);
        filter: brightness(1.2) hue-rotate(-8deg);
        text-shadow: 0 0 25px rgba(251,146,60,0.7), 0 0 50px rgba(239,68,68,0.4), 0 0 70px rgba(168,85,247,0.2);
    }
    100% {
        transform: scale(1.18) translateY(-6px) rotate(3deg);
        filter: brightness(1.5) hue-rotate(12deg);
        text-shadow: 0 0 40px rgba(251,146,60,1), 0 0 70px rgba(239,68,68,0.7), 0 0 90px rgba(168,85,247,0.4);
    }
}

/* Spark particles that fly out from the flame */
.streak-celebration-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    opacity: 0;
    pointer-events: none;
}

.streak-celebration-overlay.active .streak-celebration-spark {
    animation: sparkFly var(--spark-duration, 1s) ease-out var(--spark-delay, 0.3s) forwards;
}

@keyframes sparkFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(var(--spark-x, 50px), var(--spark-y, -80px)) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--spark-x, 50px) * 1.5), calc(var(--spark-y, -80px) * 1.8)) scale(0);
    }
}

@keyframes streakTextReveal {
    0% { opacity: 0; transform: translateY(10px) scale(0.95); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glowExpand {
    0% { opacity: 0; transform: scale(0.5); }
    40% { opacity: 0.8; transform: scale(1.5); }
    100% { opacity: 0.4; transform: scale(2); }
}

@keyframes glowPulse {
    0% { opacity: 0.3; transform: scale(1.8); }
    100% { opacity: 0.6; transform: scale(2.2); }
}

/* ============ Trophy Celebration Overlay (Timed/Practice) ============ */

.trophy-celebration-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 4000;
    transition: background 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.trophy-celebration-overlay.active {
    background: rgba(0, 0, 0, 0.85);
    opacity: 1;
    pointer-events: auto;
}

.trophy-celebration-overlay.fade-out {
    opacity: 0;
}

.trophy-celebration-trophy {
    font-size: 20px;
    opacity: 0;
    transform: scale(0.3);
    transition: none;
}

.trophy-celebration-overlay.active .trophy-celebration-trophy {
    animation: trophyBurst 0.8s ease-out forwards, trophyBounce 0.6s ease-in-out 0.8s infinite alternate;
}

.trophy-celebration-text {
    font-size: 1.8em;
    font-weight: 800;
    color: #fbbf24;
    opacity: 0;
    margin-top: 16px;
    text-shadow: 0 0 20px rgba(251,191,36,0.5);
}

.trophy-celebration-overlay.active .trophy-celebration-text {
    animation: streakTextReveal 0.6s ease-out 0.5s forwards;
}

.trophy-celebration-glow {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,0.4) 0%, rgba(59,130,246,0.2) 40%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
}

.trophy-celebration-overlay.active .trophy-celebration-glow {
    animation: glowExpand 0.6s ease-out 0.1s forwards, glowPulse 0.8s ease-in-out 0.7s infinite alternate;
}

.trophy-celebration-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    opacity: 0;
    pointer-events: none;
}

.trophy-celebration-overlay.active .trophy-celebration-spark {
    animation: sparkFly var(--spark-duration, 1s) ease-out var(--spark-delay, 0.3s) forwards;
}

@keyframes trophyBurst {
    0% {
        opacity: 0;
        transform: scale(0.2) translateY(40px);
        filter: brightness(0.3) saturate(0.5);
    }
    30% {
        opacity: 1;
        transform: scale(1.6) translateY(-15px);
        filter: brightness(2) saturate(1.5);
    }
    60% {
        transform: scale(0.9) translateY(5px);
        filter: brightness(1.1) saturate(1.2);
    }
    80% {
        transform: scale(1.2) translateY(-5px);
        filter: brightness(1.4) saturate(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
        filter: brightness(1.2) saturate(1.2);
        text-shadow: 0 0 30px rgba(251,191,36,0.8), 0 0 60px rgba(59,130,246,0.5), 0 0 80px rgba(139,92,246,0.3);
    }
}

@keyframes trophyBounce {
    0% {
        transform: scale(1.1) translateY(0) rotate(-2deg);
        filter: brightness(1.2);
        text-shadow: 0 0 25px rgba(251,191,36,0.7), 0 0 50px rgba(59,130,246,0.4);
    }
    100% {
        transform: scale(1.15) translateY(-4px) rotate(2deg);
        filter: brightness(1.4);
        text-shadow: 0 0 40px rgba(251,191,36,1), 0 0 70px rgba(59,130,246,0.7);
    }
}

/* ============ Daily Recap Overlay ============ */

#recap-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5000;
    transition: background 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

#recap-overlay.active {
    background: rgba(0, 0, 0, 0.88);
    opacity: 1;
    pointer-events: auto;
}

#recap-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.recap-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 28px 28px;
    max-width: 340px;
    width: 85%;
    background: rgba(26, 27, 40, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(129, 140, 248, 0.12);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.recap-header {
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    opacity: 0;
}

#recap-overlay.active .recap-header {
    animation: recapFadeIn 0.4s ease-out 0.2s forwards;
}

.recap-rank-section {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 12px;
    min-height: 80px;
}

.recap-rank-glow {
    position: absolute;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.15) 45%, transparent 70%);
    opacity: 0;
    transform: scale(0.3);
    top: 50%; left: 50%;
    margin-top: -80px;
    margin-left: -80px;
}

#recap-overlay.active .recap-rank-glow {
    animation: recapGlowExpand 0.8s ease-out 0.4s forwards, recapGlowPulse 2s ease-in-out 1.2s infinite alternate;
}

.recap-rank-number {
    font-size: 4.5em;
    font-weight: 900;
    color: #e8eaed;
    line-height: 1;
    opacity: 0;
    transform: scale(0.3);
    filter: blur(8px);
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
}

#recap-overlay.active .recap-rank-number {
    animation: recapRankReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

.recap-rank-suffix {
    font-size: 1.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 2px;
    opacity: 0;
    position: relative;
    z-index: 1;
}

#recap-overlay.active .recap-rank-suffix {
    animation: recapFadeIn 0.4s ease-out 1.0s forwards;
}

/* Tier badge */
.recap-tier-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(8px);
}

#recap-overlay.active .recap-tier-badge {
    animation: recapSlideUp 0.45s ease-out 1.2s forwards;
}

.recap-tier-icon {
    font-size: 1em;
}

.recap-tier-name {
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Tier color variants */
.recap-tier-champion .recap-tier-name { color: #ffd700; }
.recap-tier-champion .recap-rank-number { color: #ffd700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.4); }

.recap-tier-podium .recap-tier-name { color: #a5b4fc; }
.recap-tier-podium .recap-rank-number { color: #a5b4fc; text-shadow: 0 0 20px rgba(165, 180, 252, 0.4); }

.recap-tier-elite .recap-tier-name { color: #10b981; }
.recap-tier-elite .recap-rank-number { color: #10b981; text-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }

.recap-tier-strong .recap-tier-name { color: #818cf8; }
.recap-tier-strong .recap-rank-number { color: #818cf8; text-shadow: 0 0 20px rgba(129, 140, 248, 0.4); }

.recap-tier-contender .recap-tier-name { color: #8b8d98; }
.recap-tier-contender .recap-rank-number { color: #8b8d98; }

.recap-tier-challenger .recap-tier-name { color: #6b6d78; }
.recap-tier-challenger .recap-rank-number { color: #6b6d78; }

/* Stats row */
.recap-stats-row {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(8px);
}

#recap-overlay.active .recap-stats-row {
    animation: recapSlideUp 0.45s ease-out 1.5s forwards;
}

.recap-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recap-stat-value {
    font-size: 1.6em;
    font-weight: 800;
    color: #e8eaed;
    line-height: 1.2;
}

.recap-stat-label {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Streak */
.recap-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(8px);
}

#recap-overlay.active .recap-streak {
    animation: recapSlideUp 0.45s ease-out 1.7s forwards;
}

.recap-streak-flame {
    font-size: 1.1em;
}

.recap-streak-count {
    font-size: 1.1em;
    font-weight: 800;
    color: #fbbf24;
}

.recap-streak-label {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.5);
}

/* CTA button */
.recap-cta-btn {
    padding: 14px 32px;
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#recap-overlay.active .recap-cta-btn {
    animation: recapSlideUp 0.45s ease-out 1.9s forwards;
}

.recap-cta-btn:active {
    transform: scale(0.97);
}

/* Share button */
.recap-share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    margin-top: 10px;
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: background 0.15s ease, color 0.15s ease;
}

.recap-share-btn svg {
    flex-shrink: 0;
}

.recap-share-btn:active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

#recap-overlay.active .recap-share-btn {
    animation: recapSlideUp 0.45s ease-out 2.1s forwards;
}

/* ---- Recap Animations ---- */

@keyframes recapRankReveal {
    0% {
        opacity: 0;
        transform: scale(0.3);
        filter: blur(8px);
    }
    65% {
        opacity: 1;
        transform: scale(1.15);
        filter: none;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }
}

@keyframes recapFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes recapSlideUp {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes recapGlowExpand {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 0.7; transform: scale(1.2); }
    100% { opacity: 0.4; transform: scale(1.6); }
}

@keyframes recapGlowPulse {
    0% { opacity: 0.3; transform: scale(1.4); }
    100% { opacity: 0.5; transform: scale(1.8); }
}

/* ============ Recap Variant Shared ============ */

.recap-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 55%, transparent 70%);
    opacity: 0; pointer-events: none;
}

/* ---- Recap Variant A: Spotlight ---- */

.recap-card.recap-variant-a::after {
    background: linear-gradient(105deg, transparent 30%, rgba(165,180,252,0.06) 45%, rgba(165,180,252,0.12) 50%, rgba(165,180,252,0.06) 55%, transparent 70%);
}
#recap-overlay.active .recap-card.recap-variant-a::after {
    animation: recapShimmer 1.2s ease-in-out 2.4s forwards;
}
.recap-variant-a .recap-header { opacity: 0; }
#recap-overlay.active .recap-variant-a .recap-header {
    animation: recapVaSlideDown 0.5s ease-out 0.15s forwards;
}
.recap-variant-a .recap-rank-glow {
    background: radial-gradient(circle, rgba(99,102,241,0.4) 0%, rgba(139,92,246,0.18) 40%, transparent 70%);
}
#recap-overlay.active .recap-variant-a .recap-rank-glow {
    animation: recapVaGlowBurst 0.6s cubic-bezier(0.22,1,0.36,1) 0.4s forwards, recapGlowPulse 2.5s ease-in-out 1.2s infinite alternate;
}
.recap-variant-a .recap-rank-number {
    opacity: 0; transform: scale(2.5) translateY(-20px); filter: blur(12px);
}
#recap-overlay.active .recap-variant-a .recap-rank-number {
    animation: recapVaRankSlam 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.55s forwards;
}
.recap-variant-a .recap-rank-suffix { opacity: 0; transform: translateX(-8px); }
#recap-overlay.active .recap-variant-a .recap-rank-suffix {
    animation: recapVaSlideRight 0.35s ease-out 1.05s forwards;
}
.recap-variant-a .recap-tier-badge { opacity: 0; transform: scale(0.8); }
#recap-overlay.active .recap-variant-a .recap-tier-badge {
    animation: recapVaPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.3s forwards;
}
.recap-variant-a .recap-stats-row .recap-stat { opacity: 0; transform: translateY(14px); }
#recap-overlay.active .recap-variant-a .recap-stats-row .recap-stat:first-child {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.55s forwards;
}
#recap-overlay.active .recap-variant-a .recap-stats-row .recap-stat:last-child {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.7s forwards;
}
.recap-variant-a .recap-streak { opacity: 0; transform: translateY(12px); }
#recap-overlay.active .recap-variant-a .recap-streak {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.9s forwards;
}
.recap-variant-a .recap-cta-btn { opacity: 0; transform: translateY(10px); }
#recap-overlay.active .recap-variant-a .recap-cta-btn {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.1s forwards;
}
.recap-variant-a .recap-share-btn { opacity: 0; transform: translateY(10px); }
#recap-overlay.active .recap-variant-a .recap-share-btn {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.25s forwards;
}

@keyframes recapVaSlideDown { 0%{opacity:0;transform:translateY(-10px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes recapVaGlowBurst { 0%{opacity:0;transform:scale(0.2)} 60%{opacity:0.8;transform:scale(1.5)} 100%{opacity:0.45;transform:scale(1.3)} }
@keyframes recapVaRankSlam {
    0%{opacity:0;transform:scale(2.5) translateY(-20px);filter:blur(12px)}
    50%{opacity:1;transform:scale(0.9) translateY(2px);filter:none}
    70%{transform:scale(1.08) translateY(-2px)}
    100%{opacity:1;transform:scale(1) translateY(0);filter:none}
}
@keyframes recapVaSlideRight { 0%{opacity:0;transform:translateX(-8px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes recapVaPopIn { 0%{opacity:0;transform:scale(0.8)} 60%{transform:scale(1.08)} 100%{opacity:1;transform:scale(1)} }
@keyframes recapVaSpringUp {
    0%{opacity:0;transform:translateY(14px)} 60%{opacity:1;transform:translateY(-3px)} 100%{opacity:1;transform:translateY(0)}
}
@keyframes recapShimmer { 0%{opacity:0;left:-100%} 20%{opacity:1} 100%{opacity:0;left:150%} }

/* ---- Recap Variant B: Medal Pedestal ---- */

.recap-variant-b {
    background: linear-gradient(170deg, rgba(26,27,40,0.92) 0%, rgba(15,16,28,0.95) 100%) !important;
    border-color: rgba(251,191,36,0.12) !important;
}
.recap-variant-b::before {
    content: '';
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(251,191,36,0.1) 0%, transparent 70%);
    opacity: 0; pointer-events: none;
}
#recap-overlay.active .recap-variant-b::before {
    animation: recapFadeIn 0.8s ease-out 0.3s forwards;
}
.recap-variant-b::after {
    background: linear-gradient(105deg, transparent 30%, rgba(251,191,36,0.05) 45%, rgba(251,191,36,0.1) 50%, rgba(251,191,36,0.05) 55%, transparent 70%);
}
#recap-overlay.active .recap-variant-b::after {
    animation: recapShimmer 1.4s ease-in-out 2.8s forwards;
}
.recap-variant-b .recap-header { opacity: 0; }
#recap-overlay.active .recap-variant-b .recap-header {
    animation: recapFadeIn 0.5s ease-out 0.15s forwards;
}
.recap-variant-b .recap-rank-section {
    width: 115px; height: 115px; border-radius: 50%;
    border: 3px solid rgba(251,191,36,0); background: rgba(251,191,36,0);
    box-shadow: none; min-height: auto; margin-bottom: 14px;
    align-items: center; justify-content: center;
}
#recap-overlay.active .recap-variant-b .recap-rank-section {
    animation: recapVbRingDraw 0.8s ease-out 0.4s forwards;
}
.recap-variant-b .recap-rank-glow { display: none; }
.recap-variant-b .recap-rank-number {
    font-size: 2.8em; color: #fbbf24; text-shadow: none;
    opacity: 0; transform: scale(0.5); filter: none;
}
#recap-overlay.active .recap-variant-b .recap-rank-number {
    animation: recapVbRankFloat 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.9s forwards;
}
.recap-variant-b .recap-rank-suffix {
    color: rgba(251,191,36,0.7); opacity: 0;
}
#recap-overlay.active .recap-variant-b .recap-rank-suffix {
    animation: recapFadeIn 0.3s ease-out 1.3s forwards;
}
.recap-variant-b .recap-tier-badge {
    background: transparent; border: none; opacity: 0; transform: translateY(6px);
}
.recap-variant-b .recap-tier-name { color: #fbbf24; }
#recap-overlay.active .recap-variant-b .recap-tier-badge {
    animation: recapSlideUp 0.4s ease-out 1.5s forwards;
}
.recap-variant-b .recap-stats-row {
    flex-direction: column; gap: 0; width: 100%; opacity: 0;
}
.recap-variant-b .recap-stat {
    flex-direction: row; justify-content: space-between; width: 100%; padding: 0 12px;
}
.recap-variant-b .recap-stat-label { order: -1; font-size: 0.78em; }
.recap-variant-b .recap-stat-value { font-size: 1.15em; }
.recap-variant-b .recap-stat + .recap-stat {
    border-top: 1px solid rgba(255,255,255,0.06); margin-top: 10px; padding-top: 10px;
}
#recap-overlay.active .recap-variant-b .recap-stats-row {
    animation: recapVbSlideFromLeft 0.45s ease-out 1.7s forwards;
}
.recap-variant-b .recap-streak {
    background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.15);
    padding: 6px 16px; border-radius: 20px; opacity: 0; transform: scale(0.85);
}
#recap-overlay.active .recap-variant-b .recap-streak {
    animation: recapVaPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 2.2s forwards;
}
.recap-variant-b .recap-cta-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #111 !important;
    opacity: 0; transform: translateY(10px);
}
#recap-overlay.active .recap-variant-b .recap-cta-btn {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.4s forwards;
}
.recap-variant-b .recap-share-btn { opacity: 0; transform: translateY(8px); }
#recap-overlay.active .recap-variant-b .recap-share-btn {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.55s forwards;
}

@keyframes recapVbRingDraw {
    0%{border-color:rgba(251,191,36,0);background:rgba(251,191,36,0);box-shadow:none}
    50%{border-color:rgba(251,191,36,0.5);background:rgba(251,191,36,0.03)}
    100%{border-color:rgba(251,191,36,0.3);background:rgba(251,191,36,0.04);box-shadow:0 0 30px rgba(251,191,36,0.08),inset 0 0 20px rgba(251,191,36,0.05)}
}
@keyframes recapVbRankFloat {
    0%{opacity:0;transform:scale(0.5) translateY(10px)}
    60%{opacity:1;transform:scale(1.1) translateY(-3px)}
    100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes recapVbSlideFromLeft {
    0%{opacity:0;transform:translateX(-20px)} 100%{opacity:1;transform:translateX(0)}
}

/* ---- Recap Variant C: Percentile ---- */

.recap-variant-c {
    background: rgba(20,22,35,0.92) !important;
    border-color: rgba(16,185,129,0.12) !important;
}
.recap-variant-c::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
    transform: scaleX(0); transform-origin: left;
}
#recap-overlay.active .recap-variant-c::before {
    animation: recapVcBarDraw 0.6s ease-out 0.1s forwards;
}
.recap-variant-c::after { display: none; }
.recap-variant-c .recap-header { opacity: 0; }
#recap-overlay.active .recap-variant-c .recap-header {
    animation: recapFadeIn 0.4s ease-out 0.3s forwards;
}
.recap-variant-c .recap-rank-section {
    flex-direction: row; gap: 12px; justify-content: flex-start;
    min-height: auto; margin-bottom: 14px;
    opacity: 0; transform: translateX(-20px);
}
#recap-overlay.active .recap-variant-c .recap-rank-section {
    animation: recapVcSlideInLeft 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.5s forwards;
}
.recap-variant-c .recap-rank-glow { display: none; }
.recap-variant-c .recap-rank-number {
    font-size: 2em; color: #10b981; text-shadow: none;
    background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25);
    border-radius: 12px; padding: 8px 14px; line-height: 1;
    opacity: 1; transform: none; filter: none;
}
.recap-variant-c .recap-rank-suffix {
    color: rgba(16,185,129,0.7); font-size: 0.9em;
    opacity: 1; position: static;
}
.recap-variant-c .recap-tier-badge {
    background: transparent; border: none; margin-bottom: 4px;
    opacity: 0; padding: 0;
}
.recap-variant-c .recap-tier-name { color: #10b981; font-size: 0.72em; }
#recap-overlay.active .recap-variant-c .recap-tier-badge {
    animation: recapFadeIn 0.3s ease-out 0.85s forwards;
}
/* Percentile bar */
.recap-variant-c .recap-pct-section {
    width: 100%; margin-bottom: 16px; opacity: 0;
}
#recap-overlay.active .recap-variant-c .recap-pct-section {
    animation: recapFadeIn 0.4s ease-out 0.9s forwards;
}
.recap-variant-c .recap-pct-label {
    font-size: 0.65em; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
}
.recap-variant-c .recap-pct-bar-bg {
    width: 100%; height: 8px; background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden;
}
.recap-variant-c .recap-pct-bar-fill {
    height: 100%; background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 4px; width: 0;
    box-shadow: 0 0 8px rgba(16,185,129,0.4);
}
#recap-overlay.active .recap-variant-c .recap-pct-bar-fill {
    animation: recapVcBarFill 1s ease-out 1.15s forwards;
}
.recap-variant-c .recap-pct-value {
    font-size: 0.72em; color: #34d399; font-weight: 700;
    margin-top: 5px; text-align: right; opacity: 0;
}
#recap-overlay.active .recap-variant-c .recap-pct-value {
    animation: recapFadeIn 0.3s ease-out 2.0s forwards;
}
.recap-variant-c .recap-stats-row { margin-bottom: 14px; }
.recap-variant-c .recap-stat {
    background: rgba(255,255,255,0.03); border-radius: 10px; padding: 10px;
    opacity: 0; transform: scale(0.8);
}
#recap-overlay.active .recap-variant-c .recap-stat:first-child {
    animation: recapVaPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.6s forwards;
}
#recap-overlay.active .recap-variant-c .recap-stat:last-child {
    animation: recapVaPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.75s forwards;
}
.recap-variant-c .recap-streak {
    background: rgba(251,191,36,0.06); border-radius: 8px; padding: 8px;
    opacity: 0; transform: translateY(8px);
}
#recap-overlay.active .recap-variant-c .recap-streak {
    animation: recapSlideUp 0.5s ease-out 2.0s forwards;
}
.recap-variant-c .recap-cta-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    opacity: 0; transform: translateY(10px);
}
#recap-overlay.active .recap-variant-c .recap-cta-btn {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.25s forwards;
}
.recap-variant-c .recap-share-btn { opacity: 0; transform: translateY(8px); }
#recap-overlay.active .recap-variant-c .recap-share-btn {
    animation: recapVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.4s forwards;
}

@keyframes recapVcBarDraw { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes recapVcSlideInLeft { 0%{opacity:0;transform:translateX(-20px)} 60%{transform:translateX(4px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes recapVcBarFill { 0%{width:0} 100%{width:var(--pct-width, 50%)} }

/* ============ Color-Coded History Rows ============ */

.stats-history-row {
    border-left: 3px solid transparent;
}

.stats-row-today {
    border-left: 3px solid #fbbf24 !important;
    background: rgba(251,191,36,0.06);
}

.stats-score-above-avg {
    color: #4ade80 !important;
}

.stats-best-star {
    color: #fbbf24;
    margin-left: 3px;
    font-size: 0.85em;
}

/* ============ Personal Best Badge ============ */

.stats-new-pb-badge {
    display: inline-block;
    font-size: 0.4em;
    font-weight: 700;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1b28;
    vertical-align: middle;
    letter-spacing: 0.3px;
    animation: pbBadgePulse 2s ease-in-out infinite;
}

@keyframes pbBadgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 4px rgba(251,191,36,0.3); }
    50% { transform: scale(1.05); box-shadow: 0 0 10px rgba(251,191,36,0.5); }
}

/* ============ Progress Sparkline ============ */

.stats-sparkline-container {
    width: 100%;
    height: 40px;
    margin-bottom: 12px;
    opacity: 0.9;
}

.stats-sparkline-container svg {
    width: 100%;
    height: 100%;
}

/* ============ Stats Modal Overlay ============ */

.stats-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    animation: fadeIn 0.3s ease;
}

.stats-modal-content {
    background: rgba(26, 27, 40, 0.95);
    border-radius: 20px;
    padding: 0;
    max-width: 450px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-modal-header h2 {
    margin: 0;
    color: #818cf8;
    font-size: 1.5em;
}

.close-stats-btn {
    background: transparent;
    border: none;
    font-size: 2em;
    color: #8b8d98;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
}

.close-stats-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

.stats-modal-body {
    padding: 20px 24px;
}

/* Mode Selection on Entry Screen */
.mode-selection {
    margin: 20px 0;
}

.mode-selection-label {
    display: block;
    font-size: 1em;
    color: #e8eaed;
    font-weight: bold;
    margin-bottom: 15px;
}

.mode-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.mode-btn {
    flex: 1;
    min-width: 120px;
    padding: 15px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: #1a1b28;
    color: #e8eaed;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: #252538;
}

.mode-btn.selected {
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.mode-icon {
    font-size: 1.8em;
}

.mode-name {
    font-size: 0.9em;
    font-weight: bold;
}

.mode-btn-daily.selected {
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
}

.mode-btn-practice.selected {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.mode-btn-timed.selected {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.mode-btn-wide {
    flex-basis: 100%;
    min-width: 100%;
}

/* First-Time User Overlay */
.first-time-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0b14;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    animation: fadeIn 0.5s ease;
}

.first-time-content {
    background: rgba(26, 27, 40, 0.9);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 550px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.first-time-logo h1 {
    color: #e8eaed;
    margin-bottom: 10px;
    font-size: 3em;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.first-time-tagline {
    color: #8b8d98;
    font-size: 1.2em;
    margin-bottom: 0;
}

.first-time-welcome {
    margin: 30px 0;
    padding: 20px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.first-time-welcome p {
    color: #e8eaed;
    font-size: 1.05em;
    line-height: 1.6;
    margin: 0;
}

.first-time-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.first-time-btn {
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.first-time-btn-tutorial {
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    border-color: transparent;
}

.first-time-btn-tutorial:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.first-time-btn-skip {
    background: rgba(45, 45, 68, 0.5);
    color: #8b8d98;
}

.first-time-btn-skip:hover {
    background: rgba(45, 45, 68, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
    color: #e8eaed;
}

.first-time-btn-icon {
    font-size: 1.8em;
}

.first-time-btn-text {
    font-size: 1.1em;
    font-weight: 600;
    color: #e8eaed;
}

.first-time-btn-skip .first-time-btn-text {
    color: #c0c2cc;
}

.first-time-btn-desc {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
}

.first-time-btn-skip .first-time-btn-desc {
    color: #8b8d98;
}

/* Welcome Screen Overlay (New Onboarding) */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0b14;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    animation: fadeIn 0.5s ease;
}

.welcome-content {
    position: relative;
    background: rgba(26, 27, 40, 0.9);
    border-radius: 24px;
    padding: 50px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align: center;
    max-width: 480px;
    width: 90%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.welcome-title {
    color: #e8eaed;
    margin-bottom: 8px;
    font-size: 3.2em;
    font-weight: 700;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-tagline {
    color: #8b8d98;
    font-size: 1.15em;
    margin-bottom: 10px;
}

.welcome-oneliner {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95em;
    margin-bottom: 30px;
}

.welcome-skip-btn {
    position: absolute;
    top: 16px;
    right: 18px;
    background: none;
    border: none;
    color: #555;
    font-size: 0.85em;
    cursor: pointer;
    padding: 6px 10px;
    transition: color 0.2s ease;
}

.welcome-skip-btn:hover {
    color: #999;
}

.welcome-cta {
    display: block;
    width: 100%;
    padding: 18px 32px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    animation: ctaGlow 2s ease-in-out infinite alternate;
    margin-bottom: 28px;
}

.welcome-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.55);
}

.welcome-cta:active {
    transform: translateY(0);
}

@keyframes ctaGlow {
    0% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3); }
    100% { box-shadow: 0 4px 28px rgba(152, 16, 250, 0.45); }
}

.welcome-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: rgba(10, 11, 20, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: keyboardFadeIn 0.8s ease 0.8s both;
}

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

.welcome-key-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.welcome-key-row-2 {
    padding-left: 5%;
    padding-right: 5%;
}

.welcome-key-row-3 {
    padding-left: 5%;
    padding-right: 18%;
}

.welcome-key {
    flex: 1;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
    text-align: center;
}

/* Coach Toast Notification (Mobile) */
.coach-toast {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95) 0%, rgba(5, 150, 105, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px 18px;
    padding-right: 40px;
    max-width: 90%;
    width: max-content;
    z-index: 5000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    animation: toastSlideUp 0.3s ease-out;
}

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

.coach-toast.hiding {
    animation: toastSlideDown 0.25s ease-in forwards;
}

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

.coach-toast-content {
    color: #fff;
    font-size: 0.95em;
    line-height: 1.4;
    font-weight: 500;
}

.coach-toast-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.3em;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.coach-toast-close:hover {
    color: #fff;
}

/* Handbook Button */
.handbook-button {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    font-size: 1.1em;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.handbook-button:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

/* Responsive Welcome Screen */
@media (max-width: 480px) {
    .welcome-content {
        padding: 35px 25px;
    }

    .welcome-title {
        font-size: 2.5em;
    }

    .welcome-tagline {
        font-size: 1em;
        margin-bottom: 6px;
    }

    .welcome-oneliner {
        font-size: 0.85em;
        margin-bottom: 24px;
    }

    .welcome-cta {
        padding: 16px 24px;
        font-size: 1.1em;
    }

    .welcome-cta {
        margin-bottom: 20px;
    }
}

/* Tutorial Choice Modal */
.tutorial-choice-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0b14; /* Solid background to hide gameplay behind */
    z-index: 10002;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.tutorial-choice-content {
    background: rgba(26, 27, 40, 0.95);
    border-radius: 20px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-choice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-choice-header h2 {
    color: #e8eaed;
    font-size: 1.5em;
    margin: 0;
}

.tutorial-choice-desc {
    text-align: center;
    color: #8b8d98;
    margin-bottom: 20px;
}

.tutorial-choice-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tutorial-choice-btn {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(45, 45, 68, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.tutorial-choice-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
}

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

.tutorial-choice-icon {
    font-size: 2em;
}

.tutorial-choice-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #e8eaed;
}

.tutorial-choice-subtitle {
    font-size: 0.85em;
    color: #8b8d98;
}

/* Head to Head Entry Modal */
.headtohead-entry-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10001;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.headtohead-entry-content {
    background: rgba(26, 27, 40, 0.95);
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 90vh;
    overflow-y: auto;
}

.headtohead-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 15px;
}

.headtohead-header h2 {
    color: #e8eaed;
    margin: 0;
    font-size: 1.5em;
}

.close-headtohead-entry-btn {
    background: none;
    border: none;
    color: #8b8d98;
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-headtohead-entry-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

.headtohead-description {
    color: #8b8d98;
    text-align: center;
    margin-bottom: 25px;
    font-size: 1em;
}

.headtohead-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.headtohead-option-btn {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(45, 45, 68, 0.5);
    color: #e8eaed;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.headtohead-option-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
    border-color: rgba(155, 89, 182, 0.5);
    background: rgba(155, 89, 182, 0.2);
}

.headtohead-option-icon {
    font-size: 2.5em;
}

.headtohead-option-title {
    font-size: 1.1em;
    font-weight: 600;
}

.headtohead-option-desc {
    font-size: 0.85em;
    color: #8b8d98;
}

.headtohead-mode-selection {
    margin-top: 20px;
}

.headtohead-mode-selection h3 {
    color: #e8eaed;
    font-size: 1em;
    margin-bottom: 15px;
    text-align: center;
}

.headtohead-mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.headtohead-mode-btn {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(45, 45, 68, 0.5);
    color: #e8eaed;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.headtohead-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
    border-color: rgba(155, 89, 182, 0.5);
    background: rgba(155, 89, 182, 0.2);
}

.headtohead-mode-btn.selected {
    border-color: rgba(155, 89, 182, 0.8);
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
}

.headtohead-mode-icon {
    font-size: 2em;
}

.headtohead-mode-title {
    font-size: 1em;
    font-weight: 600;
}

.headtohead-mode-desc {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.8);
}

.invite-link-section {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.invite-link-label {
    color: #8b8d98;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.invite-link-container {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.invite-link-input {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(26, 27, 40, 0.8);
    color: #e8eaed;
    font-size: 0.9em;
}

.copy-link-btn {
    padding: 12px 20px;
    border: 1px solid rgba(155, 89, 182, 0.5);
    border-radius: 8px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.copy-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
}

.invite-link-status {
    color: #8b8d98;
    font-size: 0.85em;
    text-align: center;
    margin: 0;
}

/* Game Code Section - New code-based matchmaking */
.game-code-section {
    margin-top: 25px;
    padding: 25px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    text-align: center;
}

.game-code-label {
    color: #8b8d98;
    font-size: 0.95em;
    margin-bottom: 15px;
}

.game-code-display {
    margin: 15px 0;
}

.game-code-value {
    font-size: 2.5em;
    font-weight: 700;
    letter-spacing: 4px;
    color: #e8eaed;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Monaco', 'Consolas', monospace;
}

.game-code-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}

.game-code-btn {
    padding: 12px 20px;
    border: 1px solid rgba(155, 89, 182, 0.5);
    border-radius: 8px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.game-code-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
}

.game-code-btn-icon {
    font-size: 1.1em;
}

.game-code-btn-invite {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    border-color: rgba(39, 174, 96, 0.5);
}

.game-code-btn-invite:hover {
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.game-code-status {
    color: #8b8d98;
    font-size: 0.9em;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.game-code-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #f39c12;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

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

.game-code-status.connected::before {
    background: #27ae60;
    animation: none;
}

/* Cancel Waiting Button */
.cancel-waiting-btn {
    margin-top: 15px;
    padding: 10px 25px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-waiting-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
}

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

/* Game Code Input for joining */
.game-code-input {
    padding: 15px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    background: rgba(45, 45, 68, 0.5);
    color: #e8eaed;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Monaco', 'Consolas', monospace;
}

.game-code-input::placeholder {
    color: #6a6c7a;
    letter-spacing: 3px;
}

.game-code-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.8);
    background: rgba(45, 45, 68, 0.7);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

/* Join Game Divider */
.join-game-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
}

.join-game-divider::before,
.join-game-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.join-game-divider span {
    padding: 0 15px;
    color: #8b8d98;
    font-size: 0.9em;
}

.create-own-game-btn {
    width: 100%;
}

.headtohead-player-view {
    width: 100%;
}

.headtohead-join-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.headtohead-username-label {
    color: #e8eaed;
    font-size: 0.95em;
    font-weight: 500;
}

.headtohead-username-input {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(45, 45, 68, 0.5);
    color: #e8eaed;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
}

.headtohead-username-input:focus {
    outline: none;
    border-color: rgba(155, 89, 182, 0.8);
    background: rgba(45, 45, 68, 0.7);
}

.headtohead-play-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.headtohead-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
}

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

.headtohead-join-status {
    color: #8b8d98;
    font-size: 0.85em;
    min-height: 20px;
    text-align: center;
}

.headtohead-option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.headtohead-option-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Grid Toggle Button - Legacy (hidden, functionality moved to game menu) */
.grid-toggle-btn {
    display: none;
}

/* Game Title Bar */
.game-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 10px;
}

.game-title-bar h1 {
    margin: 0;
}

/* Position menu button on right side */
.game-title-bar .game-menu-container {
    position: absolute;
    right: 0;
}

/* Game Menu Button */
.game-menu-container {
    position: relative;
    z-index: 150;
}

.game-menu-btn {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e8eaed;
    font-size: 0.9em;
}

.game-menu-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.game-menu-label {
    font-weight: 500;
}

.game-menu-btn svg {
    fill: #e8eaed;
}

.game-menu-label {
    font-size: 0.9em;
}

.game-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: rgb(30, 31, 45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 6px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: none;
}

.game-menu-dropdown.active {
    display: block;
}

.game-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #e8eaed;
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
}

.game-menu-item:hover {
    background: rgba(99, 102, 241, 0.15);
}

.game-menu-icon {
    font-size: 1.1em;
    width: 24px;
    text-align: center;
}

.game-menu-toggle {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.game-menu-toggle.on {
    background: rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

.game-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.game-menu-exit {
    color: #f87171;
}

.game-menu-exit:hover {
    background: rgba(248, 113, 113, 0.15);
}

/* Mode Switcher in Game - Hidden (removed from UI) */
.mode-switcher {
    display: none;
}

.mode-switch-dropdown {
    padding: 10px 15px;
    padding-right: 35px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(45, 45, 68, 0.9);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
    font-weight: bold;
    color: #e8eaed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e8eaed' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    min-width: 160px;
}

.mode-switch-dropdown:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background-color: rgba(60, 60, 85, 0.95);
}

.mode-switch-dropdown:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.mode-switch-dropdown option {
    background: rgba(26, 27, 40, 0.95);
    color: #e8eaed;
    padding: 10px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .main-container {
        padding: 10px;
    }

    .mode-buttons {
        flex-direction: column;
    }

    .mode-btn {
        min-width: 100%;
    }
}

/* Scoreboard */
.scoreboard {
    display: flex;
    justify-content: space-around;
    background: rgba(26, 27, 40, 0.7);
    padding: 12px;
    border-radius: 16px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scoreboard-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.scoreboard-label {
    font-size: 0.75em;
    color: #8b8d98;
    font-weight: bold;
}

.scoreboard-value {
    font-size: 1.1em;
    color: #6366f1;
    font-weight: bold;
}

/* Head to Head UI Elements */
.h2h-ready-status {
    background: rgba(26, 27, 40, 0.95);
    border: 2px solid rgba(155, 89, 182, 0.5);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.h2h-ready-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.h2h-ready-message {
    color: #e8eaed;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 8px;
}

.h2h-ready-players {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.h2h-ready-player {
    flex: 1;
    background: rgba(45, 45, 68, 0.5);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.h2h-ready-player-name {
    color: #8b8d98;
    font-size: 0.9em;
    font-weight: 600;
}

.h2h-ready-indicator {
    font-size: 2em;
    line-height: 1;
}

.h2h-ready-btn {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border: none;
    border-radius: 12px;
    padding: 14px 32px;
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
    margin-top: 8px;
}

.h2h-ready-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(155, 89, 182, 0.5);
}

.h2h-ready-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.h2h-turn-indicator {
    background: rgba(155, 89, 182, 0.2);
    border: 2px solid rgba(155, 89, 182, 0.5);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 12px;
    text-align: center;
    animation: pulse 2s infinite;
}

.h2h-turn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.h2h-turn-label {
    color: #8b8d98;
    font-size: 0.9em;
}

.h2h-turn-player {
    color: #9b59b6;
    font-size: 1.2em;
    font-weight: bold;
}

.h2h-scores {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    justify-content: center;
}

.h2h-player-score {
    flex: 1;
    background: rgba(26, 27, 40, 0.7);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.h2h-player-score.h2h-player1 {
    border-color: rgba(99, 102, 241, 0.5);
}

.h2h-player-score.h2h-player2 {
    border-color: rgba(246, 51, 154, 0.5);
}

.h2h-player-score.active {
    border-color: rgba(155, 89, 182, 0.8);
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.4);
}

.h2h-player-name {
    display: block;
    color: #8b8d98;
    font-size: 0.8em;
    margin-bottom: 6px;
}

.h2h-player-points {
    display: block;
    color: #e8eaed;
    font-size: 1.5em;
    font-weight: bold;
}

/* Goals Progress Bar (first_to_finish mode) */
.h2h-goals-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 12px 20px;
    background: rgba(26, 27, 40, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.h2h-goals-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.h2h-goals-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.h2h-goals-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.h2h-dot-player1 {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.h2h-dot-player2 {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.h2h-goals-player1 .h2h-goals-name {
    color: #22c55e;
    font-weight: 700;
}

.h2h-goals-player2 .h2h-goals-name {
    color: #ef4444;
    font-weight: 700;
}

.h2h-goals-name {
    font-size: 0.85em;
    font-weight: 600;
}

.h2h-goals-count {
    font-size: 1.3em;
    font-weight: bold;
    color: #e8eaed;
}

.h2h-goals-player1 .h2h-goals-count {
    color: #22c55e;
}

.h2h-goals-player2 .h2h-goals-count {
    color: #ef4444;
}

.h2h-goals-track {
    flex: 1;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.h2h-goals-bar {
    position: absolute;
    height: 12px;
    left: 2px;
    transition: width 0.4s ease-out;
    border-radius: 6px;
}

.h2h-goals-bar-player1 {
    top: 2px;
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
    width: 0%;
}

.h2h-goals-bar-player2 {
    bottom: 2px;
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    width: 0%;
}

.h2h-opponent-view {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 220px;
    background: rgba(26, 27, 40, 0.95);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 50;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    font-size: 0.85em;
}

.h2h-opponent-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.h2h-opponent-header h3 {
    color: #e8eaed;
    font-size: 1em;
    margin: 0 0 5px 0;
}

.h2h-opponent-name {
    color: #9b59b6;
    font-size: 0.9em;
    font-weight: 600;
}

.h2h-opponent-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.h2h-opponent-stat {
    flex: 1;
    text-align: center;
}

.h2h-opponent-stat-label {
    display: block;
    color: #8b8d98;
    font-size: 0.75em;
    margin-bottom: 4px;
}

.h2h-opponent-stat-value {
    display: block;
    color: #6366f1;
    font-size: 1.1em;
    font-weight: bold;
}

.h2h-opponent-words {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.h2h-opponent-words-label {
    color: #8b8d98;
    font-size: 0.75em;
    margin-bottom: 8px;
}

.h2h-opponent-words-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.h2h-opponent-word {
    background: rgba(45, 45, 68, 0.5);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75em;
    color: #e8eaed;
}

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

.main-container {
    display: flex;
    gap: 16px;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    padding: 20px;
}

.sidebar {
    background: rgba(26, 27, 40, 0.7);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 300px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: visible;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 6px;
    position: relative;
    z-index: 10;
    overflow: visible;
}

.sidebar h2 {
    color: #e8eaed;
    font-size: 1.1em;
    margin: 0;
}

.sidebar-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    z-index: 100;
}

.help-button,
.leaderboard-button {
    background: #3a3a55;
    color: #e8eaed;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 101;
}

.help-button:hover,
.leaderboard-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.help-button {
    background: #3a3a55;
}

.help-button:hover {
    background: #4a4a65;
}

.leaderboard-button {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.leaderboard-button:hover {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
}

/* H2H Exit Button - only shown during head-to-head games */
.h2h-exit-button {
    display: none;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
}

.h2h-exit-button:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
}

/* Show exit button only in H2H mode */
.sidebar.h2h-mode .h2h-exit-button {
    display: flex;
}

.goals-container {
    margin-bottom: 10px;
}

/* Color Key Legend */
.color-key-legend {
    background: rgba(45, 46, 64, 0.2);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.color-key-title {
    font-size: 12px;
    color: #8b8d98;
    margin-bottom: 12px;
    font-weight: 600;
    text-align: left;
}

.color-key-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.color-key-sample {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: none;
    flex-shrink: 0;
}

.color-key-label {
    color: rgba(232, 234, 237, 0.8);
    font-weight: 400;
    font-size: 12px;
}

.goal-item {
    background: rgba(45, 46, 64, 0.2);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.goal-item.completed {
    background: rgba(39, 174, 96, 0.15);
    border-color: rgba(39, 174, 96, 0.4);
}

.goal-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-weight: bold;
    color: #e8eaed;
}

.goal-checkbox {
    font-size: 0.9em;
    color: #666;
}

.goal-item.completed .goal-checkbox {
    color: #00bc7d;
    content: '✓';
}

.goal-title {
    font-size: 0.85em;
    color: #e8eaed;
}

.goal-description {
    font-size: 0.75em;
    color: #8b8d98;
    margin-bottom: 4px;
    line-height: 1.3;
}

.goal-progress {
    font-size: 0.7em;
    color: #8b8d98;
    margin-top: 4px;
}

.progress-ring-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.progress-ring {
    width: 40px;
    height: 40px;
    transform: rotate(-90deg);
}

.progress-ring-background {
    transition: stroke 0.3s ease;
}

.progress-ring-fill {
    transition: stroke-dashoffset 0.3s ease;
}

.progress-text {
    position: absolute;
    font-size: 0.65em;
    color: #8b8d98;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.stats-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    margin-top: 6px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 0.8em;
}

.stat-label {
    color: #8b8d98;
}

.stat-value {
    font-weight: bold;
    color: #6366f1;
}

.game-container {
    flex: 1;
    background: rgba(26, 27, 40, 0.7);
    border-radius: 16px;
    padding: 12px;
    padding-bottom: 70px; /* 50px for bottom anchor ad + 20px spacing */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Allow flex shrinking */
}

/* Compact spacing for head to head side-by-side mode */
.game-container:has(.h2h-opponent-view[style*="block"]) {
    padding: 8px;
    gap: 6px;
}

h1 {
    text-align: center;
    color: #e8eaed;
    margin-bottom: 8px;
    font-size: 1.8em;
}

.seed-word-section {
    position: relative;
    text-align: center;
    margin-bottom: 4px;
    padding: 6px;
    background: rgba(26, 27, 40, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: visible; /* Ensure tooltip is not clipped */
}

/* More compact in head to head mode */
.game-container:has(.h2h-opponent-view[style*="block"]) .seed-word-section {
    margin-bottom: 6px;
    padding: 8px;
}

.seed-label {
    font-size: 0.8em;
    color: #8b8d98;
    margin-bottom: 6px;
}

.definition-btn {
    display: none;
    position: absolute;
    top: 8px;
    right: 12px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: rgba(167, 139, 250, 0.8);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    z-index: 10;
}

.definition-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    color: rgba(167, 139, 250, 1);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.2);
}

.definition-btn:active {
    transform: translateY(0);
    background: rgba(139, 92, 246, 0.25);
}

.definition-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.definition-icon {
    font-size: 0.9em;
}

.definition-text {
    font-size: 1em;
    line-height: 1.2;
}

.definition-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    transform: none;
    margin-top: 0;
    padding: 12px 16px;
    background: rgba(26, 27, 40, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    max-width: 350px;
    min-width: 250px;
    z-index: 10010;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in;
}

.definition-content {
    color: #e8eaed;
    font-size: 0.9em;
    line-height: 1.6;
    text-align: left;
}

.definition-content .definition-word {
    margin-bottom: 10px;
    font-size: 1.05em;
    color: #6366f1;
}

.definition-content .definition-word strong {
    color: #8b5cf6;
    font-weight: 600;
}

.definition-content .definition-word em {
    color: #a78bfa;
    font-size: 0.9em;
    font-style: italic;
}

.definition-content .definition-text-content {
    margin-bottom: 12px;
    color: #e8eaed;
    line-height: 1.6;
}

.definition-content .definition-example {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #c0c0c0;
    font-size: 0.9em;
    line-height: 1.5;
    font-style: italic;
}

.definition-content .definition-error {
    color: #ef4444;
    font-size: 0.9em;
    text-align: center;
    padding: 10px;
}

.seed-word-section {
    position: relative;
}

.seed-word {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(99, 102, 241, 1) 0%, rgba(173, 70, 255, 1) 50%, rgba(246, 51, 154, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    line-height: 32px;
}

.input-section {
    text-align: center;
    margin-bottom: 4px;
}

/* More compact in head to head mode */
.game-container:has(.h2h-opponent-view[style*="block"]) .input-section {
    margin-bottom: 6px;
}

.input-label {
    font-size: 0.85em;
    color: #8b8d98;
    margin-bottom: 6px;
    display: block;
}

#word-input {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    font-size: 1em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    background: #1a1b28;
    color: #e8eaed;
}

#word-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    background: #252538;
}

.word-status {
    margin-top: 6px;
    font-size: 0.8em;
    min-height: 16px;
}

.word-status.valid {
    color: #00bc7d;
}

.word-status.invalid {
    color: #ad46ff;
}

/* Continue Playing Section */
.continue-playing-section {
    text-align: center;
    margin: 6px 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.continue-playing-section:empty,
.continue-playing-section:has(button[style*="display: none"]) {
    margin: 0;
    min-height: 0;
}

/* Continue Playing Button */
.continue-playing-btn {
    padding: 10px 30px;
    font-size: 0.95em;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.continue-playing-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.5);
}

.continue-playing-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Continue Mode Selection Modal */
.continue-mode-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.continue-mode-content {
    background: rgba(26, 27, 40, 0.7);
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.continue-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 15px;
}

.continue-mode-header h2 {
    color: #e8eaed;
    margin: 0;
    font-size: 1.5em;
}

.close-continue-mode-btn {
    background: none;
    border: none;
    color: #8b8d98;
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.close-continue-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

.continue-mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.continue-mode-btn {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: #1a1b28;
    color: #e8eaed;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    will-change: transform;
    position: relative;
    overflow: hidden;
}

.continue-mode-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #252538;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 0;
}

.continue-mode-btn > * {
    position: relative;
    z-index: 1;
}

.continue-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
}

.continue-mode-btn:hover::before {
    opacity: 1;
}

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

.continue-mode-icon {
    font-size: 2em;
}

.continue-mode-name {
    font-size: 0.95em;
    font-weight: 600;
}

/* Mode-specific button colors on hover - simplified to prevent glitchiness */
.continue-mode-btn[data-mode="daily"]:hover {
    border-color: rgba(99, 102, 241, 0.6);
}

.continue-mode-btn[data-mode="practice"]:hover {
    border-color: rgba(16, 185, 129, 0.6);
}

.continue-mode-btn[data-mode="timed"]:hover {
    border-color: rgba(243, 156, 18, 0.6);
}

.continue-mode-btn[data-mode="endless"]:hover {
    border-color: rgba(46, 204, 113, 0.6);
}

/* Score Breakdown - Original (hidden) */
.score-breakdown {
    margin-top: 15px;
    padding: 15px;
    background: #1a1b28;
    border-radius: 10px;
    border-left: 2px solid rgba(99, 102, 241, 0.5);
    display: none;
    animation: slideDown 0.3s ease;
}

.score-breakdown.show {
    display: block;
}

/* Mini Score Breakdown - Above Keyboard */
.score-breakdown-mini {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 45, 68, 0.98);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
    min-width: 350px;
    max-width: 600px;
    display: none;
    z-index: 10;
    animation: slideDownMini 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.score-breakdown-mini.show {
    display: block;
}

.score-breakdown-mini-title {
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 12px;
    font-size: 1.1em;
    text-align: center;
    letter-spacing: 0.5px;
}

.score-breakdown-mini-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
    align-items: center;
}

.score-breakdown-mini-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95em;
    padding: 4px 8px;
    background: rgba(26, 26, 46, 0.8);
    border-radius: 6px;
}

.score-breakdown-mini-label {
    color: #8b8d98;
    font-size: 0.9em;
    font-weight: 500;
}

.score-breakdown-mini-value {
    font-weight: 700;
    font-size: 1em;
    color: #e8eaed;
}

.score-breakdown-mini-value.positive {
    color: #00bc7d;
}

.score-breakdown-mini-value.negative {
    color: #ad46ff;
}

.score-breakdown-mini-value.multiplier {
    color: #6366f1;
}

.score-breakdown-mini-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.1);
    padding: 10px 12px;
    border-radius: 8px;
    margin-top: 12px;
}

.score-breakdown-mini-total-label {
    color: #e8eaed;
    font-size: 1em;
}

.score-breakdown-mini-total-value {
    color: #6366f1;
    font-size: 1.4em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

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

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

/* Coach Box Styles (Practice Mode - Old Sidebar Version - kept for reference) */
.coach-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 10px;
    display: none !important; /* Deprecated - use .coach-inline instead */
}

.coach-box-header {
    font-weight: bold;
    color: #10b981;
    font-size: 0.85em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.coach-box-content {
    font-size: 0.85em;
    line-height: 1.5;
}

/* Words and Coach Row Container */
.words-coach-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

/* Typed words takes less space than coach */
.words-coach-row .typed-words-section {
    flex: 2;
    margin-bottom: 0;
    min-width: 0; /* Allow shrinking */
}

/* Coach Panel Side Styles (Practice Mode - Right side) - larger than words section */
.coach-panel-side {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    flex: 3;
    min-width: 0; /* Allow shrinking */
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coach-panel-header {
    font-weight: bold;
    color: #10b981;
    font-size: 0.8em;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding-bottom: 4px;
    margin-bottom: 2px;
}

.coach-panel-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.75em;
    line-height: 1.4;
}

/* Coach welcome/intro styles */
.coach-intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coach-welcome {
    font-size: 1.1em;
    font-weight: bold;
    color: #10b981;
    margin-bottom: 2px;
}

.coach-intro-text {
    font-size: 0.9em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.coach-intro-text strong {
    color: #fcd34d;
}

/* Coach priority intro section */
.coach-priority-intro {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 4px;
}

.coach-priority-label {
    font-size: 0.9em;
    font-weight: 600;
    color: #fbbf24;
    margin-bottom: 6px;
}

.coach-priority-goals {
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
}

.coach-priority-goal {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.9em;
    font-weight: 600;
    color: #a5b4fc;
}

.coach-priority-tip {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
}

.coach-priority-tip strong {
    color: #4ade80;
}

/* Mobile coach welcome */
.mobile-coach-welcome {
    font-size: 1.05em;
    font-weight: bold;
    color: #10b981;
    margin-bottom: 4px;
}

.mobile-coach-intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9em;
    line-height: 1.3;
}

.mobile-coach-intro strong {
    color: #fcd34d;
}

.mobile-coach-priority {
    color: #fbbf24;
    font-weight: 500;
}

.mobile-coach-priority strong {
    color: #a5b4fc;
}

.coach-panel-side.updated {
    animation: coachPulse 0.5s ease-out;
}

/* Scrollbar styling for coach panel */
.coach-panel-side::-webkit-scrollbar {
    width: 4px;
}

.coach-panel-side::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.coach-panel-side::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.3);
    border-radius: 2px;
}

.coach-panel-side::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.5);
}

/* Hide coach panel on mobile (use mobile-coach-panel instead) */
@media (max-width: 768px) {
    .words-coach-row {
        flex-direction: column;
        gap: 6px;
    }

    .coach-panel-side {
        display: none !important;
    }

    .words-coach-row .typed-words-section {
        width: 100%;
    }
}

.coach-feedback {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

.coach-feedback .score-highlight {
    color: #4ade80;
    font-weight: bold;
}

.coach-feedback .penalty-highlight {
    color: #f87171;
    font-weight: bold;
}

.coach-feedback .multiplier-highlight {
    color: #facc15;
    font-weight: bold;
}

.coach-next-step {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95em;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2px;
}

.coach-next-step strong {
    color: #a5b4fc;
}

/* Compact Inline Coach Styles */
.coach-warning-inline {
    color: #f472b6;
    margin-left: 6px;
}

.coach-praise-inline {
    color: #4ade80;
    margin-left: 6px;
}

.coach-focus-compact {
    color: #a5b4fc;
    font-weight: 500;
}

.coach-hint-btn-compact {
    background: rgba(99, 102, 241, 0.3);
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: #a5b4fc;
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
}

.coach-hint-btn-compact:hover {
    background: rgba(99, 102, 241, 0.5);
    color: white;
}

.coach-hint-reveal-compact {
    color: #86efac;
    font-weight: bold;
    margin-left: 6px;
}

.coach-complete-compact {
    color: #4ade80;
    font-weight: 500;
}

/* Side Panel Coach Styles */
.coach-score {
    color: #e8eaed;
    margin-bottom: 4px;
}

.coach-praise-line {
    color: #4ade80;
    font-size: 0.95em;
    margin-bottom: 3px;
}

.coach-warning-line {
    color: #f472b6;
    font-size: 0.95em;
    margin-bottom: 3px;
}

.coach-intro {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.coach-focus-line {
    color: #a5b4fc;
    margin-bottom: 4px;
}

.coach-priority-star {
    margin-right: 2px;
}

.coach-hint-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coach-hint-btn-side {
    background: rgba(99, 102, 241, 0.25);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
    font-size: 0.85em;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coach-hint-btn-side:hover {
    background: rgba(99, 102, 241, 0.4);
    color: white;
}

.coach-hint-reveal-side {
    color: #86efac;
    font-weight: bold;
}

.coach-complete-line {
    color: #4ade80;
    font-weight: 500;
}

/* Conversational Coach Styles */
.coach-focus-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coach-focus-header {
    color: #a5b4fc;
    font-size: 1em;
}

.coach-focus-tip {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9em;
    line-height: 1.4;
    padding-left: 2px;
}

.coach-priority-note {
    color: #fbbf24;
    font-size: 0.85em;
    font-style: italic;
    margin-bottom: 4px;
}

.coach-hint-prompt {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
}

.coach-complete-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coach-complete-tip {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
    line-height: 1.3;
}

/* Goal Celebration Styles (Desktop) */
.coach-goal-celebration {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    animation: celebratePulse 0.6s ease-out;
}

@keyframes celebratePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.coach-celebration-priority {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 165, 0, 0.15) 100%);
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: priorityGlow 1s ease-in-out infinite alternate;
}

@keyframes priorityGlow {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
    100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

.coach-celebration-regular {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(16, 185, 129, 0.12) 100%);
    border: 2px solid rgba(74, 222, 128, 0.5);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.coach-celebration-missed {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.celebration-icon {
    font-size: 1.3em;
}

.celebration-text {
    flex: 1;
    color: #fff;
    font-weight: 600;
}

.celebration-bonus {
    color: #fcd34d;
    font-weight: bold;
    font-size: 1.1em;
}

/* Mobile Goal Celebration Styles */
.mobile-celebration-priority {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 165, 0, 0.15) 100%);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 6px;
    padding: 8px 10px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 6px;
    animation: celebratePulse 0.6s ease-out;
}

.mobile-celebration-regular {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(16, 185, 129, 0.12) 100%);
    border: 2px solid rgba(74, 222, 128, 0.4);
    border-radius: 6px;
    padding: 8px 10px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 6px;
}

.mobile-celebration-missed {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    color: #fbbf24;
    margin-bottom: 6px;
}

.mobile-bonus {
    color: #fcd34d;
    font-weight: bold;
}

/* Mobile Coach Panel (Compact) - positioned higher above keyboard */
.mobile-coach-panel {
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    margin: 4px 10px 12px 10px;
    margin-left: auto;
    max-width: 65%;
    min-height: 80px;
}

.mobile-coach-header {
    font-weight: bold;
    color: #10b981;
    font-size: 0.85em;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding-bottom: 4px;
}

.mobile-coach-feedback {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-coach-score {
    font-weight: bold;
    color: #e8eaed;
    font-size: 1em;
}

.mobile-coach-praise {
    color: #4ade80;
    padding: 4px 6px;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 4px;
    border-left: 2px solid #4ade80;
}

.mobile-coach-focus-section {
    padding: 4px 6px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 4px;
    border-left: 2px solid #6366f1;
}

.mobile-coach-focus-header {
    color: #a5b4fc;
    font-weight: bold;
    margin-bottom: 2px;
}

.mobile-coach-priority-star {
    color: #fcd34d;
}

.mobile-coach-focus-tip {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

.mobile-coach-warning {
    color: #f472b6;
    padding: 6px 8px;
    background: rgba(244, 114, 182, 0.12);
    border-radius: 4px;
    border-left: 2px solid #f472b6;
    font-size: 0.9em;
}

/* Dynamic Coach Feedback Styles */
.coach-summary {
    color: #e8eaed;
    font-size: 1em;
    margin-bottom: 6px;
}

.coach-praise {
    color: #4ade80;
    font-size: 0.9em;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(74, 222, 128, 0.1);
    border-radius: 6px;
    border-left: 3px solid #4ade80;
}

.coach-praise div {
    margin-bottom: 2px;
}

.coach-praise div:last-child {
    margin-bottom: 0;
}

.coach-warning {
    color: #f472b6;
    font-size: 0.9em;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(244, 114, 182, 0.1);
    border-radius: 6px;
    border-left: 3px solid #f472b6;
}

.coach-warning div {
    margin-bottom: 2px;
}

.coach-warning div:last-child {
    margin-bottom: 0;
}

/* Coach End Summary Styles (Practice Mode Finish Screen) */
.coach-end-summary {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 12px;
    text-align: left;
}

.coach-end-main {
    color: #10b981;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 10px;
    line-height: 1.4;
}

.coach-end-highlights {
    margin-bottom: 10px;
}

.coach-end-highlight {
    color: #4ade80;
    font-size: 0.9em;
    padding: 4px 0;
    line-height: 1.3;
}

.coach-end-improvements {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
}

.coach-end-improvement {
    color: #a5b4fc;
    font-size: 0.9em;
    padding: 4px 0;
    line-height: 1.3;
}

/* Practice End Buttons */
.practice-end-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
}

.practice-btn-primary {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.practice-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.practice-btn-secondary {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.practice-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.practice-btn-link {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.practice-btn-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.coach-focus {
    padding: 6px 8px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 6px;
    border-left: 3px solid #6366f1;
}

.coach-focus strong {
    color: #a5b4fc;
}

.coach-focus-tip {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85em;
    margin-top: 4px;
}

.coach-priority-badge {
    color: #fcd34d;
    font-size: 0.85em;
    margin-left: 6px;
}

.coach-hint-section {
    margin-top: 8px;
}

.coach-hint-btn {
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.coach-hint-btn:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.6);
    transform: translateY(-1px);
}

.coach-hint-reveal {
    color: #4ade80;
    font-size: 0.9em;
    padding: 4px 0;
}

.coach-hint-reveal strong {
    color: #86efac;
    letter-spacing: 0.5px;
}

.coach-complete {
    color: #4ade80;
    text-align: center;
    padding: 8px;
}

/* Coach panel pulse animation on update */
.coach-box.updated {
    animation: coachPulse 0.5s ease-out;
}

.coach-feedback.updated {
    animation: feedbackPulse 0.5s ease-out;
}

@keyframes coachPulse {
    0% {
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    }
    50% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    }
    100% {
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes feedbackPulse {
    0% {
        background-color: transparent;
    }
    30% {
        background-color: rgba(16, 185, 129, 0.15);
    }
    100% {
        background-color: transparent;
    }
}

/* Mobile Coach Enhancements */
.mobile-coach-summary {
    font-weight: bold;
    color: #e8eaed;
}

.mobile-coach-divider {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 6px;
}

.mobile-coach-focus {
    color: #a5b4fc;
}

.mobile-coach-hint-btn {
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.85em;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
}

.mobile-coach-hint-btn:hover {
    color: #818cf8;
    text-decoration: underline;
}

.mobile-coach-hint-reveal {
    color: #4ade80;
    font-size: 0.85em;
    margin-left: 6px;
}

.mobile-coach-hint-reveal strong {
    color: #86efac;
}

.typed-words-section {
    margin-bottom: 0;
    padding: 8px;
    background: #1a1b28;
    border-radius: 10px;
    min-height: 40px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* More compact in head to head mode */
.game-container:has(.h2h-opponent-view[style*="block"]) .typed-words-section {
    margin-bottom: 6px;
    padding: 6px;
    min-height: 35px;
}

.typed-label {
    font-size: 0.8em;
    color: #8b8d98;
    margin-bottom: 6px;
}

.typed-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.word-tag {
    background: linear-gradient(135deg, #6366f1, #9810fa);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9em;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.word-tag:hover {
    background: linear-gradient(135deg, #9810fa, #6366f1);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(74, 144, 226, 0.4);
}

/* Word Tooltip */
.word-tooltip {
    position: absolute;
    background: rgba(45, 45, 68, 0.98);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: none;
    z-index: 1000;
    min-width: 280px;
    max-width: 400px;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
    /* Ensure consistent positioning - always above */
    bottom: auto !important;
    margin-bottom: 0 !important;
}

.word-tooltip.show {
    display: block;
}

.word-tooltip-title {
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 10px;
    font-size: 1em;
    text-align: center;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 6px;
}

.word-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.word-tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    padding: 4px 0;
}

.word-tooltip-label {
    color: #8b8d98;
    font-weight: 500;
}

.word-tooltip-value {
    font-weight: 600;
    color: #e8eaed;
}

.word-tooltip-value.positive {
    color: #00bc7d;
}

.word-tooltip-value.negative {
    color: #ad46ff;
}

.word-tooltip-value.multiplier {
    color: #6366f1;
}

.word-tooltip-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.95em;
    background: rgba(74, 144, 226, 0.15);
    padding: 8px 10px;
    border-radius: 6px;
}

.word-tooltip-total-label {
    color: #e8eaed;
}

.word-tooltip-total-value {
    color: #6366f1;
    font-size: 1.2em;
}

/* Priority Goal Bonus in word tooltip */
.word-tooltip-priority-bonus {
    margin-top: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 165, 0, 0.2) 100%);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: priorityBonusPulse 2s ease-in-out infinite;
}

.word-tooltip-priority-label {
    color: #ffd700;
    font-weight: 600;
    font-size: 0.85em;
}

.word-tooltip-priority-value {
    color: #4ade80;
    font-weight: 700;
    font-size: 1.3em;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

@keyframes priorityBonusPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    }
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Footer */
.site-footer {
    margin-top: 40px;
    margin-bottom: 50px; /* Space for bottom anchor ad */
    padding: 20px;
    text-align: center;
    background: #1a1b28;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #8b8d98;
}

/* Footer on Entry Screen */
.entry-footer {
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
    background: rgba(26, 27, 40, 0.9);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.footer-content {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-content p {
    margin: 0;
    font-size: 0.9em;
}

.footer-link {
    color: #6366f1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #357abd;
    text-decoration: underline;
}

/* Goal Tooltip */
.goal-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(102, 126, 234, 0.4);
    display: none;
    z-index: 1001;
    min-width: 300px;
    max-width: 450px;
    pointer-events: none;
    animation: tooltipFadeIn 0.2s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.goal-tooltip.show {
    display: block;
}

.goal-tooltip-title {
    font-weight: 700;
    color: #667eea;
    margin-bottom: 12px;
    font-size: 1.1em;
    text-align: center;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    padding-bottom: 8px;
}

.goal-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px; /* Extra padding at bottom to prevent cutoff */
}

.goal-tooltip-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(102, 126, 234, 0.2);
}

.goal-tooltip-section-title {
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
    font-size: 0.9em;
}

.goal-tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    padding: 4px 0;
}

.goal-tooltip-label {
    color: #555;
    font-weight: 500;
}

.goal-tooltip-value {
    font-weight: 600;
    color: #667eea;
}

.goal-tooltip-value.completed {
    color: #00bc7d;
}

.goal-tooltip-list {
    list-style: none;
    padding-left: 0;
    margin: 6px 0;
}

.goal-tooltip-list li {
    font-size: 0.85em;
    color: #666;
    padding: 3px 0;
    padding-left: 15px;
    position: relative;
}

.goal-tooltip-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

.goal-item {
    cursor: help;
    transition: background-color 0.2s;
}

.goal-item:hover {
    background-color: rgba(102, 126, 234, 0.05);
}

.keyboard-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    flex-shrink: 0;
}

/* Less margin in head to head mode */
.game-container:has(.h2h-opponent-view[style*="block"]) .keyboard-container {
    margin-top: 10px;
}

.path-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
    display: none; /* Hide path canvas - paths removed per user request */
}

.keyboard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #1a1b28;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Grid Lines - Show when enabled */
.keyboard.show-grid {
    position: relative;
}

/* Left Hand Keys - modern cool slate grey */
.keyboard.show-grid .key[data-key="q"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="w"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="e"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="r"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="t"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="a"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="s"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="d"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="f"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="g"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="z"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="x"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="c"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="v"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="b"]:not(.used-once):not(.used-twice):not(.used-overused) {
    background: linear-gradient(145deg, #3d4654, #2d343f) !important;
    border-color: rgba(100, 116, 139, 0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Right Hand Keys - modern warm stone grey */
.keyboard.show-grid .key[data-key="y"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="u"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="i"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="o"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="p"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="h"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="j"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="k"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="l"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="n"]:not(.used-once):not(.used-twice):not(.used-overused),
.keyboard.show-grid .key[data-key="m"]:not(.used-once):not(.used-twice):not(.used-overused) {
    background: linear-gradient(145deg, #4a4540, #3a3632) !important;
    border-color: rgba(120, 113, 108, 0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Row dividers - subtle horizontal dotted lines between rows */
.keyboard.show-grid .key-row::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
    pointer-events: none;
    z-index: 2;
}

.keyboard.show-grid .key-row:last-child::after {
    display: none;
}

/* Row labels on the left side */
.keyboard.show-grid::before {
    content: 'TOP';
    position: absolute;
    left: -40px;
    top: 20px;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    font-weight: 600;
}

/* Column lines that span all rows - created via JavaScript */
.keyboard.show-grid .grid-column-line {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 1px;
    border-left: 1px dotted rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 1;
}

/* Left/Right hand divider line - spans all rows, more prominent */
.keyboard.show-grid .grid-hand-divider {
    position: absolute;
    top: -8px;
    bottom: -8px;
    width: 2px;
    border-left: 2px dashed rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: 3;
}

.key-row {
    display: flex;
    gap: 6px;
    position: relative;
    width: 100%;
    max-width: 566px; /* 10 keys * 50px + 9 gaps * 6px = 554px, rounded up */
    margin: 0 auto;
}

/* Row 1: QWERTY - center it */
.key-row:first-child {
    justify-content: center;
}

/* Row 2: ASDF - offset to align A under Q, G under T */
.key-row-2 {
    justify-content: flex-start;
    padding-left: 28px; /* Half key width to align columns */
}

/* Row 3: ZXCV - same offset to align Z under A, B under G */
.key-row-3 {
    justify-content: flex-start;
    padding-left: 28px; /* Same offset as row 2 */
}

.key {
    position: relative;
    background: rgba(45, 46, 64, 0.5);
    color: #e8eaed;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 12px;
    width: 50px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    /* 3D physical feel - raised key */
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Hand-based color coding removed - all keys now start as neutral dark */

.key:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.key.active {
    /* Sinking effect when pressed */
    transform: translateY(2px) scale(0.98);
    z-index: 10;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.05);
    background: rgba(26, 27, 40, 0.8);
}

/* Key frequency colors - override default dark */
.key.used-once,
.key.used-twice {
    /* Indigo: Used within allowed limit (Option 2) */
    background: linear-gradient(145deg, #6366f1, #4f46e5) !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.key.used-overused {
    /* Pink: Overused (Penalty active) - Option 2 */
    background: linear-gradient(145deg, #f6339a, #d91a7a) !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px rgba(246, 51, 154, 0.5);
    color: #ffffff;
}

/* Used key colors are the same with or without keyboard guide - no overrides needed */

/* Pop animation is driven by JS Web Animations API for iOS WKWebView reliability */

.key-wide {
    min-width: 80px;
}

.key-extra-wide {
    min-width: 100px;
}

.key-ultra-wide {
    min-width: 300px;
}

/* Path line styling */
.path-line {
    stroke: #2ecc71;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 5,5;
    opacity: 0.8;
}

@keyframes dash {
    to {
        stroke-dashoffset: -10;
    }
}

/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

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

/* Ensure intro overlay can be displayed */
#intro-overlay {
    display: none;
    z-index: 2001; /* Higher than entry overlay (2000) */
    background: #0a0b14; /* Solid background to hide gameplay behind */
}

#intro-overlay[style*="flex"] {
    display: flex !important;
}

/* Interactive Guided Session - Practice Tutorial Styles */
.practice-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: 20px 30px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    animation: practiceOverlayFadeIn 0.5s ease-out forwards;
}

@keyframes practiceOverlayFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.key-glow {
    animation: keyGlowPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 40px rgba(99, 102, 241, 0.6) !important;
    border-color: rgba(99, 102, 241, 1) !important;
    z-index: 10;
    position: relative;
}

@keyframes keyGlowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 40px rgba(99, 102, 241, 0.6);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 1), 0 0 60px rgba(99, 102, 241, 0.8);
        transform: scale(1.05);
    }
}

.symmetry-celebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 10001;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    padding: 30px 50px;
    border-radius: 16px;
    color: #ffffff;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
    border: 2px solid rgba(99, 102, 241, 0.6);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.efficiency-tooltip {
    position: absolute;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
}

.toast-container {
    position: fixed;
    z-index: 10003;
    pointer-events: none;
}

.toast-notification {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.toast-message {
    color: #ffffff;
}

.toast-value {
    color: #4ade80;
    font-weight: 700;
    font-size: 1.2em;
}

/* Practice mode contextual cues */
.practice-cue {
    position: fixed;
    z-index: 10004;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    padding: 15px 25px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 1em;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 400px;
    pointer-events: none;
    line-height: 1.4;
}

/* Practice guidance box in corner */
.practice-guidance-box {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10005;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    padding: 20px 25px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.95em;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.5);
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.4s ease;
    max-width: 350px;
    pointer-events: none;
    line-height: 1.5;
}

.practice-guidance-header {
    font-size: 1.1em;
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    padding-bottom: 8px;
}

.practice-guidance-text {
    color: #ffffff;
    margin-bottom: 12px;
}

.practice-guidance-hint {
    margin-top: 12px;
    padding: 10px 15px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    border-left: 3px solid #6366f1;
    color: #c7d2fe;
    font-size: 0.9em;
}

.practice-guidance-hint strong {
    color: #ffffff;
    font-weight: 700;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: rgba(26, 27, 40, 0.7);
    border-radius: 20px;
    padding: 30px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 15px;
}

.modal-header h2 {
    color: #e8eaed;
    margin: 0;
    font-size: 2em;
}

.close-button {
    background: #ad46ff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.close-button:hover {
    background: #c0392b;
    transform: rotate(90deg) scale(1.1);
}

.modal-body {
    color: #e8eaed;
}

.instruction-section {
    margin-bottom: 25px;
}

.instruction-section h3 {
    color: #6366f1;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.instruction-section p {
    line-height: 1.6;
    color: #8b8d98;
    margin-bottom: 10px;
}

.instruction-section ol,
.instruction-section ul {
    margin-left: 20px;
    line-height: 1.8;
}

.instruction-section li {
    margin-bottom: 8px;
}

.instruction-section strong {
    color: #764ba2;
}

/* Confetti Canvas */
/* Confetti canvas removed - replaced with soft goal block celebrations */

/* Enhanced Goal Completion Animations */
.goal-item.completed {
    animation: goalComplete 0.6s ease;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: #00bc7d;
    box-shadow: 0 0 20px rgba(39, 174, 96, 0.5);
}

@keyframes goalBlockCelebrate {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(39, 174, 96, 0);
        opacity: 1;
    }
    30% {
        transform: scale(1.08);
        box-shadow: 0 0 40px rgba(39, 174, 96, 0.8);
        opacity: 1;
    }
    60% {
        transform: scale(1.05);
        box-shadow: 0 0 35px rgba(39, 174, 96, 0.7);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 25px rgba(39, 174, 96, 0.5);
        opacity: 1;
    }
}

.goal-item.completed .goal-checkbox {
    animation: checkmarkPop 0.5s ease;
}

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

/* Celebration pulse for keys */
.key.celebrate {
    animation: celebrate 0.8s ease;
}

@keyframes celebrate {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 rgba(46, 204, 113, 0);
    }
    25% { 
        transform: scale(1.3) rotate(5deg);
        box-shadow: 0 0 30px rgba(46, 204, 113, 0.8);
    }
    50% { 
        transform: scale(1.2) rotate(-5deg);
        box-shadow: 0 0 25px rgba(46, 204, 113, 0.6);
    }
    75% { 
        transform: scale(1.3) rotate(5deg);
        box-shadow: 0 0 30px rgba(46, 204, 113, 0.8);
    }
}

/* Standalone Leaderboard Modal */
.leaderboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2500;
    animation: fadeIn 0.3s ease;
}

.leaderboard-modal-content {
    background: rgba(26, 27, 40, 0.7);
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 15px;
}

.leaderboard-modal-header h2 {
    color: #6366f1;
    margin: 0;
    font-size: 1.8em;
}

.close-leaderboard-btn {
    background: transparent;
    border: none;
    font-size: 2em;
    color: #8b8d98;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 1;
}

.close-leaderboard-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
    transform: rotate(90deg);
}

.leaderboard-modal-body {
    padding: 10px 0;
}

/* Entry Leaderboard Friends Toggle */
.entry-lb-friends-wrap {
    display: flex; align-items: center; gap: 5px;
    justify-content: flex-end;
    padding: 4px 4px 0;
}
.entry-lb-friends-label {
    font-size: 0.62em; color: rgba(255,255,255,0.35);
    font-weight: 500; letter-spacing: 0.2px;
}
.entry-lb-friends-toggle {
    width: 28px; height: 16px;
    background: rgba(255,255,255,0.12);
    border-radius: 8px; cursor: pointer;
    position: relative; transition: background 0.25s;
}
.entry-lb-friends-toggle.active {
    background: #6366f1;
}
.entry-lb-friends-thumb {
    width: 12px; height: 12px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%; position: absolute;
    top: 2px; left: 2px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.entry-lb-friends-toggle.active .entry-lb-friends-thumb {
    transform: translateX(12px);
    background: #fff;
}

/* Daily Completed Recap Overlay */
.dcr-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0); display: flex;
    justify-content: center; align-items: center;
    z-index: 4000; transition: background 0.3s;
}
.dcr-overlay.dcr-active { background: rgba(0,0,0,0.6); }
.dcr-overlay.dcr-out { background: rgba(0,0,0,0); }
.dcr-card {
    position: relative;
    background: linear-gradient(170deg, rgba(30,32,52,0.97) 0%, rgba(18,18,32,0.98) 100%);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 22px; padding: 32px 28px 24px;
    width: 290px; text-align: center; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 80px rgba(99,102,241,0.08);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    transform: scale(0.8) translateY(30px); opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
}
.dcr-overlay.dcr-active .dcr-card { transform: scale(1) translateY(0); opacity: 1; }
.dcr-overlay.dcr-out .dcr-card { transform: scale(0.92) translateY(12px); opacity: 0; transition-duration: 0.2s; }
/* Shimmer sweep */
.dcr-shimmer {
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(165,180,252,0.06) 50%, transparent 60%);
    animation: dcrShimmer 2.5s ease-in-out 0.5s;
    pointer-events: none; z-index: 1;
}
@keyframes dcrShimmer { 0% { left: -60%; } 100% { left: 160%; } }
/* Close button */
.dcr-close {
    position: absolute; top: 4px; right: 4px;
    background: none; border: none; color: rgba(255,255,255,0.35);
    font-size: 1.6em; cursor: pointer; line-height: 1;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    z-index: 3; transition: color 0.15s; -webkit-tap-highlight-color: transparent;
}
.dcr-close:hover, .dcr-close:active { color: rgba(255,255,255,0.7); }
/* Staggered entrance for content elements */
.dcr-stagger {
    opacity: 0; transform: translateY(10px);
    animation: dcrStaggerIn 0.4s ease-out forwards;
}
.dcr-stagger:nth-child(2) { animation-delay: 0.15s; }
.dcr-stagger:nth-child(3) { animation-delay: 0.25s; }
.dcr-stagger:nth-child(4) { animation-delay: 0.35s; }
.dcr-stagger:nth-child(5) { animation-delay: 0.42s; }
.dcr-stagger:nth-child(6) { animation-delay: 0.5s; }
.dcr-stagger:nth-child(7) { animation-delay: 0.58s; }
@keyframes dcrStaggerIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* Heading */
.dcr-heading {
    font-size: 0.78em; font-weight: 700; letter-spacing: 0.8px;
    text-transform: uppercase; color: rgba(165,180,252,0.7);
    margin-bottom: 18px; position: relative; z-index: 1;
}
/* Rank section with glow ring */
.dcr-rank {
    display: flex; align-items: baseline; justify-content: center;
    gap: 2px; margin-bottom: 10px; position: relative; z-index: 1;
}
.dcr-rank-glow {
    position: absolute; top: 50%; left: 50%; width: 70px; height: 70px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
    animation: dcrGlowPulse 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dcrGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}
.dcr-rank-num {
    font-size: 3em; font-weight: 800;
    background: linear-gradient(135deg, #c7d2fe, #818cf8, #6366f1);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1; position: relative; z-index: 1;
    filter: drop-shadow(0 0 8px rgba(99,102,241,0.3));
}
.dcr-rank-suf {
    font-size: 1.1em; font-weight: 700;
    color: rgba(165,180,252,0.65); margin-right: 6px;
}
.dcr-rank-ctx {
    font-size: 0.72em; color: rgba(255,255,255,0.3); font-weight: 500;
}
/* Score */
.dcr-score {
    font-size: 1.7em; font-weight: 700; color: #e8eaed;
    margin-bottom: 2px; position: relative; z-index: 1;
}
.dcr-score-unit { font-size: 0.5em; color: rgba(255,255,255,0.35); font-weight: 500; }
.dcr-words {
    font-size: 0.76em; color: rgba(255,255,255,0.3);
    margin-bottom: 20px; position: relative; z-index: 1;
}
/* Share button */
.dcr-share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 24px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff; font-size: 0.85em;
    font-weight: 600; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
    position: relative; z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
.dcr-share-btn:active { transform: scale(0.95); }
.dcr-share-btn:hover { box-shadow: 0 6px 24px rgba(99,102,241,0.45); }
/* Reminder */
.dcr-reminder {
    font-size: 0.68em; color: rgba(255,255,255,0.2);
    margin-top: 16px; position: relative; z-index: 1;
}
/* Sparkles */
.dcr-sparkles-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; border-radius: 22px; z-index: 0;
}
.dcr-spark {
    position: absolute; bottom: -4px; width: 3px; height: 3px;
    border-radius: 50%; background: #a5b4fc;
    box-shadow: 0 0 6px 1px rgba(165,180,252,0.5);
    animation: dcrSpark 2.8s ease-out forwards; opacity: 0;
}
.dcr-spark:nth-child(odd) { background: #c084fc; box-shadow: 0 0 6px 1px rgba(192,132,252,0.5); }
.dcr-spark:nth-child(3n) { background: #fbbf24; box-shadow: 0 0 5px 1px rgba(251,191,36,0.35); width: 2px; height: 2px; }
.dcr-spark:nth-child(5n) { background: #818cf8; width: 4px; height: 4px; }
@keyframes dcrSpark {
    0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
    8% { transform: translateY(-20px) translateX(var(--drift,0px)) scale(1); opacity: 0.8; }
    100% { transform: translateY(-280px) translateX(var(--drift,0px)) scale(0); opacity: 0; }
}

/* Leaderboard Toggle (standalone modal) */
.leaderboard-toggle-wrap {
    display: flex; justify-content: center; margin-bottom: 16px;
}
.leaderboard-toggle {
    display: inline-flex; background: rgba(255, 255, 255, 0.08);
    border-radius: 8px; padding: 3px; gap: 2px;
}
.leaderboard-toggle-btn {
    padding: 6px 18px; border: none; border-radius: 6px;
    background: transparent; color: rgba(255, 255, 255, 0.45);
    font-size: 0.85em; font-weight: 600; cursor: pointer;
    transition: background 0.25s, color 0.25s;
}
.leaderboard-toggle-btn.active {
    background: #6366f1; color: #fff;
}
.leaderboard-toggle-btn:not(.active):hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Victory Sparkle Particles */
.victory-sparkles {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden;
    border-radius: 20px; z-index: 0;
}
.victory-spark {
    position: absolute;
    bottom: -6px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #a5b4fc;
    box-shadow: 0 0 6px 1px rgba(165, 180, 252, 0.5);
    animation: victorySpark 2.5s ease-out forwards;
}
.victory-spark:nth-child(odd) {
    background: #c084fc;
    box-shadow: 0 0 6px 1px rgba(192, 132, 252, 0.5);
    width: 3px; height: 3px;
}
.victory-spark:nth-child(3n) {
    background: #fbbf24;
    box-shadow: 0 0 6px 1px rgba(251, 191, 36, 0.4);
    width: 3px; height: 3px;
}
@keyframes victorySpark {
    0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
    10% { transform: translateY(-20px) translateX(var(--drift, 0px)) scale(1); opacity: 1; }
    100% { transform: translateY(-400px) translateX(var(--drift, 0px)) scale(0); opacity: 0; }
}

/* Victory Screen */
.victory-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 3000;
    animation: fadeIn 0.5s ease;
    overflow-y: auto;
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.victory-content {
    background: rgba(26, 27, 40, 0.7);
    border-radius: 20px;
    padding: 25px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.5s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 20px auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
}

.victory-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 24px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.3s ease;
    z-index: 1000;
    font-weight: bold;
    opacity: 1 !important;
    visibility: visible !important;
}

.victory-close-btn:hover {
    background: #c0392b;
    transform: scale(1.1);
}

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

.victory-content h2 {
    color: #6366f1;
    margin-bottom: 15px;
    font-size: 2em;
    padding-top: 25px;
}

.victory-summary {
    margin-bottom: 15px;
}

.victory-message {
    font-size: 1.1em;
    color: #e8eaed;
    line-height: 1.5;
    margin-bottom: 20px;
}

.score-display-container {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 0;
}

.score-row:last-child {
    margin-bottom: 0;
}

.total-score-row {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.score-label {
    font-size: 1.2em;
    color: #8b8d98;
    font-weight: 500;
}

.score-value.animated-score {
    font-size: 2em;
    font-weight: bold;
    color: #6366f1;
    font-family: 'Inter', sans-serif;
    min-width: 120px;
    text-align: right;
}

.score-value.total-score {
    font-size: 2.5em;
    color: #8b5cf6;
}

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

.animated-score.pulse {
    animation: scorePulse 0.5s ease;
}

.daily-reminder {
    margin: 15px 0;
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 8px;
    text-align: center;
}

.daily-reminder-text {
    color: #8b8d98;
    font-size: 0.95em;
    line-height: 1.5;
    margin: 0;
}

.daily-reminder-text strong {
    color: #6366f1;
}

.leaderboard-section {
    margin: 15px 0;
    padding: 15px;
    background: #1a1b28;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.leaderboard-section h3 {
    color: #6366f1;
    margin: 0;
    font-size: 1.2em;
}

.clear-leaderboard-btn {
    background: #ad46ff;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.clear-leaderboard-btn:hover {
    background: #c0392b;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

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

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #1a1b28;
    border-radius: 8px;
    border-left: 2px solid rgba(99, 102, 241, 0.5);
}

.leaderboard-item.leaderboard-you {
    background: rgba(99, 102, 241, 0.15);
    border-left: 3px solid #6366f1;
}

.leaderboard-separator {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2em;
    letter-spacing: 4px;
    padding: 4px 0;
}


.leaderboard-rank {
    font-weight: bold;
    color: #6366f1;
    font-size: 1.2em;
    min-width: 30px;
}

.leaderboard-name {
    flex: 1;
    text-align: left;
    margin-left: 15px;
    font-weight: bold;
    color: #e8eaed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.leaderboard-score {
    font-weight: bold;
    color: #00bc7d;
    font-size: 1.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    /* Hide word count to save space */
    .leaderboard-words {
        display: none;
    }

    /* Reduce score font size */
    .leaderboard-score {
        font-size: 0.95em;
    }

    /* Tighten spacing */
    .leaderboard-name {
        margin-left: 8px;
    }

    .leaderboard-item {
        padding: 8px 10px;
    }

    .leaderboard-section {
        padding: 10px;
    }
}

/* Share Section */
.share-section {
    margin: 15px 0;
    padding: 15px;
    background: rgba(45, 46, 64, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.share-section h3 {
    color: #e8eaed;
    font-size: 1.1em;
    margin-bottom: 12px;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}



.generate-share-card-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(145deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.generate-share-card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
    background: linear-gradient(145deg, #4f46e5, #4338ca);
}

/* ============ Victory Screen Variants ============ */

/* ---- Variant A: Celebration ---- */
.victory-content.victory-variant-a {
    border-color: rgba(139,92,246,0.2);
}
.victory-variant-a .victory-confetti {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; overflow: hidden; z-index: 0;
}
.victory-variant-a .victory-confetti span {
    position: absolute; width: 8px; height: 8px; border-radius: 2px; top: -10px; opacity: 0;
}
.victory-variant-a .victory-confetti span:nth-child(1) { background: #fbbf24; left: 10%; animation: victoryConfetti 2s ease-out 0.2s forwards; transform: rotate(45deg); }
.victory-variant-a .victory-confetti span:nth-child(2) { background: #6366f1; left: 25%; animation: victoryConfetti 2.3s ease-out 0.35s forwards; width: 6px; height: 10px; }
.victory-variant-a .victory-confetti span:nth-child(3) { background: #10b981; left: 40%; animation: victoryConfetti 1.8s ease-out 0.15s forwards; transform: rotate(30deg); }
.victory-variant-a .victory-confetti span:nth-child(4) { background: #f43f5e; left: 55%; animation: victoryConfetti 2.4s ease-out 0.45s forwards; width: 5px; height: 9px; }
.victory-variant-a .victory-confetti span:nth-child(5) { background: #a5b4fc; left: 70%; animation: victoryConfetti 1.9s ease-out 0.3s forwards; transform: rotate(60deg); }
.victory-variant-a .victory-confetti span:nth-child(6) { background: #fbbf24; left: 82%; animation: victoryConfetti 2.1s ease-out 0.5s forwards; width: 9px; height: 5px; }
.victory-variant-a .victory-heading-glow {
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
    width: 250px; height: 80px;
    background: radial-gradient(ellipse, rgba(139,92,246,0.2) 0%, transparent 70%);
    opacity: 0; pointer-events: none; z-index: 0;
    animation: vFadeIn 0.6s ease 0.4s forwards;
}
.victory-variant-a h2 {
    opacity: 0; transform: scale(0.5); filter: blur(6px);
    animation: victoryVaHeadingIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s forwards !important;
    position: relative; z-index: 1;
}
.victory-variant-a .victory-message {
    opacity: 0; animation: vFadeIn 0.4s ease 0.7s forwards;
}
.victory-variant-a .score-display-container {
    background: rgba(139,92,246,0.06); border-color: rgba(139,92,246,0.15);
}
.victory-variant-a .score-row {
    opacity: 0; transform: translateX(-15px);
}
.victory-variant-a .score-row:nth-child(1) { animation: victoryVaRowSlide 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.9s forwards; }
.victory-variant-a .score-row:nth-child(2) { animation: victoryVaRowSlide 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.1s forwards; }
.victory-variant-a .total-score-row { animation: victoryVaRowSlide 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.35s forwards !important; }
.victory-variant-a .leaderboard-section { opacity: 0; animation: vSlideUp 0.4s ease 1.5s forwards; }
.victory-variant-a .leaderboard-entry { opacity: 0; transform: translateX(10px); }
.victory-variant-a .leaderboard-entry:nth-child(1) { animation: victoryVaLbRow 0.3s ease 1.65s forwards; }
.victory-variant-a .leaderboard-entry:nth-child(2) { animation: victoryVaLbRow 0.3s ease 1.75s forwards; }
.victory-variant-a .leaderboard-entry:nth-child(3) { animation: victoryVaLbRow 0.3s ease 1.85s forwards; }
.victory-variant-a .leaderboard-entry:nth-child(4) { animation: victoryVaLbRow 0.3s ease 1.95s forwards; }
.victory-variant-a .leaderboard-entry:nth-child(5) { animation: victoryVaLbRow 0.3s ease 2.05s forwards; }
.victory-variant-a .daily-reminder { opacity: 0; animation: vFadeIn 0.3s ease 2.2s forwards; }
.victory-variant-a .share-section { opacity: 0; animation: vFadeIn 0.3s ease 2.3s forwards; }
.victory-variant-a .victory-buttons { opacity: 0; animation: victoryVaSpringUp 0.5s cubic-bezier(0.34,1.56,0.64,1) 2.4s forwards; }
/* Shimmer */
.victory-variant-a::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(139,92,246,0.06) 45%, rgba(139,92,246,0.1) 50%, rgba(139,92,246,0.06) 55%, transparent 70%);
    opacity: 0; pointer-events: none; z-index: 1;
    animation: victoryShimmer 1.2s ease-in-out 2.8s forwards;
}

@keyframes victoryConfetti { 0%{opacity:1;top:-10px;transform:rotate(0deg)} 100%{opacity:0;top:110%;transform:rotate(720deg)} }
@keyframes victoryVaHeadingIn { 0%{opacity:0;transform:scale(0.5);filter:blur(6px)} 60%{opacity:1;transform:scale(1.1);filter:none} 100%{opacity:1;transform:scale(1);filter:none} }
@keyframes victoryVaRowSlide { 0%{opacity:0;transform:translateX(-15px)} 60%{transform:translateX(3px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes victoryVaLbRow { 0%{opacity:0;transform:translateX(10px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes victoryVaSpringUp { 0%{opacity:0;transform:translateY(14px)} 60%{opacity:1;transform:translateY(-3px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes vFadeIn { 0%{opacity:0} 100%{opacity:1} }
@keyframes vSlideUp { 0%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes victoryShimmer { 0%{opacity:0;left:-100%} 20%{opacity:1} 100%{opacity:0;left:150%} }

/* ---- Variant B: Trophy Reveal ---- */
.victory-content.victory-variant-b {
    background: linear-gradient(170deg, rgba(26,27,40,0.85) 0%, rgba(20,18,30,0.9) 100%);
    border-color: rgba(251,191,36,0.12);
}
.victory-variant-b .victory-trophy {
    font-size: 3em; text-align: center; margin-bottom: 0;
    opacity: 0; transform: scale(0.3) rotate(-15deg);
    animation: victoryVbTrophyIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.15s forwards;
    position: relative; z-index: 1;
}
.victory-variant-b .victory-gold-glow {
    position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 180px;
    background: radial-gradient(ellipse, rgba(251,191,36,0.08) 0%, transparent 70%);
    opacity: 0; pointer-events: none; z-index: 0;
    animation: vFadeIn 0.8s ease 0.3s forwards;
}
.victory-variant-b h2 {
    color: #fbbf24 !important; text-transform: uppercase; letter-spacing: 1.5px;
    font-size: 1.4em !important;
    opacity: 0; transform: translateY(6px);
    animation: vSlideUp 0.4s ease 0.6s forwards !important;
    position: relative; z-index: 1;
}
.victory-variant-b .victory-message {
    opacity: 0; animation: vFadeIn 0.4s ease 0.85s forwards;
}
.victory-variant-b .score-display-container {
    display: flex !important; flex-direction: row !important; gap: 8px;
    background: transparent; border: none; padding: 0;
}
.victory-variant-b .score-row {
    flex: 1; flex-direction: column; align-items: center; gap: 4px;
    background: rgba(251,191,36,0.05); border: 1px solid rgba(251,191,36,0.12);
    border-radius: 12px; padding: 12px 8px; margin: 0;
    opacity: 0; transform: translateY(12px) scale(0.9);
}
.victory-variant-b .score-row:nth-child(1) { animation: victoryVbCardIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 1.0s forwards; }
.victory-variant-b .score-row:nth-child(2) { animation: victoryVbCardIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 1.2s forwards; }
.victory-variant-b .total-score-row {
    border-top: none; margin-top: 0; padding-top: 12px;
    animation: victoryVbCardIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 1.4s forwards !important;
}
.victory-variant-b .score-label { font-size: 0.7em; text-align: center; }
.victory-variant-b .score-value.animated-score { font-size: 1.4em; color: #fbbf24; text-align: center; min-width: auto; }
.victory-variant-b .score-value.total-score { color: #f59e0b; font-size: 1.6em; }
.victory-variant-b .leaderboard-section {
    border-color: rgba(251,191,36,0.1);
    opacity: 0; animation: vSlideUp 0.4s ease 1.65s forwards;
}
.victory-variant-b .leaderboard-section h3 { color: #fbbf24; }
.victory-variant-b .daily-reminder { opacity: 0; animation: vFadeIn 0.3s ease 1.9s forwards; }
.victory-variant-b .share-section { opacity: 0; animation: vFadeIn 0.3s ease 2.0s forwards; }
.victory-variant-b .victory-buttons { opacity: 0; animation: vSlideUp 0.4s ease 2.1s forwards; }
.victory-variant-b .review-game-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #111;
    box-shadow: 0 4px 15px rgba(251,191,36,0.3);
}
/* Gold shimmer */
.victory-variant-b::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent 30%, rgba(251,191,36,0.04) 45%, rgba(251,191,36,0.08) 50%, rgba(251,191,36,0.04) 55%, transparent 70%);
    opacity: 0; pointer-events: none;
    animation: victoryShimmer 1.4s ease-in-out 2.4s forwards;
}

@keyframes victoryVbTrophyIn { 0%{opacity:0;transform:scale(0.3) rotate(-15deg)} 50%{opacity:1;transform:scale(1.15) rotate(5deg)} 70%{transform:scale(0.95) rotate(-2deg)} 100%{opacity:1;transform:scale(1) rotate(0deg)} }
@keyframes victoryVbCardIn { 0%{opacity:0;transform:translateY(12px) scale(0.9)} 60%{transform:translateY(-2px) scale(1.03)} 100%{opacity:1;transform:translateY(0) scale(1)} }

/* ---- Variant C: Dashboard ---- */
.victory-content.victory-variant-c {
    background: rgba(20,22,35,0.92);
    border-color: rgba(16,185,129,0.12);
}
.victory-variant-c .victory-accent-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
    transform: scaleX(0); transform-origin: left;
    animation: victoryVcBarDraw 0.5s ease-out 0.1s forwards;
}
.victory-variant-c h2 {
    color: #10b981 !important;
    opacity: 0; animation: vFadeIn 0.4s ease 0.3s forwards !important;
}
.victory-variant-c .victory-message {
    opacity: 0; animation: vFadeIn 0.4s ease 0.5s forwards;
}
.victory-variant-c .score-display-container {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px;
    background: transparent; border: none; padding: 0;
}
.victory-variant-c .score-row {
    flex-direction: column; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.03); border-radius: 12px; padding: 12px 8px; margin: 0;
    opacity: 0; transform: scale(0.85);
}
.victory-variant-c .score-row:nth-child(1) { animation: victoryVcPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.7s forwards; }
.victory-variant-c .score-row:nth-child(2) { animation: victoryVcPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.85s forwards; }
.victory-variant-c .total-score-row {
    grid-column: 1 / -1; flex-direction: row; justify-content: space-between;
    background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
    border-radius: 12px; padding: 14px 16px; margin: 0;
    animation: victoryVcPopIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 1.05s forwards !important;
}
.victory-variant-c .score-label { font-size: 0.8em; text-align: center; }
.victory-variant-c .score-value.animated-score { min-width: auto; text-align: center; }
.victory-variant-c .score-value.total-score { color: #10b981; }
.victory-variant-c .total-score-row .score-label { text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.75em; }
/* Rank + percentile bar */
.victory-variant-c .victory-rank-section {
    margin: 10px 0; opacity: 0; animation: vFadeIn 0.4s ease 1.25s forwards;
}
.victory-variant-c .victory-rank-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.victory-variant-c .victory-rank-badge {
    display: flex; align-items: baseline; gap: 2px;
    background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25);
    border-radius: 10px; padding: 8px 12px;
}
.victory-variant-c .victory-rb-num { font-size: 1.6em; font-weight: 900; color: #10b981; line-height: 1; }
.victory-variant-c .victory-rb-suf { font-size: 0.7em; font-weight: 700; color: rgba(16,185,129,0.7); }
.victory-variant-c .victory-rank-context { font-size: 0.85em; color: rgba(255,255,255,0.5); }
.victory-variant-c .victory-pct-bar-bg {
    width: 100%; height: 6px; background: rgba(255,255,255,0.06);
    border-radius: 3px; overflow: hidden;
}
.victory-variant-c .victory-pct-bar-fill {
    height: 100%; background: linear-gradient(90deg,#10b981,#34d399);
    border-radius: 3px; width: 0; box-shadow: 0 0 6px rgba(16,185,129,0.3);
    animation: victoryVcPctFill 0.8s ease-out 1.5s forwards;
}
.victory-variant-c .leaderboard-section {
    border-color: rgba(16,185,129,0.1);
    opacity: 0; animation: vSlideUp 0.4s ease 1.8s forwards;
}
.victory-variant-c .leaderboard-section h3 { color: #10b981; }
.victory-variant-c .daily-reminder { opacity: 0; animation: vFadeIn 0.3s ease 2.1s forwards; }
.victory-variant-c .share-section { opacity: 0; animation: vFadeIn 0.3s ease 2.2s forwards; }
.victory-variant-c .victory-buttons { opacity: 0; animation: vSlideUp 0.4s ease 2.3s forwards; }
.victory-variant-c .review-game-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 15px rgba(16,185,129,0.3);
}

@keyframes victoryVcBarDraw { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes victoryVcPopIn { 0%{opacity:0;transform:scale(0.85)} 60%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
@keyframes victoryVcPctFill { 0%{width:0} 100%{width:var(--pct-width, 50%)} }

.victory-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    align-items: center;
}

.review-game-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    margin-bottom: 5px;
}

.review-game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(74, 144, 226, 0.6);
}

.play-again-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
}

.play-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
}

.h2h-play-again-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #6366f1 0%, #9810fa 100%);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
    width: 100%;
    max-width: 300px;
    margin-top: 10px;
}

.h2h-play-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.6);
}

.h2h-return-menu-btn {
    padding: 12px 30px;
    font-size: 1em;
    background: rgba(255, 255, 255, 0.1);
    color: #8b8d98;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    width: 100%;
    max-width: 300px;
    margin-top: 10px;
}

.h2h-return-menu-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.continue-practice-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
}

.continue-practice-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.timed-mode-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
    display: block;
}

.timed-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.play-practice-again-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
}

.play-practice-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.return-to-menu-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
}

.return-to-menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.share-score-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
}

.share-score-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4);
}

.endless-mode-btn {
    padding: 15px 40px;
    font-size: 1.2em;
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 300px;
    display: block;
}

.endless-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Endless Mode Key Glow */
.key.key-glow {
    background: #2ecc71 !important;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.8);
    border-color: #00bc7d;
    transition: all 0.3s ease;
}

.key.key-faded {
    background: #95a5a6 !important;
    box-shadow: none;
    border-color: #7f8c8d;
    transition: all 1s ease;
}

@keyframes goalRemove {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* ============================================
   MOBILE APP LAYOUT (Capacitor only)
   ============================================ */

/* Mobile Goals Icon Bar - Vertical row on left side */
.mobile-goals-bar {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1000;
    pointer-events: auto;
}

.mobile-goal-icon {
    position: relative;
    width: 56px;
    height: 56px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-goal-icon:active {
    transform: scale(0.95);
}

.mobile-goal-progress-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.mobile-progress-bg {
    transition: stroke 0.3s ease;
}

.mobile-progress-fill {
    transition: stroke-dashoffset 0.5s ease;
}

.mobile-goal-icon.completed .mobile-progress-fill {
    stroke: #27ae60;
}

.mobile-goal-icon-text {
    position: relative;
    font-size: 24px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.mobile-goal-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: #27ae60;
    font-weight: bold;
    z-index: 3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Mobile Layout - Hide sidebar, center game */
body.is-capacitor .sidebar {
    display: none !important;
}

body.is-capacitor .main-container {
    flex-direction: column;
    align-items: center;
    padding: 0;
    max-width: 100%;
}

body.is-capacitor .game-container {
    width: 100%;
    max-width: 100%;
    padding: 20px 80px 20px 80px; /* Left padding for goal icons */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

body.is-capacitor .keyboard-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

body.is-capacitor .seed-word-section,
body.is-capacitor .input-section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px;
}

body.is-capacitor .scoreboard {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    font-size: 0.85em;
}

/* Make custom keyboard sticky to bottom in mobile */
body.is-capacitor .keyboard-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    background: rgba(10, 11, 20, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

body.is-capacitor .keyboard {
    max-width: 600px;
    margin: 0 auto;
}

/* Adjust game container to account for sticky keyboard */
body.is-capacitor .game-container {
    padding-bottom: 280px; /* Space for sticky keyboard */
}

body.is-capacitor .mode-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
}

/* Hide game menu on mobile - use mobile settings dropdown instead */
body.is-capacitor .game-menu-container {
    display: none;
}

/* Mobile Goal Modal */
.mobile-goal-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.mobile-goal-modal-content {
    background: rgba(26, 27, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

.mobile-goal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-goal-modal-header h2 {
    color: #e8eaed;
    font-size: 1.5em;
    margin: 0;
    background: linear-gradient(90deg, rgba(99, 102, 241, 1) 0%, rgba(173, 70, 255, 1) 50%, rgba(246, 51, 154, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-goal-modal-close {
    background: none;
    border: none;
    color: #8b8d98;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-goal-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaed;
}

.mobile-goal-modal-body {
    color: #e8eaed;
}

.mobile-goal-modal-description {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #c0c0c0;
}

.mobile-goal-modal-progress {
    background: rgba(45, 46, 64, 0.5);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-goal-modal-progress .progress-label {
    font-size: 0.9em;
    color: #8b8d98;
    margin-bottom: 8px;
}

.mobile-goal-modal-progress .progress-value {
    font-size: 1.2em;
    font-weight: bold;
    color: #6366f1;
}

.mobile-goal-modal-progress .progress-value.completed {
    color: #27ae60;
}

.mobile-goal-modal-details {
    font-size: 0.9em;
    line-height: 1.6;
    color: #8b8d98;
}

.mobile-goal-modal-details strong {
    color: #e8eaed;
}

/* Goal key tracking styles */
.goal-key-section {
    margin-bottom: 6px;
    font-size: 0.9em;
}

.goal-pairs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.goal-pair-item {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.85em;
    font-weight: 600;
    color: #e8eaed;
}

.goal-no-keys {
    color: #8b8d98;
    font-style: italic;
    margin: 8px 0;
}

.goal-completed-text {
    color: #27ae60;
    font-weight: 600;
    margin: 8px 0;
}

.goal-row-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
}

.goal-key-chip {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 58, 77, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    color: #8b8d98;
}

.goal-key-chip.used {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.5));
    border: 1px solid rgba(99, 102, 241, 0.7);
    color: #ffffff;
}

/* Hide web version goals when in mobile app */
body.is-capacitor .goals-container {
    display: none !important;
}

/* Responsive adjustments for very small screens */
@media (max-width: 360px) {
    .mobile-goals-bar {
        left: 8px;
        gap: 12px;
    }
    
    .mobile-goal-icon {
        width: 48px;
        height: 48px;
    }
    
    .mobile-goal-icon-text {
        font-size: 20px;
    }
    
    body.is-capacitor .game-container {
        padding: 20px 70px 20px 70px;
    }
}

/* Prevent native keyboard in mobile app */
body.is-capacitor #word-input {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body.is-capacitor #word-input:focus {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   MOBILE APP SPECIFIC STYLES (Capacitor)
   ============================================ */

/* Safe area support for notched phones (iPhone X+) */
body.is-capacitor {
    padding: 0;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* Entry screen optimizations for mobile */
body.is-capacitor .entry-overlay {
    padding-top: calc(env(safe-area-inset-top, 44px) + 10px) !important;
    padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-y: auto !important;
}

body.is-capacitor .entry-content {
    padding: 16px !important;
    max-width: 100% !important;
    width: calc(100% - 32px) !important;
    max-height: none !important;
    overflow-y: visible !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.is-capacitor .entry-content h1 {
    font-size: 1.5em !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important;
}

body.is-capacitor .entry-content h1.entry-title-glossy {
    font-size: 3.8em !important;
    margin-top: 20px !important;
    margin-bottom: 36px !important;
}

body.is-capacitor .settings-gear-btn {
    top: 8px !important;
    left: 8px !important;
}

body.is-capacitor .settings-tooltip {
    top: 8px !important;
    left: 40px !important;
}

body.is-capacitor .entry-subtitle {
    font-size: 0.95em !important;
    margin-bottom: 12px !important;
}

body.is-capacitor .entry-intro-link {
    margin-bottom: 12px !important;
}

/* Hide mobile warning and footer in mobile app */
body.is-capacitor .mobile-warning {
    display: none !important;
}

body.is-capacitor .entry-footer {
    display: none !important;
}

body.is-capacitor .entry-form {
    gap: 12px !important;
}

body.is-capacitor .entry-form label {
    font-size: 0.9em !important;
    margin-bottom: 4px !important;
}

body.is-capacitor .mode-selection {
    margin: 8px 0 !important;
}

body.is-capacitor .mode-selection-label {
    font-size: 0.9em !important;
    margin-bottom: 8px !important;
}

/* Mode buttons - optimized for touch */
body.is-capacitor .mode-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
}

body.is-capacitor .mode-btn {
    min-width: unset !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 12px 8px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

body.is-capacitor .mode-btn-wide {
    grid-column: 1 / -1 !important;
}

body.is-capacitor .mode-btn:active {
    transform: scale(0.96) !important;
    opacity: 0.9 !important;
}

body.is-capacitor .mode-icon {
    font-size: 1.3em !important;
}

body.is-capacitor .mode-name {
    font-size: 0.8em !important;
}

/* Start button - larger touch target */
body.is-capacitor .start-button {
    width: 100% !important;
    min-height: 50px !important;
    padding: 14px 20px !important;
    font-size: 1em !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    margin-top: 8px !important;
}

body.is-capacitor .start-button:active {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
}

/* Stats button on mobile */
body.is-capacitor .entry-stats-button {
    padding: 8px 20px !important;
    font-size: 0.9em !important;
    margin-top: 10px !important;
}

/* Stats dashboard on mobile - compact spacing */
body.is-capacitor .stats-dashboard {
    padding: 15px !important;
}

body.is-capacitor .stats-summary-item .stats-value {
    font-size: 1.5em !important;
}

body.is-capacitor .stats-score-item .stats-value {
    font-size: 1.3em !important;
}

body.is-capacitor .stats-history {
    max-height: 200px !important;
}

body.is-capacitor .streak-flame-small {
    font-size: 0.7em !important;
    text-shadow: 0 0 6px rgba(251,191,36,0.5), 0 0 12px rgba(251,146,60,0.3) !important;
}

body.is-capacitor .streak-flame-medium {
    font-size: 0.75em !important;
    animation: flameGentleSwayApp 2s ease-in-out infinite !important;
    text-shadow:
        0 0 8px rgba(251,146,60,0.7),
        0 0 16px rgba(239,68,68,0.4),
        0 -4px 10px rgba(251,191,36,0.3) !important;
}

body.is-capacitor .streak-flame-large {
    font-size: 0.85em !important;
    animation: flameFlickerApp 1.2s ease-in-out infinite !important;
    text-shadow:
        0 0 10px rgba(251,146,60,0.9),
        0 0 20px rgba(239,68,68,0.7),
        0 0 30px rgba(168,85,247,0.4),
        0 -6px 14px rgba(251,191,36,0.5) !important;
}

@keyframes flameGentleSwayApp {
    0%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        transform: translateY(-2px) scale(1.05) rotate(3deg);
        filter: hue-rotate(-10deg) brightness(1.1);
    }
    50% {
        transform: translateY(-3px) scale(1.08) rotate(0deg);
        filter: hue-rotate(10deg) brightness(1.15);
    }
    75% {
        transform: translateY(-2px) scale(1.05) rotate(-3deg);
        filter: hue-rotate(-5deg) brightness(1.05);
    }
}

@keyframes flameFlickerApp {
    0% {
        transform: translateY(0) scale(1) rotate(-2deg);
        filter: hue-rotate(0deg) brightness(1.1);
        text-shadow: 0 0 10px rgba(251,146,60,0.9), 0 0 20px rgba(239,68,68,0.6), 0 -6px 14px rgba(251,191,36,0.5);
    }
    20% {
        transform: translateY(-3px) scale(1.12) rotate(3deg);
        filter: hue-rotate(15deg) brightness(1.25);
        text-shadow: 0 0 14px rgba(251,146,60,1), 0 0 28px rgba(239,68,68,0.8), 0 0 36px rgba(168,85,247,0.5), 0 -8px 18px rgba(251,191,36,0.6);
    }
    40% {
        transform: translateY(-1px) scale(1.06) rotate(-1deg);
        filter: hue-rotate(-10deg) brightness(1.15);
        text-shadow: 0 0 12px rgba(251,146,60,0.9), 0 0 22px rgba(239,68,68,0.7), 0 -4px 12px rgba(251,191,36,0.4);
    }
    60% {
        transform: translateY(-4px) scale(1.14) rotate(2deg);
        filter: hue-rotate(20deg) brightness(1.3);
        text-shadow: 0 0 16px rgba(251,146,60,1), 0 0 32px rgba(239,68,68,0.9), 0 0 40px rgba(168,85,247,0.6), 0 -10px 20px rgba(96,165,250,0.3);
    }
    80% {
        transform: translateY(-2px) scale(1.08) rotate(-2deg);
        filter: hue-rotate(5deg) brightness(1.2);
        text-shadow: 0 0 12px rgba(251,146,60,0.95), 0 0 24px rgba(239,68,68,0.7), 0 0 30px rgba(168,85,247,0.4), 0 -6px 14px rgba(251,191,36,0.5);
    }
    100% {
        transform: translateY(-1px) scale(1.04) rotate(1deg);
        filter: hue-rotate(-5deg) brightness(1.1);
        text-shadow: 0 0 10px rgba(251,146,60,0.9), 0 0 20px rgba(239,68,68,0.6), 0 -6px 14px rgba(251,191,36,0.5);
    }
}

body.is-capacitor .streak-celebration-flame {
    font-size: 24px;
}

body.is-capacitor .trophy-celebration-trophy {
    font-size: 24px;
}

body.is-capacitor .stats-modal-content {
    width: 95% !important;
    max-height: 80vh !important;
}

/* Entry leaderboard on mobile - compact styling */
body.is-capacitor .entry-leaderboard {
    margin-top: 15px !important;
    padding: 12px !important;
    max-width: 100% !important;
}

body.is-capacitor .entry-leaderboard-header.expanded {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
}

body.is-capacitor .entry-leaderboard-title {
    font-size: 0.95em !important;
}

body.is-capacitor .entry-leaderboard-row {
    padding: 6px 8px !important;
}

body.is-capacitor .entry-leaderboard-name {
    font-size: 0.85em !important;
}

body.is-capacitor .entry-leaderboard-score {
    font-size: 0.9em !important;
}

body.is-capacitor .entry-leaderboard-words {
    font-size: 0.75em !important;
}

/* Intro button - better touch target */
body.is-capacitor .intro-button {
    min-height: 40px !important;
    padding: 10px 20px !important;
    font-size: 0.9em !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
}

body.is-capacitor .intro-button:active {
    transform: scale(0.97) !important;
    opacity: 0.9 !important;
}

/* Username input - better mobile experience */
body.is-capacitor #username-input {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px !important;
    padding: 10px 14px !important;
}

/* Remove duplicate rules - these are defined above with !important */
body.is-capacitor .mode-selection-label {
    font-size: 0.9em !important;
    margin-bottom: 12px;
}

/* Head to head modal mobile fixes */
body.is-capacitor .headtohead-entry-content {
    padding: 20px;
    width: calc(100% - 32px);
    max-width: 100%;
}

body.is-capacitor .headtohead-mode-buttons {
    flex-direction: column;
    gap: 12px;
}

body.is-capacitor .headtohead-mode-btn {
    min-height: 72px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.is-capacitor .headtohead-mode-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* All interactive elements - ensure pointer events work */
body.is-capacitor button,
body.is-capacitor .mode-btn,
body.is-capacitor .start-button,
body.is-capacitor .intro-button,
body.is-capacitor input {
    pointer-events: auto !important;
    cursor: pointer;
}

body.is-capacitor input[type="text"] {
    cursor: text;
}

/* Modal close buttons - larger touch target */
body.is-capacitor .close-button,
body.is-capacitor .close-headtohead-entry-btn,
body.is-capacitor .mobile-goal-modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Game container mobile adjustments */
body.is-capacitor .game-container {
    padding-top: calc(env(safe-area-inset-top, 0) + 16px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
}

/* Keyboard container - ensure it's visible and not cut off */
body.is-capacitor .keyboard-container {
    margin-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
}

/* Additional mobile responsive breakpoints */
@media screen and (max-width: 400px) {
    body.is-capacitor .entry-content {
        padding: 20px 16px;
    }

    body.is-capacitor .entry-content h1 {
        font-size: 1.5em;
    }

    body.is-capacitor .entry-content h1.entry-title-glossy {
        font-size: 3.2em !important;
    }

    body.is-capacitor .mode-btn {
        min-height: 72px;
        padding: 12px 8px;
    }

    body.is-capacitor .mode-icon {
        font-size: 1.3em;
    }

    body.is-capacitor .mode-name {
        font-size: 0.8em;
    }
}

/* Landscape orientation support */
@media screen and (max-height: 500px) and (orientation: landscape) {
    body.is-capacitor .entry-content {
        padding: 16px;
        max-height: calc(100vh - 32px);
    }

    body.is-capacitor .mode-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    body.is-capacitor .mode-btn {
        min-height: 60px;
        padding: 8px;
    }
}

/* ============================================
   MOBILE GAME UI - WORDLE STYLE
   Clean, professional mobile interface
   ============================================ */

/* Hide desktop UI on mobile */
body.is-capacitor .main-container {
    display: none !important;
}

body.is-capacitor .site-footer {
    display: none !important;
}

body.is-capacitor .entry-footer {
    display: none !important;
}

/* Show mobile game container on Capacitor */
body.is-capacitor {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.is-capacitor .mobile-game-container {
    display: flex !important;
}

/* Mobile Game Container */
.mobile-game-container {
    display: none;
    flex-direction: column;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    width: 100%;
    background: #0a0b14;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    overflow: hidden;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Mobile Head to Head Ready Status */
.mobile-h2h-ready-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 11, 20, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.mobile-h2h-ready-content {
    text-align: center;
    max-width: 320px;
    width: 100%;
}

.mobile-h2h-ready-title {
    font-size: 1.5em;
    color: #e8eaed;
    margin: 0 0 20px 0;
}

.mobile-h2h-ready-message {
    color: #8b8d98;
    font-size: 1em;
    margin-bottom: 24px;
}

.mobile-h2h-ready-players {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
}

.mobile-h2h-ready-player {
    flex: 1;
    background: rgba(45, 45, 68, 0.5);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.mobile-h2h-player-name {
    color: #e8eaed;
    font-size: 0.9em;
    font-weight: 600;
}

.mobile-h2h-ready-indicator {
    font-size: 2em;
    line-height: 1;
}

.mobile-h2h-ready-btn {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    border: none;
    border-radius: 12px;
    padding: 16px 40px;
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.4);
    width: 100%;
    max-width: 250px;
}

.mobile-h2h-ready-btn:active {
    transform: scale(0.98);
}

.mobile-h2h-ready-btn:disabled {
    opacity: 0.7;
    transform: none;
}

/* Mobile Header */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.mobile-header-left {
    width: 48px; /* Match the settings button width to center the title */
    flex-shrink: 0;
}

.mobile-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #e8eaed;
    margin: 0;
    letter-spacing: 0.05em;
    text-align: center;
    flex: 1;
}

.mobile-header-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #e8eaed;
    font-size: 1.2em;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.mobile-header-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-header-btn svg {
    fill: #e8eaed;
}

/* Mobile Settings Dropdown */
.mobile-settings-container {
    position: relative;
}

.mobile-settings-btn.active {
    background: rgba(99, 102, 241, 0.3);
}

.mobile-settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #2a2a3d;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 0;
    min-width: 220px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none;
    animation: dropdownSlide 0.15s ease-out;
}

.mobile-settings-dropdown.visible {
    display: block;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #e8eaed;
    font-size: 0.95em;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.settings-dropdown-item:active {
    background: rgba(99, 102, 241, 0.2);
}

.settings-icon {
    font-size: 1.1em;
    width: 24px;
    text-align: center;
}

.settings-toggle {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.settings-toggle.on {
    background: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.settings-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

.settings-menu-btn {
    color: #f87171;
}

.settings-menu-btn:active {
    background: rgba(248, 113, 113, 0.15);
}

/* Mobile New Game Button */
.mobile-new-game-btn {
    padding: 6px 12px;
    font-size: 0.8em;
    font-weight: 600;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    margin-right: 8px;
}

.mobile-new-game-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* Mobile Score Bar */
.mobile-score-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 4px 16px;
    flex-shrink: 0;
}

.mobile-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.mobile-score-value {
    font-size: 1.4em;
    font-weight: 700;
    color: #e8eaed;
}

.mobile-score-label {
    font-size: 0.7em;
    color: #8b8d98;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mobile-timer-item .mobile-score-value {
    color: #e74c3c;
}

/* Mobile Seed Section */
.mobile-seed-section {
    text-align: center;
    padding: 8px 16px;
    flex-shrink: 0;
}

.mobile-seed-label {
    font-size: 0.85em;
    color: #8b8d98;
    margin-bottom: 4px;
}

.mobile-seed-word {
    font-size: 1.4em;
    font-weight: 700;
    color: #6366f1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Mobile Input Display (Wordle-style letter boxes) */
.mobile-input-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    flex-shrink: 0;
}

.mobile-letter-boxes {
    display: flex;
    gap: 6px;
    justify-content: center;
    min-height: 52px;
    flex-wrap: wrap;
    max-width: 100%;
}

.mobile-letter-box {
    width: 44px;
    height: 48px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 700;
    color: #e8eaed;
    text-transform: uppercase;
    background: transparent;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.mobile-letter-box.filled {
    border-color: rgba(255, 255, 255, 0.4);
    animation: letterPop 0.1s ease;
}

.mobile-letter-box.current {
    border-color: #6366f1;
}

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

.mobile-word-status {
    margin-top: 8px;
    font-size: 0.85em;
    min-height: 20px;
    color: #8b8d98;
    text-align: center;
}

.mobile-word-status.valid {
    color: #27ae60;
}

.mobile-word-status.invalid {
    color: #e74c3c;
}

.mobile-word-status.info {
    color: #6366f1;
}

/* Mobile Game Area - Main layout with side goals */
.mobile-game-area {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Mobile Goals Side Panel - Absolute positioned */
.mobile-goals-side {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    z-index: 10;
}

/* Individual Side Goal */
.mobile-side-goal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
    position: relative;
}

.mobile-side-goal:active {
    transform: scale(0.95);
}

.mobile-side-goal.completed .goal-ring-fill {
    stroke: #27ae60 !important;
}

.mobile-side-goal.completed .goal-symbol {
    color: #27ae60;
}

/* Priority goal styling for mobile side panel */
.mobile-side-goal.priority-goal {
    animation: sidePriorityGlow 2s ease-in-out infinite;
}

.mobile-side-goal.priority-goal::before {
    content: '⭐';
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.55em;
    animation: priorityStarPulse 1.5s ease-in-out infinite;
    z-index: 10;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
}

@keyframes sidePriorityGlow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
    }
}

/* Goal Ring SVG */
.goal-ring {
    width: 32px;
    height: 32px;
}

.goal-ring-bg {
    opacity: 0.3;
}

.goal-ring-fill {
    transition: stroke-dashoffset 0.3s ease;
}

/* Goal Symbol inside ring */
.goal-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: #e8eaed;
    margin-top: -5px;
}

/* Goal Label below ring */
.goal-label {
    font-size: 0.5em;
    color: #8b8d98;
    font-weight: 600;
    white-space: nowrap;
}

/* Mobile Game Content - Centered full width */
.mobile-game-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 16px;
    overflow: hidden;
}

/* Seed word row with definition button */
.mobile-seed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

/* Definition button */
.mobile-definition-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.mobile-definition-btn:active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.mobile-definition-btn svg {
    fill: #8b8d98;
}

/* Single text input display */
.mobile-current-word {
    font-size: 1.8em;
    font-weight: 700;
    color: #e8eaed;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-height: 44px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-bottom: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 4px;
    min-width: 200px;
    width: 90%;
    max-width: 320px;
    text-align: center;
    margin: 4px 0;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-current-word:empty::before {
    content: 'Type here...';
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.6em;
    letter-spacing: 0.05em;
    text-transform: none;
}

/* Mobile Typed Words Section */
.mobile-typed-words-section {
    flex: 1;
    min-height: 50px;
    max-height: 100px;
    overflow-y: auto;
    padding: 8px 12px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin: 4px 8px;
}

.mobile-typed-words {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.mobile-typed-word {
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.25);
    border-radius: 16px;
    font-size: 0.8em;
    color: #c7d2fe;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.mobile-typed-word:active {
    transform: scale(0.95);
    background: rgba(99, 102, 241, 0.4);
}

.mobile-typed-word.seed {
    background: rgba(99, 102, 241, 0.4);
    color: #e8eaed;
}

/* Mobile Score Breakdown Modal */
.mobile-score-breakdown-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.mobile-score-breakdown-content {
    background: linear-gradient(145deg, #1a1b28, #12131d);
    border-radius: 16px;
    padding: 20px;
    max-width: 280px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.mobile-score-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-score-breakdown-word {
    font-size: 1.4em;
    font-weight: 700;
    color: #e8eaed;
    letter-spacing: 0.1em;
}

.mobile-score-breakdown-close {
    background: none;
    border: none;
    color: #8b8d98;
    font-size: 1.5em;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.mobile-score-breakdown-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.score-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: #a5b4fc;
    font-size: 0.9em;
}

.score-breakdown-item.bonus .score-value {
    color: #4ade80;
}

.score-breakdown-item.penalty .score-value {
    color: #f87171;
}

.score-breakdown-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
    color: #e8eaed;
    font-size: 1.1em;
}

.score-breakdown-total .score-value {
    color: #6366f1;
    font-size: 1.2em;
}

/* Mobile Keyboard - Wordle Style */
.mobile-keyboard {
    padding: 4px 2px;
    padding-bottom: 4px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

.mobile-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 3px;
    padding: 0 1px;
}

.mobile-key {
    flex: 1;
    max-width: 40px;
    height: 48px;
    border: none;
    border-radius: 6px;
    background: #3a3a4d;
    color: #e8eaed;
    font-size: 1.05em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.08s ease, transform 0.04s ease;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-key:active {
    transform: scale(0.92);
    background: #5a5a7d;
}

.mobile-key-wide {
    flex: 1.5;
    max-width: 72px;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mobile-key-action {
    flex: 0 0 auto;
    width: 48px;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ENTER button - larger, pushes row left for column alignment */
.mobile-key-enter {
    flex: 0 0 auto;
    width: 72px !important;
    min-width: 72px !important;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Score popup that appears briefly when word is submitted */
.mobile-score-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(139, 92, 246, 0.95));
    color: white;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 1.8em;
    font-weight: 700;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.mobile-score-popup.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.mobile-score-popup.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.5);
}

/* Spacers for keyboard row alignment */
.mobile-key-spacer-left {
    flex: 0 0 20px;
    width: 20px;
}

.mobile-key-spacer {
    flex: 0.2;
    max-width: 8px;
}

.mobile-key-spacer.half {
    flex: 0.4;
    max-width: 16px;
}

/* Key states - match the desktop keyboard colors */
.mobile-key.used {
    background: #6366f1;
    color: white;
}

.mobile-key.overused {
    background: #f6339a;
    color: white;
}

/* Mobile Typing Guide Styles - Modern neutral grey palette */
/* Left Hand Keys (unused) - Cool slate grey */
.mobile-keyboard.show-typing-guide .mobile-key[data-key="q"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="w"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="e"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="r"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="t"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="a"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="s"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="d"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="f"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="g"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="z"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="x"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="c"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="v"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="b"]:not(.used):not(.overused) {
    background: linear-gradient(145deg, #3d4654, #2d343f);
    border: 1px solid rgba(100, 116, 139, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Right Hand Keys (unused) - Warm stone grey */
.mobile-keyboard.show-typing-guide .mobile-key[data-key="y"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="u"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="i"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="o"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="p"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="h"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="j"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="k"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="l"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="n"]:not(.used):not(.overused),
.mobile-keyboard.show-typing-guide .mobile-key[data-key="m"]:not(.used):not(.overused) {
    background: linear-gradient(145deg, #4a4540, #3a3632);
    border: 1px solid rgba(120, 113, 108, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Mobile used key colors are consistent with or without typing guide - no overrides needed */

/* Mobile Column Guide Lines - SVG overlay for connected column lines */
.mobile-keyboard {
    position: relative;
}

.mobile-keyboard-column-guides {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.mobile-keyboard.show-typing-guide .mobile-keyboard-column-guides {
    display: block;
}

.mobile-keyboard-column-guides svg {
    width: 100%;
    height: 100%;
}

.column-guide-line {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1;
    stroke-dasharray: 3, 3;
    fill: none;
}

.hand-divider-line {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    fill: none;
}

/* Typing guide button active state */
#mobile-typing-guide-btn.active {
    background: rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
}

.mobile-header-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Responsive adjustments for smaller phones */
@media screen and (max-width: 380px) {
    .mobile-key {
        height: 44px;
        font-size: 0.95em;
        max-width: 34px;
    }

    .mobile-key-wide {
        max-width: 58px;
        font-size: 0.7em;
    }

    .mobile-key-enter {
        width: 64px !important;
        min-width: 64px !important;
    }

    .mobile-letter-box {
        width: 38px;
        height: 42px;
        font-size: 1.3em;
    }

    .mobile-score-bar {
        gap: 24px;
    }

    .mobile-score-value {
        font-size: 1.2em;
    }

    .mobile-goals-compact {
        gap: 6px;
    }

    .mobile-goal-chip {
        padding: 4px 8px;
    }
}

/* Taller phones - give more space to typed words */
@media screen and (min-height: 800px) {
    .mobile-typed-words-section {
        max-height: 150px;
    }
}

/* Very tall phones (e.g., iPhone 14 Pro Max) */
@media screen and (min-height: 900px) {
    .mobile-typed-words-section {
        max-height: 180px;
    }

    .mobile-score-bar {
        padding: 16px;
    }

    .mobile-seed-section {
        padding: 12px 16px;
    }

    .mobile-input-display {
        padding: 16px;
    }

    .mobile-key {
        height: 54px;
        max-width: 42px;
        font-size: 1.1em;
    }

    .mobile-key-enter {
        width: 78px !important;
        min-width: 78px !important;
    }

    .mobile-keyboard-row {
        gap: 4px;
    }
}

/* Extra tall phones */
@media screen and (min-height: 1000px) {
    .mobile-key {
        height: 58px;
    }
}

/* ============================================
   MOBILE TUTORIAL/INTRO MODAL STYLES
   ============================================ */

body.is-capacitor .intro-modal-content,
body.is-capacitor .modal-content {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - env(safe-area-inset-top, 40px) - env(safe-area-inset-bottom, 40px) - 40px);
    padding: 16px;
    margin: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force full width for combined tutorial modal so it doesn't shrink on shorter content steps */
body.is-capacitor .intro-modal-content:has(.combined-tutorial) {
    width: calc(100vw - 32px);
}

body.is-capacitor .intro-modal-content h2,
body.is-capacitor .modal-content h2 {
    font-size: 1.3em;
    margin-bottom: 12px;
}

body.is-capacitor .intro-modal-content h3,
body.is-capacitor .modal-content h3 {
    font-size: 1.1em;
    margin: 12px 0 8px;
}

body.is-capacitor .intro-modal-content p,
body.is-capacitor .modal-content p {
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 8px;
}

body.is-capacitor .intro-modal-content ul,
body.is-capacitor .modal-content ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

body.is-capacitor .intro-modal-content li,
body.is-capacitor .modal-content li {
    font-size: 0.85em;
    line-height: 1.4;
    margin-bottom: 4px;
}

body.is-capacitor .intro-section {
    padding: 12px;
    margin-bottom: 12px;
}

body.is-capacitor .intro-section h3 {
    font-size: 1em;
    margin-bottom: 8px;
}

body.is-capacitor .goal-explanation {
    padding: 8px;
    margin-bottom: 8px;
}

body.is-capacitor .goal-icon {
    font-size: 1.2em;
    min-width: 28px;
}

body.is-capacitor .intro-buttons {
    flex-direction: column;
    gap: 8px;
}

body.is-capacitor .intro-button {
    width: 100%;
    padding: 12px;
    font-size: 0.95em;
}

body.is-capacitor .close-button {
    min-width: 36px;
    min-height: 36px;
    font-size: 1.5em;
}

/* Mobile definition modal */
.mobile-definition-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mobile-definition-modal.visible {
    display: flex;
}

.mobile-definition-content {
    background: #1a1b28;
    border-radius: 12px;
    padding: 20px;
    max-width: 320px;
    width: 100%;
    text-align: center;
}

.mobile-definition-word {
    font-size: 1.5em;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mobile-definition-text {
    font-size: 0.95em;
    color: #e8eaed;
    line-height: 1.5;
    margin-bottom: 16px;
}

.mobile-definition-close {
    background: #6366f1;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

/* ============================================
   GOOGLE ADSENSE PLACEHOLDER COMPONENTS
   ============================================ */

/* Top Leaderboard Ad (728x90) */
.adsense-top-leaderboard {
    width: 100%;
    max-width: 728px;
    height: 90px;
    margin: 0 auto 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.adsense-top-leaderboard .ad-label {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 9px;
    color: #8b8d98;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

.adsense-top-leaderboard .ad-placeholder {
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(139, 141, 152, 0.4);
    border-radius: 4px;
    background: rgba(26, 27, 40, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8d98;
    font-size: 0.75em;
}

/* Bottom Anchor Ad (Fixed position, 50px height) */
.adsense-bottom-anchor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    z-index: 999;
    background: rgba(10, 11, 20, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.adsense-bottom-anchor .ad-label {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 9px;
    color: #8b8d98;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

.adsense-bottom-anchor .ad-placeholder {
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(139, 141, 152, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8d98;
    font-size: 0.75em;
}

/* Sidebar Tower Ad (160x600) - Only visible on screens > 1200px */
/* Positioned to the left of the Board Objectives panel, outside the sidebar */
.adsense-sidebar-tower {
    display: none; /* Hidden by default */
    width: 160px;
    height: 600px;
    position: relative;
    flex-shrink: 0;
    align-self: flex-start; /* Align to top of flex container */
    margin-top: 0; /* Align with sidebar top */
}

@media screen and (min-width: 1201px) {
    .adsense-sidebar-tower {
        display: block;
    }
}

.adsense-sidebar-tower .ad-label {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 9px;
    color: #8b8d98;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

.adsense-sidebar-tower .ad-placeholder {
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(139, 141, 152, 0.4);
    border-radius: 4px;
    background: rgba(26, 27, 40, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b8d98;
    font-size: 0.75em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Common ad label styling */
.ad-label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    pointer-events: none;
    user-select: none;
}

/* Hide all ads in mobile app (Capacitor) version */
body.is-capacitor .adsense-top-leaderboard,
body.is-capacitor .adsense-bottom-anchor,
body.is-capacitor .adsense-sidebar-tower {
    display: none !important;
}

/* CRITICAL: Hide timer display in head-to-head mode (timer removed) */
/* Timer is not used in head-to-head games */
body:has([data-head-to-head-mode="sidebyside"]) #timer-display,
body.head-to-head-sidebyside #timer-display {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ============================================
   DESKTOP STYLES FOR COMBINED TUTORIAL
   ============================================ */

/* Desktop: Wider modal for tutorial */
@media screen and (min-width: 768px) {
    .intro-modal-content:has(.combined-tutorial) {
        max-width: 850px;
    }

    .intro-modal-body:has(.combined-tutorial) {
        height: auto;
        max-height: calc(85vh - 80px);
        overflow: auto;
        padding: 15px;
    }

    /* Combined tutorial - 2-column layout: goals | keyboard+practice, text below */
    body:not(.is-capacitor) .interactive-tutorial.combined-tutorial {
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 12px;
        min-height: auto;
        max-height: calc(85vh - 120px);
        overflow: visible;
    }

    /* Simplified layout when keyboard is hidden (intro steps) */
    body:not(.is-capacitor) .interactive-tutorial.combined-tutorial.no-keyboard {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        max-width: 600px;
        margin: 0 auto;
    }

    body:not(.is-capacitor) .combined-tutorial.no-keyboard .tutorial-goals-desktop {
        display: none !important;
    }

    body:not(.is-capacitor) .combined-tutorial.no-keyboard .tutorial-content {
        grid-column: 1;
        grid-row: 2;
        text-align: center;
        padding: 20px 30px;
    }

    body:not(.is-capacitor) .combined-tutorial.no-keyboard .tutorial-navigation {
        grid-column: 1;
        grid-row: 3;
    }

    /* Fallback 2-column for native app */
    body.is-capacitor .interactive-tutorial.combined-tutorial {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto auto;
        gap: 15px;
        min-height: 400px;
        max-height: calc(85vh - 120px);
        overflow: visible;
    }

    /* Progress bar spans full width */
    .combined-tutorial .tutorial-progress {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 8px 0;
        margin-bottom: 0;
    }

    .combined-tutorial .tutorial-step-indicator {
        gap: 8px;
    }

    .combined-tutorial .step-dot {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

    .combined-tutorial .tutorial-progress-text {
        font-size: 0.9em;
        margin-top: 6px;
    }

    /* Hide the top/bottom wrappers - use direct grid placement */
    .combined-tutorial-top,
    .combined-tutorial-bottom {
        display: contents;
    }

    /* Goals panel - left column, spans keyboard and practice rows */
    body:not(.is-capacitor) .combined-tutorial .tutorial-goals-desktop {
        grid-column: 1;
        grid-row: 2 / 4;
        padding: 10px;
        background: rgba(26, 27, 40, 0.4);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        align-self: start;
    }

    /* Content/Tutorial text - full width BELOW keyboard area (row 4) */
    body:not(.is-capacitor) .combined-tutorial .tutorial-content {
        grid-column: 1 / -1;
        grid-row: 4;
        padding: 12px 18px;
        background: rgba(26, 27, 40, 0.5);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        overflow-y: visible;
        min-height: auto;
        max-height: none;
    }

    body.is-capacitor .combined-tutorial .tutorial-content {
        grid-column: 1;
        grid-row: 2;
        padding: 15px;
        background: rgba(26, 27, 40, 0.5);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        overflow-y: auto;
        min-height: 180px;
        max-height: 280px;
    }

    .combined-tutorial .tutorial-step-title {
        font-size: 1.3em;
        margin-bottom: 10px;
        text-align: left;
    }

    .combined-tutorial .tutorial-step-content {
        font-size: 0.95em;
        line-height: 1.6;
    }

    .combined-tutorial .tutorial-step-content p {
        margin-bottom: 10px;
    }

    /* Practice section - below content */
    body:not(.is-capacitor) .combined-tutorial .tutorial-practice-section {
        grid-column: 2;
        grid-row: 3;
        padding: 10px 12px;
        margin: 0;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 10px;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    body.is-capacitor .combined-tutorial .tutorial-practice-section {
        grid-column: 1;
        grid-row: 3;
        padding: 12px 15px;
        margin: 0;
        background: rgba(99, 102, 241, 0.1);
        border-radius: 12px;
        border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .combined-tutorial .tutorial-practice-hint {
        font-size: 1em;
        margin-bottom: 6px;
    }

    .combined-tutorial .tutorial-typed-word {
        font-size: 1.5em;
        min-height: 32px;
        letter-spacing: 2px;
    }

    .combined-tutorial .tutorial-practice-status {
        font-size: 0.9em;
        min-height: 20px;
        margin-top: 6px;
    }

    /* Keyboard section - right column, row 2 */
    body:not(.is-capacitor) .combined-tutorial .tutorial-keyboard-section {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    body.is-capacitor .combined-tutorial .tutorial-keyboard-section {
        grid-column: 2;
        grid-row: 2 / 4;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    /* Keyboard sizing for desktop - original sizes */
    .combined-tutorial .tutorial-interactive-keyboard {
        max-width: 540px;
        padding: 20px;
        gap: 6px;
    }

    .combined-tutorial .tutorial-int-key {
        width: 44px;
        height: 48px;
        font-size: 1.1em;
        border-radius: 8px;
    }

    .combined-tutorial .tutorial-key-row {
        gap: 6px;
    }

    /* Q-A-Z vertical alignment with slightly larger top row */
    .combined-tutorial .tutorial-key-row-1 {
        padding-left: 5px;
    }

    .combined-tutorial .tutorial-key-row-1 .tutorial-int-key {
        width: 48px;
    }

    .combined-tutorial .tutorial-key-row-2 {
        padding-left: 10px;
    }

    .combined-tutorial .tutorial-key-row-3 {
        padding-left: 18px;
    }

    /* Navigation spans full width at bottom (row 5) */
    body:not(.is-capacitor) .combined-tutorial .tutorial-navigation {
        grid-column: 1 / -1;
        grid-row: 5;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 8px;
    }

    body.is-capacitor .combined-tutorial .tutorial-navigation {
        grid-column: 1 / -1;
        grid-row: 4;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 10px;
    }

    .combined-tutorial .tutorial-btn {
        padding: 12px 30px;
        font-size: 1em;
    }

    /* Goal mini icons (for native app) */
    .combined-tutorial .tutorial-goals-mini {
        gap: 12px;
        margin-bottom: 15px;
    }

    .combined-tutorial .tutorial-goal-mini {
        width: 36px;
        height: 36px;
        font-size: 1.1em;
    }
}

/* Larger desktop screens - more spacious */
@media screen and (min-width: 1024px) {
    .intro-modal-content:has(.combined-tutorial) {
        max-width: 900px;
    }

    /* Wider goals column on larger screens */
    body:not(.is-capacitor) .interactive-tutorial.combined-tutorial {
        grid-template-columns: 170px 1fr;
        gap: 15px;
    }

    body:not(.is-capacitor) .combined-tutorial .tutorial-goals-desktop {
        padding: 12px;
    }

    body:not(.is-capacitor) .combined-tutorial .tutorial-content {
        padding: 15px 20px;
    }

    .combined-tutorial .tutorial-step-title {
        font-size: 1.4em;
        margin-bottom: 12px;
    }

    .combined-tutorial .tutorial-step-content {
        font-size: 1.05em;
        line-height: 1.6;
    }

    .combined-tutorial .tutorial-practice-section {
        padding: 12px 15px;
    }

    .combined-tutorial .tutorial-typed-word {
        font-size: 1.8em;
        min-height: 40px;
        letter-spacing: 3px;
    }

    /* Original keyboard sizing for larger screens */
    .combined-tutorial .tutorial-interactive-keyboard {
        max-width: 580px;
    }

    .combined-tutorial .tutorial-int-key {
        width: 48px;
        height: 52px;
        font-size: 1.15em;
    }

    /* Q-A-Z vertical alignment with slightly larger top row */
    .combined-tutorial .tutorial-key-row-1 .tutorial-int-key {
        width: 52px;
    }

    .combined-tutorial .tutorial-key-row-1 {
        padding-left: 6px;
    }

    .combined-tutorial .tutorial-key-row-2 {
        padding-left: 12px;
    }

    .combined-tutorial .tutorial-key-row-3 {
        padding-left: 20px;
    }

    .combined-tutorial .tutorial-btn {
        padding: 12px 30px;
        font-size: 1em;
    }
}

/* ========================================
   SMALL MOBILE SCREENS - Tutorial Responsive Fixes
   Targets iPhone SE, iPhone 15, and similar smaller devices
   ======================================== */
@media screen and (max-height: 750px) {
    /* Reduce tutorial content spacing for shorter screens */
    body.is-capacitor .combined-tutorial .tutorial-content {
        max-height: 200px;
        min-height: 120px;
        padding: 10px 12px;
    }

    body.is-capacitor .combined-tutorial .tutorial-step-title {
        font-size: 1em;
        margin-bottom: 6px;
    }

    body.is-capacitor .combined-tutorial .tutorial-step-content {
        font-size: 0.85em;
        line-height: 1.35;
    }

    body.is-capacitor .combined-tutorial .tutorial-step-content p {
        margin-bottom: 6px;
    }

    /* Smaller goal mini icons on short screens */
    body.is-capacitor .combined-tutorial .tutorial-goals-mini {
        gap: 8px;
        margin-bottom: 10px;
    }

    body.is-capacitor .combined-tutorial .tutorial-goal-mini {
        width: 28px;
        height: 28px;
        font-size: 0.9em;
    }

    /* More compact keyboard */
    body.is-capacitor .combined-tutorial .tutorial-int-key {
        width: 28px;
        height: 32px;
        font-size: 0.75em;
    }

    body.is-capacitor .combined-tutorial .tutorial-practice-section {
        padding: 8px 10px;
    }

    body.is-capacitor .combined-tutorial .tutorial-typed-word {
        font-size: 1.3em;
        min-height: 28px;
    }

    body.is-capacitor .combined-tutorial .tutorial-navigation {
        padding-top: 8px;
        gap: 8px;
    }

    body.is-capacitor .combined-tutorial .tutorial-btn {
        padding: 8px 18px;
        font-size: 0.85em;
    }
}

/* Even smaller screens (iPhone SE, etc.) */
@media screen and (max-height: 670px) {
    body.is-capacitor .combined-tutorial .tutorial-content {
        max-height: 160px;
        min-height: 100px;
        padding: 8px 10px;
    }

    body.is-capacitor .combined-tutorial .tutorial-step-title {
        font-size: 0.95em;
        margin-bottom: 4px;
    }

    body.is-capacitor .combined-tutorial .tutorial-step-content {
        font-size: 0.8em;
        line-height: 1.3;
    }

    body.is-capacitor .combined-tutorial .tutorial-step-content p {
        margin-bottom: 4px;
    }

    body.is-capacitor .combined-tutorial .tutorial-goal-mini {
        width: 24px;
        height: 24px;
        font-size: 0.8em;
    }

    body.is-capacitor .combined-tutorial .tutorial-int-key {
        width: 24px;
        height: 28px;
        font-size: 0.7em;
    }

    body.is-capacitor .combined-tutorial .tutorial-typed-word {
        font-size: 1.1em;
        min-height: 24px;
    }

    body.is-capacitor .combined-tutorial .tutorial-btn {
        padding: 6px 14px;
        font-size: 0.8em;
    }
}

/* Narrow screens (width-based) */
@media screen and (max-width: 380px) {
    body.is-capacitor .combined-tutorial .tutorial-step-content {
        font-size: 0.82em;
    }

    body.is-capacitor .combined-tutorial .tutorial-goal-mini {
        width: 26px;
        height: 26px;
    }

    body.is-capacitor .combined-tutorial .tutorial-int-key {
        width: 26px;
        height: 30px;
        font-size: 0.72em;
        gap: 3px;
    }
}

/* ========================================
   Head-to-Head Pre-Game Description
   ======================================== */

.h2h-ready-description {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.h2h-ready-description h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #a5b4fc;
}

.h2h-mode-description {
    font-size: 1.1em;
    color: #e8eaed;
    margin-bottom: 15px;
    line-height: 1.5;
}

.h2h-rules {
    font-size: 0.95em;
    color: #9ca3af;
}

.h2h-rules p {
    margin-bottom: 8px;
}

.h2h-rules ul {
    list-style: none;
    padding-left: 0;
}

.h2h-rules li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
}

.h2h-rules li::before {
    content: "•";
    position: absolute;
    left: 5px;
    color: #6366f1;
}

/* ========================================
   Goals Section Wrapper
   ======================================== */

.goals-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* H2H mode - remove the old "Your Goals" label since we use column headers now */
.sidebar.h2h-mode .goals-container::before {
    display: none;
}

/* ========================================
   Goal Row with Adjacent Opponent Cell
   ======================================== */

.goal-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 8px;
}

.goal-row .goal-item {
    flex: 1;
    margin-bottom: 0;
    border-radius: 8px;
}

/* Opponent cell - hidden by default, shown only in H2H mode */
.opponent-goal-cell {
    display: none;
    width: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(185, 28, 28, 0.08) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 0 8px 8px 0;
    align-items: center;
    justify-content: center;
    position: relative;
}

.opponent-progress-ring {
    width: 32px;
    height: 32px;
    position: absolute;
}

.opponent-ring-bg {
    stroke: rgba(239, 68, 68, 0.2);
}

.opponent-ring-fill {
    transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}

.opponent-cell-icon {
    font-size: 0.85em;
    z-index: 1;
    opacity: 0.6;
}

.opponent-goal-cell.completed .opponent-cell-icon {
    opacity: 1;
}

.opponent-goal-cell.completed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(22, 163, 74, 0.12) 100%);
    border-color: rgba(34, 197, 94, 0.3);
}

.opponent-goal-cell.completed .opponent-ring-fill {
    stroke: #22c55e !important;
    stroke-dashoffset: 0 !important;
}

/* Show opponent cells in H2H mode */
.sidebar.h2h-mode .opponent-goal-cell {
    display: flex;
}

/* In H2H mode, goal-item connects to opponent cell */
.sidebar.h2h-mode .goal-row .goal-item {
    border-radius: 8px 0 0 8px;
    border-right: none;
}

/* Column headers for H2H mode */
.goal-column-headers {
    display: none;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar.h2h-mode .goal-column-headers {
    display: flex;
}

.column-header-you {
    flex: 1;
    font-size: 0.75em;
    font-weight: 600;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-header-opp {
    width: 48px;
    text-align: center;
    font-size: 0.7em;
    font-weight: 600;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Opponent info bar above goals - compact header */
.opponent-info-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(30, 32, 48, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.8em;
}

.opponent-info-bar .opponent-info-label {
    color: #9ca3af;
    font-weight: 400;
}

.opponent-info-bar .opponent-info-name {
    color: #e8eaed;
    font-weight: 500;
    margin-left: 4px;
}

.opponent-info-bar .opponent-info-score-label {
    color: #6b7280;
    margin-left: auto;
    margin-right: 4px;
}

.opponent-info-bar .opponent-info-score {
    color: #a78bfa;
    font-weight: 600;
    font-size: 1.1em;
}

/* Show opponent info bar in H2H mode */
.sidebar.h2h-mode .opponent-info-bar {
    display: flex;
}

/* ========================================
   H2H Mode Goal Layout Adjustments
   ======================================== */

/* Keep goals-section-wrapper in column layout */
.sidebar.h2h-mode .goals-section-wrapper {
    flex-direction: column;
    gap: 0;
}

/* Make user's goals slightly more compact in H2H mode */
.sidebar.h2h-mode .goal-item {
    padding: 8px 10px;
}

.sidebar.h2h-mode .goal-title {
    font-size: 0.9em;
}

.sidebar.h2h-mode .goal-description {
    font-size: 0.8em;
    margin-top: 2px;
}

.sidebar.h2h-mode .progress-ring-container {
    width: 32px;
    height: 32px;
}

.sidebar.h2h-mode .progress-text {
    font-size: 0.65em;
}

/* Mobile responsive styles for goal rows with opponent cells */
@media (max-width: 768px) {
    .opponent-goal-cell {
        width: 35px;
        min-width: 35px;
    }

    .opponent-cell-icon {
        font-size: 1em;
    }

    .opponent-info-bar {
        padding: 6px 10px;
        font-size: 0.85em;
    }
}

/* ========================================
   Mobile H2H Elements (Capacitor)
   ======================================== */

/* Mobile H2H Score Display (highest_score mode) */
.mobile-h2h-scores {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 16px 8px;
    background: rgba(26, 27, 40, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-h2h-player-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.mobile-h2h-player-score .mobile-h2h-player-name {
    font-size: 0.75em;
    color: #8b8d98;
    margin-bottom: 2px;
}

.mobile-h2h-player-score .mobile-h2h-player-points {
    font-size: 1.4em;
    font-weight: bold;
    color: #e8eaed;
}

.mobile-h2h-player1 .mobile-h2h-player-points {
    color: #22c55e;
}

.mobile-h2h-player2 .mobile-h2h-player-points {
    color: #ef4444;
}

.mobile-h2h-vs {
    font-size: 0.9em;
    font-weight: bold;
    color: #6b7280;
}

/* Mobile H2H Goals Progress (first_to_finish mode) */
.mobile-h2h-goals-progress {
    display: none;
    flex-direction: column;
    padding: 8px 16px;
    margin: 0 16px 8px;
    background: rgba(26, 27, 40, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-h2h-goals-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.8em;
}

.mobile-h2h-goals-you {
    color: #22c55e;
    font-weight: 600;
}

.mobile-h2h-goals-opp {
    color: #ef4444;
    font-weight: 600;
}

.mobile-h2h-goals-track {
    position: relative;
    height: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.mobile-h2h-goals-bar {
    position: absolute;
    height: 8px;
    border-radius: 4px;
    left: 0;
    width: 0%;
    transition: width 0.3s ease;
}

.mobile-h2h-goals-bar-player1 {
    top: 2px;
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.mobile-h2h-goals-bar-player2 {
    bottom: 2px;
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Mobile Opponent Goals Side Panel (right side) */
.mobile-opponent-goals-side {
    display: none;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 6px;
    padding: 6px 4px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    z-index: 10;
}

.mobile-opp-label {
    font-size: 0.6em;
    font-weight: 600;
    color: #ef4444;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.mobile-opp-goal {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.mobile-opp-goal .goal-ring {
    position: absolute;
    width: 100%;
    height: 100%;
}

.mobile-opp-goal .goal-symbol {
    font-size: 0.85em;
    z-index: 1;
    opacity: 0.6;
}

.mobile-opp-goal.completed {
    background: rgba(34, 197, 94, 0.15);
}

.mobile-opp-goal.completed .goal-symbol {
    opacity: 1;
}

.mobile-opp-goal.completed .goal-ring-fill {
    stroke: #22c55e !important;
    stroke-dashoffset: 0 !important;
}

/* Show mobile H2H elements when in H2H mode */
body.is-capacitor.h2h-active .mobile-h2h-scores.visible {
    display: flex;
}

body.is-capacitor.h2h-active .mobile-h2h-goals-progress.visible {
    display: flex;
}

body.is-capacitor.h2h-active .mobile-opponent-goals-side.visible {
    display: flex;
}

/* Adjust mobile goals side (left) when opponent panel is visible */
body.is-capacitor.h2h-active .mobile-goals-side {
    left: 4px;
}

/* Widen game content padding when opponent panel is visible */
body.is-capacitor.h2h-active .mobile-game-content {
    padding-left: 50px;
    padding-right: 50px;
}

/* ===== Priority Goals System ===== */

/* Priority goal indicator - pulsing glow animation */
.goal-item.priority-goal {
    position: relative;
    animation: priorityGlow 2s ease-in-out infinite;
}

.goal-item.priority-goal::before {
    content: '⭐';
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 1.2em;
    animation: priorityStarPulse 1.5s ease-in-out infinite;
    z-index: 10;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
}

@keyframes priorityGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3),
                    0 0 10px rgba(255, 165, 0, 0.2),
                    inset 0 0 10px rgba(255, 215, 0, 0.05);
        border-color: rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5),
                    0 0 30px rgba(255, 165, 0, 0.3),
                    inset 0 0 20px rgba(255, 215, 0, 0.1);
        border-color: rgba(255, 215, 0, 0.7);
    }
}

@keyframes priorityStarPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.2) rotate(15deg);
        opacity: 0.8;
    }
}

/* Balloon pop animation for priority star loss */
@keyframes starBalloonPop {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    55% {
        transform: scale(1.25);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.priority-goal.priority-lost::before,
.priority-goal.priority-lost::after {
    animation: starBalloonPop 0.4s ease-in forwards !important;
}

/* Priority goal completion animation - golden celebration */
@keyframes priorityGoalComplete {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    20% {
        transform: scale(1.15);
        box-shadow: 0 0 60px rgba(255, 215, 0, 1),
                    0 0 100px rgba(255, 165, 0, 0.7);
    }
    40% {
        transform: scale(1.1);
        box-shadow: 0 0 50px rgba(255, 215, 0, 0.9),
                    0 0 80px rgba(255, 165, 0, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 25px rgba(39, 174, 96, 0.5);
    }
}

/* Priority Bonus Celebration Overlay */
.priority-bonus-celebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.priority-bonus-celebration.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.priority-bonus-celebration.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.5s ease-out;
}

.priority-bonus-content {
    background: linear-gradient(135deg, #1a1b28 0%, #2d2540 50%, #1a1b28 100%);
    border: 3px solid rgba(255, 215, 0, 0.6);
    border-radius: 20px;
    padding: 30px 50px;
    text-align: center;
    box-shadow:
        0 0 60px rgba(255, 215, 0, 0.4),
        0 0 100px rgba(255, 165, 0, 0.2),
        0 20px 60px rgba(0, 0, 0, 0.5);
    animation: priorityContentShine 2s ease-in-out infinite;
}

@keyframes priorityContentShine {
    0%, 100% {
        border-color: rgba(255, 215, 0, 0.6);
    }
    50% {
        border-color: rgba(255, 215, 0, 1);
    }
}

.priority-bonus-star {
    font-size: 3em;
    animation: priorityBonusStarSpin 1s ease-out;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

@keyframes priorityBonusStarSpin {
    0% {
        transform: rotate(-180deg) scale(0);
    }
    60% {
        transform: rotate(20deg) scale(1.2);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.priority-bonus-title {
    font-size: 1.8em;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 5px;
    animation: priorityTitleGlow 1.5s ease-in-out infinite;
}

@keyframes priorityTitleGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

.priority-bonus-goal {
    font-size: 1.3em;
    color: #e8eaed;
    margin-bottom: 10px;
    font-weight: 500;
}

.priority-bonus-points {
    font-size: 1.5em;
    font-weight: 700;
    color: #4ade80;
    animation: priorityPointsPop 0.5s ease-out 0.3s both;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}

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

/* Mobile adjustments for priority goals */
@media (max-width: 768px) {
    .goal-item.priority-goal::before {
        top: -6px;
        right: -6px;
        font-size: 1em;
    }

    .priority-bonus-content {
        padding: 20px 30px;
    }

    .priority-bonus-star {
        font-size: 2.5em;
    }

    .priority-bonus-title {
        font-size: 1.4em;
    }

    .priority-bonus-goal {
        font-size: 1.1em;
    }

    .priority-bonus-points {
        font-size: 1.2em;
    }
}

/* Mobile goal icon priority indicator */
.mobile-goal-icon.priority-goal {
    animation: mobilePriorityGlow 2s ease-in-out infinite;
    position: relative;
}

.mobile-goal-icon.priority-goal::after {
    content: '⭐';
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.6em;
    animation: priorityStarPulse 1.5s ease-in-out infinite;
    z-index: 10;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
}

@keyframes mobilePriorityGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

/* Priority goal badge in tooltip */
.priority-goal-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 8px;
    font-size: 0.75em;
    font-weight: 600;
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    color: #1a1b28;
    border-radius: 12px;
    vertical-align: middle;
    animation: priorityBadgePulse 2s ease-in-out infinite;
}

@keyframes priorityBadgePulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    }
}

/* ============ Registration View ============ */

.registration-view {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 10px;
}

.registration-title {
    color: #667eea;
    font-size: 1.5em;
    margin: 0;
}

.registration-view .registration-subtitle {
    color: #888;
    font-size: 0.95em;
    margin: 0;
}

#registration-username-input,
#settings-new-username-input {
    padding: 14px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.3s;
    width: 100%;
    box-sizing: border-box;
}

#registration-username-input:focus,
#settings-new-username-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.registration-requirements {
    font-size: 0.8em;
    color: #999;
}

.registration-error {
    color: #e74c3c;
    font-size: 0.9em;
    padding: 8px 12px;
    background: #ffeaea;
    border-radius: 8px;
    border: 1px solid #f5c6cb;
}

.registration-submit-btn {
    padding: 14px 32px;
    font-size: 1.1em;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.registration-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.registration-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ Security Question ============ */

.security-question-step {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.security-question-label {
    color: #e8eaed;
    font-size: 0.9em;
    margin: 0;
}

.security-question-select {
    padding: 12px 14px;
    font-size: 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: #fff;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.3s;
}

.security-question-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.security-question-text {
    color: #667eea;
    font-size: 0.95em;
    font-weight: 500;
    font-style: italic;
    margin: 8px 0;
}

#security-answer-input,
#settings-security-answer-input {
    padding: 14px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.3s;
    width: 100%;
    box-sizing: border-box;
}

#security-answer-input:focus,
#settings-security-answer-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.username-display-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f0f1f5;
    border-radius: 10px;
    margin-bottom: 4px;
}

.username-label {
    color: #666;
    font-size: 0.88em;
    font-weight: 500;
}

.username-registered-name {
    color: #667eea;
    font-size: 1em;
    font-weight: 700;
}

.settings-gear-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    background: none;
    border: none;
    font-size: 1.6em;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s, transform 0.3s;
    padding: 4px;
    line-height: 1;
    z-index: 10;
}

.settings-gear-btn:hover {
    color: #667eea;
    transform: rotate(90deg);
}

.settings-tooltip {
    position: absolute;
    top: 8px;
    left: 40px;
    background: rgba(99, 102, 241, 0.95);
    color: white;
    font-size: 0.78em;
    font-weight: 500;
    padding: 8px 28px 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 11;
    animation: tooltipFadeIn 0.4s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.settings-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: rgba(99, 102, 241, 0.95);
}
.settings-tooltip-dismiss {
    position: absolute;
    top: 2px;
    right: 4px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
}
@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

.settings-tutorial-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.settings-tutorial-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.95em;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}
.settings-tutorial-btn:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.5);
}

.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3500;
}

.settings-panel {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}

.settings-header h2 {
    margin: 0;
    color: #667eea;
    font-size: 1.3em;
}

.close-settings-btn {
    background: none;
    border: none;
    font-size: 1.8em;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.close-settings-btn:hover {
    color: #333;
}

.settings-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-username-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-current-username {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f0f1f5;
    border-radius: 10px;
}

.settings-label {
    color: #666;
    font-size: 0.95em;
}

.settings-username-value {
    color: #667eea;
    font-weight: 700;
    font-size: 1.05em;
}

.stats-empty-message {
    color: #9ca3af; font-size: 0.95em; text-align: center;
    padding: 24px 16px; font-style: italic;
}

.settings-stats-section {
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.settings-stats-btn {
    width: 100%; padding: 12px 20px; font-size: 0.95em;
    background: rgba(129, 140, 248, 0.12); color: #a5b4fc;
    border: 1px solid rgba(129, 140, 248, 0.3); border-radius: 10px;
    cursor: pointer; font-weight: 600; transition: all 0.3s ease;
}
.settings-stats-btn:hover {
    background: rgba(129, 140, 248, 0.22);
    border-color: rgba(129, 140, 248, 0.5);
}

.settings-change-btn {
    padding: 10px 20px;
    font-size: 0.95em;
    background: rgba(102, 126, 234, 0.12);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.settings-change-btn:hover {
    background: rgba(102, 126, 234, 0.22);
    border-color: rgba(102, 126, 234, 0.5);
}

.settings-change-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-change-actions {
    display: flex;
    gap: 10px;
}

.settings-change-actions .registration-submit-btn {
    flex: 1;
    padding: 10px;
    font-size: 1em;
}

.settings-cancel-btn {
    flex: 1;
    padding: 10px;
    font-size: 1em;
    background: #f0f1f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.settings-cancel-btn:hover {
    background: #e0e1e5;
}

/* Recent Opponents */
.recent-opponents-container { margin-top: 0; }
.recent-opponents-list { display: flex; flex-direction: column; gap: 8px; }
.recent-opponent-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: rgba(45, 45, 68, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;
}
.recent-opponent-row:hover { border-color: rgba(155, 89, 182, 0.3); background: rgba(45, 45, 68, 0.7); }
.recent-opponent-name { color: #e8eaed; font-size: 1em; font-weight: 500; }
.recent-opponent-play-btn {
    padding: 8px 18px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white; font-size: 0.85em; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease; white-space: nowrap;
}
.recent-opponent-play-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(155, 89, 182, 0.4); }
.recent-opponent-play-btn:active { transform: translateY(0); }

/* Daily Completed Popup */
.daily-completed-popup {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0); z-index: 5000;
    transition: background 0.3s ease; pointer-events: all; cursor: pointer;
}
.daily-completed-popup.show { background: rgba(0, 0, 0, 0.6); }
.daily-completed-popup.fade-out { background: rgba(0, 0, 0, 0); }
.daily-completed-popup-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px;
    padding: 28px 32px; max-width: 340px; width: 90%;
    text-align: center; color: #e8eaed;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transform: scale(0.9); opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.daily-completed-popup.show .daily-completed-popup-content { transform: scale(1); opacity: 1; }
.daily-completed-popup.fade-out .daily-completed-popup-content { transform: scale(0.9); opacity: 0; }
.daily-completed-popup-icon { font-size: 2em; display: block; margin-bottom: 10px; }
.daily-completed-popup-content strong { font-size: 1.15em; display: block; margin-bottom: 8px; }
.daily-completed-popup-content p { margin: 6px 0; font-size: 0.95em; line-height: 1.4; opacity: 0.9; }

/* H2H Result Toast */
.h2h-result-toast {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0); z-index: 5000;
    transition: background 0.3s ease; pointer-events: all; cursor: pointer;
}
.h2h-result-toast.show { background: rgba(0, 0, 0, 0.6); }
.h2h-result-toast.fade-out { background: rgba(0, 0, 0, 0); }
.h2h-result-toast-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px;
    padding: 28px 32px; max-width: 340px; width: 90%;
    text-align: center; color: #e8eaed;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transform: scale(0.9); opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.h2h-result-toast.show .h2h-result-toast-content { transform: scale(1); opacity: 1; }
.h2h-result-toast.fade-out .h2h-result-toast-content { transform: scale(0.9); opacity: 0; }
.h2h-result-toast-icon { font-size: 2em; display: block; margin-bottom: 10px; }
.h2h-result-toast-content strong { font-size: 1.15em; display: block; margin-bottom: 8px; }
.h2h-result-toast-content p { margin: 6px 0; font-size: 0.95em; line-height: 1.4; opacity: 0.9; }
.h2h-result-toast-score { font-size: 1.3em; font-weight: 700; margin: 8px 0; }
.h2h-result-toast-score.win { color: #34d399; }
.h2h-result-toast-score.loss { color: #f87171; }
.h2h-result-toast-score.tie { color: #818cf8; }
.h2h-result-toast-hint { font-size: 0.8em; opacity: 0.5; margin-top: 12px; }

/* Social Hub Button */
.social-hub-btn {
    width: 100%; padding: 12px 20px; margin-top: 10px;
    border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 12px;
    background: linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%);
    color: #a5b4fc; font-size: 0.95em; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: relative;
}
.social-hub-btn:hover {
    background: linear-gradient(135deg, rgba(102,126,234,0.25) 0%, rgba(118,75,162,0.25) 100%);
    transform: translateY(-1px);
}
.social-hub-badge {
    background: #f87171; color: white; font-size: 0.7em;
    padding: 2px 7px; border-radius: 10px; font-weight: 700;
}
.social-hub-badge.badge-bounce {
    animation: badgeBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgeBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); }
    50% { transform: scale(0.85); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Friends System */
.settings-friends-section {
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.settings-friends-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.settings-friends-title { font-weight: 700; font-size: 1.05em; color: #333; }
.friends-request-count {
    background: #ef4444; color: white; font-size: 0.75em; font-weight: 700;
    padding: 2px 7px; border-radius: 10px; min-width: 18px; text-align: center;
}
.settings-add-friend {
    display: flex; gap: 8px; margin-bottom: 8px;
}
.settings-add-friend input {
    flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px;
    font-size: 0.95em; outline: none;
}
.settings-add-friend input:focus { border-color: #667eea; }
.add-friend-btn {
    padding: 10px 18px; border: none; border-radius: 8px;
    background: #667eea; color: white; font-weight: 600; cursor: pointer;
    transition: background 0.2s; white-space: nowrap;
}
.add-friend-btn:disabled { background: #ccc; cursor: not-allowed; }
.add-friend-btn:not(:disabled):hover { background: #5a6fd6; }
.add-friend-status {
    font-size: 0.85em; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
}
.add-friend-status.success { color: #16a34a; background: #f0fdf4; }
.add-friend-status.error { color: #dc2626; background: #fef2f2; }

/* Invite a Friend Button */
.invite-friend-btn {
    width: 100%; padding: 10px 16px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #5a6fd6 100%);
    color: white; font-weight: 600; font-size: 0.95em; cursor: pointer;
    transition: opacity 0.2s, background 0.3s; margin-bottom: 8px;
}
.invite-friend-btn:hover { opacity: 0.9; }
.invite-friend-btn.copied {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* Random Match Section */
.random-match-section {
    margin-bottom: 12px;
}
.random-match-btn {
    width: 100%; padding: 12px 16px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; font-weight: 700; font-size: 1em; cursor: pointer;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    transition: opacity 0.2s, transform 0.1s;
}
.random-match-btn:hover { opacity: 0.9; }
.random-match-btn:active { transform: scale(0.98); }
.random-match-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.random-match-status {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    background: #f8f9ff; border-radius: 10px; margin-top: 8px;
}
.random-match-spinner {
    width: 20px; height: 20px; border: 3px solid #e0e0e0;
    border-top-color: #667eea; border-radius: 50%;
    animation: matchSpin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes matchSpin { to { transform: rotate(360deg); } }
.random-match-text { flex: 1; font-size: 0.9em; color: #555; font-weight: 500; }
.random-match-cancel-btn {
    padding: 6px 14px; border: 1px solid #ddd; border-radius: 6px;
    background: white; color: #555; font-size: 0.85em; font-weight: 600;
    cursor: pointer; transition: background 0.2s;
}
.random-match-cancel-btn:hover { background: #f0f0f0; }

.friend-requests-label {
    font-size: 0.85em; font-weight: 600; color: #888; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 8px;
}
.friend-request-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; margin-bottom: 6px;
}
.friend-request-name { font-weight: 600; color: #333; }
.friend-request-actions { display: flex; gap: 6px; }
.friend-accept-btn {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: #22c55e; color: white; font-weight: 600; font-size: 0.8em;
    cursor: pointer; transition: background 0.2s;
}
.friend-accept-btn:hover { background: #16a34a; }
.friend-decline-btn {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: #ef4444; color: white; font-weight: 600; font-size: 0.8em;
    cursor: pointer; transition: background 0.2s;
}
.friend-decline-btn:hover { background: #dc2626; }
.friends-list { display: flex; flex-direction: column; gap: 6px; }
.friends-list-empty {
    text-align: center; color: #999; font-size: 0.9em; padding: 16px 0;
}
.friend-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: #f0f1f5; border-radius: 8px;
}
.friend-name { font-weight: 600; color: #333; }
.friend-actions { display: flex; gap: 6px; }
.friend-challenge-btn {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; font-weight: 600; font-size: 0.8em;
    cursor: pointer; transition: all 0.2s;
}
.friend-challenge-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(102,126,234,0.4); }
.friend-remove-btn {
    padding: 3px 7px; border: none; border-radius: 4px;
    background: transparent; color: #999; font-size: 0.7em;
    cursor: pointer; transition: color 0.2s;
}
.friend-remove-btn:hover { color: #ef4444; }

/* Settings gear button */
.settings-gear-btn { position: relative; }

/* H2H modal friends list */
.h2h-friends-container { margin-top: 0; }
.h2h-friends-list { display: flex; flex-direction: column; gap: 8px; }
.h2h-friend-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: rgba(45, 45, 68, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;
}
.h2h-friend-row:hover { border-color: rgba(102, 126, 234, 0.3); background: rgba(45, 45, 68, 0.7); }
.h2h-friend-name { color: #e8eaed; font-size: 1em; font-weight: 500; }
.h2h-friend-challenge-btn {
    padding: 8px 18px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; font-size: 0.85em; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease; white-space: nowrap;
}
.h2h-friend-challenge-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(102,126,234,0.4); }

/* === Async H2H Styles === */

/* H2H Type Picker Modal */
.h2h-type-picker-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 10002;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.h2h-type-picker-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 16px;
    padding: 28px 24px; max-width: 380px; width: 90%;
    text-align: center;
}
.h2h-type-picker-title {
    color: #e8eaed; font-size: 1.2em; font-weight: 600;
    margin-bottom: 20px;
}
.h2h-type-picker-title span { color: #818cf8; }
.h2h-type-picker-options {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 16px;
}
.h2h-type-option {
    background: rgba(45,45,68,0.6); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 16px 18px; cursor: pointer;
    text-align: left; transition: all 0.3s ease; color: #e8eaed;
}
.h2h-type-option:hover {
    border-color: rgba(102,126,234,0.4);
    background: rgba(45,45,68,0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102,126,234,0.2);
}
.h2h-type-option-title {
    font-size: 1.05em; font-weight: 600; margin-bottom: 4px;
    color: #a5b4fc;
}
.h2h-type-option-desc {
    font-size: 0.82em; color: #9ca3af; line-height: 1.4;
}
.h2h-type-picker-cancel {
    background: none; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 10px 24px; color: #9ca3af;
    font-size: 0.9em; cursor: pointer; transition: all 0.3s ease;
}
.h2h-type-picker-cancel:hover {
    border-color: rgba(255,255,255,0.3); color: #e8eaed;
}

/* Async Challenges Section (Settings Panel) */
.async-challenges-section {
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.async-challenges-label {
    color: #a5b4fc; font-size: 0.85em; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.async-challenges-list {
    display: flex; flex-direction: column; gap: 8px;
}
.async-challenge-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; background: rgba(45,45,68,0.5);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
}
.async-challenge-info {
    display: flex; flex-direction: column; gap: 2px;
}
.async-challenge-opponent {
    color: #e8eaed; font-size: 0.92em; font-weight: 500;
}
.async-challenge-status {
    font-size: 0.78em; font-weight: 500;
}
.async-challenge-status.your-turn { color: #34d399; }
.async-challenge-status.waiting { color: #fbbf24; }
.async-challenge-status.completed { color: #818cf8; }
.async-challenge-play-btn {
    padding: 6px 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    color: white; font-size: 0.8em; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease;
}
.async-challenge-play-btn:hover { transform: translateY(-1px); }
.async-challenge-view-btn {
    padding: 6px 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    color: white; font-size: 0.8em; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease;
}
.async-challenge-view-btn:hover { transform: translateY(-1px); }

/* W/L Record in Friend Row */
.friend-record {
    font-size: 0.75em; color: #9ca3af; font-weight: 500;
    margin-left: 6px;
}
.h2h-friend-record {
    font-size: 0.75em; color: #9ca3af; font-weight: 500;
    margin-left: 6px;
}

/* H2H Win/Loss Bar */
.h2h-bar {
    display: inline-flex;
    width: 48px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 8px;
    background: rgba(150, 150, 150, 0.2);
}
.h2h-bar-win {
    background: #34d399;
    height: 100%;
}
.h2h-bar-loss {
    background: #f87171;
    height: 100%;
}

/* Async Victory Overlay */
.async-victory-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.async-victory-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 20px;
    padding: 32px 28px; max-width: 450px; width: 90%;
    text-align: center; position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.5s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.async-victory-content.result-victory {
    border-color: rgba(52, 211, 153, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(52, 211, 153, 0.1);
}
.async-victory-content.result-defeat {
    border-color: rgba(248, 113, 113, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(248, 113, 113, 0.1);
}
.async-victory-content.result-tie {
    border-color: rgba(251, 191, 36, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(251, 191, 36, 0.1);
}
.async-victory-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; color: #9ca3af;
    font-size: 1.5em; cursor: pointer; line-height: 1;
}
.async-victory-close:hover { color: #e8eaed; }
.async-victory-title {
    font-size: 2em; font-weight: 700; margin-bottom: 6px;
    padding-top: 8px;
}
.async-victory-title.victory { color: #34d399; }
.async-victory-title.defeat { color: #f87171; }
.async-victory-title.tie { color: #fbbf24; }
.async-victory-medal {
    font-size: 3em; margin-bottom: 8px;
    animation: asyncMedalBounce 0.6s ease-out;
}
@keyframes asyncMedalBounce {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

/* Score Face-Off Cards */
.async-victory-scores {
    margin: 16px 0; padding: 0;
    background: none; border-radius: 0;
    border: none;
}
.async-victory-faceoff {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    perspective: 800px;
    padding: 12px 0 20px;
    position: relative;
}
.async-faceoff-card {
    flex: 1;
    max-width: 170px;
    padding: 22px 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
}
.async-faceoff-card.card-left {
    transform: rotateY(14deg);
    transform-origin: right center;
    box-shadow:
        8px 16px 30px rgba(0, 0, 0, 0.6),
        4px 8px 12px rgba(0, 0, 0, 0.4),
        0 20px 25px -10px rgba(0, 0, 0, 0.5);
}
.async-faceoff-card.card-right {
    transform: rotateY(-14deg);
    transform-origin: left center;
    box-shadow:
        -8px 16px 30px rgba(0, 0, 0, 0.6),
        -4px 8px 12px rgba(0, 0, 0, 0.4),
        0 20px 25px -10px rgba(0, 0, 0, 0.5);
}
.async-faceoff-card.card-winner {
    border-color: rgba(52, 211, 153, 0.35);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.async-faceoff-card.card-winner.card-left {
    box-shadow:
        8px 16px 30px rgba(0, 0, 0, 0.6),
        4px 8px 12px rgba(0, 0, 0, 0.4),
        0 20px 25px -10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(52, 211, 153, 0.15);
}
.async-faceoff-card.card-winner.card-right {
    box-shadow:
        -8px 16px 30px rgba(0, 0, 0, 0.6),
        -4px 8px 12px rgba(0, 0, 0, 0.4),
        0 20px 25px -10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(52, 211, 153, 0.15);
}
.async-faceoff-card.card-loser {
    opacity: 0.65;
}
.async-faceoff-card.card-tie {
    border-color: rgba(251, 191, 36, 0.25);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
}
.async-faceoff-name {
    font-size: 0.8em;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.async-faceoff-card.card-winner .async-faceoff-name {
    color: #34d399;
}
.async-faceoff-score {
    font-size: 2.4em;
    font-weight: 800;
    color: #e8eaed;
    line-height: 1;
}
.async-faceoff-card.card-winner .async-faceoff-score {
    color: #34d399;
}
.async-faceoff-vs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85em;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 1px;
    z-index: 2;
    pointer-events: none;
}

/* Score card entrance animation */
@keyframes faceoffCardLeft {
    0% { opacity: 0; transform: rotateY(40deg) translateX(-20px) scale(0.9); }
    100% { opacity: 1; transform: rotateY(14deg) translateX(0) scale(1); }
}
@keyframes faceoffCardRight {
    0% { opacity: 0; transform: rotateY(-40deg) translateX(20px) scale(0.9); }
    100% { opacity: 1; transform: rotateY(-14deg) translateX(0) scale(1); }
}
.async-faceoff-card.card-left { animation: faceoffCardLeft 0.5s ease 0.2s both; }
.async-faceoff-card.card-right { animation: faceoffCardRight 0.5s ease 0.35s both; }

/* Kept for waiting screen compatibility */
.async-victory-score-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; color: #e8eaed; font-size: 1em;
}
.async-victory-score-row.winner { color: #34d399; font-weight: 600; }
.async-victory-score-row .score-label { font-weight: 500; }
.async-victory-score-row .score-val { font-weight: 700; font-size: 1.1em; }

/* Full-width record bar */
.async-victory-record {
    margin: 4px 0 20px;
    padding: 14px 16px;
    background: rgba(45, 45, 68, 0.4);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.async-victory-record-label {
    font-size: 0.8em;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.async-victory-record-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(150, 150, 150, 0.15);
    margin-bottom: 6px;
}
.async-victory-record-bar-win {
    background: linear-gradient(90deg, #34d399, #10b981);
    height: 100%;
    transition: width 0.6s ease 0.5s;
}
.async-victory-record-bar-loss {
    background: linear-gradient(90deg, #f87171, #ef4444);
    height: 100%;
    transition: width 0.6s ease 0.5s;
}
.async-victory-record-counts {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    font-weight: 600;
}
.async-victory-record-wins { color: #34d399; }
.async-victory-record-losses { color: #f87171; }

.async-victory-rematch-btn {
    padding: 12px 28px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; font-size: 0.95em; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease; margin-right: 8px;
}
.async-victory-rematch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(102,126,234,0.4);
}
.async-victory-done-btn {
    padding: 12px 28px; border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px; background: none; color: #e8eaed;
    font-size: 0.95em; font-weight: 500; cursor: pointer;
    transition: all 0.3s ease;
}
.async-victory-done-btn:hover {
    border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05);
}

/* Async Challenge Invite & Waiting States */
.async-challenge-status.invite { color: #60a5fa; }
.async-challenge-status.sent-pending { color: #c084fc; }
.async-challenge-status.defeat { color: #f87171; }
.async-challenge-decline-btn {
    padding: 6px 14px; border: 1px solid #f87171; border-radius: 8px;
    background: none; color: #f87171; font-size: 0.8em; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease;
}
.async-challenge-decline-btn:hover {
    background: rgba(248,113,113,0.15); transform: translateY(-1px);
}
.async-challenge-actions {
    display: flex; gap: 8px; align-items: center;
}
.async-challenge-invite {
    border-color: rgba(96,165,250,0.3);
    background: rgba(96,165,250,0.08);
}
.async-victory-title.waiting { color: #60a5fa; }
.async-waiting-message {
    color: #9ca3af; font-style: italic; font-size: 0.9em;
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Stats section dividers */
.stats-section-title {
    font-size: 0.8em;
    font-weight: 700;
    color: #818cf8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(129,140,248,0.15);
}
.stats-section-title:first-child {
    margin-top: 0;
}

/* Async medals in stats */
.stats-medals-row {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-top: 8px; color: #fbbf24; font-size: 0.95em;
    font-weight: 600;
}

/* H2H Stats Section in Stats Dashboard */
.stats-h2h-section {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.06) 100%);
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: 10px;
}

.stats-h2h-header {
    font-size: 0.85em;
    font-weight: 700;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.stats-h2h-summary {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 14px;
}

.stats-h2h-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.stats-h2h-item .stats-value {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1;
}

.stats-h2h-item .stats-label {
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.stats-h2h-wins .stats-value { color: #34d399; }
.stats-h2h-losses .stats-value { color: #f87171; }
.stats-h2h-winrate .stats-value { color: #a5b4fc; }

.stats-h2h-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(150, 150, 150, 0.15);
}

.stats-h2h-bar-win {
    background: linear-gradient(90deg, #34d399, #10b981);
    height: 100%;
    transition: width 0.6s ease;
}

.stats-h2h-bar-loss {
    background: linear-gradient(90deg, #f87171, #ef4444);
    height: 100%;
    transition: width 0.6s ease;
}

.stats-h2h-empty {
    color: #9ca3af;
    font-size: 0.88em;
    font-style: italic;
    text-align: center;
    padding: 4px 0;
}

/* Async H2H notification toast */
.async-notification-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 20px) + 8px);
    right: 12px;
    transform: translateX(calc(100% + 12px));
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.85em; font-weight: 600;
    z-index: 10005;
    transition: transform 0.3s ease;
    text-align: left;
    max-width: 75%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.async-notification-toast.visible {
    transform: translateX(0);
}

.settings-delete-account-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}
.settings-delete-account-btn {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.settings-delete-account-btn:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.5);
}

/* ============ Network Status Banner ============ */
.network-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(245,158,11,0.10) 100%);
    border: 1px solid rgba(251,191,36,0.35);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.network-status-banner.visible {
    opacity: 1;
    transform: translateY(0);
}
.network-status-icon {
    font-size: 1.3em;
    color: #fbbf24;
    flex-shrink: 0;
}
.network-status-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.88em;
    line-height: 1.35;
    color: rgba(255,255,255,0.9);
}
.network-status-text strong {
    color: #fbbf24;
    font-size: 0.95em;
}
.network-status-text span {
    opacity: 0.75;
    font-size: 0.92em;
}

/* ============ Mode Button Offline State ============ */
.mode-btn.mode-offline {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}
.mode-offline-badge {
    display: block;
    background: rgba(251,191,36,0.25);
    color: #fbbf24;
    font-size: 0.65em;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    margin-top: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ============ Mid-Game H2H Network Warning ============ */
.network-game-warning {
    position: fixed;
    top: calc(env(safe-area-inset-top, 20px) + 8px);
    right: 12px;
    transform: translateX(calc(100% + 12px));
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.85em;
    font-weight: 600;
    z-index: 10005;
    transition: transform 0.3s ease;
    text-align: left;
    max-width: 75%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.network-game-warning.visible {
    transform: translateX(0);
}

/* --- Player Profile Popup (.pp-*) --- */

.entry-leaderboard-row:not(.entry-leaderboard-you),
.leaderboard-item:not(.leaderboard-you) {
    cursor: pointer;
}
.entry-leaderboard-row:not(.entry-leaderboard-you):active,
.leaderboard-item:not(.leaderboard-you):active {
    background: rgba(255,255,255,0.08);
}

.pp-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    transition: background 0.25s ease;
}
.pp-overlay.pp-active {
    background: rgba(0,0,0,0.55);
}
.pp-overlay.pp-out {
    background: rgba(0,0,0,0);
}

.pp-card {
    position: relative;
    width: 280px;
    max-width: 90vw;
    background: linear-gradient(145deg, #1e1e2e 0%, #15152a 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 24px 20px 20px;
    color: #fff;
    text-align: center;
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.pp-active .pp-card {
    transform: scale(1);
    opacity: 1;
}
.pp-out .pp-card {
    transform: scale(0.85);
    opacity: 0;
}

.pp-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.pp-username {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

.pp-loading {
    color: rgba(255,255,255,0.5);
    font-size: 0.9em;
    padding: 20px 0;
}

.pp-stats-grid,
.pp-streaks {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pp-stat {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 10px 6px 8px;
}
.pp-stat-val {
    font-size: 1.15em;
    font-weight: 700;
}
.pp-stat-label {
    font-size: 0.7em;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pp-h2h {
    margin: 10px 0 4px;
}
.pp-h2h-label {
    font-size: 0.78em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}

.pp-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.pp-btn {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 10px 0;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.pp-btn:active {
    opacity: 0.8;
}
.pp-btn:disabled {
    cursor: default;
    opacity: 0.7;
}
.pp-btn-friend {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
}
.pp-btn-challenge {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #fff;
}
.pp-btn-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}
.pp-btn-muted {
    background: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.6) !important;
}
.pp-btn-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}