/**
 * Server Runner PRO — design system + mobile fixes + new UI surfaces
 *
 * Loaded after server-runner-arcade.css and server-runner-neon.css.
 * Adds:
 *   - Skin colour variables (5 + 1 secret BRAND)
 *   - Mobile fullscreen 100dvh fix (iOS Safari address bar)
 *   - Tutorial / legend overlay
 *   - Character selector drawer (glassmorphism, bento grid)
 *   - Mobile virtual buttons (44x44 min touch targets, accessibility)
 *   - Difficulty pill row + volume slider
 *   - Personal best delta + new-record fanfare
 *   - Slide-kill / fast-fall / forward-momentum effect surfaces
 *
 * Every animation respects prefers-reduced-motion.
 */

:root {
    /* Default skin = CYAN CYBORG (matches stock engine palette) */
    --sr-pro-skin: 'cyan';
    --sr-skin-primary: #22d3ee;
    --sr-skin-secondary: #0891b2;
    --sr-skin-light: #67e8f9;
    --sr-skin-glow: rgba(34, 211, 238, 0.55);
    --sr-skin-flair: #a78bfa;
}

/* ─────────────────────────────────────────────
   T11 — POLISHED OPEN SEQUENCE (no flicker)
   `.sr-opening` is added by engine open() and removed 220ms later.
   While present:
     - canvas wrap snap-to-size (no transition)
     - game body fades in over 200ms (mask the resize)
     - hide canvas content for first 1 frame to prevent dimension flash
   ───────────────────────────────────────────── */
.sr-game.sr-opening,
.sr-game.sr-opening * {
    transition: none !important;
    animation: none !important;
}

.sr-game.sr-opening {
    opacity: 0 !important;
    pointer-events: none;
    visibility: hidden; /* belt + suspenders: prevents any pre-fade flash */
}

/* Once .sr-opening is removed, transition opacity 0 → 1 smoothly */
.sr-game {
    transition: opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .sr-game,
    .sr-game.sr-opening { transition: none; opacity: 1; visibility: visible; }
}

/* T12 — LIVES (hearts) display in HUD: 3 hearts each player, P1 on left,
   P2 on right (visible only in VS mode). Filled hearts = lives left,
   greyed = lost. Subtle pulse on the last heart at low health. */
