/* ============================================================================================================================
   UI 2 — the game's visual language (loaded last; overrides the older stylesheets).
   Bright, chunky "tycoon game" look: cream cards with a green header ribbon, rounded Fredoka text, Lilita One titles and numbers,
   buttons with a pressable bottom edge, colourful pill HUD over the 3D view. Every screen works from 320 px phones to desktops.
   ============================================================================================================================ */
@font-face { font-family: 'Fredoka'; font-weight: 400; font-display: swap; src: url('../fonts/fredoka-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 500; font-display: swap; src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lilita One'; font-weight: 400; font-display: swap; src: url('../fonts/lilita-one-latin-400-normal.woff2') format('woff2'); }

:root {
  color-scheme: light;
  /* surfaces: warm paper whites */
  --surface-0: #efeadf; --surface-1: #fbf8f1; --surface-2: #ffffff; --surface-3: #f5f1e7; --surface-4: #ece6d8; --surface-5: #e2dbca;
  --line-1: rgba(60, 45, 20, .08); --line-2: rgba(60, 45, 20, .12); --line-3: rgba(60, 45, 20, .18); --line-4: rgba(60, 45, 20, .28);
  --text-1: #1f2a22; --text-2: #4b5a4f; --text-3: #6e7b72; --text-4: #9aa59d; --text-inv: #ffffff;
  --accent-200: #1f8a3a; --accent-300: #23963f; --accent-400: #2eb04c; --accent-500: #3ccf5e; --accent-600: #2fb34f; --accent-650: #36c257; --accent-700: #1f8a3a; --accent-900: #e4f8e8;
  --accent-soft: rgba(60, 207, 94, .14); --accent-soft-2: rgba(60, 207, 94, .22); --accent-line: rgba(47, 179, 79, .45);
  --gold-200: #8a5a00; --gold-300: #a66d00; --gold-400: #ffc83d; --gold-500: #f0ae17; --gold-soft: rgba(255, 200, 61, .22); --gold-line: rgba(240, 174, 23, .5);
  --red-300: #c92a2a; --red-400: #e03b3b; --red-500: #ef4d4d; --red-soft: rgba(239, 77, 77, .12); --red-line: rgba(239, 77, 77, .4);
  --amber-300: #b56a00; --amber-400: #ff9f1a; --amber-soft: rgba(255, 159, 26, .15); --amber-line: rgba(255, 159, 26, .45);
  --blue-300: #1f63c2; --blue-400: #2f7de1; --blue-soft: rgba(47, 125, 225, .12); --blue-line: rgba(47, 125, 225, .38);
  --glass: rgba(255, 253, 247, .94); --glass-strong: rgba(255, 253, 247, .98); --glass-line: rgba(60, 45, 20, .1); --glass-hl: rgba(255, 255, 255, .6);
  --blur: blur(10px) saturate(1.3);
  --font-ui: 'Fredoka', 'Baloo 2', system-ui, sans-serif; --font-display: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  --hl: inset 0 1px 0 rgba(255, 255, 255, .7);
  --elev-1: 0 2px 0 rgba(60, 45, 20, .1);
  --elev-2: 0 10px 24px -10px rgba(40, 30, 10, .35), 0 3px 0 rgba(60, 45, 20, .08);
  --elev-3: 0 30px 70px -20px rgba(20, 15, 5, .55), 0 6px 0 #d9d1bd;
  --r-1: 10px; --r-2: 14px; --r-3: 18px; --r-4: 26px;
  --ink: var(--text-1); --ink2: var(--text-2); --muted: var(--text-3); --paper: var(--surface-1);
}
html, body { font-family: var(--font-ui); }
body { color: var(--text-1); }
#ui { font-family: var(--font-ui); font-weight: 500; }
h1, h2, h3, .head-title, .section-title, .t-display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }

