:root {
    color-scheme: dark;
    --bg: #070910;
    --bg-2: #0b0e17;
    --panel: #101420;
    --panel-2: #151a28;
    --panel-3: #1a2030;
    --text: #f7f8fc;
    --muted: #9299aa;
    --muted-2: #687083;
    --line: rgba(255, 255, 255, 0.085);
    --line-strong: rgba(255, 255, 255, 0.14);
    --purple: #8c6cff;
    --purple-2: #6f58ff;
    --pink: #d76bff;
    --cyan: #68d9ff;
    --green: #5de0a3;
    --yellow: #ffd56a;
    --red: #ff7587;
    --danger-soft: rgba(255, 117, 135, 0.10);
    --shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.48);
    --shadow-md: 0 20px 50px rgba(0, 0, 0, 0.32);
    --sidebar-width: 296px;
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 15px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

body {
    min-height: 100vh;
    overflow: hidden;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

.hidden {
    display: none !important;
}

.gtn-background {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 14%, rgba(140, 108, 255, 0.17), transparent 32%),
        radial-gradient(circle at 82% 84%, rgba(104, 217, 255, 0.09), transparent 30%),
        linear-gradient(145deg, #070910 0%, #0a0d16 48%, #080a12 100%);
}

.grid-glow {
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at center, black, transparent 82%);
}

.floating-mark {
    position: absolute;
    font-weight: 950;
    color: rgba(255,255,255,0.03);
    user-select: none;
    line-height: 1;
}

.mark-one { top: 6%; left: 5%; font-size: 170px; transform: rotate(-14deg); }
.mark-two { top: 11%; right: 6%; font-size: 118px; transform: rotate(13deg); }
.mark-three { bottom: 2%; left: 12%; font-size: 130px; transform: rotate(8deg); }
.mark-four { bottom: 8%; right: 4%; font-size: 190px; transform: rotate(-9deg); }

.screen {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    width: 100%;
}

/* =========================================================
   SPLASH
   ========================================================= */

.splash-screen {
    display: grid;
    place-items: center;
    padding: clamp(22px, 4vw, 54px);
}

.splash-layout {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(440px, 1.04fr);
    gap: clamp(38px, 6vw, 82px);
    align-items: center;
}

.splash-copy-panel {
    min-width: 0;
}

.season-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(140,108,255,0.24);
    border-radius: 999px;
    background: rgba(140,108,255,0.08);
    color: #b9abff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.15em;
}

.season-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 14px rgba(140,108,255,0.8);
}

.brand-line {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.brain-badge {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(140,108,255,0.24), rgba(140,108,255,0.07)),
        #10131d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.22);
    font-size: 25px;
}

.brand-line > div:last-child {
    display: grid;
    line-height: 0.9;
}

.brand-mini {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.brand-line strong {
    margin-top: 5px;
    font-size: 22px;
    letter-spacing: 0.02em;
}

.splash-copy-panel h1 {
    margin: 28px 0 0;
    max-width: 650px;
    font-size: clamp(54px, 7.2vw, 94px);
    line-height: 0.91;
    letter-spacing: -0.065em;
    font-weight: 900;
}

.accent-word {
    background: linear-gradient(100deg, #c28cff, #826dff 55%, #68d9ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.splash-subtitle {
    max-width: 610px;
    margin: 24px 0 0;
    color: #a7aebe;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.65;
}

.game-rules-strip {
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
}

.rule-chip {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    color: #9299aa;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.rule-number {
    color: #eef0f8;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.rule-divider {
    width: 1px;
    height: 20px;
    background: var(--line);
}

.startup-status {
    width: min(100%, 590px);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 28px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(12,15,24,0.76);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.startup-status-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(140,108,255,0.1);
    color: #b9adff;
}

.status-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,0.14);
    border-top-color: #b7a9ff;
    border-radius: 50%;
    animation: spin 900ms linear infinite;
}

