/* Игра «Как достать клиента»: офис в разрезе, клиент, лоток с ботами и карточками. */

/* вкладка игры */
.rev { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.rev .num { font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-top: 4px; }
.spark { width: 120px; height: 46px; }
.spark polyline { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--lime); stroke: var(--ink); stroke-width: 2; }
.rankline { margin-top: 10px; font-size: 14px; color: var(--muted); }
.rankline b { color: var(--ink); }
.stars { display: inline-flex; gap: 1px; color: #C9C9C4; }
.stars svg { width: 18px; height: 18px; }
.stars .on { color: var(--ink); }
.lvl-tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--muted); }
.shop .rowi .btn { min-height: 38px; padding: 8px 14px; font-size: 14px; }

/* экран партии */
.play { position: relative; display: flex; flex-direction: column; height: 100vh; height: var(--app-h, 100dvh); background: linear-gradient(var(--studio-top), var(--studio-bottom)); overflow: hidden; user-select: none; -webkit-user-select: none; }
.hud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px 10px; }
.hud .x { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); }
.hud .x svg { width: 20px; height: 20px; }
.hud .t small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hud .t b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .cash { padding: 8px 12px; border-radius: var(--r-chip); background: var(--ink); color: var(--lime); font-size: 15px; font-weight: 800; white-space: nowrap; }
.hud .cash.pop { animation: pop .5s ease; }
@keyframes pop { 40% { transform: scale(1.15); } }
.dots { display: flex; gap: 5px; padding: 0 16px 8px; }
.dots i { flex: 1; height: 4px; border-radius: 99px; background: #C4C4BF; }
.dots i.ok { background: var(--lime); }
.dots i.no { background: var(--fire-2); }
.dots i.cur { background: var(--ink); }

.house { position: relative; flex: 1 1 auto; min-height: 190px; margin: 0 10px; padding: 0 5px 6px; display: grid; grid-template-rows: repeat(3, 1fr); gap: 6px; background: #3A3A37; border-radius: 6px 6px 3px 3px; }
.room { position: relative; overflow: hidden; border-radius: 2px; background: #DDDDDA var(--scene-bg) 50% 88% / 100% auto no-repeat; text-align: left; }
.room .name { position: absolute; z-index: 3; left: 10px; top: 8px; font-size: 13px; font-weight: 700; color: #3c3c39; padding-bottom: 2px; border-bottom: 3px solid transparent; }
.room.sel .name { border-bottom-color: var(--lime); color: var(--ink); }
.room.sel { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .18); }
.room .slot { position: absolute; z-index: 3; left: 14px; bottom: 8px; height: 58%; max-height: 74px; display: flex; align-items: flex-end; gap: 6px; }
.room .slot img { height: 100%; width: auto; transition: filter .4s, transform .3s; animation: hop .5s ease; }
.room .slot.ready img { filter: var(--glass-blue); animation: hop .5s ease, idle 2.4s 0.5s ease-in-out infinite; }
.room .slot.won img { filter: var(--glass-lime); animation: jump .6s ease 2; }
.room .slot.lost img { filter: none; animation: shake .4s ease 2; }
.room .cards-n { align-self: flex-end; margin-bottom: 4px; font-size: 12px; font-weight: 800; padding: 3px 7px; border-radius: var(--r-chip); background: rgba(247, 247, 245, .9); }
.room .prop { position: absolute; z-index: 1; left: 44%; bottom: 6px; height: 46%; max-height: 64px; width: auto; filter: saturate(0) brightness(1.06) contrast(.92); opacity: .9; pointer-events: none; }
.room .empty { position: absolute; z-index: 2; left: 14px; bottom: 12px; font-size: 13px; font-weight: 600; color: #7a7a75; }
.room .flame { position: absolute; z-index: 2; left: -4%; right: -4%; bottom: -2px; height: 0; background: url(../assets/fony/plamya.webp) 50% 100% / 100% 100% no-repeat; transition: height .7s cubic-bezier(.2, .9, .2, 1); animation: flick 2.2s ease-in-out infinite; transform-origin: 50% 100%; pointer-events: none; }
.room.burn .flame { height: 72%; }
.room.burn .name { color: var(--ink); }
@keyframes hop { 0% { transform: translateY(14px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes idle { 50% { transform: translateY(-3px); } }
@keyframes jump { 40% { transform: translateY(-12px); } }
@keyframes shake { 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } }

.walker { position: absolute; z-index: 9; right: 18px; top: 0; height: calc((100% - 18px) / 3); display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; transition: top 1.4s cubic-bezier(.45, .05, .3, 1); }
.walker img { height: 96%; width: auto; filter: drop-shadow(0 8px 8px rgba(30, 24, 18, .2)); }
.walker.walking img { animation: walk .35s ease-in-out infinite; }
@keyframes walk { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.say { position: absolute; z-index: 6; right: calc(100% - 6px); top: 6%; width: min(165px, 44vw); padding: 9px 11px; border-radius: 16px 16px 4px 16px; background: var(--surface); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); }
.say p { font-size: 14.5px; line-height: 1.2; font-weight: 750; letter-spacing: -0.01em; }
.say small { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--fire-1); }
.say.urgent { background: var(--ink); color: var(--paper); }
.say.urgent small { color: var(--fire-3); }

.tray { position: relative; z-index: 8; flex: 0 1 auto; max-height: 58%; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; margin-top: 10px; }
.tray .t { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tray .t b { color: var(--ink); }
.hint { margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: #2f4600; background: #EEF8CF; padding: 7px 10px; border-radius: 12px; }
.botsrow { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bt { display: grid; justify-items: center; gap: 1px; padding: 7px 2px 6px; border-radius: 16px; background: var(--surface-2); font-size: 12px; font-weight: 700; }
.bt img { height: 34px; width: auto; }
.bt small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.bt.on { background: var(--ink); color: var(--paper); }
.bt.on small { color: #BDBDB8; }
.bt.on img { filter: var(--glass-blue); }
.chips { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 11px; border-radius: var(--r-chip); background: var(--surface-2); font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.chip.on { background: var(--chip-on-bg); color: var(--chip-on-ink); }
.chip:active { transform: scale(.97); }
.go { position: sticky; bottom: calc(-12px - env(safe-area-inset-bottom)); margin: 10px -14px calc(-12px - env(safe-area-inset-bottom)); padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); }
.go span { font-size: 13px; color: var(--muted); font-weight: 600; }
.go .btn { min-height: 44px; }

.reply { display: grid; gap: 10px; }
.reply .who { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
.reply .who img { height: 44px; width: auto; justify-self: center; }
.reply .who b { font-size: 16px; }
.reply .who .gain { font-size: 15px; font-weight: 800; padding: 5px 10px; border-radius: var(--r-chip); background: var(--lime); }
.reply .who .gain.no { background: #FFE2CF; color: #8A2A00; }
.reply p { font-size: 15.5px; line-height: 1.4; }
.reply.ok .who img { filter: var(--glass-lime); }

.over { position: absolute; z-index: 20; inset: 0; display: grid; align-content: end; background: linear-gradient(rgba(220, 220, 218, 0), rgba(220, 220, 218, .85) 30%, rgba(220, 220, 218, .97)); }
.over .card { margin: 0 12px calc(12px + env(safe-area-inset-bottom)); padding: 20px; border-radius: var(--r-sheet); background: var(--surface); display: grid; gap: 12px; box-shadow: var(--shadow); }
.over .face { justify-self: center; height: 200px; width: auto; }
.over .big-stars { display: flex; justify-content: center; gap: 4px; color: #D0D0CB; }
.over .big-stars svg { width: 40px; height: 40px; }
.over .big-stars .on { color: var(--ink); animation: pop .5s ease backwards; }
.over .big-stars .on:nth-child(2) { animation-delay: .15s; }
.over .big-stars .on:nth-child(3) { animation-delay: .3s; }
.over .sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.over .sum div { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.over .sum b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.over .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

@media (max-height: 700px) {
  .say { top: 0; padding: 7px 9px; }
  .say p { font-size: 13px; }
  .say small { margin-top: 2px; font-size: 12px; }
  .chip { padding: 6px 9px; font-size: 13px; }
  .bt small { display: none; }
  .hint { font-size: 12.5px; padding: 6px 9px; }
  .tray .botsrow .bt img { height: 26px; }
  .room .slot { max-height: 54px; }
  .over .face { height: 140px; }
}