/* =============================================================================
   Night mode — the homepage and the front desk (log in / register) at night.

   <html data-night="1"> is set in the layout's <head> from localStorage
   `dito.nightMode` before anything paints, so a night page never flashes day
   first. It is the same key the game's Settings switch uses (useNightMode in
   nitro-react; the client is on this origin), so one choice covers the site
   and the hotel view. The night picture comes in as --dito-art-night, set on
   .dito-scene and .dito-auth-art by their components.
   ============================================================================= */

/* ---- the switch (homepage header and front-desk header) ---- */
.dito-night-toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(36, 36, 42, .12);
    border-radius: 999px;
    background: #fff;
    color: #2B2933;
    cursor: pointer;
    box-shadow: 0 2px 10px -4px rgba(30, 22, 48, .25);
    transition: color 130ms ease, background-color 130ms ease;
}
.dito-night-toggle:hover { color: #1F7ECD; }
.dito-night-toggle svg { display: block; }
.dito-night-toggle .is-sun { display: none; }

html[data-night="1"] .dito-night-toggle { background: rgba(20, 26, 56, .78); border-color: rgba(255, 255, 255, .18); color: #FFE7A3; box-shadow: none; }
html[data-night="1"] .dito-night-toggle:hover { color: #FFF3CC; }
html[data-night="1"] .dito-night-toggle .is-sun { display: block; }
html[data-night="1"] .dito-night-toggle .is-moon { display: none; }

/* ---- homepage: the scene ---- */
html[data-night="1"] .dito-scene-art,
html[data-night="1"] .dito-striptile-shot { background-image: var(--dito-art-night) !important; }
html[data-night="1"] .dito-striptile-shot { background-color: #10183A; }

/* The day wash under the text column is cream; at night it is the sky's navy. */
html[data-night="1"] .dito-scene .dito-scene-veil {
    background: linear-gradient(90deg, rgba(9, 15, 40, .82) 0%, rgba(9, 15, 40, .62) 24%, rgba(9, 15, 40, .24) 40%, rgba(9, 15, 40, 0) 52%) !important;
}
html[data-night="1"] .dito-scene-tag,
html[data-night="1"] .dito-scene-heading,
html[data-night="1"] .dito-scene-live { color: #F2F2F7; }
html[data-night="1"] .dito-scene-lead { color: #C9CEE0; }
html[data-night="1"] .dito-scene-cta.is-white { background: rgba(20, 26, 56, .85); color: #F2F2F7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-night="1"] .dito-scene-cta.is-white:hover { background: rgba(30, 38, 76, .92); }

/* The scene's bottom edge fades to cream under the cards by day; to the sea's
   navy at night. */
html[data-night="1"] .dito-scene::after {
    background: linear-gradient(180deg, rgba(9, 15, 40, 0) 0%, rgba(9, 15, 40, .55) 55%, rgba(9, 15, 40, .96) 100%);
}

html[data-night="1"] .dito-striptile { background: rgba(16, 22, 50, .9); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6); }
html[data-night="1"] .dito-striptile-text b { color: #F2F2F7; }
html[data-night="1"] .dito-striptile-text span { color: #A9AFC6; }
html[data-night="1"] .dito-striptile-text i { color: #8CCBFF; }

/* ---- homepage: the header floating on the scene ---- */
html[data-night="1"] .dito-topbar.is-over-art::before {
    background: linear-gradient(180deg, rgba(9, 15, 40, .82) 0%, rgba(9, 15, 40, .42) 60%, rgba(9, 15, 40, 0) 100%);
}
html[data-night="1"] .dito-topbar.is-over-art .dito-topnav-link,
html[data-night="1"] .dito-topbar.is-over-art .dito-burger,
html[data-night="1"] .dito-lang-btn { color: #E9ECF6; }
html[data-night="1"] .dito-topbar.is-over-art .dito-topnav-link:hover,
html[data-night="1"] .dito-lang-btn:hover { color: #8CCBFF; background: rgba(255, 255, 255, .1); }
html[data-night="1"] .dito-topbar.is-over-art .dito-topnav-link.is-active { color: #8CCBFF; background: rgba(255, 255, 255, .14); }
html[data-night="1"] .dito-topbar.is-over-art .dito-online-pill,
html[data-night="1"] .dito-topbar.is-over-art .dito-btn-quiet {
    background: rgba(20, 26, 56, .78);
    border-color: rgba(255, 255, 255, .18);
    color: #F2F2F7;
    box-shadow: none;
}

/* ---- front desk (log in / register) ---- */
html[data-night="1"] .dito-body-auth-desk { background: #0B1230; color: #E9ECF6; }
html[data-night="1"] .dito-auth-topbar { background: #0E1636; border-bottom-color: rgba(255, 255, 255, .08); }
html[data-night="1"] .dito-auth-topbar nav a { color: #C9CEE0; }
html[data-night="1"] .dito-auth-topbar nav a:hover,
html[data-night="1"] .dito-auth-topbar nav a:focus-visible { color: #8CCBFF; }
html[data-night="1"] .dito-auth-topbar > span { color: #8E95B0; }

html[data-night="1"] .dito-auth-kicker { color: #F2B48C; }
html[data-night="1"] .dito-auth-desk h1 { color: #F2F2F7; }
html[data-night="1"] .dito-auth-intro,
html[data-night="1"] .dito-auth-other,
html[data-night="1"] .dito-auth-presence,
html[data-night="1"] .dito-auth-terms { color: #A9AFC6; }
html[data-night="1"] .dito-auth-field > label { color: #D5D9E8; }

html[data-night="1"] .dito-auth-switch { background: #161F45; border-color: rgba(255, 255, 255, .1); }
html[data-night="1"] .dito-auth-switch a { color: #A9AFC6; }
html[data-night="1"] .dito-auth-switch a[aria-current="page"] { background: #24305E; color: #fff; box-shadow: none; }
html[data-night="1"] .dito-auth-switch a:not([aria-current]):hover { color: #8CCBFF; }

html[data-night="1"] .dito-body-auth-desk .dito-auth-input { background: #121A3D; border-color: rgba(255, 255, 255, .14); color: #F2F2F7; }
html[data-night="1"] .dito-body-auth-desk .dito-auth-input::placeholder { color: #7D84A0; }
html[data-night="1"] .dito-auth-password > button { color: #C9CEE0; }
html[data-night="1"] .dito-auth-password > button:hover { background: rgba(255, 255, 255, .08); }
html[data-night="1"] .dito-auth-forgot a,
html[data-night="1"] .dito-auth-other a,
html[data-night="1"] .dito-auth-terms a { color: #8CCBFF; }
html[data-night="1"] .dito-auth-online-dot { box-shadow: 0 0 0 3px rgba(48, 167, 109, .25); }

html[data-night="1"] .dito-auth-art {
    background-image: linear-gradient(180deg, rgba(9, 15, 40, .02) 46%, rgba(9, 15, 40, .6) 100%), var(--dito-art-night) !important;
    background-color: #090F28;
}
html[data-night="1"] .dito-auth-art::before { background: linear-gradient(90deg, rgba(11, 18, 48, .6), transparent); }

/* ---- inner pages: My Dito, news, photos, staff, leaderboard, settings ----
   Most of their colours come from the shared palette, so it is darkened here,
   for every page on the site layout, and everything reading it follows; the
   light surfaces dito-interior.css writes out by hand are covered below. */
html[data-night="1"] .dito-body {
    --dito-bg: #0B1230;
    --dito-surface: #141C40;
    --dito-sunk: #10183A;
    --dito-line: rgba(255, 255, 255, .1);
    --dito-line-strong: rgba(255, 255, 255, .18);
    --dito-text: #E9ECF6;
    --dito-muted: #A9AFC6;
    --dito-blue-ink: #8CCBFF;
    --dito-soft-blue: rgba(85, 174, 239, .18);
}

/* The picture across the top, at night. Bump ?v= when the file changes:
   it is cached for a week, like the day one in dito-interior.css. */
html[data-night="1"] .dito-body-interior-scene::before {
    background: linear-gradient(180deg, rgba(9, 15, 40, .1) 0%, rgba(9, 15, 40, .1) 42%, var(--dito-bg) 98%),
                url('/assets/images/dito-hero-night.png?v=20261010') center 40% / cover no-repeat;
}
html[data-night="1"] .dito-body-interior-scene::after {
    background: radial-gradient(ellipse at 50% 45%, rgba(9, 15, 40, .86), rgba(9, 15, 40, .62) 32%, transparent 76%);
}
@media (max-width: 760px) {
    html[data-night="1"] .dito-body-interior-scene::after { background: linear-gradient(90deg, rgba(9, 15, 40, .86), rgba(9, 15, 40, .56)); }
}

html[data-night="1"] .dito-topbar,
html[data-night="1"] .dito-topbar.is-interior-scene { background: rgba(11, 18, 48, .84); border-bottom-color: rgba(255, 255, 255, .08); }
html[data-night="1"] .dito-topbar.is-interior-scene .dito-topnav-link.is-active { background: rgba(255, 255, 255, .1); box-shadow: none; }
html[data-night="1"] .dito-btn-soft:hover { background: rgba(85, 174, 239, .28); }

/* Cards and panels */
html[data-night="1"] .dito-body-interior-scene .dito-page .dito-card,
html[data-night="1"] .dito-body-interior-scene .dito-page .bg-white.shadow-sm,
html[data-night="1"] .dito-body-interior-scene .dito-page .dito-staff-section-card,
html[data-night="1"] .dito-scene-home-grid > .dito-band,
html[data-night="1"] .dito-scene-leaderboard .dito-lbc,
html[data-night="1"] .dito-staff-section,
html[data-night="1"] .dito-staff-note {
    background: rgba(20, 28, 64, .96);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}
html[data-night="1"] .dito-body-interior-scene .dito-page .dito-card-head,
html[data-night="1"] .dito-body-interior-scene .dito-page .dito-staff-section-card-head { background: rgba(255, 255, 255, .04); }
html[data-night="1"] .dito-body-interior-scene .dito-page .dito-settingsnav-idle { background: rgba(20, 28, 64, .96); }
html[data-night="1"] .dito-scene-more-panel .dito-tiles > div {
    background: rgba(20, 28, 64, .96);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .25);
}
html[data-night="1"] .dito-scene-more-panel .dito-tiles > div:last-child { background: rgba(38, 36, 72, .96); }
html[data-night="1"] .dito-staff-apply { background: rgba(85, 174, 239, .12); border-color: rgba(85, 174, 239, .3); }
html[data-night="1"] .dito-staff-person { background: #141C40; border-color: rgba(255, 255, 255, .1); }
html[data-night="1"] .dito-staff-person-rank { background: rgba(11, 18, 48, .88); color: #E9ECF6; }
html[data-night="1"] .dito-staff-count { background: rgba(255, 210, 140, .14); color: #F2C9A0; }
html[data-night="1"] .dito-scene-leaderboard .dito-lbc-champ { background: linear-gradient(110deg, rgba(255, 210, 140, .16), rgba(20, 28, 64, .2) 88%); }

/* Fields */
html[data-night="1"] .dito-body-interior-scene .dito-page input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
html[data-night="1"] .dito-body-interior-scene .dito-page textarea,
html[data-night="1"] .dito-body-interior-scene .dito-page select {
    background-color: #121A3D;
    border-color: rgba(255, 255, 255, .14);
    color: #F2F2F7;
}

/* Words written out in fixed colours */
html[data-night="1"] .dito-page-heading h1 { color: #F2F2F7; }
html[data-night="1"] .dito-scene-kicker { color: #C9CEE0; }
html[data-night="1"] .dito-my-page .dito-scene-welcome p.dito-hero-sub,
html[data-night="1"] .dito-my-page .dito-scene-welcome .dito-presence { color: #C9CEE0; }
html[data-night="1"] .dito-my-page .dito-scene-welcome .dito-btn-soft { background: rgba(20, 28, 64, .9); color: #E9ECF6; border-color: rgba(255, 255, 255, .16); }
html[data-night="1"] .dito-scene-board-intro > p:last-child { color: #C9CEE0; }
html[data-night="1"] .dito-lbc-unit { color: #F2C9A0; }

/* Staff page: the hero card, its sun (a moon at night), the cards' small print */
html[data-night="1"] .dito-staff-hero {
    background: linear-gradient(105deg, rgba(20, 28, 64, .96) 0%, rgba(24, 32, 72, .94) 53%, rgba(60, 50, 110, .6) 100%);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}
html[data-night="1"] .dito-staff-hero h1 { color: #F2F2F7; }
html[data-night="1"] .dito-staff-hero-copy > p:not(.dito-scene-kicker),
html[data-night="1"] .dito-staff-aside p:not(.dito-scene-kicker) { color: #C9CEE0; }
html[data-night="1"] .dito-staff-sun {
    background: radial-gradient(circle at 38% 34%, #fffbe6, #f4e6b0 58%, #d9c98a);
    box-shadow: 0 0 0 22px rgba(244, 230, 176, .12), 0 0 0 65px rgba(244, 230, 176, .06);
}
html[data-night="1"] .dito-staff-arc { border-color: rgba(255, 255, 255, .12); }
html[data-night="1"] .dito-staff-arc-two { border-color: rgba(140, 203, 255, .15); }
html[data-night="1"] .dito-staff-spark { color: #F4E6B0; text-shadow: none; }
html[data-night="1"] .dito-staff-badge { background: rgba(255, 255, 255, .06); }
html[data-night="1"] .dito-staff-person-motto,
html[data-night="1"] .dito-staff-person-status { color: #A9AFC6; }
html[data-night="1"] .dito-staff-person-status i.is-online { box-shadow: 0 0 0 3px rgba(63, 187, 120, .25); }
html[data-night="1"] .dito-staff-note-icon { background: rgba(255, 210, 140, .15); color: #F2C9A0; }

/* Scene pages with a form (staff PIN): the fields */
html[data-night="1"] .dito-scene-input,
html[data-night="1"] input.dito-scene-input { background: rgba(18, 26, 61, .92); border-color: rgba(255, 255, 255, .16); color: #F2F2F7; }
html[data-night="1"] .dito-scene-input::placeholder { color: #7D84A0; }
html[data-night="1"] .dito-scene-input:focus { background: #121A3D; }
html[data-night="1"] .dito-scene-label { color: #D5D9E8; }
html[data-night="1"] .dito-scene-links,
html[data-night="1"] .dito-scene-terms { color: #A9AFC6; }
html[data-night="1"] .dito-scene-links a,
html[data-night="1"] .dito-scene-terms a { color: #8CCBFF; }

/* Atom's pages (rare values, help centre, shop, logo generator, settings...)
   are drawn with Tailwind's grey and white utilities rather than the palette;
   the same utilities, at night. */
html[data-night="1"] .dito-body :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200) { background-color: #141C40 !important; }
html[data-night="1"] .dito-body .bg-gray-300 { background-color: #1C2650 !important; }
html[data-night="1"] .dito-body :is(.text-black, .text-gray-900, .text-gray-800, .text-gray-700) { color: #E9ECF6 !important; }
html[data-night="1"] .dito-body :is(.text-gray-600, .text-gray-500, .text-gray-400) { color: #A9AFC6 !important; }
html[data-night="1"] .dito-body :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-gray-400) { border-color: rgba(255, 255, 255, .12) !important; }

/* TinyMCE's frame shows white for a moment around its dark page. */
html[data-night="1"] .tox .tox-edit-area__iframe { background-color: #222f3e !important; }