.status-check,
.status-warning {
    display: none;
    font-weight: 900;
}

.startup-status[data-state="ready"] {
    border-color: rgba(93,224,163,0.20);
    background: rgba(93,224,163,0.045);
}

.startup-status[data-state="ready"] .startup-status-icon {
    background: rgba(93,224,163,0.11);
    color: var(--green);
}

.startup-status[data-state="ready"] .status-spinner { display: none; }
.startup-status[data-state="ready"] .status-check { display: inline; }

.startup-status[data-state="warning"] {
    border-color: rgba(255,213,106,0.22);
    background: rgba(255,213,106,0.05);
}

.startup-status[data-state="warning"] .startup-status-icon {
    background: rgba(255,213,106,0.10);
    color: var(--yellow);
}

.startup-status[data-state="warning"] .status-spinner { display: none; }
.startup-status[data-state="warning"] .status-warning { display: inline; }

.startup-status-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.startup-status-copy strong {
    font-size: 12px;
    font-weight: 800;
}

.startup-status-copy span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.play-button {
    width: min(100%, 590px);
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 0 20px 0 22px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    background: linear-gradient(110deg, #8b6cff 0%, #7058ff 52%, #5f6cff 100%);
    color: white;
    font-size: 15px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 18px 42px rgba(102,76,255,0.22), inset 0 1px 0 rgba(255,255,255,0.20);
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.play-button:not(:disabled):hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 23px 50px rgba(102,76,255,0.31), inset 0 1px 0 rgba(255,255,255,0.24);
}

.play-button:disabled {
    opacity: 0.48;
    cursor: wait;
}

.play-button-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    font-size: 20px;
}

.recognized-player {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 7px 10px;
    border: 1px solid rgba(93,224,163,0.17);
    border-radius: 999px;
    background: rgba(93,224,163,0.055);
    color: #92a19d;
    font-size: 10px;
}

.recognized-player strong {
    color: #c8f5df;
}

.recognized-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px rgba(93,224,163,0.6);
}

.mystery-stage {
    position: relative;
    min-height: 610px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background:
        linear-gradient(155deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008)),
        rgba(11,14,23,0.78);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
    transform: perspective(1100px) rotateY(-3deg) rotateX(1deg);
}

.stage-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px 14px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.16em;
}

.stage-live {
    padding: 5px 8px;
    border: 1px solid rgba(255,117,135,0.22);
    border-radius: 999px;
    background: rgba(255,117,135,0.07);
    color: #ff9eaa;
    letter-spacing: 0.10em;
}

.mystery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 13px;
}

.mystery-card {
    position: relative;
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: linear-gradient(160deg, #171c29, #10141e);
    box-shadow: 0 12px 26px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.035);
    transition: transform 180ms ease, border-color 180ms ease;
}

.mystery-card:hover {
    transform: translateY(-3px) rotate(0deg) !important;
    border-color: rgba(140,108,255,0.24);
}

.card-a { transform: rotate(-2deg); }
.card-b { transform: rotate(1.4deg); }
.card-d { transform: rotate(1.7deg); }
.card-e { transform: rotate(-1.5deg); }
.card-f { transform: rotate(1deg); }

