/* JOI-style metronome game (setup + play pages). Uses only the site's
   existing palette (see CLAUDE.md ## Style) -- no new colors. */

/* --- setup page (templates/en/game/setup.html) --- */
.game-source-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.game-source-option {
    align-items: center;
    display: flex;
    gap: 8px;
}
.game-source-option-disabled {
    color: #999;
}
.game-bpm-row {
    align-items: center;
    display: flex;
    gap: 10px;
}
.game-bpm-row .auth-input {
    text-align: center;
}
.game-bpm-arrow {
    color: #999;
}
.game-outcome-sliders {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.game-outcome-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 84px 1fr 42px;
}
.game-outcome-label {
    color: #b7b7b7;
    font-size: 0.85em;
}
.game-outcome-value {
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    text-align: right;
}
.game-outcome-row input[type="range"] {
    accent-color: #e5194d;
    width: 100%;
}
.game-task-select-header {
    color: #6c95fc;
    display: flex;
    font-size: 0.8em;
    gap: 6px;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.game-task-select-header a {
    color: #6c95fc;
    text-decoration: none;
}
.game-task-select-header a:hover {
    text-decoration: underline;
}
.game-task-select-header span {
    color: #666;
}
.game-task-select {
    background-color: #3a3a3a;
    border-radius: 6px;
    display: grid;
    gap: 2px 12px;
    grid-template-columns: 1fr 1fr;
    max-height: 170px;
    overflow-y: auto;
    padding: 8px 10px;
}
.game-task-option {
    align-items: flex-start;
    display: flex;
    font-size: 0.78em;
    gap: 6px;
    line-height: 1.3;
    padding: 3px 0;
}
.game-task-option input[type="checkbox"] {
    accent-color: #e5194d;
    flex-shrink: 0;
    margin-top: 2px;
}
.game-task-option span {
    color: #ddd;
}

/* --- play page (templates/en/game/play.html) ---
   This page renders as its own standalone HTML document (not extending
   base.html) so the whole viewport is available -- there's no site nav/
   footer/#wrapper to fight with, and every control is an overlay on top of
   a full-bleed, letterboxed video rather than page content below it. */
/* Both html and body need the override, scoped to this page's own class on
   each tag (never a bare `html`/`body` selector -- game.css is shared with
   setup.html/browse.html, and a bare selector previously leaked overflow:
   hidden onto those pages' scrolling, see git history). body alone wasn't
   enough here: with html left at its default overflow-y:visible, Chromium
   still reserved/rendered a viewport scrollbar gutter along the right edge
   even though scrollHeight never actually exceeded clientHeight, which
   ate into the space meant for .game-stats' right margin. */
html.game-fullscreen-html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
body.game-fullscreen-body {
    background-color: #000;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
}
.game-play-fullscreen {
    height: 100dvh;
    position: relative;
    width: 100vw;
}
/* Home + fullscreen toggle: always-visible, independent of session state
   (start / playing / ended) -- fixed to the corner rather than living
   inside .game-controls since that row is hidden until a session starts. */
.game-top-left-controls {
    display: flex;
    gap: 8px;
    left: max(12px, env(safe-area-inset-left));
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    z-index: 20;
}
.game-top-left-controls .video-action-btn {
    background-color: rgba(0, 0, 0, 0.45);
}
/* BPM/timer readout: mirrors .game-top-left-controls on the opposite
   corner, same fixed row/height so the two line up -- not gated behind
   #game-session's own show/hide, it just reads as placeholder dashes
   (see the inline "-- BPM" / "--:--" markup) until gameStartSession()
   starts filling in real values. */
.game-stats {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 24px;
    color: #b7b7b7;
    display: flex;
    font-size: 0.9em;
    gap: 12px;
    height: 48px;
    padding: 0 16px;
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    top: max(12px, env(safe-area-inset-top));
    z-index: 20;
}
.game-stats span {
    font-weight: 600;
}
.game-start-overlay {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    max-width: 400px;
    padding: 24px;
    text-align: center;
    width: 100%;
}
.game-start-icon {
    color: #e5194d;
    font-size: 3rem;
}
#game-session {
    height: 100%;
    position: relative;
    width: 100%;
}
.game-video-box {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}
.game-video-box .video-player {
    max-height: 100% !important;
}
/* Bottom overlay bar: stats + icon controls float over the video (or over
   the letterbox bars beneath it) instead of sitting in normal flow below
   it, so nothing here shrinks the video area. */
