/* =====================================================================
   FOCUS / ONE · LonyEK-IT GmbH — Digital Experience Lab
   Design tokens
   =====================================================================

   Farbwelt (per Brief fest vorgegeben):
     Anthrazit/Schwarz  – Bühne
     Elektrisches Lime  – primärer Akzent / Fokus
     Weiß               – Kontrast, Lesbarkeit
     Cyan                – normal / neutral
     Pink/Violett        – emotionale Abschnitte (tone: dream)
     Gold/Orange         – warme Abschnitte (tone: warm)

   Typografie:
     Space Grotesk  – Display (Reader-Wort, Headlines) – geometrisch,
                       leicht technisch, aber warm genug fürs Finale
     Inter          – Fließtext / UI
     IBM Plex Mono  – Eyebrows, Branding-Zeile, Zähler — "Laborprotokoll"
   ===================================================================== */

:root {
    --bg-void:   #07080a;
    --bg-raised: #101319;
    --bg-card:   #14171e;

    --lime:   #c8ff4d;
    --cyan:   #52e7ff;
    --pink:   #ff5fc0;
    --violet: #9c6bff;
    --gold:   #ffb64a;

    --white:    #f6f8f7;
    --ink-dim:  rgba(246, 248, 247, 0.58);
    --ink-faint:rgba(246, 248, 247, 0.32);
    --line:     rgba(246, 248, 247, 0.10);

    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg-void);
    color: var(--white);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

body {
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

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

/* =====================================================================
   Brandmark (Lobby)
   ===================================================================== */

.brandmark {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brandmark-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.brandmark-fallback { display: block; }

.brandmark-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brandmark-name {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: var(--white);
}

.brandmark-sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
}

/* =====================================================================
   LOBBY — digitaler Empfang
   ===================================================================== */

.lobby {
    height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        calc(20px + var(--safe-t))
        calc(20px + var(--safe-r))
        calc(20px + var(--safe-b))
        calc(20px + var(--safe-l));
    position: relative;
    background:
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(200, 255, 77, 0.06), transparent 60%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(82, 231, 255, 0.05), transparent 65%),
        var(--bg-void);
}

.lobby-card {
    width: 100%;
    max-width: 400px;
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4dvh, 34px);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-raised), var(--bg-card));
    border-radius: 18px;
    padding: clamp(20px, 4dvh, 32px) clamp(20px, 5vw, 28px);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
}

.lobby-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lobby-eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
}

.lobby-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 8vw, 40px);
    letter-spacing: 0.01em;
}

.lobby-roster {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-dim);
}

.lobby-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.lobby-label {
    font-size: 12.5px;
    color: var(--ink-dim);
    letter-spacing: 0.02em;
}

.lobby-input {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 14px;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--white);
    outline: none;
    transition: border-color .18s ease, background .18s ease;
}

.lobby-input:focus {
    border-color: var(--lime);
    background: rgba(200,255,77,0.04);
}

.lobby-input:disabled { opacity: 0.4; }

.lobby-message {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
}

.lobby-message--error { color: var(--pink); }

.lobby-button {
    margin-top: 4px;
    border: none;
    border-radius: 10px;
    padding: 15px 18px;
    background: var(--lime);
    color: #0a0d05;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}

.lobby-button:hover { filter: brightness(1.08); }
.lobby-button:active { transform: scale(0.98); }
.lobby-button:disabled {
    background: rgba(255,255,255,0.08);
    color: var(--ink-faint);
    cursor: not-allowed;
}

.lobby-footnote {
    margin: 0;
    font-size: 11.5px;
    color: var(--ink-faint);
}

/* Compact mode for very low viewports (landscape phones, small Android) */
@media (max-height: 620px) {
    .lobby-card { gap: 14px; padding: 16px 20px; }
    .lobby-title { font-size: clamp(24px, 7vw, 30px); }
    .lobby-roster { margin-bottom: 8px; }
    .brandmark-logo, .brandmark-fallback svg { width: 30px; height: 30px; }
}

/* =====================================================================
   KALENDER-TÄUSCHUNG
   ===================================================================== */

.calendar {
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-void);
    position: relative;
    padding-top: var(--safe-t);
    padding-bottom: var(--safe-b);
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
}

