/* style-player-ui.css — the PLAYER mobile question UI (Task 2.x: info bar, buzzing, question
   header/modal, scoreboard drawer, MCQ/alpha/numeric tiles, going-wide, submission states).
   Split VERBATIM out of style.css (2026-06-27) and loaded IMMEDIATELY AFTER it everywhere
   style.css is linked, so the cascade/order is byte-identical — pure file organization. */

/* ========================================
   FIXED PLAYER INFO BAR (Task 2.1.1)
   ======================================== */
.player-info-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px; /* FIXED HEIGHT */
    background: linear-gradient(135deg, var(--brand, #667eea) 0%, var(--brand-700, #764ba2) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 500;
    z-index: 100;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.player-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.player-info-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
}

.player-info-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1;
}

.player-info-bar span {
    white-space: nowrap;
}

#questionCounterDisplay {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

.player-info-bar:active {
    opacity: 0.9;
}

/* ========================================
   BUZZING INTERFACE POSITIONING
   ======================================== */
#buzzing-interface {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 200; /* Above playerInfoBar (100), question-type-indicator (102), etc. */
    pointer-events: none; /* Allow clicks to pass through empty space */
    padding: 20px;
    padding-bottom: 30px;
    transition: background-color 0.3s ease;
}

/* Buzzer ENABLED — prominent red-tinted overlay so player knows they can tap */
#buzzing-interface.buzz-enabled {
    background: rgba(220, 53, 69, 0.12);
}

/* Buzzer DISABLED — subtle dark overlay */
#buzzing-interface.buzz-disabled-bg {
    background: rgba(0, 0, 0, 0.05);
}

#buzzer-container {
    pointer-events: auto; /* Re-enable clicks for the buzzer container */
    width: 100%;
    max-width: none;
}

#buzzer-status {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px; /* Space between text and button */
    padding: 0 20px;
}

/* Buzz button styles are now in theme.css using .buzz-btn state classes */

#agree-disagree-interface,
#poll-voting-interface {
    pointer-events: auto;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.agree-disagree-btn {
    position: relative;
    width: 100% !important;
    /* Was a flat 160px — two side-by-side made the voting screen overwhelming on
       phones. clamp() scales with viewport width so both buttons + the timer +
       results stay visible without the screen feeling button-heavy. */
    min-height: clamp(96px, 23vw, 124px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20) !important;
    transition: transform 0.12s ease, box-shadow 0.15s ease !important;
}

.agree-disagree-btn:hover:not(:disabled) {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
}

.agree-disagree-btn:active:not(:disabled) {
    transform: scale(0.96);
}

/* Voted-selected: obvious "pressed / chosen" state */
.agree-disagree-btn.voted-selected {
    filter: brightness(1.18) saturate(1.2) !important;
    border: 4px solid #fff !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.55), 0 8px 28px rgba(0,0,0,0.38) !important;
    transform: scale(1.06) !important;
    transition: none !important;
}
.agree-disagree-btn.voted-selected::after {
    content: "✔";
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* Voted-dimmed: the un-chosen button */
.agree-disagree-btn.voted-dimmed {
    opacity: 0.32 !important;
    filter: grayscale(35%) !important;
    transform: scale(0.88) !important;
    transition: none !important;
}

.agree-disagree-icon {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1;
}

.agree-disagree-label {
    font-size: clamp(15px, 4.5vw, 18px);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ========================================
   FIXED QUESTION HEADER (Task 2.1.2)
   ======================================== */
body.player-root {
    --player-info-height: 50px;
    --player-question-header-height: 124px;
    --player-bottom-controls-height: 75px;
}

/* Hide old stats bar when new UI is active — #playerInfoBar is the replacement */
body.new-ui-active #playerStatsBar {
    display: none !important;
}

/* Push all in-flow content below the fixed #playerInfoBar when new UI is active */
body.player-root.new-ui-active {
    padding-top: 50px;
}

/* ========================================
   PLAYER IDLE BACKGROUND (between questions)
   Portrait image: Player Background.png  — player phones
   Landscape image: 0368bd01-48bd-49f9-a4f9-43b028c8d436.png  — host display TV
   ======================================== */
body.player-root.player-joined {
    /* background-image set dynamically by player.js (random from /static/images/backgrounds/player/) */
    background-color: #3a2000; /* dark warm fallback — hides white while image loads */
    background-size: cover;
    background-position: center center;
    background-attachment: scroll; /* fixed breaks on mobile Safari — scroll works correctly with position:fixed body */
    background-repeat: no-repeat;
}
/* Ensure readable content areas over the background */
body.player-root.player-joined #sessionInfo,
body.player-root.player-joined #pScores,
body.player-root.player-joined .player-scroll > main > .container,
body.player-root.player-joined #qArea {
    background: rgba(var(--surface-rgb, 255,255,255), 0.92);
    border-radius: 10px;
}