.mystery-card.featured {
    border-color: rgba(140,108,255,0.36);
    background: linear-gradient(160deg, rgba(140,108,255,0.18), #111520 70%);
    transform: translateY(-5px) rotate(-1deg);
    box-shadow: 0 22px 42px rgba(75,55,180,0.20), inset 0 1px 0 rgba(255,255,255,0.05);
}

.featured-pin {
    position: absolute;
    top: -8px;
    right: -7px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #9c7cff, #6853f8);
    color: white;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(83,59,210,0.32);
}

.mystery-photo {
    aspect-ratio: 1 / 0.92;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 42%, rgba(140,108,255,0.15), transparent 32%),
        linear-gradient(145deg, #0f131d, #0b0e16);
    color: rgba(255,255,255,0.72);
    font-size: clamp(34px, 4vw, 60px);
    font-weight: 900;
}

.mystery-lines {
    display: grid;
    gap: 6px;
    margin: 10px 2px 9px;
}

.mystery-lines span {
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
}

.mystery-lines span:last-child {
    width: 58%;
}

.mystery-tag {
    width: fit-content;
    padding: 5px 7px;
    border-radius: 7px;
    background: rgba(255,255,255,0.045);
    color: #757d8f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.clue-note {
    position: absolute;
    z-index: 5;
    width: 150px;
    padding: 13px 14px;
    border-radius: 3px;
    color: #282315;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
    box-shadow: 0 14px 30px rgba(0,0,0,0.28);
}

.clue-note span {
    display: block;
    margin-bottom: 6px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.12em;
}

.note-one {
    left: -20px;
    bottom: 42px;
    background: #ffdc72;
    transform: rotate(-5deg);
}

.note-two {
    right: -22px;
    bottom: 78px;
    background: #b8a3ff;
    transform: rotate(5deg);
}

/* =========================================================
   LOGIN
   ========================================================= */

.login-screen {
    display: grid;
    place-items: center;
    padding: clamp(20px, 4vw, 50px);
}

.login-layout {
    width: min(960px, 100%);
    min-height: 590px;
    display: grid;
    grid-template-columns: minmax(320px, 0.86fr) minmax(390px, 1.14fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: rgba(12,15,24,0.90);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.035);
    backdrop-filter: blur(18px);
}

.login-art-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    overflow: hidden;
    border-right: 1px solid var(--line);
    background:
        linear-gradient(160deg, rgba(140,108,255,0.14), transparent 52%),
        #0c1019;
}

.login-art-panel::before {
    content: "?";
    position: absolute;
    right: -20px;
    top: 32px;
    color: rgba(255,255,255,0.025);
    font-size: 250px;
    line-height: 1;
    font-weight: 950;
}

.login-art-topline {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    color: #aaa2ca;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.tiny-code {
    color: #60687a;
}

.login-mystery-card {
    position: relative;
    z-index: 1;
    width: min(100%, 270px);
    margin: 68px auto 0;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    background: linear-gradient(160deg, #171c2b, #10141f);
    box-shadow: 0 24px 50px rgba(0,0,0,0.26);
    transform: rotate(-2deg);
}

.login-question {
    aspect-ratio: 1/0.78;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background:
        radial-gradient(circle at center, rgba(140,108,255,0.18), transparent 42%),
        #0b0f18;
    color: #c3b8ff;
    font-size: 92px;
    font-weight: 950;
}

.login-dossier-lines {
    display: grid;
    gap: 7px;
    margin: 14px 2px;
}

.login-dossier-lines span {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
}

.login-dossier-lines span:nth-child(2) { width: 78%; }
.login-dossier-lines span:nth-child(3) { width: 52%; }

.login-stamp {
    width: fit-content;
    padding: 6px 8px;
    border: 1px solid rgba(255,117,135,0.30);
    border-radius: 6px;
    color: #ff9daa;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.10em;
    transform: rotate(-1deg);
}

.login-clue-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.login-clue-stack div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    color: #7f8799;
    font-size: 10px;
}

.login-clue-stack span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    color: #aaa2ca;
    font-size: 8px;
    font-weight: 900;
}

.login-form-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px clamp(32px, 5vw, 62px) 42px;
}

.back-button {
    position: absolute;
    top: 24px;
    left: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #727a8c;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.back-button:hover {
    background: rgba(255,255,255,0.04);
    color: #e3e6ee;
}

.login-heading {
    max-width: 470px;
}

