/* Bòlètopoli — NervalFrost shell (same tokens, frame, panel, cards and
   buttons as MoDoMiNo). */
/* The platform's two faces, as FotoLekti sets them: Playfair Display for anything
   that is meant to be looked at, Inter for everything that is meant to be read.
   Both come from Google Fonts, which the CSP already allows; the fallbacks are a
   serif and the system stack, so a phone with no network still reads correctly. */

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --nf-backdrop: #e3e5fa;
  --nf-frost: #f5f6fb;
  --nf-card: #ffffff;
  --nf-blue: rgb(49, 86, 142);
  --nf-purple: rgba(86, 44, 195, 0.85);
  --nf-purple-solid: #542CC2;
  --mp-tip-blue: #3f34e6;
  --nf-disc: rgba(84, 44, 194, 0.08);
  --nf-stroke-50: rgba(86, 44, 195, 0.5);
  --nf-frame-stroke: rgba(160, 140, 225, 0.5);
  --nf-hairline-25: rgba(160, 140, 225, 0.25);
  --bubble-blue: #6D8AFF;
  --nf-grad: linear-gradient(96deg, rgb(95, 165, 250) 0%, rgb(167, 78, 222) 104%);
  --breather: 14px;
  --ember: #ff7a45;
  --ember-deep: #e04f1f;
  --hit-green: #2fb47c;
  --tile-ink: #4a3418;
  --ink-muted: #3a5280;            /* secondary text: darker than the old 60% blue, readable in sun */
  --lo-1: #D21034;                 /* premye lo — the flag's red, as the share card paints it */
  --lo-2: #1F8A4C;                 /* dezyèm lo */
  --lo-3: #3567D6;                 /* twazyèm lo */
  --font-display: 'Playfair Display', Georgia, serif;   /* titles, the money, anything that is looked at */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* everything that is read */
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  width: 100vw; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
  background: linear-gradient(160deg, #ccd4f4 0%, #e3e5fa 45%, #ece2f6 75%, #f2e4f2 100%);
  color: var(--nf-blue);
}

