:root {
  color-scheme: dark;
  --bg: var(--tg-theme-bg-color, #0d111a);
  --card: var(--tg-theme-secondary-bg-color, #171d2a);
  --text: var(--tg-theme-text-color, #f4f6fb);
  --muted: var(--tg-theme-hint-color, #98a2b4);
  --link: var(--tg-theme-link-color, #7c9cff);
  --button: var(--tg-theme-button-color, #6f5cff);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --border: rgba(255,255,255,.09);
  --danger: #ff6b7a;
  --ok: #59d89c;
  --warning: #ffd166;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding: env(safe-area-inset-top) 0 calc(82px + env(safe-area-inset-bottom)); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 10; display:flex; justify-content:space-between; align-items:center; padding:18px 18px 12px; background:linear-gradient(180deg,var(--bg) 72%,transparent); }
.eyebrow { font-size:10px; letter-spacing:.26em; color:#9e8cff; font-weight:800; }
h1 { margin:3px 0 0; font-size:24px; }
h2 { font-size:20px; margin:0 0 12px; }
h3 { font-size:16px; margin:0; }
p { line-height:1.45; }
main { max-width:760px; margin:0 auto; padding:4px 14px 24px; }
.view { display:none; animation:fade .18s ease; }
.view.active { display:block; }
@keyframes fade { from { opacity:.4; transform:translateY(3px) } to { opacity:1; transform:none } }
.card { background:linear-gradient(145deg,rgba(255,255,255,.035),transparent),var(--card); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:12px; box-shadow:0 10px 28px rgba(0,0,0,.13); }
.hero { padding:20px; background:radial-gradient(circle at 90% 0%,rgba(124,92,255,.33),transparent 42%),var(--card); }
.hero h2 { font-size:25px; }
.muted { color:var(--muted); }
.row { display:flex; gap:10px; align-items:center; }
.between { justify-content:space-between; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.stat { padding:13px; background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:14px; }
.stat b { display:block; font-size:20px; margin-top:3px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.btn { width:100%; border:0; border-radius:13px; padding:13px 15px; background:var(--button); color:var(--button-text); font-weight:800; }
.btn.secondary { background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--border); }
.btn.danger { background:rgba(255,107,122,.16); color:#ff9baa; border:1px solid rgba(255,107,122,.25); }
.btn.small { width:auto; padding:9px 12px; font-size:13px; }
.icon-btn { width:40px; height:40px; border-radius:13px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:20px; }
.actions { display:grid; gap:9px; }
label { display:block; font-size:13px; font-weight:700; margin:13px 0 6px; }
input, textarea, select { width:100%; border:1px solid var(--border); border-radius:12px; padding:12px; background:rgba(0,0,0,.16); color:var(--text); outline:none; }
textarea { min-height:106px; resize:vertical; }
input:focus, textarea:focus, select:focus { border-color:rgba(124,156,255,.7); }
.ticket { display:block; width:100%; text-align:left; border:1px solid var(--border); border-radius:14px; padding:13px; margin-top:8px; color:var(--text); background:rgba(255,255,255,.03); }
.ticket .num { font-weight:850; }
.ticket .status { color:var(--muted); font-size:12px; margin-top:5px; }
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; background:rgba(255,255,255,.07); padding:5px 9px; font-size:11px; color:var(--muted); }
.question { border-top:1px solid var(--border); margin-top:12px; padding-top:10px; }
.message { max-width:88%; padding:10px 12px; border-radius:14px; margin:8px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.message.user { margin-left:auto; background:rgba(111,92,255,.2); border:1px solid rgba(111,92,255,.3); }
.message.staff { background:rgba(89,216,156,.10); border:1px solid rgba(89,216,156,.2); }
.message .meta { font-size:10px; color:var(--muted); margin-bottom:4px; }
.tabbar { position:fixed; bottom:0; left:0; right:0; z-index:20; display:grid; grid-template-columns:repeat(4,1fr); padding:8px 8px calc(8px + env(safe-area-inset-bottom)); backdrop-filter:blur(20px); background:rgba(11,14,22,.91); border-top:1px solid var(--border); }
.tab { border:0; background:transparent; color:var(--muted); display:grid; place-items:center; gap:3px; padding:6px 2px; }
.tab span { font-size:20px; }
.tab small { font-size:10px; }
.tab.active { color:var(--text); }
.toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(10px); opacity:0; pointer-events:none; max-width:90%; padding:10px 14px; border-radius:12px; background:#222938; color:white; transition:.2s; z-index:50; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.error { color:#ff9baa; }
.success { color:#82e6b6; }
.loading { padding:28px 10px; text-align:center; color:var(--muted); }
.game-session { display:flex; flex-direction:column; align-items:center; gap:8px; min-height:0; }
.canvas-wrap { position:relative; overflow:hidden; width:min(100%, 440px, calc((100dvh - 205px) * 9 / 13)); min-width:230px; aspect-ratio:9/13; margin:0 auto; border-radius:18px; border:1px solid var(--border); background:linear-gradient(#142b45,#0a1828 55%,#07111d); box-shadow:0 16px 36px rgba(0,0,0,.22); }
#game-canvas { display:block; width:100%; height:100%; touch-action:none; }
.game-hud { position:absolute; inset:10px 10px auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; pointer-events:none; font-weight:800; text-shadow:0 1px 3px #000; font-size:13px; }
.game-hud__score { justify-self:start; min-width:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.game-hud__time { justify-self:center; }
.game-hud__lives { justify-self:end; letter-spacing:-2px; white-space:nowrap; }
.game-help { width:min(100%, 520px); margin:0; text-align:center; font-size:12px; line-height:1.35; }
@media (max-height:760px) { .topbar { padding-top:10px; padding-bottom:7px; } .topbar h1 { font-size:20px; } main { padding-top:0; padding-bottom:12px; } .canvas-wrap { width:min(100%, 400px, calc((100dvh - 165px) * 9 / 13)); } .game-help { font-size:11px; } }
@media (max-height:620px) { .canvas-wrap { width:min(100%, 350px, calc((100dvh - 135px) * 9 / 13)); } .game-help { display:none; } }
.leaderboard { counter-reset:rank; list-style:none; padding:0; margin:0; }
.leaderboard li { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.leaderboard li b { flex:0 0 auto; font-variant-numeric:tabular-nums; }
.leaderboard li:last-child { border-bottom:0; }
.empty { text-align:center; color:var(--muted); padding:20px 8px; }
.file-note { font-size:12px; color:var(--muted); margin-top:5px; }
@media (min-width:640px) { main { padding-left:20px; padding-right:20px; } .hero { padding:24px; } }

/* v0.2.3: custom category picker for Telegram Mini App */
.required-mark { color: var(--danger); }
.field-error { min-height: 18px; margin-top: 6px; color: #ff9baa; font-size: 12px; font-weight: 700; }
.category-picker-trigger {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(124,156,255,.55);
  border-radius: 14px;
  background: rgba(7,13,24,.58);
  color: var(--text);
  text-align: left;
  outline: none;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}
.category-picker-trigger:active { transform: scale(.995); }
.category-picker-trigger:focus-visible { border-color: #8ea7ff; box-shadow: 0 0 0 3px rgba(124,156,255,.15); }
.category-picker-trigger.selected { border-color: rgba(111,92,255,.85); background: rgba(111,92,255,.08); }
.category-picker-trigger__content { min-width: 0; display: flex; align-items: center; gap: 11px; }
.category-picker-trigger__emoji { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 20px; }
.category-picker-trigger__text { min-width: 0; display: grid; gap: 3px; }
.category-picker-trigger__text strong { font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-picker-trigger__text small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-picker-trigger__chevron { flex: 0 0 auto; color: var(--muted); font-size: 21px; line-height: 1; transform: translateY(-2px); }

body.picker-open { overflow: hidden; }
.category-picker { position: fixed; inset: 0; z-index: 100; pointer-events: none; visibility: hidden; }
.category-picker.open { pointer-events: auto; visibility: visible; }
.category-picker__backdrop { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: rgba(0,0,0,.56); opacity: 0; transition: opacity .2s ease; }
.category-picker.open .category-picker__backdrop { opacity: 1; }
.category-picker__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255,255,255,.10);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: #101827;
  box-shadow: 0 -22px 60px rgba(0,0,0,.45);
  transform: translateY(105%);
  transition: transform .24s cubic-bezier(.2,.75,.25,1);
}
.category-picker.open .category-picker__sheet { transform: translateY(0); }
.category-picker__handle { width: 42px; height: 4px; margin: 1px auto 11px; border-radius: 99px; background: rgba(255,255,255,.20); }
.category-picker__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.category-picker__header h3 { margin-top: 4px; font-size: 19px; }
.category-picker__close { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.055); color: var(--text); font-size: 24px; line-height: 1; }
.category-picker__search-wrap { display: flex; align-items: center; gap: 8px; padding: 0 11px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: #0a1220; color: var(--muted); }
.category-picker__search { border: 0; border-radius: 0; padding: 11px 0; background: transparent; color: #fff; }
.category-picker__search:focus { border-color: transparent; }
.category-picker__search::placeholder { color: #7f8ba0; opacity: 1; }
.category-picker__list { min-height: 80px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 7px; padding: 1px 1px 3px; scrollbar-width: thin; }
.category-option {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: #162133;
  color: #f7f9ff;
  text-align: left;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.category-option:active { transform: scale(.993); background: #1d2b42; }
.category-option.selected { border-color: rgba(124,156,255,.78); background: linear-gradient(135deg,rgba(111,92,255,.18),rgba(22,33,51,.96)); }
.category-option__emoji { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 22px; }
.category-option__body { min-width: 0; display: grid; gap: 3px; }
.category-option__body strong { font-size: 14px; color: #fff; }
.category-option__body small { display: -webkit-box; overflow: hidden; color: #9eabc0; font-size: 11px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.category-option__check { justify-self: end; color: #9eb0ff; font-size: 18px; font-weight: 900; }
.category-picker__empty { padding: 28px 12px; text-align: center; color: var(--muted); }

/* Native selects remain only for dynamic CHOICE questions. Keep them readable in all WebViews. */
select, select option { background: #162133; color: #fff; }
select option:checked { background: #25344d; color: #fff; }
.btn:disabled { opacity: .48; cursor: not-allowed; filter: saturate(.55); }

@media (min-width: 640px) {
  .category-picker__sheet { left: 50%; right: auto; width: min(620px, calc(100% - 32px)); transform: translate(-50%, 105%); border-radius: 24px 24px 0 0; }
  .category-picker.open .category-picker__sheet { transform: translate(-50%, 0); }
}

/* v0.2.7: game economy, upgrade shop and leaderboard run time */
.game-hud { grid-template-columns: minmax(0,1fr) auto auto minmax(0,1fr); }
.game-hud__coins { justify-self:center; white-space:nowrap; color:#ffd86a; font-variant-numeric:tabular-nums; }
.game-wallet { padding:12px 0 4px; align-items:flex-end; }
.game-wallet > div { display:grid; gap:3px; }
.game-wallet > div:last-child { text-align:right; }
.game-wallet b { font-size:18px; font-variant-numeric:tabular-nums; }
.upgrade-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.upgrade-card { display:flex; flex-direction:column; min-width:0; padding:12px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.035); }
.upgrade-card__head { display:flex; align-items:center; gap:9px; min-width:0; }
.upgrade-card__head > div { min-width:0; display:grid; gap:2px; }
.upgrade-card__head strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; }
.upgrade-card__head small { color:var(--muted); font-size:10px; letter-spacing:.02em; }
.upgrade-card__icon { flex:0 0 auto; width:37px; height:37px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.06); font-size:21px; }
.upgrade-card p { flex:1; margin:9px 0 11px; color:var(--muted); font-size:11px; line-height:1.35; }
.upgrade-card .btn { width:100%; }
.leaderboard__player { min-width:0; display:flex; align-items:center; }
.leaderboard__player strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard__result { flex:0 0 auto; display:grid; justify-items:end; gap:2px; }
.leaderboard__result b { font-size:14px; }
.leaderboard__result small { color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
@media (max-width:420px) {
  .upgrade-grid { grid-template-columns:1fr; }
  .game-hud { font-size:11px; gap:5px; inset-left:7px; inset-right:7px; }
}

/* v0.2.8: renderer-independent NeverLand coin + 50-level upgrade progression */
.nl-coin {
  display:inline-grid;
  place-items:center;
  width:1.05em;
  height:1.05em;
  box-sizing:border-box;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid #ffe58a;
  background:radial-gradient(circle at 32% 28%,#fff3a6 0 12%,#ffd34f 38%,#e99a17 68%,#9f5700 100%);
  box-shadow:inset 0 0 0 1px rgba(117,61,0,.45),0 0 7px rgba(255,191,53,.14);
  color:#6a3900;
  font:800 .58em/1 system-ui,sans-serif;
  vertical-align:-.08em;
}
.nl-coin > span { transform:translateY(.02em); }
.nl-coin--sm { width:.95em; height:.95em; font-size:.95em; }
.nl-coin--hud { width:1.25em; height:1.25em; font-size:1em; }
.coin-amount { display:inline-flex; align-items:center; justify-content:center; gap:.32em; white-space:nowrap; font-variant-numeric:tabular-nums; }
.upgrade-progress { height:5px; margin-top:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
.upgrade-progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4c8dcc,#72b8ff); transition:width .2s ease; }
.upgrade-card__head small { font-variant-numeric:tabular-nums; }
.upgrade-card .btn .coin-amount { color:inherit; }