.sr-pro-lives {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 8px;
    padding: 4px 8px;
    background: rgba(15, 15, 35, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    height: 28px;
}

.sr-pro-life {
    color: rgba(255, 255, 255, 0.18);
    font-size: 12px;
    transition: color 200ms ease, transform 200ms ease;
}

.sr-pro-life.is-on {
    color: #ef4444;
    text-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

/* Pulse the last remaining life so the player sees they're 1 hit from death */
.sr-pro-lives .sr-pro-life.is-on:first-child:nth-last-child(3) ~ .sr-pro-life.is-on,
.sr-pro-lives:has(.sr-pro-life.is-on:nth-of-type(1):not(:nth-of-type(2) ~ *)) {
    animation: sr-pro-lives-pulse 1s ease-in-out infinite;
}

@keyframes sr-pro-lives-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-life { transition: none; animation: none !important; }
}

/* T11 — NAVBAR OFFSET: respect any sticky/fixed top navbar so the game's
   own HUD bar doesn't slide UNDER the dashboard topbar. The pro module
   detects navbar height on open() and sets `--sr-pro-top-offset`. Default
   is 0 (no navbar) so non-dashboard contexts behave as before. */
:root {
    --sr-pro-top-offset: 0px;
}

.sr-game.sr-fullscreen-pc {
    top: var(--sr-pro-top-offset, 0px) !important;
    height: calc(100vh - var(--sr-pro-top-offset, 0px)) !important;
    /* Phase 0 polish (2026-05-05): user on a wide monitor reported the
       prior 1400px wrapper cap left a letterbox he found annoying. We now
       let the wrapper fill 100% of the dashboard width AND the JS resize
       hook reads `wrap.clientWidth` directly without capping — the canvas
       framebuffer matches the actual viewport, giving the user the full-
       width game they expect on any monitor (including 21:9 / 32:9 / 4K).
       Pixelated rendering keeps the look crisp because the renderer's
       internal coordinates are integer-aligned. */
    display: flex;
    flex-direction: column;
}
.sr-game.sr-fullscreen-pc .sr-body,
.sr-game.sr-fullscreen-pc .sr-canvas-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.sr-game.sr-fullscreen-pc .sr-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ─────────────────────────────────────────────
   100dvh mobile fullscreen fix (iOS Safari)
   ───────────────────────────────────────────── */
.sr-game.sr-fullscreen {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    max-height: none;
}

.sr-game.sr-fullscreen .sr-canvas-wrap,
.sr-game.sr-fullscreen .sr-body {
    height: 100% !important;
    min-height: 0;
}

@supports not (height: 100dvh) {
    .sr-game.sr-fullscreen { height: 100vh; }
}

/* PC fullscreen: smooth dimension transition (no glitch on PLAY) */
.sr-game.sr-fullscreen-pc .sr-canvas-wrap {
    transition: width 180ms ease, height 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .sr-game.sr-fullscreen-pc .sr-canvas-wrap { transition: none; }
}

/* ─────────────────────────────────────────────
   Tutorial / Legend overlay (shown on first run)
   ───────────────────────────────────────────── */
.sr-pro-legend {
    position: absolute;
    inset: 0;
    z-index: 38;
    background: radial-gradient(circle at 50% 35%, rgba(15, 15, 35, 0.88) 0%, rgba(8, 8, 22, 0.96) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: sr-pro-legend-in 280ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes sr-pro-legend-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.sr-pro-legend.is-out {
    animation: sr-pro-legend-out 200ms ease forwards;
}

@keyframes sr-pro-legend-out {
    to { opacity: 0; transform: scale(1.04); }
}

.sr-pro-legend-card {
    width: min(560px, 96%);
    max-height: 92%;
    overflow-y: auto;
    background: linear-gradient(160deg, rgba(20, 22, 40, 0.94), rgba(28, 18, 42, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(34, 211, 238, 0.18) inset;
    color: #f8fafc;
}

.sr-pro-legend-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: #22d3ee;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sr-pro-legend-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, #22d3ee, #a78bfa, #f43f5e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sr-pro-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

@media (max-width: 480px) {
    .sr-pro-legend-grid { grid-template-columns: 1fr; }
}

.sr-pro-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
    transition: border-color 200ms ease, background 200ms ease;
}

.sr-pro-legend-row:hover {
    border-color: rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.05);
}

.sr-pro-legend-key {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 4px 8px;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #67e8f9;
    text-align: center;
    text-transform: uppercase;
}

.sr-pro-legend-desc {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
}

.sr-pro-legend-pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.sr-pro-legend-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.12);
    color: #22d3ee;
    border: 1px solid rgba(34, 211, 238, 0.32);
}
.sr-pro-legend-pill.pink   { background: rgba(244, 63, 94, 0.12); color: #fb7185; border-color: rgba(244, 63, 94, 0.32); }
.sr-pro-legend-pill.amber  { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.32); }
.sr-pro-legend-pill.lime   { background: rgba(34, 197, 94, 0.12);  color: #86efac; border-color: rgba(34, 197, 94, 0.32); }
.sr-pro-legend-pill.violet { background: rgba(167, 139, 250, 0.12); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.32); }

.sr-pro-legend-go {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #22d3ee, #a78bfa);
    border: none;
    border-radius: 12px;
    color: #0f172a;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
    transition: transform 150ms ease, box-shadow 200ms ease;
    text-transform: uppercase;
}

.sr-pro-legend-go:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.55);
}

.sr-pro-legend-go:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(34, 211, 238, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-legend-go { transition: none; }
    .sr-pro-legend-go:hover { transform: none; }
}

/* ─────────────────────────────────────────────
   Character selector — pill row on start screen
   ───────────────────────────────────────────── */
.sr-pro-charrow {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 6px;
    padding: 12px;
    background: rgba(15, 15, 35, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sr-pro-charrow-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.sr-pro-charrow-name {
    color: var(--sr-skin-primary);
    font-weight: 800;
    font-size: 11px;
    text-shadow: 0 0 8px var(--sr-skin-glow);
}

.sr-pro-charrow-pills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

@media (max-width: 480px) {
    .sr-pro-charrow-pills { grid-template-columns: repeat(6, 1fr); gap: 5px; }
}

.sr-pro-charpill {
    position: relative;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.3));
    cursor: pointer;
    transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1), border-color 200ms ease, box-shadow 200ms ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    min-height: 56px;
    -webkit-tap-highlight-color: transparent;
}

.sr-pro-charpill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, var(--p-glow, rgba(34, 211, 238, 0.35)) 0%, transparent 70%);
    opacity: 0.35;
    transition: opacity 200ms ease;
}