.game-hud {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    padding: 24px 16px max(16px, env(safe-area-inset-bottom));
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 10;
}
/* Cock-hero-style beat lane, overlaid on the bottom of the video: small
   "note" circles spawn at the right edge and slide left, timed to arrive at
   the big pulse circle (the hit zone, fixed near the left edge) exactly
   when that beat fires -- see gameSpawnNote()/gamePulseBeat() in
   game-joi.js. Pinned above .game-hud (not the very bottom of the box)
   so the two overlays never overlap.
*/
.game-beat-track {
    bottom: 120px;
    height: 60px;
    left: 12px;
    /* Horizontal clipping only -- the pulse circle scales up to ~1.3x on
       each beat (see game-beat-pulse-anim below), which is taller than this
       track, so hiding vertical overflow too would clip it top/bottom. */
    overflow-x: hidden;
    overflow-y: visible;
    pointer-events: none;
    position: absolute;
    right: 12px;
    z-index: 5;
}
.game-beat-track::before {
    background: rgba(255, 255, 255, 0.15);
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.game-beat-pulse {
    background-color: rgba(58, 58, 58, 0.9);
    border: 3px solid #4a4a4a;
    border-radius: 50%;
    height: 44px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    z-index: 2;
}
.game-beat-pulse-active {
    animation: game-beat-pulse-anim 0.35s ease-out;
}
@keyframes game-beat-pulse-anim {
    0% { background-color: #e5194d; border-color: #e5194d; transform: translate(-50%, -50%) scale(1.3); }
    100% { background-color: rgba(58, 58, 58, 0.9); border-color: #4a4a4a; transform: translate(-50%, -50%) scale(1); }
}
.game-beat-note {
    background-color: #e5194d;
    border-radius: 50%;
    height: 14px;
    left: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left linear;
    width: 14px;
    z-index: 1;
}
.game-controls {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.game-controls .video-action-btn {
    background-color: #3a3a3a;
    position: static;
}
.game-controls .video-action-btn:hover {
    background-color: #4a4a4a;
}

.game-end-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.85);
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    justify-content: center;
    left: 0;
    padding: 24px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 15;
}
.game-end-overlay h2 {
    margin: 0;
}
.game-end-overlay .auth-button {
    display: inline-block;
    text-decoration: none;
}
#game-play.game-ended .game-end-overlay,
#game-play.game-empty-pool .game-end-overlay {
    display: flex;
}
/* Unlike the empty-pool failure state below, a normal session end keeps the
   video box (and its outcome-reveal banner) visible and playing -- only the
   beat lane stops making sense once the metronome loop has ended. */
#game-play.game-ended .game-beat-track {
    display: none;
}
#game-play.game-empty-pool .game-video-box,
#game-play.game-empty-pool .game-hud {
    display: none;
}

/* Shown on the pre-start overlay only -- game-start-overlay is already
   centered full-screen, so this just needs to read as a heading there. */
.game-saved-title {
    margin: 0 0 12px;
    max-width: 400px;
    text-align: center;
}
.game-saved-stats {
    color: #6c95fc;
    font-size: 0.85em;
    margin: -8px 0 12px;
}
/* Shown once the session is playing, as the first line inside
   .game-top-overlays (see below) -- a compact pill echoing the same title
   so it stays readable overlaid on the video without competing with the
   task banner. */
.game-saved-title-tag {
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 20px;
    color: #b7b7b7;
    font-size: 0.8em;
    font-weight: 600;
    padding: 6px 14px;
}
/* Wraps the task banner and the red/green light indicator so both overlay
   the top of the video without fighting over the same absolute position --
   the banner spans the full width, the light indicator stays left-aligned
   and only as wide as its content, directly below it. Offset clear of the
   fixed .game-top-left-controls (top-left, ~48px + margins) so the two never overlap. */
