/**
 * components.css
 * Reusable UI components: buttons, cards, chips, badges, score chips, timers.
 * All components use CSS custom properties from design-system.css.
 */

/* ─────────────────────────────────────────────
   PRIMARY BUTTON
   The big chunky gradient CTA button.
   Height is 4rem; fully pill-shaped.
   ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height:  clamp(3rem, 7vh, 4.5rem);
    padding: 0 var(--space-2xl);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--background);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;

    /* Flat solid color */
    background: var(--btn-from, var(--primary));

    /* Hard offset bottom shadow — classic game button look */
    border: 3px solid rgba(0,0,0,0.65);
    box-shadow:
        0 5px 0 rgba(0,0,0,0.55),
        3px 8px 0 rgba(0,0,0,0.2);

    /* Smooth interactions */
    transition:
        transform      var(--transition-fast),
        box-shadow     var(--transition-fast),
        filter         var(--transition-fast);

    /* Prevent double-tap zoom */
    touch-action: manipulation;
    user-select: none;
}

/* Ripple layer */
.btn::after {
    content: '';
    position: absolute;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* Active / pressed state — "sinks" visually */
.btn:active {
    transform: translateY(5px);
    filter: brightness(0.88);
    box-shadow: 0 0 0 rgba(0,0,0,0.5);
}

/* Hover (mouse devices) */
.btn:hover:not(:active) {
    filter: brightness(1.08);
}

/* Focus-visible ring for keyboard accessibility */
.btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* ── Color variants ────────────── */
.btn-primary {
    --btn-from: var(--primary);
    --btn-to:   var(--primary-container);
    color: var(--background);
}

.btn-secondary {
    --btn-from: var(--secondary);
    --btn-to:   var(--secondary-dim);
    color: var(--background);
}

.btn-tertiary {
    --btn-from: var(--tertiary);
    --btn-to:   var(--tertiary-container);
    color: var(--background);
}

.btn-surface {
    --btn-from: var(--surface-container-highest);
    --btn-to:   var(--surface-container-high);
    color: var(--on-surface);
}

/* ── Size modifiers ────────────── */
.btn-sm {
    height: clamp(2rem, 4vh, 3rem);
    padding: 0 var(--space-lg);
    font-size: var(--text-sm);
}

.btn-lg {
    height: clamp(4rem, 9vh, 6rem);
    padding: 0 var(--space-2xl);
    font-size: var(--text-xl);
}

/* ── Emoji icon inside button ───── */
.btn .btn-icon {
    font-size: 1.3em;
    line-height: 1;
}

/* ─────────────────────────────────────────────
   PLAYER COUNT BUTTONS  (on the home screen)
   Extra-large, with the player count number + label
   stacked vertically.
   ───────────────────────────────────────────── */
.player-count-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width:  clamp(9rem, 18vw, 14rem);
    height: clamp(9rem, 18vw, 14rem);
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;

    background: var(--btn-from, var(--primary));

    border: 4px solid rgba(0,0,0,0.65);
    box-shadow:
        0 7px 0 rgba(0,0,0,0.55),
        4px 10px 0 rgba(0,0,0,0.18);

    transition:
        transform      var(--transition-bounce),
        box-shadow     var(--transition-fast),
        filter         var(--transition-fast);
}

.player-count-btn:active {
    transform: translateY(7px);
    filter: brightness(0.88);
    box-shadow: 0 0 0 rgba(0,0,0,0.5);
}

.player-count-btn:hover:not(:active) {
    transform: scale(1.04) translateY(-4px);
    filter: brightness(1.1);
}

.player-count-btn .count-number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--background);
}

.player-count-btn .count-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--background) 80%, transparent);
}

/* ─────────────────────────────────────────────
   GAME SELECT CARD
   Used in game-select.html; one card per game.
   ───────────────────────────────────────────── */