.sr-pro-charpill:hover {
    transform: translateY(-2px);
    border-color: var(--p, #22d3ee);
    box-shadow: 0 6px 14px var(--p-glow, rgba(34, 211, 238, 0.3));
}

.sr-pro-charpill:hover::before { opacity: 0.65; }

.sr-pro-charpill.is-active {
    border-color: var(--p, #22d3ee);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.4));
    box-shadow: 0 0 0 1.5px var(--p, #22d3ee), 0 4px 14px var(--p-glow, rgba(34, 211, 238, 0.4));
}

.sr-pro-charpill.is-active::before { opacity: 0.7; }

.sr-pro-charpill .sr-pro-charpill-avatar {
    position: relative;
    z-index: 1;
    color: var(--p, #22d3ee);
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 0 4px var(--p-glow, rgba(34, 211, 238, 0.55)));
}

.sr-pro-charpill .sr-pro-charpill-name {
    position: relative;
    z-index: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    transition: color 200ms ease;
}

.sr-pro-charpill.is-active .sr-pro-charpill-name { color: var(--p, #22d3ee); }
.sr-pro-charpill:hover .sr-pro-charpill-name { color: rgba(255, 255, 255, 0.85); }

.sr-pro-charpill .sr-pro-charpill-secret {
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 2;
    font-size: 8px;
    color: #fbbf24;
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-charpill { transition: none; }
    .sr-pro-charpill:hover { transform: none; }
}

/* ─────────────────────────────────────────────
   Difficulty pill row
   ───────────────────────────────────────────── */
.sr-pro-diff {
    display: flex;
    gap: 4px;
    background: rgba(15, 15, 35, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 3px;
    margin: 0 auto 12px;
    width: fit-content;
}

.sr-pro-diff-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 180ms ease;
    text-transform: uppercase;
    min-height: 34px;
}

.sr-pro-diff-btn:hover { color: #fff; }

.sr-pro-diff-btn.is-active {
    background: linear-gradient(135deg, var(--sr-skin-primary), var(--sr-skin-flair));
    color: #0f172a;
    box-shadow: 0 4px 14px var(--sr-skin-glow);
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-diff-btn { transition: none; }
}

/* ─────────────────────────────────────────────
   Volume slider (replaces simple mute toggle)
   ───────────────────────────────────────────── */
.sr-pro-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 15, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px 10px;
    height: 32px;
}

.sr-pro-volume i { color: rgba(255, 255, 255, 0.7); font-size: 14px; }

.sr-pro-volume input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, var(--sr-skin-primary) var(--vol, 70%), rgba(255, 255, 255, 0.12) var(--vol, 70%));
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.sr-pro-volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px var(--sr-skin-glow);
    cursor: grab;
}

.sr-pro-volume input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 0 8px var(--sr-skin-glow);
}

/* ─────────────────────────────────────────────
   Mobile virtual D-pad + action buttons
   ───────────────────────────────────────────── */
.sr-pro-mobile-controls {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 18;
    display: none;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 16px;
    pointer-events: none;
}

.sr-game.sr-fullscreen .sr-pro-mobile-controls,
.sr-pro-mobile-controls.is-touch {
    display: flex;
}

@media (min-width: 992px) {
    .sr-pro-mobile-controls { display: none !important; }
}

.sr-pro-dpad {
    display: grid;
    grid-template-columns: repeat(2, 56px);
    gap: 8px;
    pointer-events: auto;
}

.sr-pro-actions {
    display: grid;
    grid-template-columns: repeat(2, 56px);
    gap: 8px;
    pointer-events: auto;
}

.sr-pro-vbtn {
    width: 56px;
    height: 56px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.18), rgba(15, 15, 35, 0.78));
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: transform 100ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.sr-pro-vbtn:active,
.sr-pro-vbtn.is-pressed {
    transform: scale(0.92);
    background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.45), rgba(15, 15, 35, 0.9));
    border-color: var(--sr-skin-primary);
    box-shadow: 0 0 18px var(--sr-skin-glow);
}

.sr-pro-vbtn.sr-pro-vbtn-jump {
    background: radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.32), rgba(15, 15, 35, 0.85));
    width: 78px; height: 78px;
}

.sr-pro-vbtn.sr-pro-vbtn-dash {
    background: radial-gradient(circle at 30% 30%, rgba(244, 63, 94, 0.3), rgba(15, 15, 35, 0.85));
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-vbtn { transition: none; }
}

/* ─────────────────────────────────────────────
   Personal best delta + new-record fanfare
   ───────────────────────────────────────────── */
