/**
 * Pipe Dash (original, IP-safe flappy arcade game) - Game Styles
 *
 * Uses design tokens from public/assets/css/main.css. No hard-coded colors or
 * spacing. Container centered with `margin: 0 auto`. All interactive elements
 * have hover / focus / active states. Light + dark theme support. Mobile-first,
 * tap targets >= 44px, no horizontal scroll.
 */

/* ===== Custom Properties (all derived from design tokens) ===== */
:root {
    /* Canvas colors (read into the canvas via getComputedStyle) */
    --pd-sky: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
    --pd-sky-night: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg));
    --pd-pipe: var(--color-primary);
    --pd-pipe-cap: var(--color-primary-dark);
    --pd-pipe-edge: var(--color-primary-light);
    --pd-bird: var(--color-warning);
    --pd-bird-wing: color-mix(in srgb, var(--color-warning) 75%, var(--color-text));
    --pd-beak: var(--color-error);
    --pd-eye: var(--color-text);
    --pd-ground: var(--color-bg-alt);
    --pd-ground-edge: var(--color-border-dark);
    --pd-star: var(--color-text-inverse);
    --pd-flash: var(--color-bg);

    --pd-radius: var(--radius-lg);
    --pd-radius-sm: var(--radius-md);
    --pd-transition: var(--transition-base);
    --pd-min-touch: 44px;
}

[data-theme="dark"] {
    --pd-sky: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
    --pd-sky-night: color-mix(in srgb, var(--color-primary) 28%, var(--color-bg));
    --pd-pipe: var(--color-primary-light);
    --pd-pipe-cap: var(--color-primary);
    --pd-pipe-edge: var(--color-primary-light);
    --pd-bird: var(--color-warning);
    --pd-bird-wing: color-mix(in srgb, var(--color-warning) 70%, #000000);
    --pd-beak: var(--color-error-text);
    --pd-eye: var(--color-text);
    --pd-ground: var(--color-bg);
    --pd-ground-edge: var(--color-border-dark);
    --pd-star: var(--color-text);
    --pd-flash: var(--color-bg);
}

/* ===== Container ===== */
.pd-container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.pd-card {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--pd-radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-8);
}

/* ===== Difficulty selector (server-rendered, 3-col grid) ===== */
.pd-difficulty {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.pd-diff-btn {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    min-height: var(--pd-min-touch);
    background: var(--color-bg-alt);
    color: var(--color-text);
    border: 2px solid var(--color-border);
    border-radius: var(--pd-radius-sm);
    cursor: pointer;
    font: inherit;
    transition: border-color var(--pd-transition), background var(--pd-transition), opacity var(--pd-transition);
}
.pd-diff-btn:hover { border-color: var(--color-primary); background: var(--color-bg-card); }
.pd-diff-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.pd-diff-btn:active { transform: scale(0.98); }
.pd-diff-btn[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: var(--color-bg-card);
}
.pd-diff-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pd-diff-name { font-weight: 600; }
.pd-diff-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.pd-diff-best { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); }

/* ===== Status bar ===== */
.pd-statusbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--pd-radius-sm);
    margin-bottom: var(--space-3);
}
.pd-statusbar .pd-field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.pd-statusbar .pd-field strong {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    display: inline-block;
}
.pd-statusbar .pd-spacer { flex: 1 1 auto; }

/* Score pop (suppressed under reduced motion) */
@keyframes pd-score-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.pd-score-pop { animation: pd-score-pop 200ms ease; }

/* ===== Toggles (status-bar chips) ===== */
.pd-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pd-min-touch);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    transition: background var(--pd-transition), border-color var(--pd-transition), color var(--pd-transition);
}
.pd-toggle:hover { border-color: var(--color-primary); background: var(--color-bg-card); }
.pd-toggle:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.pd-toggle:active { transform: scale(0.98); }
.pd-toggle[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* ===== Canvas play area ===== */
.pd-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--pd-radius-sm);
    background: var(--color-bg);
    margin-bottom: var(--space-4);
}
.pd-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    touch-action: manipulation;
    cursor: pointer;
}
.pd-canvas:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}
.pd-stage.pd-shake { animation: pd-shake 200ms linear; }
@keyframes pd-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

