/* ===========================================================
   Grapapack — Tweaks popover (sound + mascot variant)
   =========================================================== */

/* Trigger button uses the standard .gp-nav__icon-btn skin from theme.css.
   When the popover is open we give it the active treatment via aria. */
.gp-nav__icon-btn.gp-tweaks-trigger[aria-expanded="true"] {
    background: var(--gp-yellow); color: var(--gp-ink-2);
    border-color: var(--gp-yellow);
}

@keyframes gp-tweaks-in {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

.gp-tweaks-panel {
    position: absolute; z-index: 200;
    width: 320px; max-width: calc(100vw - 24px);
    padding: 14px 16px 12px;
    background: var(--gp-ink-2, #0a0d1a);
    color: var(--gp-text);
    border: 2px solid var(--gp-yellow, #ffcb05);
    border-radius: var(--gp-radius, 8px);
    box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 24px rgba(255,203,5,.25);
    font-family: var(--gp-font-body);
    animation: gp-tweaks-in .18s ease-out;
}
.gp-tweaks-panel[hidden] { display: none; }

.gp-tweaks-arrow {
    position: absolute; top: -7px; right: 16px;
    width: 12px; height: 12px;
    background: var(--gp-ink-2, #0a0d1a);
    border-top: 2px solid var(--gp-yellow); border-left: 2px solid var(--gp-yellow);
    transform: rotate(45deg);
}

.gp-tweaks-head {
    font-family: var(--gp-font-display);
    font-size: 16px; letter-spacing: 2.5px;
    color: var(--gp-yellow);
    text-shadow: 1px 1px 0 #fff, 2px 2px 0 var(--gp-ink);
    margin-bottom: 12px;
}

/* ─── Row layout ─── */
.gp-tweaks-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px dashed rgba(255,255,255,.08);
}
.gp-tweaks-row--column {
    flex-direction: column; align-items: stretch;
}
.gp-tweaks-row:first-of-type { border-top: none; }

.gp-tweaks-label {
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--gp-font-heading);
    font-size: 13px; letter-spacing: 2px;
    color: var(--gp-text);
}
.gp-tweaks-sub {
    font-family: var(--gp-font-mono); font-size: 9px;
    letter-spacing: 1px; color: var(--gp-text-muted);
    text-transform: none;
}

/* ─── Sound toggle switch ─── */
.gp-tweaks-toggle {
    background: none; border: none; padding: 0; cursor: pointer;
    width: 56px; height: 30px;
}
.gp-tweaks-toggle-track {
    display: block; width: 100%; height: 100%;
    background: #2a2c45;
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 999px;
    position: relative;
    transition: background .15s, border-color .15s;
}
.gp-tweaks-toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 22px; height: 22px;
    background: #fff; border-radius: 50%;
    transition: transform .18s cubic-bezier(.4,0,.2,1), background .15s;
}
.gp-tweaks-toggle[aria-pressed="true"] .gp-tweaks-toggle-track {
    background: var(--gp-cyan, #43e8d8);
    border-color: var(--gp-cyan);
}
.gp-tweaks-toggle[aria-pressed="true"] .gp-tweaks-toggle-thumb {
    transform: translateX(26px); background: var(--gp-ink-2);
}

/* ─── Mascot variant picker ─── */
.gp-tweaks-mascot-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px;
}
.gp-tweaks-mascot {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px;
    background: var(--gp-ink, #06080f);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: var(--gp-text);
    font-family: var(--gp-font-heading); font-size: 10px;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.gp-tweaks-mascot:hover { border-color: var(--gp-yellow); }
.gp-tweaks-mascot.is-selected {
    background: var(--gp-yellow);
    border-color: var(--gp-yellow);
    color: var(--gp-ink-2);
    box-shadow: 0 0 16px rgba(255,203,5,.45);
}
.gp-tweaks-mascot.is-selected svg path,
.gp-tweaks-mascot.is-selected svg ellipse,
.gp-tweaks-mascot.is-selected svg circle {
    stroke: var(--gp-ink-2);
}
.gp-tweaks-mascot__pair {
    display: inline-flex; align-items: center; gap: 2px;
    height: 42px;
}

.gp-tweaks-foot {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,.08);
    text-align: center;
}
.gp-tweaks-credit {
    font-family: var(--gp-font-mono); font-size: 9px;
    letter-spacing: 1px; color: var(--gp-text-muted);
}

/* ===========================================================
   Mascot variant body classes
   - 'both'    → both mascots visible (default)
   - 'happy'   → only the happy mascot, scaled up
   - 'spooky'  → only the spooky mascot, scaled up
   These target the machine header banner where the two mascots
   live (front-page.php → .gp-machine__header .gp-mascot).
   =========================================================== */
body.gp-mascot-mode-happy  .gp-machine__header .gp-mascot:nth-of-type(2) { display: none; }
body.gp-mascot-mode-spooky .gp-machine__header .gp-mascot:nth-of-type(1) { display: none; }
body.gp-mascot-mode-happy  .gp-machine__header .gp-mascot:nth-of-type(1),
body.gp-mascot-mode-spooky .gp-machine__header .gp-mascot:nth-of-type(2) {
    width: 110px; height: 110px;
}
/* Also apply on the right-rail mascot panel so the "vibe" is consistent. */
body.gp-mascot-mode-spooky .gp-mascot-panel .gp-mascot svg ellipse[fill="#ffcb05"] { fill: #7a3aff; }
body.gp-mascot-mode-spooky .gp-mascot-panel .gp-mascot svg path[fill="#ffcb05"]    { fill: #7a3aff; }

@media (max-width: 480px) {
    .gp-tweaks-panel { width: calc(100vw - 24px); right: 12px !important; }
}