.sr-pro-pbdelta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    background: rgba(52, 211, 153, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(52, 211, 153, 0.35);
    animation: sr-pro-pbdelta-in 320ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes sr-pro-pbdelta-in {
    from { opacity: 0; transform: translateY(6px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sr-pro-pbdelta.is-negative {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.3);
}

.sr-pro-record-fanfare {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.32) 0%, transparent 65%);
    animation: sr-pro-fanfare-in 500ms ease;
}

@keyframes sr-pro-fanfare-in {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.sr-pro-record-fanfare span {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 900;
    font-size: clamp(28px, 6vw, 56px);
    letter-spacing: 4px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.7);
    animation: sr-pro-fanfare-shimmer 2s linear infinite;
}

@keyframes sr-pro-fanfare-shimmer {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-record-fanfare,
    .sr-pro-record-fanfare span { animation: none; }
}

/* ─────────────────────────────────────────────
   Share-to-clipboard + toast
   ───────────────────────────────────────────── */
.sr-pro-share-btn {
    background: linear-gradient(135deg, #22d3ee, #a78bfa);
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    color: #0f172a;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 150ms ease;
    margin-left: 6px;
}

.sr-pro-share-btn:hover { transform: translateY(-1px); }

.sr-pro-toast {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 35;
    padding: 8px 16px;
    background: rgba(15, 15, 35, 0.92);
    color: #f8fafc;
    border: 1px solid var(--sr-skin-primary);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 6px 20px var(--sr-skin-glow);
    animation: sr-pro-toast-in 220ms ease, sr-pro-toast-out 220ms ease 1.6s forwards;
}

@keyframes sr-pro-toast-in {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* T14 — Strong toast for token-applied events. Bigger, longer, gold accent */
.sr-pro-toast.sr-pro-toast-strong {
    padding: 14px 22px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(15, 15, 35, 0.96));
    border: 1.5px solid #fbbf24;
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.45);
    text-align: center;
    animation: sr-pro-toast-in 280ms cubic-bezier(.34, 1.56, .64, 1), sr-pro-toast-out 320ms ease 2.6s forwards;
    max-width: min(420px, 92%);
}

.sr-pro-toast-strong-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.7);
    margin-bottom: 4px;
}

.sr-pro-toast-strong-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
}

@keyframes sr-pro-toast-out {
    to { opacity: 0; transform: translate(-50%, 16px); }
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-toast { animation: none; }
}

/* ─────────────────────────────────────────────
   Skin-aware HUD accents (override neon palette)
   ───────────────────────────────────────────── */
.sr-game[data-pro-skin] .sr-score {
    color: var(--sr-skin-primary);
    text-shadow: 0 0 6px var(--sr-skin-glow);
}

/* ─────────────────────────────────────────────
   T9 RESPONSIVE — wings stack below card on narrow viewports
   Prevents UI overlap on mobile fullscreen + tablet portrait
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .sr-start-overlay {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px;
        padding: 12px !important;
        overflow-y: auto;
    }
    .sr-neon-wing,
    .sr-neon-wing-left,
    .sr-neon-wing-right {
        width: min(420px, 92%) !important;
        max-width: 92vw !important;
        position: static !important;
    }
    .sr-start-card {
        order: 0;
        width: min(420px, 92%) !important;
    }
    .sr-neon-wing-left  { order: 1; }
    .sr-neon-wing-right { order: 2; }
}

@media (max-width: 600px) {
    .sr-pro-charrow,
    .sr-pro-diff {
        margin-left: -2px;
        margin-right: -2px;
    }
    .sr-pro-charpill .sr-pro-charpill-name { font-size: 7px; letter-spacing: 0.4px; }
    .sr-pro-charpill .sr-pro-charpill-avatar { font-size: 16px; }
    .sr-pro-mobile-controls {
        bottom: 8px;
        padding: 0 10px;
    }
    .sr-pro-vbtn { width: 48px; height: 48px; }
    .sr-pro-vbtn.sr-pro-vbtn-jump { width: 64px; height: 64px; }
}

/* iPhone safe-area padding for fullscreen mobile */
@supports (padding: env(safe-area-inset-bottom)) {
    .sr-game.sr-fullscreen .sr-pro-mobile-controls {
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
    }
    .sr-game.sr-fullscreen .sr-hud {
        padding-top: max(env(safe-area-inset-top), 8px);
    }
}

/* ─────────────────────────────────────────────
   VS MODE — toggle button + winner overlay
   ───────────────────────────────────────────── */
