:root {
  --bg: #0E0B14;
  --fg: #F4EEFB;
  --soft: #C9BEDA;
  --muted: #B3A8C4;
  --pink: #FF4FA3;
  --pink-text: #FF6BB5;
  --lime: #C6FF3D;
  --on-lime: #14110A;
  --line: rgba(255, 255, 255, .22);
  --tile: rgba(255, 255, 255, .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; margin: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }

body {
  min-height: 100dvh;
  font-family: Manrope, system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
}

/* фоновое свечение меняется вместе с экраном */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 400px at 85% 8%, rgba(255, 79, 163, .28), transparent 70%),
    radial-gradient(480px 380px at 0% 78%, rgba(120, 90, 255, .30), transparent 70%);
  transition: opacity .5s;
}
body[data-screen^="alias"]::before {
  background:
    radial-gradient(520px 400px at 90% 4%, rgba(198, 255, 61, .14), transparent 70%),
    radial-gradient(480px 380px at 0% 70%, rgba(120, 90, 255, .26), transparent 70%);
}
body[data-screen="alias-game"]::before {
  background: radial-gradient(520px 440px at 50% 48%, rgba(120, 90, 255, .26), transparent 70%);
}
body[data-screen="alias-setup"]::before {
  background: radial-gradient(480px 380px at 100% 20%, rgba(255, 79, 163, .20), transparent 70%);
}
body[data-screen="never-result"]::before,
body[data-screen="alias-round"]::before,
body[data-screen="alias-win"]::before {
  background:
    radial-gradient(520px 400px at 50% 10%, rgba(198, 255, 61, .16), transparent 70%),
    radial-gradient(480px 380px at 100% 90%, rgba(255, 79, 163, .20), transparent 70%);
}