.calendar-topbar {
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--line);
}

.calendar-brand {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

.calendar-body {
    flex: 1;
    min-height: 0;
    padding: 16px 18px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.calendar-monthbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.calendar-month {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 6vw, 26px);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-faint);
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(30px, 1fr);
    gap: 3px;
    flex: 0 1 auto;
}

.calendar-grid .cal-cell {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    font-size: 12px;
    color: var(--ink-dim);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
}

.calendar-grid .cal-cell.is-today {
    background: rgba(200,255,77,0.10);
    color: var(--lime);
    font-weight: 600;
}

.calendar-grid .cal-cell.is-outside { color: var(--ink-faint); opacity: 0.35; }

.calendar-agenda {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-agenda li {
    border: 1px solid var(--line);
    border-left: 3px solid var(--cyan);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ink-dim);
    background: rgba(255,255,255,0.015);
}

.calendar-agenda li span {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-faint);
    margin-bottom: 2px;
}

.calendar-fab {
    position: fixed;
    right: calc(20px + var(--safe-r));
    bottom: calc(24px + var(--safe-b));
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--lime);
    color: #0a0d05;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px -6px rgba(200,255,77,0.45);
    animation: fabPulse 2.1s ease-in-out infinite;
}

.calendar-fab-plus {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    margin-top: -2px;
}

@keyframes fabPulse {
    0%, 100% { box-shadow: 0 12px 30px -6px rgba(200,255,77,0.45); transform: scale(1); }
    50% { box-shadow: 0 14px 40px -4px rgba(200,255,77,0.7); transform: scale(1.045); }
}

.calendar-onboarding {
    position: fixed;
    right: calc(18px + var(--safe-r));
    bottom: calc(92px + var(--safe-b));
    max-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-dim);
    box-shadow: 0 16px 40px -14px rgba(0,0,0,0.6);
    animation: onboardIn .5s ease .3s both;
}

.calendar-onboarding p { margin: 0; }
.calendar-onboarding strong { color: var(--lime); }

@keyframes onboardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-height: 620px) {
    .calendar-grid { grid-auto-rows: minmax(22px, 1fr); }
    .calendar-agenda { display: none; }
}

/* =====================================================================
   REVEAL
   ===================================================================== */

.reveal-stage {
    height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--bg-void);
    overflow: hidden;
    padding:
        calc(24px + var(--safe-t))
        calc(24px + var(--safe-r))
        calc(24px + var(--safe-b))
        calc(24px + var(--safe-l));
}

.reveal-shatter {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(10deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 62px);
    opacity: 0;
    animation: shatterFlash 1.1s ease-out forwards;
}

@keyframes shatterFlash {
    0%   { opacity: 0; transform: scale(1); }
    8%   { opacity: 1; }
    30%  { opacity: 0.5; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.12); }
}

.reveal-text {
    position: relative;
    z-index: 2;
    max-width: 480px;
    text-align: center;
    opacity: 0;
    animation: revealTextIn .8s cubic-bezier(.16,.8,.28,1) .5s forwards;
}

@keyframes revealTextIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal-headline {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.15;
}

.reveal-subline {
    margin: 0;
    color: var(--ink-dim);
    font-size: 15px;
    line-height: 1.5;
}

/* =====================================================================
   READER — RSVP
   ===================================================================== */

.reader {
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-void);
    display: flex;
    flex-direction: column;
    padding-top: var(--safe-t);
    padding-bottom: var(--safe-b);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.reader-topbar {
    text-align: center;
    padding: 16px 12px 0;
    position: relative;
    z-index: 3;
}

.reader-brand {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}