/* ===== Overlays ===== */
/* pointer-events:none so taps/clicks pass THROUGH to the canvas below
   (start/flap/restart); interactive children re-enable pointer events. */
.pd-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity var(--pd-transition);
}
.pd-overlay[hidden] { display: none; }
.pd-overlay h2 { margin: 0; font-size: var(--font-size-2xl); }
.pd-overlay p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-base); }
/* Action buttons (Resume/Restart/Play Again) stay clickable inside the
   pointer-events:none overlay background. */
.pd-overlay-actions { pointer-events: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-2); }

/* Game-over stats */
.pd-over-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.pd-over-stats strong {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-2xl);
    color: var(--color-text);
}

/* Medal (CSS circle in the medal token color + text label) */
.pd-over-medal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.pd-medal-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--color-border);
}
.pd-medal-bronze .pd-medal-dot { background: var(--color-warning); }
.pd-medal-silver .pd-medal-dot { background: var(--color-text-muted); }
.pd-medal-gold .pd-medal-dot { background: var(--color-primary); }
.pd-medal-platinum .pd-medal-dot { background: var(--color-success); }
.pd-medal-bronze { color: var(--color-warning-text); }
.pd-medal-silver { color: var(--color-text-muted); }
.pd-medal-gold { color: var(--color-primary-text); }
.pd-medal-platinum { color: var(--color-success-text); }

.pd-over-newbest {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-success-text);
}
.pd-over-newbest[hidden] { display: none; }

/* ===== Live status region ===== */
.pd-status {
    min-height: 1.5em;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.pd-status[hidden] { display: none; }

/* ===== Controls row ===== */
.pd-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.pd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 120px;
    min-height: var(--pd-min-touch);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--pd-radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    transition: background var(--pd-transition), border-color var(--pd-transition), color var(--pd-transition);
}
.pd-btn:hover { border-color: var(--color-primary); background: var(--color-bg-card); }
.pd-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.pd-btn:active { transform: scale(0.98); }
.pd-btn[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* ===== Fullscreen note ===== */
.pd-fullscreen-note {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.pd-fullscreen-note[hidden] { display: none; }

/* ===== In-page fullscreen fallback ===== */
.pd-layout-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.pd-layout-fullscreen .pd-stage {
    border-radius: 0;
}

/* Native fullscreen of the card */
.pd-card:fullscreen {
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}
.pd-card:fullscreen .pd-difficulty {
    grid-template-columns: repeat(3, 1fr);
    max-width: 640px;
    width: 100%;
    margin-inline: auto;
}
.pd-card:fullscreen .pd-stage {
    max-width: 960px;
    width: 100%;
    margin-inline: auto;
}

/* ===== Help panel content (shared .help-panel markup) =====
   main.css styles the generic .help-body ul/ol, but the keyboard-shortcuts
   section uses a dl/dt/dd + kbd structure that needs its own rules (mirrors
   the sibling cube-rush app for cross-app consistency). */
.help-section { margin-bottom: var(--space-5); }
.help-section h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); }
.help-steps, .help-list { margin: 0; padding-left: var(--space-5); }
.help-steps li, .help-list li { margin-bottom: var(--space-2); }
.help-shortcuts { margin: 0; }
.help-shortcuts .shortcut-item { margin-bottom: var(--space-3); }
.help-shortcuts dt { font-weight: 600; }
.help-shortcuts dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
kbd {
    display: inline-block;
    padding: 0 var(--space-1);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

/* ===== Responsive (mobile) ===== */
@media (max-width: 480px) {
    .pd-card { padding: var(--space-4); }
    .pd-difficulty { grid-template-columns: 1fr; }
    .pd-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .pd-btn { min-width: 0; }
    .pd-statusbar .pd-field strong { font-size: var(--font-size-base); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .pd-overlay,
    .pd-toggle,
    .pd-btn,
    .pd-diff-btn {
        transition: none;
    }
    .pd-score-pop,
    .pd-stage.pd-shake {
        animation: none;
    }
}