/* ---------------------------------------------------------------- buttons: chunky, pressable */
.btn {
  --bc: #ffffff; --bh: #fffaf0; --bfg: var(--text-1); --bed: #d6cdb8; --bbd: rgba(60, 45, 20, .1);
  min-height: 44px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--bbd);
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem; letter-spacing: 0;
  box-shadow: inset 0 -4px 0 var(--bed), 0 2px 6px rgba(40, 30, 10, .12); padding-bottom: 3px;
}
.btn:hover:not(:disabled) { filter: brightness(1.03); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--bed), 0 1px 2px rgba(40, 30, 10, .12); }
.btn.alt, .btn.go { --bc: #3ccf5e; --bh: #46d867; --bfg: #ffffff; --bed: #1f8a3a; --bbd: transparent; text-shadow: 0 1px 0 rgba(0, 60, 20, .35); }
.btn.ghost, .btn.dark, .btn.blue { --bc: #f3eee2; --bh: #f7f3ea; --bfg: var(--text-1); --bed: #d6cdb8; --bbd: rgba(60, 45, 20, .1); }
.btn.quiet { --bc: transparent; --bh: rgba(60, 45, 20, .06); --bfg: var(--text-2); --bed: transparent; box-shadow: none; border-color: transparent; }
.btn.red, .btn.danger { --bc: #ef4d4d; --bh: #f25f5f; --bfg: #ffffff; --bed: #b02a2a; --bbd: transparent; }
.btn.gold { --bc: #ffc83d; --bh: #ffd25e; --bfg: #3d2a00; --bed: #c98f00; --bbd: transparent; }
.btn.sm { min-height: 38px; padding: 0 14px 3px; font-size: .92rem; border-radius: 12px; }
.btn.xs { min-height: 30px; padding: 0 10px 2px; font-size: .85rem; border-radius: 10px; box-shadow: inset 0 -3px 0 var(--bed); }
.btn.lg { min-height: 56px; padding: 0 26px 4px; font-size: 1.12rem; border-radius: 16px; box-shadow: inset 0 -5px 0 var(--bed), 0 4px 10px rgba(40, 30, 10, .16); }
.btn:disabled, .btn.disabled { opacity: .5; filter: grayscale(.4); }
.btn .ico-svg { stroke-width: 2.4; }

/* ---------------------------------------------------------------- inputs */
.inp, select.inp, input.inp, textarea.inp { background: #ffffff; color: var(--text-1); border: 2px solid #e4ddcc; border-radius: 12px; font-family: var(--font-ui); font-weight: 500; }
.inp:focus { border-color: #3ccf5e; box-shadow: 0 0 0 4px rgba(60, 207, 94, .18); background: #fff; }

/* ---------------------------------------------------------------- cards / dialogs: cream card, green header ribbon */
.modal-back { background: radial-gradient(120% 120% at 50% 0%, rgba(14, 40, 22, .55), rgba(8, 16, 10, .72)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.card { background: var(--surface-1); color: var(--text-1); border-radius: 26px; box-shadow: var(--elev-3); }
.card > .head {
  background: linear-gradient(180deg, #46d867, #2fb34f); color: #ffffff; border-bottom: 0; min-height: 62px; padding: 10px 14px 10px 18px;
  font-family: var(--font-display); font-size: 1.45rem; text-shadow: 0 2px 0 rgba(0, 70, 25, .35); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12);
}
.card > .head > .head-ico { background: #ffffff; color: #23963f; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); border-radius: 12px; }
.card > .head > .head-ico .ico-svg { color: #23963f; }
.card > .head .x-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.card > .head .x-btn:hover { background: rgba(255, 255, 255, .34); color: #fff; }
.card > .foot { background: var(--surface-3); border-top: 2px solid var(--line-1); }
.x-btn:hover { background: rgba(60, 45, 20, .07); }
.banner { border-radius: 14px; font-weight: 600; }
.section-title { color: var(--text-1); font-size: 1.15rem; }
.muted, .small.muted { color: var(--text-3); }

/* ---------------------------------------------------------------- toasts */
#toasts .toast, .toast { background: #fffdf7; color: var(--text-1); border-radius: 16px; box-shadow: 0 10px 24px -8px rgba(20, 15, 5, .45), inset 0 -3px 0 #e4dccb; border: 0; font-weight: 600; }

/* ---------------------------------------------------------------- HUD over the 3D view: bright pills */
.glass { background: var(--glass); color: var(--text-1); box-shadow: 0 6px 16px -6px rgba(20, 15, 5, .45), inset 0 -3px 0 rgba(60, 45, 20, .12); border-radius: 18px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hud-money, .money-box, .hud-tl .glass { font-family: var(--font-display); }
.hud-btns .btn.icon, .hud-btns .btn.ghost { --bc: #fffdf7; --bed: #d6cdb8; color: var(--text-1); }
.hud-btns .manage-btn { --bc: #3ccf5e; --bed: #1f8a3a; --bfg: #fff; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; }
.hud-btns .mall-btn { --bc: #ffc83d; --bed: #c98f00; --bfg: #3d2a00; }
.hud-btns .mall-btn .mi { color: #3d2a00; }
.prompt.glass { background: #1f2a22; color: #ffffff; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5), inset 0 -3px 0 rgba(0, 0, 0, .35); font-weight: 600; }
.prompt .kbd { background: #ffc83d; color: #3d2a00; border: 0; box-shadow: inset 0 -2px 0 #c98f00; font-family: var(--font-display); }
.speed-btns button { font-family: var(--font-display); }
.open-btn { --bc: #ffc83d !important; --bed: #c98f00 !important; --bfg: #3d2a00 !important; font-family: var(--font-display); letter-spacing: .02em; }
.coach.glass { background: #1f2a22; color: #fff; }
.coach.glass * { color: inherit; }

/* ---------------------------------------------------------------- full-screen menus */
.scr .menu-card, .menu-panel { background: var(--surface-1); border-radius: 28px; box-shadow: var(--elev-3); }
.menu-list .btn { justify-content: flex-start; min-height: 58px; font-size: 1.1rem; }
.menu-list .btn:first-child { --bc: #3ccf5e; --bed: #1f8a3a; --bfg: #fff; }

/* ---------------------------------------------------------------- the shop tablet (Manage) */
.card.modal.mgr.tablet { width: min(1120px, 100%); height: min(800px, calc(var(--vh) - 24px)); background: #15191c; padding: 12px; border-radius: 36px; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7), inset 0 0 0 2px #2c3237, inset 0 -6px 0 #0a0c0e; }
.card.modal.mgr.tablet > .body { padding: 0; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; background: #f4f1e8; }
.tab-os { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 0% 0%, #fffdf5 0%, #f1ecdf 60%, #e9e2d1 100%); }
.os-bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px 8px 14px; background: #ffffff; box-shadow: 0 2px 0 rgba(60, 45, 20, .08); position: relative; z-index: 2; }
.os-back { display: inline-flex; align-items: center; gap: 2px; min-height: 42px; padding: 0 12px 0 6px; border: 0; border-radius: 12px; background: #f1ecdf; color: var(--text-1); font: 600 .95rem var(--font-ui); box-shadow: inset 0 -3px 0 #ddd4c0; }
.os-back[hidden] { display: none; }
.os-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; font: 400 1.35rem var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; }
.os-title > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.os-brand { display: inline-flex; align-items: center; gap: 8px; color: #1f8a3a; overflow: hidden; }
.os-brand span { overflow: hidden; text-overflow: ellipsis; }
.os-app-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--ac); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.os-stat { display: flex; align-items: center; gap: 8px; flex: none; }
.os-time { font: 600 .9rem var(--font-ui); color: var(--text-3); white-space: nowrap; }
.os-money { padding: 6px 12px 7px; border-radius: 999px; background: #fff4d1; color: #6b4a00; font: 400 1.05rem var(--font-display); box-shadow: inset 0 -3px 0 #f2d58a; white-space: nowrap; }
.os-close { flex: none; width: 42px; height: 42px; border: 0; border-radius: 12px; display: grid; place-items: center; background: #ef4d4d; color: #fff; box-shadow: inset 0 -3px 0 #b02a2a; }
.card.modal.mgr.tablet .pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 20px 26px; background: transparent; }
.card.modal.mgr.tablet .pane.tab-order { overflow: hidden; display: flex; flex-direction: column; padding: 14px 16px; }

/* home screen */
.os-widget { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 20px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 200, 61, .35), transparent 50%), linear-gradient(135deg, #2fb34f, #1f8a3a); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), 0 10px 24px -12px rgba(31, 138, 58, .8); }
.os-widget .w-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-widget small { font: 600 .85rem var(--font-ui); opacity: .9; text-transform: uppercase; letter-spacing: .06em; }
.os-widget .w-money { font: 400 clamp(1.8rem, 1.2rem + 2vw, 2.6rem)/1.05 var(--font-display); text-shadow: 0 3px 0 rgba(0, 60, 20, .35); }
.os-widget .w-sub { font-weight: 500; opacity: .92; }
.os-widget .w-side { display: flex; align-items: center; gap: 10px; }
.w-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 8px; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--text-1); font: 600 .9rem var(--font-ui); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.w-chip b { font: 400 1.15rem var(--font-display); }
.w-chip.lv span { color: #8b5cf6; font-weight: 700; }
.w-chip.star .ico-svg { color: #f0ae17; fill: #ffc83d; }
.w-xp { width: 90px; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .2); overflow: hidden; }
.w-xp i { display: block; height: 100%; background: #ffc83d; border-radius: inherit; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 18px 12px; }
.app-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; border: 0; border-radius: 20px; background: transparent; color: var(--text-1); font: 600 .95rem var(--font-ui); cursor: pointer; transition: transform .12s, background-color .15s; }
.app-tile:hover { background: rgba(255, 255, 255, .6); }
.app-tile:active { transform: scale(.95); }
.app-ico { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 80%, #fff), var(--ac) 55%, color-mix(in srgb, var(--ac) 80%, #000)); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .35), 0 8px 16px -8px var(--ac); }
.app-ico .ico-svg { width: 34px; height: 34px; stroke-width: 2.3; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.app-lbl { text-align: center; line-height: 1.15; }
.app-lv { margin-top: -4px; font-size: .75rem; color: var(--text-3); }
.app-tile.locked .app-ico { filter: grayscale(.85) brightness(1.05); opacity: .75; }
.app-tile.locked .app-lbl { color: var(--text-3); }
.app-badge { position: absolute; top: 2px; left: calc(50% + 22px); min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #ffc83d; color: #3d2a00; font: 400 .95rem/26px var(--font-display); box-shadow: 0 2px 0 #c98f00, 0 0 0 3px #f4f1e8; }
.app-badge.alert { background: #ef4d4d; color: #fff; box-shadow: 0 2px 0 #b02a2a, 0 0 0 3px #f4f1e8; }
.locked-hero .lh-ico { background: var(--ac); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }

/* phone: the tablet fills the screen */
@media (max-width: 700px), (max-height: 520px) {
  .card.modal.mgr.tablet { width: 100%; height: var(--vh); max-height: none; padding: 0; border-radius: 0; box-shadow: none; }
  .card.modal.mgr.tablet > .body { border-radius: 0; }
  .modal-back:has(.tablet) { padding: 0; }
  .os-bar { padding: calc(6px + var(--sa-t)) calc(8px + var(--sa-r)) 6px calc(10px + var(--sa-l)); min-height: 54px; gap: 8px; }
  .os-time { display: none; }
  .os-title { font-size: 1.15rem; }
  .os-back span { display: none; }
  .os-back { padding: 0 8px; }
  .card.modal.mgr.tablet .pane { padding: 12px calc(12px + var(--sa-r)) calc(20px + var(--sa-b)) calc(12px + var(--sa-l)); }
  .os-widget { padding: 14px 16px; border-radius: 20px; margin-bottom: 14px; }
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 6px; }
  .app-ico { width: 60px; height: 60px; border-radius: 18px; }
  .app-ico .ico-svg { width: 28px; height: 28px; }
  .app-tile { font-size: .82rem; }
  .app-badge { left: calc(50% + 16px); }
}
@media (max-height: 520px) and (min-width: 600px) {
  .os-widget { flex-wrap: nowrap; padding: 10px 14px; }
  .app-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------------------------------------------------------------- main menu: a cream panel with the shop sign */
.menu-scr { background: linear-gradient(90deg, rgba(10, 30, 16, .55) 0%, rgba(10, 30, 16, .25) 38%, rgba(10, 30, 16, 0) 60%); }
.menu-wrap { width: min(440px, calc(100% - 32px)); height: auto; max-height: calc(var(--vh) - 32px); margin: auto 0 auto calc(var(--sa-l) + clamp(16px, 5vw, 80px)); padding: 26px 24px 24px; gap: 22px; justify-content: flex-start;
  background: #fffaf0; border-radius: 30px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6), inset 0 -6px 0 #e6dcc6; }
.menu-wrap .logo { margin: 0; }
.logo .sign { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 16px 20px 18px; border-radius: 22px; background: linear-gradient(180deg, #2d3338, #1c2024); box-shadow: inset 0 -5px 0 #0e1113, 0 10px 20px -10px rgba(0, 0, 0, .6); border: 3px solid #2fb34f; }
.logo .sign .l1 { font: 600 .9rem var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: #3ccf5e; }
.logo .sign .l2 { font: 400 clamp(2rem, 1.4rem + 2.4vw, 2.8rem)/1 var(--font-display); color: #ffffff; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.logo .sign .l3 { font: 400 clamp(1.8rem, 1.3rem + 2vw, 2.5rem)/1 var(--font-display); color: #ffc83d; display: inline-flex; align-items: center; gap: 10px; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.logo .sign .l3 i { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffc83d; color: #3d2a00; box-shadow: inset 0 -3px 0 #c98f00; }
.menu-list { width: 100%; gap: 10px; }
.menu-list .btn, .menu-list .btn.ghost { --bc: #ffffff; --bh: #fffdf6; --bfg: var(--text-1); --bed: #ddd3bd; --bbd: rgba(60, 45, 20, .1); -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 56px; font-size: 1.12rem; gap: 14px; border-radius: 16px; }
.menu-list .btn.ghost .ico-svg { color: #2fb34f; }
.menu-list .btn.alt { --bc: #3ccf5e; --bh: #46d867; --bfg: #fff; --bed: #1f8a3a; --bbd: transparent; min-height: 62px; font-size: 1.25rem; font-family: var(--font-display); letter-spacing: .02em; }
.menu-list .btn.alt .ico-svg { color: #fff; }
.menu-list .btn.continue:disabled { --bc: #f3eee2; --bfg: var(--text-3); --bed: #e2d9c4; box-shadow: inset 0 -3px 0 #e2d9c4; }
.menu-list .btn.continue:disabled .c2 { color: var(--text-4); }
.menu-foot { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); left: calc(var(--sa-l) + clamp(16px, 5vw, 80px) + 24px); }
#splash { background: radial-gradient(80% 80% at 50% 45%, rgba(10, 30, 16, .2), rgba(10, 30, 16, .7)); }
#splash .press { font: 600 1.15rem var(--font-ui); color: #fff; padding: 12px 22px 14px; border-radius: 999px; background: rgba(31, 138, 58, .95); box-shadow: inset 0 -4px 0 #156a2c; }
@media (max-width: 640px) {
  .menu-scr { background: linear-gradient(0deg, rgba(10, 30, 16, .6) 0%, rgba(10, 30, 16, 0) 60%); }
  .menu-wrap { margin: auto 12px calc(var(--sa-b) + 40px); width: calc(100% - 24px); padding: 18px 16px 16px; gap: 14px; align-self: flex-end; }
  .menu-list .btn { min-height: 50px; }
  .menu-foot { left: 24px; }
}
@media (max-height: 560px) and (min-width: 641px) {
  .menu-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; width: min(760px, calc(100% - 32px)); padding: 16px; gap: 14px; }
  .menu-wrap .logo { flex: 1 1 250px; }
  .menu-list { flex: 1 1 300px; width: auto; gap: 6px; }
  .menu-list .btn { min-height: 44px; }
  .menu-list .btn.continue { min-height: 52px; }
}

/* product pictures (3D renders) */
canvas.pthumb { display: block; flex: none; filter: drop-shadow(0 4px 4px rgba(40, 30, 10, .18)); }
.pc-top { align-items: center; gap: 12px; }
.pc-top canvas.pthumb { border-radius: 16px; background: radial-gradient(circle at 50% 40%, #ffffff, #f1ecdf 70%); }

/* touch layer: readable action caption + chunky buttons */
.tl-caption { background: #1f2a22 !important; color: #ffffff !important; font-family: var(--font-ui); font-weight: 600; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5), inset 0 -3px 0 rgba(0, 0, 0, .35) !important; }
.tl-caption.info { background: rgba(31, 42, 34, .85) !important; }
.tl-btn { font-family: var(--font-ui); }
.tl-btn.use { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), 0 8px 18px -6px rgba(0, 0, 0, .5); }
.mall-hero p { color: rgba(255, 255, 255, .82); }

/* ============================================================== game fonts, logo, loading screen ============================================================== */
@font-face { font-family: 'Titan One'; font-weight: 400; font-display: swap; src: url('../fonts/titan-one-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Luckiest Guy'; font-weight: 400; font-display: swap; src: url('../fonts/luckiest-guy-latin-400-normal.woff2') format('woff2'); }
:root { --font-display: 'Titan One', 'Lilita One', 'Fredoka', system-ui, sans-serif; --font-logo: 'Luckiest Guy', 'Titan One', system-ui, sans-serif; }
.btn.alt, .btn.go, .btn.lg, .menu-list .btn, .open-btn, .hud-btns .manage-btn, .card > .head, .os-title, .app-lbl, .tl-lbl { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; }
.app-lbl { font-size: .9rem; }

/* the game logo: emblem + three-line wordmark with a thick outline and a drop shadow */
.gamelogo { display: flex; align-items: center; gap: 14px; }
.gamelogo .gl-emblem { width: var(--gl-e, 96px); height: auto; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); animation: glBob 3.2s ease-in-out infinite; }
@keyframes glBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.gamelogo .gl-word { display: flex; flex-direction: column; align-items: flex-start; line-height: .86; font-family: var(--font-logo); text-transform: uppercase; }
.gamelogo .gl-word span { paint-order: stroke fill; -webkit-text-stroke: var(--gl-s, 7px) #16201a; text-shadow: 0 var(--gl-d, 5px) 0 #16201a, 0 calc(var(--gl-d, 5px) + 4px) 10px rgba(0, 0, 0, .35); }
.gamelogo .gl-1 { font-size: var(--gl-f1, 1.4rem); color: #4fdc6b; letter-spacing: .28em; margin-left: 4px; }
.gamelogo .gl-2 { font-size: var(--gl-f2, 2.7rem); color: #ffffff; }
.gamelogo .gl-3 { font-size: var(--gl-f3, 2.5rem); color: #ffc83d; }
.menu-wrap .gamelogo { --gl-e: 92px; --gl-f2: clamp(2rem, 1.4rem + 2vw, 2.6rem); --gl-f3: clamp(1.9rem, 1.3rem + 2vw, 2.45rem); padding: 14px 16px 18px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, #2d3b31, #16201a); box-shadow: inset 0 -5px 0 #0a0f0b; }
#splash .gamelogo { --gl-e: clamp(110px, 18vw, 170px); --gl-f1: clamp(1.3rem, 1rem + 1.2vw, 2rem); --gl-f2: clamp(2.6rem, 1.6rem + 4.5vw, 5rem); --gl-f3: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem); --gl-s: 9px; --gl-d: 7px; justify-content: center; }

/* loading screen: a bright green stage with the logo and a chunky striped progress bar */
.loading { background: radial-gradient(90% 70% at 50% 40%, #3ccf5e 0%, #1f8a3a 55%, #0f4d22 100%); gap: 34px; }
.loading .ld-glow { position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(circle at 20px 20px, #ffffff 3px, transparent 4px); background-size: 46px 46px; animation: ldPan 18s linear infinite; }
@keyframes ldPan { to { background-position: 460px 230px; } }
.loading .gamelogo { position: relative; flex-direction: column; text-align: center; --gl-e: clamp(120px, 22vw, 190px); --gl-f1: clamp(1.2rem, 1rem + 1vw, 1.8rem); --gl-f2: clamp(2.4rem, 1.5rem + 4.2vw, 4.6rem); --gl-f3: clamp(2.2rem, 1.4rem + 4vw, 4.2rem); --gl-s: 9px; --gl-d: 7px; }
.loading .gamelogo .gl-word { align-items: center; }
.loading .ld-foot { position: relative; gap: 12px; width: min(440px, 86vw); }
.loading .bar { width: 100%; height: 26px; border-radius: 99px; background: #0f3d1c; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35), 0 3px 0 rgba(255, 255, 255, .15); padding: 4px; overflow: hidden; }
.loading .bar > i { display: block; height: 100%; border-radius: 99px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .45);
  background: repeating-linear-gradient(-45deg, #ffc83d 0 14px, #ffd86b 14px 28px); background-size: 40px 40px; animation: ldStripe .8s linear infinite; transition: width .3s ease-out; }
@keyframes ldStripe { to { background-position: 40px 0; } }
.loading .msg { font: 400 1.15rem var(--font-display); color: #ffffff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); letter-spacing: .02em; }
.loading .ld-tip { font: 500 .95rem var(--font-ui); color: rgba(255, 255, 255, .85); text-align: center; max-width: 380px; }
.loading .fail { color: var(--text-1); }

/* splash: big logo over the street with a pulsing call to action */
#splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
#splash .press { font: 400 1.3rem var(--font-display); letter-spacing: .03em; animation: pressPulse 1.4s ease-in-out infinite; }
@keyframes pressPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (max-height: 520px) { .loading { gap: 16px; } .loading .gamelogo { flex-direction: row; } .loading .gamelogo .gl-word { align-items: flex-start; } #splash .gamelogo { --gl-e: 110px; --gl-f2: 2.6rem; --gl-f3: 2.4rem; } }
.menu-wrap .gamelogo { --gl-e: 78px; --gl-f1: 1.1rem; --gl-f2: clamp(1.7rem, 1.2rem + 1.6vw, 2.15rem); --gl-f3: clamp(1.6rem, 1.1rem + 1.6vw, 2rem); --gl-s: 6px; --gl-d: 4px; overflow: hidden; }
@media (max-width: 640px) {
  #splash .gamelogo, .loading .gamelogo { flex-direction: column; --gl-e: 120px; --gl-f2: clamp(2rem, 9vw, 2.6rem); --gl-f3: clamp(1.9rem, 8.5vw, 2.4rem); --gl-s: 7px; --gl-d: 5px; }
  #splash .gamelogo .gl-word { align-items: center; }
  .menu-wrap .gamelogo { --gl-e: 64px; --gl-f2: clamp(1.5rem, 7vw, 1.9rem); --gl-f3: clamp(1.4rem, 6.6vw, 1.8rem); }
}

/* furniture shop */
.furn-tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; background: #e8f8ec; color: #1f4d2b; box-shadow: inset 0 -3px 0 #c6e9cf; line-height: 1.45; }
.furn-tip .ico-svg { flex: none; color: #2fb34f; margin-top: 2px; }
.furn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
.furn-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 20px; background: #ffffff; box-shadow: 0 2px 0 rgba(60, 45, 20, .08), inset 0 -4px 0 #ece4d2; }
.furn-card.ready { background: #fff8e1; box-shadow: inset 0 -4px 0 #f2d58a, 0 0 0 2px #ffc83d; }
.furn-card .furn-art { display: block; height: 92px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #ffffff, #efe9dc); overflow: hidden; }
.furn-card .furn-art svg { width: 100%; height: 100%; }
.furn-card .f-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.furn-card .f-name { font: 400 1.05rem var(--font-display); color: var(--text-1); }
.furn-card .f-own { padding: 2px 8px; border-radius: 8px; background: #f1ecdf; font: 600 .8rem var(--font-ui); color: var(--text-2); }
.furn-card small { color: var(--text-3); font-size: .82rem; }
.furn-card .btn, .furn-card .pill { margin-top: auto; align-self: stretch; justify-content: center; }
@media (max-width: 640px) { .furn-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .furn-card .furn-art { height: 74px; } }

/* game speed 1x / 2x / 3x */
.speed-btns { background: var(--glass); box-shadow: 0 6px 16px -6px rgba(20, 15, 5, .45), inset 0 -3px 0 rgba(60, 45, 20, .12); }
.speed-btns button { color: var(--text-2); font: 400 1rem var(--font-display); }
.speed-btns button:hover:not(.on) { color: var(--text-1); background: rgba(60, 45, 20, .06); }
.speed-btns button.on { background: #3ccf5e; color: #ffffff; box-shadow: inset 0 -3px 0 #1f8a3a; text-shadow: 0 1px 0 rgba(0, 60, 20, .35); }
.speed-btns[hidden] { display: inline-flex !important; }

/* ============================================================== logo.png everywhere + the new loading screen ============================================================== */
.gamelogo.img { display: block; }
.gamelogo.img .gl-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); user-select: none; -webkit-user-drag: none; }
#splash .gamelogo.img { width: min(520px, 78vw, 62vh); animation: logoIn .7s cubic-bezier(.2, 1.4, .4, 1) both, logoFloat 4s ease-in-out .7s infinite; }
.menu-wrap .gamelogo.img { width: min(300px, 100%); margin: -18px auto -6px; padding: 0; background: none; box-shadow: none; }
@keyframes logoIn { from { transform: scale(.6) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.loading { background: radial-gradient(70% 60% at 50% 38%, #1f8a3a 0%, #0f4d22 45%, #071c0e 100%); gap: 18px; overflow: hidden; }
.loading .ld-glow { display: none; }
.loading .ld-rays { position: absolute; left: 50%; top: 38%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none; opacity: .22;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 107, .9) 0deg 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%); animation: raySpin 40s linear infinite; }
@keyframes raySpin { to { transform: rotate(360deg); } }
.loading .ld-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; pointer-events: none; opacity: .5;
  background: linear-gradient(0deg, #04100a 0%, transparent 100%), repeating-linear-gradient(90deg, #0a2414 0 34px, transparent 34px 46px, #0c2b18 46px 70px, transparent 70px 78px); -webkit-mask: linear-gradient(0deg, #000 30%, transparent); mask: linear-gradient(0deg, #000 30%, transparent); }
.loading .ld-logo { position: relative; width: min(560px, 82vw, 58vh); height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); animation: logoIn .8s cubic-bezier(.2, 1.4, .4, 1) both, logoFloat 4s ease-in-out .8s infinite; }
.loading .ld-foot { width: min(480px, 86vw); }
@media (max-height: 520px) { .loading { flex-direction: row; gap: 28px; padding: 16px 24px; } .loading .ld-logo { width: min(46vh * 1.6, 44vw); } .loading .ld-rays { left: 30%; } }
@media (max-width: 640px) { .menu-wrap .gamelogo.img { width: min(230px, 70%); margin: -10px auto -6px; } }

/* aisle planner */
.aisle-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.aisle-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 -3px 0 #ece4d2; flex-wrap: wrap; }
.aisle-row .a-no { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #1d2125; color: #fff; font: 400 1rem var(--font-display); }
.aisle-row .a-ico { flex: none; color: #2fb34f; }
.aisle-row .a-name { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; }
.aisle-row .a-name small { color: var(--text-3); }
.aisle-row .aisle-sel { flex: 1 1 180px; max-width: 280px; min-height: 40px; }
@media (max-width: 640px) { .aisle-row .aisle-sel { max-width: none; flex-basis: 100%; order: 5; } }

/* ============================================================== till: a POS terminal ============================================================== */
#checkout > .co-card.pos { width: min(400px, calc(100vw - 24px)); background: linear-gradient(180deg, #2a3036, #1a1e22); color: #eef2f0; border-radius: 22px; padding: 0 0 12px; overflow: hidden;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65), inset 0 0 0 2px #3a4249, inset 0 -6px 0 #0d1012; -webkit-backdrop-filter: none; backdrop-filter: none; }
.co-card.pos .pos-top { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: linear-gradient(180deg, #3ccf5e, #23a443); color: #fff; font: 400 .95rem var(--font-display); letter-spacing: .04em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.co-card.pos .pt-lane { padding: 2px 9px; border-radius: 8px; background: #16201a; }
.co-card.pos .pt-store { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 60, 20, .4); }
.co-card.pos .pt-clock { font: 600 .85rem var(--font-ui); opacity: .9; }
.co-card.pos .co-head { padding: 10px 14px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #eef2f0; }
.co-card.pos .co-head .who { color: #fff; font: 400 1.08rem var(--font-display); }
.co-card.pos .co-head .sub { color: #9aa8a0; }
.co-card.pos .co-head canvas { background: #0f1316; border-radius: 10px; }
.co-card.pos .pay-chip { background: #ffc83d; color: #3d2a00; font-weight: 700; box-shadow: inset 0 -2px 0 #c98f00; }
.co-card.pos .pay-chip .ico-svg { color: #3d2a00; }
.co-card.pos .co-meters .bar { background: rgba(255, 255, 255, .12); height: 6px; border-radius: 4px; }
.co-card.pos .co-meters .row { color: #9aa8a0; }
.co-card.pos .co-body { padding: 10px 12px 0; color: #eef2f0; }
.co-card.pos .co-note { color: #b9c6bf; }
.co-card.pos .pos-badge { background: #3ccf5e; color: #06210f; border-radius: 12px; }
/* thermal paper receipt */
.co-card.pos .receipt { position: relative; background: #fbfaf6; color: #1d2125; border-radius: 4px; padding: 12px 14px 12px; margin: 2px 2px 10px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55);
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; font-size: .86rem;
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 14px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 100% / 14px 51% repeat-x;
          mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 14px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 100% / 14px 51% repeat-x; }
.co-card.pos .rc-head { color: #6b746f; font: 700 .78rem ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px dashed #c9c4b6; padding-bottom: 6px; margin-bottom: 6px; }
.co-card.pos .rc-head .ico-svg { color: #2fb34f; }
.co-card.pos .rc-line { border-bottom: 1px dotted #ddd8cb; padding: 4px 0; color: #1d2125; }
.co-card.pos .rc-line b { color: #1d2125; font-family: inherit; font-weight: 700; }
.co-card.pos .rc-line small { color: #6b746f; }
.co-card.pos .rc-sum { font-weight: 700; color: #1d2125; }
.co-card.pos .rc-pending .rc-chip { background: #f0ece1; color: #1d2125; border-radius: 8px; box-shadow: inset 0 0 0 1px #ddd6c4; }
.co-card.pos .rc-total { border-top: 2px dashed #1d2125; margin-top: 8px; padding-top: 8px; color: #1d2125; font-weight: 700; }
.co-card.pos .rc-total-v { font: 400 1.5rem var(--font-display); color: #1d2125; }
.co-card.pos .rc-left { color: #6b746f; }
/* green LCD readouts for the money */
.co-card.pos .co-sum { background: #0c1a10; border-radius: 12px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #24452c; }
.co-card.pos .co-sum .l { color: #6fd58a; letter-spacing: .08em; }
.co-card.pos .co-sum .co-big { color: #7dff9a; text-shadow: 0 0 10px rgba(80, 255, 130, .45); font-family: ui-monospace, Menlo, Consolas, monospace; }
.co-card.pos .co-sum.due { background: #1f1606; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 1px #5a4310; }
.co-card.pos .co-sum.due .l { color: #ffd36b; }
.co-card.pos .co-sum.due .co-big { color: #ffd36b; text-shadow: 0 0 10px rgba(255, 200, 60, .45); }
.co-card.pos .scan-row .co-note { color: #b9c6bf; }
.co-card.pos .co-scan { min-height: 64px; font-size: 1.35rem; border-radius: 18px; }
/* banknotes / coins */
.co-card.pos .notes { gap: 6px; }
.co-card.pos .note { border-radius: 8px; color: #10170f; font: 400 .95rem var(--font-display); background: linear-gradient(135deg, color-mix(in srgb, var(--note) 85%, #fff), var(--note)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25); min-height: 44px; }
.co-card.pos .note.coin { border-radius: 50%; aspect-ratio: 1; }
.co-card.pos .co-hand .l { color: #9aa8a0; }
.co-card.pos .co-hand .co-big { color: #fff; }
.co-card.pos .pay-wait { background: #0f1316; border-radius: 14px; padding: 12px; color: #eef2f0; }
.co-card.pos .haggle-q { background: #fff4d1; color: #3d2a00; border-radius: 14px; padding: 10px 12px; font-weight: 600; }
.co-card.pos .co-leave { --bc: #2e353b; --bed: #15191c; --bfg: #eef2f0; }
@media (max-width: 640px) { #checkout > .co-card.pos { width: calc(100vw - 16px); } }
/* readable banknotes: vivid colour per value, bold white figures */
.co-card .note, .co-card.pos .note { background: var(--nb, #59636b) !important; color: #ffffff !important; font: 400 1.05rem var(--font-display) !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); border: 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .28), 0 3px 8px -3px rgba(0, 0, 0, .5) !important; opacity: 1 !important; }
.co-card .note::before, .co-card .note::after { opacity: .25; }
.co-card .note * { color: #fff !important; }
.co-card .note[data-d="1000"] { --nb: #2f7de1; } .co-card .note[data-d="500"] { --nb: #1f9a52; } .co-card .note[data-d="200"] { --nb: #6aa81e; }
.co-card .note[data-d="100"] { --nb: #d99a12; } .co-card .note[data-d="50"] { --nb: #e2602f; } .co-card .note[data-d="20"] { --nb: #d63a6a; }
.co-card .note[data-d="10"] { --nb: #8b5cf6; } .co-card .note[data-d="5"], .co-card .note.coin { --nb: radial-gradient(circle at 35% 30%, #ffe08a, #c9a23a 70%); color: #3d2a00 !important; text-shadow: none; }
.co-card .note.coin * { color: #3d2a00 !important; }
.co-card .note:active { transform: translateY(2px); }
/* give change / clear: proper buttons */
.co-card.pos .co-actions .btn { min-height: 44px; }
.co-card.pos .co-actions .btn:last-child { --bc: #3ccf5e; --bed: #1f8a3a; --bfg: #fff; font-family: var(--font-display); }

/* team uniform picker */
.uni-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.uni-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 14px; background: #f6f2e8; box-shadow: inset 0 -3px 0 #e2d9c4; cursor: pointer; }
.uni-sw.on { background: #e4f8e8; box-shadow: inset 0 0 0 2px #2fb34f, inset 0 -3px 0 #2fb34f; }
.uni-sw small { font-size: .74rem; color: var(--text-2); text-align: center; }
.uni-shirt { width: 46px; height: 40px; background: var(--a); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40'%3E%3Cpath d='M15 2 L4 8 L0 18 L8 21 L10 16 L10 40 L36 40 L36 16 L38 21 L46 18 L42 8 L31 2 Q23 9 15 2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40'%3E%3Cpath d='M15 2 L4 8 L0 18 L8 21 L10 16 L10 40 L36 40 L36 16 L38 21 L46 18 L42 8 L31 2 Q23 9 15 2Z'/%3E%3C/svg%3E") center / contain no-repeat; box-shadow: inset 0 6px 0 var(--b); }

/* loader performance: only transform / opacity animations (they run on the compositor even while the page is busy loading) */
.loading .ld-rays { width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; opacity: .16; -webkit-mask: none; mask: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 107, .9) 0deg 7deg, transparent 7deg 18deg); will-change: transform; contain: strict; }
.loading .ld-rays::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 0%, #0f4d22 48%); }
.loading .ld-skyline { -webkit-mask: none; mask: none; }
.loading .ld-logo { filter: none; will-change: transform; }
.loading .bar > i { position: relative; overflow: hidden; background: #ffc83d; animation: none; }
.loading .bar > i::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40px; width: calc(100% + 80px); will-change: transform;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, .35) 14px 28px); animation: ldStripe2 .8s linear infinite; }
@keyframes ldStripe2 { from { transform: translateX(0); } to { transform: translateX(40px); } }

/* ============================================================== merged loader (js/loader.js markup) in this build's look ============================================================== */
.loading .ld-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(560px, 90vw); }
.loading .nr-logo { width: min(520px, 80vw, 54vh); }
.loading .nr-logo img { display: block; width: 100%; height: auto; will-change: transform; animation: logoIn .8s cubic-bezier(.2, 1.4, .4, 1) both, logoFloat 4s ease-in-out .8s infinite; }
.loading .nr-logo:not(.noimg) .nr-type { display: none; }
.loading .ld-foot { width: min(480px, 86vw); display: flex; flex-direction: column; gap: 10px; }
.loading .ld-row { display: flex; justify-content: space-between; align-items: baseline; }
.loading .ld-msg { font: 400 1.1rem var(--font-display); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.loading .ld-pct { font: 400 1.1rem var(--font-display); color: #ffc83d; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums; }
.loading .ld-bar { position: relative; height: 26px; border-radius: 99px; background: #0f3d1c; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35), 0 3px 0 rgba(255, 255, 255, .15); padding: 4px; overflow: hidden; }
.loading .ld-bar > i { display: block; height: 100%; width: 100%; border-radius: 99px; transform-origin: left center; background: #ffc83d; position: relative; overflow: hidden; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .45); transition: transform .25s ease-out; }
.loading .ld-bar > i::after { content: ''; position: absolute; inset: 0 -40px; will-change: transform; background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, .35) 14px 28px); animation: ldStripe2 .8s linear infinite; }
.loading .ld-tip { margin: 0; font: 500 .95rem var(--font-ui); color: rgba(255, 255, 255, .88); text-align: center; min-height: 2.6em; transition: opacity .25s; }
.loading .ld-tip b { color: #ffc83d; }
.loading .ld-slow { margin: 0; text-align: center; font: 500 .85rem var(--font-ui); color: #ffd86b; }
/* menu logo (screens.js nr-logo) */
.menu-wrap .nr-logo { width: min(300px, 100%); margin: -18px auto -6px; }
.menu-wrap .nr-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); }
.menu-wrap .nr-logo:not(.noimg) .nr-type { display: none; }
#splash .nr-logo { width: min(520px, 78vw, 62vh); }
#splash .nr-logo img { width: 100%; height: auto; animation: logoIn .7s cubic-bezier(.2, 1.4, .4, 1) both, logoFloat 4s ease-in-out .7s infinite; }
@media (max-height: 520px) { .loading .ld-center { flex-direction: row; width: min(900px, 94vw); } .loading .nr-logo { width: min(40vw, 70vh); } }