.login-eyebrow {
    color: #9e8cff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.login-heading h1 {
    margin: 10px 0 0;
    font-size: clamp(34px, 4vw, 46px);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.login-heading p {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.login-form {
    display: grid;
    gap: 17px;
    margin-top: 30px;
}

.field-group {
    display: grid;
    gap: 8px;
}

.field-label-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.field-label {
    color: #c7ccd8;
    font-size: 11px;
    font-weight: 780;
}

.field-note {
    color: #626a7a;
    font-size: 11px;
}

.input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

.field-icon {
    position: absolute;
    left: 15px;
    color: #6d7484;
    font-size: 15px;
    font-weight: 900;
    pointer-events: none;
}

.input-shell input {
    width: 100%;
    height: 54px;
    padding: 0 15px 0 42px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0a0d15;
    color: var(--text);
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.code-input-shell input {
    padding-right: 72px;
}

.input-shell input::placeholder {
    color: #4f5665;
}

.input-shell input:hover {
    border-color: var(--line-strong);
}

.input-shell input:focus {
    border-color: rgba(140,108,255,0.62);
    background: #0d1019;
    box-shadow: 0 0 0 4px rgba(140,108,255,0.08);
}

.show-code-button {
    position: absolute;
    right: 8px;
    height: 36px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: rgba(255,255,255,0.035);
    color: #8d94a4;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.show-code-button:hover {
    color: #e2e5ee;
    border-color: var(--line-strong);
}

.login-error {
    padding: 12px 13px;
    border: 1px solid rgba(255,117,135,0.25);
    border-radius: 12px;
    background: var(--danger-soft);
    color: #ff9eaa;
    font-size: 11px;
    line-height: 1.45;
}

.login-submit {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 17px 0 19px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 14px;
    background: linear-gradient(110deg, #8b6cff, #7058ff 58%, #646cff);
    color: white;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(90,65,230,0.20), inset 0 1px 0 rgba(255,255,255,0.17);
    transition: transform 140ms ease, filter 140ms ease;
}

.login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

.login-submit:disabled {
    opacity: 0.56;
    cursor: wait;
}

.login-help {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.help-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: #858da0;
    font-size: 9px;
    font-weight: 900;
}

.login-help p {
    margin: 1px 0 0;
    color: #656d7e;
    font-size: 9px;
    line-height: 1.55;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.app-shell {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0,1fr);
    background: #090b12;
}

.sidebar {
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 16px 16px;
    border-right: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(140,108,255,0.045), transparent 20%),
        #0b0e16;
    box-shadow: 16px 0 45px rgba(0,0,0,0.08);
}

.sidebar-brand {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 7px 8px 20px;
}

.sidebar-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(140,108,255,0.20), rgba(140,108,255,0.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    font-size: 22px;
}

.sidebar-brand-copy {
    min-width: 0;
}

.sidebar-brand-copy strong,
.sidebar-brand-copy span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidebar-brand-copy strong {
    font-size: 15px;
    letter-spacing: -0.01em;
}

.sidebar-brand-copy span {
    margin-top: 2px;
    color: #5f6778;
    font-size: 9px;
}

.sidebar-season-pill {
    padding: 4px 6px;
    border: 1px solid rgba(140,108,255,0.16);
    border-radius: 6px;
    background: rgba(140,108,255,0.06);
    color: #9587df;
    font-size: 8px;
    font-weight: 900;
}

.sidebar-section-label {
    margin: 15px 12px 8px;
    color: #464e5e;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.sidebar-nav {
    display: grid;
    gap: 3px;
}

.nav-item {
    position: relative;
    width: 100%;
    min-height: 50px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    align-items: center;
    gap: 3px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #858d9f;
    text-align: left;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 999px;
    background: transparent;
}

.nav-item:hover {
    color: #d8dce7;
    background: rgba(255,255,255,0.03);
    transform: translateX(1px);
}

.nav-item.active {
    border-color: rgba(140,108,255,0.12);
    background: linear-gradient(90deg, rgba(140,108,255,0.12), rgba(140,108,255,0.035));
    color: #f4f1ff;
}

.nav-item.active::before {
    background: linear-gradient(#b48cff, #6e6cff);
    box-shadow: 0 0 12px rgba(140,108,255,0.55);
}

.nav-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #727a8e;
    font-size: 15px;
    font-weight: 900;
}

.nav-item.active .nav-icon {
    background: rgba(140,108,255,0.09);
    color: #ad9dff;
}

.nav-item > span:last-child {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 720;
}

.sidebar-spacer {
    flex: 1 1 auto;
    min-height: 18px;
}

.sidebar-secondary {
    margin-bottom: 12px;
}

.sidebar-player {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 36px;
    gap: 9px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,0.022);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
}

.player-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(140,108,255,0.16);
    border-radius: 11px;
    background: rgba(140,108,255,0.08);
    color: #b0a3ff;
    font-size: 15px;
    font-weight: 900;
    background-size: cover;
    background-position: center;
}

.player-meta {
    min-width: 0;
}

.player-meta strong,
.player-meta span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.player-meta strong {
    font-size: 13px;
}

.player-meta span {
    margin-top: 3px;
    color: #596172;
    font-size: 10px;
}

.logout-button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #626a7b;
    cursor: pointer;
}

