/* Selected night-club visual: Django only, historical Laravel styles preserved. */
@font-face {
    font-family: Lora;
    src: url("/assets/fonts/Lora.ttf") format("truetype");
    font-weight: 400 700;
    font-display: swap;
}
:root[data-product="ms"] {
    --bg: #f6f1e9;
    --surface: #ede7f1;
    --raised: #fffbf5;
    --ink: #26233e;
    --text: var(--ink);
    --muted: #655e76;
    --line: #cfc5da;
    --accent: #544bc7;
    --accent-ink: #fff;
    --tint: #e9e4fa;
    --focus: #7465db;
    font-family: Lora, Georgia, serif;
}
:root[data-product="ms"][data-theme="dark"] {
    --bg: #0e1026;
    --surface: #191b39;
    --raised: #14172e;
    --ink: #f9f0e5;
    --text: var(--ink);
    --muted: #c2bdd4;
    --line: #34365e;
    --accent: #606fff;
    --accent-ink: #fff;
    --tint: #26264c;
    --focus: #b5abff;
}
.night-page { background: var(--bg); font-size: 18px; }
.night-page .site-header {
    max-width: none;
    height: 76px;
    padding: 0 clamp(20px, 3.8vw, 56px);
    background: var(--bg);
    gap: 20px;
}
.night-page .site-header .brand {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.7px;
    white-space: nowrap;
}
.brain-mark { width: 48px; height: 52px; display: grid; place-content: center; flex-shrink: 0; }
.night-page .brain-mark img { width: 76px; height: 76px; max-width: none; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.night-page .site-header .desktop-navigation { display: none; }
@media (min-width: 1024px) {
    .night-page .site-header .desktop-navigation { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); font-size: 17px; }
    .desktop-navigation a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); white-space: nowrap; }
    .desktop-navigation a:hover, .desktop-navigation a:focus-visible { color: var(--accent); }
    .desktop-navigation .ph { font-size: 21px; }
    .desktop-navigation small { display: block; color: var(--muted); font: 10px/1.3 Geist, sans-serif; margin-top: 2px; }
    .night-page .site-header .site-menu { display: none; }
}
.site-menu { position: relative; z-index: 20; margin: 0; padding: 0; border: 0; background: transparent; }
.site-menu summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 18px; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary .ph { font-size: 24px; }
.site-menu[open] summary { color: var(--accent); }
.night-page .site-header .site-menu nav { position: absolute; top: calc(100% + 12px); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: min(280px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); box-shadow: 0 12px 32px #0004; font-size: 16px; }
.night-page .site-header .site-menu:not([open]) nav { display: none; }
.night-page .site-header .site-menu nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.site-menu nav a:hover, .site-menu nav a:focus-visible { background: var(--surface); }
.site-menu nav .ph { font-size: 22px; }
.site-menu nav small { display: block; color: var(--muted); font: 11px/1.5 Geist, sans-serif; margin-top: 2px; }
.night-page #theme-toggle {
    border: 1px solid var(--line);
    border-radius: 30px;
    gap: 9px;
    min-height: 38px;
    padding: 3px 7px;
}
#theme-toggle .ph { font-size: 22px; padding: 5px; border-radius: 50%; }
[data-theme="dark"] #theme-toggle .ph-moon,
[data-theme="light"] #theme-toggle .ph-sun { background: var(--accent); color: #fff; }
.night-page main { max-width: none; padding: 0; min-height: calc(100svh - 76px); }
.night-stage {
    position: relative;
    max-width: 1487px;
    min-height: 982px;
    margin: auto;
    padding: 58px 0 50px clamp(24px, 8.6vw, 128px);
    overflow: clip;
    isolation: isolate;
}
.night-backdrop { position: absolute; top: -76px; left: 0; width: 100%; pointer-events: none; z-index: 0; }
.night-backdrop img { width: 100%; height: auto; display: block; }
.night-backdrop .day-full { display: none; }
[data-theme="light"] .night-backdrop .night-full { display: none; }
[data-theme="light"] .night-backdrop .day-full { display: block; }
.night-play { position: relative; z-index: 1; width: 46.7vw; max-width: 636px; }
.night-overview h1 {
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1.7px;
    white-space: nowrap;
}
.night-subtitle { font-size: 22px; line-height: 1.55; margin: 10px 0 14px; }
.night-turns { display: flex; justify-content: space-between; align-items: center; color: var(--muted); min-height: 25px; font-size: 15px; }
.night-turns .turn-count { font: inherit; color: var(--ink); }
.night-turns #remaining-turns { font-size: 13px; }
.night-game .ms-progress,
.night-game .ms-progress > span,
.night-game .ms-progress progress { height: 15px; }
.night-game .ms-progress { margin: 6px 0 8px; border-radius: 20px; background: var(--line); }
.night-game .ms-progress progress::-webkit-progress-bar { background: var(--tint); }
.night-game .ms-progress progress::-webkit-progress-value { border-radius: 20px; }
.night-deadline { color: var(--muted); display: flex; gap: 8px; justify-content: flex-end; align-items: center; font-size: 17px; }
.night-composer { margin-top: 4px; }
.night-composer .segmented {
    display: flex; width: 360px; max-width: 100%; padding: 0;
    border: 1px solid var(--line); border-radius: 30px; background: transparent;
    margin: 0 0 22px;
}
.night-composer .segmented button { flex: 1; min-height: 46px; border-radius: 30px; font-size: 17px; background: transparent; color: var(--ink); }
.night-composer .segmented button.active { background: #3e49a8; color: #fff; font-weight: 700; }
[data-theme="light"] .night-composer .segmented button.active { background: var(--accent); }
.night-composer .field { display: block; margin-bottom: 0; }
.night-composer .field > span { display: block; margin-bottom: 9px; color: var(--ink); font-size: 20px; font-weight: 700; }
.night-composer textarea, .night-composer input,
.night-page .hero input {
    width: 100%; background: var(--raised); border: 2px solid #414577;
    color: var(--ink); padding: 17px 20px; font-size: 20px; line-height: 1.6; border-radius: 16px;
}
.night-composer textarea { min-height: 104px; height: 104px; resize: vertical; }
.night-composer ::placeholder { color: var(--muted); opacity: .85; }
.night-input-meta { display: flex; justify-content: flex-end; font: 11px/1.4 Geist, sans-serif; color: var(--muted); height: 0; position: relative; top: -24px; right: 10px; opacity: 0; }
.night-composer:focus-within .night-input-meta { opacity: 1; }
.night-page .btn { background: var(--accent); color: var(--accent-ink); font-size: 20px; min-height: 54px; border-radius: 22px; font-weight: 600; transition: transform .15s; }
.night-composer #question-submit { margin-top: 14px; }
.night-page .btn.ghost, .night-page .btn.secondary { background: transparent; color: var(--ink); }
.night-composer .btn .ph { font-size: 25px; }
.night-composer #guess-form .btn { margin-top: 20px; }
.night-keyboard { text-align: center; color: var(--muted); font-size: 16px; margin-top: 12px; }
.night-timeline { margin-top: 36px; border-top: 1px solid var(--line); }
.night-timeline .timeline-heading { border: none; padding: 19px 0 6px; }
.night-timeline .timeline-heading h2 { font-size: 18px; font-weight: 700; letter-spacing: 0; }
.night-timeline .timeline-heading > span { font-size: 12px; }
.night-timeline .history { margin: 0; }
.night-timeline .history li { grid-template-columns: 34px minmax(0,1fr) auto; gap: 18px; padding: 12px 0; font-size: 18px; border-bottom: 1px solid var(--line); align-items: center; }
.night-timeline .history li:last-child { border-bottom: 1px solid var(--line); }
.night-timeline .history-text { overflow-wrap: anywhere; line-height: 1.45; }
.night-timeline .history-number { width: 32px; height: 32px; display: grid; place-content: center; background: var(--surface); border-radius: 50%; color: var(--ink); }
.night-timeline .answer { min-width: 86px; padding: 6px 13px; border-radius: 16px; text-align: center; font-weight: 600; font-size: 16px; background: var(--surface); }
.night-timeline .answer.yes { color: #69e6ab; background: #18373b; }
.night-timeline .answer.no { color: #d0ccdf; background: #25283c; }
.night-timeline .answer.partial { color: #ffbd79; background: #3b2b29; }
[data-theme="light"] .night-timeline .answer.yes { color: #176a46; background: #ddf2e4; }
[data-theme="light"] .night-timeline .answer.no { color: #484358; background: #e8e3ed; }
[data-theme="light"] .night-timeline .answer.partial { color: #81501b; background: #f6e7c9; }
.night-timeline .empty { text-align: left; padding: 24px 0; }
.night-timeline .empty p { color: var(--ink); }
.night-timeline .empty small { display: block; margin-top: 6px; font-size: 14px; }
.night-registration { display: flex; gap: 10px; align-items: center; color: #939eff; font-size: 17px; min-height: 52px; font-weight: 600; }
.night-registration > .ph:first-child { font-size: 28px; }
.night-registration span { text-decoration: underline; text-underline-offset: 5px; }
[data-theme="light"] .night-registration { color: var(--accent); }
.night-game-footer { margin-top: 10px; color: var(--muted); font-size: 12px; }
.night-game-footer .game-status { margin-bottom: 4px; color: var(--muted); }
.night-game-footer .game-after { margin: 10px 0 0; }
.night-game-footer .game-after .btn { min-height: 44px; font-size: 13px; padding: 8px; }
.night-game-footer .text-link { color: var(--muted); font-size: 13px; }
.weekly-coming { display: flex; gap: 7px; align-items: center; margin-top: 12px; }
.weekly-coming .ph { font-size: 18px; }
#bonus-link { margin: 16px 0; white-space: normal; text-align: center; }
#quota-message, .night-play > #error { margin: 20px 0; }
.night-illustration { display: none; position: absolute; top: 0; right: 0; width: 49%; z-index: 0; pointer-events: none; }
.night-illustration img { width: 100%; height: auto; display: block; }
.night-illustration .day-room { display: none; }
[data-theme="light"] .night-illustration .night-room { display: none; }
[data-theme="light"] .night-illustration .day-room { display: block; }
.night-page .hero { display: block; margin: 0 auto; padding: 60px 28px 80px; max-width: 760px; }
.night-page .hero h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.2; letter-spacing: -1px; }
.night-page .hero p { font-size: 17px; }
.night-page .hero .hint { color: var(--muted); font-size: 13px; }
.night-page .hero h2 { margin-top: 30px; }
.night-page .hero details { margin-top: 28px; }
.night-page .hero summary { min-height: 44px; cursor: pointer; }
.night-page .hero form { margin-top: 24px; }
.night-page .hero .btn { margin-top: 16px; }
.night-page .hero .eyebrow { color: var(--muted); font: 12px/1.4 Geist, sans-serif; letter-spacing: 2px; }
.night-page .game-feedback { font-family: Geist, sans-serif; }
.night-page .answer-context { font-family: Geist, sans-serif; font-size: 12px; }
.club-eyebrow { color: var(--muted); font: 11px/1.6 Geist, sans-serif; letter-spacing: 1.6px; margin: 0 0 12px; }
.night-intro .club-eyebrow { color: #d8a69c; }
[data-theme="light"] .night-intro .club-eyebrow { color: #814652; }
.club-house { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 56px; max-width: 1180px; margin: auto; padding: 48px 28px 72px; }
.club-content { min-width: 0; }
.club-content h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.15; letter-spacing: -1px; }
.club-lead { font-size: 18px; line-height: 1.65; color: var(--muted); margin: 18px 0 28px; }
.club-scene { align-self: start; position: sticky; top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 120px 120px 28px 28px; background: var(--bg); }
.club-scene img { width: 100%; height: auto; display: block; }
.club-day { display: none !important; }
[data-theme="light"] .club-night { display: none; }
[data-theme="light"] .club-day { display: block !important; }
.club-scene-caption { margin: 0; padding: 18px 12px; text-align: center; font-size: 15px; color: var(--muted); }

.club-character { animation: club-light 8s ease-in-out infinite; }
@keyframes club-light { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.045); } }
.club-house:has(input:focus) .club-character, .night-game:has(textarea:focus, input:focus) .club-character { animation-play-state: paused; }
.night-game[data-kind="weekly"] .night-illustration { display: block; width: 49%; right: 0; top: 0; mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, #000 88%, transparent); mask-composite: intersect; }
@media (prefers-reduced-motion: reduce) { .club-character { animation: none; } }
.club-card { padding: 26px; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; margin: 0 0 24px; }
.club-content h2 { font-size: 24px; line-height: 1.35; margin: 0 0 14px; }
.club-content p { line-height: 1.65; }
.club-card p { font-size: 16px; margin: 12px 0; }
.club-card form { margin-top: 20px; }
.club-card .field { display: block; margin: 16px 0; font-size: 15px; }
.club-card input { width: 100%; padding: 14px 16px; min-height: 52px; font-size: 17px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.club-content .btn { font-size: 16px; padding: 12px 18px; white-space: normal; text-align: center; margin: 10px 0 0; }
.club-card .btn { width: 100%; }
.club-content .hint, .club-privacy { font: 12px/1.65 Geist, sans-serif; color: var(--muted); }
.club-content #error:empty { display: none; }
.club-vip { border-color: var(--accent); }
.club-perks { list-style: none; padding: 0; margin: 24px 0; }
.club-perks li { display: flex; gap: 14px; margin: 18px 0; font-size: 15px; line-height: 1.6; }
.club-perks .ph { color: var(--accent); font-size: 24px; margin-top: 4px; }
.club-perks strong { display: block; color: var(--ink); margin-bottom: 4px; font-size: 17px; }
.club-price { font-size: 32px !important; font-weight: 600; }
.club-price span { display: block; font: 12px/1.6 Geist, sans-serif; color: var(--muted); }
.club-beta { padding: 12px 14px; background: var(--surface); border-radius: 12px; font: 12px/1.7 Geist, sans-serif; }
.club-details { border: 1px solid var(--line); border-radius: 16px; background: var(--raised); padding: 14px 18px; margin: 16px 0; }
.club-details summary { cursor: pointer; min-height: 44px; align-content: center; font-size: 16px; line-height: 1.5; }
.club-details p { font-size: 15px; margin: 16px 0 8px; }
.club-steps { list-style: none; padding: 0; margin: 28px 0; }
.club-steps li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.club-steps > li > span { color: var(--accent); font: 14px/1.8 Geist, sans-serif; padding-top: 2px; }
.club-steps h2 { margin-bottom: 8px; font-size: 21px; }
.club-steps p { margin: 0; font-size: 16px; color: var(--muted); }
.night-registration { flex-wrap: wrap; }
.night-game-footer .weekly-coming { line-height: 1.7; }
@media (min-width: 1488px) { .night-play { width: 636px; } }
@media (max-width: 1100px) {
    .night-stage { padding: 42px 0 40px 40px; min-height: 870px; }
    .night-backdrop { top: 0; }
    .night-play { width: 54%; }
    .night-overview h1 { white-space: normal; font-size: 43px; }
    .night-subtitle { font-size: 18px; }
    .night-illustration { width: 45%; top: 70px; }
    .night-page .site-header .brand { font-size: 25px; }
}
@media (max-width: 760px) {
    .night-page .site-header { padding: 0 20px; height: 70px; }
    .night-page .site-header .brand { font-size: 21px; letter-spacing: -.5px; gap: 8px; }
    .header-actions { gap: 12px; }
    .site-menu summary span { display: none; }
    .site-menu summary { min-width: 44px; justify-content: center; }
    .night-page .site-header .site-menu nav { position: fixed; top: 78px; left: 16px; right: 16px; width: auto; }
    .brain-mark { width: 32px; height: 38px; }
    .night-page .brain-mark img { width: 55px; height: 55px; }
    .night-page #theme-toggle { gap: 2px; padding: 2px 4px; }
    #theme-toggle .ph { font-size: 19px; padding: 4px; }
    .night-stage { padding: 30px 24px; min-height: calc(100svh - 70px); }
    .night-backdrop { display: none; }
    .night-play { width: 100%; max-width: none; }
    .night-intro { min-height: calc(15px + min(99.5vw, 484px)); }
    .night-overview h1 { font-size: clamp(28px, 7.7vw, 36px); max-width: 64%; line-height: 1.17; letter-spacing: -1px; overflow-wrap: anywhere; }
    .night-subtitle { max-width: 36%; margin-top: 18px; font-size: 16px; }
    .night-intro .club-eyebrow { max-width: 52%; font-size: 9px; letter-spacing: 1px; }
    .club-house { display: block; padding: 30px 24px 48px; }
    .club-scene { position: static; width: 150px; float: right; margin: 0 -10px 16px 16px; border-radius: 70px 70px 18px 18px; }
    .club-scene-caption { display: none; }
    .night-game[data-kind="weekly"] .night-illustration { width: min(72vw, 350px); right: 0; top: 55px; }
    .night-game[data-kind="weekly"] .night-overview h1 { max-width: 100%; }
    .club-content h1 { font-size: 32px; }
    .club-lead { font-size: 16px; }
    .club-card, .club-steps { clear: both; }
    .club-card { padding: 20px; }
    .club-content h2 { font-size: 22px; }
    .night-turns { margin-top: 12px; }
    .night-game .ms-progress, .night-game .ms-progress > span, .night-game .ms-progress progress { height: 10px; }
    .night-deadline { font-size: 14px; }
    .night-composer { margin-top: 18px; }
    .night-composer .segmented { width: 100%; margin-bottom: 18px; }
    .night-composer .field > span { font-size: 16px; }
    .night-composer textarea, .night-composer input { font-size: 17px; padding: 14px; }
    .night-composer textarea { height: 100px; min-height: 100px; }
    .night-keyboard { font-size: 12px; }
    .night-timeline { margin-top: 28px; }
    .night-timeline .history li { font-size: 15px; gap: 10px; grid-template-columns: 28px minmax(0,1fr) auto; }
    .night-timeline .history-number { width: 28px; height: 28px; }
    .night-timeline .answer { font-size: 13px; min-width: 65px; padding: 5px 9px; }
    .night-timeline .timeline-heading h2 { font-size: 15px; }
    .night-registration { font-size: 15px; }
    .night-illustration { display: block; width: min(72vw, 350px); height: auto; right: 0; top: 55px; mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, #000 88%, transparent); mask-composite: intersect; }
    .night-illustration img { width: 100%; height: auto; position: static; }
    .night-page .hero { padding: 36px 24px; }
    .night-page .hero p { font-size: 16px; }
}
@media (max-width: 370px) {
    .night-page .site-header { padding: 0 12px; gap: 8px; }
    .night-page .site-header .brand { font-size: 18px; }
    .night-stage { padding: 28px 16px; }
    .night-overview h1 { font-size: 28px; }
    .night-subtitle { font-size: 15px; }
    .club-house { padding: 28px 16px 48px; }
    .club-scene { width: 130px; margin-left: 12px; }
    .club-content h1 { font-size: 28px; }
    .night-timeline .history li { gap: 7px; }
}
.thinker-reflection { margin-top: 24px; padding: 20px 22px; border: 1px solid #665296; border-left: 3px solid #ffa787; border-radius: 16px; background: linear-gradient(135deg, #251c3bee, #12142ddd); }
.thinker-reflection .club-eyebrow { color: #ffa787; font-size: 11px; }
.thinker-reflection blockquote { margin: 12px 0 0; color: #f7eddf; font-size: clamp(17px, 2vw, 22px); line-height: 1.65; font-style: italic; }
/* Club membership plans remain usable with keyboard and at narrow widths. */
.billing-plans { border:0; padding:0; margin:1.5rem 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.billing-plans legend { margin-bottom:12px; font-size:1.15rem; }
.billing-plans label { display:flex; gap:12px; align-items:center; padding:18px; border:1px solid #514572; border-radius:18px; cursor:pointer; background:#17112b; }
.billing-plans label:has(input:checked) { border-color:#9284ff; background:#29204a; box-shadow:0 0 20px #7565ef20; }
.billing-plans input { accent-color:#9284ff; width:20px; height:20px; flex-shrink:0; }
.billing-plans input:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.billing-plans strong,.billing-plans small { display:block; }
.billing-plans small { color:#c5bdd8; margin-top:6px; }
@media(max-width:480px) { .billing-plans { grid-template-columns:1fr; } }

.auth-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.auth-choices section { padding:20px; border:1px solid #514572; border-radius:18px; background:#17112b; }
.auth-choices section > i { color:#a696ff; font-size:32px; }
.auth-choices h3 { margin:12px 0; font-size:1.5rem; }
.auth-choices .btn { margin-top:20px; }
.auth-switch { margin-top:24px; padding-top:20px; border-top:1px solid #514572; }
.auth-switch a,.auth-back { color:#b8acff; text-decoration:underline; text-underline-offset:4px; }
.auth-content .club-card { max-width:600px; }
@media(max-width:640px) { .auth-choices { grid-template-columns:1fr; } }

.google-login { background:#fff !important; color:#202124 !important; border:1px solid #747775; gap:12px; }
.google-login span { font-family:Arial,sans-serif; font-weight:700; color:#4285f4; }
.auth-divider { text-align:center; color:var(--muted); margin:20px 0; }
.auth-switch .btn { display:flex; margin-top:12px; }

/* One responsive daily picture owns both desktop and mobile composition. */
@media (max-width:760px) {
    .night-game:not([data-kind="weekly"]) .night-backdrop {
        display:block; left:auto; right:0; top:55px; width:min(72vw,350px);
        mask-image:linear-gradient(to right,transparent,#000 14%),linear-gradient(to bottom,#000 88%,transparent);
        mask-composite:intersect;
    }
}