.game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    user-select: none;
    min-height: 0;
    flex: 1;

    /* Flat solid tinted background */
    background: color-mix(in srgb, var(--card-color, var(--primary)) 20%, var(--surface-container));

    border: 3px solid color-mix(in srgb, var(--card-color, var(--primary)) 80%, #000);

    /* Hard offset shadow — game card look */
    box-shadow:
        4px 4px 0 color-mix(in srgb, var(--card-color, var(--primary)) 50%, #000),
        5px 6px 0 rgba(0,0,0,0.35);

    transition:
        transform      var(--transition-bounce),
        box-shadow     var(--transition-fast),
        filter         var(--transition-fast);
}

.game-card:hover:not(:active) {
    transform: translateY(-3px);
    box-shadow:
        4px 7px 0 color-mix(in srgb, var(--card-color, var(--primary)) 50%, #000),
        5px 9px 0 rgba(0,0,0,0.35);
}

.game-card:active {
    transform: translate(4px, 4px);
    filter: brightness(0.9);
    box-shadow: 0 0 0 rgba(0,0,0,0.4);
}

.game-card-icon {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.game-card-name {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 2.2vw, 1.4rem);
    color: var(--on-surface);
    text-align: center;
    line-height: 1.1;
}

.game-card-desc {
    font-family: var(--font-body);
    font-size: clamp(0.6rem, 1.4vw, 0.85rem);
    color: var(--on-surface-variant);
    text-align: center;
    line-height: 1.3;
}

/* Locked / placeholder game */
.game-card.locked {
    opacity: 0.45;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   STICKER / BADGE
   "NEW" badge overlaid on a game card.
   ───────────────────────────────────────────── */
.sticker {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
    z-index: 2;

    /* Rotation for sticker feel */
    transform: rotate(8deg);
}

.sticker-new {
    background: var(--secondary);
    color: var(--background);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sticker-hot {
    background: var(--primary);
    color: var(--background);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ─────────────────────────────────────────────
   SCORE CHIP
   Floating score display in each game panel.
   ───────────────────────────────────────────── */
.score-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    background: var(--surface-container-highest);
    border: 2.5px solid color-mix(in srgb, var(--panel-color, var(--primary)) 70%, #000);
    box-shadow:
        2px 3px 0 rgba(0,0,0,0.4);
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--panel-color, var(--primary));
    white-space: nowrap;
}

.score-chip .score-icon {
    font-size: 1.1em;
}

/* ─────────────────────────────────────────────
   TIMER BAR
   Horizontal progress bar showing time remaining.
   ───────────────────────────────────────────── */
.timer-bar-wrapper {
    width: 100%;
    height: clamp(6px, 1.2vh, 10px);
    background: var(--surface-container-highest);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.timer-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transition: width 1s linear, background 1s linear;
    /* Turns red when low */
}

.timer-bar-fill.urgent {
    background: linear-gradient(90deg, var(--color-wrong), #ff4444);
    animation: pulseGlow 0.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   TIMER DIGIT
   Large countdown number shown in games.
   ───────────────────────────────────────────── */
.timer-digit {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--primary);
    min-width: 2.5ch;
    text-align: center;
    transition: color var(--transition-normal);
}

.timer-digit.urgent {
    color: var(--color-wrong);
    animation: timerPulse 0.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   QUESTION DISPLAY
   The math question shown at the top of Number Pop.
   ───────────────────────────────────────────── */
.question-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-lg);
    background: var(--surface-container-high);
    border-radius: var(--radius-xl);
    border: 3px solid color-mix(in srgb, var(--panel-color, var(--primary)) 70%, #000);
    box-shadow:
        3px 4px 0 rgba(0,0,0,0.4);
}

.question-text {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 3rem);
    color: var(--on-surface);
    text-align: center;
    letter-spacing: 0.05em;
}

/* ─────────────────────────────────────────────
   BUBBLE BUTTON
   The floating answer bubbles in Number Pop.
   Color is set per-bubble via inline --bubble-color.
   ───────────────────────────────────────────── */
.bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    position: absolute;
    font-family: var(--font-display);

    /* Size is set in JS using clamp-based vh/vw */
    width:  var(--bubble-size, 18%);
    aspect-ratio: 1;

    /* Flat solid color */
    background: var(--bubble-color, var(--primary));

    border: 3px solid rgba(0,0,0,0.55);
    box-shadow:
        3px 4px 0 rgba(0,0,0,0.45),
        4px 5px 0 rgba(0,0,0,0.2);

    color: var(--background);
    font-size: clamp(1rem, 4vw, 2.4rem);
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);

    transition:
        transform var(--transition-bounce),
        filter    var(--transition-fast);
}

.bubble:hover:not(:active) {
    transform: scale(1.06) translateY(-4px);
}

.bubble:active {
    transform: scale(0.93);
    filter: brightness(0.85);
}

/* Correct pop animation */
.bubble.pop-correct {
    animation: popCorrect 0.4s ease-out forwards;
    pointer-events: none;
}

/* Wrong shake animation */
.bubble.shake-wrong {
    animation: shake 0.45s ease-out;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   FLOATING SCORE DELTA
   "+10" or "-5" text that floats up after a tap.
   ───────────────────────────────────────────── */
.score-delta {
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 2rem);
    pointer-events: none;
    z-index: var(--z-toast);
    animation: scoreFlash 0.8s ease-out forwards;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.score-delta.positive { color: var(--color-correct); }
.score-delta.negative { color: var(--color-wrong); }

/* ─────────────────────────────────────────────
   GAME OVER OVERLAY
   Appears when the timer reaches zero.
   ───────────────────────────────────────────── */
.game-over-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-modal);
    background: color-mix(in srgb, var(--background) 88%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn var(--transition-normal) both;
    padding: var(--space-xl);
}

.game-over-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--primary);
    text-align: center;
    animation: bounceIn var(--transition-bounce) 0.1s both;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.game-over-score {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--on-surface);
    text-align: center;
    animation: bounceIn var(--transition-bounce) 0.2s both;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}