.game-top-overlays {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    left: 12px;
    position: absolute;
    right: 12px;
    top: calc(max(12px, env(safe-area-inset-top)) + 60px);
    z-index: 5;
}
.game-task-banner {
    align-self: stretch;
    background: rgba(0, 0, 0, 0.65);
    border-left: 3px solid #e5194d;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    padding: 10px 14px;
    text-align: center;
}
/* Last-10-seconds "prepare" message and the final outcome reveal reuse the
   task banner but stand out more -- solid accent background instead of the
   subtle dark one tasks use, plus a slow attention pulse. */
.game-task-banner-alert {
    animation: game-task-banner-alert-pulse 1.1s ease-in-out infinite;
    background: rgba(229, 25, 77, 0.9);
    border-left-color: #fff;
    font-size: 1.05em;
}
@keyframes game-task-banner-alert-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}
.game-light-indicator {
    align-items: center;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 20px;
    display: flex;
    gap: 8px;
    padding: 6px 14px 6px 10px;
}
.game-light-dot {
    background-color: #3ecf6e;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(62, 207, 110, 0.8);
    height: 12px;
    width: 12px;
}
.game-light-indicator.is-red .game-light-dot {
    background-color: #e5194d;
    box-shadow: 0 0 6px rgba(229, 25, 77, 0.8);
}
.game-light-indicator span:last-child {
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
}
/* Holds the (left-aligned) red/green indicator and the (right-aligned) BPM
   change warning on the same row, below the task banner. margin-left:auto
   on the warning (rather than justify-content:space-between on the row)
   keeps it pinned right even when the indicator on the left is hidden --
   space-between would collapse a lone visible child back to the start. */
.game-overlay-row {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 8px;
}
.game-bpm-warning {
    animation: game-task-banner-alert-pulse 1.1s ease-in-out infinite;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 20px;
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    margin-left: auto;
    padding: 6px 14px;
}
.game-saved-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
}

.game-save-panel {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin: 12px auto 0;
    max-width: 320px;
    width: 100%;
}
.game-save-panel.is-visible {
    display: flex;
}

/* --- browse page (templates/en/game/browse.html) --- */
.game-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.game-list-item {
    background-color: #222;
    border-radius: 8px;
    padding: 14px 16px;
}
.game-list-title {
    color: #fff;
    font-size: 1.05em;
    font-weight: 600;
    text-decoration: none;
}
.game-list-title:hover {
    color: #e5194d;
}
.game-list-meta {
    color: #999;
    font-size: 0.85em;
    margin: 4px 0 10px;
}
.game-list-stats {
    color: #6c95fc;
    font-size: 0.8em;
    margin: 0 0 10px;
}
.game-list-actions {
    display: flex;
    gap: 12px;
}
.game-list-actions .video-action-btn {
    background-color: #3a3a3a;
    height: 40px;
    position: static;
    width: 40px;
}
.game-list-actions .video-action-btn:hover {
    background-color: #4a4a4a;
}
.game-list-actions .video-action-btn.active {
    background-color: #e5194d;
}

.game-faq-link {
    color: #999;
    display: inline-flex;
    margin-left: 4px;
    vertical-align: middle;
}
.game-faq-link .material-icons {
    font-size: 1.1rem;
}
.game-faq-link:hover {
    color: #6c95fc;
}

/* FAQ page: wider than the narrow .auth-card forms, left-aligned prose. */
.game-faq-card {
    background-color: #222;
    border-radius: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 700px;
    padding: 32px 28px;
    text-align: left;
}
.game-faq-card .auth-title {
    text-align: center;
}
.game-faq-card .auth-subtitle {
    text-align: center;
}
.game-faq-item {
    border-top: 1px solid #3a3a3a;
    padding: 16px 0;
}
.game-faq-item:first-of-type {
    border-top: none;
    padding-top: 0;
}
.game-faq-item h2 {
    color: #fff;
    font-size: 1em;
    margin: 0 0 8px;
}
.game-faq-item p,
.game-faq-item ul {
    color: #b7b7b7;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 8px;
}
.game-faq-item ul {
    padding-left: 20px;
}
.game-faq-item p:last-child,
.game-faq-item ul:last-child {
    margin-bottom: 0;
}
.game-faq-item strong {
    color: #e5194d;
}