:root {
  --navy: #182338; --navy2: #1E2B44; --slate: #34465F; --cream: #F4E9D8; --peach: #E9B18A;
  --rose: #D990A4; --sage: #A9C4AD; --teal: #69B7B0; --amber: #E9B45B; --lav: #B6A3D9;
  --ink: #F4E9D8; --muted: #A8B3C7; --line: #2E3F5C; --outline: #1E1A2B;
  --r: 14px; --gap: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--navy); color: var(--ink); }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh; overscroll-behavior: none;
}
#app { max-width: 480px; margin: 0 auto; padding: 0 var(--gap) calc(88px + env(safe-area-inset-bottom)); }
#app[data-screen="loading"], #app[data-screen="intro"], #app[data-screen="hatch"] { padding-bottom: 24px; }
canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
canvas.icon { display: inline-block; vertical-align: middle; }
h1 { font-size: 24px; line-height: 1.2; margin: 16px 0 16px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 24px 0 12px; font-weight: 700; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.center-text { text-align: center; }

.btn {
  font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 14px 24px; min-height: 48px;
  color: var(--navy); background: var(--cream); cursor: pointer; width: 100%; margin-top: 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
/* 12.10 Давид: «все кнопки — анимация, что нажатие прошло» — любая кнопка заметно приседает и темнеет (scale не мешает повороту карт в веере) */
button { transition: scale .09s ease-out, filter .09s ease-out; }
button:active:not(:disabled) { scale: .94; filter: brightness(.88); }
.dk-start { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.pc-ghost { position: fixed; z-index: 60; margin: 0 !important; pointer-events: none; transform: none !important; }
.btn.primary { background: var(--teal); color: #0F1A24; }
.btn.ghost { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.btn.small { padding: 10px 16px; min-height: 40px; font-size: 15px; margin-top: 12px; }
.btn:disabled { opacity: .45; }
.back { align-self: flex-start; background: none; border: 0; color: var(--muted); font: inherit; padding: 12px 0 0; cursor: pointer; min-height: 44px; }

/* загрузка и вступление */
.loading { min-height: 90dvh; justify-content: center; gap: 16px; }
.bar { width: 200px; height: 10px; background: var(--navy2); border: 2px solid var(--outline); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--amber); }
.intro { min-height: 92dvh; justify-content: center; padding-top: 24px; }
.tagline { color: var(--peach); font-weight: 700; margin: 12px 0 8px; }
.intro-row { display: flex; gap: 8px; margin: 16px 0; }
.lead { color: var(--muted); max-width: 340px; }

/* выбор кот/собака */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  font: inherit; color: var(--navy); border: 0; border-radius: var(--r); padding: 16px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.choice.cat { background: var(--cream); }
.choice.dog { background: #CFE6DF; }
.choice b { font-size: 20px; margin-top: 4px; }
.choice span { font-size: 14px; color: #4A5468; }

/* стартовые питомцы */
.grid { display: grid; gap: 12px; }
.starters { grid-template-columns: repeat(3, 1fr); }
.pet-card, .coll-card {
  font: inherit; color: var(--ink); background: var(--navy2); border: 2px solid var(--line); border-radius: var(--r);
  padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
}
.pet-card span { font-size: 13px; color: var(--muted); }
.pet-card.sel { border-color: var(--teal); background: #22384A; }
.pick-info { min-height: 48px; margin-top: 12px; text-align: center; }
.rar { display: inline-block; font-size: 12px; font-weight: 700; color: var(--rc); border: 1.5px solid var(--rc); border-radius: 6px; padding: 0 6px; line-height: 18px; vertical-align: middle; }

/* имя */
.stage { background: var(--navy2); border-radius: var(--r); padding: 16px 24px; margin: 8px 0 16px; box-shadow: inset 0 0 0 2px var(--rc, var(--line)); }
.stage.dark { background: #111A2B; }
.name-input {
  font: inherit; font-size: 20px; font-weight: 700; text-align: center; width: 100%; max-width: 320px; padding: 12px;
  border-radius: 12px; border: 2px solid var(--line); background: var(--cream); color: var(--navy);
}
.name-input:focus { outline: 3px solid var(--teal); outline-offset: 1px; }

/* дом */
.home { padding-top: 8px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 12px; }
.who { display: flex; flex-direction: column; }
.who b { font-size: 20px; }
.coins { display: flex; align-items: center; gap: 8px; background: var(--navy2); border-radius: 999px; padding: 6px 14px 6px 10px; font-weight: 700; }
canvas.room { width: 360px; height: 300px; position: relative; left: 50%; transform: translateX(-50%); border-radius: 6px; box-shadow: 0 0 0 3px var(--outline); cursor: pointer; }
@media (max-width: 359px) { canvas.room { width: 240px; height: 200px; } }
.stats { display: grid; gap: 8px; margin: 16px 0 12px; }
.stat { display: grid; grid-template-columns: 96px 1fr; align-items: center; font-size: 14px; color: var(--muted); }
.meter { height: 12px; background: #111A2B; border: 2px solid var(--outline); border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--c); transition: width .5s steps(8); }
.actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.act {
  font: inherit; font-size: 13px; color: var(--navy); background: var(--cream); border: 0; border-radius: 12px; min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.act:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.quest { margin-top: 16px; background: var(--navy2); border-radius: var(--r); padding: 12px 16px; border: 2px solid var(--line); }
.quest ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.quest li.ok { color: var(--sage); }

/* коллекция */
.progress { height: 12px; background: #111A2B; border: 2px solid var(--outline); border-radius: 3px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--amber); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; } /* без ленты, которая листается вбок: все вкладки видны сразу */
.tabs button { font: inherit; font-size: 14px; color: var(--muted); background: var(--navy2); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; min-height: 40px; }
.tabs button.on { background: var(--cream); color: var(--navy); font-weight: 700; }
.coll { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.coll-card b, .coll-card span { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; text-align: center; max-width: 100%; } /* длинное слово — перенос по слогам, а не «Тираннозаври/к» */
.coll-card { border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
.coll-card b { font-size: 14px; }
.coll-card span { color: var(--rc); }
.coll-card.unknown { background: #141E31; }
.coll-card.unknown b { color: var(--muted); }

/* яйца */
.egg-list { display: grid; gap: 12px; }
.egg-card { display: flex; gap: 16px; align-items: center; background: var(--navy2); border-radius: var(--r); padding: 12px 16px; border: 2px solid var(--line); }
.egg-card > div { flex: 1; }
.eggs-cat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.eggs-cat .rar { font-size: 11px; padding: 0 4px; }
.egg-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px; background: var(--navy2); border-radius: var(--r); }
.breath { animation: breath 2.4s steps(2) infinite; }
.wobble { animation: wobble .9s steps(4) infinite; }
@keyframes breath { 50% { transform: translateY(-2px); } }
@keyframes wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.hatch { min-height: 90dvh; justify-content: center; }
.hatch-cv { width: 240px; height: 240px; }
.reveal { animation: pop .4s steps(4); }
@keyframes pop { from { transform: scale(.6); } }

/* ателье */
.picker { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pick { background: var(--navy2); border: 2px solid transparent; border-radius: 10px; padding: 2px; cursor: pointer; display: flex; justify-content: center; }
.pick.on { border-color: var(--teal); }
.pick canvas { width: 40px !important; height: 40px !important; }
.anims { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.anim-card { background: var(--navy2); border-radius: 10px; display: flex; flex-direction: column; align-items: center; padding: 6px 0 8px; }
.anim-card canvas { width: 72px !important; height: 81px !important; }
.room-prev { width: 240px !important; height: 200px !important; border-radius: 6px; box-shadow: 0 0 0 3px var(--outline); }
@media (min-width: 400px) { .room-prev { width: 360px !important; height: 300px !important; } }

/* нижняя панель */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  background: #121B2D; border-top: 2px solid var(--outline); padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  z-index: 8; /* выше карточек игр (у их текста z-index 1), ниже окон и подсказок */
}
.tabbar button { position: relative; font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; cursor: pointer; min-height: 56px; }
.tabbar button.on { color: var(--cream); }
.tabbar button.on canvas { filter: drop-shadow(0 2px 0 var(--teal)); }
.tabbar em { position: absolute; top: 2px; left: calc(50% + 8px); font-style: normal; font-size: 11px; font-weight: 800; background: var(--rose); color: var(--navy); border-radius: 999px; padding: 0 6px; }

/* всплывающее */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  background: var(--cream); color: var(--navy); font-weight: 700; padding: 10px 16px; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.35);
  width: max-content; max-width: calc(100vw - 32px); text-align: center; transition: opacity .4s;
}
.toast.out { opacity: 0; }
.sheet { position: fixed; inset: 0; background: rgba(10,14,24,.6); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet-body { background: var(--navy); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 2px solid var(--line); }
.sheet-body h2 { margin: 0; }

/* ——— версия с сервером ——— */
.page.mid { min-height: 80dvh; display: flex; flex-direction: column; justify-content: center; }
h1.inline { margin: 0; }
.topbar { gap: 12px; }
.who { flex: 1; min-width: 0; }
.who b, .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl { font: inherit; border: 0; background: var(--lav); color: var(--navy); border-radius: 12px; width: 48px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.lvl b { font-size: 18px; } .lvl span { font-size: 11px; }
.act { position: relative; }
.act small { font-size: 11px; color: #6A5A50; min-height: 13px; }
.act.wait { opacity: .55; }
.row-btns { display: flex; gap: 8px; }
.row-btns .btn { flex: 1; }
.chip { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--navy2); color: var(--ink); border: 2px solid var(--line); cursor: pointer; min-height: 36px; }
.chip.on { background: var(--cream); color: var(--navy); border-color: var(--cream); font-weight: 700; }
.chip.ok { color: var(--sage); border-color: transparent; background: transparent; cursor: default; min-height: 0; padding: 2px 6px; }
.chip.locked { color: var(--muted); }
.coll-card .chip { min-height: 0; padding: 0 8px; font-size: 11px; margin-top: 2px; }
.coll-card.off { opacity: .4; }
.coll-card span.first { color: var(--amber); }
.price { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.price.stars { color: #8A5A00; }
.buy { font: inherit; border: 0; border-radius: 10px; background: var(--cream); color: var(--navy); padding: 8px 12px; min-height: 40px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.buy:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-card b { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.shop-card { background: var(--navy2); border: 2px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.shop-card b { font-size: 14px; }
.room-thumb { width: 120px !important; height: 100px !important; border-radius: 4px; box-shadow: 0 0 0 2px var(--outline); }
.opt-list { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; justify-content: space-between; background: var(--navy2); border-radius: 12px; padding: 8px 12px; min-height: 52px; }
.opt-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.opt-title { align-self: flex-start; margin-top: 8px; font-size: 14px; }
.friend-code { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; background: var(--navy2); border-radius: var(--r); padding: 12px 16px; border: 2px solid var(--line); }
.friend-code b { font-size: 28px; letter-spacing: .12em; font-family: ui-monospace, Menlo, monospace; grid-column: 1; }
.friend-code .btn { grid-column: 2; grid-row: 1 / 3; width: auto; margin: 0; }
.add-row { display: flex; gap: 8px; margin-top: 12px; }
.add-row .btn { width: auto; margin: 0; }
.code-input { flex: 1; min-width: 0; font: inherit; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--cream); color: var(--navy); }
.friend-list { display: grid; gap: 8px; }
.friend { font: inherit; color: var(--ink); display: flex; align-items: center; gap: 12px; text-align: left; background: var(--navy2); border: 2px solid var(--line); border-radius: var(--r); padding: 8px 12px; cursor: pointer; }
.friend > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.friend .lv { font-weight: 800; color: var(--lav); }
.lvl-big { display: grid; gap: 6px; margin-bottom: 16px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fact { background: var(--navy2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.fact b { font-size: 20px; }
.breed-slots { display: flex; align-items: center; justify-content: center; gap: 12px; }
.breed-slot { font: inherit; color: var(--ink); background: var(--navy2); border: 2px dashed var(--line); border-radius: var(--r); width: 112px; min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.breed-info { margin-top: 12px; min-height: 64px; }
.likely { margin: 6px 0; padding-left: 20px; font-size: 15px; }
.warn { color: var(--rose); }
.banner { background: var(--amber); color: var(--navy); font-weight: 800; padding: 8px 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; }
.tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tabbar button { font-size: 11px; }
.sheet-body { max-height: 88dvh; overflow-y: auto; }
.sheet-body > * { flex-shrink: 0; } /* длинное окно прокручивается, а не сплющивает кнопки */
.sheet-body .room-prev { width: 240px !important; height: 200px !important; }

.chip.soon { color: var(--muted); border-color: transparent; cursor: default; }
code.key { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; background: var(--navy2); border-radius: 10px; padding: 10px 12px; margin: 8px 0; user-select: all; }

/* вступление 2.0 */
.intro { gap: 4px; }
.intro .intro-row { gap: 4px; margin: 0 0 12px; }
.brand-ru { margin: 4px 0 0; font-size: 15px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.tagline.big { font-size: 22px; line-height: 1.3; font-weight: 800; margin: 12px 0 8px; }
.tagline .peach { color: var(--peach); } .tagline .teal { color: var(--teal); } .tagline .rose { color: var(--rose); } .tagline .lav { color: var(--lav); }
.intro .lead { font-size: 16px; margin: 6px 0; }

/* главный экран без прокрутки */
#app[data-screen="home"] { height: 100dvh; overflow: hidden; padding-bottom: 0; }
.home2 { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; height: calc(100dvh - 76px - env(safe-area-inset-bottom)); }
.home2 .topbar { width: 100%; padding: 4px 0 0; }
button.who { font: inherit; color: var(--ink); background: none; border: 0; text-align: left; padding: 4px 0; cursor: pointer; display: flex; flex-direction: column; min-width: 0; flex: 1; }
.room-wrap { position: relative; flex: none; }
.room-wrap canvas.room { position: static; transform: none; left: auto; margin: 0; }
.corner { position: absolute; top: 8px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(24,35,56,.78); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 2px var(--outline); }
.corner.left { left: 8px; } .corner.right { right: 8px; }
.corner.dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--outline); }
.corner.hot::after { background: var(--rose); animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { transform: scale(1.35); } }
.stats2 { display: grid; gap: 8px; justify-items: center; }
.statbar { display: block; }
.actions2 { display: grid; grid-template-columns: repeat(4, min(80px, calc((100vw - 64px) / 4))); gap: 12px; justify-content: center; }
.act2 { position: relative; width: 100%; aspect-ratio: 1; border: 0; border-radius: 18px; background: var(--cream); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.act2:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.act2 small { position: absolute; bottom: -2px; left: 50%; transform: translate(-50%, 50%); font-size: 11px; font-weight: 800; background: var(--slate); color: var(--cream); border-radius: 999px; padding: 0 6px; line-height: 18px; white-space: nowrap; }
.act2 small:empty { display: none; }
.act2.wait { background: #B9B1A4; }
.act2.wait canvas { opacity: .45; }
.qlist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; font-size: 17px; text-align: left; }
.qlist li.ok { color: var(--sage); }

/* прокрутка скинов */
.reel { position: relative; width: 100%; max-width: 360px; overflow: hidden; background: #111A2B; border-radius: 14px; padding: 10px 0; margin: 8px 0; box-shadow: inset 0 0 0 2px var(--line); }
.reel-strip { display: flex; gap: 8px; will-change: transform; }
.reel-card { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--navy2); border-radius: 10px; padding: 6px 2px; font-size: 11px; color: var(--muted); text-align: center; }
.reel-card canvas { width: 64px !important; height: 64px !important; object-fit: contain; }
.reel-card.won { background: var(--amber); color: var(--navy); font-weight: 800; }
.reel-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--rose); box-shadow: 0 0 0 1px var(--outline); }

/* примерка комнаты */
.try-box { position: sticky; top: 0; z-index: 2; background: var(--navy); padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.room-try { width: 240px; height: 200px; border-radius: 6px; box-shadow: 0 0 0 3px var(--outline); }
@media (min-width: 400px) { .room-try { width: 360px; height: 300px; } }
.try-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.tryable { cursor: pointer; }
.tryable.trying { box-shadow: 0 0 0 3px var(--teal); }

/* задания дня и «поделиться» */
.daily { width: 100%; margin-top: 8px; border-top: 2px solid var(--line); padding-top: 4px; }
.dlist { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; text-align: left; }
.dq { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--navy2); border-radius: 12px; padding: 8px 12px; min-height: 52px; }
.dq-text small { color: var(--muted); font-weight: 700; }
.dq.done .dq-text { color: var(--muted); text-decoration: line-through; }
.card-prev { width: 180px; image-rendering: pixelated; border-radius: 10px; box-shadow: 0 0 0 2px var(--line); margin: 4px 0 8px; }
.odds { display: flex; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.odd { flex: 1; min-width: 80px; background: var(--navy2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 0 0 2px var(--rc); }
.odd b { font-size: 20px; color: var(--rc); } .odd span { font-size: 12px; color: var(--muted); }

/* вайб комнаты, шансы, яйца-тики */
.corner.bl { top: auto; bottom: 8px; left: 8px; }
.vibe { width: 100%; background: var(--navy2); border-radius: 14px; padding: 12px; margin: 8px 0; text-align: left; }
.vibe-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.vibe-nums b { display: block; font-size: 24px; color: var(--amber); } .vibe-nums span { font-size: 12px; color: var(--muted); }
.vibe-fx { margin: 10px 0 4px; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.sign { text-align: left; }
.istat { color: var(--muted); font-size: 11px; font-weight: 400; }
.chip .istat { margin-left: 2px; }
.try-diff { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; min-height: 18px; }
.try-diff .up { color: var(--sage); font-weight: 700; } .try-diff .down { color: var(--rose); font-weight: 700; }
.small-bar { height: 10px; margin: 6px 0 2px; }
.linkish { font: inherit; font-size: 13px; color: var(--teal); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; }
.chip.shiny { background: var(--amber); color: var(--navy); border-color: var(--amber); font-weight: 800; }

/* названия пород: порода и вариант — отдельными строками, слово не рвётся (шрифт уменьшает fitNames) */
.coll-card b.fit { display: flex; flex-direction: column; align-items: center; width: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
.coll-card b.fit > span.var { font-weight: 600; }
.coll-card b.fit > span { display: block; max-width: 100%; overflow: hidden; color: inherit; text-align: center; overflow-wrap: normal; word-break: normal; }

/* выбор игры */
.game-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 12px; }
.game-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 12px; border: 2px solid var(--slate); border-radius: 14px; background: var(--navy2); color: var(--cream); cursor: pointer; min-height: 120px; }
.game-pick:active { transform: translateY(1px); }
.game-pick .gi { height: 40px; display: flex; align-items: center; }
.game-pick b { font-size: 15px; }
.game-pick span { text-align: center; line-height: 1.25; }
.corner.br { top: auto; bottom: 8px; right: 8px; }
.event-tokens { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
.event-tokens b { font-size: 18px; }
.sheet-body h2.ev-shop { margin-top: 20px; }
.act2.fav::before { content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px var(--outline); }
.care-line { color: var(--peach); }
.sets { display: grid; gap: 10px; margin-top: 8px; }
.set-card { background: var(--navy2); border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 6px; text-align: left; }
.set-card.done { opacity: .7; }
.set-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.set-card .btn { margin-top: 4px; }
.title-chip { color: var(--amber); font-weight: 700; margin: -8px 0 8px; }
.title-mini { display: block; color: var(--amber); }

/* ——— Арена ——— */
.ladder { display: grid; gap: 10px; }
.opp { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; background: var(--navy2); border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.opp .btn { width: auto; margin: 0; padding: 10px 14px; min-height: 44px; }
.opp-info { display: grid; gap: 2px; text-align: left; }
.opp.locked { opacity: .5; }
.opp.beaten { border-color: var(--teal); }
.deck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; justify-items: center; }

/* ——— Бой ——— */
.battle { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); height: 100dvh; box-sizing: border-box; overflow: hidden; }
.b-top, .b-bottom { display: flex; align-items: center; gap: 8px; }
.b-flag { width: auto; margin: 0 0 0 auto; padding: 6px 10px; min-height: 36px; }
.b-end { width: auto; margin: 0 0 0 auto; padding: 12px 18px; }
.b-end:disabled { opacity: .45; }
.bhero { position: relative; display: grid; grid-template-columns: 48px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 4px 10px 4px 4px; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.bhero canvas.spr { grid-row: 1 / 3; width: 48px !important; height: 48px !important; }
.bhero .h-name { font-weight: 700; font-size: 14px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bhero .h-hp { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
.bhero .h-mana, .bhero .h-deck { display: none; }
.bhero.me .h-mana { display: inline-flex; align-items: center; gap: 4px; grid-column: 3; grid-row: 1 / 3; font-size: 15px; font-weight: 800; color: var(--amber); padding-left: 6px; }
.bhero.target { border-color: var(--rose); animation: glow 1s steps(2) infinite; }
.b-hand-n { display: inline-flex; align-items: center; gap: 4px; }
.b-row { display: flex; gap: 3px; justify-content: center; min-height: 104px; align-items: center; }
.b-row.enemy { border-bottom: 2px dashed var(--line); padding-bottom: 6px; }
.b-mid { text-align: center; color: var(--muted); min-height: 22px; transition: background .2s; border-radius: 8px; padding: 2px 6px; }
.b-mid.mine { color: var(--ink); }
.b-mid.flash { background: var(--slate); color: var(--ink); }
.b-hand { display: flex; gap: 6px; overflow-x: auto; padding: 10px 8px 10px; margin-top: auto; flex: none; scrollbar-width: none; }
.b-hand::-webkit-scrollbar { display: none; }
.bcard { position: relative; flex: none; width: 66px; height: 104px; display: flex; flex-direction: column; align-items: center; background: var(--navy2); border: 2px solid var(--rc); border-radius: 10px; padding: 4px 1px 2px; color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s; }
.bcard canvas.spr { width: 48px !important; height: 48px !important; image-rendering: pixelated; }
.bcard .b-name { font-size: 10px; line-height: 12px; max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard .b-abil { display: flex; gap: 2px; min-height: 12px; padding: 0 20px; }
.bcard .b-cost, .bcard .b-atk, .bcard .b-hp { position: absolute; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px var(--outline); }
.bcard .b-cost { top: -6px; left: -6px; background: #4F8FB8; color: #fff; }
.bcard .b-atk, .bcard .b-hp { width: 18px; height: 18px; font-size: 11px; }
.bcard .b-atk { bottom: 2px; left: 2px; background: var(--amber); color: var(--navy); }
.bcard .b-hp { bottom: 2px; right: 2px; background: #E0454F; color: #fff; }
.bcard .b-hp.hurt { background: #8E2E2A; }
.bcard .b-el { position: absolute; top: 2px; right: 2px; }
.b-row .b-cost { display: none; }
.bcard.ready { box-shadow: 0 0 0 2px var(--teal); }
.bcard.target { box-shadow: 0 0 0 3px var(--rose); animation: glow 1s steps(2) infinite; }
.bcard.playable { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--teal); }
.bcard.dim { opacity: .5; }
.bcard.shielded { box-shadow: 0 0 0 3px #F6D88A; }
.bcard.sel, .bcard.sel.ready { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--amber); }
.float { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 900; font-size: 20px; color: #FF5A5A; text-shadow: 0 2px 0 #000; pointer-events: none; animation: floatUp .9s ease-out forwards; z-index: 2; }
.float.heal { color: #7CC57A; }
.float.fire { color: #FFB347; }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -28px); } }
@keyframes glow { 50% { box-shadow: 0 0 0 5px var(--rose); } }
#app[data-screen="battle"] { height: 100dvh; overflow: hidden; padding: 0; }

/* ——— Дурак ——— */
#app[data-screen="durak"] { height: 100dvh; overflow: hidden; padding: 0; }
.dk-pick { display: grid; gap: 8px; }
.dk-pick .btn { margin: 0; display: flex; justify-content: space-between; align-items: center; }
.dk { display: flex; flex-direction: column; gap: 6px; height: 100dvh; box-sizing: border-box; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); overflow: hidden; }
.dk-top { display: flex; align-items: center; gap: 8px; }
.dk-top b.red, .pc.red { color: #D23A3A; }
.dk-seats { display: flex; justify-content: space-around; align-items: flex-start; gap: 6px; min-height: 120px; }
.seat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 12px; border: 2px solid transparent; min-width: 90px; }
.seat.turn { border-color: var(--amber); background: rgba(233,180,91,.08); }
.seat.out { opacity: .5; }
.seat-pet { position: relative; width: 64px; height: 64px; }
.seat-pet canvas.spr { width: 64px !important; height: 64px !important; }
.seat-name { display: flex; align-items: center; gap: 6px; }
.cnt { display: flex; align-items: center; gap: 3px; background: var(--navy2); border: 2px solid var(--line); border-radius: 999px; padding: 1px 6px 1px 3px; font-weight: 800; font-size: 13px; }
.cnt .pc.mini { width: 11px; height: 16px; }
.dk-felt { position: relative; flex: 1; min-height: 180px; background: radial-gradient(ellipse at center, #2F6E4E 0%, #245A40 70%, #1D4A35 100%); border: 3px solid #5A3E2B; border-radius: 40px / 30px; box-shadow: inset 0 0 0 2px #3E7A58; display: flex; align-items: center; padding: 10px; gap: 10px; }
.dk-deck { position: relative; width: 72px; height: 72px; flex: none; }
/* козырь выглядывает из-под колоды: видно достоинство и масть в углу */
.dk-deck .pc.trump { position: absolute; left: 0; top: 4px; transform: rotate(-8deg); }
.dk-deck .pc.stack { position: absolute; left: 24px; top: 2px; box-shadow: 2px 2px 0 #0B2A1C, 4px 4px 0 #0B2A1C; }
.dk-pairs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; justify-items: center; align-content: center; }
.pair { position: relative; width: 56px; height: 76px; }
.pair .pc.cover { position: absolute; left: 12px; top: 14px; }
.dk-status { text-align: center; color: var(--muted); min-height: 22px; font-size: 14px; }
.dk-status.mine { color: var(--ink); font-weight: 700; }
.dk-actions { display: flex; gap: 8px; justify-content: center; min-height: 44px; }
.dk-actions .btn { width: auto; margin: 0; padding: 10px 22px; }
.dk-hand { display: flex; justify-content: center; padding: 14px 10px 6px; margin-top: auto; flex: none; }
.dk-hand .pc { margin-left: -14px; }
.dk-hand .pc:first-child { margin-left: 0; }
.dk-hand .pc.ok { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--teal), 0 4px 0 rgba(0,0,0,.35); }
.dk-hand .pc.no { filter: brightness(.7); }
/* сама карта */
.pc { position: relative; flex: none; width: 46px; height: 66px; border-radius: 6px; background: #FBF6EC; color: #1E1A2B; border: 1px solid #B9B1A4; box-shadow: 0 2px 0 rgba(0,0,0,.35); font: inherit; padding: 0; cursor: pointer; transition: transform .15s; }
.dk-hand .pc { width: 52px; height: 74px; }
.pc .pc-r { position: absolute; top: 2px; left: 4px; font-weight: 800; font-size: 14px; line-height: 1; }
.pc .pc-s { position: absolute; top: 17px; left: 4px; font-size: 12px; line-height: 1; }
.pc .pc-big { position: absolute; right: 4px; bottom: 2px; font-size: 24px; line-height: 1; }
.pc.back { cursor: default; background: repeating-linear-gradient(45deg, #69B7B0 0 4px, #4E928C 4px 8px); border: 2px solid #FBF6EC; }
.pc.back.mini { width: 16px; height: 24px; border-width: 1px; border-radius: 3px; }
.act2 { flex-direction: column; gap: 4px; }
.act2 .lbl { font-size: 11px; font-weight: 800; color: var(--navy); line-height: 1; }
.act2.wait .lbl { opacity: .5; }
.act2.pop { animation: pop .32s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(.88); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ——— Анимации боя ——— */
.bcard.lunge { transition: transform .2s cubic-bezier(.5,0,.75,0); z-index: 5; }
.bcard:not(.lunge) { transition: transform .15s; }
.hit { animation: hit .3s; }
@keyframes hit { 0%,100% { translate: 0 0; } 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 3px 0; } }
.bcard.dying { transition: transform .3s, opacity .3s, filter .3s; transform: scale(.6) rotate(-8deg); opacity: 0; filter: grayscale(1); }
.bcard.enter { animation: enter .38s cubic-bezier(.2,.9,.3,1.3); }
@keyframes enter { from { transform: translateY(-40px) scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
.b-row.breath { animation: breath .6s; }
@keyframes breath { 0% { background: transparent; } 30% { background: rgba(255,140,40,.35); } 100% { background: transparent; } }
.turn-banner { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); background: rgba(24,35,56,.92); border: 3px solid var(--amber); color: var(--cream); font-size: 26px; font-weight: 900; padding: 14px 28px; border-radius: 16px; z-index: 30; animation: banner .9s ease-out forwards; pointer-events: none; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* ——— Гости у друзей ——— */
.friend { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.visit-btn { width: auto; margin: 0; padding: 10px 14px; }
.throw-bar { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; margin: 10px 0 4px; }
.throw { width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--line); background: var(--navy2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.throw:active { transform: scale(.9); }
.throw.poop { border-color: #8A5E44; }

/* ——— Тапалка ——— */
.tapbar { position: relative; width: min(100%, 360px); height: 26px; border-radius: 999px; border: 2px solid var(--line); background: var(--navy2); overflow: hidden; padding: 0; cursor: pointer; font: inherit; color: var(--ink); flex: none; }
.tb-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #E9B45B, #F6D88A); opacity: .35; transition: width .3s; }
.tb-text { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; height: 100%; }
.ups { display: grid; gap: 8px; margin: 10px 0; width: 100%; }
.up { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; text-align: left; }
.up > div { display: grid; gap: 2px; }
.up.pick-f { cursor: pointer; font: inherit; color: var(--ink); }
.up.pick-f.on { border-color: var(--teal); background: #22384A; }
#app[data-screen="dtable"] { height: 100dvh; overflow: hidden; padding: 0; }
#app[data-screen="dtable"] .page { padding: 0 16px; overflow-y: auto; }
.tap-row { display: flex; gap: 6px; width: min(100%, 360px); flex: none; }
.tap-row .tapbar { flex: 1; width: auto; }
.tb-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 900; color: #1E1A2B; background: #F6D84A; border-radius: 999px; padding: 1px 6px; }
.tm { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.tm-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: baseline; opacity: .55; }
.tm-row.on { opacity: 1; } .tm-row.on b { color: #F6D84A; }
.tm-row b { font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.collect { flex: none; border: 0; border-radius: 999px; background: var(--amber); color: var(--navy); font: inherit; font-weight: 800; font-size: 12px; padding: 0 10px; display: flex; align-items: center; gap: 4px; cursor: pointer; animation: pop .5s; }
.collect.full { animation: glow 1s steps(2) infinite; }
.collect[hidden] { display: none; }
.up canvas.spr { width: 40px !important; height: 40px !important; flex: none; }
.up { justify-content: flex-start; }
.up > button, .up > .chip { margin-left: auto; }

/* ——— Кейсы ——— */
.case-card { background: var(--navy2); border: 2px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; display: grid; gap: 8px; }
.case-head { display: grid; gap: 2px; }
.case-skins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cs { position: relative; border: 2px solid var(--rc); border-radius: 8px; display: flex; justify-content: center; padding: 2px; background: #141E31; }
.cs canvas { width: 40px !important; height: 40px !important; image-rendering: pixelated; }
.cs .got { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 11px; background: var(--teal); color: var(--navy); border-radius: 999px; padding: 0 4px; font-weight: 800; }
.case-card .row-btns .btn { margin-top: 0; }
.reel-card { border-color: var(--rc, var(--line)) !important; }

/* ——— Обмен и рулетка ——— */
.f-btns { display: flex; gap: 6px; flex-direction: column; }
.up.trade > div:first-child { display: grid; gap: 2px; }
.pot-bar { position: relative; display: flex; height: 22px; border-radius: 999px; overflow: visible; border: 2px solid var(--outline); }
.pot-bar span:first-child { border-radius: 999px 0 0 999px; } .pot-bar span:last-of-type { border-radius: 0 999px 999px 0; }
.pot-arrow { position: absolute; top: -10px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid var(--cream); transform: translateX(-7px); }
.pot-arrow.spin { transition: left 2.8s cubic-bezier(.12,.8,.14,1); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

.dk-opts { display: grid; gap: 8px; }
.dk-opt { display: grid; gap: 4px; }
.dk-seats.n4 .seat, .dk-seats.n5 .seat { min-width: 0; padding: 2px; }
.dk-seats.n4 .seat-pet, .dk-seats.n5 .seat-pet { width: 44px; height: 44px; }
.dk-seats.n4 canvas.spr, .dk-seats.n5 canvas.spr { width: 44px !important; height: 44px !important; }
.dk-seats.n4 .seat-name, .dk-seats.n5 .seat-name { flex-direction: column; gap: 2px; }
.dk-seats.n4 .seat-name b, .dk-seats.n5 .seat-name b { font-size: 11px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ——— Боевой пропуск ——— */
.pass-head, .pass-row { display: grid; grid-template-columns: 32px 1fr 1fr; gap: 6px; align-items: center; }
.pass-head { margin: 10px 0 4px; }
.pass-list { display: grid; gap: 6px; }
.pass-row { background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 6px; opacity: .6; }
.pass-row.open { opacity: 1; border-color: var(--teal); }
.pass-l { text-align: center; }
.pass-cell { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 36px; }
.pass-cell.prem { border-left: 2px dashed var(--line); padding-left: 6px; }
.pr-egg { display: flex; align-items: center; gap: 4px; }
.pr-egg canvas { width: 28px !important; height: 28px !important; image-rendering: pixelated; }
.pass-cell .buy { padding: 4px 8px; }

/* ——— Кликер: анимации ——— */
.room-wrap { position: relative; }
.crumb { position: absolute; transform: translateX(-50%); font-weight: 900; font-size: 15px; color: #F6D88A; text-shadow: 0 2px 0 #1E1A2B; pointer-events: none; animation: crumb .7s ease-out forwards; z-index: 3; }
@keyframes crumb { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -34px; } }
.tapbar.near { border-color: var(--amber); animation: nearGlow .8s ease-in-out infinite alternate; }
.tapbar.near .tb-fill { opacity: .75; background: linear-gradient(90deg, #E9B45B, #FFE7A0, #E9B45B); background-size: 200% 100%; animation: shine 1s linear infinite; }
.tapbar.near .tb-coin { display: inline-flex; animation: wiggle .5s ease-in-out infinite; }
.tapbar.near .tb-text { color: var(--cream); text-shadow: 1px 0 0 #1E1A2B, -1px 0 0 #1E1A2B, 0 1px 0 #1E1A2B, 0 -1px 0 #1E1A2B; } /* читается и на золоте, и на тёмном */
@keyframes nearGlow { from { box-shadow: 0 0 0 0 rgba(233,180,91,.0); } to { box-shadow: 0 0 12px 2px rgba(233,180,91,.7); } }
@keyframes shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-15deg) scale(1.2); } 75% { transform: rotate(15deg) scale(1.2); } }
.fly-coin { position: fixed; z-index: 50; pointer-events: none; transition: left .55s cubic-bezier(.5,0,.2,1), top .55s cubic-bezier(.5,-.4,.2,1), transform .55s; }
.coins.bump { animation: pop .35s ease-out; }

/* ——— «Сбрось все» ——— */
#app[data-screen="sbros"] { height: 100dvh; overflow: hidden; padding: 0; }
.sb-felt { justify-content: center; gap: 28px; }
.sb-deck { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--cream); font: inherit; cursor: pointer; }
.sb-deck:disabled { cursor: default; opacity: .8; }
.sb-pile { position: relative; }
.sb-color { position: absolute; inset: -8px; border-radius: 16px; border: 4px solid var(--cur); pointer-events: none; }
.uc { position: relative; flex: none; width: 52px; height: 76px; border-radius: 10px; border: 3px solid #FBF6EC; background: var(--uc, #2A2530); color: #FBF6EC; font: inherit; font-weight: 900; padding: 0; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.4); transition: transform .15s; }
.uc.wild { background: conic-gradient(#E0454F 0 25%, #E9B45B 0 50%, #5E9A6E 0 75%, #4F8FB8 0); }
.uc .uc-corner { position: absolute; top: 3px; left: 5px; font-size: 12px; }
.uc .uc-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 50px; border-radius: 50%; background: #FBF6EC; color: var(--uc, #2A2530); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.uc.wild .uc-mid { color: #2A2530; }
.uc.back { background: repeating-linear-gradient(45deg, #34465F 0 5px, #26354A 5px 10px); display: flex; align-items: center; justify-content: center; cursor: default; }
.uc.big { width: 70px; height: 102px; }
.uc.big .uc-mid { width: 48px; height: 68px; font-size: 26px; }
.sb-hand { display: flex; gap: 4px; overflow-x: auto; padding: 14px 10px 8px; margin-top: auto; flex: none; scrollbar-width: none; }
.sb-hand .uc { margin-left: -10px; } .sb-hand .uc:first-child { margin-left: 0; }
.sb-hand .uc.ok { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--teal), 0 4px 0 rgba(0,0,0,.4); }
.sb-hand .uc.no { filter: brightness(.6); }
.color-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 10px 0; }
.cp { height: 64px; border: 0; border-radius: 14px; color: #fff; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; text-shadow: 0 1px 0 #000; }

/* ——— Поход ——— */
.hike-page h1 { margin-bottom: 8px; }
.hike-page .tabs { margin: 8px 0 12px; }
.hk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hk-where { display: flex; flex-direction: column; line-height: 1.2; }
.hk-stage { font-size: 20px; }
.hk-fish { display: inline-flex; align-items: center; gap: 6px; background: var(--navy2); border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; font-size: 18px; }
.hk-fish.bump { animation: bump .25s ease-out; }
@keyframes bump { 50% { transform: scale(1.18); } }
.hk-bar { display: flex; align-items: center; gap: 8px; min-height: 28px; margin: 8px 0 6px; }
.hk-pips { display: flex; gap: 4px; flex: 1; }
.hk-pips[hidden], .hk-timer[hidden] { display: none; }
.hk-pips i { flex: 1; height: 8px; border-radius: 2px; background: var(--navy2); border: 1px solid var(--line); }
.hk-pips i.on { background: var(--teal); border-color: var(--teal); }
.hk-timer { position: relative; flex: 1; height: 22px; background: #2A1820; border: 2px solid var(--outline); border-radius: 6px; overflow: hidden; }
.hk-timer i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #E05A6A, #F09A6A); transition: width .1s linear; }
.hk-timer span { position: relative; display: block; text-align: center; font-weight: 800; font-size: 13px; line-height: 18px; color: #fff; text-shadow: 0 1px 0 #0008; }
.hk-timer.low { animation: pulse .5s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 3px #E05A6A88; } }
.hk-bossbtn { margin: 0; width: auto; flex: 1; }
.hk-enemy { display: grid; gap: 4px; margin-bottom: 6px; }
.hk-ename { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-ename .boss { color: #F09A9A; }
.hk-hp { position: relative; height: 16px; background: #111A2B; border: 2px solid var(--outline); border-radius: 4px; overflow: hidden; }
.hk-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #F07A7A, #C84A5A); transition: width .12s ease-out; }
.hk-hp span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 700; line-height: 12px; color: #fff; text-shadow: 0 1px 0 #000a; }
.hike-wrap { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; border-radius: 12px; overflow: hidden; border: 2px solid var(--outline); width: 100%; aspect-ratio: 160 / 110; }
.hike-wrap canvas.hike-cv { width: 100%; height: 100%; }
.hike-wrap.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: flash .6s ease-out forwards; pointer-events: none; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
.hk-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmg { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 18px; color: #fff; text-shadow: 0 2px 0 #1E1A2B, 0 0 3px #1E1A2B; animation: dmg .7s ease-out forwards; white-space: nowrap; }
.dmg.crit { color: #F6D88A; font-size: 24px; animation: dmgcrit .9s ease-out forwards; }
.dmg.big { font-size: 34px; }
.dmg.team { font-size: 12px; color: #D8E2F0; font-weight: 700; }
.dmg.fishpop { font-size: 14px; color: #A8E0D8; }
.dmg.lv { color: #A8E0D8; font-size: 16px; }
@keyframes dmg { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -180%) scale(1); } }
@keyframes dmgcrit { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.4) rotate(-8deg); } 20% { opacity: 1; transform: translate(-50%, -70%) scale(1.35) rotate(4deg); } 100% { opacity: 0; transform: translate(-50%, -200%) scale(1) rotate(0); } }
.hk-banner { position: absolute; left: 50%; top: 18%; transform: translate(-50%, 0); padding: 6px 16px; border-radius: 10px; background: #1E1A2Bdd; color: #F4E9D8; font-weight: 900; font-size: 18px; white-space: nowrap; animation: ban 1.6s ease-out forwards; border: 2px solid #F4E9D855; }
.hk-banner.boss { background: #C84A5Aee; color: #fff; font-size: 26px; letter-spacing: .08em; }
.hk-banner.win { background: #E9B45Bee; color: #1E1A2B; }
.hk-banner.fail { background: #34465Fee; }
.hk-banner.land { top: 40%; font-size: 24px; background: #1E1A2Bcc; }
.hk-banner.skill { background: #69B7B0ee; color: #0F1A24; font-size: 15px; }
.hk-banner.stage { font-size: 14px; top: 6%; }
@keyframes ban { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }
.fly { position: fixed; z-index: 20; pointer-events: none; }
.hk-skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.hk-sk { position: relative; font: inherit; color: var(--ink); background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; overflow: hidden; min-height: 70px; }
.hk-sk b { font-size: 12px; }
.hk-sk small { font-size: 11px; color: var(--muted); }
.hk-sk .cd { position: absolute; inset: 0; background: conic-gradient(#0B1220c0 calc(var(--p, 0) * 1%), transparent 0); pointer-events: none; }
.hk-sk.on { border-color: var(--amber); box-shadow: 0 0 12px #E9B45B88; animation: glow .6s infinite alternate; }
.hk-sk.on small { color: var(--amber); font-weight: 700; }
.hk-sk:not(:disabled):not(.on) { border-color: var(--teal); }
.hk-sk:not(:disabled):not(.on) .hk-ski { animation: ready 1.2s ease-in-out infinite; }
.hk-sk.locked { opacity: .5; }
.hk-sk:disabled { cursor: default; }
@keyframes glow { to { box-shadow: 0 0 20px #E9B45Bcc; } }
@keyframes ready { 50% { transform: translateY(-2px) scale(1.08); } }
.hk-dps { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 8px 0 0; }
.hk-mode { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.hk-mode .chip { min-height: 32px; padding: 4px 12px; }
.hk-list { display: grid; gap: 8px; }
.hk-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.hk-row.locked { opacity: .55; }
.hk-row.lvup { animation: lvup .45s ease-out; }
@keyframes lvup { 0% { background: #69B7B055; transform: scale(1.02); } 100% { background: var(--navy2); transform: none; } }
.hk-ava { width: 56px; height: 56px; display: grid; place-items: center; background: #111A2B; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; padding: 0; }
.hk-ava canvas { width: 48px !important; height: 48px !important; }
.hk-empty { font-size: 26px; color: var(--muted); font-weight: 800; }
.hk-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hk-info b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-perk { color: var(--sage); }
.hk-up { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 78px; font-weight: 800; font-size: 14px; line-height: 1.2; }
.hk-up:disabled { opacity: .45; }
.hk-cost { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 12px; font-weight: 700; } /* рыбка не наезжает на цену */
.hk-cost canvas { flex: none; }
.hk-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; margin: 12px 0; }
.hk-pet { font: inherit; color: var(--ink); background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.hk-pet.cur { border-color: var(--teal); }
.hk-pet b { font-size: 14px; }
.rec-pop .rec-star { animation: spinstar 1.2s ease-out; margin-bottom: 8px; }
@keyframes spinstar { 0% { transform: scale(.2) rotate(-180deg); } 70% { transform: scale(1.2) rotate(10deg); } 100% { transform: none; } }
.rec-gifts { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.rw-coin { display: inline-flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 900; }

/* ——— Календарь входа ——— */
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin: 12px 0; }
.cal-day { position: relative; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 84px; justify-content: space-between; }
.cal-day small { font-size: 11px; color: var(--muted); }
.cal-day.big { grid-column: span 2; }
.cal-day.today { border-color: var(--amber); box-shadow: 0 0 0 2px #E9B45B55; animation: today 1s ease-in-out infinite alternate; }
.cal-day.today small { color: var(--amber); font-weight: 800; }
.cal-day.got { opacity: .55; }
.cal-day.claim { animation: claimflip .5s ease-in-out; }
.cal-day i.got { position: absolute; top: 2px; right: 6px; color: var(--sage); font-style: normal; font-weight: 900; }
.cal-rw { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.cal-coins { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 14px; }
@keyframes today { to { transform: translateY(-2px); box-shadow: 0 6px 14px #E9B45B44; } }
@keyframes claimflip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(1.1); background: var(--amber); } 100% { transform: rotateY(0); } }

/* ——— Звёзды: поддержка, рамка, звездопад, условия ——— */
.tabs .star-tab { color: var(--amber); }
.tabs .star-tab.on { background: var(--amber); color: var(--navy); }
.star-card { border-color: #E9B45B88; background: linear-gradient(160deg, #2B2A3E, var(--navy2)); }
.star-buy { background: var(--cream); box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--amber); display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }
.donate-list { display: grid; gap: 8px; }
.donate { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.donate > div { display: flex; flex-direction: column; }
.friend.donor { border-color: #E9B45B; box-shadow: 0 0 0 1px #E9B45B66, 0 0 14px #E9B45B33 inset; }
.donor-name { color: var(--amber); }
.donor-thanks { color: var(--amber); }
.star-rain { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.star-rain span { position: absolute; top: -40px; animation-name: starfall; animation-timing-function: cubic-bezier(.4,.1,.7,1); animation-fill-mode: forwards; }
@keyframes starfall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(110vh) rotate(540deg); opacity: 0; } }
.terms { text-align: left; align-items: stretch; }
.terms h2 { text-align: center; }
.terms-list { padding-left: 20px; margin: 12px 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.hk-up.can { background: var(--teal); animation: canbuy 1.4s ease-in-out infinite; }
@keyframes canbuy { 50% { box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 0 3px #69B7B066; } }

/* ——— Экраны, где тапают: страница не прокручивается и не «ездит» ——— */
html.lock, html.lock body { overflow: hidden; overscroll-behavior: none; }
html.lock body { position: fixed; inset: 0; width: 100%; }
.game-head { display: flex; align-items: center; gap: 12px; }
.game-head .back { padding: 12px 0; }
.game-head h1 { margin: 12px 0; }
/* ——— Меню игр ——— */
.gm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gm-card { position: relative; font: inherit; color: var(--ink); text-align: left; background: var(--navy2); border: 2px solid var(--line); border-radius: 16px; padding: 12px; min-height: 128px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; overflow: hidden; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.gm-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.gm-card.big { grid-column: span 2; min-height: 118px; justify-content: flex-end; border-color: #E9B45B88; }
.gm-card .gm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.gm-card.big::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #182338ee 0%, #18233899 55%, transparent 100%); }
.gm-card > *:not(.gm-bg) { position: relative; z-index: 1; }
.gm-card b { font-size: 18px; }
.gm-tx { color: var(--muted); line-height: 1.3; }
.gm-card.big .gm-tx { color: var(--ink); max-width: 70%; }
.gm-ic { line-height: 0; }
.gm-st { align-self: flex-start; min-height: 0; padding: 2px 8px; font-size: 12px; margin-top: 2px; }
/* ——— Поход на весь экран ——— */
#app[data-screen="hike"] { height: 100dvh; overflow: hidden; padding: 0; }
.hike-screen { display: flex; flex-direction: column; gap: 6px; height: 100dvh; box-sizing: border-box; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); overflow: hidden; }
.hike-screen > * { flex-shrink: 0; }
.hike-screen .hk-bar { margin: 0; }
.hike-screen .hk-enemy { margin: 0; }
.hike-screen .hk-skills { margin-top: 2px; }
.hike-screen .hk-sk { min-height: 62px; }
.hike-screen .hk-dps { margin: 0; }
.hk-back { font: inherit; font-size: 28px; line-height: 1; color: var(--muted); background: none; border: 0; padding: 4px 10px 4px 0; cursor: pointer; min-height: 44px; }
.hk-top { gap: 6px; }
.hk-top .hk-where { flex: 1; min-width: 0; }
.hk-panel { flex: 1 1 auto !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #131D30; border: 2px solid var(--line); border-radius: 14px; padding: 8px; }
.hk-panel .hk-row { padding: 4px 6px; }
.hk-panel .hk-ava { width: 48px; height: 48px; }
.hk-panel .hk-ava canvas { width: 40px !important; height: 40px !important; }
.hk-panel .hk-row { grid-template-columns: 48px 1fr auto; }

/* ——— Дом: шкалы во всю ширину ряда кнопок ——— */
.stats2 { width: min(356px, calc(100vw - 32px)); display: grid; gap: 6px; justify-items: stretch; }
.sline { display: grid; grid-template-columns: 21px 66px 1fr 40px; gap: 8px; align-items: center; }
.slabel { font-size: 13px; font-weight: 800; color: var(--ink); }
/* гладкая полоса: заливка цветом уровня с бликом сверху, мягкие деления каждые 20% (12.10: вместо 10 квадратиков) */
.sbar { position: relative; height: 14px; border-radius: 999px; background: #1E2840; box-shadow: inset 0 0 0 2px #2E3B57; overflow: hidden; }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(var(--cl) 0 30%, var(--c) 30% 75%, var(--cd) 75%); transition: width .4s ease-out; }
.sbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), rgba(14,20,48,.55) calc(20% - 2px) 20%); pointer-events: none; }
.mood { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 2px solid var(--line); font-size: 13px; justify-self: start; }
.mood-face { font-size: 18px; line-height: 1; }
.mood-want { color: var(--muted); font-size: 12px; }
.mood.good { border-color: #7FE07A; } .mood.ok { border-color: #69B7B0; } .mood.low { border-color: #E9B45B; } .mood.bad { border-color: #E0454F; }
.sval { font-size: 12px; font-weight: 800; color: var(--c, var(--muted)); text-align: right; font-variant-numeric: tabular-nums; }
/* «Задания дня» на главном — одна строка (12.10: список в три строки не помещался на телефоне) */
.today { width: min(356px, calc(100vw - 32px)); flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--navy2); color: var(--ink); font: inherit; cursor: pointer; }
.today.ready { border-color: var(--amber, #E9B45B); animation: nearGlow .9s ease-in-out infinite alternate; }
.today-h { font-size: 13px; font-weight: 800; white-space: nowrap; }
.today-bars { flex: 1; display: flex; gap: 4px; min-width: 0; }
.today-bars i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.today-bars i b { display: block; height: 100%; background: var(--teal); }
.today-bars i.ok b { background: #F6D84A; } .today-bars i.done b { background: var(--teal); width: 100% !important; opacity: .6; }
.today-n { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.segs { display: flex; gap: 2px; height: 18px; padding: 2px; background: #1E1A2B; border-radius: 3px; }
.segs i { flex: 1; background: #2E3B57; border-radius: 1px; }
.segs i.f { background: linear-gradient(var(--cl) 0 22%, var(--c) 22% 74%, var(--cd) 74%); }
.segs i.h { background: linear-gradient(90deg, var(--c) 50%, #2E3B57 50%); }
.act2 canvas { image-rendering: pixelated; }

/* ——— Телик: мини-игра ——— */
#app[data-screen="tv"] { height: 100dvh; overflow: hidden; padding: 0; }
.tv-screen { display: flex; flex-direction: column; gap: 10px; height: 100dvh; box-sizing: border-box; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); overflow: hidden; }
.tv-head { display: flex; align-items: center; gap: 6px; }
.tv-title { display: flex; flex-direction: column; line-height: 1.25; }
.tv-set { position: relative; background: linear-gradient(#6A6E86, #4E5268); border: 3px solid var(--outline); border-radius: 22px; padding: 14px 14px 30px; box-shadow: 0 6px 0 rgba(0,0,0,.4), inset 0 2px 0 #8A8EA6; }
.tv-glass { position: relative; border: 3px solid var(--outline); border-radius: 12px; overflow: hidden; background: #10141F; }
.tv-glass::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.08) 2px 3px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.12), transparent 50%); }
.tv-cv { width: 100%; aspect-ratio: 128 / 96; height: auto; }
.tv-knobs { position: absolute; bottom: 8px; right: 18px; display: flex; gap: 8px; }
.tv-knobs i { width: 12px; height: 12px; border-radius: 50%; background: #2E3B57; border: 2px solid var(--outline); }
.tv-knobs i:first-child { background: #E0454F; }
.tv-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; background: rgba(16,20,31,.72); color: var(--ink); }
.tv-msg[hidden] { display: none; }
.tv-msg b { font-size: 20px; color: var(--amber); }
.tv-score { display: flex; justify-content: space-between; align-items: center; font-size: 18px; padding: 0 4px; }
.tv-lives { color: #E87A8A; font-size: 22px; letter-spacing: 2px; }
.tv-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: auto; }
.tv-btn { font: inherit; font-size: 36px; color: var(--navy); background: var(--cream); border: 0; border-radius: 22px; min-height: 96px; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.4); touch-action: none; user-select: none; -webkit-user-select: none; }
.tv-btn.on { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.4); background: var(--amber); }
.cs canvas { width: 36px !important; height: 36px !important; object-fit: contain; }
.case-skins { flex-wrap: wrap; }
.cs.more { align-items: center; font-weight: 800; color: var(--muted); --rc: var(--line); }
.breq { align-items: center; }
.req-pair { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.req-pet { display: inline-flex; flex-direction: column; align-items: center; font-size: 12px; }
.req-plus { font-weight: 900; color: var(--rose); font-size: 20px; }

/* ——— В гостях: без прокрутки ——— */
#app[data-screen="visit"] { height: 100dvh; overflow: hidden; padding-bottom: 0; }
.visit-screen { display: flex; flex-direction: column; align-items: center; gap: 10px; height: calc(100dvh - 76px - env(safe-area-inset-bottom)); padding-top: 6px; overflow: hidden; }
.vis-head { display: flex; align-items: center; gap: 6px; width: 100%; }
.vis-title { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vis-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vis-st { min-height: 0; padding: 2px 10px; font-size: 12px; color: var(--muted); }
.vis-st.on { color: #0F1A24; background: var(--sage); border-color: var(--sage); font-weight: 700; }
.vis-room-wrap { line-height: 0; touch-action: none; }
.vis-room { border-radius: 12px; }
.vis-hint { margin: 0; }
.vis-coll { width: auto; margin-top: 0; }
button.coins { font: inherit; color: inherit; border: 0; cursor: pointer; }
.wallet { text-align: left; align-items: stretch; gap: 8px; }
.wallet h2 { text-align: center; }
.w-row { display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.w-row > div:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; }
.w-num { font-weight: 800; }
.w-num.full { color: var(--sage); }
.w-bar { grid-column: 1 / -1; height: 8px; }

/* ——— Имя и рамка по уровню ——— */
.nm { display: inline; }
.nm-bronze .nm-t { color: #E0A070; }
.nm-silver .nm-t, .nm-gold .nm-t, .nm-rainbow .nm-t, .nm-cosmic .nm-t { -webkit-background-clip: text; background-clip: text; color: transparent; }
.nm-silver .nm-t { background-image: linear-gradient(90deg, #C8D2E0, #FFFFFF 50%, #9AA6B8); }
.nm-gold .nm-t { background-image: linear-gradient(90deg, #E9B45B, #FFF3C4 50%, #C9944A); }
.nm-rainbow .nm-t { background-image: linear-gradient(90deg, #E87A8A, #F6D84A, #7FC38A, #69B7E0, #B68FE0, #E87A8A); background-size: 200% 100%; animation: nmshift 3s linear infinite; }
.nm-cosmic .nm-t { background-image: linear-gradient(90deg, #5FE0D0, #B68FE0, #F6B3BD, #F6D88A, #5FE0D0); background-size: 300% 100%; animation: nmshift 4s linear infinite; filter: drop-shadow(0 0 4px #B68FE088); }
.nm-cosmic { position: relative; }
.nm-cosmic::after { content: '✦'; position: absolute; top: -0.55em; right: -0.7em; font-size: 0.7em; color: #F6D88A; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes nmshift { to { background-position: 200% 0; } }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.friend.tier-bronze { border-color: #B07A50; }
.friend.tier-silver { border-color: #C8D2E0; }
.friend.tier-gold { border-color: #E9B45B; box-shadow: 0 0 10px #E9B45B44; }
.friend.tier-rainbow, .friend.tier-cosmic, .lvl.tier-rainbow, .lvl.tier-cosmic { border: 2px solid transparent; background: linear-gradient(var(--navy2), var(--navy2)) padding-box, linear-gradient(90deg, #E87A8A, #F6D84A, #7FC38A, #69B7E0, #B68FE0, #E87A8A) border-box; background-size: 100% 100%, 200% 100%; animation: frameshift 3s linear infinite; }
.friend.tier-cosmic, .lvl.tier-cosmic { box-shadow: 0 0 14px #B68FE066; background: linear-gradient(var(--navy2), var(--navy2)) padding-box, linear-gradient(90deg, #5FE0D0, #B68FE0, #F6B3BD, #F6D88A, #5FE0D0) border-box; background-size: 100% 100%, 300% 100%; }
@keyframes frameshift { to { background-position: 0 0, 200% 0; } }
.lvl.tier-bronze { box-shadow: 0 0 0 2px #B07A50; }
.lvl.tier-silver { box-shadow: 0 0 0 2px #C8D2E0; }
.lvl.tier-gold { box-shadow: 0 0 0 2px #E9B45B, 0 0 10px #E9B45B66; }
.tiers { display: grid; gap: 6px; }
.tier-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; opacity: .55; }
.tier-row.got { opacity: 1; border-color: var(--teal); }
.tier-lv { font-size: 18px; color: var(--muted); }
.tier-row .nm { font-weight: 800; font-size: 17px; }
.star-prem { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.pr-star canvas { filter: drop-shadow(0 0 4px #F6D88A); }
/* значок уровня в доме: внутри остаётся светлым — цифру видно */
.lvl.tier-rainbow { background: linear-gradient(var(--lav), var(--lav)) padding-box, linear-gradient(90deg, #E87A8A, #F6D84A, #7FC38A, #69B7E0, #B68FE0, #E87A8A) border-box; background-size: 100% 100%, 200% 100%; border: 3px solid transparent; }
.lvl.tier-cosmic { background: linear-gradient(135deg, #D8C4F4, #B6A3D9) padding-box, linear-gradient(90deg, #5FE0D0, #B68FE0, #F6B3BD, #F6D88A, #5FE0D0) border-box; background-size: 100% 100%, 300% 100%; border: 3px solid transparent; }
.gift-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; margin: 12px 0; }
.gift-it { font: inherit; color: var(--ink); background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.gift-it:disabled { opacity: .5; }
.gift-btn { width: auto; padding: 6px 10px; }
.throw.prem { border-color: var(--amber); box-shadow: 0 0 8px #E9B45B66; }
.disco-chip { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); background: #1E1A2Bdd; color: #F6D88A; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; animation: discoglow 1s ease-in-out infinite alternate; }
@keyframes discoglow { to { box-shadow: 0 0 10px #B68FE0; color: #F6B3BD; } }
.disco-card { border-color: #B68FE0aa; }
.disco-free { border: 0; cursor: pointer; font-family: inherit; animation: none; box-shadow: 0 0 0 2px #B68FE0aa; }
.disco-free .disco-left { color: #fff9; font-weight: 700; }
.live-skin { border-color: #E9B45B66; }
.soon-case { opacity: .7; border-style: dashed; }
.halloween-card { border-color: #E58A3A; background: linear-gradient(160deg, #3A2418, var(--navy2)); }

/* ——— Бои: связки, тень, холод, сборка колоды ——— */
.bcard.combo { animation: combo .7s ease-out; }
@keyframes combo { 30% { transform: scale(1.12); box-shadow: 0 0 16px #F6D88A; } }
.bcard.stealth { opacity: .6; filter: grayscale(.3) brightness(.85); }
.bcard.frozen { box-shadow: inset 0 0 0 3px #9FD0E8, 0 0 10px #9FD0E888; }
.b-tag { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; background: #1E1A2B; color: #B6A3D9; border-radius: 999px; padding: 0 5px; white-space: nowrap; }
.b-tag.ice { color: #9FD0E8; }
.deck-grid.pick .bcard { opacity: .55; }
.deck-grid.pick .bcard.picked { opacity: 1; box-shadow: 0 0 0 3px var(--teal); }
.combo-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muted); }
/* ——— Рубашки карт ——— */
.pc.back.big { width: 44px; height: 62px; border-radius: 6px; margin: 4px auto; }
.backs .shop-card.on { border-color: var(--teal); }
[data-back="paws"] .pc.back, .pc.back[data-b="paws"], [data-back="paws"] .uc.back { background: radial-gradient(circle at 30% 30%, #F4E9D8 0 12%, transparent 13%), radial-gradient(circle at 70% 65%, #F4E9D8 0 12%, transparent 13%), #34465F; background-size: 14px 14px; }
[data-back="gold"] .pc.back, .pc.back[data-b="gold"], [data-back="gold"] .uc.back { background: repeating-linear-gradient(45deg, #E9B45B 0 4px, #C9944A 4px 8px); border-color: #FFF3C4; }
[data-back="galaxy"] .pc.back, .pc.back[data-b="galaxy"], [data-back="galaxy"] .uc.back { background: radial-gradient(circle at 20% 30%, #FFFFFF 0 4%, transparent 5%), radial-gradient(circle at 75% 60%, #F6D88A 0 4%, transparent 5%), radial-gradient(circle at 50% 85%, #FFFFFF 0 3%, transparent 4%), linear-gradient(160deg, #2A1E50, #5A2A78); background-size: 18px 18px, 22px 22px, 15px 15px, 100% 100%; }
[data-back="flame"] .pc.back, .pc.back[data-b="flame"], [data-back="flame"] .uc.back { background: linear-gradient(0deg, #E0454F, #F0A030 60%, #F6D84A); border-color: #FFF3C4; }
.pc.back[data-b="classic"] { background: repeating-linear-gradient(45deg, #69B7B0 0 4px, #4E928C 4px 8px); }
/* ——— Приглашения ——— */
.inv-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 6px 0 12px; } /* плиткой — без ленты вбок */
.inv-tier { min-width: 0; background: var(--navy2); border: 2px solid var(--line); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; text-align: center; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.inv-who { font-size: 12px; color: var(--muted); margin-top: -2px; }
.inv-info p { margin: 0 0 4px; }
.inv-tier b { font-size: 18px; color: var(--muted); }
.inv-tier.got { border-color: var(--teal); }
.inv-tier.got b { color: var(--teal); }
.inv-list { padding-left: 22px; display: grid; gap: 4px; }

/* бусты */
.boost-row { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; pointer-events: none; }
.boost-row > * { pointer-events: auto; }
.boost-mini { display: inline-flex; align-items: center; gap: 2px; border: 0; font: inherit; font-size: 12px; font-weight: 800; color: #F6D88A; background: #1E1A2Bdd; padding: 3px 8px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.boost-card { display: flex; flex-direction: column; gap: 8px; }
.boost-tiers, .boost-inv { display: flex; flex-direction: column; gap: 6px; }
.boost-tier { display: flex; align-items: center; gap: 10px; background: var(--navy2); border-radius: 12px; padding: 8px 10px; }
.boost-tier.weak { opacity: .5; }
.boost-tier .bt-n { width: 28px; flex: none; text-align: center; font-weight: 800; color: #F6D88A; }
.boost-tier .bt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.boost-tier .bt-text small { color: var(--muted); }
.boost-tier .buy { flex: none; }
.boost-tier .buy:disabled { opacity: .45; }
.boost-price { gap: 4px; }
.dq-lv { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dq-hard .dq-lv { color: #F6B3BD; }

/* летающие друзья */

.flyers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.fly-row { display: grid; grid-template-columns: 74px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.fly-kind { font-size: 13px; font-weight: 700; align-self: center; line-height: 1.2; }
.fly-card { background: var(--navy2); border-radius: 12px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.fly-card b { font-size: 12px; }
.fly-card .buy { font-size: 12px; padding: 4px 10px; min-height: 30px; }
.fly-card.locked canvas { opacity: .45; filter: grayscale(.6); }
.fly-card.on { outline: 2px solid var(--teal); }

/* рейтинг */
.top-box { display: flex; flex-direction: column; gap: 10px; }
.top-me { font-weight: 800; color: #F6D88A; margin: 0; }
.top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.top-list li { display: flex; align-items: center; gap: 10px; background: var(--navy2); border-radius: 10px; padding: 8px 12px; }
.top-list li.me { outline: 2px solid var(--teal); }
.top-list li b { margin-left: auto; }
.top-n { width: 24px; text-align: center; font-weight: 800; color: var(--muted); }
.top-list li:nth-child(1) .top-n { color: #F6D88A; } .top-list li:nth-child(2) .top-n { color: #D6E4F4; } .top-list li:nth-child(3) .top-n { color: #E9A06A; }
.top-rules summary { cursor: pointer; font-weight: 700; }
.top-rules ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.sub-card { display: flex; flex-direction: column; gap: 6px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— «Дурак» под пальцы (12.10): веер, выбор касанием, перетаскивание ——— */
.dk-felt.target { box-shadow: inset 0 0 0 2px #3E7A58, 0 0 0 3px #69B7B0aa; }
.dk-felt.hover { box-shadow: inset 0 0 0 2px #3E7A58, 0 0 0 4px #F6D88A; }
.dk-pairs .pair.target .pc.tbl { box-shadow: 0 0 0 3px #69B7B0, 0 2px 0 rgba(0,0,0,.35); }
.dk-pairs .pair.hover .pc.tbl { box-shadow: 0 0 0 3px #F6D88A, 0 2px 0 rgba(0,0,0,.35); transform: scale(1.06); }
.dk-pairs .pc.tbl { width: 50px; height: 72px; }
.dk-left { position: absolute; left: 30px; bottom: -4px; font-size: 11px; font-weight: 800; color: #F4E9D8cc; }
.dk-trump-big { font-size: 34px; color: #F4E9D8; } .dk-trump-big.red { color: #F08A8A; }
.dk-hand.fan { position: relative; display: block; height: 124px; padding: 0; margin: 4px -8px 0; flex: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.dk-hand.fan .pc { position: absolute; bottom: 18px; width: 62px; height: 90px; margin: 0;
  left: calc(50% - 31px + (var(--i) - (var(--n) - 1) / 2) * min(46px, (100% - 74px) / var(--nm1)));
  transform-origin: 50% 120%; transform: translate(var(--tx, 0px), calc(var(--ty, 0px) + var(--dy, 0px))) rotate(var(--r, 0deg));
  transition: transform .14s, box-shadow .14s; touch-action: none; filter: none; }
.dk-hand.fan .pc .pc-r { font-size: 16px; } .dk-hand.fan .pc .pc-s { top: 19px; font-size: 14px; } .dk-hand.fan .pc .pc-big { font-size: 30px; }
.dk-hand.fan.live .pc.no { --dy2: 10px; transform: translate(0, calc(var(--dy, 0px) + 10px)) rotate(var(--r, 0deg)); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.dk-hand.fan .pc.ok { box-shadow: 0 0 0 2px #69B7B0aa, 0 3px 0 rgba(0,0,0,.35); }
.dk-hand.fan .pc.sel { transform: translate(0, calc(var(--dy, 0px) - 26px)) rotate(var(--r, 0deg)) scale(1.08); box-shadow: 0 0 0 3px #F6D88A, 0 8px 14px rgba(0,0,0,.45); z-index: 5; }
.dk-hand.fan .pc.drag { transition: none; z-index: 10; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1.12); box-shadow: 0 0 0 3px #F6D88A, 0 12px 20px rgba(0,0,0,.5); }
.dk-hand.fan .pc.trumpc::after { content: ''; position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #E9B45B; }
.dk-actions .btn.dk-take, .dk-actions .btn.dk-pass { min-width: 140px; font-size: 17px; padding: 12px 24px; }
.seat-name b { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.guest-tag { position: absolute; transform: translate(-50%, -100%); font-size: 14px; font-weight: 900; color: #FFF4D8; background: #1E1A2B; border: 2px solid #F4E9D8; box-shadow: 0 2px 0 rgba(0,0,0,.35); padding: 2px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; z-index: 2; } /* 12.10: было 11px — «ты» не видно */
.guest-tag.me { background: #69B7B0; color: #0E1430; border-color: #FFF4D8; }
.vis-room-wrap { position: relative; width: fit-content; margin-left: auto; margin-right: auto; } /* ники гостей — по ширине комнаты */
.inv-info { margin-top: 12px; }

/* ——— «Забег» ——— */
.run-screen { gap: 0; padding: 0; height: 100dvh; }
#app[data-screen="run"] { height: 100dvh; overflow: hidden; padding: 0; } /* забег — на весь экран, без полей */
.run-glass { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #121933; }
.run-cv { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.run3d-cv { display: block; width: 100%; height: 100%; }
/* счёт поверх картинки, как в Subway Surfers */
.run-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 8px 12px; pointer-events: none; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.4); }
.run-back { pointer-events: auto; font: inherit; font-size: 26px; line-height: 1; color: #fff; background: rgba(18,25,51,.55); border: 2px solid rgba(255,255,255,.35); border-radius: 12px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.run-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.run-lt { display: flex; flex-direction: column; gap: 8px; }
.run-mute { position: relative; font-size: 24px; font-weight: 900; }
/* кнопка звука ♪ — одна на всю игру; выключено — нота перечёркнута */
.snd-btn { position: relative; font: inherit; font-size: 20px; font-weight: 900; line-height: 1; color: var(--ink); background: rgba(255,255,255,.07); border: 2px solid var(--line); border-radius: 12px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.snd-btn.off { opacity: .6; } .snd-btn.off::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 3px; background: #E0454F; transform: rotate(-40deg); border-radius: 2px; }
.top-snd { margin-left: auto; margin-right: 6px; }
.run-mute.snd-btn { width: 44px; height: 44px; color: #fff; background: rgba(18,25,51,.55); border-color: rgba(255,255,255,.35); }
.re-hit { margin: 0; width: min(100%, 340px); font-size: 15px; font-weight: 700; color: #FFD2D2; background: rgba(224,69,79,.18); border: 2px solid rgba(224,69,79,.55); border-radius: 12px; padding: 8px 12px; text-align: center; }
.run-m { font-size: 18px; font-weight: 800; } .run-m b { font-size: 30px; font-variant-numeric: tabular-nums; }
.run-fish { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; background: rgba(18,25,51,.5); border-radius: 999px; padding: 2px 10px 2px 6px; }
.run-fish b { font-variant-numeric: tabular-nums; }
.run-fish.bump { animation: fishBump .22s ease-out; }
@keyframes fishBump { 40% { transform: scale(1.22); } }
.run-msg { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(86%, 300px); background: rgba(18,25,51,.92); border: 2px solid #F6D88A; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.run-msg b { font-size: 20px; color: #F6D88A; }
.run-msg .btn { margin-top: 6px; }
.run-msg[hidden] { display: none; }
/* экран конца забега: затемнение на весь экран, карточка снизу-посередине */
.run-msg.end { inset: 0; left: 0; top: 0; transform: none; width: auto; border: 0; border-radius: 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); justify-content: center; gap: 12px;
  background: radial-gradient(ellipse at 50% 40%, rgba(24,35,56,.86), rgba(10,14,28,.96)); animation: reIn .25s ease-out; }
@keyframes reIn { from { opacity: 0; } }
.re-head { font-size: 22px; font-weight: 900; color: #FFF4D8; letter-spacing: .02em; }
.re-head.rec { color: #F6D84A; font-size: 28px; animation: rePop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes rePop { from { transform: scale(.5); opacity: 0; } }
.re-m { display: flex; align-items: baseline; gap: 6px; color: #fff; line-height: 1; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.re-m b { font-size: 76px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.re-m span { font-size: 26px; font-weight: 800; opacity: .8; }
.re-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 340px); }
.re-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.1); }
.re-tile b { font-size: 22px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.re-tile span { font-size: 12px; color: #B7C0D0; text-align: center; line-height: 1.2; }
.re-tile.gold { border-color: #F6D84A; background: rgba(246,216,74,.12); } .re-tile.gold b { color: #F6D84A; }
.re-prog { width: min(100%, 340px); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.re-bar { width: 100%; height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.re-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #69B7B0, #F6D84A); }
.re-prog span, .re-note { font-size: 14px; color: #DDE3EE; margin: 0; text-align: center; }
.run-msg.end .btn { width: min(100%, 340px); margin: 0; }
.re-again { font-size: 20px; padding: 16px; margin-top: 6px !important; }
.re-foot { font-size: 12px; color: #8A94A8; margin: 0; }
/* стартовая карточка забега — в верхней половине, под счётом: кот внизу виден */
.run-msg.start { top: 84px; bottom: auto; transform: translateX(-50%); width: min(92%, 360px); gap: 12px; padding: 18px 16px; background: rgba(14,20,48,.88); border-color: rgba(246,216,138,.7); animation: reIn .3s ease-out; }
.re-tiles.two { grid-template-columns: repeat(2, 1fr); width: 100%; }
.rs-keys { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rs-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #DDE3EE; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 4px 10px 4px 6px; }
.rs-key b { font-size: 14px; color: #F6D84A; background: rgba(0,0,0,.25); border-radius: 8px; padding: 1px 6px; }
.rs-go { font-size: 17px; font-weight: 800; color: #0E1430; background: #69B7B0; border-radius: 14px; padding: 12px 18px; width: 100%; box-sizing: border-box; animation: rsPulse 1.2s ease-in-out infinite; }
@keyframes rsPulse { 50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(105,183,176,.25); } }

.trail-prev { height: 40px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.trail-prev i { width: 6px; height: 6px; border-radius: 1px; animation: trailUp 1s ease-in-out infinite alternate; }
.trail-prev i:nth-child(2n) { animation-delay: .3s; } .trail-prev i:nth-child(3n) { animation-delay: .6s; }
.trail-sparks i { background: #F6D84A; } .trail-sparks i:nth-child(2n) { background: #FFFFFF; }
.trail-rainbow i:nth-child(1) { background: #E0454F; } .trail-rainbow i:nth-child(2) { background: #F08A3A; } .trail-rainbow i:nth-child(3) { background: #F6D84A; } .trail-rainbow i:nth-child(4) { background: #7FE07A; } .trail-rainbow i:nth-child(5) { background: #4FA3E0; } .trail-rainbow i:nth-child(6) { background: #B6A3D9; }
.trail-fire i { background: #F08A3A; } .trail-fire i:nth-child(2n) { background: #E0454F; } .trail-fire i:nth-child(3n) { background: #F6D84A; }
@keyframes trailUp { from { transform: translateY(6px); opacity: .5; } to { transform: translateY(-6px); opacity: 1; } }
.run-mid { display: flex; flex-direction: column; align-items: center; padding-top: 4px; font-size: 13px; line-height: 1.25; } .run-zone { color: #DDE3EE; } .run-pw { color: #F6D88A; font-weight: 800; }
.run-tip { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); width: min(90%, 320px); display: flex; align-items: center; gap: 10px; background: rgba(18,25,51,.9); border: 2px solid #F6D88A; border-radius: 14px; padding: 8px 12px; font-size: 16px; font-weight: 800; line-height: 1.25; color: #FFF4D8; pointer-events: none; animation: runTip .25s ease-out; }
.run-tip[hidden] { display: none; }
.run-shout { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: 92%; text-align: center; font-size: 26px; font-weight: 900; line-height: 1.15; color: #fff; pointer-events: none; text-shadow: 0 3px 0 #1E1A2B, 2px 0 0 #1E1A2B, -2px 0 0 #1E1A2B, 0 -2px 0 #1E1A2B, 0 0 12px rgba(0,0,0,.5); }
.run-shout.gold { color: #F6D84A; font-size: 32px; }
.run-shout[hidden] { display: none; }
.run-shout.go { animation: runShout 1.3s ease-out forwards; }
@keyframes runShout { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 22% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1); opacity: 0; } }
@keyframes runTip { from { transform: translate(-50%, -8px); opacity: 0; } }
.run-perk { color: #8AF0E0; font-weight: 700; font-size: 13px; }

/* меню «Б»: круглая «ИГРАТЬ» посередине панели */
.tabbar-b { grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; align-items: end; }
.tabbar .tab-play { position: relative; justify-self: center; width: 72px; height: 72px; margin-top: -30px; border-radius: 50%; border: 4px solid #121B2D; background: var(--teal); color: #121B2D; font: inherit; font-weight: 900; font-size: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 0 2px #69B7B055; cursor: pointer; }
.tabbar .tab-play.on { background: #F6D88A; color: #121B2D; }
.tabbar .tab-play span { color: #121B2D; font-weight: 900; }
.tabbar .tab-play:active { transform: translateY(2px); }
.gm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.gm-chips .chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-weight: 700; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.hk-inv { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: #3A2638; border: 2px solid #F08AC0; border-radius: 12px; padding: 6px 10px; font-size: 13px; }
.hk-inv[hidden] { display: none; }

/* окно «Знак дня и твоя комната» — простыми словами (12.10) */
.sign-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(182,163,217,.12); border: 2px solid #B6A3D9; }
.sign-card b { font-size: 17px; color: #E6DAFF; }
.sign-todo { font-weight: 800; color: #F6D84A; }
.vb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vb-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--navy2); border: 2px solid var(--line); text-align: center; }
.vb-card b { font-size: 22px; color: #F6D84A; } .vb-name { font-weight: 800; font-size: 13px; } .vb-what { font-size: 11px; color: var(--muted); line-height: 1.3; }