/* === DEVICE FRAME — 430×932 canvas, scaled by js/frame.js === */
.device-frame { width: 430px; height: 932px; max-width: 430px; max-height: 932px; position: relative; overflow: hidden; background: var(--nf-backdrop); transform-origin: center center; }
@media (max-width: 479px) { .device-frame { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; } }
@media (min-width: 480px) {
  body { background: linear-gradient(135deg, #ccd4f4 0%, #e3e5fa 45%, #ece2f6 75%, #f2e4f2 100%); }
  .device-frame { border-radius: 2.8rem; border: 0.7rem solid #0d0d0d; box-shadow: 0 1.8rem 4.5rem rgba(85, 70, 150, 0.35), 0 0.6rem 1.6rem rgba(85, 70, 150, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
}
.dash-layout { position: relative; z-index: 1; height: 100%; margin: 0 8px; padding: 8px 0 0; display: flex; flex-direction: column; }
.dash-panel { flex: 1 1 auto; min-width: 0; min-height: 0; background: linear-gradient(180deg, #fafbfe 0%, #f2f3fb 48%, #e9e5f8 100%); border-radius: 25px; margin-bottom: 8px; overflow: clip; display: flex; flex-direction: column; padding: 18px 16px 16px; }

/* ---- top bar: day + next draw on the left, icons on the right ---- */
.top-bar { position: relative; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.tb-row { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; }
.hud-left { display: flex; flex-direction: column; line-height: 1.1; flex: 0 0 auto; }
.hud-day { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nf-purple-solid); white-space: nowrap; }
.hud-day.is-bump { animation: cityBump 0.5s ease; }
.hud-city { display: block; min-width: 0; text-align: left; font-style: italic; font-size: 0.98rem; color: var(--nf-purple-solid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-city.is-bump { animation: cityBump 0.5s ease; }
.tb-icons { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.sound-btn { position: static; transform: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; color: var(--nf-purple); cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; }
.sound-btn svg { width: 22px; height: 22px; }
.sound-btn .sound-off { display: none; }
.sound-btn.is-muted .sound-on { display: none; }
.sound-btn.is-muted .sound-off { display: block; }
.sound-btn.is-muted { color: rgba(86, 44, 195, 0.45); }
.sound-btn:hover { color: var(--nf-purple-solid); }
.sound-btn:active { transform: scale(0.9); }

/* Volim: the two levels, under the top-bar icons. Mizik is the theme; Son is the voice and the effects. */
.vol-pop { position: absolute; top: 40px; right: 0; z-index: 40; width: 250px; padding: 10px 12px; border-radius: 14px; background: var(--nf-panel, #fff); border: 1px solid var(--nf-hairline-25); box-shadow: 0 10px 28px rgba(28, 16, 74, 0.18); display: flex; flex-direction: column; gap: 8px; }
.vol-row { display: flex; align-items: center; gap: 8px; }
.vol-mute { width: 30px; height: 30px; flex: 0 0 auto; }
.vol-mute svg { width: 19px; height: 19px; }
.vol-label { font-family: var(--font-body); font-size: 0.74rem; color: var(--nf-blue); flex: 0 0 38px; cursor: pointer; }
.vol-num { font-family: var(--font-body); font-size: 0.7rem; color: var(--nf-ink-muted, var(--nf-blue)); flex: 0 0 26px; text-align: right; font-variant-numeric: tabular-nums; }
.vol-range { flex: 1 1 auto; min-width: 0; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vol-range::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: rgba(86, 44, 195, 0.18); }
.vol-range::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(86, 44, 195, 0.18); }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%; background: var(--nf-purple-solid, #562cc3); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(28, 16, 74, 0.3); }
.vol-range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--nf-purple-solid, #562cc3); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(28, 16, 74, 0.3); }
.vol-range:focus-visible { outline: 2px solid var(--nf-purple-solid, #562cc3); outline-offset: 3px; border-radius: 999px; }
.vol-note { margin: 0; font-family: var(--font-body); font-size: 0.66rem; line-height: 1.35; color: var(--nf-ink-muted, var(--nf-blue)); opacity: 0.85; }
.cmd-btn.live { color: var(--ember-deep); animation: pulseColor 1s infinite; }
@keyframes pulseColor { 50% { opacity: 0.4; } }
.tiraj-btn { border: none; border-radius: 999px; padding: 7px 12px; font-family: inherit; font-size: 0.72rem; font-weight: 700; color: #fff; cursor: pointer; white-space: nowrap;
  background: linear-gradient(96deg, var(--ember) 0%, var(--ember-deep) 100%); box-shadow: 0 4px 12px rgba(224,79,31,0.35); transition: transform 0.15s ease; }
.tiraj-btn:active { transform: scale(0.95); }
.tiraj-btn[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.hud-money { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hud-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 11px 5px; border-radius: 8px; border: none;
  background: linear-gradient(150deg, #fdf3da 0%, #f5e2b6 62%, #ecd29a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -2px 3px rgba(140,96,40,0.35), 0 2px 8px rgba(60,30,100,0.18);
  font-size: 1rem; line-height: 1; color: var(--tile-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The unit, and under it what kind of money this is. Two lines from one pseudo-element because
   the number is written with textContent, which would wipe any real child put inside the chip. */
/* The unit, and under it what kind of money this is: the two words stacked and centred on
   each other, and the block centred in the pill rather than hung off the number's baseline
   (the chip aligns its items to the baseline, which is right for the figure, not for this). */
.hud-chip::after { content: 'GOUD\Ajwèt'; white-space: pre; text-align: center; align-self: center; line-height: 1.06; font-size: 0.48rem; font-weight: 700; letter-spacing: 0.09em; text-indent: 0.09em; color: rgba(74, 52, 24, 0.6); }
.hud-chip.is-bump { animation: scoreBump 0.38s ease; }
@keyframes scoreBump { 30% { transform: scale(1.22) rotate(-2deg); } 60% { transform: scale(0.96); } }
.hud-debt { font-size: 0.6rem; font-weight: 700; color: var(--ember-deep); letter-spacing: 0.04em; }
@keyframes cityBump { 30% { transform: scale(1.12); color: var(--mp-tip-blue); } }

/* ---- soundwave (visible while the voice speaks) ---- */
.soundwave { height: 0; opacity: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 3px; transition: height 300ms ease, opacity 300ms ease; flex-shrink: 0; }
body.speaking .soundwave { height: 26px; opacity: 1; margin-top: 4px; }
.soundwave-bar { width: 4px; height: 6px; border-radius: 2px; background: var(--nf-grad); animation: barBounce var(--bar-speed, 0.6s) ease-in-out infinite alternate; animation-delay: var(--bar-delay, 0s); }
.soundwave-bar:nth-child(3n+1) { --bar-speed: 0.55s; } .soundwave-bar:nth-child(3n+2) { --bar-speed: 0.72s; } .soundwave-bar:nth-child(3n) { --bar-speed: 0.46s; }
.soundwave-bar:nth-child(5n+1) { --bar-delay: 0s; } .soundwave-bar:nth-child(5n+2) { --bar-delay: 0.12s; } .soundwave-bar:nth-child(5n+3) { --bar-delay: 0.06s; } .soundwave-bar:nth-child(5n+4) { --bar-delay: 0.16s; } .soundwave-bar:nth-child(5n) { --bar-delay: 0.09s; }
@keyframes barBounce { from { height: 5px; } to { height: 22px; } }

/* ---- screens ---- */
.screen { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; animation: screenIn 0.3s ease; overflow-y: auto; scrollbar-width: none; padding-top: 4px; }
.screen::-webkit-scrollbar { display: none; }
.screen.is-active { display: flex; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================ HOME */
.home-hero { margin-top: 4px; flex-shrink: 0; display: flex; justify-content: center; }
.home-hero img { width: 92%; max-width: 430px; aspect-ratio: 998 / 809; height: auto; object-fit: cover;   /* the picture's own shape: it shows whole */ border-radius: 24px; box-shadow: 0 0.8rem 1.8rem rgba(85,70,150,0.22), 0 0.3rem 0.7rem rgba(86,44,195,0.12); }
.home-title { --ht: 60px; margin-top: 14px; display: flex; justify-content: center; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.home-tile { width: var(--ht); height: calc(var(--ht) * 1.12); display: flex; align-items: center; justify-content: center; border-radius: calc(var(--ht) * 0.14);
  background: linear-gradient(160deg, #fffdf0 0%, #fff6c8 55%, #ffe9a4 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -3px 5px rgba(120,100,60,0.35), 0 6px 10px rgba(0,0,0,0.28);
  font-size: calc(var(--ht) * 0.36); line-height: 1; color: var(--tile-ink); user-select: none; -webkit-user-select: none; }
.home-tile--wide { width: auto; padding: 0 26px; font-size: calc(var(--ht) * 0.44); letter-spacing: 0.04em; }
@media (max-height: 760px) { .home-title { --ht: 50px; gap: 5px; } .home-hero img { width: 64%; } }   /* a short screen: a smaller picture, still whole */
@media (max-height: 639px) { .home-title { --ht: 42px; gap: 4px; } }
.home-sub { margin-top: 10px; text-align: center; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; color: var(--nf-purple-solid); }   /* one line, whatever the phone's font; sentence case, not shouted */
@media (max-width: 380px) { .home-sub { font-size: 0.74rem; letter-spacing: 0; } }   /* the smallest phones give up size, never the end of the line */

.mode-cards { margin-top: 18px; display: flex; flex-direction: column; gap: var(--breather); }
.mode-card { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px; background: var(--nf-card); border: 1px solid var(--nf-frame-stroke); border-radius: 18px; cursor: pointer; text-align: left; font-family: inherit; color: var(--nf-blue); box-shadow: 0 2px 10px rgba(60,30,100,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.mode-card:hover { transform: translateY(-2px); border-color: rgba(109, 138, 255, 0.6); box-shadow: 0 6px 18px rgba(60,30,100,0.12); background: #e4efff; }   /* the same pastel blue a card gets when a pointer rests on it */
.mode-card:active { transform: scale(0.98); }
.mode-card__glyph { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nf-disc); font-size: 1.35rem; }
.mode-card__body { flex: 1 1 auto; min-width: 0; }
.mode-card__name { display: block; font-style: italic; font-weight: 500; font-size: 1.05rem; color: var(--nf-purple-solid); }   /* 500 is the heaviest italic the page loads */
.mode-card__desc { display: block; margin-top: 3px; font-size: 0.74rem; line-height: 1.4; color: rgba(49,86,142,0.72); font-family: var(--font-body); }
.mode-card__chev { width: 18px; height: 18px; flex-shrink: 0; color: var(--nf-stroke-50); }
.home-links { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-shrink: 0; }
.klasman-link { margin: 0; padding: 8px 18px; border: 1px solid var(--nf-frame-stroke); border-radius: 999px; background: linear-gradient(160deg, #ffffff 0%, #f1edfb 100%); color: var(--nf-purple-solid); font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(60,30,100,0.06); display: inline-flex; align-items: center; gap: 6px; }
.klasman-link:hover { background: var(--nf-disc); border-color: var(--nf-stroke-50); }
.klasman-link:active { transform: scale(0.96); }
.home-best { margin-top: auto; padding-top: 14px; text-align: center; font-size: 0.72rem; font-weight: 600; color: rgba(86,44,195,0.55); font-family: var(--font-body); }

/* ---- settings-style tabs (personality picker + game nav) ---- */
.set-tabs { display: flex; gap: 6px; width: 100%; margin: 8px 0 0; flex-shrink: 0; }
.set-tab { flex: 1; padding: 8px 6px; border: 1px solid var(--nf-frame-stroke); border-radius: 11px; background: transparent; color: var(--nf-blue); font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; }
.set-tab.is-on, .set-tab.active { background: var(--nf-purple-solid); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(84,44,194,0.28); }
.game-tabs { margin-top: 10px; }
.settings-sub { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49,86,142,0.6); margin: 12px 0 6px; text-align: center; }
.set-note { margin: 6px 0 0; font-size: 0.7rem; color: var(--nf-blue); opacity: 0.75; text-align: center; font-family: var(--font-body); line-height: 1.4; }

/* ---- inputs ---- */
.input, .ui-lang { width: 100%; font: inherit; font-size: 0.95rem; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--nf-frame-stroke); background: var(--nf-card); color: var(--nf-blue); }
.input::placeholder { color: rgba(49,86,142,0.4); font-family: var(--font-body); font-style: italic; }
.input:focus { outline: none; border-color: var(--nf-stroke-50); box-shadow: 0 0 0 3px var(--nf-disc); }

/* ---- shared buttons ---- */
.btn { width: 100%; margin-top: 10px; padding: 13px 14px; border: none; border-radius: 16px; background: var(--nf-grad); box-shadow: 0 6px 18px rgba(167,78,222,0.32); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, filter 0.2s ease; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.ghost { border: 1px solid var(--nf-frame-stroke); background: linear-gradient(160deg, #ffffff 0%, #f1edfb 100%); color: var(--nf-purple-solid); box-shadow: none; }
.btn.ghost:hover { background: var(--nf-disc); filter: none; }
.btn.red { background: linear-gradient(96deg, var(--ember) 0%, var(--ember-deep) 100%); box-shadow: 0 6px 18px rgba(224,79,31,0.3); }
.btn.green { background: linear-gradient(96deg, #3fd0a0 0%, var(--hit-green) 100%); box-shadow: 0 6px 18px rgba(47,180,124,0.3); }
.btn.gold { background: linear-gradient(150deg, #fdf3da 0%, #f5e2b6 62%, #ecd29a 100%); color: var(--tile-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -2px 3px rgba(140,96,40,0.35), 0 2px 8px rgba(60,30,100,0.18); }
.btn.sm { width: auto; margin-top: 0; padding: 8px 12px; font-size: 0.78rem; border-radius: 11px; }
.btn.block { width: 100%; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---- cards ---- */
.card { position: relative; margin-top: var(--breather); padding: 16px 14px; background: var(--nf-card); border: 1px solid var(--nf-frame-stroke); border-radius: 18px; box-shadow: 0 2px 10px rgba(60,30,100,0.06); flex-shrink: 0; }
.card:first-child { margin-top: 6px; }
.card h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49,86,142,0.6); margin-bottom: 8px; }
.card p { font-size: 0.88rem; line-height: 1.5; font-family: var(--font-body); color: rgba(49,86,142,0.85); }
.muted { color: rgba(49,86,142,0.6); font-family: var(--font-body); font-size: 0.82rem; }
.small { font-size: 0.78rem; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--nf-hairline-25); font-size: 0.85rem; font-family: var(--font-body); }
.kv b { font-family: var(--font-body); font-weight: 400; color: var(--nf-blue); font-variant-numeric: tabular-nums; }
.kv:last-child { border-bottom: none; }
.big { font-size: 1.4rem; }
.good { color: var(--hit-green) !important; } .bad { color: var(--ember-deep) !important; } .sonson { color: var(--nf-purple-solid); }
.choice { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--nf-disc); border: 1px solid var(--nf-frame-stroke); font-family: inherit; font-size: 0.74rem; font-weight: 700; color: var(--nf-purple-solid); cursor: pointer; font-variant-numeric: tabular-nums; }
.chip.on { background: var(--nf-grad); color: #fff; border-color: transparent; }
.hint { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--nf-disc); border: 1px solid var(--nf-hairline-25); font-size: 0.78rem; line-height: 1.4; font-family: var(--font-body); color: var(--nf-blue); }
.hint.bad { background: rgba(224,79,31,0.08); border-color: rgba(224,79,31,0.3); }

/* ---- fich window ---- */
.queue-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49,86,142,0.6); flex-shrink: 0; }
.cho { color: var(--ember-deep); }
.customer { display: flex; gap: 12px; align-items: flex-start; }
.avatar { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nf-grad); color: #fff; font-size: 1.2rem; }
.customer .name { font-style: italic; font-size: 1rem; color: var(--nf-purple-solid); }
.customer .name .muted { font-size: 0.7rem; font-style: normal; }
.customer .line { margin-top: 4px; font-family: var(--font-body); font-style: italic; font-size: 0.95rem; line-height: 1.45; color: var(--nf-blue); }
.customer .line.hidden { filter: blur(6px); user-select: none; }
.mic-area { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 10px; }
.mic-button { position: relative; width: 74px; height: 74px; border-radius: 50%; border: none; background: var(--mp-tip-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(63,52,230,0.35), 0 0 0 10px var(--nf-disc); transition: transform 0.15s ease, background 0.2s ease; }
.mic-button svg { width: 30px; height: 30px; }
.mic-button:active { transform: scale(0.95); }
.mic-button.live { background: var(--ember-deep); box-shadow: 0 8px 22px rgba(224,79,31,0.4), 0 0 0 10px rgba(224,79,31,0.12); animation: micPulse 1s infinite; }
.mic-button.busy { background: var(--nf-purple-solid); }
.mic-button[aria-disabled="true"] { background: rgba(86,44,195,0.3); box-shadow: none; }
.mic-ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(224,79,31,0.5); transform: scale(var(--lvl, 1)); opacity: 0.7; pointer-events: none; }
@keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(224,79,31,0.45); } 100% { box-shadow: 0 0 0 18px rgba(224,79,31,0); } }
.tagline { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(49,86,142,0.6); text-align: center; }
.fich { margin-top: 6px; padding: 12px; border-radius: 12px; text-align: center;
  background: linear-gradient(160deg, #fffdf0 0%, #fff6c8 55%, #ffe9a4 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.9), inset 0 -3px 5px rgba(120,100,60,0.35), 0 6px 10px rgba(0,0,0,0.18); color: var(--tile-ink); }
.fich .typ { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.fich .num { font-size: 2.4rem; line-height: 1.1; letter-spacing: 0.06em; }
.fich .amt { font-size: 0.95rem; color: var(--ember-deep); }

/* ---- tiraj ---- */
.lo-row { display: flex; justify-content: center; gap: 12px; margin: 10px 0 6px; }
.lo { width: 96px; text-align: center; }
.lo .ball { width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35) 0, transparent 40%), var(--nf-purple-solid); box-shadow: 0 8px 18px rgba(84,44,194,0.35); }
/* ── The three lo wear their position: premye red, dezyèm green, twazyèm blue ──────────
   The same three colours everywhere a draw is written down, so a number's place is legible
   without reading the order. They are the palette the share card already paints with. */
.lo[data-lo="0"] .ball { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35) 0, transparent 40%), var(--lo-1); box-shadow: 0 8px 18px rgba(210, 16, 52, 0.38); }
.lo[data-lo="1"] .ball { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35) 0, transparent 40%), var(--lo-2); box-shadow: 0 8px 18px rgba(31, 138, 76, 0.38); }
.lo[data-lo="2"] .ball { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35) 0, transparent 40%), var(--lo-3); box-shadow: 0 8px 18px rgba(53, 103, 214, 0.38); }
.lo[data-lo="0"] .lbl { color: var(--lo-1); }
.lo[data-lo="1"] .lbl { color: var(--lo-2); }
.lo[data-lo="2"] .lbl { color: var(--lo-3); }
/* a draw written in a row: the same three colours, as text */
.lo1 { color: var(--lo-1); }
.lo2 { color: var(--lo-2); }
.lo3 { color: var(--lo-3); }
.lo1, .lo2, .lo3 { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
/* A draw is one thing: the three lo stay on one line and the column takes the width it needs,
   which it can only do if the cell refuses to break. The day-and-name column wraps instead —
   it is the one thing in the row that reads fine over two lines. */
td.lo-cell { white-space: nowrap; width: 1%; }
td.lo-cell .lo1, td.lo-cell .lo2, td.lo-cell .lo3 { padding: 0 1px; }
/* Holding the draw on one line costs the row width it does not have on a small phone, so the
   narrow case pays for it out of the padding and a little type: five columns, one line each. */
@media (max-width: 400px) {
  /* .card in front on purpose: the base table.src rules are declared further down this file,
     and a media query does not raise specificity — without it these lose on source order. */
  .card table.src { font-size: 0.7rem; }
  .card table.src td, .card table.src th { padding-left: 1px; padding-right: 1px; }
  .card table.src td:first-child, .card table.src th:first-child { padding-left: 0; }
  .card table.src td:last-child, .card table.src th:last-child { padding-right: 0; }
}
.lo .lbl { margin-top: 6px; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(49,86,142,0.6); }
/* said after .lo .lbl, so the three positions keep their own colour on the label too */
.lo[data-lo="0"] .lbl { color: var(--lo-1); }
.lo[data-lo="1"] .lbl { color: var(--lo-2); }
.lo[data-lo="2"] .lbl { color: var(--lo-3); }

/* ---- map ---- */
.map { width: 100%; aspect-ratio: 100 / 74; margin-top: 6px; border-radius: 18px; border: 1px solid var(--nf-frame-stroke); box-shadow: 0 2px 10px rgba(60,30,100,0.06); flex-shrink: 0; display: block; }
.map .dom { fill: #e6e3f2; stroke: rgba(86,44,195,0.25); stroke-width: 0.35; }
.map .land { fill: url(#landg); stroke: #b8965a; stroke-width: 0.45; stroke-linejoin: round; }
.map .road { stroke: rgba(84,44,194,0.42); stroke-width: 0.55; stroke-linecap: round; fill: none; }
.map .road.long { stroke-dasharray: 1.4 0.9; stroke-width: 0.45; }
.map .cg { cursor: pointer; }
.map .hit { fill: transparent; }
.map .city { fill: #fff; stroke: var(--nf-purple-solid); stroke-width: 0.7; transition: r 0.2s ease; }
.map .city.mine { fill: var(--nf-purple-solid); }
.map .city.his { stroke: var(--ember-deep); }
.map .city.here { stroke: var(--mp-tip-blue); stroke-width: 1.2; }
.map .city.sel { stroke-width: 1.4; filter: drop-shadow(0 0 1px rgba(63,52,230,0.8)); }
.map .halo { fill: rgba(63,52,230,0.18); stroke: rgba(63,52,230,0.5); stroke-width: 0.4; animation: haloPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes haloPulse { 0%, 100% { transform: scale(0.85); opacity: 0.9; } 50% { transform: scale(1.25); opacity: 0.35; } }
.map .cname { font-size: 2.6px; fill: var(--nf-blue); pointer-events: none; font-family: var(--font-body); paint-order: stroke; stroke: rgba(255,255,255,0.85); stroke-width: 0.9px; stroke-linejoin: round; }
.map .air { font-size: 2.2px; fill: rgba(49,86,142,0.7); pointer-events: none; }
.map .flag { fill: var(--nf-purple-solid); stroke: #fff; stroke-width: 0.25; }
.map .sflag { fill: var(--ember-deep); stroke: #fff; stroke-width: 0.25; }
.map .mtitle { font-size: 4.2px; fill: rgba(84,44,194,0.35); font-family: var(--font-body); letter-spacing: 0.4px; }
.map .mtitle.small { font-size: 2.2px; letter-spacing: 0.1px; }
.map .compass circle { fill: rgba(255,255,255,0.7); stroke: rgba(84,44,194,0.4); stroke-width: 0.3; }
.map .compass path { fill: var(--ember-deep); }
.map .compass text { font-size: 2.4px; fill: rgba(49,86,142,0.7); font-family: var(--font-body); }
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 2px 0; font-size: 0.64rem; color: rgba(49,86,142,0.7); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.legend .i-mine { background: var(--nf-purple-solid); } .legend .i-his { background: #fff; border: 1.5px solid var(--ember-deep); } .legend .i-here { background: #fff; border: 2px solid var(--mp-tip-blue); }
.city-chips { max-height: 92px; overflow-y: auto; scrollbar-width: none; }
.city-chips::-webkit-scrollbar { display: none; }
.chip.here { border-color: var(--mp-tip-blue); box-shadow: inset 0 0 0 1px var(--mp-tip-blue); }
.city-title { font-style: italic; color: var(--nf-purple-solid); }

/* ---- lists ---- */
.stars { color: #e0a020; letter-spacing: 0.05em; font-family: var(--font-body); }
.list-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--nf-hairline-25); font-size: 0.85rem; }
.list-item:last-child { border-bottom: none; }
.log-item { padding: 6px 0; border-bottom: 1px solid var(--nf-hairline-25); font-size: 0.8rem; line-height: 1.4; font-family: var(--font-body); color: rgba(49,86,142,0.85); }
.log-item .t { font-family: var(--font-body); font-size: 0.6rem; color: rgba(49,86,142,0.5); margin-right: 6px; }
.log-item.bad { color: var(--ember-deep); } .log-item.good { color: var(--hit-green); } .log-item.sonson { color: var(--nf-purple-solid); }
.scroll-list { max-height: 180px; overflow: auto; margin-top: 6px; }
.mt { margin-top: 12px; } .mt-s { margin-top: 8px; } .my { margin: 12px 0; }

/* ---- end card ---- */
.over { text-align: center; padding: 24px 16px; }
.over .big { margin-top: 8px; font-style: italic; font-size: 1.5rem; color: var(--nf-purple-solid); }
.end-emblem { font-size: 2.6rem; }

/* ---- toast: lives inside the frost panel, above the tabs ---- */
.dash-panel { position: relative; }
.toast { position: absolute; left: 16px; right: 16px; bottom: 196px; z-index: 50; padding: 12px 14px; border-radius: 14px;
  background: var(--nf-purple-solid); color: #fff !important; font-family: var(--font-body); font-size: 0.86rem; line-height: 1.35; font-weight: 700;
  text-align: center; white-space: normal; overflow-wrap: anywhere; min-height: 44px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(60,30,100,0.3); animation: toastIn 0.25s ease; }
.toast.bad { background: var(--ember-deep); }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) { .screen, .mic-button.live, .soundwave-bar, .toast { animation: none; } }
.row .btn { width: auto; margin-top: 0; padding: 11px 18px; }
.row .btn.sm { padding: 8px 12px; }
.row .input { flex: 1 1 auto; min-width: 0; }

/* ---- ledger + cash float ---- */
.ledger-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--nf-hairline-25); font-size: 0.78rem; font-family: var(--font-body); }
.ledger-item:last-child { border-bottom: none; }
.ledger-item .t { font-family: var(--font-body); font-size: 0.58rem; color: rgba(49,86,142,0.5); flex: 0 0 34px; }
.ledger-item b { font-family: var(--font-body); font-weight: 400; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ledger-item .bal { font-family: var(--font-body); font-size: 0.68rem; color: rgba(49,86,142,0.55); flex: 0 0 52px; text-align: right; font-variant-numeric: tabular-nums; }
.cash-float { position: absolute; right: 0; top: -18px; font-family: var(--font-body); font-size: 1rem; white-space: nowrap; pointer-events: none; animation: cashFloat 1.1s ease-out forwards; }
.cash-float.up { color: var(--hit-green); }
.cash-float.down { color: var(--ember-deep); }
@keyframes cashFloat { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }

.queue-bar { gap: 6px; }
.queue-bar .tiraj-now { margin-left: auto; background: linear-gradient(96deg, var(--ember) 0%, var(--ember-deep) 100%); color: #fff; border-color: transparent; font-size: 0.66rem; padding: 5px 10px; }

/* ---- background sales ticker + revenue ---- */
.bg-card h3 { margin-bottom: 4px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hit-green); box-shadow: 0 0 0 0 rgba(47,180,124,0.5); animation: liveDot 1.2s infinite; flex-shrink: 0; margin-bottom: 6px; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(47,180,124,0.5); } 100% { box-shadow: 0 0 0 8px rgba(47,180,124,0); } }
.ticker { display: flex; flex-direction: column; gap: 3px; min-height: 22px; }
.tick { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 9px; background: var(--nf-disc); font-size: 0.72rem; font-family: var(--font-body); color: var(--nf-blue); white-space: nowrap; }   /* one line per sale, always */
.tick-ico { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; }
.tick.bank { background: rgba(224,160,32,0.12); }
.tick.is-new { animation: tickIn 0.45s ease; }
@keyframes tickIn { from { opacity: 0; transform: translateX(-14px); background: rgba(47,180,124,0.25); } to { opacity: 1; transform: none; } }
.tick-who { flex: 0 1 auto; max-width: 38%; font-family: var(--font-body); font-size: 0.66rem; color: var(--nf-purple-solid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tick b { flex: 0 0 auto; }
.tick-what { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick b { font-family: var(--font-body); font-weight: 400; color: var(--hit-green); }
.rev { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.rev-item { display: flex; flex-direction: column; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--nf-hairline-25); background: #fff; }
.rev-item span { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49,86,142,0.6); }
.rev-item b { font-weight: 400; font-size: 0.98rem; color: var(--nf-blue); font-variant-numeric: tabular-nums; }
.rev-item i { font-style: normal; font-size: 0.62rem; color: rgba(49,86,142,0.5); font-family: var(--font-body); }
.rev-item.total { background: linear-gradient(150deg, #fdf3da 0%, #f5e2b6 100%); border-color: transparent; }
.rev-item.total b { color: var(--tile-ink); }
table.src { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: var(--font-body); }
table.src th { font-family: var(--font-body); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49,86,142,0.6); text-align: right; padding: 2px 4px; }
table.src th:first-child, table.src td:first-child { text-align: left; }
table.src td { padding: 5px 4px; border-top: 1px solid var(--nf-hairline-25); text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-body); }
table.src td:first-child { font-family: var(--font-body); }
table.src td i { font-style: normal; font-size: 0.62rem; color: rgba(49,86,142,0.5); }

/* ---- sellers animation ---- */
.bg-bar { height: 6px; border-radius: 999px; background: var(--nf-disc); overflow: hidden; margin: 4px 0 8px; }
.bg-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--nf-grad); transition: width 0.5s ease; }
.sellers { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }   /* one row, scrolled sideways: every seller stays readable */
.sellers::-webkit-scrollbar { display: none; }
.seller { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--nf-hairline-25); background: #fff; white-space: nowrap; }
.seller.bank { background: rgba(224,160,32,0.10); }
.seller.lari { background: rgba(63,52,230,0.07); }
.seller-ico { font-size: 1.7rem; line-height: 1; }
.seller-name { font-family: var(--font-body); font-size: 0.74rem; color: var(--nf-purple-solid); }
.seller-n { font-family: var(--font-body); font-weight: 400; font-size: 1.05rem; color: var(--nf-blue); line-height: 1; }
.seller-n::after { content: ' fich'; font-size: 0.58rem; color: rgba(49,86,142,0.55); }
.seller-goud { font-style: normal; font-size: 0.74rem; color: var(--hit-green); font-family: var(--font-body); }
.seller-goud::after { content: ' goud'; }
.seller.is-sold { animation: sellerPop 0.5s ease; }
@keyframes sellerPop { 0% { transform: scale(1); } 35% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(47,180,124,0.25); background: rgba(47,180,124,0.18); } 100% { transform: scale(1); } }
.rev { grid-template-columns: 1fr 1fr; }
.rev-item.total { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; }
/* header: keep the city name and the Tiraj button out of each other's way */

/* ---- accelerated half-day clock ---- */
.dayclock { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.dayclock .bg-bar { margin: 0; }
.dc-ico { font-size: 0.95rem; }
.dc-time { font-family: var(--font-body); font-size: 0.72rem; color: var(--nf-purple-solid); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.bg-note { margin: 0 0 6px; text-align: left; }
table.src td b { font-weight: 400; }

/* ---- settings screen ---- */
.settings-list { display: flex; flex-direction: column; gap: 8px; }

.day-btn { background: linear-gradient(96deg, var(--bubble-blue) 0%, var(--nf-purple-solid) 100%); box-shadow: 0 4px 12px rgba(84,44,194,0.3); }
.hud-bank { display: block; font-style: normal; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(49,86,142,0.6); line-height: 1; }
.hud-city { line-height: 1.05; }

/* ---- music toggle (MoDoMiNo) ---- */
.music-btn .music-off { display: none; }
.music-btn.is-off .music-on { display: none; }
.music-btn.is-off .music-off { display: block; }
.music-btn.is-off { color: rgba(86, 44, 195, 0.45); }
/* ---- toggles (MoDoMiNo level-toggle) ---- */
.level-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: var(--nf-card); border: 1px solid var(--nf-frame-stroke); border-radius: 14px; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--nf-blue); cursor: pointer; text-align: left; }
.level-toggle b { color: var(--nf-purple-solid); }
.level-toggle__box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--nf-stroke-50); background: #fff; transition: background 0.15s ease, border-color 0.15s ease; }
.level-toggle.is-on .level-toggle__box { background: var(--nf-grad); border-color: transparent; box-shadow: inset 0 0 0 3px #fff; }

/* ---- sharing (MoDoMiNo wa-btn) ---- */
.share-row { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.kat-preview { margin-top: 10px; min-height: 40px; }
.kat-preview img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--nf-frame-stroke); box-shadow: 0 4px 14px rgba(60,30,100,0.14); }
.kat-preview .kat-note { font-size: 0.66rem; color: rgba(49,86,142,0.6); text-align: center; margin: 6px 0 0; font-style: italic; }
.wa-btn { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: 16px; background: #25D366; color: #fff; font-family: inherit; font-size: 0.92rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(37,211,102,0.35); transition: filter 0.2s ease, transform 0.15s ease; }
.wa-btn svg { width: 20px; height: 20px; }
.wa-btn:hover { filter: brightness(1.06); }
.wa-btn:active { transform: scale(0.98); }
.share-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.share-btn svg { width: 18px; height: 18px; }
.end-stats { margin: 14px 0 10px; display: flex; justify-content: center; gap: 22px; }
.end-stat { text-align: center; }
.end-stat b { display: block; font-size: 1.4rem; font-weight: 400; color: var(--nf-blue); font-variant-numeric: tabular-nums; }
.end-stat span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49,86,142,0.55); }

/* ---- klasman (MoDoMiNo lb-card) ---- */
.lb-card { padding: 16px 14px 12px; box-shadow: 0 8px 26px rgba(60,30,100,0.10); }
table.src.lb td:nth-child(2) { text-align: left; font-family: var(--font-body); }
table.src.lb td:first-child { font-family: var(--font-body); color: var(--nf-purple-solid); }
table.src.lb tr.is-me td { background: rgba(84,44,194,0.08); }
table.src.lb tr.is-me td:first-child { border-radius: 8px 0 0 8px; }
table.src.lb tr.is-me td:last-child { border-radius: 0 8px 8px 0; }
.set-note.bad { color: var(--ember-deep); opacity: 1; }

/* header: room for the town name between the day counter and the icons */
.sound-btn { width: 32px; height: 32px; }
.sound-btn svg { width: 21px; height: 21px; }
.hud-day { font-size: 0.6rem; letter-spacing: 0.06em; }
.hud-city { font-size: 0.98rem; }

/* ---- read the journal aloud ---- */
.play-btn.is-on { background: var(--nf-grad); color: #fff; border-color: transparent; }
.log-item { display: flex; align-items: flex-start; gap: 6px; }
.log-item .t { flex: 0 0 auto; }
.say-btn { flex: 0 0 auto; border: none; background: var(--nf-disc); border-radius: 8px; width: 24px; height: 22px; font-size: 0.7rem; cursor: pointer; line-height: 1; }
.say-btn:active { transform: scale(0.9); }
.log-item.is-reading { background: rgba(84,44,194,0.08); border-radius: 8px; padding-left: 4px; }
.ledger-item .say-btn { margin-right: 2px; }

/* ---- build stamp: bottom-right of the panel, out of the way ---- */
.build { position: absolute; right: 22px; bottom: 10px; font-size: 0.56rem; letter-spacing: 0.06em; color: rgba(86, 44, 195, 0.45); pointer-events: none; z-index: 3; font-variant-numeric: tabular-nums; }

/* ---- hire screen: one card per candidate ---- */
.cand { padding: 10px 0; border-bottom: 1px solid var(--nf-hairline-25); font-size: 0.85rem; }
.cand:last-of-type { border-bottom: none; }
.cand-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cand-ask { font-size: 0.78rem; color: var(--nf-purple-solid); white-space: nowrap; }
.cand-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 4px; }
.cand-stat { display: flex; flex-direction: column; line-height: 1.25; }
.cand-stat .cand-lbl { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49, 86, 142, 0.7); }
.cand-stat .stars { font-size: 0.95rem; }
.cand-stat i { font-style: normal; font-size: 0.72rem; color: rgba(49, 86, 142, 0.8); }
.cand-stat i.bad { color: var(--ember-deep); }
.cand-offers { margin-top: 6px; }
.chip.low { opacity: 0.45; }

/* ---- the books: reserve on the HUD, carry-forward line, bilan ---- */
.hud-rezev { color: rgba(49, 86, 142, 0.7); }
.hud-rezev.over { color: var(--ember-deep); font-weight: 700; }
.ledger-item.carry { opacity: 0.7; font-style: italic; }
.src.bilan td:nth-child(2), .src.bilan td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }

/* ===================== top of screen, reorganised =====================
   One header row (day · city · cash), one period strip, then the game.
   The Tiraj action is a sticky bar above the tabs; the command mic floats;
   the gear lives in the tab bar; music/voice toggles stay on the home screen
   and in Settings. Two type sizes up here: 0.62rem caps and 0.95rem. */
.top-bar { gap: 6px; }
.tb-row { min-height: 34px; }
.hud-day { font-size: 0.62rem; letter-spacing: 0.08em; }
.hud-city { font-size: 0.95rem; font-style: italic; }
.hud-money { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; background: none; border: none; padding: 0; margin-left: auto; cursor: pointer; font-family: inherit; }
.hud-chip { font-size: 0.95rem; padding: 5px 10px 4px; }
.hud-free { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(49, 86, 142, 0.7); font-variant-numeric: tabular-nums; }
.hud-free.over { color: var(--ember-deep); }
.tb-icons { margin-left: auto; }
.tb-icons + .hud-money { margin-left: 0; }

.period-strip { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 10px; border-radius: 12px;
  background: rgba(255,255,255,0.7); border: 1px solid var(--nf-hairline-25); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nf-purple-solid); }
.period-strip .ps-ico { font-size: 0.85rem; }
.period-strip .ps-name { white-space: nowrap; }
.period-strip .bg-bar { height: 6px; }
.period-strip .ps-time { font-variant-numeric: tabular-nums; color: rgba(49, 86, 142, 0.8); }
.period-strip .ps-count { white-space: nowrap; color: rgba(49, 86, 142, 0.8); }
.period-strip.ready { border-color: var(--ember); background: rgba(255, 122, 69, 0.08); }
.period-strip.ready .ps-count { color: var(--ember-deep); }

.cta { display: block; width: 100%; margin: 8px 0 0; padding: 11px 14px; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
.cta.ready { animation: ctaPulse 1.6s ease-in-out infinite; }
@keyframes ctaPulse { 50% { box-shadow: 0 4px 22px rgba(224,79,31,0.55); } }

.mic-tb.live { color: var(--ember-deep); animation: pulseColor 1s infinite; }

.tab-gear { flex: 0 0 38px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--nf-purple); }
.tab-gear svg { width: 18px; height: 18px; }
.tab { position: relative; }
.tab-badge { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 0.5rem; letter-spacing: 0.06em; padding: 2px 5px; border-radius: 999px; background: var(--ember-deep); color: #fff; }

/* Fenèt: the customer first; outside sales fold into one line */
.bg-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 0; font-family: inherit; font-size: 0.78rem; color: var(--nf-blue); cursor: pointer; text-align: left; }
.bg-head .chev { color: var(--nf-purple); }
.bg-card.is-open .bg-head { margin-bottom: 6px; }
.queue-n { font-size: 0.7rem; color: rgba(49, 86, 142, 0.7); }

/* ---- the announcement: each lo waits behind a "?" until the radio names it ---- */
.lo.wait .ball { color: transparent; opacity: 0.45; transform: scale(0.82); transition: none; }
.lo.wait .ball::after { content: '?'; position: absolute; color: rgba(255,255,255,0.85); font-size: 1.6rem; }
.lo .ball { position: relative; }
.lo.pop .ball { animation: loPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes loPop { 0% { transform: scale(0.6); opacity: 0.4; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* ---- the result flashes once the lo are out, and stays bold ---- */
.kv.rezilta.flash b { font-weight: 900; font-size: 1.05em; animation: rezFlash 0.5s ease-in-out 5; }
.kv.rezilta.flash b.good { --rez: var(--hit-green); }
.kv.rezilta.flash b.bad { --rez: var(--ember-deep); }
@keyframes rezFlash { 0%, 100% { opacity: 1; text-shadow: none; } 50% { opacity: 0.25; text-shadow: 0 0 12px var(--rez, currentColor); } }

/* ---- foldable data cards: the heading is the toggle ---- */
.fold-h { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.fold-h .chev { margin-left: auto; color: var(--nf-purple); font-size: 0.8rem; line-height: 1; }
.fold-h .chev::before { content: '▾'; }
.card.is-closed .fold-h .chev::before { content: '▸'; }
.card.is-closed > :not(.fold-head) { display: none !important; }
.card.is-closed .fold-h { margin-bottom: 0; }
.card.is-closed .fold-head.row { margin-bottom: 0; }
.bg-head .grow { font-weight: 700; }

/* fold headings read as controls: bold, in the brand blue */
.card .fold-h { font-weight: 800; color: var(--nf-purple-solid); }
.card .fold-h .chev { color: var(--nf-purple-solid); }

/* ---- the Monopoly layer ---- */
.you-face { font-size: 1.6rem; line-height: 1; }
.chip.on { background: var(--nf-purple-solid); color: #fff; border-color: transparent; }

/* ---- a card brought to the player: pastel blue for a moment, then back ---- */
.card { transition: background-color 1.2s ease, border-color 1.2s ease; }
.card.is-focus { background-color: #e4efff; border-color: rgba(109, 138, 255, 0.6); transition: background-color 0.2s ease, border-color 0.2s ease; }
/* a pointer resting on a card for half a second: same pastel blue; leaving resets at once; never on touch screens */
@media (hover: hover) and (pointer: fine) {
  .card:hover { background-color: #e4efff; border-color: rgba(109, 138, 255, 0.6); transition: background-color 0.25s ease 0.5s, border-color 0.25s ease 0.5s; }
}

/* ---- the balance chip: bigger, pastel green in the black, pastel red in the red ---- */
.hud-chip { font-size: 1.66rem; padding: 8px 16px 6px; gap: 8px; }   /* 30% up from 1.28rem */
.hud-chip::after { font-size: 0.7rem; }
.tb-row--info { align-items: flex-end; min-height: 0; }                 /* the day line on the left, the balance on the right, under the icon row */
.tb-row--info .hud-left { flex: 1 1 auto; min-width: 0; padding-bottom: 4px; }
.tb-row--info .hud-day { font-size: 0.78rem; }                            /* 25% up from 0.62rem */
.tb-row--info .hud-city { font-size: 1.19rem; }                           /* 25% up from 0.95rem */
.hud-free { font-size: 0.7rem; }
.hud-chip.pos { background: linear-gradient(150deg, #e3f7e8 0%, #c9efd5 62%, #b4e5c3 100%); color: #1f5e3a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 3px rgba(40,110,70,0.25), 0 2px 8px rgba(40,110,70,0.18); }
.hud-chip.pos::after { color: rgba(31, 94, 58, 0.65); }
.hud-chip.neg { background: linear-gradient(150deg, #fde6e6 0%, #f7cdcd 62%, #f0b6b6 100%); color: #7a1f1f; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 3px rgba(150,40,40,0.25), 0 2px 8px rgba(150,40,40,0.18); }
.hud-chip.neg::after { color: rgba(122, 31, 31, 0.65); }
.src td.act { white-space: nowrap; text-align: right; }
.src td.act .btn.sm { padding: 3px 8px; font-size: 0.62rem; margin-left: 3px; }

/* ---- Bòlètopoli Plus ---- */
.mode-card.off { opacity: 0.55; }
.map .city.riv { stroke: #1f9e8c; stroke-width: 0.9; stroke-dasharray: 1.2 0.8; }
.legend .i-riv { border: 2px dashed #1f9e8c; background: transparent; }
.lb tr.is-me td { font-weight: 800; }

/* ---- the sezon directory and the back arrow ---- */
.back-btn { margin-right: 2px; }
.lobby { margin: 6px 0 8px; }
.lobby-row { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--nf-hairline-25); background: var(--nf-card); font-family: inherit; font-size: 0.8rem; color: var(--nf-blue); cursor: pointer; text-align: left; }
.lobby-row b { color: var(--nf-purple-solid); letter-spacing: 0.06em; }
.lobby-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: rgba(49, 86, 142, 0.8); }
.lobby-row i { color: var(--nf-purple); font-style: normal; }

/* ---- what the console says on the home screen ---- */
.banner { padding: 10px 14px; font-size: 0.8rem; color: var(--nf-purple-solid); text-align: center; }
.banner.bad { color: var(--ember-deep); border-color: var(--ember); }
.mode-cards.closed .mode-card, .klasman-link.is-closed { opacity: 0.45; pointer-events: none; }   /* maintenance: every door into a game, the resume button included */

/* ---- the language dropdown ---- */
.lang-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 10px 0 4px; font-size: 0.72rem; color: var(--nf-purple-solid); }   /* left-aligned, like the toggles under it */
.lang-row label { flex: 0 0 auto; text-align: left; white-space: nowrap; }
.lang-sel { flex: 0 0 180px; width: 180px; padding: 5px 10px; font-size: 0.82rem; }

/* ---- the top row: day · town · cash · gear ---- */
.tb-row .hud-money { margin-left: auto; }
.gear-btn { flex: 0 0 32px; width: 32px; height: 32px; margin-left: 4px; }
.gear-btn svg { width: 20px; height: 20px; }
.hud-money[hidden] + .tb-icons[hidden] + .gear-btn { margin-left: auto; }   /* no cash chip and no home icons: the gear alone sits top right */
.tb-icons + .gear-btn { margin-left: 0; }

/* ── Bòlètopoli Plus (+): the lobby and the room, MoDoMiNo's shapes ─────── */
.mode-card.is-soon { opacity: 0.55; cursor: default; }
.mode-card.is-soon:hover { transform: none; box-shadow: none; }
.mode-card__soon { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(84, 44, 194, 0.12); font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; color: var(--nf-purple-solid); }
.konek-sub { margin: -2px 0 10px; text-align: center; font-size: 0.8rem; color: rgba(49, 86, 142, 0.75); font-family: var(--font-body); font-style: italic; }
.konek-you, .konek-door, .konek-room { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.konek-room { padding: 12px; border-radius: 16px; background: var(--nf-card); border: 1px solid var(--nf-frame-stroke); }
.konek-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nf-blue); }
.konek-field small { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.konek-or { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 12px; color: var(--nf-blue); opacity: 0.55; }
.konek-or::before, .konek-or::after { content: ""; flex: 1; height: 1px; background: var(--nf-frame-stroke); }
.konek-h { margin: 4px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nf-blue); opacity: 0.85; }
.konek-joinrow { display: flex; gap: 8px; }
.konek-joinrow .input { flex: 1 1 auto; min-width: 0; }
.kk-btn { padding: 9px 14px; border: 1px solid var(--nf-frame-stroke); border-radius: 12px; background: var(--nf-card); color: var(--nf-purple-solid); font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.kk-btn:disabled { opacity: 0.4; cursor: default; }
.kk-share { display: block; width: 100%; margin: 4px 0 2px; padding: 13px; border: none; border-radius: 14px; background: #25d366; color: #06331a; font-family: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4); }
.kk-share:active { transform: scale(0.98); }
.kk-ghost { width: 100%; padding: 9px; border: 1px solid var(--nf-frame-stroke); border-radius: 12px; background: transparent; color: var(--nf-blue); font-family: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
/* the directory */
.konek-dir { display: flex; flex-direction: column; gap: 6px; }
.konek-dirhead { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nf-blue); opacity: 0.8; }
.konek-dirlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.konek-dirrow { width: 100%; display: grid; grid-template-columns: 1fr; gap: 1px; align-items: center; text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer; background: var(--nf-disc); border: 1px solid var(--nf-frame-stroke); color: inherit; font: inherit; }
.konek-dirname { font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-size: 17px; letter-spacing: 0.12em; color: var(--nf-blue); }
.konek-dirmeta { font-size: 12px; color: var(--nf-blue); opacity: 0.7; }
.konek-dirnote { margin: 0; }
.konek-refresh { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--nf-frame-stroke); background: var(--nf-disc); color: var(--nf-purple-solid); font-size: 17px; line-height: 1; cursor: pointer; }
.konek-refresh.is-spinning { animation: konekSpin 1s linear infinite; }
@keyframes konekSpin { to { transform: rotate(360deg); } }
/* open / private */
.konek-visib { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 6px; }
.konek-radio { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-radius: 12px; border: 1px solid var(--nf-frame-stroke); background: var(--nf-disc); font-size: 0.8rem; color: var(--nf-blue); }
.konek-radio span { display: flex; flex-direction: column; }
.konek-radio small { font-size: 0.7rem; opacity: 0.7; }
.konek-radio:has(input:checked) { border-color: var(--nf-purple-solid); box-shadow: inset 0 0 0 1px var(--nf-purple-solid); }
.konek-visline { margin: 0; text-align: center; font-size: 0.72rem; color: var(--nf-blue); opacity: 0.8; }
/* the code, the biggest thing on the panel */
.konek-codecard { text-align: center; margin: 2px 0 6px; }
.konek-codelabel { margin: 0 0 4px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nf-blue); opacity: 0.7; }
.konek-bigcode { display: block; width: 100%; padding: 12px 10px; border-radius: 14px; cursor: pointer; background: var(--nf-disc); border: 1px solid var(--nf-frame-stroke); color: var(--nf-blue); font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-weight: 700; font-size: clamp(26px, 9vw, 34px); letter-spacing: 0.18em; line-height: 1.15; text-indent: 0.18em; white-space: nowrap; overflow: hidden; }
.konek-bigcode.is-long { font-size: clamp(20px, 7.2vw, 28px); letter-spacing: 0.1em; text-indent: 0.1em; }
.konek-codehint { margin: 6px 0 0; font-size: 0.72rem; color: var(--nf-blue); opacity: 0.7; }
.konek-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #bbb; }
.konek-dot.is-on { background: var(--hit-green); box-shadow: 0 0 7px rgba(47, 180, 124, 0.9); }
.konek-dot.is-connecting { background: #ffc46b; animation: konekPulse 0.8s ease-in-out infinite alternate; }
.konek-dot.is-error, .konek-dot.is-off { background: var(--ember-deep); }
@keyframes konekPulse { from { opacity: 0.45; } to { opacity: 1; } }
/* the roster */
.konek-roster { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.konek-row { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 10px; background: var(--nf-disc); font-size: 0.82rem; color: var(--nf-blue); }
.konek-row.is-me { box-shadow: inset 0 0 0 1.5px var(--nf-stroke-50); }
.konek-row.is-owner { background: rgba(255, 196, 107, 0.22); box-shadow: inset 0 0 0 1.5px rgba(214, 150, 40, 0.6); }
.konek-row .konek-name { font-weight: 700; color: var(--nf-purple-solid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konek-row .konek-meta { margin-left: auto; font-size: 0.68rem; white-space: nowrap; opacity: 0.75; font-variant-numeric: tabular-nums; }
.konek-start { margin-top: 4px; }
/* taunts: the icon is the button, the line is what the other phones say */
.konek-taunts { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.konek-taunt { width: 34px; height: 34px; border: 1px solid var(--nf-frame-stroke); border-radius: 50%; background: var(--nf-card); font-size: 1rem; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; }
.konek-taunt.is-sent { background: var(--nf-purple-solid); transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) { .konek-refresh.is-spinning, .konek-dot.is-connecting { animation: none; } }

/* ── the winning strategy card (Settings) ─────────────────────────────── */
.strateji p { margin: 6px 0; font-size: 0.8rem; line-height: 1.45; color: var(--nf-blue); font-family: var(--font-body); }
.strateji h4 { margin: 12px 0 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nf-purple-solid); }
.strateji ul, .strateji ol { margin: 4px 0 6px; padding-left: 18px; font-size: 0.78rem; line-height: 1.45; color: var(--nf-blue); font-family: var(--font-body); }
.strateji li { margin: 3px 0; }
.strateji .kv { font-size: 0.76rem; }
.strateji .kv b { font-size: 0.78rem; text-align: right; }

/* ── the viral layer ─────────────────────────────────────────────────── */
/* boul cho */
.hot-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.hot { flex: 1 1 96px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 6px; border-radius: 12px; border: 1px solid var(--nf-frame-stroke); background: var(--nf-disc); font-family: inherit; color: var(--nf-blue); cursor: pointer; }
.hot b { font-family: var(--font-body); font-size: 1.3rem; color: var(--nf-purple-solid); }
.hot i { font-style: normal; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.hot span { font-size: 0.62rem; opacity: 0.75; }
.hot.danje { border-color: var(--ember); background: rgba(255, 122, 69, 0.1); }
.hot.danje span { color: var(--ember-deep); opacity: 1; font-weight: 700; }
.last-draws { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none; }
.last-draws .ld { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 4px 8px; border-radius: 10px; background: var(--nf-disc); font-size: 0.72rem; color: var(--nf-blue); }
.last-draws .ld i { font-style: normal; font-size: 0.6rem; opacity: 0.7; white-space: nowrap; }
.last-draws .ld b { font-variant-numeric: tabular-nums; }
/* missions */
.misyon { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--nf-hairline-25); font-size: 0.8rem; color: var(--nf-blue); }
.misyon.done { opacity: 0.6; text-decoration: line-through; }
.misyon .mbox { font-size: 0.95rem; }
.misyon b { font-variant-numeric: tabular-nums; }
/* home: sezon line, streak, challenge */
.home-live { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 8px 0 0; }
.home-live .chip { cursor: default; }
.sezon-line { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--nf-frame-stroke); background: var(--nf-card); font-family: inherit; font-size: 0.78rem; color: var(--nf-blue); cursor: pointer; text-align: left; }
.sezon-line b { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; color: var(--nf-purple-solid); }
.sezon-line span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; opacity: 0.85; }
.sezon-line i { font-style: normal; color: var(--nf-purple); }
/* bank tab strips */
.bank-strips { margin: 0 0 8px; }
/* results: next draw */
.next-draw { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 0; padding: 8px 10px; border-radius: 12px; background: var(--nf-disc); font-size: 0.78rem; color: var(--nf-blue); }
.next-draw b { color: var(--nf-purple-solid); }
/* coach marks */
.coach { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 60; width: min(360px, calc(100% - 24px)); padding: 12px 14px; border-radius: 14px; background: rgba(28, 20, 60, 0.94); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 0.82rem; line-height: 1.4; }
.coach .coach-step { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.coach .row { margin-top: 8px; gap: 8px; }
.coach .btn { background: #fff; color: var(--nf-purple-solid); border: none; }
.coach .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }
.coach-target { box-shadow: 0 0 0 3px var(--ember), 0 0 0 8px rgba(255, 122, 69, 0.25) !important; border-radius: 14px; }
/* live titles */
.fold-h .live { font-weight: 400; opacity: 0.75; letter-spacing: 0; text-transform: none; font-size: 0.68rem; margin-left: 6px; }
/* people first on Rapò */
.rapo-people .card { border-color: rgba(84, 44, 194, 0.35); }
/* map labels on small phones, taunt labels */
.map .mflag { font-style: normal; }
@media (max-width: 380px) { .map .cname { font-size: 3.2px; } .map .mtitle { font-size: 6px; } }   /* readable town names on 360-pixel phones */
@media (max-width: 340px) { .map .cname { font-size: 3.5px; } }

/* ── phase 4: contrast, tap targets, motion, small caps with their accents ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* money and status text: ≥ 4.5:1 on the card white; the brighter tints stay for fills */
.good { color: #1f8a5e; }
.bad { color: #c43d10; }
.muted, .set-note, .rev-item span, .log-item .t, .ledger-item .bal, .lo .lbl, .tagline, .card h3, .fold-h, .settings-sub { opacity: 1; }
.card h3, .fold-h { color: var(--nf-purple-solid); font-size: 0.8rem; letter-spacing: 0.04em; }   /* 12.8 px: È and Ò keep their accents */
.settings-sub, .hud-day, .rev-item span, .lo .lbl, .tagline, .log-item .t { font-size: max(0.75rem, 12px); }
.muted, .set-note { color: rgba(30, 58, 110, 0.9); }
.input::placeholder { color: rgba(30, 58, 110, 0.62); }
/* tap targets: 44 px where a thumb lands */
.set-tab, .game-tabs .tab { min-height: 44px; }
.chip, .kk-btn, .konek-refresh, .konek-taunt, .sound-btn, .gear-btn, .back-btn, .say-btn, .play-btn { min-height: 40px; min-width: 40px; }
.say-btn { position: relative; }
.say-btn::before { content: ""; position: absolute; inset: -6px; }   /* the hit area past the drawn button */
.btn.sm { min-height: 40px; }
/* another seed in the standings */
.lb tr.is-other td { opacity: 0.6; font-style: italic; }
/* one rule for every animation when the phone asks for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Kont Palefò: the sign-in gate and the account card (ported from MoDoMiNo) ---- */
.gate-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
.gate-modal.open { opacity: 1; pointer-events: auto; }
.gate-backdrop { position: absolute; inset: 0; background: rgba(30, 16, 66, 0.55); backdrop-filter: blur(3px); cursor: pointer; }
.gate-skip[disabled] { opacity: 0.4; cursor: not-allowed; text-decoration: none; }
.gate-skip-note { margin: 6px 0 0; font-family: var(--font-body); font-size: 0.72rem; line-height: 1.35; color: var(--nf-ink-muted, var(--nf-blue)); opacity: 0.85; text-align: center; }
.gate-card { position: relative; width: min(400px, 100%); max-height: 92vh; overflow-y: auto; scrollbar-width: none; padding: 26px 22px 20px; border-radius: 24px; background: var(--nf-card); border: 1px solid var(--nf-frame-stroke); box-shadow: 0 24px 60px rgba(40, 20, 90, 0.35); text-align: center; animation: gateIn 0.22s ease; }
.gate-card::-webkit-scrollbar { display: none; }
@keyframes gateIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.gate-title { margin: 0 0 10px; font-family: var(--font-body); font-size: 1.4rem; color: var(--nf-purple-solid); letter-spacing: 0.04em; }
.gate-subtitle { margin: 0 0 16px; font-size: 0.82rem; font-style: italic; line-height: 1.45; color: rgba(49, 86, 142, 0.8); }
.gate-error { display: none; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 0.76rem; background: rgba(255, 92, 92, 0.12); color: #b3261e; }
.gate-error.show { display: block; }
.gate-error.info { background: var(--nf-disc); color: var(--nf-purple-solid); }
/* provider buttons keep their brand colour: a Google button that is not Google-coloured is one people do not trust */
.signin-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-bottom: 9px; padding: 11px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 0.85rem; font-weight: 700; color: #fff; cursor: pointer; transition: filter 0.15s ease, transform 0.08s ease; }
.signin-btn:hover { filter: brightness(1.07); }
.signin-btn:active { transform: translateY(1px); }
.signin-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.signin-btn-google { background: #4285F4; }
.signin-btn-facebook { background: #1877F2; }
.signin-btn-apple { background: #111; }
.signin-btn-google .signin-ico { background: #fff; border-radius: 50%; padding: 2px; width: 20px; height: 20px; flex-basis: 20px; }
.signin-alt-pill { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--nf-frame-stroke); background: var(--nf-disc); color: var(--nf-purple-solid); font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.signin-alt-pill-icon { width: 15px; height: 15px; }
.gate-hint { margin: 14px 0 10px; font-size: 0.72rem; font-style: italic; line-height: 1.4; color: rgba(49, 86, 142, 0.6); }
.gate-skip { border: 0; background: none; font: inherit; font-size: 0.78rem; font-weight: 700; color: rgba(49, 86, 142, 0.75); text-decoration: underline; cursor: pointer; padding: 6px 10px; }
.gate-skip:hover { color: var(--nf-purple-solid); }
.account-row { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--nf-disc); border: 1px solid var(--nf-frame-stroke); }
.account-who { flex: 1 1 auto; min-width: 0; text-align: left; }
.account-name { display: block; font-size: 0.85rem; font-weight: 700; color: var(--nf-purple-solid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-email { display: block; font-size: 0.7rem; font-style: italic; color: rgba(49, 86, 142, 0.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn { flex: 0 0 auto; padding: 7px 15px; border: 0; border-radius: 999px; background: var(--nf-purple-solid); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.account-btn:active { transform: translateY(1px); }
.account-danger { margin-top: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(179, 38, 30, 0.35); background: none; color: #b3261e; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.home-account { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 0.78rem; color: rgba(49, 86, 142, 0.8); }
.home-account .account-btn { padding: 6px 13px; font-size: 0.74rem; }
table.src.lb td .acct { font-style: normal; color: var(--nf-purple-solid); }
@media (prefers-reduced-motion: reduce) { .gate-card { animation: none; } .gate-modal { transition: none; } }
.pri-group { margin: 10px 0 2px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(49, 86, 142, 0.6); }

/* ---- the second review (2026-09-12): each block belongs to one switch in js/game/features.js ---- */
/* The lead card: the one the home screen opens on, first in the list. It is bigger and
   framed rather than carrying a button of its own, because the card IS the button. */
.mode-card--lead { padding: 18px 16px; background: linear-gradient(135deg, #ffffff 0%, #eef0ff 100%); border-color: var(--nf-purple-solid); box-shadow: 0 8px 24px rgba(86, 44, 195, 0.16); }
.mode-card--lead .mode-card__name { font-size: 1.25rem; }
.mode-card--lead .mode-card__glyph { width: 54px; height: 54px; font-size: 1.6rem; }
.mode-card--lead .mode-card__chev { width: 22px; height: 22px; color: var(--nf-purple-solid); }
.mode-card__live { display: block; margin-top: 5px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--nf-purple-solid); font-family: inherit; }
/* gwojwe: the big player at the window */
.gwo-badge { display: inline-block; margin: 0 6px 0 2px; padding: 1px 8px; border-radius: 999px; background: linear-gradient(135deg, #fff3c4, #ffd166); color: #5a3a00; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }
/* pwoteje: the shield on the Gichè */
.card.pwoteje.is-risk { border-color: var(--ember); box-shadow: 0 0 0 2px rgba(255, 122, 69, 0.18); }
.card.pwoteje .level-toggle.sm { margin-top: 8px; padding: 7px 10px; font-size: 0.74rem; }
/* vresezon: the CTA waiting for the real hour */
.tiraj-btn.is-wait { background: linear-gradient(135deg, #b9b3d6, #8f86b8); box-shadow: none; cursor: default; font-size: 0.86rem; }
/* tetkout: a shorter header in a game */
body.tet-kout .top-bar { gap: 2px; }
body.tet-kout .tb-row--info { min-height: 30px; }
body.tet-kout .hud-city { font-size: 0.84rem; }
body.tet-kout .hud-chip { font-size: 0.86rem; padding: 3px 9px 2px; }
body.tet-kout .hud-free { font-size: 0.56rem; }
body.tet-kout .period-strip { min-height: 24px; padding: 2px 8px; font-size: 0.68rem; }
body.tet-kout .period-strip .bg-bar { height: 4px; }
body.tet-kout.speaking .soundwave { height: 16px; margin-top: 0; }
/* ednot: the notes behind a "?" */
body.ednot .card[data-fold] .set-note { display: none; }
body.ednot .card[data-fold].notes-open .set-note { display: block; }
body.ednot .card.strateji .set-note, body.ednot .card[data-fold="settings.reg"] .set-note { display: block; }
.note-btn { margin-left: auto; margin-right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--nf-stroke-50); background: var(--nf-card); color: var(--nf-purple-solid); font-size: 0.68rem; font-weight: 700; line-height: 1; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.card.notes-open .note-btn { background: var(--nf-purple-solid); color: #fff; }

/* poz: MoDoMiNo's pause, a ⏸ beside the back arrow and a veil over the table */
.pause-btn { margin-right: 2px; }
.pause-btn[aria-pressed="true"] { color: var(--nf-purple-solid); }
.pause-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(26, 20, 60, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pause-overlay[hidden] { display: none; }
.pause-card { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 220px; background: linear-gradient(180deg, #fafbfe 0%, #eee9fa 100%); border-radius: 22px; padding: 26px 34px; box-shadow: 0 18px 44px rgba(26, 20, 60, 0.4); }
.pause-title { margin: 0; font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--nf-purple-solid); }
.pause-quit { border: none; background: none; color: var(--nf-blue); font-family: inherit; font-size: 0.8rem; text-decoration: underline; cursor: pointer; padding: 6px 10px; }

/* avetisman: the disclaimer line */
.disclaimer { margin: 10px 8px 4px; text-align: center; font-family: var(--font-body); font-style: italic; font-size: 0.66rem; line-height: 1.4; color: var(--nf-blue); opacity: 0.7; }
p.set-note.disclaimer { margin-top: 8px; }

/* Rapò machann yo: the name, the play button and the fire button on one line, the figures on the next */
.mrap { padding: 8px 0 6px; border-top: 1px solid var(--nf-hairline-25); }
.mrap.mach-row { cursor: pointer; }
/* the Kont table: a row opens into the account's file, in a row of its own under it */
.acct-row { cursor: pointer; }
.acct-row td:first-child { padding-right: 6px; }
.acct-row .acct-n { white-space: nowrap; }   /* the count and the chevron are one thing: they wrap together or not at all */
.acct-row .chev { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid var(--nf-stroke-50); border-bottom: 1.5px solid var(--nf-stroke-50); transform: rotate(45deg); transition: transform 0.2s ease; vertical-align: middle; }
.acct-row.is-open .chev { transform: rotate(-135deg); }
.acct-row:focus-visible { outline: 2px solid var(--nf-purple-solid); outline-offset: -2px; }
.acct-file-row > td { padding: 0 0 6px !important; text-align: left !important; border-top: none !important; }
.acct-file-row .mach-file { margin-left: 6px; }
.mrap.mach-row:focus-visible { outline: 2px solid var(--nf-purple-solid); outline-offset: 2px; border-radius: 8px; }
.mrap .chev { flex-shrink: 0; }
.mrap-head { display: flex; align-items: center; gap: 8px; }
.mrap-head > b { font-weight: 600; font-family: var(--font-body); font-size: 0.86rem; color: var(--nf-purple-solid); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrap-head > b i { font-style: normal; font-size: 0.64rem; font-weight: 400; color: rgba(49,86,142,0.55); }
.mrap-data { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; padding-left: 44px; font-family: var(--font-body); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.mrap-data span { display: flex; flex-direction: column; align-items: flex-end; }
.mrap-data span:first-child { align-items: flex-start; }
.mrap-data i { font-style: normal; font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(49,86,142,0.5); }
.mrap-data b { font-weight: 400; }

/* Plus, the room's social layer (MoDoMiNo's): the ask-name, the watcher, the countdown, ready, the host's start box, the crown */
.konek-askname { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(84, 44, 194, 0.08); font-size: 0.8rem; font-weight: 700; color: var(--nf-purple-solid); }
.konek-watchnote { margin: 0; text-align: center; font-size: 0.78rem; color: var(--nf-blue); }
.konek-count { display: flex; flex-direction: column; align-items: center; padding: 10px 0 4px; }
.konek-count b { font-family: var(--font-body); font-size: 4rem; line-height: 1; color: var(--nf-purple-solid); animation: scoreBump 0.4s ease; }
.konek-count span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nf-blue); opacity: 0.7; }
.konek-ready { width: 100%; }
.konek-ready.is-on { background: var(--hit-green, #2fb47c); color: #fff; border-color: transparent; }
.konek-row .konek-ready { margin-left: 4px; font-style: normal; font-size: 0.8rem; }
.konek-row.is-watch { opacity: 0.7; }
.konek-startbox { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(84, 44, 194, 0.06); border: 1px solid var(--nf-frame-stroke); }
.konek-teams { display: flex; gap: 6px; }
.konek-team { flex: 1 1 0; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--nf-frame-stroke); background: var(--nf-card); color: var(--nf-purple-solid); font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.konek-team.is-on { background: var(--nf-purple-solid); color: #fff; border-color: transparent; }
.konek-modedesc { margin: 0; text-align: center; font-size: 0.72rem; color: var(--nf-blue); opacity: 0.8; font-family: var(--font-body); }
.konek-dirrow.is-full { opacity: 0.5; cursor: default; }
.konek-crownline { margin: 0 0 8px; text-align: center; font-weight: 700; color: var(--nf-purple-solid); font-size: 0.86rem; }
.konek-watchlink { font-size: 0.74rem; opacity: 0.75; }

/* Plus: the sezon's rail on the Gichè (the other players' progress) */
.sezon-rail .rail-row { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "rank name meta" "rank sub sub" "rank bar bar"; column-gap: 6px; row-gap: 2px; align-items: center; padding: 6px 0; border-top: 1px solid var(--nf-hairline-25); }
.sezon-rail .rail-row:first-of-type { border-top: none; }
.sezon-rail .rail-row.is-me { background: rgba(84, 44, 194, 0.06); border-radius: 8px; padding: 6px 6px; }
.sezon-rail .rail-row.is-over { opacity: 0.8; }
.sezon-rail .rail-rank { grid-area: rank; font-family: var(--font-body); color: var(--nf-purple-solid); text-align: center; }
.sezon-rail .rail-name { grid-area: name; font-weight: 700; color: var(--nf-purple-solid); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sezon-rail .rail-meta { grid-area: meta; font-family: var(--font-body); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.sezon-rail .rail-sub { grid-area: sub; font-size: 0.66rem; color: rgba(49,86,142,0.7); }
.sezon-rail .rail-bar { grid-area: bar; display: block; height: 5px; border-radius: 3px; background: var(--nf-hairline-25); overflow: hidden; }
.sezon-rail .rail-bar b { display: block; height: 100%; background: var(--nf-grad); border-radius: 3px; transition: width 0.6s ease; }

/* the rail's rows unfold: a player's details */
.sezon-rail .rail-row { cursor: pointer; }
.sezon-rail .rail-meta .chev { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-right: 1.5px solid var(--nf-stroke-50); border-bottom: 1.5px solid var(--nf-stroke-50); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; }
.sezon-rail .rail-row.is-open .rail-meta .chev { transform: rotate(-135deg) translateY(-2px); }
.sezon-rail .rail-detail { margin: 0 0 6px 28px; padding: 4px 8px 6px; border-left: 2px solid var(--nf-stroke-50); }
.sezon-rail .rail-detail .kv { padding: 3px 0; font-size: 0.74rem; }
.sezon-rail .rail-detail .kv b { font-size: 0.74rem; text-align: right; max-width: 60%; }

/* The transport bar (a VCR's): ⏭ Gichè · ▶ Tiraj · ⏩ Jou, under the tabs */
.vcr { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 8px 0 0; padding: 8px 12px 7px; border-radius: 24px; flex-shrink: 0;
  background: linear-gradient(180deg, #f8f6ff 0%, #ebe6fb 100%); border: 1px solid var(--nf-frame-stroke); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(60, 30, 100, 0.10); }
.vcr-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: none; background: none; font-family: inherit; color: var(--nf-purple-solid); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vcr-ico { display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform 0.12s ease, box-shadow 0.2s ease; }
.vcr-side .vcr-ico { width: 56px; height: 56px; background: linear-gradient(160deg, #ffffff 0%, #ebe6fa 100%); box-shadow: 0 4px 10px rgba(60, 30, 100, 0.16), inset 0 -2px 0 rgba(60, 30, 100, 0.08), inset 0 1px 0 #fff; }
.vcr-side svg { width: 26px; height: 26px; fill: var(--nf-purple-solid); }
.vcr-play .vcr-ico { width: 82px; height: 82px; background: linear-gradient(135deg, var(--ember) 0%, var(--ember-deep) 100%); box-shadow: 0 10px 24px rgba(224, 79, 31, 0.42), inset 0 -3px 0 rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.vcr-play svg { width: 38px; height: 38px; fill: #fff; margin-left: 5px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.vcr-cap { max-width: 120px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nf-purple-solid); }
.vcr-play .vcr-cap { font-size: 0.8rem; color: var(--ember-deep); }
.vcr-btn:active:not([disabled]) .vcr-ico { transform: scale(0.93); }
.vcr-btn[disabled] { opacity: 0.35; cursor: default; }
.vcr-play.ready .vcr-ico { animation: vcrPulse 1.6s ease-in-out infinite; }
@keyframes vcrPulse { 50% { box-shadow: 0 10px 34px rgba(224, 79, 31, 0.65), 0 0 0 8px rgba(224, 79, 31, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.14); } }
.vcr-play.is-wait .vcr-ico { background: linear-gradient(135deg, #b9b3d6, #8f86b8); box-shadow: 0 6px 14px rgba(60, 30, 100, 0.2); }
.vcr-play.is-wait .vcr-cap { color: var(--nf-blue); }
.vcr-play.coach-target { border-radius: 50%; }
.vcr-hint { margin-top: 10px; }
body.tet-kout .vcr { padding: 6px 12px 5px; gap: 16px; }
body.tet-kout .vcr-play .vcr-ico { width: 72px; height: 72px; }
body.tet-kout .vcr-side .vcr-ico { width: 50px; height: 50px; }

/* One row: Vann, the draw, the day skip. The draw keeps the size that says it is the one
   that matters; the two beside it are the same size as each other. */
.vcr { gap: 22px; }
@media (max-width: 380px) {
  .vcr { gap: 14px; }
  .vcr-side .vcr-ico, body.tet-kout .vcr-side .vcr-ico { width: 48px; height: 48px; }
  .vcr-cap { font-size: 0.66rem; }
}

/* FIVE WORDS IN A ROW. The tab row is words now, Nouvèl among them, and each word is meant to
   fill its button: the padding comes off the sides and the type grows until the longest label
   (Nouvèl) just fits the narrowest phone. Measured, not guessed — see tests/e2e.mjs. */
.game-tabs { gap: 4px; }
.game-tabs .set-tab { padding: 8px 1px; letter-spacing: -0.01em; white-space: nowrap;
  /* grows with the phone so the longest label (Nouvèl) nearly fills its button at any width;
     the cap stops it running away on a desktop, where the frame is fixed and vw is not. */
  font-size: clamp(0.72rem, 4.2vw, 1.12rem); }
/* French and English words are longer than the Kreyòl, and five of them have to share one row:
   each language gets the size its own longest label allows (js/app.js sets html[lang] at boot). */
html[lang="fr"] .game-tabs .set-tab { font-size: clamp(0.58rem, 2.7vw, 0.74rem); }
html[lang="en"] .game-tabs .set-tab { font-size: clamp(0.64rem, 3.3vw, 0.9rem); }

/* Nouvèl leads the row and carries what is waiting on its corner */
.news-tab { position: relative; }
.news-tab.active { background: var(--nf-purple-solid); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(84,44,194,0.28); }
/* Nouvèl is the last tab now, so the badge tucks inside its corner: hanging off the right
   edge would push the row wider than the frame. */
.news-badge { top: -5px; right: 1px; font-size: 0.5rem; padding: 2px 5px; }
html[data-theme="nwa"] .news-tab.active { color: #1b1440; background: #c8b6ff; }
html[data-theme="nwa"] .news-badge { background: #ff7a45; color: #1b1440; }
/* how many people are at the window, on the button that opens it */
.vcr-side .vcr-ico { position: relative; }
.vcr-dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ember-deep); color: #fff; font-style: normal; font-size: 0.58rem; font-weight: 700; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }

/* The owner's palette (2026-09-13): blue buttons in the scrolling box, light-red messages, a green play, a lighter green skip */
#view .btn, #view .btn.gold, #view .btn.red, #view .btn.green { background: linear-gradient(96deg, #3a7bf0 0%, #2456c9 100%); color: #fff; border: none; box-shadow: 0 6px 18px rgba(36, 86, 201, 0.30); }
#view .btn.ghost { background: linear-gradient(160deg, #eaf1ff 0%, #d6e3ff 100%); color: #1d4fbf; border: 1px solid #b9cdf7; box-shadow: none; }
#view .btn.ghost:hover { background: #dce7ff; }
#view .kk-btn { background: #eaf1ff; color: #1d4fbf; border-color: #b9cdf7; }
#view .kk-ghost { color: #1d4fbf; border-color: #b9cdf7; background: #f4f8ff; }
#view .konek-team, #view .konek-taunt, #view .konek-refresh { color: #1d4fbf; border-color: #b9cdf7; background: #f4f8ff; }
#view .konek-team.is-on { background: #2456c9; color: #fff; border-color: transparent; }
#view .konek-ready.is-on { background: #2456c9; color: #fff; }
.toast { background: #ffe6e6; color: #7a1c1c !important; border: 1px solid #f2b9b9; box-shadow: 0 8px 22px rgba(122, 28, 28, 0.16); }
.toast.bad { background: #ffd3d3; color: #6b1010 !important; border-color: #ea9d9d; }
.hint { background: #fff1f1; border-color: #f3c6c6; color: #6b2a2a; }
.hint.bad { background: #ffe0e0; border-color: #ea9d9d; }
.vcr-play .vcr-ico { background: linear-gradient(135deg, #43d49f 0%, #1f9a67 100%); box-shadow: 0 10px 24px rgba(31, 154, 103, 0.42), inset 0 -3px 0 rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.vcr-play .vcr-cap { color: #1f9a67; }
.vcr-play.ready .vcr-ico { animation: vcrPulseGreen 1.6s ease-in-out infinite; }
@keyframes vcrPulseGreen { 50% { box-shadow: 0 10px 34px rgba(31, 154, 103, 0.65), 0 0 0 8px rgba(31, 154, 103, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.14); } }
.vcr-side .vcr-ico { background: linear-gradient(160deg, #eefcf5 0%, #c3f0da 100%); box-shadow: 0 4px 10px rgba(31, 154, 103, 0.18), inset 0 -2px 0 rgba(31, 154, 103, 0.10), inset 0 1px 0 #fff; }
/* Vann while the window is already open: the button fills in, so the bar says where you are */
.vcr-side.is-on .vcr-ico { background: linear-gradient(160deg, #43d49f 0%, #1f9a67 100%); box-shadow: 0 4px 12px rgba(31, 154, 103, 0.38), inset 0 -2px 0 rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.vcr-side.is-on svg { fill: #fff; }
.vcr-side svg { fill: #1f9a67; }
.vcr-side .vcr-cap { color: #1f9a67; }

/* The balance, twice its size (2026-09-13), and a flash to twice that when money moves */
body.tet-kout .hud-chip, .hud-chip { font-size: 1.72rem; padding: 4px 14px 3px; gap: 8px; position: relative; z-index: 5; transform-origin: right center; }
body.tet-kout .hud-chip::after, .hud-chip::after { font-size: 0.72rem; }
body.tet-kout .hud-free, .hud-free { font-size: 0.68rem; }
.hud-chip.is-bump { animation: cashFlash 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
/* a quarter bigger at the peak than it was (2 → 2.5) */
@keyframes cashFlash { 0% { transform: scale(1); } 35% { transform: scale(2.5) rotate(-1.5deg); } 65% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* The results: the balance big under the balls, the draw's own figures smaller (2026-09-13) */
.kv.kes-big { margin-top: 6px; padding: 8px 0 6px; border-top: 1px solid var(--nf-hairline-25); border-bottom: 1px solid var(--nf-hairline-25); }
.kv.kes-big span { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--nf-purple-solid); }
.kv.kes-big b { font-family: var(--font-body); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tiraj-figures .kv { padding: 3px 0; font-size: 0.74rem; }
.tiraj-figures .kv b { font-size: 0.8rem; }
.tiraj-figures .kv.rezilta b { font-size: 0.86rem; }
.tiraj-figures .kv.rezilta.flash b { font-size: 0.92rem; }

/* ── Lizibilite (2026-09-13): the secondary text darker, one token for all of it ── */
.muted, .set-note, .rev-item span, .rev-item i, .konek-meta, .konek-dirmeta, .rail-sub, .mode-card__desc, .lo .lbl, .tagline, .customer .queue-n,
table.src th, table.src td i, .ledger-item .t, .ledger-item .bal, .log-item .t, .hud-free, .cand-stat i, .kat-note, .tick-what, .konek-codehint, .konek-visline,
.konek-sub, .konek-field, .settings-sub, .hud-bank, .konek-h, .mrap-head > b i, .mrap-data i, .sezon-rail .rail-sub, .rail-detail .kv span, .disclaimer, .vcr-hint,
.customer .name .muted, .kv span, .strateji p, .card p, .set-note.bg-note, .konek-modedesc, .konek-dirnote, .konek-watchnote { color: var(--ink-muted); }
.set-note { opacity: 0.95; }
.muted { color: var(--ink-muted); }

/* ── Tèm (2026-09-13): klè is the NervalFrost daylight; nwa is the same shell at night. The switch sits in Settings (Aparans); "oto" follows the phone. ── */
html[data-theme="nwa"] { color-scheme: dark;
  --nf-backdrop: #0e1020; --nf-frost: #161a2c; --nf-card: #1b2036; --nf-blue: #c7d0ec; --nf-purple: rgba(200, 182, 255, 0.92); --nf-purple-solid: #c8b6ff; --mp-tip-blue: #9fb0ff;
  --nf-disc: rgba(200, 182, 255, 0.12); --nf-stroke-50: rgba(200, 182, 255, 0.5); --nf-frame-stroke: rgba(150, 130, 230, 0.42); --nf-hairline-25: rgba(150, 130, 230, 0.22); --bubble-blue: #7d95ff;
  --nf-grad: linear-gradient(96deg, #4f7fe0 0%, #8a5cf0 104%); --ember: #ff8a5c; --ember-deep: #ff6a3d; --hit-green: #4fd69a; --tile-ink: #f3e6c2; --ink-muted: #a3b0d4; }
html[data-theme="nwa"] body { background: linear-gradient(135deg, #0b0d1c 0%, #141633 45%, #1a1436 75%, #1f1530 100%); }
html[data-theme="nwa"] .vol-pop { background: #1d1b3a; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
html[data-theme="nwa"] .vol-range::-webkit-slider-runnable-track { background: rgba(255, 255, 255, 0.2); }
html[data-theme="nwa"] .vol-range::-moz-range-track { background: rgba(255, 255, 255, 0.2); }
html[data-theme="nwa"] .vol-range::-webkit-slider-thumb { border-color: #1d1b3a; }
html[data-theme="nwa"] .vol-range::-moz-range-thumb { border-color: #1d1b3a; }
html[data-theme="nwa"] .device-frame { background: var(--nf-backdrop); }
html[data-theme="nwa"] .dash-panel { background: linear-gradient(180deg, #181c31 0%, #141830 48%, #111427 100%); }
html[data-theme="nwa"] .card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
html[data-theme="nwa"] .input { background: #121529; color: #e8ebf8; border-color: var(--nf-frame-stroke); }
html[data-theme="nwa"] .input::placeholder { color: #7a86ad; }
html[data-theme="nwa"] .set-tab.is-on, html[data-theme="nwa"] .tab.active, html[data-theme="nwa"] .chip.on, html[data-theme="nwa"] .konek-team.is-on, html[data-theme="nwa"] #view .konek-team.is-on { background: #c8b6ff; color: #1b1440; }
html[data-theme="nwa"] .btn.ghost, html[data-theme="nwa"] #view .btn.ghost { background: rgba(120, 140, 255, 0.14); color: #cdd8ff; border-color: rgba(120, 140, 255, 0.35); }
html[data-theme="nwa"] #view .btn, html[data-theme="nwa"] #view .btn.gold, html[data-theme="nwa"] #view .btn.red, html[data-theme="nwa"] #view .btn.green { background: linear-gradient(96deg, #4a86f5 0%, #2f5fd6 100%); }
html[data-theme="nwa"] #view .kk-btn, html[data-theme="nwa"] #view .kk-ghost, html[data-theme="nwa"] #view .konek-team, html[data-theme="nwa"] #view .konek-taunt, html[data-theme="nwa"] #view .konek-refresh { background: rgba(120, 140, 255, 0.12); color: #cdd8ff; border-color: rgba(120, 140, 255, 0.35); }
html[data-theme="nwa"] .klasman-link, html[data-theme="nwa"] .sezon-line, html[data-theme="nwa"] .konek-dirrow, html[data-theme="nwa"] .konek-row, html[data-theme="nwa"] .konek-bigcode, html[data-theme="nwa"] .konek-radio, html[data-theme="nwa"] .level-toggle, html[data-theme="nwa"] .account-btn { background: rgba(120, 140, 255, 0.10); color: var(--nf-purple-solid); border-color: var(--nf-frame-stroke); }
html[data-theme="nwa"] .konek-row.is-owner { background: rgba(255, 196, 107, 0.16); }
html[data-theme="nwa"] .mode-card { background: var(--nf-card); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
html[data-theme="nwa"] .mode-card--lead { background: linear-gradient(135deg, #1e2340 0%, #261c4a 100%); border-color: var(--nf-purple-solid); }
html[data-theme="nwa"] .mode-card--lead .mode-card__chev { color: #c8b6ff; }
html[data-theme="nwa"] .mode-card.is-soon { opacity: 0.55; }
html[data-theme="nwa"] .hud-chip.pos { background: linear-gradient(150deg, #123324 0%, #17442f 62%, #1b5238 100%); color: #9ff0c0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 3px rgba(0, 0, 0, 0.35); }
html[data-theme="nwa"] .hud-chip.pos::after { color: rgba(159, 240, 192, 0.7); }
html[data-theme="nwa"] .hud-chip.neg { background: linear-gradient(150deg, #3a1616 0%, #4a1c1c 62%, #582222 100%); color: #ffb3b3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 3px rgba(0, 0, 0, 0.35); }
html[data-theme="nwa"] .hud-chip.neg::after { color: rgba(255, 179, 179, 0.7); }
html[data-theme="nwa"] .period-strip { background: var(--nf-card); border-color: var(--nf-frame-stroke); }
html[data-theme="nwa"] .vcr { background: linear-gradient(180deg, #1d2140 0%, #141830 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.4); }
html[data-theme="nwa"] .vcr-side .vcr-ico { background: linear-gradient(160deg, #1f3a2f 0%, #163126 100%); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
html[data-theme="nwa"] .vcr-side.is-on .vcr-ico { background: linear-gradient(160deg, #2f9e70 0%, #1d6b4b 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
html[data-theme="nwa"] .vcr-side svg, html[data-theme="nwa"] .vcr-side .vcr-cap { fill: #6fe0aa; color: #6fe0aa; }
html[data-theme="nwa"] .vcr-play .vcr-cap { color: #6fe0aa; }
html[data-theme="nwa"] .toast { background: #3a1a1e; color: #ffc4c4 !important; border-color: #6b2a32; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
html[data-theme="nwa"] .toast.bad { background: #4a1a1a; color: #ffb0b0 !important; border-color: #7a2a2a; }
html[data-theme="nwa"] .hint { background: #2a1a20; color: #f0c4c4; border-color: #5a2a34; }
html[data-theme="nwa"] .hint.bad { background: #3a1818; border-color: #7a2a2a; }
html[data-theme="nwa"] .pause-card, html[data-theme="nwa"] .gate-card { background: linear-gradient(180deg, #1e2340 0%, #171a30 100%); color: var(--nf-blue); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }
html[data-theme="nwa"] .gate-title, html[data-theme="nwa"] .gate-subtitle, html[data-theme="nwa"] .gate-hint { color: var(--nf-blue); }
html[data-theme="nwa"] .signin-alt-pill { background: rgba(120, 140, 255, 0.12); color: #cdd8ff; }
html[data-theme="nwa"] .konek-startbox, html[data-theme="nwa"] .konek-askname { background: rgba(200, 182, 255, 0.08); }
html[data-theme="nwa"] .sezon-rail .rail-row.is-me { background: rgba(200, 182, 255, 0.1); }
html[data-theme="nwa"] .rail-bar { background: rgba(150, 130, 230, 0.22); }
html[data-theme="nwa"] .note-btn { background: rgba(120, 140, 255, 0.12); }
html[data-theme="nwa"] .card.pwoteje.is-risk { box-shadow: 0 0 0 2px rgba(255, 138, 92, 0.25); }
html[data-theme="nwa"] .gwo-badge { background: linear-gradient(135deg, #5a4200, #8a6400); color: #ffe9a4; }
html[data-theme="nwa"] .hot { background: rgba(120, 140, 255, 0.1); }
html[data-theme="nwa"] .coach { background: rgba(230, 226, 255, 0.96); color: #1b1440; }
html[data-theme="nwa"] .coach .btn { background: #1b1440; color: #fff; }
html[data-theme="nwa"] .coach .btn.ghost { color: #1b1440; border-color: rgba(27, 20, 64, 0.4); }
html[data-theme="nwa"] .lo .ball { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
/* at night the balls keep their colours; the written numbers lift off the dark card */
html[data-theme="nwa"] { --lo-1: #ff5d74; --lo-2: #45c884; --lo-3: #7aa5ff; }
html[data-theme="nwa"] .lo[data-lo="0"] .ball { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.3) 0, transparent 40%), #c4102f; }
html[data-theme="nwa"] .lo[data-lo="1"] .ball { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.3) 0, transparent 40%), #1b7a44; }
html[data-theme="nwa"] .lo[data-lo="2"] .ball { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.3) 0, transparent 40%), #2f5cc0; }
html[data-theme="nwa"] .home-hero img { box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.5); }
html[data-theme="nwa"] .good { color: #4fd69a !important; }
html[data-theme="nwa"] .bad { color: #ff8a7a !important; }
/* the map at night: a deep sea with faint swell, land in dark sand with a golden coast, lit roads, towns with a dark halo under their names */
html[data-theme="nwa"] .map #sea stop:first-child { stop-color: #131b3a; }
html[data-theme="nwa"] .map #sea stop:last-child { stop-color: #0c1226; }
html[data-theme="nwa"] .map #waves path { stroke: rgba(120, 140, 255, 0.14); }
html[data-theme="nwa"] .map #landg stop:first-child { stop-color: #5a5139; }
html[data-theme="nwa"] .map #landg stop:last-child { stop-color: #3e3726; }
html[data-theme="nwa"] .map .land { stroke: #d4b06a; stroke-width: 0.5; }
html[data-theme="nwa"] .map .dom { fill: #262a45; stroke: rgba(200, 182, 255, 0.28); }
html[data-theme="nwa"] .map .road { stroke: rgba(210, 196, 255, 0.62); }
html[data-theme="nwa"] .map .city { fill: #f4f2ff; stroke: #a58cff; }
html[data-theme="nwa"] .map .city.mine { fill: #c8b6ff; }
html[data-theme="nwa"] .map .city.here { stroke: #9fb0ff; }
html[data-theme="nwa"] .map .halo { fill: rgba(159, 176, 255, 0.2); stroke: rgba(159, 176, 255, 0.6); }
html[data-theme="nwa"] .map .cname { fill: #eef0ff; stroke: rgba(10, 12, 28, 0.85); }
html[data-theme="nwa"] .map .air { fill: rgba(200, 210, 255, 0.8); }
html[data-theme="nwa"] .map .flag { stroke: #1b1440; }
html[data-theme="nwa"] .map .sflag { stroke: #1b1440; }
html[data-theme="nwa"] .map .mtitle { fill: rgba(200, 182, 255, 0.55); }
html[data-theme="nwa"] .map .compass circle { fill: rgba(30, 34, 60, 0.85); stroke: rgba(200, 182, 255, 0.45); }
html[data-theme="nwa"] .map .compass text { fill: rgba(200, 210, 255, 0.85); }
html[data-theme="nwa"] .map { border-color: rgba(200, 182, 255, 0.3); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
html[data-theme="nwa"] .legend { color: var(--ink-muted); }
html[data-theme="nwa"] .legend .i-his, html[data-theme="nwa"] .legend .i-here { background: #f4f2ff; }

/* ── Polis: the reading face. Klasik = Inter, the platform's own; Lizib = Atkinson
   Hyperlegible, drawn for tired eyes; Chalè = Fraunces (both fetched only when chosen).
   The display face does not change with this: Playfair Display is the app's voice. ── */
html[data-font="lizib"] { --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html[data-font="chale"] { --font-body: 'Fraunces', Georgia, serif; }
html[data-font="lizib"] .card p, html[data-font="lizib"] .kv, html[data-font="lizib"] .set-note { letter-spacing: 0.005em; }
.aparans .choice { flex-wrap: wrap; }
html[data-theme="nwa"] .card.is-focus { background-color: #24294a; border-color: rgba(200, 182, 255, 0.6); }

/* the theme button, top right beside the gear: a moon by day, a sun by night */
.theme-btn .theme-sun { display: none; }
.theme-btn.is-nwa .theme-moon { display: none; }
.theme-btn.is-nwa .theme-sun { display: block; }
.theme-btn svg { width: 22px; height: 22px; }

/* Nwa: a hovered card takes the daylight pastel, so its text takes the daylight ink (buttons keep their own colours) */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="nwa"] .card:hover { color: #1b1440; }
  html[data-theme="nwa"] .card:hover :is(p, span, b, i, small, li, td, th, h4, label, .kv, .live, .rail-name, .rail-sub, .rail-rank, .mrap-head > b, .konek-name, .konek-meta):not(.btn *):not(.wa-btn *):not(.kk-share *):not(.chip):not(.chip *):not(.vcr-btn *) { color: #1b1440; }
  html[data-theme="nwa"] .card:hover h3, html[data-theme="nwa"] .card:hover .fold-h, html[data-theme="nwa"] .card:hover .settings-sub, html[data-theme="nwa"] .card:hover .hud-bank { color: #542CC2; }
  html[data-theme="nwa"] .card:hover .set-note, html[data-theme="nwa"] .card:hover .muted, html[data-theme="nwa"] .card:hover .kv span, html[data-theme="nwa"] .card:hover .rail-sub, html[data-theme="nwa"] .card:hover td i, html[data-theme="nwa"] .card:hover th { color: #3a5280; }
  html[data-theme="nwa"] .card:hover .good { color: #1f8a4c !important; }
  html[data-theme="nwa"] .card:hover .bad { color: #c8102e !important; }
  html[data-theme="nwa"] .card:hover .chip { color: #542CC2; background: rgba(84, 44, 194, 0.08); border-color: rgba(160, 140, 225, 0.5); }
  html[data-theme="nwa"] .card:hover .chip.on { background: #542CC2; color: #fff; }
  html[data-theme="nwa"] .card:hover .note-btn { color: #542CC2; background: #fff; border-color: rgba(86, 44, 195, 0.5); }
  html[data-theme="nwa"] .card:hover .input { background: #fff; color: #1b1440; border-color: rgba(160, 140, 225, 0.5); }
  html[data-theme="nwa"] .card:hover .level-toggle, html[data-theme="nwa"] .card:hover .klasman-link, html[data-theme="nwa"] .card:hover .konek-row, html[data-theme="nwa"] .card:hover .say-btn { color: #542CC2; background: rgba(84, 44, 194, 0.06); }
  html[data-theme="nwa"] .card:hover .rail-bar { background: rgba(160, 140, 225, 0.3); }
  html[data-theme="nwa"] .card:hover .sezon-rail .rail-row.is-me, html[data-theme="nwa"] .card:hover .rail-row.is-me { background: rgba(84, 44, 194, 0.08); }
  html[data-theme="nwa"] .mode-card:hover { color: #1b1440; }
  html[data-theme="nwa"] .mode-card:hover .mode-card__name, html[data-theme="nwa"] .mode-card:hover .mode-card__live { color: #542CC2; }
  html[data-theme="nwa"] .mode-card:hover .mode-card__desc { color: #3a5280; }
  html[data-theme="nwa"] .mode-card:hover .mode-card__chev { color: rgba(86, 44, 195, 0.5); }
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="nwa"] .mode-card:hover, html[data-theme="nwa"] .mode-card--lead:hover { background: #e4efff; }
  html[data-theme="nwa"] .mode-card:hover .mode-card__glyph { background: rgba(84, 44, 194, 0.08); }
  html[data-theme="nwa"] .mode-card:hover .mode-card__soon { background: rgba(84, 44, 194, 0.12); color: #542CC2; }
}
/* the Kès strip wears the debt */
.bank-strips .debt-badge { position: static; display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--ember-deep); color: #fff; font-style: normal; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; animation: debtPulse 1.8s ease-in-out infinite; }
.bank-strips .set-tab.is-on .debt-badge { background: #fff; color: var(--ember-deep); }
@keyframes debtPulse { 50% { box-shadow: 0 0 0 4px rgba(224, 79, 31, 0.25); } }

/* ── Vwayaje: one row per way of getting there, as Pratik lays it out ─────────────────────
   A chip could only ever carry a name and a number. A traveller is choosing between four
   things at once — what it is, why you would take it, how long, what it costs — so the row
   gives each of them a place of its own and the eye can run down the column that matters. */
.trip { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 8px; padding: 11px 12px; border: 1px solid var(--nf-frame-stroke); border-radius: 15px; background: var(--nf-card); text-align: left; color: var(--nf-blue); font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(60,30,100,0.05); transition: transform 0.15s ease, border-color 0.18s ease; }
.trip:hover:not(:disabled) { border-color: var(--nf-stroke-50); transform: translateY(-1px); }
.trip:active:not(:disabled) { transform: scale(0.99); }
.trip:disabled { opacity: 0.45; cursor: default; }
.trip.is-free { border-color: var(--hit-green); }
.trip-ico { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; }
.trip-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trip-body b { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 0.98rem; color: var(--nf-purple-solid); }
.trip-body i { font-style: normal; font-size: 0.67rem; line-height: 1.35; color: var(--ink-muted); }
.trip-cost { flex: 0 0 auto; font-size: 0.92rem; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
/* the fare each town's chip carries */
.city-chips .chip i { font-style: normal; font-size: 0.66rem; opacity: 0.75; font-variant-numeric: lining-nums tabular-nums; }
html[data-theme="nwa"] .trip { background: #24294a; border-color: rgba(200, 182, 255, 0.3); color: #dfe6ff; }
html[data-theme="nwa"] .trip-body b { color: #c8b6ff; }
html[data-theme="nwa"] .trip-body i { color: #a9b6d9; }

/* ── Nouvèl: the day's paper ──────────────────────────────────────────────── */
.paper-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid var(--nf-stroke-50); }
.paper-head .chev { margin-left: 2px; align-self: center; }   /* the fold arrow foldify() appends */
.card.paper.is-closed .paper-head { padding-bottom: 0; border-bottom: none; }
/* The masthead holds one line: the name never wraps, the dateline gives way first (it is
   the same day the strip above already shows), and the fold arrow always has its place. */
.paper-name { flex: 0 0 auto; font-family: var(--font-display); font-size: clamp(1rem, 4.6vw, 1.35rem); font-weight: 500; color: var(--nf-purple-solid); letter-spacing: 0.01em; white-space: nowrap; }
.paper-date { flex: 0 1 auto; min-width: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--nf-hairline-25); }
.paper-item:last-of-type { border-bottom: none; }
.paper-ico { flex: 0 0 30px; font-size: 1.3rem; line-height: 1.2; text-align: center; }
.paper-body { min-width: 0; }
.paper-rubrik { display: block; margin-bottom: 1px; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nf-purple-solid); opacity: 0.75; }
.paper.radyo .paper-rubrik { color: var(--ember-deep); }
html[data-theme="nwa"] .paper-rubrik { color: #c8b6ff; }
.paper-body h4 { margin: 0 0 3px; font-family: var(--font-display); font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--nf-blue); }
.paper-body p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--ink-muted); }
.paper-item.lead .paper-ico { font-size: 1.7rem; }
.paper-item.lead .paper-body h4 { font-size: 1.2rem; font-style: italic; color: var(--nf-purple-solid); }
/* the radio's card: the same page, a different voice */
.paper.radyo { margin-top: var(--breather); }
.paper.radyo .paper-head { border-bottom-color: var(--ember-deep); }
.paper.radyo .paper-name { font-family: var(--font-body); font-size: clamp(0.8rem, 3.4vw, 1rem); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ember-deep); }
.paper.radyo .paper-item.lead .paper-body h4 { font-style: normal; font-size: 1.05rem; color: var(--ember-deep); }
html[data-theme="nwa"] .paper.radyo .paper-name, html[data-theme="nwa"] .paper.radyo .paper-item.lead .paper-body h4 { color: #ffb08a; }
html[data-theme="nwa"] .paper-body h4 { color: #dfe6ff; }
html[data-theme="nwa"] .paper-item.lead .paper-body h4 { color: #c8b6ff; }
html[data-theme="nwa"] .paper-name { color: #c8b6ff; }

/* a hired machann's row unfolds into their file */
.mach-row { cursor: pointer; align-items: center; }
.mach-row .chev { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-right: 1.5px solid var(--nf-stroke-50); border-bottom: 1.5px solid var(--nf-stroke-50); transform: rotate(45deg); transition: transform 0.2s ease; flex-shrink: 0; }
.mach-row.is-open .chev { transform: rotate(-135deg); }
.mach-file { margin: 0 0 10px 10px; padding: 2px 10px 8px; border-left: 2px solid var(--nf-stroke-50); }
.mach-file .kv { padding: 5px 0; font-size: 0.76rem; }
.mach-file .kv b { font-size: 0.76rem; text-align: right; max-width: 62%; }
.mach-file .stars { font-size: 0.7rem; letter-spacing: 0.02em; }

/* ── The display face, spent deliberately ──────────────────────────────────────
   Playfair Display is a high-contrast serif: magnificent at 30px and above, and
   illegible as an 11px letter-spaced uppercase label on a phone in the sun. So it
   takes the moments that are looked at — the game's name, a headline sum, the map's
   own title — and Inter takes everything that is read, counted or tapped. FotoLekti
   spends it the same way: its logo and its headings, nothing smaller. */
.gate-title,
.pause-title,
.kv.kes-big b,
.cash-float,
.hot b,
.big,
.end-stat b,
.map .mtitle,
.over .big,
.hud-chip,
.lo .n { font-family: var(--font-display); }
/* Its italic is the platform's signature (FotoLekti's logo is set this way), and
   it is the only real italic the app loads: Inter arrives upright only, so every
   slanted Inter word is a shape the browser invents. The four that are looked at
   rather than read take the drawn one. */
.gate-title, .pause-title { font-style: italic; font-weight: 500; }
.hud-city, .mode-card__name, .customer .name { font-family: var(--font-display); }
/* Figures that sit in columns line up, whatever the face. `lining-nums` is the half
   that matters for the serif: Playfair Display draws old-style figures by default,
   so an unasked 4 in a money row drops below the baseline of the 1 beside it. */
.kv b, .ledger-item b, .ledger-item .bal, table.src td, .sezon-rail .rail-meta,
.tick b, .mrap-data, .konek-count b, .cash-float, .kv.kes-big b,
.hud-chip, .hud-free, .big, .hot b, .end-stat b, .lo .n { font-variant-numeric: lining-nums tabular-nums; }