/* Question active: suppress background image so player focuses on the question */
body.player-root.question-active {
    background-image: none !important;
    background-color: #ffffff; /* white background during questions */
}

/* Host display idle background — landscape image shown between questions */
body.display-idle {
    /* background-image set dynamically by display.js (random from /static/images/backgrounds/display/) */
    background-color: #3a2000 !important; /* dark warm fallback */
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important; /* fixed causes issues in some browsers */
    background-repeat: no-repeat !important;
}
/* Semi-transparent overlay on content panels so text stays readable over the image */
body.display-idle .container-fluid {
    background: rgba(255, 255, 255, 0.82) !important;
}

.question-header-container {
    position: fixed;
    top: var(--player-info-height, 50px); /* Below player info bar */
    left: 0;
    right: 0;
    height: var(--player-question-header-height, 124px); /* Tall enough for 3 lines of question text */
    box-sizing: border-box;
    background: var(--surface-light, white);
    border-bottom: 2px solid var(--border-light, #ddd);
    padding: 10px 15px 12px;
    padding-right: 65px; /* Leave space for indicator */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    z-index: 140;
}

/* Question type indicator badge for buzz questions */
.question-header-container::before {
    content: attr(data-qtype);
    position: absolute;
    top: 10px;
    right: 10px; /* Changed from left to right */
    background: #dc3545;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: none; /* Hidden by default, shown via JS */
}

.question-header-container[data-qtype="buzz"]::before {
    display: block;
    content: '🔴 BUZZ IN';
}

/* Question metadata badges (category/difficulty) */
.question-metadata {
    text-align: center;
    padding: 4px 10px;
    margin-top: -2px;
    margin-bottom: 8px;
    opacity: 0.85;
}

.question-meta-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    margin: 0 3px;
    border-radius: 10px;
    background: rgba(108, 117, 125, 0.15);
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-meta-badge:empty {
    display: none;
}

/* Ensure question text appears above indicator */
.question-text {
    position: relative;
    z-index: 100;
}

.question-text {
    font-size: 19px;
    line-height: 1.22;
    font-weight: 700;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show up to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 100;
    max-width: 100%; /* Respect parent padding */
}

.question-expand-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
    display: none; /* Hidden - replaced by question type indicator */
}

/* ========================================
   QUESTION MODAL OVERLAY (Task 2.1.3)
   ======================================== */
.question-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.question-modal-overlay.active {
    display: flex;
}

.question-modal-content {
    background: var(--surface-light, white);
    border-radius: 12px;
    padding: 25px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.question-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    border: none;
    background: #f44336;
    color: white;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
}

.question-modal-text {
    font-size: 22px;
    line-height: 1.6;
    color: #333;
    margin-top: 15px;
}

/* ========================================
   SCOREBOARD DRAWER (Task 2.1.4)
   ======================================== */
.scoreboard-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 999;
}

.scoreboard-drawer-overlay.active {
    display: block;
}

