/* ── Horror UI Kit: базовые токены ── */
:root {
  --noise: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='0.55'/%3E%3C/svg%3E");
  --ring: 0 0 0 2px rgba(0,0,0,.85);
  --tile-inset: inset 0 0 16px rgba(0,0,0,.6);
  --blood: #d3222a;
}

html, body { margin: 0; padding: 0; background: #07080b; }

a { color: #c9d2dc; text-decoration: none; }
a:hover { color: #ffffff; }

.viewport {
  width: 100vw; height: 100vh; overflow: hidden; background: #07080b;
  display: flex; align-items: center; justify-content: center;
}

.stage {
  width: 2560px; height: 1440px; flex: 0 0 auto; transform-origin: center center;
  box-sizing: border-box; position: relative;
  background: radial-gradient(1900px 1100px at 50% -15%, #2a3448 0%, #161c29 52%, #090b10 100%);
  color: #c3ccd4; font-family: 'Oswald', sans-serif;
  padding: 44px 48px; display: flex; flex-direction: column; gap: 26px;
}
.stage.shake { animation: shakeHard .5s ease-out; }

.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(1600px 1000px at 50% 55%, transparent 55%, rgba(0,0,0,.6) 100%);
}
.vignette::after {
  content: ''; position: absolute; inset: 0;
  background: var(--noise); mix-blend-mode: overlay; opacity: .5;
}

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 50; }

/* ── Шапка ── */
.topbar { display: flex; align-items: center; gap: 30px; flex: 0 0 auto; position: relative; z-index: 2; }
.topbar__spacer { flex: 1; }
.titlebox { display: flex; flex-direction: column; gap: 4px; }
.title {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 52px; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; color: #f2f5f8;
  text-shadow: 0 3px 8px rgba(0,0,0,.7);
}
.subtitle { font-weight: 500; font-size: 20px; letter-spacing: .32em; text-transform: uppercase; color: #5a6470; }

.btn-ghost {
  background: rgba(0,0,0,.35); border: 2px solid #4a5260; border-radius: 0;
  padding: 13px 24px; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: .14em;
  color: #a9b4c1; cursor: pointer; text-transform: uppercase;
}
.btn-ghost:hover { border-color: #8d95a1; background: rgba(255,255,255,.06); color: #e8ebef; }
/* ВКЛ/ВЫКЛ разной длины — фиксируем ширину, чтобы шапка не прыгала */
#btn-sound { min-width: 196px; text-align: center; box-sizing: border-box; }

.vol {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.35); border: 2px solid #4a5260; border-radius: 0;
  padding: 13px 18px; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: .1em;
  color: #a9b4c1; cursor: pointer;
}
.vol:hover { border-color: #8d95a1; color: #e8ebef; }
.vol input { width: 120px; accent-color: var(--blood); cursor: pointer; }
.vol__val { width: 4ch; flex: 0 0 auto; text-align: right; }
.btn-ghost--danger:hover { border-color: #8a2a2a; color: #e06a5a; }

.btn-main {
  background: linear-gradient(120deg, #5a4460, #3a2a44 70%, #241a2e);
  border: none; border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.6);
  padding: 22px 48px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 30px; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; color: #f0f3f6; cursor: pointer;
  animation: btnPulse 2.6s ease-in-out infinite;
}
.btn-main:hover { color: #ffffff; background: linear-gradient(120deg, #6d5375, #473353 70%, #2c2038); }

/* ── Колонки ── */
.cols { display: flex; gap: 26px; flex: 1; min-height: 0; position: relative; z-index: 2; }

.panel { border-radius: 0; box-sizing: border-box; position: relative; }
.panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--noise); mix-blend-mode: overlay; opacity: .4;
}
.panel--killer {
  width: 740px; flex: 0 0 740px;
  background: radial-gradient(130% 120% at 50% 0%, #3a2126 0%, #241318 55%, #0e090b 100%);
  border: 1px solid #4a2326; border-top: 2px solid #8a3d2c;
  box-shadow: inset 0 0 90px rgba(0,0,0,.7), 0 24px 60px rgba(0,0,0,.5);
  padding: 26px 30px; display: flex; flex-direction: column; gap: 14px;
}
.panel--surv {
  flex: 1; min-width: 0;
  background: radial-gradient(130% 120% at 50% 0%, #222a3a 0%, #131722 55%, #0a0c12 100%);
  border: 1px solid #2c3442; border-top: 2px solid #4a5260;
  box-shadow: inset 0 0 90px rgba(0,0,0,.7), 0 24px 60px rgba(0,0,0,.5);
  padding: 26px 34px; display: flex; flex-direction: column; gap: 12px;
}
.panel__head { display: flex; align-items: baseline; gap: 20px; position: relative; }
.panel__title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 30px; letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,.55); }
.panel__title--killer { color: #e06a5a; filter: drop-shadow(0 0 12px rgba(211,34,42,.4)); }
.panel__title--surv { color: #dfe5ec; }
.panel__hint { font-size: 18px; letter-spacing: .1em; color: #59646d; }

.randkiller {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 20px; letter-spacing: .1em; text-transform: uppercase;
  color: #7d8a94; cursor: pointer; user-select: none;
}
.randkiller:hover { color: #aeb9c2; }
.randkiller input { width: 22px; height: 22px; accent-color: var(--blood); cursor: pointer; margin: 0; }

.btn-pool {
  background: rgba(0,0,0,.35); border: 2px solid #5c2a2a; border-radius: 0; padding: 6px 16px;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: .12em; text-transform: uppercase;
  color: #e06a5a; cursor: pointer; white-space: nowrap;
}
.btn-pool:hover { border-color: #e06a5a; background: rgba(255,255,255,.05); }
.btn-pool[hidden] { display: none; }

/* ── Убийца ── */
.killer-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 0; position: relative; }

.portrait {
  border-radius: 50%; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #2b1a1a, #14090a 75%);
  display: flex; align-items: center; justify-content: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.45); }
.portrait .imgfb {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-weight: 700;
}

.portrait--killer {
  width: 330px; height: 330px; border: 4px solid #23201c;
  box-shadow: var(--ring), 0 12px 24px -4px rgba(211,34,42,.5), inset 0 -14px 20px -6px rgba(211,34,42,.55), inset 0 0 30px rgba(0,0,0,.6);
}
.portrait--killer:hover { border-color: #8a3d2c; box-shadow: var(--ring), 0 12px 30px -2px rgba(211,34,42,.7), inset 0 -14px 20px -6px rgba(211,34,42,.6), inset 0 0 30px rgba(0,0,0,.6); }
.portrait--killer .imgfb { font-size: 120px; color: #e06a5a; text-shadow: 0 0 24px rgba(224,106,90,.5); }

.portrait-empty {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-weight: 700; cursor: pointer; box-sizing: border-box;
  box-shadow: var(--ring), inset 0 0 24px rgba(0,0,0,.8);
}
.portrait-empty--killer { width: 330px; height: 330px; background: #1a1114; border: 4px solid #0c0d10; font-size: 110px; color: #4a2f2f; }
.portrait-empty--killer:hover { border-color: #4a2326; color: #8a3d2c; }

.killer-name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 40px; letter-spacing: .1em; text-transform: uppercase; color: #f2f5f8; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.killer-hint { font-size: 24px; letter-spacing: .2em; color: #59646d; text-transform: uppercase; }

.killer-perks { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 16px 14px; flex: 0 0 auto; }

/* ── Перки (ромбы) ── */
.pslot { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.pslot--k { width: 300px; }
.pslot--s { width: 200px; gap: 6px; }

.pslot__box { display: flex; align-items: center; justify-content: center; position: relative; }
.pslot--k .pslot__box { width: 200px; height: 200px; }
.pslot--s .pslot__box { width: 158px; height: 158px; }

.popwrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }

.diamond {
  transform: rotate(45deg); overflow: hidden; box-sizing: border-box; position: relative;
  border: 6px solid #0c0d10; display: flex; align-items: center; justify-content: center;
}
.pslot--k .diamond { width: 160px; height: 160px; }
.pslot--s .diamond { width: 106px; height: 106px; }

/* Тонкая тёмная обводка + резкий даунскейл — иначе иконки замыливаются на отскейленной сцене */
.diamond img { transform: rotate(-45deg); object-fit: contain; filter: drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 2px 5px rgba(0,0,0,.7)); image-rendering: -webkit-optimize-contrast; position: relative; z-index: 1; }
.pslot--k .diamond img { width: 210px; height: 210px; }
.pslot--s .diamond img { width: 138px; height: 138px; }
.diamond .imgfb { transform: rotate(-45deg); font-family: 'Oswald', sans-serif; font-weight: 700; color: #f2f4f6; text-shadow: 0 2px 8px rgba(0,0,0,.8); position: relative; z-index: 1; }
.pslot--k .diamond .imgfb { font-size: 38px; }
.pslot--s .diamond .imgfb { font-size: 30px; }

.diamond--empty { background: #151a24; border-color: #0c0d10; box-shadow: var(--ring), inset 0 0 22px rgba(0,0,0,.85); }
.diamond--empty > div { transform: rotate(-45deg); color: #2c3442; }
.pslot--k .diamond--empty > div { font-size: 40px; }
.pslot--s .diamond--empty > div { font-size: 34px; }
.panel--killer .diamond--empty { background: #1c1418; }
.panel--killer .diamond--empty > div { color: #4a2f2f; }

/* Тиры перков: 0 чёрный / 1 коричневый / 2 синий / 3 фиолетовый */
.t0 { background: linear-gradient(160deg, #23262b, #0b0c0e 55%, #000000); box-shadow: var(--ring), var(--tile-inset), 0 0 24px rgba(0,0,0,.95), 0 0 10px rgba(150,160,175,.3); }
.t1 { background: linear-gradient(160deg, #a87f54, #71492a 55%, #3a2412); box-shadow: var(--ring), var(--tile-inset); }
.t2 { background: linear-gradient(160deg, #3d7bff, #1c45cc 55%, #0a1e78); box-shadow: var(--ring), var(--tile-inset), 0 0 16px rgba(80,130,255,.45); }
.t3 { background: linear-gradient(160deg, #c650ff, #8a17e8 45%, #3c0575); box-shadow: var(--ring), var(--tile-inset), 0 0 26px rgba(190,80,255,.8), 0 0 64px rgba(150,40,255,.4); animation: omPulse 3.4s ease-in-out infinite; animation-delay: var(--pulse-sync, 0s); }

/* Зерно + виньетка поверх градиента тира/редкости (пустых слотов не касается) */
.t0::before, .t1::before, .t2::before, .t3::before,
.r1::before, .r2::before, .r3::before, .r4::before, .r5::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--noise); mix-blend-mode: overlay;
}
.t0::after, .t1::after, .t2::after, .t3::after,
.r1::after, .r2::after, .r3::after, .r4::after, .r5::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 46%, rgba(255,255,255,.10), rgba(255,255,255,0) 72%),
    radial-gradient(90% 90% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
/* Блик на фиолетовых (легендарных) */
.t3::after, .r4::after {
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.30) 44%, rgba(255,255,255,0) 58%),
    radial-gradient(closest-side at 50% 46%, rgba(255,255,255,.10), rgba(255,255,255,0) 72%),
    radial-gradient(90% 90% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}

/* Редкость предметов как в DBD: коричневый / зелёный / синий / фиолетовый / золотой */
.r1 { background: linear-gradient(160deg, #a87f54, #71492a 55%, #3a2412); box-shadow: var(--ring), var(--tile-inset); }
.r2 { background: linear-gradient(160deg, #55d44a, #1e9c28 55%, #0c5216); box-shadow: var(--ring), var(--tile-inset), 0 0 12px rgba(80,220,90,.35); }
.r3 { background: linear-gradient(160deg, #3d7bff, #1c45cc 55%, #0a1e78); box-shadow: var(--ring), var(--tile-inset), 0 0 16px rgba(80,130,255,.45); }
.r4 { background: linear-gradient(160deg, #c650ff, #8a17e8 45%, #3c0575); box-shadow: var(--ring), var(--tile-inset), 0 0 26px rgba(190,80,255,.8), 0 0 64px rgba(150,40,255,.4); animation: omPulse 3.4s ease-in-out infinite; animation-delay: var(--pulse-sync, 0s); }
.r5 { background: linear-gradient(160deg, #ffd75e, #db9c14 50%, #7a4e06); box-shadow: var(--ring), var(--tile-inset), 0 0 14px rgba(255,205,90,.4); }

.pslot__name { line-height: 1.15; color: #c3ccd4; text-align: center; }
.pslot--k .pslot__name { font-size: 20px; max-width: 280px; min-height: 24px; }
.pslot--s .pslot__name { font-size: 18px; max-width: 200px; min-height: 40px; }
.pslot__name--empty { color: #3a4653; }

/* Анимации появления */
.pop0 { animation: slotSlam 1.1s cubic-bezier(.22,1,.36,1) both; }
.pop1 { animation: slotPop .7s cubic-bezier(.22,1,.36,1) both; }
.pop2 { animation: slotPop2 .8s cubic-bezier(.22,1,.36,1) both; }
.pop3 { animation: slotSlam 1.1s cubic-bezier(.22,1,.36,1) both; }

/* ── Выжившие ── */
.surv-rows { display: grid; grid-template-rows: repeat(4, 1fr); flex: 1; min-height: 0; gap: 10px; position: relative; }

.srow {
  display: flex; align-items: center; gap: 20px;
  background: rgba(0,0,0,.28); border: 1px solid #232b38; border-radius: 0;
  padding: 12px 24px; min-height: 0; box-sizing: border-box;
}

.srow__id { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 180px; flex: 0 0 180px; }

.portrait--surv {
  width: 150px; height: 150px; border: 3px solid #23201c;
  background: radial-gradient(circle at 35% 30%, #2b343d, #171c21 75%);
  box-shadow: var(--ring), 0 0 20px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.5);
}
/* Анимация появления портрета — только когда персонаж только что выбран/зарандомлен */
.portrait.pop-in { animation: slotPop .55s cubic-bezier(.2,1.3,.4,1) both; }
.portrait--surv:hover { border-color: #8d95a1; }
.portrait--surv .imgfb { font-size: 56px; color: #9db4c8; text-shadow: 0 0 18px rgba(157,180,200,.5); }

.portrait-empty--surv { width: 150px; height: 150px; background: #151a24; border: 3px solid #0c0d10; font-size: 52px; color: #2c3442; }
.portrait-empty--surv:hover { border-color: #2c3442; color: #4a5260; }

.surv-name { font-size: 21px; color: #aeb9c2; text-align: center; line-height: 1.1; }
.surv-pick-hint { font-size: 17px; letter-spacing: .1em; color: #3a4653; }

/* Предмет + аддоны */
.gear { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.gear__row { display: flex; align-items: stretch; gap: 12px; }
.gear__itembox { position: relative; }

.item {
  width: 132px; height: 132px; border-radius: 0; box-sizing: border-box; overflow: hidden;
  border: 5px solid #0e0f12; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
.item img { width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 2px 5px rgba(0,0,0,.6)); image-rendering: -webkit-optimize-contrast; position: relative; z-index: 1; }
.item .imgfb { font-size: 60px; color: #f2ede2; text-shadow: 0 2px 8px rgba(0,0,0,.7); line-height: 1; position: relative; z-index: 1; }
.item--empty {
  width: 132px; height: 132px; border-radius: 0; box-sizing: border-box;
  background: #151a24; border: 5px solid #0c0d10; display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #2c3442; box-shadow: var(--ring), inset 0 0 22px rgba(0,0,0,.85);
}

.addons { display: flex; flex-direction: column; justify-content: space-between; }
.addon { width: 62px; height: 62px; border-radius: 0; box-sizing: border-box; border: 4px solid #0e0f12; position: relative; overflow: hidden; }
.addon--empty { background: #151a24; border: 4px solid #0c0d10; box-shadow: var(--ring), inset 0 0 14px rgba(0,0,0,.85); animation: none; }
.addon--empty::before, .addon--empty::after { content: none; }
.addon.pop { animation: slotPop .4s cubic-bezier(.2,1.4,.4,1) both; }
.addon.pop--late { animation-delay: .12s; }

.gear__label { font-size: 18px; text-align: center; line-height: 1.15; max-width: 210px; }
.gear__label--empty { color: #3a4653; }
.gear__label--r1 { color: #b98a5e; }
.gear__label--r2 { color: #6bd48a; }
.gear__label--r3 { color: #6b9fe8; }
.gear__label--r4 { color: #c98af0; }
.gear__label--r5 { color: #e8c25e; }

.gear__itembox[draggable="true"] { cursor: grab; }
.gear__itembox.dragover .item, .gear__itembox.dragover .item--empty { outline: 3px dashed #9db4c8; outline-offset: 5px; }

.srow__div { width: 1px; align-self: stretch; background: #232b38; margin: 10px 6px; }
.srow__perks { display: flex; gap: 12px; flex: 1; justify-content: space-around; }

.pslot--s[draggable="true"] { cursor: grab; }
.pslot--s.dragover .diamond { outline: 3px dashed #9db4c8; outline-offset: 6px; }

/* ── Пикер персонажа ── */
.picker-overlay {
  position: absolute; inset: 0; z-index: 60; background: rgba(4,5,7,.82);
  display: flex; align-items: center; justify-content: center;
}
.picker {
  width: 2000px; max-height: 1200px; box-sizing: border-box;
  background: radial-gradient(130% 120% at 50% 0%, #222a3a 0%, #131722 55%, #0a0c12 100%);
  border: 1px solid #2c3442; border-top: 3px solid #8d95a1; border-radius: 0;
  padding: 34px 40px; display: flex; flex-direction: column; gap: 24px;
  animation: pickerIn .25s cubic-bezier(.2,1.2,.4,1) both;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 0 90px rgba(0,0,0,.55);
}
.picker--killer { background: radial-gradient(130% 120% at 50% 0%, #3a2126 0%, #241318 55%, #0e090b 100%); border-color: #4a2326; border-top-color: var(--blood); }
.picker__head { display: flex; align-items: center; gap: 24px; }
.picker__title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 34px; letter-spacing: .22em; text-transform: uppercase; color: #dfe5ec; text-shadow: 0 2px 4px rgba(0,0,0,.55); }
.picker--killer .picker__title { color: #e06a5a; }
.picker__close {
  background: rgba(0,0,0,.35); border: 2px solid #4a5260; border-radius: 0; padding: 10px 22px;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: .14em; color: #a9b4c1; cursor: pointer; text-transform: uppercase;
}
.picker__close:hover { border-color: #8d95a1; background: rgba(255,255,255,.06); color: #e8ebef; }
.picker__grid { overflow-y: auto; min-height: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: 20px 14px; padding: 6px; }

.popt { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; border-radius: 0; padding: 10px 4px; border: 1px solid transparent; }
.popt:hover { background: rgba(255,255,255,.04); border-color: #2c3442; }
.picker--killer .popt:hover { border-color: #4a2326; }
.popt__img {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #262e36, #14181d 75%);
  border: 3px solid #2a333c; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.popt__img.active { border-color: #8d95a1; }
.picker--killer .popt__img.active { border-color: #e06a5a; }
.popt__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.45); }
.popt__img .imgfb { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 40px; color: #7d8a94; }
.popt__name { font-size: 18px; color: #aeb9c2; text-align: center; line-height: 1.15; max-width: 190px; }

/* Мультивыбор пула убийц */
.pool-count { font-size: 20px; letter-spacing: .1em; color: #7d8a94; text-transform: uppercase; }
.popt--pool { position: relative; }
.popt--pool:not(.sel) .popt__img { filter: grayscale(.9) brightness(.55); }
.popt--pool:not(.sel) .popt__name { color: #59646d; }
.popt__check {
  position: absolute; top: 4px; right: 22px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--blood); color: #fff; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 20px;
  display: none; align-items: center; justify-content: center; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.popt--pool.sel .popt__check { display: flex; }

/* ── Мобильная версия (портрет / узкий экран): вертикальная раскладка на виртуальной сцене 600px ── */
body.mob .viewport { display: block; height: auto; }
body.mob .stage { width: 600px; height: auto; transform-origin: top left; padding: 18px 16px 30px; gap: 16px; }
body.mob .vignette { display: none; }

body.mob .topbar { flex-wrap: wrap; gap: 10px 12px; }
body.mob .titlebox { width: 100%; }
body.mob .title { font-size: 34px; }
body.mob .subtitle { font-size: 14px; letter-spacing: .2em; }
body.mob .topbar__spacer { display: none; }
body.mob .btn-ghost { padding: 12px 16px; font-size: 20px; }
body.mob .vol { padding: 10px 12px; font-size: 18px; gap: 8px; }
body.mob .vol input { width: 80px; }
body.mob .btn-main { padding: 14px 24px; font-size: 24px; margin-left: auto; }
body.mob #btn-sound { min-width: 168px; }

body.mob .cols { flex-direction: column; gap: 16px; }
body.mob .panel--killer { width: auto; flex: 0 0 auto; padding: 16px; }
body.mob .panel--surv { padding: 16px; }
body.mob .panel__head { flex-wrap: wrap; gap: 8px 14px; align-items: center; }
body.mob .panel__title { font-size: 22px; letter-spacing: .18em; }
body.mob .panel__hint { display: none; } /* drag&drop на тачскринах не работает */
body.mob .randkiller { font-size: 17px; }
body.mob .btn-pool { font-size: 16px; padding: 5px 10px; }

body.mob .killer-hero { gap: 12px; }
body.mob .portrait--killer, body.mob .portrait-empty--killer { width: 190px; height: 190px; }
body.mob .portrait--killer .imgfb, body.mob .portrait-empty--killer { font-size: 64px; }
body.mob .killer-name { font-size: 26px; }
body.mob .killer-hint { font-size: 16px; }
body.mob .killer-perks { gap: 10px 8px; }
body.mob .pslot--k { width: 100%; max-width: 260px; }
body.mob .pslot--k .pslot__box { width: 136px; height: 136px; }
body.mob .pslot--k .diamond { width: 108px; height: 108px; border-width: 5px; }
body.mob .pslot--k .diamond img { width: 140px; height: 140px; }
body.mob .pslot--k .diamond--empty > div { font-size: 28px; }
body.mob .pslot--k .pslot__name { font-size: 16px; max-width: 250px; min-height: 20px; }

body.mob .surv-rows { display: flex; flex-direction: column; gap: 10px; }
body.mob .srow { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; padding: 12px; justify-items: center; align-items: center; }
body.mob .srow__id { width: auto; flex: none; }
body.mob .portrait--surv, body.mob .portrait-empty--surv { width: 104px; height: 104px; }
body.mob .portrait--surv .imgfb { font-size: 38px; }
body.mob .portrait-empty--surv { font-size: 36px; }
body.mob .surv-name { font-size: 16px; }
body.mob .surv-pick-hint { font-size: 14px; }
body.mob .srow__div { display: none; }
body.mob .srow__perks { grid-column: 1 / -1; width: 100%; gap: 4px; justify-content: space-between; }
body.mob .pslot--s { width: 124px; }
body.mob .pslot--s .pslot__box { width: 102px; height: 102px; }
body.mob .pslot--s .diamond { width: 72px; height: 72px; border-width: 4px; }
body.mob .pslot--s .diamond img { width: 94px; height: 94px; }
body.mob .pslot--s .diamond--empty > div { font-size: 22px; }
body.mob .pslot--s .pslot__name { font-size: 15px; max-width: 124px; min-height: 34px; }
body.mob .item, body.mob .item--empty { width: 92px; height: 92px; border-width: 4px; }
body.mob .item img { width: 74px; height: 74px; }
body.mob .item .imgfb { font-size: 42px; }
body.mob .addon { width: 42px; height: 42px; border-width: 3px; }
body.mob .gear__row { gap: 8px; }
body.mob .gear__label { font-size: 15px; max-width: 170px; }

body.mob .picker-overlay { align-items: flex-start; }
body.mob .picker { width: calc(100% - 20px); max-height: none; padding: 16px 14px; gap: 14px; margin: 0 auto; }
body.mob .picker__head { flex-wrap: wrap; gap: 8px 10px; }
body.mob .picker__title { font-size: 20px; letter-spacing: .14em; }
body.mob .picker__close { font-size: 16px; padding: 8px 12px; }
body.mob .picker__grid { grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
body.mob .popt { padding: 6px 2px; }
body.mob .popt__img { width: 88px; height: 88px; }
body.mob .popt__name { font-size: 14px; max-width: 130px; }
body.mob .pool-count { font-size: 15px; width: 100%; order: 10; }
body.mob .popt__check { width: 26px; height: 26px; font-size: 15px; right: 12px; top: 2px; }

/* ── Keyframes ── */
@keyframes slotPop { 0% { transform: scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes slotPop2 { 0% { transform: scale(.55) rotate(-8deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes slotSlam { 0% { transform: scale(1.22); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shakeHard {
  0%, 100% { transform: translate(0,0) scale(var(--stage-scale, 1)); }
  15% { transform: translate(-16px, 9px) scale(var(--stage-scale, 1)); }
  30% { transform: translate(13px, -11px) scale(var(--stage-scale, 1)); }
  45% { transform: translate(-10px, -7px) scale(var(--stage-scale, 1)); }
  60% { transform: translate(9px, 10px) scale(var(--stage-scale, 1)); }
  75% { transform: translate(-6px, 4px) scale(var(--stage-scale, 1)); }
  90% { transform: translate(4px, -3px) scale(var(--stage-scale, 1)); }
}
/* Пульс фиолетовых (легендарных) тайлов — из Horror UI Kit */
@keyframes omPulse { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.3) saturate(1.25); } }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.6), 0 0 18px rgba(170,80,255,.3); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.6), 0 0 40px rgba(170,80,255,.65); }
}
@keyframes pickerIn { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }