/* ================================================================
   ByteBreaker — Overlay + Highscores Styles
   --------------------------------------------------------------
   Split from bytebreaker.css: overlay-layer chrome (settings +
   highscores), highscores grid, difficulty-color-coding, podium,
   stagger animation, settings-panel, initials-form, honeypot.

   Scoping: .bytebreaker for all BEM-selectors
   ================================================================ */

/* ============================================================
   Overlay-Layer (Settings + Highscores) — orthogonal zu data-state
   ============================================================ */
.bytebreaker__overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6, 23, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    z-index: 10;
    padding: var(--byte-sp-3);
}
/* V7 — Overlay-Inner mit terminal-frame, scanline, glow.
   Fills the available stage minus overlay-padding so highscore tables
   actually have room for 7-digit scores at typical 720px window size. */
.bytebreaker__overlay-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.018) 2px 3px),
        var(--byte-surface-glass);
    border: 1px solid var(--byte-border-warm);
    border-radius: var(--byte-r-md);
    box-shadow:
        var(--byte-shadow-pop),
        0 0 50px rgba(253, 125, 0, 0.18);
    display: flex;
    flex-direction: column;
}
.bytebreaker__overlay-inner::before,
.bytebreaker__overlay-inner::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.bytebreaker__overlay-inner::before {
    top: 6px; left: 6px;
    border-top: 2px solid var(--byte-primary);
    border-left: 2px solid var(--byte-primary);
}
.bytebreaker__overlay-inner::after {
    bottom: 6px; right: 6px;
    border-bottom: 2px solid var(--byte-primary);
    border-right: 2px solid var(--byte-primary);
}
.bytebreaker__overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--byte-sp-4) var(--byte-sp-5);
    border-bottom: 1px solid var(--byte-border-warm);
    background: linear-gradient(180deg, rgba(253,125,0,0.06) 0%, transparent 100%);
}
.bytebreaker__overlay-head h2 {
    margin: 0;
    color: var(--byte-primary);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-lg);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(253, 125, 0, 0.50);
}
.bytebreaker__overlay-head h2::before {
    content: '// ';
    color: var(--byte-text-muted);
    opacity: 0.55;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* V7 — Overlay-Close button (X icon) with terminal-vibe hover */
.bytebreaker__btn-close {
    appearance: none;
    border: 1px solid var(--byte-border-strong);
    background: linear-gradient(180deg, var(--byte-surface-2) 0%, var(--byte-ink-800) 100%);
    color: var(--byte-text-muted);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-md);
    width: 30px;
    height: 30px;
    border-radius: var(--byte-r-sm);
    cursor: pointer;
    line-height: 1;
    transition: all var(--byte-t-fast);
}
.bytebreaker__btn-close:hover {
    background: linear-gradient(180deg, rgba(255, 95, 87, 0.20) 0%, rgba(255, 95, 87, 0.08) 100%);
    border-color: var(--byte-danger);
    color: var(--byte-danger);
    box-shadow: 0 0 12px rgba(255, 95, 87, 0.30);
}

/* ============================================================
   Highscores-Grid (4 Sections per Difficulty)
   Global leaderboard via /api/highscore.php
   ============================================================ */
.bytebreaker__hs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--byte-sp-3);
    padding: var(--byte-sp-3);
}
.bytebreaker__hs-grid[data-status="loading"] .bytebreaker__hs-section {
    opacity: 0.7;
}

