/* ─── START SCREEN ────────────────────────────────────────────────────────── */
/* Gennemsigtig nok til at MenuBackground.js's svævende caps (renderet på
   #canvas-container bagved, samme <canvas>/renderer som resten af spillet,
   se render/MenuBackground.js) skinner blødt igennem — lys i stedet for mørk
   (matcher --clr-bg, resten af spillets stil), teksten er derfor fortsat mørk
   ligesom overalt ellers. Dot-grid'en beholdt — den er en del af den etablerede
   stil, ikke redundant støj.
   0.86 var alt for kraftigt — caps er I FORVEJEN halvgennemsigtige i selve 3D-
   scenen (~0.5-0.8 opacity), og de to lag gange sammen (0.65 × (1-0.86) ≈ 9%)
   gjorde dem reelt usynlige. 0.4 lader markant mere af 3D-laget skinne igennem. */
#start-screen {
    position: fixed;
    inset: 0;
    background: rgba(249, 249, 249, 0.4);
    background-image: var(--bg-dot-grid);
    background-size: var(--bg-dot-size);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 32px 24px;
}

/* To UAFHÆNGIGE bevægelser på samme element — de separate rotate/translate
   CSS-egenskaber (IKKE compound transform) bruges her netop for at kunne
   style'e dem helt forskelligt uden at de overskriver hinanden. Vippen (rotate)
   styres nu af JS (domUtils.js's startTitleWobble() — kaldt fra StartScreen.js)
   i stedet for en ren CSS @keyframes+steps()-loop, fordi steps() altid rammer
   PRÆCIS de samme faste vinkler i PRÆCIS samme rytme — en tilfældig vinkel
   (symmetrisk om 0°) med et let varierende interval føles mindre mekanisk.
   Selve "hakket" er stadig en kort, skarp CSS-transition herunder. Floatet
   (translate) er fortsat en ren, uendelig CSS-animation — blød op/ned, egen
   (længere, usynkroniseret) periode. */
@keyframes start-title-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}
.start-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 56px; /* fast referenceopløsnings-px (var clamp(36px,10vw,56px)) — #ui-scale-root skalerer nu hele UI'et */
    font-weight: 800;
    color: #000;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    /* Underline sticker */
    border-bottom: 6px solid #000;
    padding-bottom: 8px;
    /* IKKE en transition på rotate — vinklen skal skifte som et hårdt,
       øjeblikkeligt spring (ingen tweening overhovedet) hver gang JS
       (startTitleWobble()) sætter en ny værdi, det ER selve "hakket". En
       transition her ville gøre skiftet blødt/synligt glidende. */
    animation: start-title-float 3.4s ease-in-out infinite;
}

.start-sub {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: -12px;
    letter-spacing: 0.04em;
}

.start-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 240px;
    margin-top: 10px;
}

/* Staggered pop-ind når startskærmen mountes — knapperne dukker ikke bare op
   på ét splitsekund alle sammen, men ét ad gangen med et lille bounce-
   overshoot. backwards-fill holder knappen usynlig i selve delay-vinduet
   (ellers ville alle tre glimte synlige ét frame før animationen starter). */
@keyframes start-btn-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
.start-btns .start-btn {
    animation: start-btn-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.start-btns .start-btn:nth-child(1) { animation-delay: 0.05s; }
.start-btns .start-btn:nth-child(2) { animation-delay: 0.15s; }
.start-btns .start-btn:nth-child(3) { animation-delay: 0.25s; }

.start-btn {
    padding: 14px 0;
    width: 100%;
    border: 4px solid #000;
    border-radius: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: box-shadow 0.08s, transform 0.08s;
}

/* Meget dæmpet "åndende" skygge på hovedhandlingen — trækker øjet dertil uden
   at distrahere. animation-play-state:paused ved hover/active giver kontrollen
   tilbage til de almindelige transitions ovenfor, så selve interaktions-
   feedbacken ikke kæmper med den løbende animation om box-shadow-værdien. */
@keyframes start-btn-breathe {
    0%, 100% { box-shadow: var(--shadow-raised); }
    50%      { box-shadow: 8px 8px 0px #000; }
}
.start-btn.primary {
    background: #000;
    color: #fff;
    box-shadow: var(--shadow-raised);
    animation: start-btn-pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
               start-btn-breathe 3.5s ease-in-out infinite 0.4s;
}
.start-btn.primary:hover {
    box-shadow: var(--shadow-sticker);
    animation-play-state: paused;
}
.start-btn.primary:active {
    box-shadow: var(--shadow-pressed);
    transform: translate(3px, 3px);
    animation-play-state: paused;
}

.start-btn-sub {
    display: block;
    font-size: 10px;
    opacity: 0.55;
    font-weight: 500;
    margin-top: 2px;
    text-transform: none;
    letter-spacing: 0;
}

.start-btn.secondary {
    background: var(--clr-bg-panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-sticker);
}
.start-btn.secondary:hover {
    box-shadow: var(--shadow-raised);
}
.start-btn.secondary:active {
    box-shadow: var(--shadow-pressed);
    transform: translate(3px, 3px);
}

#dev-btns {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

#dev-add-score-btn,
#dev-enchant-caps-btn,
#dev-skip-to-boss-btn,
#dev-add-binder-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    background: transparent;
    color: var(--text-secondary);
    border: 2px dashed var(--text-secondary);
    padding: 4px 8px;
    opacity: 0.35;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.1s;
}
#dev-add-score-btn:hover,
#dev-enchant-caps-btn:hover,
#dev-skip-to-boss-btn:hover,
#dev-add-binder-btn:hover    { opacity: 0.7; }
#dev-add-score-btn:active,
#dev-enchant-caps-btn:active,
#dev-skip-to-boss-btn:active,
#dev-add-binder-btn:active   { opacity: 1; }

/* Delt af dev-serie- og dev-kort-knapperne — begge er "grupper af små
   dashed-knapper i rækker", kun indholdet (serier vs. consumables) er forskelligt. */
.dev-mini-btn-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Max 4 pr. række (i stedet for at stole på wrap ved manglende bredde) —
   nemmere at ramme på mobil, hvor mange sammenpressede knapper på én linje
   er for smalle at tappe præcist. */
.dev-btn-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.dev-series-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0.35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dev-mini-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    background: transparent;
    color: var(--text-secondary);
    border: 2px dashed var(--text-secondary);
    padding: 3px 6px;
    opacity: 0.35;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: opacity 0.1s;
}
.dev-mini-btn:hover  { opacity: 0.7; }
.dev-mini-btn:active { opacity: 1; }