/**
 * Proefthema "paleis bij nacht" met drie paletten (koper, wijn, turkoois), alleen actief op body.thema-nacht.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

/* Koppen in El Messiri, op de eigen server zoals de andere lettertypes. */
@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/el-messiri-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'El Messiri';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/el-messiri-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Gemeenschappelijk: lettertypes en de pagina als nachthemel; de kleuren komen uit een palet hieronder. */
body.thema-nacht {
  --font-logo: 'El Messiri', 'Inter', serif;
  --font-titel: 'El Messiri', 'Inter', serif;
  --color-success: #72d39d;
  --color-danger: #f07e6b;
  --color-warning: #f2c962;

  background-color: var(--color-page);
  background-image:
    radial-gradient(ellipse 70% 40% at 78% -8%, rgb(var(--gloed) / 0.15), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 0%, rgb(var(--koel) / 0.16), transparent 70%),
    linear-gradient(180deg, var(--grad-1) 0%, var(--color-page) 38%, var(--grad-3) 100%);
  background-size: auto;
  background-attachment: fixed;
}

/* Voorstel 1: nachtblauw en koper. Rustig inktblauw, koperen lamplicht. */
body.thema-nacht.palet-koper {
  --color-page: #101826; --color-card: #172233; --color-card-hover: #1f2c41; --color-card-deep: #131c2b;
  --color-line: #26344b; --color-line-strong: #34455f;
  --color-accent: #c98a4b; --color-accent-hover: #dba062; --color-accent-soft: #2b2a30;
  --color-brass: #cfa968; --color-money: #ecd193; --color-ink: #efe9de; --color-muted: #9fabbd; --color-faint: #7f8ba0;
  --gloed: 201 138 75; --koel: 70 100 150; --grond: 16 24 38; --schaduw: 4 8 16;
  --grad-1: #16223a; --grad-3: #0c121e;
  --knop-1: #dba062; --knop-2: #b9793c; --knop-tekst: #1a1410; --logo: #f1d6a4;
}

/* Voorstel 2: wijnrood en goud. Fluweel van een paleiszaal bij kaarslicht. */
body.thema-nacht.palet-wijn {
  --color-page: #1a1014; --color-card: #26161c; --color-card-hover: #301c24; --color-card-deep: #1f1217;
  --color-line: #3d2530; --color-line-strong: #563441;
  --color-accent: #d6a84e; --color-accent-hover: #e6bc66; --color-accent-soft: #3a2a24;
  --color-brass: #e0bd78; --color-money: #f0d690; --color-ink: #f5ebe0; --color-muted: #c4aab0; --color-faint: #9d8289;
  --gloed: 214 168 78; --koel: 150 50 70; --grond: 26 16 20; --schaduw: 12 4 8;
  --grad-1: #2a1520; --grad-3: #120a0e;
  --knop-1: #e6bc66; --knop-2: #c8963c; --knop-tekst: #24130e; --logo: #f3dca2;
}

/* Voorstel 3: turkoois en zilver. İznik-tegels onder de maan. */
body.thema-nacht.palet-turkoois {
  --color-page: #0d1b1f; --color-card: #13262b; --color-card-hover: #1a3137; --color-card-deep: #102126;
  --color-line: #20393f; --color-line-strong: #2d4d54;
  --color-accent: #3fb8a9; --color-accent-hover: #5acbbd; --color-accent-soft: #1b3a3a;
  --color-brass: #d7b46c; --color-money: #e9d9a0; --color-ink: #e9f1ee; --color-muted: #9db8b5; --color-faint: #7c9a97;
  --gloed: 63 184 169; --koel: 60 120 160; --grond: 13 27 31; --schaduw: 2 10 12;
  --grad-1: #12282e; --grad-3: #091316;
  --knop-1: #5acbbd; --knop-2: #2e9c8f; --knop-tekst: #062420; --logo: #e8eef0;
}

body.thema-nacht ::selection { background: rgb(var(--gloed) / 0.35); }
body.thema-nacht :focus-visible { outline-color: var(--color-accent); }