.reader-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.reader-fx::before,
.reader-fx::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    transition: background .5s ease, opacity .5s ease;
}

.reader-fx::before {
    width: 60vmax; height: 60vmax;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--fx-a, var(--cyan)) 0%, transparent 68%);
    opacity: 0.16;
}

.reader-fx::after {
    width: 40vmax; height: 40vmax;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--fx-b, var(--lime)) 0%, transparent 70%);
    opacity: 0.10;
    mix-blend-mode: screen;
}

.reader[data-tone="warm"] .reader-fx { --fx-a: var(--gold); --fx-b: var(--gold); }
.reader[data-tone="dream"] .reader-fx { --fx-a: var(--pink); --fx-b: var(--violet); }
.reader[data-tone="normal"] .reader-fx { --fx-a: var(--cyan); --fx-b: var(--lime); }

.reader-scanline {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.028) 0px,
        rgba(255,255,255,0.028) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
    opacity: 0.5;
}

.reader-speedlines {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(
        100deg,
        rgba(255,255,255,0.05) 0px,
        transparent 2px,
        transparent 26px
    );
    transition: opacity .3s ease;
}

.reader.is-fast .reader-speedlines { opacity: 0.55; animation: speedShift .5s linear infinite; }

@keyframes speedShift {
    from { background-position-x: 0; }
    to   { background-position-x: -120px; }
}

.reader-brake-flash {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: var(--white);
    opacity: 0;
    pointer-events: none;
}

.reader-brake-flash.is-active {
    animation: brakeFlash .38s ease-out forwards;
}

@keyframes brakeFlash {
    0%   { opacity: 0.9; }
    100% { opacity: 0; }
}

.reader-word-wrap {
    position: relative;
    z-index: 3;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6vw;
    text-align: center;
}

.reader-word {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(28px, 10vw, 64px);
    letter-spacing: 0.005em;
    color: var(--white);
    white-space: nowrap;
    will-change: transform, opacity;
}

.reader-word .anchor {
    color: var(--lime);
}

.reader[data-tone="warm"] .reader-word .anchor { color: var(--gold); }
.reader[data-tone="dream"] .reader-word .anchor { color: var(--pink); }

.reader-word.is-impact {
    color: var(--white);
    text-shadow: 0 0 30px currentColor;
}

.reader-pause-indicator {
    position: absolute;
    bottom: calc(28px + var(--safe-b));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    padding: 7px 14px;
    border-radius: 999px;
}

/* =====================================================================
   FINALE / POWER-OFF
   ===================================================================== */

.finale {
    height: 100dvh;
    width: 100%;
    background: var(--bg-void);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 8dvh, 56px);
    padding:
        calc(24px + var(--safe-t))
        calc(28px + var(--safe-r))
        calc(24px + var(--safe-b))
        calc(28px + var(--safe-l));
    position: relative;
    overflow: hidden;
}

.finale::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(156,107,255,0.14), transparent 65%);
    pointer-events: none;
}

.finale-message {
    position: relative;
    z-index: 2;
    max-width: 520px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(20px, 5.4vw, 30px);
    line-height: 1.5;
    color: var(--white);
    opacity: 0;
    animation: finaleIn 1s ease .2s forwards;
}

@keyframes finaleIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.finale-power {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    opacity: 0;
    animation: finaleIn 1s ease .9s forwards;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.finale-power:hover { border-color: var(--lime); }

.finale-power.is-pressed {
    transform: scale(0.9);
    background: var(--lime);
    color: #0a0d05;
    border-color: var(--lime);
}

.finale-cursor {
    position: absolute;
    z-index: 6;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0));
    pointer-events: none;
    opacity: 0;
}

.finale-cursor.is-moving {
    opacity: 1;
    transition: left 1.1s cubic-bezier(.5,0,.2,1), top 1.1s cubic-bezier(.5,0,.2,1), opacity .3s ease;
}