.scoreboard-drawer {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    background: var(--surface-light, white);
    max-height: 70vh;
    overflow-y: auto;
    /* Keep the drawer's scroll from chaining up to the page once it hits
       either edge — pairs with the JS exit-early in pull-to-refresh.js to
       guarantee the user can scroll BOTH directions inside the leaderboard
       without the page's pull-to-refresh prevention intercepting the
       finger-down gesture. Also enables natural momentum scrolling on iOS. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    padding: 20px;
}

.scoreboard-drawer.active {
    transform: translateY(0);
}

.drawer-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.scoreboard-drawer-close {
    flex: 1;
    padding: 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.scoreboard-drawer-exit {
    flex: 1;
    padding: 12px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.scoreboard-drawer-close:hover {
    background: #5568d3;
}

.scoreboard-drawer-exit:hover {
    background: #c82333;
}

.scoreboard-session-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.scoreboard-session-info h6 {
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

.session-details {
    font-size: 14px;
    line-height: 1.8;
}

.session-details div {
    margin-bottom: 5px;
}

.scoreboard-list {
    max-height: 400px;
    overflow-y: auto;
}

.scoreboard-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--surface-light, white);
    border: 2px solid var(--border-light, #ddd);
    border-radius: 8px;
}

.scoreboard-entry.current-player {
    background: color-mix(in srgb, var(--surface-light, #e3f2fd) 70%, var(--brand, #2196f3) 30%);
    border-color: var(--brand, #2196f3);
    font-weight: bold;
}

.scoreboard-entry .rank {
    min-width: 40px;
    font-weight: bold;
    color: var(--text-mid, #666);
}

.scoreboard-entry .team-name {
    flex: 1;
    padding: 0 10px;
}

.scoreboard-entry .score {
    font-weight: bold;
    color: var(--brand, #667eea);
}

/* ========================================
   MCQ/MULTI-TAP TILES (Task 2.2.1, 2.2.2, 2.2.3)
   ======================================== */
.answer-tiles-container {
    position: fixed;
    top: calc(var(--player-info-height, 50px) + var(--player-question-header-height, 124px));
    left: 0;
    right: 0;
    bottom: var(--player-bottom-controls-height, 75px); /* Leave room for timer (12px) + Go Wide button (~55px) + gap */
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Owner 2026-06-14: scrolling is allowed again, but made SAFE. Tiles keep a comfortable size
       (min-height below); when there are more than fit, this region scrolls. A prominent scrollbar
       (styled below) lets players shift down WITHOUT touching tiles, and a drag-aware tap guard
       (installScrollGuard in answer-renderers.js) means a scroll-drag never selects a tile. Most
       questions now show only their filled options (A–D etc.), so scrolling is rarely needed. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;            /* allow vertical scroll even with body touch-action:none */
    overscroll-behavior: contain;
    scrollbar-gutter: stable;       /* reserve the scrollbar lane so tiles don't shift */
    z-index: 60;
    --ans-fit: 1;
}

/* Prominent, always-styled scrollbar on the RIGHT — the "small scroll bar" players grab to shift
   down without hitting a tile. Wider than default + high-contrast thumb so it's obvious. */
.answer-tiles-container::-webkit-scrollbar {
    width: 10px;
}
.answer-tiles-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}
.answer-tiles-container::-webkit-scrollbar-thumb {
    background: var(--brand-700, #0056b3);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
    min-height: 40px;
}
.answer-tiles-container {                  /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--brand-700, #0056b3) rgba(0, 0, 0, 0.08);
}

/* Question type indicator badge - compact with wrapped text */
.question-type-indicator {
    position: fixed;
    top: 53px;
    right: 5px;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 160;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    max-width: 50px;
    min-height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    line-height: 1.1;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
}

.question-type-indicator.visible {
    display: flex;
}

/* Different colors for each question type */
.question-type-indicator.mcq {
    background: rgba(0, 123, 255, 0.65);
}

.question-type-indicator.multi-tap {
    background: rgba(40, 167, 69, 0.65);
}

.question-type-indicator.ordering {
    background: rgba(255, 152, 0, 0.9);
    color: #fff;
}

.question-type-indicator.alpha {
    background: rgba(108, 117, 125, 0.65);
    color: #fff;
}

.question-type-indicator.numeric {
    background: rgba(220, 53, 69, 0.65);
    color: #fff;
}

.question-type-indicator.true-false {
    background: rgba(156, 39, 176, 0.65);
    color: #fff;
}

.question-type-indicator.buzz {
    background: rgba(255, 193, 7, 0.65);
    color: #333;
}

/* Host display question type indicator */
.host-question-type-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
}