.logout-button:hover {
    background: rgba(255,117,135,0.07);
    color: #ff8e9c;
}

.section-content {
    min-width: 0;
    height: 100vh;
    overflow: auto;
    background:
        radial-gradient(circle at 80% -10%, rgba(140,108,255,0.055), transparent 30%),
        #0a0d14;
}

/* =========================================================
   POPUP
   ========================================================= */

.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2,3,7,0.73);
    backdrop-filter: blur(8px);
}

.popup-card {
    position: relative;
    width: min(100%, 580px);
    max-height: min(82vh, 760px);
    overflow: auto;
    padding: 28px;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    background: #111622;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
}

.popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #7b8394;
    font-size: 20px;
    cursor: pointer;
}

.popup-close:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(140,108,255,0.28);
    outline-offset: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
    .splash-layout {
        grid-template-columns: 1fr;
        width: min(680px, 100%);
    }

    .mystery-stage {
        display: none;
    }

    .login-layout {
        grid-template-columns: 1fr;
        width: min(560px, 100%);
    }

    .login-art-panel {
        display: none;
    }
}

@media (max-width: 760px) {
    :root {
        --sidebar-width: 78px;
    }

    .sidebar-brand {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar-brand-copy,
    .sidebar-season-pill,
    .sidebar-section-label,
    .nav-item > span:last-child,
    .player-meta {
        display: none;
    }

    .nav-item {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0;
    }

    .nav-item::before {
        left: 2px;
    }

    .sidebar-player {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 8px;
    }

    .logout-button {
        display: none;
    }
}

@media (max-width: 560px) {
    .splash-screen,
    .login-screen {
        padding: 16px;
    }

    .splash-copy-panel h1 {
        font-size: clamp(48px, 16vw, 70px);
    }

    .game-rules-strip {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .rule-chip {
        display: grid;
        gap: 2px;
        white-space: normal;
    }

    .rule-divider {
        height: 31px;
    }

    .login-layout {
        border-radius: 22px;
    }

    .login-form-panel {
        padding: 66px 22px 28px;
    }

    .back-button {
        top: 18px;
        left: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   ROOMIER DESKTOP UI
   The individual section styles were originally built very compactly.
   These overrides intentionally give GTN more breathing room on laptops
   and desktops without changing mobile behavior.
   ========================================================= */

@media (min-width: 761px) {
    #sectionContent {
        font-size: 15px;
        line-height: 1.5;
    }

    #sectionContent > * {
        width: 100% !important;
        max-width: none !important;
    }

    #sectionContent :is(
        .page-shell,
        .section-shell,
        .section-page,
        .page-content,
        .section-inner,
        .content-shell,
        .content-wrap,
        .content-container,
        .main-content,
        .dashboard,
        .lobby-shell,
        .play-shell,
        .scoreboard-shell,
        .players-shell,
        .statistics-shell,
        .nerds-shell,
        .chat-shell,
        .settings-shell,
        .account-shell,
        .rules-shell
    ) {
        width: 100% !important;
        max-width: 1480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #sectionContent :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
        textarea,
        select
    ) {
        min-height: 48px;
        font-size: 14px !important;
        line-height: 1.4;
    }

    #sectionContent textarea {
        min-height: 118px;
    }

    #sectionContent :is(button, .button, .btn) {
        font-size: max(13px, 0.82rem);
    }

    #sectionContent :is(
        .card,
        .panel,
        .section-card,
        .content-card,
        .stat-card,
        .player-card,
        .nerd-card,
        .setting-card,
        .settings-panel,
        .account-card,
        .lobby-card,
        .game-card
    ) {
        font-size: 14px;
    }

    #sectionContent h1 {
        font-size: clamp(30px, 3vw, 46px);
    }

    #sectionContent h2 {
        font-size: clamp(21px, 2vw, 30px);
    }

    #sectionContent p,
    #sectionContent label,
    #sectionContent td,
    #sectionContent th {
        font-size: max(13px, 0.86rem);
    }

    /* Common narrow form wrappers should no longer occupy a tiny sliver. */
    #sectionContent :is(
        .form-card,
        .form-panel,
        .settings-form,
        .account-form,
        .question-form,
        .guess-form,
        .chat-input-wrap,
        .input-panel
    ) {
        width: min(100%, 860px) !important;
        max-width: 860px !important;
    }
}