.sr-pro-vs-toggle {
    background: rgba(244, 63, 94, 0.1);
    border: 1.5px solid rgba(244, 63, 94, 0.4);
    color: #fb7185;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 200ms ease;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
}

.sr-pro-vs-toggle:hover {
    background: rgba(244, 63, 94, 0.18);
    border-color: #fb7185;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35);
}

.sr-pro-vs-toggle.is-on {
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    color: #0f172a;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(244, 63, 94, 0.5);
}

.sr-pro-vs-toggle.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* T10 — P2 input mode picker (gamepad / mouse pills) */
.sr-pro-vs-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 6px 8px;
    background: rgba(244, 63, 94, 0.06);
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}

.sr-pro-vs-picker-label {
    color: rgba(244, 63, 94, 0.7);
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-right: 4px;
}

.sr-pro-vs-pick {
    background: rgba(15, 15, 35, 0.5);
    border: 1.2px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
}

.sr-pro-vs-pick:hover { border-color: #fb7185; color: #fff; }

.sr-pro-vs-pick.is-active {
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    color: #0f172a;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(244, 63, 94, 0.4);
}

.sr-pro-vs-pick.is-disabled,
.sr-pro-vs-pick:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sr-pro-vs-toggle .sr-pro-vs-toggle-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: sr-pro-vs-pulse 1.4s ease-in-out infinite;
}

@keyframes sr-pro-vs-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.sr-pro-vs-winner {
    position: absolute;
    inset: 0;
    z-index: 36;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(244, 63, 94, 0.18) 0%, rgba(0, 0, 0, 0.0) 65%);
    animation: sr-pro-vs-winner-in 400ms cubic-bezier(.34, 1.56, .64, 1);
}

.sr-pro-vs-winner-card {
    background: linear-gradient(160deg, rgba(20, 22, 40, 0.95), rgba(40, 14, 30, 0.95));
    border: 1.5px solid rgba(244, 63, 94, 0.5);
    border-radius: 18px;
    padding: 22px 32px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(244, 63, 94, 0.4);
}

.sr-pro-vs-winner-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sr-pro-vs-winner-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(90deg, #fbbf24, #fb7185, #fbbf24);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
    animation: sr-pro-fanfare-shimmer 2s linear infinite;
    margin-bottom: 6px;
}

.sr-pro-vs-winner-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

@keyframes sr-pro-vs-winner-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-vs-toggle, .sr-pro-vs-toggle-dot,
    .sr-pro-vs-winner, .sr-pro-vs-winner-title { animation: none; transition: none; }
}

/* ─────────────────────────────────────────────
   DIVINE TOAST — Guardian Angel "YOU GOT ONE MORE CHANCE"
   Shimmering gold gradient text on dim radial gold backdrop.
   Full-screen overlay above all gameplay UI for ~2s.
   ───────────────────────────────────────────── */
.sr-pro-divine-toast {
    position: absolute;
    inset: 0;
    z-index: 42;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
    background: radial-gradient(circle at 50% 38%, rgba(251, 191, 36, 0.22) 0%, rgba(0, 0, 0, 0) 60%);
    animation: sr-pro-divine-in 380ms cubic-bezier(.34, 1.56, .64, 1), sr-pro-divine-out 800ms ease 2.7s forwards;
}

/* T10 — Massive white flash that covers the entire game viewport, fades
   over 800ms. Layered behind the text so the gold gradient pops on top. */
.sr-pro-divine-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(254, 240, 138, 0.5) 40%, rgba(0, 0, 0, 0) 75%);
    animation: sr-pro-divine-flash 800ms ease forwards;
    pointer-events: none;
}

@keyframes sr-pro-divine-flash {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    100% { opacity: 0; }
}

.sr-pro-divine-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #fbbf24;
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.85);
    text-transform: uppercase;
}

.sr-pro-divine-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(22px, 5vw, 44px);
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(90deg, #fde68a 0%, #ffffff 25%, #fbbf24 50%, #ffffff 75%, #fde68a 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.55);
    animation: sr-pro-divine-shimmer 2s linear infinite;
    text-align: center;
    padding: 0 12px;
}

.sr-pro-divine-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    text-align: center;
}

@keyframes sr-pro-divine-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes sr-pro-divine-out {
    to { opacity: 0; transform: scale(1.04); }
}

@keyframes sr-pro-divine-shimmer {
    from { background-position: 0% 50%; }
    to   { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-pro-divine-toast,
    .sr-pro-divine-text { animation: none; }
}