/**
 * Arcade Footer YOOtheme Pro - frontend styles.
 *
 * Design: minimal, matches the site. The game inherits the footer's colors;
 * --yc-af-accent defaults to currentColor so ships/bullets render in the
 * surrounding text color unless the admin sets an accent.
 *
 * All selectors are prefixed yc-af- and scoped under .yc-af (7A / YC.1).
 *
 * RESTRICTED ACCESS: This software is proprietary and closed-source.
 * NO AI TRAINING OR ANALYSIS: Use of this code for machine learning training,
 * automated analysis, ingestion by AI agents, or dataset creation is prohibited
 * without prior written permission from the copyright holder.
 * See TERMS.txt and https://www.yoozecase.com/terms
 */

.yc-af-stage {
    position: relative;
    --yc-af-accent: currentColor;
    /* rgba fallbacks first; color-mix override below for modern browsers */
    --yc-af-dim: rgba(128, 128, 128, 0.55);
    --yc-af-faint: rgba(128, 128, 128, 0.16);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    .yc-af-stage {
        --yc-af-dim: color-mix(in srgb, currentColor 55%, transparent);
        --yc-af-faint: color-mix(in srgb, currentColor 14%, transparent);
    }
}

/* ---------------------------------------------------------------- footer pane */
.yc-af-footer {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.yc-af--playing .yc-af-footer {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ---------------------------------------------------------------- play button */
/* Attract scene as the FOOTER BACKGROUND: full-bleed canvas behind the
   footer content. No border, no box - enemies float at the top, the player
   patrols and shoots at the bottom. Hidden while the real game runs. */
.yc-af-attract-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.yc-af--playing .yc-af-attract-canvas { display: none; }

/* Footer content paints above the background scene. The optional scene
   min-height makes the non-playing footer (and so the background game)
   taller than its content. */
.yc-af-footer {
    position: relative;
    z-index: 1;
    min-height: var(--yc-af-scene-min-h, auto);
}

.yc-af-game { z-index: 2; }

/* CTA overlay: game title + mini highscore board + play button, floating
   over the footer. Horizontal AND vertical position are admin options.
   The container ignores clicks; only its children are interactive. */
.yc-af-cta {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: min(320px, 80vw);
    pointer-events: none;
}

.yc-af-cta > * { pointer-events: auto; }

.yc-af-cta--h-left   { left: 28px;  align-items: flex-start; text-align: left; }
.yc-af-cta--h-center { left: 50%;   transform: translateX(-50%); text-align: center; }
.yc-af-cta--h-right  { right: 28px; align-items: flex-end; text-align: right; }

.yc-af-cta--v-top    { top: 22px; }
.yc-af-cta--v-middle { top: 50%; transform: translateY(-50%); }
.yc-af-cta--v-bottom { bottom: 22px; }

.yc-af-cta--h-center.yc-af-cta--v-middle { transform: translate(-50%, -50%); }

.yc-af-cta-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Compact live highscore board in the footer (top entries, board fed by
   the scores_get action; names are textContent = XSS-safe). */
.yc-af-board--footer {
    font-size: 0.78rem;
    opacity: 0.85;
    max-width: 240px;
}

.yc-af-board--footer .yc-af-board-title {
    margin: 0 0 2px;
    font-size: 0.68rem;
}

.yc-af-board--footer .yc-af-board-list { font-size: 0.78rem; }

.yc-af-board--footer .yc-af-board-list li { padding: 2px 6px; }

.yc-af-board--footer .yc-af-board-list li:nth-child(n+6) { display: none; }

.yc-af-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    min-width: 48px;
    padding: 12px 24px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: inherit;
    background: var(--yc-af-faint);
    border: 2px solid var(--yc-af-accent);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.yc-af-play:hover {
    background: var(--yc-af-dim);
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 0 0 5px var(--yc-af-faint);
}

/* ---- style: pulse (default) - soft glow ring inviting the click ---- */
.yc-af-play--pulse { animation: yc-af-pulse 2.4s ease-out infinite; }

.yc-af-play--pulse:hover { animation: none; }

/* ---- style: solid - filled with the accent color ---- */
.yc-af-play--solid {
    background: var(--yc-af-accent);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.yc-af-play--solid:hover {
    background: var(--yc-af-accent);
    filter: brightness(1.12);
    box-shadow: 0 4px 14px var(--yc-af-dim);
}

/* ---- style: ghost - quiet outline, no glow ---- */
.yc-af-play--ghost {
    background: transparent;
    border-width: 2px;
}

.yc-af-play--ghost:hover { background: var(--yc-af-faint); box-shadow: none; }

/* ---- style: arcade - chunky retro cabinet button ---- */
.yc-af-play--arcade {
    border-radius: 10px;
    border-width: 3px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    box-shadow: 0 5px 0 var(--yc-af-dim);
}

.yc-af-play--arcade:hover {
    transform: none;
    box-shadow: 0 5px 0 var(--yc-af-dim);
    background: var(--yc-af-dim);
}

.yc-af-play--arcade:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--yc-af-dim);
}

/* ---- sizes ---- */
.yc-af-play--small {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.8rem;
    border-width: 1px;
}

.yc-af-play--large {
    min-height: 58px;
    padding: 15px 32px;
    font-size: 1.1rem;
}

@keyframes yc-af-pulse {
    0%   { box-shadow: 0 0 0 0 var(--yc-af-dim); }
    65%  { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.yc-af-play:focus-visible,
.yc-af-btn:focus-visible,
.yc-af-quit:focus-visible,
.yc-af-name:focus-visible {
    outline: 2px solid var(--yc-af-accent);
    outline-offset: 2px;
}

.yc-af-play-icon { font-size: 0.85em; }

/* ---------------------------------------------------------------- game pane */
.yc-af-game {
    position: absolute;
    inset: 0;
    min-height: var(--yc-af-min-h, 420px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.yc-af--playing .yc-af-game {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    /* never taller than the viewport: the whole playfield must fit on
       screen even when the admin sets a big height like 500-900px */
    min-height: min(var(--yc-af-min-h, 420px), 88vh);
    min-height: min(var(--yc-af-min-h, 420px), 88svh);
}

.yc-af-canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    touch-action: none;
}

/* ---------------------------------------------------------------- HUD */
.yc-af-hud {
    position: absolute;
    top: 10px;
    left: 14px;
    right: 56px;
    display: flex;
    gap: 18px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.yc-af-quit {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.6;
}

.yc-af-quit:hover { opacity: 1; }

/* ---------------------------------------------------------------- overlays */
.yc-af-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 24px 16px;
    overflow-y: auto;
    /* readable on any footer: dark translucent panel, white text */
    background: rgba(12, 12, 16, 0.66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
}

/* Inside the dark panels, controls always contrast in white regardless of
   the site palette (the canvas keeps the accent color). */
.yc-af-overlay .yc-af-btn {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

.yc-af-overlay .yc-af-btn:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.yc-af-overlay .yc-af-btn:focus-visible,
.yc-af-overlay .yc-af-name:focus-visible {
    outline-color: #fff;
}

.yc-af-overlay .yc-af-name {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.yc-af-overlay .yc-af-name::placeholder { color: rgba(255, 255, 255, 0.55); }

.yc-af-overlay .yc-af-board-list li.yc-af-me { background: rgba(255, 255, 255, 0.16); }

.yc-af-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.yc-af-hint {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.65;
}

.yc-af-final {
    margin: 0;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.yc-af-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 22px;
    font: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: inherit;
    background: transparent;
    border: 1px solid var(--yc-af-dim);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.yc-af-btn:hover { border-color: var(--yc-af-accent); background: var(--yc-af-faint); }

.yc-af-btn--ghost { border-color: transparent; opacity: 0.7; }

.yc-af-btn--ghost:hover { opacity: 1; background: transparent; border-color: var(--yc-af-faint); }

/* ---------------------------------------------------------------- save form */
.yc-af-save {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.yc-af-name {
    min-height: 44px;
    padding: 8px 14px;
    width: 180px;
    max-width: 60vw;
    font: inherit;
    color: inherit;
    text-align: center;
    letter-spacing: 0.08em;
    background: transparent;
    border: 1px solid var(--yc-af-dim);
    border-radius: 999px;
}

.yc-af-name::placeholder { color: inherit; opacity: 0.45; }

.yc-af-save-msg {
    margin: 0;
    min-height: 1.2em;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* ---------------------------------------------------------------- highscores */
.yc-af-board { max-width: 340px; width: 100%; }

.yc-af-board-title {
    margin: 6px 0 4px;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
}

.yc-af-board-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: yc-af-rank;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.yc-af-board-list li {
    counter-increment: yc-af-rank;
    display: flex;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 6px;
}

.yc-af-board-list li::before {
    content: counter(yc-af-rank);
    opacity: 0.5;
    min-width: 1.4em;
    text-align: right;
}

.yc-af-board-list li.yc-af-me {
    background: var(--yc-af-faint);
    font-weight: 600;
}

.yc-af-board-name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-af-over-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 640px) {
    .yc-af-title { font-size: 1.15rem; }
    .yc-af-hud { gap: 12px; font-size: 0.72rem; }
}

@media (max-width: 420px) {
    .yc-af-overlay { padding: 16px 10px; gap: 9px; }
    .yc-af-name { width: 140px; }
    .yc-af-board { max-width: 100%; }
    .yc-af-cta--h-left  { left: 14px; }
    .yc-af-cta--h-right { right: 14px; }
    .yc-af-cta { gap: 8px; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
    .yc-af-footer,
    .yc-af-game,
    .yc-af-play,
    .yc-af-btn {
        transition: none;
    }

    .yc-af-play--pulse { animation: none; }
}