:root {
  --bg: #fff3dc; --card: #fffaf0; --ink: #5a3d2b; --accent: #ff9a62; --accent2: #ffc86b;
  --ok: #7cc47a; --bad: #e8736b; --line: #f0dcb8; --shadow: 0 3px 0 rgba(120, 80, 40, .18);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #7ec77b; color: var(--ink);
  font-family: ui-rounded, "Nunito", "Segoe UI", system-ui, sans-serif; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }

/* ---------- верхняя панель ---------- */
#top { position: fixed; left: 0; right: 0; top: 0; display: flex; gap: 6px; align-items: center;
  padding: calc(8px + max(env(safe-area-inset-top), var(--tgtop, 0px))) 10px 0; pointer-events: none; }
#top > * { pointer-events: auto; }
/* верхняя строка: монеты, гемы, шкала уровня (тянется на всю оставшуюся ширину); «друзья» и «настройки» — во втором ряду нижней панели (v5.9) */
.chip, .lvl { background: var(--card); border-radius: 999px; padding: 6px 11px; font-weight: 800;
  font-size: 14px; box-shadow: var(--shadow); white-space: nowrap; }
#coins, #gems { flex: none; min-width: 0; height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 3px; }
.lvl { flex: 1 1 96px; min-width: 96px; max-width: none; display: flex; flex-direction: column; gap: 3px; padding: 4px 12px 6px; box-sizing: border-box; min-height: 34px; justify-content: center; }
.lvl .lrow { display: flex; align-items: baseline; gap: 3px; font-size: 13px; line-height: 1.15; white-space: nowrap; }
.lvl .arr { opacity: .55; font-size: 12px; font-weight: 900; }
.lvl .rem { font-size: 12px; color: #7a5a45; }
.lvl .nxt { opacity: .4; font-weight: 800; }          /* следующий уровень — бледнее */
.bar { height: 8px; border-radius: 99px; background: #f0e2c6; overflow: hidden; flex: none; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb347, #ff8a5c); transition: width .3s; }
.round { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); font-size: 16px; font-weight: 800; padding: 0; }
.round:active, #bottom button:active { transform: translateY(2px); }

#infostack { position: fixed; left: 10px; right: 10px; top: calc(52px + max(env(safe-area-inset-top), var(--tgtop, 0px))); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#advice { background: rgba(255, 250, 240, .92); border-radius: 14px; padding: 6px 14px; font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow); text-align: center; pointer-events: none; }
#chefbar { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #8fd18a; color: #1d4a1a; border-radius: 14px; padding: 4px 6px 4px 14px; font-size: 13px; font-weight: 800; box-shadow: var(--shadow); cursor: pointer; }
#chefbar.hidden { display: none; }
#chefbartxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
#chefbar .btn { flex: 0 0 auto; background: #fff; color: #1d4a1a; box-shadow: none; }
#chefbar .btn.armed { background: #e8564f; color: #fff; }

/* ---------- нижняя панель ---------- */
#bottom { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 0 10px calc(8px + max(env(safe-area-inset-bottom), var(--tgbottom, 0px))); pointer-events: none; }
#bottom .brow { display: flex; gap: 6px; justify-content: center; width: 100%; }
#bottom .brow > * { flex: 0 0 calc((100% - 24px) / 5); max-width: 120px; min-width: 0; box-sizing: border-box; }   /* пять одинаковых колонок: второй ряд встаёт ровно под первый */
#bottom button { pointer-events: auto; background: var(--card); border-radius: 18px;
  padding: 7px 2px 6px; font-weight: 800; font-size: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 2px; }