/* CRT power-off collapse applied to <body> */
body.is-powering-off {
    animation: crtOff .55s cubic-bezier(.6,0,.9,.4) forwards;
}

@keyframes crtOff {
    0%   { filter: brightness(1); transform: scale(1); }
    60%  { filter: brightness(2.2); transform: scaleY(0.02) scaleX(1.02); }
    100% { filter: brightness(0.2); transform: scaleY(0.001) scaleX(0.3); opacity: 0; }
}

/* =====================================================================
   FAKE 410
   ===================================================================== */

.stage-error {
    height: 100dvh;
    background: var(--bg-void);
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-screen {
    text-align: center;
    padding: 0 24px;
}

.error-code {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 16vw, 88px);
    font-weight: 700;
    color: var(--pink);
    line-height: 1;
}

.error-title {
    margin: 10px 0 22px;
    font-size: 16px;
    color: var(--ink-dim);
}

.error-meta {
    margin: 2px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}


/* =====================================================================
   V10 · Individual Stories Edition
   Design language remains the existing FOCUS / ONE aesthetic.
   ===================================================================== */

/* ----------------------------- Lobby -------------------------------- */
.lobby-card {
    overflow: hidden;
    position: relative;
}
.lobby-card::before {
    content:"";
    position:absolute;
    left:0; top:0;
    width:100%; height:2px;
    background:linear-gradient(90deg, transparent, var(--lime), var(--cyan), transparent);
    opacity:.7;
}
.lobby-intro {
    margin: 0 0 12px;
    max-width: 34ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-dim);
}
.lobby-footnote {
    display:flex;
    align-items:center;
    gap:7px;
}
.lobby-dot {
    width:6px; height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 12px rgba(200,255,77,.45);
}

/* No participant roster exists in the lobby. */
.lobby-roster { display:none !important; }

/* ---------------------------- Calendar ------------------------------- */
.calendar {
    background:
        radial-gradient(circle at 82% 8%, rgba(82,231,255,.055), transparent 22%),
        radial-gradient(circle at 8% 88%, rgba(200,255,77,.035), transparent 20%),
        #090b0f;
}
.calendar-topbar {
    min-height:64px;
    padding:12px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:rgba(13,16,22,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.calendar-appbrand {
    display:flex;
    align-items:center;
    gap:10px;
}
.calendar-appicon {
    width:34px; height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:linear-gradient(145deg,rgba(200,255,77,.18),rgba(82,231,255,.09));
    border:1px solid rgba(200,255,77,.22);
    color:var(--lime);
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:600;
}
.calendar-appbrand > div {
    display:flex;
    flex-direction:column;
    gap:1px;
}
.calendar-appname {
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
}
.calendar-appsub {
    font-family:var(--font-mono);
    font-size:8.5px;
    color:var(--ink-faint);
}
.calendar-actions {
    display:flex;
    align-items:center;
    gap:9px;
}
.calendar-action {
    border:1px solid var(--line);
    background:rgba(255,255,255,.025);
    color:var(--ink-dim);
    border-radius:9px;
    padding:7px 10px;
    font-size:10px;
}
.calendar-more {
    color:var(--ink-faint);
    font-size:14px;
    letter-spacing:2px;
}
.calendar-body {
    width:min(900px,100%);
    margin:0 auto;
    padding:18px 18px 0;
}
.calendar-monthbar {
    flex-direction:row;
    align-items:end;
    justify-content:space-between;
    margin-bottom:12px;
}
.calendar-monthcopy {
    display:flex;
    flex-direction:column;
    gap:3px;
}
.calendar-kicker {
    font-family:var(--font-mono);
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.13em;
    color:var(--ink-faint);
}
.calendar-month {
    font-size:clamp(23px,6vw,31px);
    letter-spacing:-.025em;
}
.calendar-nav {
    display:flex;
    gap:6px;
}
.calendar-nav span {
    width:30px; height:30px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--ink-dim);
    background:rgba(255,255,255,.018);
}
.calendar-weekdays {
    padding:0 2px 6px;
}
.calendar-grid {
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.055);
    border-radius:14px;
    overflow:hidden;
    gap:1px;
}
.calendar-grid .cal-cell {
    min-height:44px;
    position:relative;
    align-items:flex-start;
    justify-content:flex-start;
    padding:8px 8px;
    border-radius:0;
    background:#0e1117;
    font-family:var(--font-mono);
    font-size:10.5px;
}
.calendar-grid .cal-cell.is-today {
    background:linear-gradient(145deg,rgba(200,255,77,.13),rgba(82,231,255,.04));
    color:var(--white);
    box-shadow:inset 0 0 0 1px rgba(200,255,77,.14);
}
.calendar-grid .cal-cell.is-today > span {
    display:grid;
    place-items:center;
    width:22px; height:22px;
    margin:-4px 0 0 -4px;
    border-radius:50%;
    background:var(--lime);
    color:#0a0d05;
    font-weight:700;
}
.cal-event-dot {
    position:absolute;
    left:8px;
    bottom:7px;
    width:5px; height:5px;
    border-radius:50%;
}
.cal-event-dot.cyan { background:var(--cyan); box-shadow:0 0 8px rgba(82,231,255,.4); }
.cal-event-dot.lime { background:var(--lime); box-shadow:0 0 8px rgba(200,255,77,.4); }
.cal-event-dot.violet { background:var(--violet); box-shadow:0 0 8px rgba(156,107,255,.4); }