.host-question-type-indicator.visible {
    display: flex;
}

.host-question-type-indicator.mcq {
    background: rgba(0, 123, 255, 0.9);
}

.host-question-type-indicator.multi-tap {
    background: rgba(40, 167, 69, 0.9);
}

.host-question-type-indicator.ordering {
    background: rgba(255, 152, 0, 0.9);
}

.host-question-type-indicator.alpha {
    background: rgba(108, 117, 125, 0.9);
}

.host-question-type-indicator.numeric {
    background: rgba(220, 53, 69, 0.9);
}

.host-question-type-indicator.true-false {
    background: rgba(156, 39, 176, 0.9);
}

.host-question-type-indicator.buzz {
    background: rgba(255, 193, 7, 0.9);
    color: #333;
}

.answer-tile {
    /* Comfortable, tappable size. flex:1 0 auto → tiles GROW to share the space when few (e.g. a
       4-option question fills the area), but never SHRINK below min-height — so when there are more
       than fit, the container scrolls instead of cramming them. */
    min-height: 60px;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding: clamp(8px, 1.4vh, 14px) clamp(10px, 3vw, 16px);
    background: var(--surface-light, white);
    border: 3px solid var(--border-light, #ddd);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    touch-action: manipulation;
    overflow: hidden;
}

.answer-tile:active {
    transform: scale(0.98);
}

.answer-tile.selected {
    /* Uniform darker shade for any tapped tile (owner 2026-07-03) — no bright
       highlight, every clicked tile looks the same. (q-redesign theme mirrors this.) */
    background: #140e04;
    border-color: #140e04;
    color: rgba(255, 255, 255, 0.5);
}

.answer-tile.disabled {
    background: var(--bg-light, #f8f9fa);
    border-color: var(--border-light, #e0e0e0);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Going Wide: first-choice tile stays visually selected/locked while the
   player picks their second answer. Uses a dimmer pressed look so the two
   states (1st pick vs 2nd pick) are visually distinct. */
.answer-tile.go-wide-first-choice {
    background: var(--brand-700, #0056b3);
    border-color: var(--brand-700, #0056b3);
    color: white;
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}
.answer-tile.go-wide-first-choice::after {
    content: '✓ 1st';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.65rem;
    opacity: 0.9;
}

/* Going Wide: available tiles (not the first choice) get a subtle orange ring
   to signal they're clickable for the second pick. */
.answer-tile.go-wide-available {
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.35);
}

.answer-tile.correct {
    background: var(--ok, #28a745);
    border-color: var(--ok-700, #1e7e34);
    color: white;
}

.answer-tile.incorrect {
    background: var(--err, #dc3545);
    border-color: var(--err-700, #bd2130);
    color: white;
}

.answer-label {
    /* Fluid + multiplied by --ans-fit (JS shrinks it when tiles get very short). */
    font-size: calc(clamp(16px, 4.8vw, 24px) * var(--ans-fit, 1));
    font-weight: 800;
    min-width: calc(clamp(22px, 7vw, 35px) * var(--ans-fit, 1));
    margin-right: clamp(6px, 2vw, 12px);
    flex: none;
}

.answer-text {
    font-size: calc(clamp(16px, 5.4vw, 27px) * var(--ans-fit, 1));
    font-weight: 700;
    line-height: 1.25;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Ordering question styles */
.ordering-tile {
    position: relative;
}

.order-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 123, 255, 0.9);
    color: white;
    font-size: 18px;
    font-weight: bold;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 10;
}

.timer-indicator {
    position: fixed;
    bottom: 0; /* FIX 7: Changed from 20px to 0 to ensure timer is visible at very bottom */
    left: 0;
    right: 0;
    width: 100%; /* FIXED: Ensure full width across screen */
    height: 12px;
    background: rgba(200, 200, 200, 0.3);
    z-index: 98;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0); /* FIX 7: Add safe area padding for mobile notches */
}

.timer-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* REMOVED right: 0 - conflicts with width property */
    height: 100%;
    /* Dynamic color via JS class - starts blue, transitions through yellow to red */
    background: #17a2b8; /* Default blue (info) */
    width: var(--timer-progress, 100%);
    max-width: 100%; /* FIXED: Prevent overflow */
    transition: width 0.3s linear, background-color 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* Timer color states - matching host display behavior */
.timer-indicator.timer-info::after {
    background: #17a2b8; /* Blue - plenty of time */
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.5);
}

.timer-indicator.timer-warning::after {
    background: #ffc107; /* Yellow - running low */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.timer-indicator.timer-danger::after {
    background: #dc3545; /* Red - almost out */
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
    animation: pulse 1s infinite;
}

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

/* ========================================
   ALPHABET TILES (Task 2.3.1, 2.3.2, 2.3.3)
   ======================================== */
.alpha-tiles-container {
    position: fixed;
    top: calc(var(--player-info-height, 50px) + var(--player-question-header-height, 124px));
    left: 10px;
    right: 10px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    z-index: 60;
    overflow-y: auto;
}

.alpha-tile-row {
    display: flex;
    gap: 6px;
    height: calc((100vh - var(--player-info-height, 50px) - var(--player-question-header-height, 124px) - var(--player-bottom-controls-height, 75px) - 35px) / 6); /* 6 rows instead of 4 */
    height: calc((100dvh - var(--player-info-height, 50px) - var(--player-question-header-height, 124px) - var(--player-bottom-controls-height, 75px) - 35px) / 6);
    min-height: 50px;
}

.letter-tile {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-light, white);
    border: 3px solid var(--border-light, #ddd);
    border-radius: 8px;
    font-size: 30px;
    font-weight: bold;
    color: var(--text-dark, #333);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    touch-action: manipulation;
}

.letter-tile:active {
    transform: scale(0.95);
}

.letter-tile.selected {
    /* Same uniform darker shade as MCQ/multi-tap (owner 2026-07-03) — no bright
       highlight, no scale-up; every clicked letter looks identical. */
    background: #140e04;
    border-color: #140e04;
    color: rgba(255, 255, 255, 0.5);
}

.letter-tile.combined-tile {
    font-size: 20px;
    gap: 2px;
}

.letter-separator {
    font-size: 14px;
    opacity: 0.7;
}

/* Spacer for empty grid positions - NO LONGER NEEDED in 4×6 layout */
.letter-tile-spacer {
    flex: 1;
    visibility: hidden;
}

/* Corner tiles removed - Q/V and X/Z now integrated into 4×6 grid */

.alpha-submit-button {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 60px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.multi-tap-submit-button {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 60px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.multi-tap-submit-button:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.multi-tap-submit-button:active:not(:disabled) {
    transform: scale(0.98);
}

.alpha-submit-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ========================================
   NUMERIC KEYPAD (Task 2.4.1)
   ======================================== */
.numeric-container {
    position: fixed;
    top: calc(var(--player-info-height, 50px) + var(--player-question-header-height, 124px));
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    z-index: 60;
}

.numeric-display {
    height: 80px;
    background: var(--surface-light, white);
    border: 3px solid var(--border-light, #ddd);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    color: var(--text-dark, #333);
    transition: all 0.3s ease;
}

/* Submitted state - highlight display */
.numeric-display.submitted {
    background: color-mix(in srgb, var(--surface-light, #d4edda) 60%, var(--ok, #28a745) 40%);
    border-color: var(--ok, #28a745);
    color: var(--text-dark, #155724);
}

.numeric-keypad {
    display: grid;
    /* minmax(0, 1fr) (not a bare 1fr) forces THREE equal columns — a bare 1fr lets a track grow to
       its content's min-width, so the "Submit" tile came out wider than the digit tiles. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
/* Keep tile labels from forcing a track wider than its 1/3 share (owner 2026-07-10: equal tiles). */
.numeric-keypad .numeric-key { min-width: 0; overflow: hidden; }

/* Submitted state - gray out keypad */
.numeric-keypad.submitted .numeric-key {
    opacity: 0.4;
    pointer-events: none;
    background: #e0e0e0 !important;
    color: #999 !important;
    border-color: #ccc !important;
}

.numeric-key {
    height: 70px;
    background: var(--surface-light, white);
    border: 3px solid var(--border-light, #ddd);
    border-radius: 8px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.numeric-key:active {
    transform: scale(0.95);
    background: #f0f0f0;
}

.numeric-key.backspace {
    background: #ff9800;
    color: white;
    border-color: #f57c00;
}

.numeric-key.submit {
    background: #28a745;
    color: white;
    border-color: #1e7e34;
}

/* Laptop / landscape alpha layout: keep the question header visible while
   fitting the six-row letter pad into shorter screens. */
@media (min-width: 700px) and (max-height: 820px) {
    body.player-root {
        --player-question-header-height: 132px;
    }

    .question-header-container {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .alpha-tiles-container {
        top: calc(var(--player-info-height, 50px) + var(--player-question-header-height, 132px) + 8px);
        bottom: 72px;
        gap: 4px;
        justify-content: flex-start;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .alpha-tile-row {
        height: calc((100vh - var(--player-info-height, 50px) - var(--player-question-header-height, 132px) - var(--player-bottom-controls-height, 75px) - 28px) / 6);
        height: calc((100dvh - var(--player-info-height, 50px) - var(--player-question-header-height, 132px) - var(--player-bottom-controls-height, 75px) - 28px) / 6);
        min-height: 36px;
        gap: 4px;
        flex: 0 0 auto;
    }

    .letter-tile {
        border-width: 2px;
        font-size: 24px;
    }

    .letter-tile.combined-tile {
        font-size: 17px;
    }

    .alpha-submit-button {
        height: 52px;
        font-size: 18px;
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS (Task 2.5.1)
   ======================================== */
@media (max-width: 360px) {
    .answer-tile {
        min-height: 60px;
    }
    .answer-label {
        font-size: 20px;
        font-weight: 800;
    }
    .answer-text {
        font-size: 20px;
        font-weight: 700;
    }
}

@media (min-width: 414px) {
    .answer-tile {
        min-height: 80px;
    }
}

/* Short screens (small phones, landscape): tighten spacing so more tiles fit before the region
   needs to scroll. Tiles keep a (smaller) tappable floor; the container scrolls past that. */
@media (max-height: 600px) {
    .answer-tile {
        min-height: 48px;
    }
    .answer-tiles-container {
        gap: 4px;
        padding: 5px;
    }
}

/* ========================================
   iOS SAFE AREA SUPPORT (Task 2.5.2)
   ======================================== */
.player-info-bar {
    padding-top: env(safe-area-inset-top);
}

.timer-indicator,
.alpha-submit-button {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ========================================
   ACCESSIBILITY FOCUS STYLES (Task 2.5.3)
   ======================================== */
.answer-tile:focus,
.letter-tile:focus {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

/* Numeric keys: outline only for KEYBOARD focus (:focus-visible), never a lingering blue ring
   after a finger tap — the keypad should behave like a calculator (press feedback = :active only). */
.numeric-key:focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}
.numeric-key:focus:not(:focus-visible) { outline: none; }

/* '0' does not span 2 cells anymore; we use a 3-column grid with a hidden empty key. */
/* Removed: .numeric-container .numeric-key.numeric-key-zero { grid-column: span 2; } */

/* Prominent full-width green Submit Answer button (replaces the tiny corner ✓). */
.numeric-container .numeric-submit-cta {
    height: 60px;
    background: #28a745;
    border-color: #1e7e34;
    color: #fff;
    font-size: 22px;
    letter-spacing: 0.02em;
}
.numeric-container .numeric-submit-cta:disabled {
    background: #6c757d;
    border-color: #545b62;
    cursor: default;
}

/* ========================================
   GOING WIDE NEW UI STYLES
   ======================================== */
.go-wide-container-new {
    position: fixed;
    bottom: 15px;  /* Above timer bar (12px) with small gap */
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;  /* High z-index to ensure visibility */
    width: 85%;
    max-width: 350px;
    /* Debug - add visible background to confirm visibility */
    background: transparent;
}

.go-wide-button {
    width: 100%;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(23, 162, 184, 0.3);
    transition: all 0.2s ease;
}

.go-wide-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.go-wide-button:not(:disabled):active {
    transform: scale(0.98);
}

.go-wide-penalty {
    background: #ffc107;
    color: #333;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 12px;
    margin-left: 6px;
}

/* Mode Icons - Small compact badges in question header (top right) */
.mode-icons-container {
    position: absolute;
    top: 6px;
    right: 55px; /* Next to question type indicator */
    display: flex;
    gap: 3px;
    z-index: 101;
}

.mode-icon-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(108, 117, 125, 0.9);
    color: white;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Going Wide indicator - teal */
.mode-icon-small.mode-icon-gw {
    background: rgba(23, 162, 184, 0.95);
}

/* Evil Mode indicator - red */
.mode-icon-small.mode-icon-evil {
    background: rgba(220, 53, 69, 0.95);
}

/* Fast Track indicator - gold */
.mode-icon-small.mode-icon-ft {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
}

/* Go Wide available tiles - subtle glow effect */
.answer-tile.go-wide-available {
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.5), inset 0 0 3px rgba(23, 162, 184, 0.2);
    border-color: #17a2b8 !important;
    animation: goWideGlow 1.5s ease-in-out infinite;
}

/* Go Wide available for letter tiles (alpha questions) */
.letter-tile.go-wide-available {
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.5), inset 0 0 3px rgba(23, 162, 184, 0.2);
    border-color: #17a2b8 !important;
    animation: goWideGlow 1.5s ease-in-out infinite;
}

.letter-tile.going-wide-second {
    border-color: #17a2b8 !important;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

/* Legacy button go-wide-available style */
.choice.go-wide-available,
button.go-wide-available {
    box-shadow: 0 0 10px rgba(23, 162, 184, 0.5) !important;
    border-color: #17a2b8 !important;
    animation: goWideGlow 1.5s ease-in-out infinite;
}

@keyframes goWideGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(23, 162, 184, 0.4); }
    50% { box-shadow: 0 0 15px rgba(23, 162, 184, 0.7); }
}

.answer-tile.going-wide-second {
    border-color: #17a2b8 !important;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: white !important;
}

/* ========================================
   MCQ TILE SUBMISSION STATES
   ======================================== */
/* Selected tile after answer is locked in */
.answer-tile.answer-submitted:not(.correct):not(.incorrect) {
    background: linear-gradient(135deg, #0d6efd 0%, #0aa2c0 100%);
    border-color: #084298;
    color: #fff;
    opacity: 1;
    filter: none;
    cursor: not-allowed;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.22), 0 8px 18px rgba(13, 110, 253, 0.28);
    transform: none !important;
    pointer-events: none;
}

.answer-tile.answer-submitted:not(.correct):not(.incorrect) .answer-label,
.answer-tile.answer-submitted:not(.correct):not(.incorrect) .answer-text {
    color: #fff;
}

/* Non-selected tiles after answer submitted (no going-wide) */
.answer-tiles-container.answers-locked .answer-tile:not(.answer-submitted):not(.going-wide-first) {
    opacity: 0.3;
    filter: grayscale(0.5);
    cursor: not-allowed;
    pointer-events: none;
}

/* New-UI renderers (matching / drag_drop / image_choice / image_tiles / fill_blank): when the
   board is locked on reveal / timer-expiry (even with no submit), grey them out so they read as
   inactive — same intent as the .answer-tile lock cue above. */
.answers-locked .match-item,
.answers-locked .imgc-tile,
.answers-locked .dd-item,
.answers-locked .dd-zone,
.answers-locked .dd-chip,
.answers-locked .qtui-submit {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
    cursor: not-allowed;
}

/* drag_drop: an item already dropped into at least one bucket. Multi-bucket means the item
   stays in the tray (you can drop it into another bucket too), so mark it with a subtle green
   edge + a ✓ / ×N badge instead of removing it. */
.dd-item.used {
    box-shadow: inset 3px 0 0 0 #2ecc71;
}
.dd-item .dd-badge {
    color: #2ecc71;
}

/* image_choice (renderImageChoice in player/answer-renderers.js): MCQ where the choices are
   images. Choice images can be uploaded at any source dimension, so without these rules a tall or
   wide picture would render at its native size and blow out the tile / stretch / crop. We give each
   tile a fixed square-ish footprint and let the image scale to fit (object-fit: contain), centered
   on a neutral backfill, so every choice reads uniformly no matter the original aspect ratio.
   Authoring guidance lives in docs/IMAGE_CHOICE_SIZING.md. */
.imgc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.4vw, 16px);
    width: 100%;
    box-sizing: border-box;
}

.imgc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Square-ish footprint that adapts to the available width but never grows past the cap so the
       grid stays tidy on big screens. The cap (~300px) is why we recommend ~600px source art. */
    aspect-ratio: 1 / 1;
    max-height: 300px;
    padding: 8px;
    box-sizing: border-box;
    background: var(--imgc-tile-bg, rgba(255, 255, 255, 0.06));
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.imgc-tile:hover {
    border-color: rgba(13, 110, 253, 0.6);
}

.imgc-tile.sel {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
}

.imgc-tile img {
    display: block;
    width: 100%;
    /* flex child: take the leftover tile height but shrink so an optional text label below still
       fits inside the box (min-height:0 lets a flex item shrink past its content size). */
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    /* contain = scale to fit inside the square without cropping or stretching; non-square art is
       letter/pillar-boxed against the neutral tile background rather than distorted. */
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.imgc-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 11px;
}

.imgc-label {
    margin-top: 6px;
    max-width: 100%;
    font-size: clamp(11px, 2.6vw, 14px);
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Phones: smaller cap and tighter padding so 2 columns of tiles fit without scrolling. */
@media (max-width: 480px) {
    .imgc-tile {
        max-height: 220px;
        padding: 6px;
    }
}

/* First going-wide pick — user can still make a second selection */
.answer-tile.going-wide-first {
    opacity: 0.85;
    border-style: dashed !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Player answer reveal popup */
.answer-reveal-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 560px);
    max-height: min(82vh, 620px);
    max-height: min(82dvh, 620px);
    overflow-y: auto;
    background: var(--answer-popup-bg, linear-gradient(135deg, #0d6efd, #0aa2c0));
    color: #fff;
    padding: clamp(18px, 4vw, 30px);
    border-radius: 16px;
    text-align: center;
    z-index: 10000;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.45);
    animation: answerPopupAppear 0.5s ease-out;
    cursor: pointer;
    word-break: normal;
    overflow-wrap: anywhere;
    -webkit-overflow-scrolling: touch;
}

.answer-reveal-popup__icon {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 1;
    margin-bottom: 10px;
}

.answer-reveal-popup__status {
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 14px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.answer-reveal-popup__label {
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0;
    opacity: 0.9;
    margin-bottom: 8px;
}

.answer-reveal-popup__answer {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    padding: clamp(12px, 3vw, 18px);
    font-size: clamp(20px, 6vw, 30px);
    line-height: 1.25;
    font-weight: 800;
    max-height: 34vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.answer-reveal-popup__player-answer {
    border-top: 1px solid rgba(255, 255, 255, 0.32);
    margin-top: 14px;
    padding-top: 12px;
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.35;
}

.answer-reveal-popup__player-answer span {
    display: block;
    opacity: 0.82;
    font-size: 0.88em;
    font-weight: 700;
}

.answer-reveal-popup__player-answer strong {
    display: block;
    margin-top: 3px;
    font-size: 1.1em;
}

.answer-reveal-popup__difference {
    display: block;
    margin-top: 4px;
    opacity: 0.88;
    font-size: 0.9em;
}

.answer-reveal-popup__dismiss {
    font-size: 13px;
    line-height: 1.2;
    margin-top: 14px;
    opacity: 0.76;
}