/* =========================================================
   GTN GAME IDENTITY PASS
   Brings the mystery / purple-cyan startup energy into the app shell.
   Theme-specific colors still come from settings.js.
   ========================================================= */

.app-shell::before {
    content: "";
    position: fixed;
    inset: 0 0 0 var(--sidebar-width);
    z-index: 0;
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(rgba(140,108,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(104,217,255,.02) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 72% 28%, black, transparent 78%);
}

.sidebar {
    position: relative;
    isolation: isolate;
}

.sidebar::before {
    content: "?";
    position: absolute;
    right: -12px;
    top: 34%;
    z-index: -1;
    pointer-events: none;
    font-size: 150px;
    line-height: 1;
    font-weight: 950;
    color: rgba(140,108,255,.035);
    transform: rotate(10deg);
}

.sidebar-brand {
    border-bottom-color: color-mix(in srgb, var(--gtn-theme-accent, #8c6cff) 20%, var(--line)) !important;
}

.sidebar-logo {
    background: linear-gradient(145deg, rgba(140,108,255,.32), rgba(104,217,255,.09)), var(--panel) !important;
    border-color: rgba(140,108,255,.34) !important;
    box-shadow: 0 10px 30px rgba(111,88,255,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.nav-item {
    min-height: 50px;
}

.nav-item:hover {
    transform: translateX(2px);
}

.nav-item.active::before {
    width: 4px;
    box-shadow: 0 0 18px var(--gtn-theme-accent, #8c6cff);
}

.section-content {
    isolation: isolate;
}

@media (max-width: 760px) {
    .app-shell::before {
        inset-left: 78px;
    }

    .sidebar::before {
        display: none;
    }
}

/* =========================================================
   LIGHT MODE — LEGACY SECTION SURFACE NORMALIZATION
   Some older section styles use hard-coded near-black surfaces.
   These overrides keep Chatroom, Scoreboard, Hall of Nerds,
   and Statistics consistent with the selected light palette.
   ========================================================= */
body[data-gtn-theme="light"] #sectionContent {
    color: var(--gtn-theme-text) !important;
}

body[data-gtn-theme="light"] #sectionContent :is(
    .chatroom,
    .chatroom-shell,
    .chat-layout,
    .chat-panel,
    .chat-sidebar,
    .conversation-panel,
    .conversation-list,
    .message-panel,
    .messages-panel,
    .message-list,
    .chat-input-panel,
    .chat-input-wrap,
    .scoreboard,
    .scoreboard-shell,
    .scoreboard-panel,
    .scoreboard-card,
    .leaderboard,
    .leaderboard-panel,
    .leaderboard-card,
    .score-table,
    .score-list,
    .nerds-page,
    .nerds-shell,
    .nerds-panel,
    .nerd-panel,
    .nerd-card,
    .nerd-detail,
    .nerd-details,
    .nerd-search,
    .nerd-search-panel,
    .nerd-results,
    .nerd-result,
    .statistics-page,
    .statistics-shell,
    .statistics-panel,
    .statistics-card,
    .stat-panel,
    .stat-card,
    .stats-card,
    .comparison-panel,
    .comparison-card,
    .filter-panel,
    .filter-card
) {
    background: var(--gtn-theme-card) !important;
    color: var(--gtn-theme-text) !important;
    border-color: var(--gtn-theme-border) !important;
}

/* Catch custom legacy class names without touching spans/icons/badges. */
body[data-gtn-theme="light"] #sectionContent :is(div, section, article, aside, form, li)[class*="chat-"]:not([class*="bubble"]):not([class*="badge"]):not([class*="avatar"]),
body[data-gtn-theme="light"] #sectionContent :is(div, section, article, aside, form, li)[class*="score-"]:not([class*="badge"]):not([class*="rank"]):not([class*="accent"]),
body[data-gtn-theme="light"] #sectionContent :is(div, section, article, aside, form, li)[class*="leaderboard-"]:not([class*="badge"]):not([class*="rank"]),
body[data-gtn-theme="light"] #sectionContent :is(div, section, article, aside, form, li)[class*="nerd-"]:not([class*="badge"]):not([class*="avatar"]):not([class*="icon"]):not([class*="tag"]),
body[data-gtn-theme="light"] #sectionContent :is(div, section, article, aside, form, li)[class*="stat-"]:not([class*="badge"]):not([class*="icon"]):not([class*="bar"]),
body[data-gtn-theme="light"] #sectionContent :is(div, section, article, aside, form, li)[class*="statistics-"]:not([class*="badge"]):not([class*="icon"]):not([class*="bar"]),
body[data-gtn-theme="light"] #sectionContent :is(div, section, article, aside, form, li)[class*="comparison-"]:not([class*="badge"]):not([class*="bar"]) {
    background-color: var(--gtn-theme-card) !important;
    color: var(--gtn-theme-text) !important;
    border-color: var(--gtn-theme-border) !important;
}

/* Secondary rows / list items get a softer layer instead of black. */
body[data-gtn-theme="light"] #sectionContent :is(
    .chat-item,
    .conversation-item,
    .score-row,
    .leaderboard-row,
    .nerd-row,
    .nerd-list-item,
    .stat-row,
    .statistics-row,
    .comparison-row
) {
    background: color-mix(in srgb, var(--gtn-theme-card) 76%, var(--gtn-theme-bg)) !important;
    color: var(--gtn-theme-text) !important;
    border-color: var(--gtn-theme-border) !important;
}

/* Inputs/search boxes in the affected sections. */
body[data-gtn-theme="light"] #sectionContent :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select
) {
    background: var(--gtn-theme-input) !important;
    color: var(--gtn-theme-text) !important;
    border-color: var(--gtn-theme-border) !important;
    caret-color: var(--gtn-theme-text) !important;
}

body[data-gtn-theme="light"] #sectionContent :is(input, textarea)::placeholder {
    color: var(--gtn-theme-muted) !important;
    opacity: .78;
}