/* Kaarten: licht gewelfd, alsof er een lamp boven hangt. */
body.thema-nacht .card {
  background-image: linear-gradient(180deg, rgb(var(--gloed) / 0.04), transparent 120px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 14px 34px rgb(var(--schaduw) / 0.5);
}

body.thema-nacht .pinstripe { background-image: none; }

body.thema-nacht .card-head::after {
  width: 3.5rem;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  box-shadow: 0 0 8px rgb(var(--gloed) / 0.55);
}

/* Titels: El Messiri, rustig gespatieerd, warm wit met een gouden icoon. */
body.thema-nacht .card-tab {
  font-family: var(--font-titel);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-ink);
}

body.thema-nacht h1,
body.thema-nacht h2.page-title,
body.thema-nacht .page-title {
  font-family: var(--font-titel);
  letter-spacing: 0.01em;
}

body.thema-nacht .nav-head {
  font-family: var(--font-titel);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--color-brass);
}

body.thema-nacht .nav-head::before {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent);
}

body.thema-nacht .nav-item[aria-current="page"] {
  background: linear-gradient(90deg, rgb(var(--gloed) / 0.22), rgb(var(--gloed) / 0.06));
  color: var(--color-ink);
}

/* Knoppen: de hoofdknop gloeit als een lantaarn. */
body.thema-nacht .btn-primary {
  background: linear-gradient(180deg, var(--knop-1), var(--knop-2));
  color: var(--knop-tekst);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 6px 18px rgb(var(--gloed) / 0.28);
}

body.thema-nacht .btn-primary:hover {
  background: linear-gradient(180deg, var(--knop-1), var(--knop-1));
}

body.thema-nacht .btn-secondary:hover { color: var(--color-ink); }

body.thema-nacht .field:focus { box-shadow: 0 0 0 3px rgb(var(--gloed) / 0.22); }
body.thema-nacht .choice input { accent-color: var(--color-accent); }

body.thema-nacht .bar { box-shadow: inset 0 1px 2px rgb(var(--schaduw) / 0.6); }

body.thema-nacht .glass {
  background-color: rgb(var(--grond) / 0.9);
  border-color: rgb(255 255 255 / 0.1);
}

body.thema-nacht .mugshot {
  background-color: var(--color-card-deep);
  background-image: none;
  border-color: rgb(var(--gloed) / 0.45);
}

body.thema-nacht .stamp { font-family: var(--font-titel); letter-spacing: 0.12em; }

/* Logo: de naam in El Messiri, goud met een zachte gloed. */
body.thema-nacht .cc-logo-c,
body.thema-nacht .cc-logo-text {
  font-family: var(--font-titel);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--logo);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 2px 14px rgb(0 0 0 / 0.65), 0 0 18px rgb(var(--gloed) / 0.35);
}

body.thema-nacht .cc-logo-c { font-size: 1.35em; font-weight: 700; }
body.thema-nacht .cc-logo-text { font-weight: 600; font-size: 1.15em; }

/* Kopbeeld: geen mist, wel een avondgloed onderaan; de statusstrook als nachtglas. */
body.thema-nacht header.card .animate-fog { display: none; }

body.thema-nacht header.card .bg-gradient-to-r {
  background-image: linear-gradient(90deg, rgb(var(--grond) / 0.92), rgb(var(--grond) / 0.35) 45%, transparent);
}

body.thema-nacht .hud-strip {
  background: linear-gradient(90deg, rgb(var(--grond) / 0.55) 0%, rgb(var(--grond) / 0.82) 45%, rgb(var(--grond) / 0.94) 100%);
  border-top: 1px solid rgb(255 255 255 / 0.1);
  backdrop-filter: blur(6px);
}

body.thema-nacht [data-region="mobile-strip"] { background-color: rgb(var(--grond) / 0.95); }

/* De maffiamascotte past niet meer; de nieuwe figuren volgen in de mascotteronde. */
body.thema-nacht .bust,
body.thema-nacht .tour-don,
body.thema-nacht .don-bubble { display: none; }

/* Kopbeeld: de stad in beeld, niet de hemel. */
body.thema-nacht header.card .bg-cover { background-position: center 62%; }