.calendar-agenda-wrap {
    margin-top:13px;
    min-height:0;
    display:flex;
    flex-direction:column;
}
.calendar-agenda-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    padding:0 2px 8px;
}
.calendar-agenda-head > div {
    display:flex;
    flex-direction:column;
    gap:2px;
}
.calendar-agenda-head strong {
    font-family:var(--font-display);
    font-size:14px;
    font-weight:600;
}
.calendar-agenda-count {
    font-family:var(--font-mono);
    font-size:8px;
    color:var(--ink-faint);
}
.calendar-agenda {
    margin:0;
    gap:6px;
}
.calendar-agenda li {
    display:grid;
    grid-template-columns:54px 1fr auto;
    align-items:center;
    gap:8px;
    border-left-width:2px;
    padding:8px 10px;
    background:rgba(255,255,255,.016);
}
.calendar-agenda li span {
    margin:0;
}
.calendar-agenda li strong {
    font-size:11px;
    font-weight:500;
    color:var(--ink-dim);
}
.calendar-agenda li em {
    font-family:var(--font-mono);
    font-size:7px;
    font-style:normal;
    color:var(--ink-faint);
}
.calendar-agenda li.agenda-cyan { border-left-color:var(--cyan); }
.calendar-agenda li.agenda-lime { border-left-color:var(--lime); }
.calendar-agenda li.agenda-violet { border-left-color:var(--violet); }

.calendar-onboarding {
    max-width:235px;
    padding:12px 13px;
    border-color:rgba(200,255,77,.16);
    background:rgba(18,22,29,.96);
    box-shadow:0 18px 50px -16px rgba(0,0,0,.8),0 0 30px rgba(200,255,77,.035);
}
.calendar-onboarding-tag {
    display:block;
    margin-bottom:6px;
    font-family:var(--font-mono);
    font-size:7px;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:var(--lime);
}
.calendar-onboarding p + p { margin-top:2px; }

.calendar-fab {
    width:60px; height:60px;
    box-shadow:0 14px 36px -7px rgba(200,255,77,.52);
}
.calendar-fab::after {
    content:"";
    position:absolute;
    inset:-7px;
    border:1px solid rgba(200,255,77,.18);
    border-radius:50%;
    animation:calRadar 1.8s ease-out infinite;
}
@keyframes calRadar {
    from { transform:scale(.82); opacity:.75; }
    to { transform:scale(1.35); opacity:0; }
}