/* Difficulty-color-coded section frames */
.bytebreaker__hs-section {
    position: relative;
    padding: var(--byte-sp-3) var(--byte-sp-2) var(--byte-sp-2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(0, 0, 0, 0.20) 100%);
    border: 1px solid var(--byte-border);
    border-left: 2px solid var(--byte-primary);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.bytebreaker__hs-section[data-diff="easy"]   { border-left-color: var(--byte-green-500);  }
.bytebreaker__hs-section[data-diff="normal"] { border-left-color: var(--byte-blue-300);   }
.bytebreaker__hs-section[data-diff="hard"]   { border-left-color: var(--byte-primary);    }
.bytebreaker__hs-section[data-diff="insane"] { border-left-color: var(--byte-danger);     }

.bytebreaker__hs-section h3 {
    margin: 0 0 var(--byte-sp-2);
    color: var(--byte-primary);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--byte-border-warm);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.bytebreaker__hs-section[data-diff="easy"]   h3 { color: var(--byte-green-500); border-bottom-color: rgba(39, 202, 64, 0.20); }
.bytebreaker__hs-section[data-diff="normal"] h3 { color: var(--byte-blue-300);  border-bottom-color: rgba(121, 192, 255, 0.20); }
.bytebreaker__hs-section[data-diff="hard"]   h3 { color: var(--byte-primary);   border-bottom-color: var(--byte-border-warm); }
.bytebreaker__hs-section[data-diff="insane"] h3 { color: var(--byte-danger);    border-bottom-color: rgba(255, 95, 87, 0.25); }

.bytebreaker__hs-h-prefix {
    color: var(--byte-text-subtle);
    font-weight: 400;
    opacity: 0.7;
}

/* Table */
.bytebreaker__hs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-sm);
    color: var(--byte-text);
    table-layout: fixed;
}
.bytebreaker__hs-table tr {
    transition: background-color 0.16s ease;
}
.bytebreaker__hs-table tr:hover {
    background: rgba(253, 125, 0, 0.04);
}
.bytebreaker__hs-table td {
    padding: 5px 4px;
    border-bottom: 1px solid var(--byte-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bytebreaker__hs-table tr:last-child td {
    border-bottom: none;
}

/* Column widths: rank | initials | score | level | date.
   score is auto so 7-digit values (0000000–9999999) get the remaining
   space. Other columns trimmed so score has room at 720px window width. */
.bytebreaker__hs-rank     { width: 30px;  color: var(--byte-text-muted); font-weight: 700; text-align: right; }
.bytebreaker__hs-initials { width: 42px;  color: var(--byte-primary); letter-spacing: 0.08em; font-weight: 700; }
.bytebreaker__hs-score    { color: var(--byte-fog-100); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.bytebreaker__hs-meta     { width: 44px;  color: var(--byte-text-muted); text-align: right; font-size: 10px; }
.bytebreaker__hs-date     { width: 70px;  color: var(--byte-text-subtle); text-align: right; font-size: 10px; opacity: 0.75; }

/* Podium: rank 1 = gold, 2 = silver, 3 = bronze */
.bytebreaker__hs-table tr[data-rank="1"] .bytebreaker__hs-rank,
.bytebreaker__hs-table tr[data-rank="1"] .bytebreaker__hs-initials,
.bytebreaker__hs-table tr[data-rank="1"] .bytebreaker__hs-score {
    color: var(--byte-warning);
    text-shadow: 0 0 8px rgba(254, 188, 46, 0.45);
}
.bytebreaker__hs-table tr[data-rank="1"] .bytebreaker__hs-rank::before {
    content: '★';
    margin-right: 3px;
    color: var(--byte-warning);
    text-shadow: 0 0 6px rgba(254, 188, 46, 0.55);
}
.bytebreaker__hs-table tr[data-rank="2"] .bytebreaker__hs-rank,
.bytebreaker__hs-table tr[data-rank="2"] .bytebreaker__hs-initials,
.bytebreaker__hs-table tr[data-rank="2"] .bytebreaker__hs-score {
    color: var(--byte-fog-100);
    text-shadow: 0 0 4px rgba(232, 238, 241, 0.20);
}
.bytebreaker__hs-table tr[data-rank="3"] .bytebreaker__hs-rank,
.bytebreaker__hs-table tr[data-rank="3"] .bytebreaker__hs-initials,
.bytebreaker__hs-table tr[data-rank="3"] .bytebreaker__hs-score {
    color: var(--byte-orange-400);
}

/* Stagger reveal — ONLY on the initial render after overlay-open.
   Subsequent re-renders (force-fetch refresh) set data-rendered="subsequent"
   and skip the animation to avoid double-stagger flicker. */
.bytebreaker__hs-grid[data-rendered="initial"] .bytebreaker__hs-table tr {
    animation: bb-hs-row-in 0.36s ease-out both;
    animation-delay: calc(var(--row-i, 0) * 50ms);
}
@keyframes bb-hs-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Empty / loading / error states */
.bytebreaker__hs-empty {
    color: var(--byte-text-subtle);
    text-align: center;
    padding: var(--byte-sp-3) 0 !important;
    border-bottom: none !important;
    font-style: italic;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.bytebreaker__hs-error {
    color: var(--byte-danger);
    opacity: 0.75;
}
.bytebreaker__hs-grid[data-status="loading"] .bytebreaker__hs-empty {
    animation: bb-hs-pulse 1.4s ease-in-out infinite;
}
@keyframes bb-hs-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.85; }
}

/* Reduced motion: kill row-stagger + loading-pulse */
@media (prefers-reduced-motion: reduce) {
    .bytebreaker__hs-grid[data-rendered="initial"] .bytebreaker__hs-table tr {
        animation: none;
    }
    .bytebreaker__hs-grid[data-status="loading"] .bytebreaker__hs-empty {
        animation: none;
        opacity: 0.7;
    }
}

/* Narrow stage: collapse highscore grid to single column + drop date.
   Container-query targets the .bytebreaker stage width (set via
   container-type: inline-size in bytebreaker.css), not the viewport —
   important because the game runs in a resizable window-manager pane. */
@container bb-stage (max-width: 600px) {
    .bytebreaker__hs-grid {
        grid-template-columns: 1fr;
    }
    .bytebreaker__hs-date {
        display: none;
    }
}
/* Viewport-fallback for legacy browsers without container-query support */
@media (max-width: 720px) {
    .bytebreaker__hs-grid {
        grid-template-columns: 1fr;
    }
    .bytebreaker__hs-date {
        display: none;
    }
}

/* ============================================================
   Settings-Panel (Difficulty + CRT-Toggle + Particles + Reset)
   ============================================================ */
.bytebreaker__settings {
    padding: var(--byte-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--byte-sp-4);
}
.bytebreaker__settings-row {
    display: flex;
    flex-direction: column;
    gap: var(--byte-sp-2);
}
/* V7 — Settings-row labels in terminal-comment style */
.bytebreaker__settings-row label {
    color: var(--byte-primary);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.80;
}
.bytebreaker__settings-row label::before {
    content: '// ';
    color: var(--byte-text-muted);
    opacity: 0.65;
}
.bytebreaker__settings-row .bytebreaker__diff-picker,
.bytebreaker__pi-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--byte-sp-2);
}
.bytebreaker__pi-picker {
    grid-template-columns: repeat(3, 1fr);
}
.bytebreaker__pi-picker .bytebreaker__btn,
.bytebreaker__settings-row .bytebreaker__diff-picker .bytebreaker__btn {
    min-width: unset;
    width: 100%;
    padding: var(--byte-sp-2);
    font-size: var(--byte-fs-xs);
}
/* V7 — Picker active-state matches main difficulty-picker dramatic glow */
.bytebreaker__pi-picker .bytebreaker__btn[aria-pressed="true"],
.bytebreaker__settings-row .bytebreaker__diff-picker .bytebreaker__btn[aria-pressed="true"] {
    background: linear-gradient(180deg,
        rgba(253, 125, 0, 0.30) 0%,
        rgba(253, 125, 0, 0.12) 100%);
    border-color: var(--byte-primary);
    color: var(--byte-primary);
    text-shadow: 0 0 8px rgba(253, 125, 0, 0.55);
    box-shadow:
        0 0 0 1px var(--byte-primary),
        0 0 16px rgba(253, 125, 0, 0.25),
        inset 0 0 10px rgba(253, 125, 0, 0.08);
}
.bytebreaker__toggle {
    align-self: flex-start;
    min-width: 100px;
}
.bytebreaker__toggle[aria-pressed="true"] {
    background: linear-gradient(180deg,
        rgba(253, 125, 0, 0.35) 0%,
        rgba(253, 125, 0, 0.15) 100%);
    border-color: var(--byte-primary);
    color: var(--byte-primary);
    text-shadow: 0 0 8px rgba(253, 125, 0, 0.55);
    box-shadow: 0 0 0 1px var(--byte-primary), 0 0 16px rgba(253, 125, 0, 0.25);
}
/* V7 — Reset-button: dangerous look with red-glow, 2-step confirm-pulse */
.bytebreaker__btn--reset {
    align-self: flex-start;
    min-width: 220px;
    color: var(--byte-danger);
    border-color: var(--byte-danger);
    background: linear-gradient(180deg, rgba(255, 95, 87, 0.10) 0%, rgba(255, 95, 87, 0.04) 100%);
    text-shadow: 0 0 6px rgba(255, 95, 87, 0.30);
}
.bytebreaker__btn--reset:hover {
    background: linear-gradient(180deg, rgba(255, 95, 87, 0.20) 0%, rgba(255, 95, 87, 0.08) 100%);
    border-color: var(--byte-danger);
    color: var(--byte-danger);
    box-shadow:
        0 0 0 1px rgba(255, 95, 87, 0.40),
        0 0 18px rgba(255, 95, 87, 0.30);
}
.bytebreaker__btn--reset[data-confirming="true"] {
    background: linear-gradient(180deg, var(--byte-danger) 0%, #cc4641 100%);
    color: var(--byte-bg);
    border-color: var(--byte-danger);
    box-shadow:
        0 0 0 1px var(--byte-danger),
        0 0 24px rgba(255, 95, 87, 0.55);
    animation: bytebreaker-reset-pulse 1s ease-in-out infinite;
}
@keyframes bytebreaker-reset-pulse {
    50% { opacity: 0.7; }
}

.bytebreaker__settings-hint {
    margin: 0;
    color: var(--byte-text-subtle);
    font-family: var(--byte-font-mono);
    font-size: var(--byte-fs-xs);
    letter-spacing: 0.02em;
    opacity: 0.7;
}

/* Reduced-motion overrides for this file */
@media (prefers-reduced-motion: reduce) {
    .bytebreaker__btn--reset[data-confirming="true"] {
        animation: none;
    }
    .bytebreaker__btn-close,
    .bytebreaker__overlay {
        transition: none;
    }
}