#bottom .spare { visibility: hidden; }
#bottom #chefbtn.on { background: #dff5d6; box-shadow: 0 0 0 3px #7cc47a, var(--shadow); }
#bottom #chefbtn.off { opacity: .8; }
#bottom #chefbtn em { font-variant-numeric: tabular-nums; }
.chefbar { height: 10px; border-radius: 6px; background: #eadfca; overflow: hidden; margin: 6px 0; }
.chefbar i { display: block; height: 100%; background: #7cc47a; }
.chefl { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-weight: 700; font-size: 14px; }
.chefl.no { color: #c0443d; }
.chefl b { flex: 0 0 22px; text-align: center; }
.chefladder { display: flex; gap: 5px; flex-wrap: wrap; margin: 6px 0; }
.chefladder span { background: var(--card); border-radius: 12px; padding: 4px 8px; font-weight: 800; font-size: 12px; box-shadow: var(--shadow); border: 2px solid transparent; }
.chefladder span.got { border-color: #7cc47a; background: #eaf8e4; }          /* запасные места второго ряда (ачивки и т. п.) */
#bottom .sub button { padding: 5px 2px 4px; border-radius: 16px; }
#bottom .sub button span { font-size: 19px; }
#bottom button span { font-size: 24px; line-height: 1; }

/* ---------- магазин (режим стройки) ---------- */
#shop { position: fixed; left: 0; right: 0; bottom: calc(var(--bar, 128px) + 6px); padding: 10px;
  background: rgba(255, 243, 220, .96); border-radius: 22px 22px 0 0; box-shadow: 0 -3px 12px rgba(0,0,0,.15); }
#shop .hint { font-size: 13px; font-weight: 700; margin: 0 0 8px 2px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#shop .row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.item { flex: 0 0 auto; width: 78px; background: var(--card); border-radius: 16px; padding: 6px 4px; text-align: center;
  font-size: 11px; font-weight: 800; border: 3px solid transparent; box-shadow: var(--shadow); }
.item .em { font-size: 26px; height: 32px; line-height: 32px; }
.item .sw { display: inline-block; width: 26px; height: 26px; border-radius: 8px; vertical-align: middle; }
.item.sel { border-color: var(--accent); background: #fff0d4; }
.item.lock { opacity: .55; }
.item.poor .pr { color: var(--bad); }
.btn { background: var(--accent); color: #fff; border-radius: 14px; padding: 8px 14px; font-weight: 800; box-shadow: var(--shadow); }
.btn.green { background: var(--ok); }
.btn.gray { background: #cdbfa6; }
.btn.red { background: #e8564f; }
.rstcode { display: block; font-size: 26px; font-weight: 900; letter-spacing: 2px; color: #e8564f; margin-top: 2px; }
.rstcode.big { text-align: center; font-size: 38px; letter-spacing: 4px; margin: 4px 0 10px; }
.rdigits { display: flex; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.rd { width: 44px; height: 54px; border: 2px solid #cdbfa6; border-radius: 12px; background: #fffaf0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: #5a3d2b; }
.rd.on { border-color: #e8a13a; } .rd.ok { border-color: #5cb85c; background: #eefbe9; } .rd.bad { border-color: #e8564f; background: #fff0ee; }
.rwrong { text-align: center; color: #e8564f; font-weight: 800; font-size: 13px; margin: 0 0 4px; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px auto 10px; max-width: 300px; }
.numpad .key { height: 52px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-size: 24px; font-weight: 900; color: #5a3d2b; }
.numpad .key:active { transform: scale(.94); background: #ffe9c2; } .numpad .key.fn { background: #f0e4cc; font-size: 20px; }
.rbtns { justify-content: center; background: none; box-shadow: none; padding: 0; } .rbtns .btn { flex: 1; max-width: 160px; padding: 11px 8px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.row2.rst input { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; text-align: center; letter-spacing: 6px; border: 2px solid #cdbfa6; border-radius: 11px; padding: 6px; background: #fffaf0; color: #5a3d2b; }
.btn.small { padding: 5px 10px; font-size: 13px; border-radius: 11px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- попап над объектом / участком ---------- */
#popup { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar, 128px) + 22px);
  background: var(--card); border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 220px; text-align: center; font-weight: 800; }
#popup .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- окна ---------- */
#modal { position: fixed; inset: 0; background: rgba(60, 35, 15, .45); display: flex; align-items: flex-end; justify-content: center; }
#modal .card { background: var(--bg); width: min(560px, 100%); max-height: 86%; border-radius: 24px 24px 0 0; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); animation: up .18s ease-out; }
#modal .card.tall { height: 86%; }                                   /* окна с вкладками и списками: фиксированная высота — верхняя грань одна для всех вкладок */
@media (min-width: 700px) { #modal { align-items: center; } #modal .card { border-radius: 24px; max-height: 80%; } #modal .card.tall { height: 80%; } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
#modal .head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
#modal h2 { margin: 0; font-size: 20px; }
#modal .x { width: 34px; height: 34px; border-radius: 50%; background: var(--bad); color: #fff; font-weight: 900; box-shadow: var(--shadow); }
#modal .body { overflow-y: auto; padding: 8px 14px 16px; }
.note { font-size: 13px; opacity: .8; margin: 0 0 10px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rcard { background: var(--card); border-radius: 18px; padding: 10px; text-align: center; box-shadow: var(--shadow); position: relative; }
.rcard .em { font-size: 40px; line-height: 1.1; }
.rcard .nm { font-weight: 800; font-size: 14px; margin: 2px 0; }
.rcard .st { color: #f2a900; letter-spacing: 2px; font-size: 15px; }
.rcard .st .off { color: #e3d6bd; }
.rcard .meta { font-size: 12px; opacity: .85; margin-top: 3px; }
.rcard.lock { filter: grayscale(.85); opacity: .65; }
.rcard .lk { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 800; background: #fff; border-radius: 99px; padding: 1px 7px; }
.ings { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 5px; }
.ing { background: #f6ead0; border-radius: 9px; padding: 1px 6px; font-size: 12px; font-weight: 700; }
.ing.u { background: #ffe39a; box-shadow: inset 0 0 0 2px #f2b600; }
.ing.u.miss { background: #ffd9d4; box-shadow: inset 0 0 0 2px var(--bad); }

.list { display: flex; flex-direction: column; gap: 10px; }
.row2 { background: var(--card); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; }
.row2 .big { font-size: 34px; }
.row2 .mid { flex: 1; min-width: 0; font-size: 13px; }
.row2 .mid b { font-size: 15px; display: block; }
.stp { display: inline-block; font-size: 13px; font-weight: 800; color: #f2a900; margin: 1px 0 2px; }
.stp .off { color: #e3d6bd; }
.stp .arr { color: #7a5a45; opacity: .45; font-size: 11px; }
.stp .left { color: #7a5a45; font-size: 12px; }
.stp .nxt { color: #f2a900; opacity: .4; }          /* следующая звезда — бледнее */
.row2.lock { opacity: .6; }
.prog { height: 10px; background: #f0e2c6; border-radius: 99px; overflow: hidden; margin-top: 5px; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #7cc47a, #4fae7b); }
.invrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.invrow .ing { font-size: 13px; padding: 3px 9px; }
.rfilter { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 12px; }
.rfilter .chip { background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 8px; font-weight: 800; font-size: 13px; flex: 1 1 auto; text-align: center; white-space: nowrap; box-shadow: inset 0 0 0 2px var(--line); }
.rfilter .chip.on { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
h3 { margin: 14px 0 8px; font-size: 15px; }

/* ---------- тосты ---------- */
#toasts { position: fixed; left: 0; right: 0; top: calc(100px + max(env(safe-area-inset-top), var(--tgtop, 0px))); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 5; }
.toast { background: rgba(70, 45, 25, .92); color: #fff; padding: 8px 14px; border-radius: 14px; font-weight: 700; font-size: 14px; max-width: 90%; text-align: center; animation: pop .25s ease-out; }
.toast.good { background: rgba(60, 150, 90, .95); }
.toast.big { font-size: 17px; padding: 12px 18px; background: linear-gradient(135deg, #ff9a62, #ffb347); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

.welcome { text-align: center; }
.welcome .em { font-size: 54px; }
.welcome ul { text-align: left; padding-left: 20px; line-height: 1.7; font-weight: 700; }

#bottom button em { font-style: normal; }
#popup .sub { font-size: 12px; font-weight: 700; opacity: .85; line-height: 1.4; }
.row2.pick { cursor: pointer; border: 3px solid transparent; }
.row2.pick.cur { border-color: var(--accent); background: #fff0d4; }
.rcard .ract { margin-top: 6px; min-height: 28px; display: flex; justify-content: center; align-items: center; }
.rcard .ok { color: #3c9a5a; font-weight: 800; font-size: 13px; }
.toast.bad { background: rgba(200, 70, 60, .95); }
.welcome p { font-weight: 700; }

/* ---------- крестик «закрыть» в каждом меню ---------- */
#popup, #shop { position: fixed; }
#popup .x, #shop .x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: rgba(90, 61, 43, .14); color: #5a3d2b; font-size: 13px; font-weight: 900; line-height: 26px; text-align: center; box-shadow: none; }
#popup .x:active, #shop .x:active { background: rgba(90, 61, 43, .3); }
#popup { padding-top: 14px; min-width: 200px; }
#popup .ttl { padding: 0 22px; }
#shop { padding-top: 10px; }
#shop .hint { padding-right: 30px; }
#shop .tabs { display: flex; gap: 4px; padding-right: 34px; margin-bottom: 8px; overflow-x: auto; }
#shop .tab { flex: 0 1 auto; background: var(--card); border-radius: 12px; padding: 5px 7px; font-size: 12px; white-space: nowrap; font-weight: 800; box-shadow: var(--shadow); opacity: .75; }
#shop .tab span { margin-right: 2px; }
#shop .tab.on { opacity: 1; background: var(--accent); color: #fff; }
#shop .soon { width: 100%; text-align: center; padding: 16px 0; font-weight: 800; opacity: .7; }
#bottom button em { font-size: 11px; }

/* ---------- друзья и гости ---------- */
#visitbar { display: none; flex: 1; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
#visitname { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.visiting #visitbar { display: flex; }
.visiting #bottom, .visiting #coins, .visiting #gems, .visiting #lvl, .visiting #menu, .visiting #friendsbtn, .visiting #advice, .visiting #infostack, .visiting #shop, .visiting #popup { display: none !important; }
.note { font-size: 12px; font-weight: 700; opacity: .75; margin: 6px 0 0; }
h3.sub { margin: 14px 4px 8px; font-size: 15px; }


/* 📦 склад */
#shop .tab .badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
#shop .tab.on .badge { background: #fff; color: var(--accent); }
.item .sellmini { margin-top: 3px; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
@media (max-width: 520px) { #shop .tab span { display: none; } #shop .tab { padding: 6px 6px; font-size: 11.5px; } #shop .tabs { gap: 2px; padding-right: 40px; } }   /* шесть вкладок на телефоне: только подписи */
@media (max-width: 400px) { #shop .tab { padding: 6px 4px; font-size: 10.5px; } #shop .tabs { gap: 2px; padding-right: 38px; } }
#shop .x { z-index: 3; }


/* ---------- 💎 вход в премиум и 📮 почта ---------- */
#gems { cursor: pointer; }
#gems .plus { font-style: normal; background: var(--ok); color: #fff; border-radius: 50%; width: 18px; height: 18px; flex: none; line-height: 18px; text-align: center; font-size: 13px; margin-left: 3px; }
#gems:active { transform: translateY(2px); }
.item.pmcard { background: linear-gradient(160deg, #fff0d4, #ffe0f0); border-color: #ffb8d8; }
.item.pmcard .pr { color: #c2457f; }

.mailcard { text-align: center; }
.mailcard .em { font-size: 50px; line-height: 1.1; }
.mailcard .from { font-weight: 800; font-size: 15px; margin: 2px 0 10px; }
.stamps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 4px 0 8px; }
.stamp { background: var(--card); border-radius: 12px; padding: 4px 0 5px; box-shadow: inset 0 0 0 2px var(--line); display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.stamp small { font-size: 9px; font-weight: 800; opacity: .65; white-space: nowrap; }
.stamp span { font-size: 18px; line-height: 1.1; filter: grayscale(1); opacity: .5; }
.stamp b { font-size: 12px; color: #9a8468; }
.stamp.done { background: #e5f6e0; box-shadow: inset 0 0 0 2px var(--ok); }
.stamp.done span { filter: none; opacity: 1; }
.stamp.done b { color: #3c9a5a; }
.stamp.now { box-shadow: inset 0 0 0 3px var(--accent); background: #fff0d4; animation: pulse 1.2s ease-in-out infinite; }
.stamp.now span { filter: none; opacity: 1; }
.stamp.last { background: #fff3c8; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.mailcard .streak { font-weight: 800; font-size: 13px; color: #c2602b; margin-bottom: 6px; }
.mail-msg { font-weight: 700; font-size: 14px; margin: 6px 0; }
.mail-msg.err { color: var(--bad); font-size: 13px; }
.mailbtn { font-size: 17px; padding: 11px 26px; margin: 4px 0 6px; }
.mail-res { background: #fff7e0; border-radius: 18px; padding: 8px 12px 10px; margin: 6px 0; box-shadow: var(--shadow); }
.mail-res h3 { margin: 4px 0 8px; }
.mail-res .rw { font-weight: 800; font-size: 17px; margin: 3px 0; }
.mail-res .rw.bonus { color: #d2552f; font-size: 19px; animation: pop .35s ease-out; }
.odds { margin-top: 12px; font-size: 12px; font-weight: 800; opacity: .9; }
.oddsrow { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 5px 0 2px; }

.pm-bal { display: flex; justify-content: space-between; align-items: center; background: var(--card); border-radius: 14px; padding: 7px 14px; box-shadow: var(--shadow); font-weight: 800; margin-bottom: 10px; }
.pm-bal b { font-size: 18px; }
.pm-tabs { margin-bottom: 12px; }
.pm-tabs .chip { padding: 8px 6px; }
.pm-hero { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #fff0c8, #ffe2ee); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); margin-bottom: 12px; border: 2px solid #ffc86b; }
.pm-hero .big { font-size: 34px; }
.pm-hero .mid { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.pm-hero .mid b { display: block; font-size: 15px; }
.pm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.pm-pack { position: relative; background: var(--card); border-radius: 18px; padding: 12px 8px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid transparent; text-align: center; }
.pm-pack:active { transform: translateY(2px); }
.pm-pack .em { font-size: 34px; line-height: 1.1; }
.pm-pack b { font-size: 14px; }
.pm-pack .gm { font-weight: 800; font-size: 18px; color: #2c8fd0; }
.pm-pack small { font-size: 11px; font-weight: 800; color: #3c9a5a; min-height: 14px; }
.pm-pack .btn { margin-top: 4px; pointer-events: none; }
.pm-pack.best { border-color: var(--accent); background: #fff0d4; }
.pm-pack.top { border-color: #c98bf0; background: #f6ecff; }
.pm-pack .rib { position: absolute; top: -8px; right: 8px; font-style: normal; font-size: 10px; font-weight: 900; background: var(--accent); color: #fff; border-radius: 99px; padding: 2px 8px; box-shadow: var(--shadow); }
.pm-pack.top .rib { background: #a864d8; }
.pmrow.dim { opacity: .78; }
.pmrow .meta2 { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pmrow .pr { font-size: 12px; font-weight: 800; background: #fff0d4; border-radius: 9px; padding: 1px 7px; }
.pmrow .pr.gem { background: #dff1ff; color: #1c6fa8; }
.pmrow .pr.star { background: #fff3c0; color: #9a6a00; }
.ing.ok { background: #dff5d8; color: #2f8a4a; }
.ing.soonchip { background: #ece3d3; opacity: .85; white-space: nowrap; }
.pm-confirm { text-align: center; padding: 6px 4px; }
.pm-confirm .em { font-size: 64px; line-height: 1.1; }
.pm-confirm .get { display: flex; gap: 10px; justify-content: center; font-weight: 900; font-size: 24px; margin: 4px 0 14px; flex-wrap: wrap; }
.pm-confirm .btn.big { font-size: 18px; padding: 12px 28px; margin-bottom: 10px; }

/* ---------- 📋 Задачи ---------- */
#bottom button { position: relative; }
.bdg { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-style: normal; }
#bottom button .bdg { position: absolute; top: 2px; right: 8px; }
.rfilter .chip.on .bdg { background: #fff; color: var(--accent); }
.bdg.hidden { display: none; }
.tk-tabs { margin-bottom: 8px; }
.tk-head { font-size: 13px; font-weight: 800; color: #8a6b4f; text-align: center; margin: 2px 0 8px; }
.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk { background: var(--card); border-radius: 16px; padding: 9px 11px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; border: 2px solid transparent; }
.tk .big { font-size: 28px; flex: none; width: 34px; text-align: center; }
.tk .mid { flex: 1; min-width: 0; }
.tk .mid b { font-size: 14px; display: block; line-height: 1.25; }
.tk-bar { height: 7px; border-radius: 4px; background: rgba(90,61,43,.14); margin: 5px 0 4px; overflow: hidden; }
.tk-bar i { display: block; height: 100%; background: #7cc47a; border-radius: 4px; min-width: 3px; }
.tk-rw { display: flex; gap: 5px; flex-wrap: wrap; }
.tk-rw .rw { font-size: 11px; font-weight: 800; background: #fff3c0; color: #8a5a00; border-radius: 9px; padding: 1px 7px; }
.tk-rw .rw.g { background: #dcefff; color: #1f5f99; }
.tk-act { flex: none; min-width: 58px; text-align: center; font-size: 13px; font-weight: 800; }
.tk-n { color: #8a6b4f; } .tk-ok { color: #2f8a4a; font-size: 22px; } .tk-lock { color: #8a6b4f; font-size: 12px; }
.tk.done { border-color: #7cc47a; background: #f1fbea; }
.tk.got { opacity: .55; } .tk.locked { opacity: .6; }
.tk-more { text-align: center; margin: 4px 0; }

#gems.neg b, .pm-bal b.neg, .note.neg { color: #e8564f; }

/* ===== арт: картинки вместо эмодзи (js/art.js). Размер — 1.2em от шрифта родителя, поэтому они «растут» вместе с текстом ===== */
.ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.24em; background-repeat: no-repeat; font-style: normal; flex: none; pointer-events: none; }
/* картинки атласов .ic.d / .ic.u / .ic.o / .ic.p подставляет art.js из SHEETS (одна версия на канву и на DOM — раньше здесь жили копии адресов со своими ?v=, и иконки «ехали») */

/* ===== заставка при загрузке (img/splash.webp): домик с котиками; исчезает, когда кафе нарисовано ===== */
#splash { position: fixed; inset: 0; z-index: 9000; background: #fff5e8; transition: opacity .5s; }
#splash.gone { opacity: 0; pointer-events: none; }
#splash .sp-in { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 720 / 1290; max-width: 100vw; transform: translateX(-50%);
  background: #fff5e8 url(img/splash.webp) center top / cover no-repeat; }
#splash .sp-t { position: absolute; left: 0; right: 0; top: 63%; text-align: center; font-weight: 900; font-size: clamp(34px, 11vw, 52px); color: #7a4a2b;
  text-shadow: 0 3px 0 #fff, 0 0 12px rgba(255,255,255,.9); letter-spacing: .5px; }
#splash .sp-bar { position: absolute; left: 24%; right: 24%; top: 74%; height: 10px; border-radius: 6px; background: rgba(122,74,43,.16); overflow: hidden; }
#splash .sp-bar i { display: block; height: 100%; width: 40%; border-radius: 6px; background: linear-gradient(90deg, #ff9a62, #ffc86b); animation: sp 1.1s ease-in-out infinite; }
@keyframes sp { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ===== v7: «Отделка» (пол, стены, окна) — миниатюры стилей и подвкладки ===== */
#shop .subtabs { display: flex; gap: 6px; margin: 0 0 8px; padding-right: 34px; }
#shop .stab { flex: 1 1 0; background: var(--card); border-radius: 12px; padding: 5px 4px; font-size: 12px; font-weight: 800; box-shadow: var(--shadow); opacity: .75; }
#shop .stab.on { opacity: 1; background: var(--accent); color: #fff; }
.fin { display: inline-block; background-repeat: no-repeat; vertical-align: middle; flex: none; pointer-events: none; }
.fin.f { width: 32px; height: 32px; background-image: url(img/floors.webp?v=1); transform: scaleY(.58) rotate(45deg); margin: 0 8px; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(120,80,30,.45); }
.fin.w { width: 26px; height: 47px; background-image: url(img/walls.webp?v=1); border-radius: 2px; box-shadow: 0 0 0 1.5px rgba(120,80,30,.4); }
.fin.n { background-image: url(img/windows.webp?v=1); max-height: 40px; }
.item.fin-it .em { height: 48px; line-height: 48px; display: flex; align-items: center; justify-content: center; }
.item.wide { width: 84px; }
.fin-it .pair { display: inline-flex; }
.fin-it .pair .fin.w { border-radius: 0; box-shadow: none; }
.item.fillcard { background: linear-gradient(160deg, #e6f6dc, #d4efc4); }
.item.fillcard .em { font-size: 26px; height: 48px; line-height: 48px; }
.fxsoon { opacity: .6; font-size: 11px; }

/* ===== v7: холодильник (окно со стеллажом запасов) ===== */
.fr-wrap { position: relative; width: min(100%, 300px); margin: 0 auto; }
.fr-img { width: 100%; display: block; }
.fr-cav { position: absolute; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding: 1% 2%; }
.fr-shelf { display: flex; justify-content: space-around; align-items: flex-end; height: 18%; border-bottom: 4px solid rgba(255,255,255,.85); box-shadow: 0 6px 6px -4px rgba(70,140,200,.55); }
.fr-slot { position: relative; flex: 0 0 34%; font-size: clamp(30px, 10.5vw, 46px); line-height: 1; background: none; border: 0; padding: 0 0 2px; cursor: pointer; }
.fr-slot.off { filter: grayscale(1); opacity: .28; }
.fr-slot b { position: absolute; right: -3px; bottom: -3px; font-size: 11px; line-height: 14px; min-width: 14px; background: #fff; border-radius: 8px; padding: 0 4px; box-shadow: var(--shadow); }
.fr-ic { pointer-events: none; }
.fr-ic .ic { width: 1.25em; height: 1.25em; }

/* 🎡 колесо фортуны */
.whwrap { position: relative; width: 210px; height: 210px; margin: 6px auto 8px; }
.whl { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 7px #c98a4b, 0 0 0 10px #8a5a2b, 0 6px 14px rgba(0,0,0,.28); will-change: transform; }
.whl::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.0) 0 44.4deg, rgba(120,80,30,.35) 44.4deg 45deg); }
.whs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.whs > i { position: absolute; left: -20px; top: -17px; width: 40px; text-align: center; font-style: normal; font-size: 22px; line-height: 1; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.whs .ic { width: 1.25em; height: 1.25em; vertical-align: 0; }
.whs small { font-size: 11px; font-weight: 900; color: #6b4a1f; margin-top: -1px; min-height: 11px; }
.whhub { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff7e0; box-shadow: 0 0 0 4px #c98a4b, 0 2px 6px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; font-size: 24px; z-index: 2; }
.whptr { position: absolute; left: 50%; top: -14px; margin-left: -12px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 24px solid #e8564f; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); z-index: 3; }

/* ---------- v7.1: лента магазина и декора: плавный свайп, счётчики склада отделки ---------- */
#shop .row { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; scroll-behavior: auto; padding-top: 2px; }
#shop .row::-webkit-scrollbar { display: none; }
#shop .tabs { scrollbar-width: none; touch-action: pan-x; } #shop .tabs::-webkit-scrollbar { display: none; }
.item { contain: layout; }
.item.fin-it .em { position: relative; }
.item .cnt { position: absolute; right: -2px; top: -2px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 17px; font-style: normal; box-shadow: var(--shadow); }
.item.fillcard .pr { font-size: 10.5px; white-space: nowrap; }
.item.fillcard { width: 96px; }
.item.fillcard.wide { width: 110px; }
.item.fillcard.sel { box-shadow: 0 0 0 3px #7bc24f, var(--shadow); }
@media (max-width: 520px) { #shop .tab { padding: 6px 5px; font-size: 11px; } }

/* ---------- v7.1: холодильник на 5 полок, автомат ---------- */
.fr-slot.free { opacity: .55; font-size: 30px; font-weight: 300; color: #5b8fb5; }
.fr-slot.lock { filter: grayscale(.7); opacity: .55; }
.fr-slot.lock.next { opacity: 1; filter: none; }
.fr-slot.lock.next b { background: #ffe9a8; color: #6b4a1f; white-space: nowrap; font-size: 10px; }
.fr-slot.sel { outline: 3px solid #ffb84a; outline-offset: 1px; border-radius: 10px; background: rgba(255,255,255,.55); }
.fr-act { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.fr-act b { font-size: 14px; }
.fr-puts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 6px; }
.acm { display: flex; justify-content: center; gap: 8px; margin: 10px 0 12px; padding: 10px; background: #5a3b2a; border-radius: 16px; box-shadow: inset 0 3px 8px rgba(0,0,0,.45); }
.acr { width: 62px; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 38px; background: #fffaf0; border-radius: 10px; box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.acr.spin { animation: acjit .12s linear infinite; }
@keyframes acjit { 0% { transform: translateY(-3px); } 50% { transform: translateY(3px); } 100% { transform: translateY(-3px); } }

/* v7.1: окно «Премиум → Особое»: колонка картинок одной ширины, чтобы тексты не «ехали» от предмета к предмету */
.pmrow .big { flex: 0 0 76px; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.pmrow .big > * { max-width: 100%; max-height: 100%; }


/* ---------- v7.2: горизонтальный режим — верх и низ по одному ряду ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --tl: max(10px, env(safe-area-inset-left)); --tr: max(10px, env(safe-area-inset-right)); }
  /* верх: монеты, гемы, опыт — в левых 30% экрана; всё остальное в этом же ряду — подсказка */
  #top { right: auto; width: 30vw; min-width: 236px; gap: 4px; padding: calc(5px + max(env(safe-area-inset-top), var(--tgtop, 0px))) 0 0 var(--tl); }
  .visiting #top { right: 0; width: auto; padding-right: var(--tr); }
  .chip, .lvl { padding: 3px 8px; font-size: 12.5px; }
  #coins, #gems { height: 30px; }
  .lvl { flex: 1 1 60px; min-width: 60px; min-height: 30px; padding: 2px 8px 4px; gap: 2px; }
  .lvl .lrow { font-size: 12px; }
  .lvl .arr, .lvl .nxt { display: none; }
  .bar { height: 6px; }
  #infostack { left: calc(max(30vw, 236px) + var(--tl) + 4px); right: var(--tr); top: calc(5px + max(env(safe-area-inset-top), var(--tgtop, 0px))); }
  #advice {
    min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 3px 12px; font-size: 12.5px; line-height: 1.2; }
  #toasts { top: calc(48px + max(env(safe-area-inset-top), var(--tgtop, 0px))); }
  /* низ: все кнопки в одну строку, только иконка + короткая подпись */
  #bottom { flex-direction: row; justify-content: center; gap: 4px; padding: 0 var(--tr) calc(4px + max(env(safe-area-inset-bottom), var(--tgbottom, 0px))) var(--tl); }
  #bottom .brow { display: contents; }
  #bottom .brow > * { flex: 1 1 0; max-width: 92px; }
  #bottom { align-items: stretch; }
  .lvl .rem { display: none; }
  #shop .hint { margin: 0 0 4px 2px; font-size: 12px; }
  #shop .tabs { margin-bottom: 4px; }
  #shop .row { padding-bottom: 2px; }
  .item { padding: 3px 4px; }
  #bottom .spare { display: none; }
  #bottom button, #bottom .sub button { padding: 3px 2px 2px; border-radius: 12px; gap: 0; }
  #bottom button span, #bottom .sub button span { font-size: 17px; }
  #bottom button em { font-size: 10px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #bottom button .bdg { right: 4px; top: 0; }
  #shop { bottom: calc(var(--bar, 50px) + 4px); max-height: calc(100vh - var(--bar, 50px) - 56px); overflow-y: auto; padding: 6px 10px; }
  #popup { bottom: calc(var(--bar, 50px) + 10px); max-height: calc(100vh - var(--bar, 50px) - 60px); overflow-y: auto; }
}

/* v7.2: подарки друзьям, довески к наградам */
.giftbtn { margin-right: 4px; min-width: 38px; }
.row2.pmrow.extra { opacity: .85; }
.row2.pmrow.extra .big { font-size: 22px; }
.giftline { font-weight: 800; color: #b5651d; }
.pmrow.fperk .big { flex: 0 0 46px; width: 46px; height: 46px; font-size: 28px; }
.pmrow.fperk { padding-top: 6px; padding-bottom: 6px; }

/* v7.3 / v7.6: значок «нет связи с сервером» — телефон с красным перечёркнутым кругом; в самом верху, поверх остального интерфейса */
#syncwarn { position: fixed; right: 6px; top: calc(2px + max(env(safe-area-inset-top), var(--tgtop, 0px))); z-index: 300; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 0 rgba(160, 40, 30, .3), 0 0 0 2px #fff; padding: 0; display: flex; align-items: center; justify-content: center; animation: syncpulse 1.6s ease-in-out infinite; }
#syncwarn svg { display: block; }
#syncwarn.busy { animation: syncbusy .9s ease-in-out infinite; }
.visiting #syncwarn { display: none !important; }
@keyframes syncpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes syncbusy { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px #ffb347; } 50% { opacity: .55; box-shadow: 0 0 0 3px #ffd9a0; } }
@media (orientation: landscape) and (max-height: 520px) { #syncwarn { top: calc(2px + max(env(safe-area-inset-top), var(--tgtop, 0px))); right: var(--tr, 6px); width: 34px; height: 34px; } #syncwarn svg { width: 23px; height: 23px; } }

/* ---- настройки уведомлений: галочки ---- */
.ntfbox .mid { font-size: 14px; }
.ntfrow .nl { flex: 1; min-width: 0; }
.ntfrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; cursor: pointer; border-top: 1px solid #eadfca; -webkit-tap-highlight-color: transparent; user-select: none; }
.ntfrow:first-of-type { margin-top: 6px; }
.ntfrow .cb { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2.5px solid #cdbfa6; background: #fffaf0; color: #fff; font-weight: 900; font-size: 16px; line-height: 19px; text-align: center; transition: background .12s, border-color .12s; }
.ntfrow .cb.on { background: #5dae5b; border-color: #4a9448; }
.ntfrow:active .cb { transform: scale(.92); }

/* ===== v7.5: монеты из патефона летят в счётчик ===== */
.flycoin { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; font-size: 22px; line-height: 1; margin: -11px 0 0 -11px; will-change: transform, opacity; filter: drop-shadow(0 2px 2px rgba(120,80,0,.35)); }

/* ---- v7.6: конструктор баннеров ---- */
.shprev { background: #fff; border-radius: 16px; padding: 6px; box-shadow: var(--shadow); text-align: center; }
.shprev canvas { position: static; inset: auto; touch-action: auto; width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; }
.shprev.v canvas { width: auto; max-width: 52%; max-height: 40vh; }
.shtabs { display: flex; gap: 8px; margin: 10px 0 8px; }
.shtabs .btn { flex: 1; }
.shthumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; }
.shth { touch-action: manipulation; flex: 0 0 auto; width: 96px; border: 3px solid transparent; border-radius: 14px; background: var(--card); padding: 3px; font-size: 11px; font-weight: 800; color: inherit; box-shadow: var(--shadow); text-align: center; }
.shth.v { width: 62px; }
.shth img { width: 100%; display: block; border-radius: 10px; margin-bottom: 2px; }
.shth.on { border-color: var(--accent); }
.shcap { display: flex; margin: 6px 0 10px; }
.shcap .btn { flex: 1; font-size: 15px; }
.shact { display: flex; flex-direction: column; gap: 8px; }

/* ---------- v7.8: окно настройки шефа ---------- */
.chefdev { align-items: flex-start; }
.chefdev .mid { min-width: 0; }
.chefdev .chip2 { display: inline-block; margin: 3px 4px 0 0; padding: 3px 9px; border-radius: 12px; background: #fff; font-weight: 800; font-size: 13px; box-shadow: var(--shadow); border: 2px solid transparent; cursor: pointer; }
.chefdev .chip2.no { border-color: #e8564f; color: #c0443d; }
.chefdev .chip2.ro { cursor: default; box-shadow: none; background: #f6ecd8; }
.chefdev .stt { font-size: 12px; color: #8a7355; font-weight: 700; margin-top: 2px; }
.chefdev .cooks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chefdev .cooks .chip2.cur { border-color: #7cc47a; background: #eaf8e4; }
.chefrisk { border-radius: 12px; padding: 8px 10px; font-size: 13px; font-weight: 700; margin: 8px 0; background: #fff3d6; border: 2px solid #ffb347; }
.chefrisk.ok { background: #eaf8e4; border-color: #7cc47a; }

/* v7.8.5: заголовки ступеней приборов-автоматов (♾️ / 🥘 / ⚡) в премиум-магазине */
.autotier { margin: 14px 0 4px; font-size: 15px; font-weight: 800; }
.autotier small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; opacity: .7; }

/* v7.8.6: подпись-разделитель в ленте магазина («Особые приборы с автоготовкой») — не кнопка */
#shop .shsep { flex: 0 0 auto; width: 92px; align-self: stretch; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 6px 0 2px; padding: 0 8px; border-left: 2px dashed #d9c3a0; border-right: 2px dashed #d9c3a0; font-size: 11px; font-weight: 800; line-height: 1.2; opacity: .85; pointer-events: none; }