/* ----------------------------- Reveal -------------------------------- */
.reveal-stage {
    background:
        radial-gradient(circle at 50% 45%,rgba(200,255,77,.09),transparent 25%),
        radial-gradient(circle at 28% 72%,rgba(82,231,255,.07),transparent 20%),
        radial-gradient(circle at 78% 32%,rgba(255,95,192,.045),transparent 17%),
        var(--bg-void);
}
.reveal-headline {
    text-shadow:0 12px 50px rgba(0,0,0,.35);
}
.reveal-subline {
    max-width:34ch;
    margin-left:auto;
    margin-right:auto;
}

/* ------------------------------ Reader -------------------------------- */
.reader {
    background:#050609;
}
.reader-fx::before {
    opacity:.19;
}
.reader-fx::after {
    opacity:.12;
}
.reader-word {
    letter-spacing:-.018em;
    text-shadow:0 12px 45px rgba(0,0,0,.28);
}
.reader-word .anchor {
    text-shadow:0 0 16px rgba(200,255,77,.16);
}
.reader[data-tone="warm"] .reader-word .anchor {
    text-shadow:0 0 18px rgba(255,182,74,.18);
}
.reader[data-tone="dream"] .reader-word .anchor {
    text-shadow:0 0 18px rgba(255,95,192,.18);
}
.reader.is-fast .reader-fx::before {
    opacity:.24;
}
.reader.is-ultra .reader-fx::before {
    opacity:.31;
    filter:blur(48px);
}
.reader.is-ultra .reader-fx::after {
    opacity:.19;
    filter:blur(46px);
}
.reader.is-ultra .reader-speedlines {
    opacity:.78;
    animation:speedShift .32s linear infinite;
}

/* ------------------------------ Finale -------------------------------- */
.finale {
    background:
        radial-gradient(ellipse 70% 55% at 50% 35%,rgba(156,107,255,.13),transparent 64%),
        radial-gradient(circle at 50% 72%,rgba(200,255,77,.035),transparent 23%),
        var(--bg-void);
}
.finale-message {
    text-wrap:balance;
}

/* ------------------------------ Mobile -------------------------------- */
@media (max-width:600px) {
    .lobby-card {
        overflow:hidden;
    }
    .calendar-topbar {
        min-height:55px;
        padding:9px 13px;
    }
    .calendar-appicon {
        width:31px; height:31px;
    }
    .calendar-appsub {
        display:none;
    }
    .calendar-action {
        display:none;
    }
    .calendar-body {
        padding:12px 12px 0;
    }
    .calendar-monthbar {
        margin-bottom:8px;
    }
    .calendar-grid .cal-cell {
        min-height:37px;
        padding:6px;
        font-size:9px;
    }
    .calendar-grid .cal-cell.is-today > span {
        width:20px; height:20px;
    }
    .calendar-agenda-wrap {
        margin-top:9px;
    }
    .calendar-agenda li {
        padding:7px 8px;
        grid-template-columns:47px 1fr auto;
    }
    .calendar-onboarding {
        right:calc(13px + var(--safe-r));
        bottom:calc(89px + var(--safe-b));
        max-width:205px;
        font-size:11px;
    }
    .calendar-fab {
        right:calc(15px + var(--safe-r));
        bottom:calc(19px + var(--safe-b));
        width:56px; height:56px;
    }
    .reader-word-wrap {
        padding-left:3vw;
        padding-right:3vw;
    }
    .reader-word {
        font-size:clamp(30px,12.5vw,62px);
    }
}

@media (max-height:680px) and (max-width:600px) {
    .calendar-agenda li:nth-child(3) { display:none; }
    .calendar-agenda-count { display:none; }
    .calendar-grid .cal-cell { min-height:31px; }
}

@media (max-height:600px) and (max-width:600px) {
    .calendar-agenda-wrap { display:none; }
    .calendar-grid .cal-cell { min-height:27px; }
    .calendar-onboarding { max-width:190px; }
}