.game-over-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
    animation: slideUp var(--transition-normal) 0.3s both;
}

/* ─────────────────────────────────────────────
   LOADING SPINNER
   Shown while fonts / assets load.
   ───────────────────────────────────────────── */
.spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid var(--surface-variant);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ─────────────────────────────────────────────
   EMPTY STATE
   Shown in a panel before a game is selected.
   ───────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-md);
    padding: var(--space-xl);
    text-align: center;
    opacity: 0.6;
}

.empty-state-icon {
    font-size: clamp(2rem, 6vw, 4rem);
    filter: grayscale(0.3);
}

.empty-state-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--on-surface-variant);
}

/* ─────────────────────────────────────────────
   GAME SELECT HEADER (inside game-select view)
   ───────────────────────────────────────────── */
.game-select-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    flex-shrink: 0;
}

.game-select-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3vw, 2rem);
    color: var(--on-surface);
    text-align: center;
}

/* ─────────────────────────────────────────────
   STARS / DECORATIVE ELEMENTS
   Small floating star dots in the background.
   ───────────────────────────────────────────── */
.bg-star {
    position: absolute;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.12;
    pointer-events: none;
    animation: pulseGlow 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   DIFFICULTY INDICATOR
   Small pill showing current difficulty level.
   ───────────────────────────────────────────── */
.difficulty-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--surface-container-highest);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--on-surface-variant);
    border: 1px solid var(--outline-variant);
}

/* ─────────────────────────────────────────────
   MOBILE TOUCH TARGETS
   Ensure interactive elements meet minimum tap size on mobile.
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Target tap-able controls but not small picker/label buttons */
    .panel-back-btn,
    #btn-start-mobile,
    #btn-back-home,
    #btn-tournament,
    #btn-leaderboard {
        min-height: 44px;
    }
    /* Game panel content: allow vertical scroll on very small screens */
    .panel-content {
        overflow-y: auto;
    }
}