.app {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 40px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.screen { display: none; flex: 1; flex-direction: column; gap: 18px; }
.screen.active { display: flex; }

/* ---------- общие элементы ---------- */

.intro { display: flex; flex-direction: column; gap: 6px; }
.logo { font-family: Unbounded, sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; }
.logo span { color: var(--lime); }
.logo small { font-size: 12px; font-weight: 700; color: var(--pink-text); vertical-align: super; }
.sub { font-size: 15px; color: var(--soft); }
.title { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 20px; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: -10px;
}
.eyebrow.center { text-align: center; margin: 0; }
.eyebrow.row { display: flex; justify-content: space-between; margin: 0; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bar.left { justify-content: flex-start; }
.icon {
  flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.icon:hover { background: rgba(255, 255, 255, .14); }
.icon svg, .tabs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon svg.fill-icon { fill: currentColor; stroke: none; width: 16px; height: 16px; }

.pill {
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.btn {
  height: 60px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  font: 700 16px Unbounded, sans-serif; transition: opacity .2s;
}
.btn.primary { border: 0; background: var(--lime); color: var(--on-lime); }
.btn.pink { border: 0; background: var(--pink-text); color: #1A0710; font-size: 15px; }
.btn.dark { border: 0; background: var(--on-lime); color: var(--fg); height: 52px; padding: 0 24px; font: 700 15px Manrope, sans-serif; }
.btn.tall { height: 72px; border-radius: 22px; }
.btn.big { margin-top: auto; flex-shrink: 0; }
.btn:disabled { opacity: .35; cursor: default; }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; }
.stack { display: flex; flex-direction: column; gap: 12px; margin-top: auto; align-self: stretch; }

/* переключатель игр */
.tabs {
  display: none; gap: 6px; padding: 6px; margin-top: 16px;
  border-radius: 22px; background: rgba(34, 28, 44, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
}
body[data-screen="never-decks"] .tabs,
body[data-screen="never-game"] .tabs,
body[data-screen="alias-decks"] .tabs { display: flex; }
.tabs button {
  flex: 1 1 0; height: 50px; border: 0; border-radius: 16px; cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14px; transition: background .25s, color .25s;
}
body[data-screen^="never"] .tabs [data-tab="never"],
body[data-screen^="alias"] .tabs [data-tab="alias"] { background: var(--lime); color: var(--on-lime); }

/* ---------- Я никогда не: колоды ---------- */

.deck-list { display: flex; flex-direction: column; gap: 10px; }
.deck {
  min-height: 80px; border-radius: 20px; padding: 12px 16px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; gap: 14px;
  transition: background .25s ease;
}
.deck:hover { background: rgba(255, 255, 255, .09); }
.deck .mark {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font: 800 15px Unbounded, sans-serif;
}
.deck .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.deck .name { display: flex; align-items: center; gap: 8px; font: 700 15px Unbounded, sans-serif; }
.deck .name small { font: 600 12px Manrope, sans-serif; color: var(--muted); }
.deck .desc { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge18 { padding: 2px 6px; border-radius: 7px; background: var(--pink); color: #1A0710; font: 800 11px Manrope, sans-serif; }
.heat { flex-shrink: 0; display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.heat i { width: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.heat i.on { background: var(--pink-text); }

/* ---------- Я никогда не: колода карт ---------- */

.stage { position: relative; height: 440px; perspective: 1100px; touch-action: pan-y; flex-shrink: 0; }

.card {
  position: absolute; left: 50%; top: 10px;
  width: 270px; height: 400px; margin-left: -135px; padding: 28px;
  border: 0; border-radius: 28px;
  background: linear-gradient(160deg, #241B33, #15101F);
  color: var(--fg); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
}
.card.on { cursor: default; }
.card .top {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 13px Unbounded, sans-serif; color: var(--soft);
}
.card .spice { display: flex; gap: 5px; }
.card .spice i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.card .body { min-width: 0; }
.card .lead {
  font-size: 15px; font-weight: 600; color: var(--pink-text);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.card .text { font: 700 24px/1.18 Unbounded, sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
.card .hint { font-size: 13px; color: var(--muted); }

.dots { display: flex; justify-content: center; gap: 6px; height: 6px; margin-top: -8px; }
.dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); }

/* ---------- итоги ---------- */

.ring-big { position: relative; width: 200px; height: 200px; margin: 8px auto 0; }
.ring-big svg { width: 200px; height: 200px; transform: rotate(-90deg); }
.ring-big circle, .timer circle { fill: none; }
.ring-big .track { stroke: rgba(255, 255, 255, .08); stroke-width: 14; }
.ring-big .fill {
  stroke: var(--lime); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 552.9;
}
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num b { font: 800 56px/1 Unbounded, sans-serif; }
.ring-num span { font-size: 14px; color: var(--soft); margin-top: 6px; }
 }
.res-head { font: 700 22px Unbounded, sans-serif; text-align: center; }

/* ---------- Алиас: темы ---------- */

.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme {
  height: 104px; border-radius: 20px; padding: 14px; text-align: left; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .25s ease, background .25s ease;
}
.theme.on { border-color: var(--lime); background: rgba(198, 255, 61, .10); }
.theme .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.theme .name { font: 700 13px/1.25 Unbounded, sans-serif; }
.theme .ex { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--on-lime);
  display: flex; align-items: center; justify-content: center;
}
.check svg, .mark-ok svg, .mark-no svg { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Алиас: команды и правила ---------- */

.teams { display: flex; flex-direction: column; gap: 8px; }
.team {
  height: 54px; border-radius: 16px; background: var(--tile);
  display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px;
}
.team .dot { flex-shrink: 0; }
.team input {
  flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--fg);
  font: 700 16px Manrope, sans-serif; outline: none; border-radius: 10px;
}
.team input:focus { background: rgba(255, 255, 255, .06); padding: 0 8px; }
.team .del {
  width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.team .del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.team .del:disabled { opacity: .25; cursor: default; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.dashed {
  height: 50px; border-radius: 16px; border: 1.5px dashed rgba(255, 255, 255, .25); background: transparent;
  color: var(--soft); font-weight: 700; font-size: 15px; cursor: pointer; margin-top: -8px;
}
.dashed:disabled { opacity: .35; cursor: default; }

.rules { border-radius: 20px; background: var(--tile); padding: 6px 16px; display: flex; flex-direction: column; }
.rule {
  min-height: 62px; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 600; font-size: 15px;
}
.rule:last-child { border-bottom: 0; }
.rule div > small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .35); }
.seg button {
  height: 36px; min-width: 50px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-weight: 700; font-size: 13px; transition: background .2s, color .2s;
}
.seg button.on { background: var(--lime); color: var(--on-lime); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 20px; cursor: pointer; }
.stepper b { width: 40px; text-align: center; font: 700 17px Unbounded, sans-serif; }
.switch {
  flex-shrink: 0; width: 52px; height: 32px; border: 0; border-radius: 16px; padding: 3px; cursor: pointer;
  background: rgba(255, 255, 255, .18); display: flex;
}
.switch i { width: 26px; height: 26px; border-radius: 50%; background: #fff; }

/* ---------- Алиас: раунд ---------- */

.who { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.who small { font-size: 12px; font-weight: 600; color: var(--muted); }
.who b { font: 700 16px Unbounded, sans-serif; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.who .dot { width: 10px; height: 10px; }

.hud { display: flex; align-items: center; justify-content: space-between; }
.timer { position: relative; width: 68px; height: 68px; }
.timer svg { width: 68px; height: 68px; transform: rotate(-90deg); }
.timer .track { stroke: rgba(255, 255, 255, .1); stroke-width: 6; }
.timer .fill { stroke-width: 6; stroke-linecap: round; stroke-dasharray: 182.2; }
.timer b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 18px Unbounded, sans-serif; }
.counts { display: flex; gap: 8px; }
.count { padding: 10px 14px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.count b { font: 700 18px Unbounded, sans-serif; }
.count small { font-size: 11px; color: var(--soft); }
.count.ok { background: rgba(198, 255, 61, .12); } .count.ok b { color: var(--lime); }
.count.skip { background: rgba(255, 79, 163, .12); } .count.skip b { color: var(--pink-text); }

.wstage { position: relative; height: 420px; flex-shrink: 0; touch-action: none; }
.wcard {
  position: absolute; left: 50%; top: 30px; width: 300px; height: 360px; margin-left: -150px; padding: 26px;
  border-radius: 30px; background: linear-gradient(160deg, #241B33, #15101F);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center;
}
.wcard .tag { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; color: var(--soft); }
.wcard .word { font: 800 36px/1.1 Unbounded, sans-serif; letter-spacing: -0.02em; max-width: 100%; text-wrap: balance; }
.wcard .swipes { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

.last-banner {
  position: absolute; left: 0; right: 0; top: 0; z-index: 30; display: none; text-align: center;
  font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-text);
}
.wstage.last .last-banner { display: block; }

.overlay-card {
  position: absolute; left: 50%; top: 30px; width: 300px; height: 360px; margin-left: -150px; padding: 28px; z-index: 40;
  border-radius: 30px; background: var(--lime); color: var(--on-lime);
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center;
}
.overlay-card.show { display: flex; }
.overlay-card small { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.overlay-card .ov-title { font: 800 28px/1.15 Unbounded, sans-serif; overflow-wrap: anywhere; }
.overlay-card p { font-size: 15px; font-weight: 600; }

/* ---------- Алиас: итоги ---------- */

.round-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.round-head small { font-size: 13px; color: var(--muted); }
.big-num { font: 800 64px/1.05 Unbounded, sans-serif; color: var(--lime); }
.win-name { font: 800 40px/1.1 Unbounded, sans-serif; color: var(--lime); overflow-wrap: anywhere; }

.word-list { display: flex; flex-direction: column; gap: 6px; }
.word-list .empty { text-align: center; color: var(--muted); padding: 12px; }
.wt {
  min-height: 46px; border: 0; border-radius: 14px; padding: 8px 12px 8px 16px; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255, 255, 255, .04); color: var(--muted); font-weight: 700; font-size: 16px;
  transition: background .2s, color .2s;
}
.wt.ok { background: rgba(198, 255, 61, .08); color: var(--fg); }
.wt small { font-size: 11px; font-weight: 700; color: var(--pink-text); letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; }
.mark-ok, .mark-no { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mark-ok { background: var(--lime); color: var(--on-lime); }
.mark-no { background: rgba(255, 79, 163, .2); color: var(--pink-text); }

.score-card { border-radius: 20px; background: var(--tile); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.score-card #rTeams, .score-card #wTeams { display: flex; flex-direction: column; gap: 14px; }
.srow { display: flex; flex-direction: column; gap: 6px; }
.srow .line { display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; }
.srow .line b { font-family: Unbounded, sans-serif; }
.srow .track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.srow .fillbar { height: 8px; border-radius: 4px; }
.srow.lead .line span { color: var(--lime); }

/* невысокие экраны: колода чуть ниже */
@media (max-height: 760px) {
  .app { padding-top: 24px; }
  .stage { height: 410px; }
  .card { height: 380px; top: 4px; }
  .wstage { height: 390px; }
  .wcard, .overlay-card { height: 330px; top: 26px; }
}

/* улетающие карточки обрезаются краем экрана */
#alias-game { overflow: clip; }

/* телефон боком: переключатель игр не должен закрывать карту */
@media (max-height: 500px) {
  .tabs { position: static; }
}

/* тем много — «Дальше» всегда под рукой, над переключателем игр */
#aToSetup { position: sticky; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; box-shadow: 0 10px 30px rgba(14, 11, 20, .8); }
@media (max-height: 500px) { #aToSetup { position: static; } }

/* ================= Крокодил ================= */

body[data-screen^="croc"]::before {
  background:
    radial-gradient(520px 400px at 90% 4%, rgba(198, 255, 61, .14), transparent 70%),
    radial-gradient(480px 380px at 0% 70%, rgba(120, 90, 255, .26), transparent 70%);
}
body[data-screen="croc-setup"]::before { background: radial-gradient(480px 380px at 100% 20%, rgba(255, 79, 163, .20), transparent 70%); }
body[data-screen="croc-secret"]::before {
  background: radial-gradient(520px 460px at 50% 50%, rgba(120, 90, 255, .28), transparent 70%), radial-gradient(360px 300px at 100% 0%, rgba(255, 79, 163, .16), transparent 70%);
}
body[data-screen="croc-show"]::before, body[data-screen="croc-head"]::before { background: radial-gradient(520px 440px at 50% 48%, rgba(120, 90, 255, .26), transparent 70%); }
body[data-screen="croc-draw"]::before {
  background: radial-gradient(420px 300px at 0% 0%, rgba(255, 79, 163, .18), transparent 70%), radial-gradient(420px 300px at 100% 100%, rgba(120, 90, 255, .24), transparent 70%);
}
body[data-screen="croc-round"]::before, body[data-screen="croc-win"]::before {
  background: radial-gradient(520px 400px at 50% 10%, rgba(198, 255, 61, .16), transparent 70%), radial-gradient(480px 380px at 100% 90%, rgba(255, 79, 163, .20), transparent 70%);
}

/* три вкладки: значок над подписью */
body[data-screen="croc-decks"] .tabs { display: flex; }
body[data-screen^="croc"] .tabs [data-tab="croc"] { background: var(--lime); color: var(--on-lime); }
.tabs button { flex-direction: column; gap: 4px; height: 56px; font-size: 12px; min-width: 0; white-space: nowrap; }

.center { text-align: center; }
.icon-spacer { width: 44px; flex-shrink: 0; }
.lime { color: var(--lime); } .pink { color: var(--pink-text); }

/* способ показа */
.methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.method {
  height: 124px; border-radius: 26px; padding: 14px 12px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, #241B33, #15101F); border: 1.5px solid rgba(255, 255, 255, .08);
  transition: border-color .3s;
}
.method-pill {
  min-height: 52px; border-radius: 999px; padding: 6px 18px 6px 8px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px; margin-top: -8px;
  background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .12);
  transition: background .3s, border-color .3s;
}
.m-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: var(--fg); transition: background .3s, color .3s;
}
.method-pill .m-icon { width: 38px; height: 38px; border-radius: 50%; }
.m-icon svg, .method-chip svg, .h-phone svg, .eye svg, .cheat-toggle svg, .tools svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.m-icon svg { width: 22px; height: 22px; }
.m-text { display: flex; flex-direction: column; gap: 2px; }
.m-text b { font: 700 14px Unbounded, sans-serif; }
.m-text small { font-size: 12px; color: var(--muted); font-weight: 600; }
.method.on, .method-pill.on { border-color: var(--lime); }
.method-pill.on { background: rgba(198, 255, 61, .10); }
.method.on .m-icon, .method-pill.on .m-icon { background: var(--lime); color: var(--on-lime); }
.theme.adult:not(.on) { border-color: rgba(255, 79, 163, .35); }
#croc-decks .theme { height: 96px; }

.sticky-next { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 40; box-shadow: 0 10px 30px rgba(14, 11, 20, .8); }
@media (max-height: 500px) { .sticky-next { position: static; } }

.rule.col { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0; }
.seg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg4 button { height: 40px; min-width: 0; }

/* секретное слово */
.chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.method-chip {
  height: 40px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(198, 255, 61, .12); color: var(--lime);
  display: flex; align-items: center; gap: 8px; font: 700 14px Unbounded, sans-serif;
}
.method-chip svg { width: 18px; height: 18px; }
.chip-muted { height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--soft); display: flex; align-items: center; font-size: 13px; font-weight: 700; }
.btn.tall64 { height: 64px; font-size: 17px; flex-shrink: 0; }

.hold-card {
  position: relative; border-radius: 30px; overflow: hidden; background: linear-gradient(160deg, #241B33, #15101F);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; -webkit-touch-callout: none;
}
.hold-card.tall { flex: 1; min-height: 380px; }
.hold-card .hc-body {
  position: absolute; inset: 0; padding: 26px 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
}
.hold-card.has-task .hc-body { padding-top: 110px; }
.hc-tag { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; color: var(--soft); }
.hc-word { font: 800 40px/1.08 Unbounded, sans-serif; letter-spacing: -0.02em; text-wrap: balance; max-width: 100%; }
.hc-note { font-size: 13px; color: var(--muted); }
.hc-cover {
  position: absolute; inset: 0; background: linear-gradient(160deg, #30244A, #1A1327);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px;
}
.hold-card.has-task .hc-cover { padding-top: 110px; }
.hc-cover b { font: 700 20px/1.25 Unbounded, sans-serif; max-width: 220px; }
.hc-cover small { font-size: 13px; color: var(--muted); }
.hc-hand { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.hc-hand .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--pink-text); }
.hc-hand .core { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 107, 181, .16); display: flex; align-items: center; justify-content: center; color: var(--pink-text); }
.hc-hand svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-task {
  position: absolute; left: 14px; right: 14px; top: 14px; z-index: 3; border-radius: 20px; background: var(--pink-text); color: #1A0710;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.hc-task .ti { flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px; background: rgba(26, 7, 16, .12); display: flex; align-items: center; justify-content: center; }
.hc-task svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-task div { display: flex; flex-direction: column; gap: 1px; }
.hc-task small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hc-task b { font: 700 15px/1.25 Unbounded, sans-serif; }

/* раунд «Покажи / Объясни» */
.timer.big { width: 76px; height: 76px; }
.timer.big svg { width: 76px; height: 76px; }
.timer.big .fill { stroke-dasharray: 201.1; }
.timer.big b { font-size: 20px; }
.timer.small { width: 46px; height: 46px; flex-shrink: 0; }
.timer.small svg { width: 46px; height: 46px; }
.timer.small .track, .timer.small .fill { stroke-width: 4; }
.timer.small .fill { stroke-dasharray: 119.4; }
.timer.small b { font-size: 13px; }
.timer.mid { width: 56px; height: 56px; }
.timer.mid svg { width: 56px; height: 56px; }
.timer.mid .track, .timer.mid .fill { stroke-width: 5; }
.timer.mid .fill { stroke-dasharray: 144.5; }
.timer.mid b { font-size: 16px; }
.count { min-width: 80px; }

.cstage { position: relative; flex: 1; min-height: 360px; }
.cstage .hold-card { position: absolute; inset: 6px 8px; }
.cstage .overlay-card { left: 8px; right: 8px; top: 6px; bottom: 6px; width: auto; height: auto; margin: 0; }
.cheat {
  position: absolute; inset: 0; z-index: 30; border-radius: 28px; background: #1C1528; border: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 18px 8px; display: none; flex-direction: column; overflow: auto;
}
.cheat.show { display: flex; }
.cheat .eyebrow { margin-bottom: 6px; }
.gesture { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.gesture:last-child { border-bottom: 0; }
.gesture .gn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; background: rgba(198, 255, 61, .12); color: var(--lime); display: flex; align-items: center; justify-content: center; font: 700 13px Unbounded, sans-serif; }
.gesture div { display: flex; flex-direction: column; gap: 2px; }
.gesture b { font: 700 13px/1.3 Unbounded, sans-serif; }
.gesture span { font-size: 13px; color: var(--muted); }
.cheat-toggle {
  height: 48px; border-radius: 16px; border: 0; background: rgba(255, 255, 255, .06); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 700; font-size: 14px; color: var(--soft);
}
.cheat-toggle svg { width: 18px; height: 18px; stroke-width: 2; }
#croc-show .actions { margin-top: 0; }

/* раунд «Нарисуй» */
#croc-draw { gap: 10px; margin: -16px -12px 0; }
.draw-bar { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.who.left { flex: 1; min-width: 0; align-items: flex-start; }
.who.left b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.mini-btn {
  height: 46px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line); background: transparent; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px; font: 700 13px Manrope, sans-serif;
}
.mini-btn b { font-family: Unbounded, sans-serif; color: var(--pink-text); }
.mini-btn.primary { border: 0; background: var(--lime); color: var(--on-lime); }
.mini-btn.primary b { color: var(--on-lime); }
.mini-btn:disabled { opacity: .4; cursor: default; }
.canvas-wrap {
  position: relative; flex: 1; min-height: 360px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, #241B33, #15101F); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; color: var(--muted); text-align: center; }
.canvas-empty b { font: 700 16px Unbounded, sans-serif; color: var(--soft); }
.canvas-empty span { font-size: 13px; }
.peek { position: absolute; left: 12px; right: 12px; top: 12px; pointer-events: none; display: flex; justify-content: center; opacity: 0; z-index: 5; }
.peek > div { padding: 14px 20px; border-radius: 20px; background: rgba(14, 11, 20, .9); box-shadow: 0 0 0 1px var(--lime); text-align: center; display: flex; flex-direction: column; gap: 2px; max-width: 100%; }
.peek small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.peek b { font: 800 24px/1.15 Unbounded, sans-serif; overflow-wrap: break-word; }
.task-badge {
  position: absolute; left: 12px; bottom: 12px; right: 76px; padding: 8px 12px; border-radius: 14px; background: var(--pink-text); color: #1A0710;
  font: 700 12px/1.3 Unbounded, sans-serif; display: none; pointer-events: none;
}
.task-badge.show { display: block; }
.eye {
  position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; border: 0; border-radius: 18px; cursor: pointer; z-index: 6;
  display: flex; align-items: center; justify-content: center; touch-action: none; background: rgba(14, 11, 20, .8); color: var(--fg);
  -webkit-touch-callout: none; user-select: none;
}
.eye svg { width: 22px; height: 22px; }
.eye.on { background: var(--lime); color: var(--on-lime); }
.overlay-card.inset { left: 24px; right: 24px; top: 40px; bottom: 40px; width: auto; height: auto; margin: 0; }
.tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 0 4px; }
.tools button { height: 48px; border: 0; border-radius: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .04); transition: background .25s, color .25s; }
.tools button.on { background: rgba(255, 255, 255, .12); }
.tools button.eraser.on { background: var(--lime); color: var(--on-lime); }
.tools button.clear { background: rgba(255, 79, 163, .12); color: var(--pink-text); }
.tools .swatch { width: 26px; height: 26px; border-radius: 50%; }
.tools button.on .swatch { box-shadow: 0 0 0 3px #0E0B14, 0 0 0 5px currentColor; }
.tools .dotsize { border-radius: 50%; background: var(--fg); }
.tools svg { width: 20px; height: 20px; }

/* режим «На лоб»: на весь экран, рассчитан на горизонтальный телефон */
#croc-head { position: fixed; inset: 0; z-index: 60; background: var(--bg); gap: 0; }
.head { position: relative; flex: 1; overflow: hidden; background: radial-gradient(600px 320px at 50% 50%, rgba(120, 90, 255, .26), transparent 70%); }
.head > div { position: absolute; inset: 0; display: none; }
.head > div.show { display: flex; }
.h-hint { align-items: center; gap: 40px; padding: 32px 48px; }
.h-phone { flex-shrink: 0; width: 150px; height: 150px; border-radius: 40px; background: linear-gradient(160deg, #241B33, #15101F); display: flex; align-items: center; justify-content: center; color: var(--lime); box-shadow: 0 0 0 1px rgba(198, 255, 61, .4); }
.h-phone svg { width: 72px; height: 72px; stroke-width: 1.2; }
.h-text { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.h-text small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.h-text h2 { font: 800 28px/1.18 Unbounded, sans-serif; letter-spacing: -0.02em; text-wrap: balance; }
.h-text p { font-size: 15px; color: var(--soft); }
.h-rotate { display: none; color: var(--pink-text) !important; font-weight: 700; }
.h-actions { display: flex; gap: 12px; margin-top: 6px; }
.h-actions .btn { padding: 0 36px; }
.h-count { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.h-count b { font: 800 150px/1 Unbounded, sans-serif; color: var(--lime); }
.h-count span { font-size: 15px; font-weight: 700; color: var(--soft); }
.h-play { align-items: center; justify-content: center; padding: 28px 64px; }
.h-top { position: absolute; top: 22px; left: 44px; right: 44px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 2; }
.h-scores { display: flex; gap: 8px; }
.h-scores span { height: 36px; padding: 0 14px; border-radius: 12px; display: flex; align-items: center; font: 700 15px Unbounded, sans-serif; }
.h-scores .ok { background: rgba(198, 255, 61, .12); color: var(--lime); }
.h-scores .skip { background: rgba(255, 79, 163, .12); color: var(--pink-text); }
.h-word { font: 800 96px/1.04 Unbounded, sans-serif; letter-spacing: -0.03em; text-align: center; text-wrap: balance; max-width: 100%; }
.h-zone { position: absolute; left: 0; right: 0; height: 50%; border: 0; background: transparent; cursor: pointer; display: flex; justify-content: center; }
.h-zone.up { top: 0; align-items: flex-start; padding-top: 10px; }
.h-zone.down { bottom: 0; align-items: flex-end; padding-bottom: 12px; }
.h-zone span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.h-done { flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.h-done small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.h-done > b { font: 800 56px/1 Unbounded, sans-serif; color: var(--lime); }
.h-done > span { font-size: 15px; color: var(--soft); }
.h-done .btn { padding: 0 36px; margin-top: 6px; }
.head > .h-flash { display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; z-index: 10; }
.h-flash b { font: 800 72px Unbounded, sans-serif; letter-spacing: -0.03em; }

/* телефон вертикально: подсказка повернуть, всё в столбик */
@media (orientation: portrait) {
  .h-hint { flex-direction: column; justify-content: center; text-align: center; padding: 32px 24px; gap: 24px; }
  .h-hint .h-actions { justify-content: center; flex-wrap: wrap; }
  .h-rotate { display: block; }
  .h-phone { width: 110px; height: 110px; }
  .h-word { font-size: 56px; }
  .h-count b { font-size: 120px; }
  .h-top { left: 20px; right: 20px; }
  .h-play { padding: 28px 20px; }
}
.h-play { touch-action: none; user-select: none; -webkit-user-select: none; }