/* Text that older section styles hard-code as white/gray. */
body[data-gtn-theme="light"] #sectionContent :is(
    h1, h2, h3, h4, h5, h6,
    p, label, strong, b,
    td, th,
    .title, .heading, .name, .value
) {
    color: var(--gtn-theme-text) !important;
}

body[data-gtn-theme="light"] #sectionContent :is(
    small, .subtitle, .description, .muted, .meta, .hint, .empty-state
) {
    color: var(--gtn-theme-muted) !important;
}

/* =========================================================
   LIGHT MODE — FINAL LEGACY CLEANUP
   app.js marks stubborn hard-coded dark surfaces at runtime.
   This catches Chatroom, Statistics, Hall of Nerds, Players,
   and Scoreboard without bleaching intentional badges/buttons.
   ========================================================= */
body[data-gtn-theme="light"] #sectionContent .gtn-light-surface-fix {
    background: var(--gtn-theme-card, #ffffff) !important;
    background-image: none !important;
    color: var(--gtn-theme-text, #172033) !important;
    border-color: var(--gtn-theme-border, rgba(23,32,51,.12)) !important;
    box-shadow: none !important;
}

body[data-gtn-theme="light"] #sectionContent .gtn-light-surface-fix:is(input, textarea, select),
body[data-gtn-theme="light"] #sectionContent .gtn-light-surface-fix :is(input, textarea, select) {
    background: var(--gtn-theme-input, #ffffff) !important;
    color: var(--gtn-theme-text, #172033) !important;
    border-color: var(--gtn-theme-border, rgba(23,32,51,.14)) !important;
}

body[data-gtn-theme="light"] #sectionContent .gtn-light-text-fix {
    color: var(--gtn-theme-text, #172033) !important;
}

/* The active section marker lets us fix known large surfaces directly too. */
body[data-gtn-theme="light"] #sectionContent[data-active-section="chatroom"] {
    background: var(--gtn-theme-bg, #eef4fb) !important;
}

body[data-gtn-theme="light"] #sectionContent[data-active-section="chatroom"] :is(
    [class*="chat-main"],
    [class*="chat-content"],
    [class*="chat-window"],
    [class*="conversation"],
    [class*="messages"],
    [class*="composer"]
) {
    border-color: var(--gtn-theme-border, rgba(23,32,51,.12)) !important;
}

/* Keep message bubbles distinct after the big chat surface becomes light. */
body[data-gtn-theme="light"] #sectionContent[data-active-section="chatroom"] :is(
    [class*="bubble"],
    [class*="message-bubble"],
    [class*="message-content"]
) {
    border-color: color-mix(in srgb, var(--gtn-theme-accent, #8c6cff) 18%, var(--gtn-theme-border)) !important;
}

/* Players top count + Hall of Nerds discovered count. */
body[data-gtn-theme="light"] #sectionContent[data-active-section="players"] :is(
    [class*="count"],
    [class*="total"],
    [class*="summary"]
),
body[data-gtn-theme="light"] #sectionContent[data-active-section="nerds"] :is(
    [class*="discover"],
    [class*="count"],
    [class*="total"]
) {
    background-color: var(--gtn-theme-card, #fff) !important;
    color: var(--gtn-theme-text, #172033) !important;
    border-color: var(--gtn-theme-border, rgba(23,32,51,.12)) !important;
}

/* Hall of Nerds search chrome + the profile's question/answer blocks. */
body[data-gtn-theme="light"] #sectionContent[data-active-section="nerds"] :is(
    [class*="search"],
    [class*="question"],
    [class*="answer"]
):not(button) {
    background-color: var(--gtn-theme-input, #fff) !important;
    color: var(--gtn-theme-text, #172033) !important;
    border-color: var(--gtn-theme-border, rgba(23,32,51,.12)) !important;
}

/* Statistics top compare/profile bars. */
body[data-gtn-theme="light"] #sectionContent[data-active-section="statistics"] :is(
    [class*="compare"],
    [class*="comparison"],
    [class*="summary"],
    [class*="profile"],
    [class*="hero"]
):not(button) {
    background-color: var(--gtn-theme-card, #fff) !important;
    color: var(--gtn-theme-text, #172033) !important;
    border-color: var(--gtn-theme-border, rgba(23,32,51,.12)) !important;
}