.survival-main { min-height: calc(100svh - 63px); }
.survival-main [hidden], .survival-intro[hidden], .survival-board[hidden], .survival-results[hidden], #hint-cover[hidden], #cover[hidden] { display: none !important; }
.survival-intro { --accent: #4ade80; --accent-ink: #04220f; position: relative; isolation: isolate; display: grid; place-items: center; min-height: calc(100svh - 63px); overflow: hidden; background: #0b100d; color: #f7faf6; }
:root[data-palette="cb"] .survival-intro { --accent: #67b0ff; --accent-ink: #03203f; }
.survival-intro__wall { position: absolute; z-index: -2; inset: -90px -120px; display: grid; align-content: center; gap: 14px; transform: rotate(-4deg) scale(1.08); opacity: 0; transition: opacity .45s ease; }
.survival-intro__wall.is-ready { opacity: 1; }
.survival-intro__row { display: flex; gap: 14px; width: max-content; will-change: transform; }
.survival-intro__row img { width: auto; height: var(--cover-size, 180px); max-width: none; object-fit: contain; border-radius: 11px; flex: none; opacity: .8; box-shadow: 0 10px 30px #0008; }
.survival-intro__shade { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 53% 60% at 50% 50%, #0b100df5 0%, #0b100de8 44%, #0b100d95 80%, #0b100d6b 100%); }
.survival-intro__content { display: grid; justify-items: center; gap: 22px; width: min(100% - 36px, 720px); padding: 50px 22px; text-align: center; }
.survival-intro__eyebrow { color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.survival-intro h2 { margin: 0; font-family: var(--font-display); font-size: clamp(3.3rem, 8vw, 6.8rem); line-height: .95; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 8px 28px #000a; }
.survival-intro h2 em { display: inline-block; color: var(--accent); font-size: .97em; font-style: normal; letter-spacing: -.025em; }
.survival-intro__content > p { max-width: 440px; margin: 0; color: #d4ddd2; font-size: 1.04rem; line-height: 1.55; }
.survival-genres { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 0; border: 0; }
.survival-genres legend { width: 100%; margin-bottom: 12px; color: #d4ddd2; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.survival-genres label { position: relative; cursor: pointer; }
.survival-genres input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.survival-genres span { display: block; min-width: 80px; padding: 10px 19px; border: 1px solid #91a3976b; border-radius: 999px; background: #152019de; color: #edf7eb; font-weight: 700; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.survival-genres input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.survival-genres input:focus-visible + span { outline: 3px solid #fff; outline-offset: 3px; }
.survival-genres label:hover span { transform: translateY(-2px); }
.survival-intro__play { min-width: 184px; min-height: 54px; font-size: 1.08rem; }
.survival-intro__play span { margin-right: 8px; font-size: .82rem; }
.survival-intro__loading { min-height: 1.3em; font-size: .8rem !important; }
.survival-intro__high-score { font-size: .94rem !important; }
.survival-intro__high-score strong { color: var(--accent); font-family: var(--font-display); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.survival-board { width: min(100% - 36px, 660px); margin: 0 auto; padding-block: 28px 65px; }
.survival-board__genre { color: var(--accent); font-weight: 700; }
.survival-board .songless__art::after { content: none; }
.survival-board #hint-cover { filter: blur(12px); transform: scale(1.13); }
.survival-board .songless__art img { position: absolute; inset: 0; }
.survival-results { display: grid; justify-items: center; gap: 15px; width: min(100% - 36px, 630px); margin: 0 auto; padding: 24px 0 34px; text-align: center; }
.survival-results__eyebrow { margin: 0; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.survival-results h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.2rem); }
.survival-results__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.survival-results__stats > div { display: grid; gap: 3px; padding: 20px; border: 1px solid var(--line-hi); border-radius: var(--r-lg); background: var(--surface); }
.survival-results__stats span { color: var(--ink-2); font-size: .83rem; }
.survival-results__stats strong { color: var(--accent); font-family: var(--font-display); font-size: clamp(2.3rem, 7vw, 3.8rem); font-variant-numeric: tabular-nums; }
.survival-results__line { margin: 0; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.survival-results__line.is-in { opacity: 1; transform: none; }
.survival-results__detail { margin: -8px 0 0; color: var(--ink-2); font-size: .88rem; }
.survival-results__last { display: flex; align-items: center; gap: 15px; width: 100%; padding: 12px; border: 1px solid var(--line-hi); border-radius: var(--r-lg); background: var(--surface); text-align: left; }
.survival-results__last img { width: 68px; height: 68px; border-radius: 8px; object-fit: cover; flex: none; }
.survival-results__last div { display: grid; gap: 3px; min-width: 0; }
.survival-results__last strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.survival-results__last span { color: var(--ink-2); font-size: .85rem; }
.survival-results__last a { color: var(--accent); font-size: .8rem; font-weight: 700; }
.survival-results__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
@media (max-width: 600px) { .survival-intro__wall { inset-inline: -180px; } .survival-intro__shade { background: #0b100dd9; } .survival-board .songless__top { flex-wrap: wrap; } .survival-board .songless__score { width: 100%; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .survival-genres span { transition: none; } .survival-results__line { opacity: 1; transform: none; transition: none; } }
:root[data-motion="reduced"] .survival-results__line { opacity: 1; transform: none; transition: none; }
:root[data-motion="reduced"] .survival-intro__wall { transition: none; }

/* Hard mode: a red accent ramp for the whole page, including the player. */
.survival-main[data-mode="hard"] { --accent: #f87171; --accent-hi: #fca5a5; --accent-ink: #2b0707; --accent-soft: rgba(248, 113, 113, .13); --accent-line: rgba(248, 113, 113, .42); --accent-glow: rgba(248, 113, 113, .16); }
:root[data-theme="light"] .survival-main[data-mode="hard"] { --accent: #dc2626; --accent-hi: #b91c1c; --accent-ink: #ffffff; --accent-soft: rgba(220, 38, 38, .11); --accent-line: rgba(220, 38, 38, .38); --accent-glow: rgba(220, 38, 38, .14); }
.survival-main[data-mode="hard"] .survival-intro { --accent: #f87171; --accent-ink: #2b0707; background: #120b0b; }
.survival-intro__shade { transition: background .35s ease; }
.survival-main[data-mode="hard"] .survival-intro__shade { background: radial-gradient(ellipse 53% 60% at 50% 50%, #140b0bf5 0%, #140b0be8 44%, #1a0b0b9e 80%, #2a0c0c78 100%); }
.survival-intro h2 em, .survival-intro__eyebrow, .survival-intro__high-score strong { transition: color .35s ease; }

/* Genre pills fold away and a single Hard mode pill takes their place. */
.survival-genres { align-items: center; }
.survival-genres label span { white-space: nowrap; }
.survival-genres label { max-width: 160px; transition: max-width .32s ease, opacity .22s ease, margin .32s ease; }
.survival-genres.is-hard label { max-width: 0; margin-inline: -4.5px; opacity: 0; pointer-events: none; }
.survival-genres .survival-genres__hard { min-width: 0; display: block; max-width: 0; overflow: hidden; padding: 10px 0; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; white-space: nowrap; opacity: 0; transition: max-width .32s ease, padding .32s ease, opacity .22s ease .1s; }
.survival-genres:not(.is-hard) .survival-genres__hard { margin-inline: -4.5px; }
.survival-genres.is-hard .survival-genres__hard { max-width: 200px; padding-inline: 26px; border-color: var(--accent); opacity: 1; }

/* On/off switch under the high score. */
.survival-hard-toggle { position: relative; display: inline-flex; align-items: center; gap: 11px; margin-top: -8px; color: #edf7eb; font-size: .9rem; font-weight: 700; cursor: pointer; }
.survival-hard-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.survival-hard-toggle__track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #3a463d; transition: background .2s ease; }
.survival-hard-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #f7faf6; box-shadow: 0 1px 4px #0006; transition: transform .2s ease; }
.survival-hard-toggle input:checked + .survival-hard-toggle__track { background: #ef4444; }
.survival-hard-toggle input:checked + .survival-hard-toggle__track::after { transform: translateX(16px); }
.survival-hard-toggle:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 5px; border-radius: 999px; }
.survival-hard-toggle:hover .survival-hard-toggle__track { background: #4a584e; }
.survival-hard-toggle:hover input:checked + .survival-hard-toggle__track { background: #f05252; }

/* Hard runs blur the fifth-guess cover hint as much as Album Guesser's first
   guess: 7% of the cover's width. */
.survival-main[data-mode="hard"] .songless__art { container-type: inline-size; }
.survival-main[data-mode="hard"] #hint-cover { filter: blur(7cqw); transform: scale(1.14); }

/* In a hard run the mode label becomes a filled badge. */
.survival-main[data-mode="hard"] .survival-board__genre { padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.survival-main[data-mode="hard"] .survival-board__genre { display: inline-flex; align-items: center; gap: 5px; }
.survival-main[data-mode="hard"] .survival-board__genre::before { content: ""; width: 12px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6.6 0C7 2.6 9.2 3.9 10.6 6c1.9 2.9.7 7.4-4.6 8C1.2 13.6-.6 9.6 1.3 6.6c.4 1.4 1.3 2.1 2.3 2.2C2.8 5.6 4.6 2.4 6.6 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6.6 0C7 2.6 9.2 3.9 10.6 6c1.9 2.9.7 7.4-4.6 8C1.2 13.6-.6 9.6 1.3 6.6c.4 1.4 1.3 2.1 2.3 2.2C2.8 5.6 4.6 2.4 6.6 0z'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (prefers-reduced-motion: reduce) { .survival-genres label, .survival-genres__hard, .survival-hard-toggle, .survival-hard-toggle__track, .survival-hard-toggle__track::after, .survival-intro__shade { transition: none; } }
:root[data-motion="reduced"] :is(.survival-genres label, .survival-genres__hard, .survival-hard-toggle, .survival-hard-toggle__track, .survival-hard-toggle__track::after, .survival-intro__shade) { transition: none; }

/* Results fill the screen so the Discord card can sit at the bottom. */
.survival-results { display: flex; flex-direction: column; align-items: center; min-height: calc(100svh - 63px); }
.survival-results__discord { display: grid; gap: 10px; width: 100%; margin-top: auto; padding: 18px 20px 14px; border: 1px solid var(--line-hi); border-radius: var(--r-lg); background: var(--surface); text-align: left; }
.survival-results__discord-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.survival-results__discord-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .9rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.survival-results__discord-kicker svg { width: 20px; height: 20px; color: var(--accent); }
.survival-results__discord-points { flex: none; padding: 3px 10px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.survival-results__discord h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.2rem; }
.survival-results__discord p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.survival-results__discord-join { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; margin-top: 6px; border-radius: 12px; background: #5865f2; color: #fff; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.survival-results__discord-join:hover { background: #4752c4; transform: translateY(-1px); }
.survival-results__discord-join:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.survival-results__discord-join svg { width: 20px; height: 20px; }
.survival-results__discord small { color: var(--ink-2); font-size: .75rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .survival-results__discord-join { transition: none; } }
:root[data-motion="reduced"] .survival-results__discord-join { transition: none; }

/* Small badge on the score box when the run sets a new best for its mode. */
.survival-results__score { position: relative; }
.survival-results__best { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .68rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; animation: survival-best-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes survival-best-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .survival-results__best { animation: none; } }
:root[data-motion="reduced"] .survival-results__best { animation: none; }

/* Play and Home sit side by side, matching the daily games' title screens. */
.survival-intro__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 420px); }
.survival-intro__actions .survival-intro__play { width: 100%; min-width: 0; }
.survival-intro__home { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 12px 22px; border: 1px solid #d5e8d575; border-radius: 999px; background: #0b120dda; color: #f8fbf7; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.survival-intro__home:hover { background: #263c2f; transform: translateY(-2px); }
.survival-intro__home:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.survival-intro__home svg { width: 19px; height: 19px; flex: none; }
.survival-main[data-mode="hard"] .survival-intro__home { border-color: #f3c9c975; background: #140b0bda; }
.survival-main[data-mode="hard"] .survival-intro__home:hover { background: #3a1a1a; }
@media (prefers-reduced-motion: reduce) { .survival-intro__home { transition: none; } }
:root[data-motion="reduced"] .survival-intro__home { transition: none; }