:root {
  --bg: #0d1110;
  --panel: #161c1a;
  --panel-2: #1d2522;
  --line: #2a3430;
  --text: #e9eee9;
  --muted: #9aa8a1;
  --accent: #ffc24d;
  --accent-ink: #2a1d00;
  --go: #5fe39a;
  --danger: #ff7a6b;
  --red-suit: #e2232a;
  --felt-1: #2c7d4c;
  --felt-2: #1c5a36;
  --felt-3: #123d25;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

button, input, textarea { font: inherit; color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: #ffffff12; padding: 1px 5px; border-radius: 5px; }

/* ---------- верхняя панель ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: #0f1513;
  flex: none;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-back { width: 26px; transform: rotate(-8deg); filter: drop-shadow(0 2px 4px #000a); }
/* название сайта — тем же шрифтом, что на превью (DejaVu Sans Bold, только буквы «solocard.fun») */
@font-face {
  font-family: "solocard wordmark"; font-weight: 700; font-display: swap;
  /* встроен: так шрифт грузится и со страницы, открытой как файл (file://); лицензия — vendor/dejavu.LICENSE.txt */
  src: url("data:font/woff2;base64,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") format("woff2");
}
.brand h1 { margin: 0; font-size: 18px; letter-spacing: .02em; }
.brand h1.wordmark { font-family: "solocard wordmark", "DejaVu Sans", Verdana, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: .04em; color: #fff; }
.tabs { display: flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.tab { padding: 6px 14px; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap; transition: background .15s, color .15s; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
/* невидимая жирная копия подписи задаёт ширину: активная вкладка не раздвигает меню */
.tab { display: inline-flex; flex-direction: column; align-items: center; }
.tab::after { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 650; pointer-events: none; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel-2); cursor: pointer; font-weight: 700;
}
.icon-btn:hover { border-color: var(--muted); }
#settingsBtn { font-size: 18px; line-height: 1; }

/* ---------- основная раскладка ---------- */
.layout {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
  padding: 16px;
}
.table-wrap { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: flex-start; }

.panel {
  width: 380px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 2px;
}
.panel[hidden] { display: none; }
.panel-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.block-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }

/* ---------- кнопки ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { border-color: #4a5a53; background: #243029; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.btn.primary:hover:not(:disabled) { background: #ffd27a; border-color: #ffd27a; }
.btn.big { width: 100%; padding: 13px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn.grow { flex: 1; }
.btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.row-btns.center { justify-content: center; }
.row-btns.end { justify-content: flex-end; }
.row-btns .btn { flex: 1; }
.row-btns.end .btn, .row-btns.center .btn { flex: none; }

.seg { display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-top: 10px; }
.seg-btn { flex: 1; border: 0; background: none; padding: 7px; border-radius: 8px; cursor: pointer; color: var(--muted); }
.seg-btn.on { background: #2f3b36; color: var(--text); }

/* ---------- подсказки ---------- */
.hint { font-size: 14px; min-height: 42px; }
.hint .where { color: var(--accent); font-weight: 650; }
.hint .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.hint kbd {
  font-family: ui-monospace, Menlo, monospace; background: #ffffff18; border-radius: 4px; padding: 0 5px;
}
.warn { color: #ffd38a; background: #ffc24d14; border: 1px solid #ffc24d33; border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
.error { color: var(--danger); font-size: 13px; }
.muted { color: var(--muted); }

/* ---------- выбор карт ---------- */
.picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.deck { display: flex; align-items: center; gap: 6px; color: var(--text); }
.deck img { width: 18px; filter: drop-shadow(1px 1px 0 #555) drop-shadow(1px 1px 0 #333); }
.deck b { font-variant-numeric: tabular-nums; }
.picker { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
.pk {
  aspect-ratio: 318 / 450;
  border: 0;
  border-radius: 4px;
  background: #f6f4ef;
  color: #222;
  padding: 2px 0 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-weight: 700;
  font-size: 12.5px;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 1px 0 #0006;
  transition: transform .1s, opacity .15s;
  user-select: none;
}
.pk .s { font-size: 15px; margin-top: 3px; font-family: -apple-system, "Segoe UI Symbol", sans-serif; }
.pk.red { color: var(--red-suit); }
.pk:hover:not(.used) { transform: translateY(-2px); box-shadow: 0 3px 6px #000a, 0 0 0 2px var(--accent); }
.pk.used { opacity: .16; cursor: default; }
.pk.used.swappable { opacity: .45; cursor: pointer; }
.pk.used.swappable:hover { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }

.deal-form { display: flex; gap: 8px; align-items: center; }
.deal-form label { color: var(--muted); font-size: 14px; }
.deal-form input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: #0f1513; outline: none;
}
.deal-form input:focus { border-color: var(--accent); }

/* ---------- игровое поле ---------- */
.board {
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  box-shadow: inset 0 0 0 1px #ffffff10, inset 0 0 90px #00000066, 0 10px 30px #0008;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
  isolation: isolate;
}

.slot {
  position: absolute;
  border-radius: 7px;
  border: 2px solid #ffffff2a;
  background: #00000022;
  display: grid;
  place-items: center;
  color: #ffffff38;
  font-size: calc(var(--cw) * .3);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.slot.home::before { content: attr(data-label); font-family: Georgia, serif; font-size: calc(var(--cw) * .42); }
.slot.home.red-suit { color: #ff9a9a4d; }
.slot.free { border-style: dashed; }
.slot-cap {
  position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; pointer-events: none;
  font-size: calc(var(--cw) * .1); letter-spacing: .1em; text-transform: uppercase; color: #ffffff4d;
}
.board.small .slot-cap { display: none; }
.col-hit { position: absolute; border-radius: 8px; }
.col-base { position: absolute; border-radius: 7px; border: 2px solid #ffffff1c; pointer-events: none; transition: border-color .2s, box-shadow .2s; }
.col-num {
  position: absolute; text-align: center; font-size: 12px; color: #ffffff66; pointer-events: none; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.col-num.target { color: var(--accent); }

.setup .col-hit, .setup .slot { cursor: pointer; }
.setup .col-hit:hover ~ .col-base { border-color: #ffffff40; }

.card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  transition: transform .34s cubic-bezier(.2, .75, .25, 1), opacity .2s;
  will-change: transform;
}
.card img { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 1px 1.5px #0009); }
.card.hidden { opacity: 0; pointer-events: none; }
.no-anim, .no-anim .card { transition: none !important; }
.setup .card { cursor: pointer; }
.setup .card:hover img { filter: drop-shadow(0 1px 1.5px #0009) brightness(.94); }
.card.pop { animation: pop .28s ease-out; }
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }

/* подсветка карт */
.card::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.card.hl-src::after {
  opacity: 1;
  border: 3px solid var(--accent);
  box-shadow: 0 0 16px #ffc24dcc, inset 0 0 10px #ffc24d55;
  animation: pulse 1.2s ease-in-out infinite;
}
.card.selected::after { opacity: 1; border: 3px solid #7cc8ff; box-shadow: 0 0 14px #7cc8ffbb; }
.card.flash::after { opacity: 1; border: 3px solid var(--danger); box-shadow: 0 0 16px var(--danger); animation: blink .4s 3; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes pulse { 50% { box-shadow: 0 0 4px #ffc24d66; border-color: #ffc24d99; } }

.ghost {
  position: absolute;
  z-index: 400;
  border-radius: 8px;
  pointer-events: none;
  border: 3px dashed var(--go);
  background: #5fe39a1a;
  box-shadow: 0 0 18px #5fe39a55;
  display: grid;
  place-items: center;
  color: var(--go);
  font-weight: 700;
  font-size: calc(var(--cw) * .32);
  transition: transform .25s;
}
.ghost[hidden] { display: none; }
.ghost.setup-ghost { border-color: var(--accent); background: #ffc24d14; color: var(--accent); box-shadow: 0 0 18px #ffc24d44; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { background: #ffc24d30; } }
.slot.target { border-color: var(--accent); border-style: solid; background: #ffc24d1c; box-shadow: 0 0 16px #ffc24d55; color: var(--accent); }
.slot.dest { border-color: var(--go); border-style: dashed; background: #5fe39a22; box-shadow: 0 0 18px #5fe39a66; }
.col-base.target { border-color: var(--accent); box-shadow: 0 0 14px #ffc24d55; }

.arrow-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 450; }
.arrow-layer path.shaft { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 1px 2px #000c); }
.arrow-layer path.head { fill: var(--accent); filter: drop-shadow(0 1px 2px #000c); }
.arrow-layer .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw .45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.win-banner {
  position: absolute; z-index: 500; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #0d1110e6; border: 1px solid var(--accent); color: var(--text);
  padding: 18px 28px; border-radius: 16px; text-align: center; box-shadow: 0 10px 40px #000c;
  font-size: 18px; pointer-events: none;
}
.win-banner b { display: block; font-size: 24px; color: var(--accent); }

/* ---------- панель решения ---------- */
.step-card { border-color: #ffc24d55; }
.step-count { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.step-text { font-size: 18px; line-height: 1.4; margin: 6px 0 4px; min-height: 52px; }
.step-auto { font-size: 13.5px; color: var(--muted); min-height: 20px; }
.step-auto .home-ico { color: var(--go); }
.progress { height: 4px; background: #ffffff12; border-radius: 4px; margin: 12px 0; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.play-ctrl { display: flex; gap: 8px; }
.play-ctrl .btn { padding: 11px 14px; }

.cl { font-weight: 700; white-space: nowrap; padding: 0 4px; border-radius: 5px; background: #f6f4ef; color: #1c1c1c; font-family: Georgia, serif; }
.cl.red { color: var(--red-suit); }
.step-text .cl { font-size: 17px; }

.options { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }

.list-block { flex: 1; min-height: 180px; display: flex; flex-direction: column; }
.move-list {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1;
  counter-reset: mv; font-size: 13.5px;
}
.move-list li {
  display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 8px; cursor: pointer;
  color: var(--muted);
}
.move-list li:hover { background: #ffffff0a; }
.move-list li .n { width: 26px; flex: none; text-align: right; font-variant-numeric: tabular-nums; color: #6f7d76; }
.move-list li.done { color: #6f7d76; }
.move-list li.done .cl { opacity: .55; }
.move-list li.current { background: #ffc24d1f; color: var(--text); }
.move-list li.current .n { color: var(--accent); }
.move-list .cl { font-size: 12.5px; padding: 0 3px; }
.move-list .sub { color: #6f7d76; font-size: 12px; }

/* ---------- модальные окна ---------- */
.modal {
  position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 50;
  backdrop-filter: blur(3px); padding: 16px;
}
.modal[hidden] { display: none; }
.modal-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px #000c;
}
.modal-box.center { text-align: center; width: min(400px, 100%); }
/* окно выбора (число мастей «Паука»): варианты — равные кнопки, под ними «Отмена» */
.choice-list { margin-top: 14px; }
.row-btns.choice-list .btn { flex: 1 1 0; min-width: 96px; white-space: nowrap; }
@media (max-width: 480px) {
  .row-btns.choice-list { flex-direction: column; }
  .row-btns.choice-list .btn { flex: none; padding: 11px 12px; }
}
.modal-box h2 { margin: 0 0 8px; font-size: 20px; }
.modal-box textarea {
  width: 100%; background: #0f1513; border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; resize: vertical; outline: none;
}
.modal-box textarea:focus { border-color: var(--accent); }
.help-list { padding-left: 20px; margin: 10px 0; }
.set-group { margin: 16px 0; }
.set-group .check { margin-bottom: 8px; }
.lang-seg { margin-top: 0; flex-wrap: wrap; }
.lang-seg .seg-btn { min-width: 110px; text-align: center; text-decoration: none; }
.sound-row { display: flex; align-items: center; gap: 12px; }
.sound-btn { flex: none; display: grid; place-items: center; }
.sound-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn .spk { fill: currentColor; stroke: none; }
.sound-btn.off { color: var(--muted); }
.sound-btn.off .wave, .sound-btn:not(.off) .cross { display: none; }
.sound-row input { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.sound-row.off input { opacity: .45; }
.sound-row output { width: 3.2em; text-align: right; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.help-list li { margin-bottom: 10px; }
.help-tip {
  display: flex; gap: 10px; margin: 14px 0 4px; padding: 11px 13px; border-radius: 12px;
  background: #5fe39a10; border: 1px solid #5fe39a38; font-size: 14px; line-height: 1.5;
}
.help-tip::before { content: "💡"; flex: none; font-size: 18px; line-height: 1.2; }
.flip { perspective: 600px; height: 110px; display: grid; place-items: center; margin-bottom: 10px; }
.flip img { width: 70px; animation: flip 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px #000c); }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  background: #232c28; border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px;
  box-shadow: 0 10px 30px #000a; max-width: min(90vw, 520px); font-size: 14px;
}
.toast.bad { border-color: #ff7a6b88; }

/* ---------- адаптивность ---------- */
@media (max-width: 960px) {
  body { overflow: auto; height: auto; }
  .layout { flex-direction: column; padding: 10px; }
  .panel { width: 100%; overflow: visible; }
  .list-block { max-height: 50vh; }
  .topbar { gap: 10px; flex-wrap: wrap; }
  .tabs { order: 5; width: 100%; overflow-x: auto; }
  .tab { flex: 1; text-align: center; padding: 6px 8px; }
  .topbar { padding: 8px 12px; }
}
@media (max-width: 520px) {
  .pk { font-size: 10px; }
  .pk .s { font-size: 12px; }
  .step-text { font-size: 16px; }
}

/* ---------- распознавание скриншота ---------- */
.shot-btn { margin-bottom: 6px; }
.small { font-size: 12.5px; margin: 0 0 10px; }
.modal-box.shot-box { width: min(1200px, 100%); max-height: 96vh; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.shot-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.shot-info { flex: 1; min-width: 260px; }
.shot-info h2 { margin-bottom: 4px; }
.shot-summary { font-size: 14px; color: var(--muted); }
.shot-summary .bad { color: #ffd38a; }
.shot-summary .fixing { color: var(--accent); }
.shot-actions { margin-top: 0; }
.shot-stage { position: relative; margin: 0 auto; flex: none; border-radius: 10px; overflow: hidden; background: #000; }
.shot-stage img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.shot-stage.busy img { filter: brightness(.45) blur(1px); }
.shot-stage.busy::after {
  content: attr(data-busy); position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 18px; font-weight: 600; text-shadow: 0 2px 6px #000;
}
.shot-layer { position: absolute; inset: 0; }
.shot-chip {
  position: absolute; transform: translateY(-4%);
  border: 2px solid #2b8a57; background: #f6f4efee; color: #1c1c1c; border-radius: 6px;
  padding: 0 .3em; font: 700 1em/1.25 Georgia, serif; white-space: nowrap; box-shadow: 0 2px 6px #0007; cursor: default;
}
.shot-chip.red { color: var(--red-suit); }
.shot-chip.unsure { border-color: var(--accent); background: #fff3d6; animation: chipPulse 1.3s ease-in-out infinite; }
.shot-chip.edited { border-color: #3d8bff; }
@keyframes chipPulse { 50% { box-shadow: 0 0 0 4px #ffc24d66, 0 2px 6px #0007; } }
.fixing .shot-chip { cursor: pointer; }
.fixing .shot-chip:hover { transform: translateY(-4%) scale(1.12); border-color: var(--accent); }
.shot-chip.active { outline: 3px solid var(--accent); outline-offset: 1px; }
.shot-pop {
  position: fixed; z-index: 70; width: min(420px, calc(100vw - 16px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px; box-shadow: 0 16px 50px #000c; display: flex; flex-direction: column; gap: 8px;
}
.shot-pop[hidden] { display: none; }
.shot-pop .pk.current { box-shadow: 0 0 0 2px #3d8bff; }
.shot-pop .pk.used.swappable { opacity: .8; }
.drop-hint {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none;
  background: #0d1110cc; border: 3px dashed var(--accent); color: var(--text); font-size: 22px; font-weight: 600;
}
.drop-hint[hidden] { display: none; }

/* ---------- вкладки игр ---------- */
.layout[hidden], .game-view[hidden] { display: none; }
.noscript { padding: 20px; text-align: center; color: var(--muted); }
.game-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.game-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; flex: none; }
.game-stats { display: flex; gap: 16px; margin: 0 10px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.game-stats b { color: var(--text); font-weight: 650; }
.game-wrap { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.gboard {
  position: relative; flex: none; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, var(--felt-1) 0%, var(--felt-2) 55%, var(--felt-3) 100%);
  box-shadow: inset 0 0 0 1px #ffffff10, inset 0 0 90px #00000066, 0 10px 30px #0008;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.gslot {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: 7px;
  border: 2px solid #ffffff26; background: #00000020; display: grid; place-items: center;
  color: #ffffff3a; font: calc(var(--cw) * .4) Georgia, serif; pointer-events: none;
}
.gslot.red { color: #ff9a9a4d; }
.gslot-t { border-color: #ffffff17; background: #00000012; }
.gslot-f { border-style: dashed; }
.gslot-s { pointer-events: auto; cursor: pointer; font-size: calc(var(--cw) * .5); }
.gslot.plain { border-color: transparent; background: none; }
/* z-index меняется в момент вылета (с той же задержкой, что и перелёт): летящая карта — поверх стола */
.gcard {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  transition: transform .28s cubic-bezier(.2, .75, .25, 1), z-index 0s; will-change: transform; cursor: pointer; touch-action: none;
  perspective: calc(var(--cw) * 5); /* объём для переворота карты (anime.js в games.js) */
}
.gboard.dealing .gcard { transition-duration: .34s, 0s; }
.gcard img { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 1px 1.5px #0009); }
/* тень под картой, пока она в воздухе (games.js, liftCard): анимируются только прозрачность и сдвиг */
.gcard .gshade {
  position: absolute; inset: 3% 4%; z-index: -1; border-radius: calc(var(--cw) * .08); opacity: 0; pointer-events: none;
  box-shadow: 0 calc(var(--ch) * .06) calc(var(--ch) * .12) #0000008c, 0 calc(var(--ch) * .02) calc(var(--ch) * .03) #00000059;
}
/* вспышка вокруг дома, когда туда ложится карта */
.ghalo {
  position: absolute; left: 0; top: 0; z-index: 5; width: var(--cw); height: var(--ch); border-radius: 8px; opacity: 0;
  pointer-events: none; border: 2px solid #ffd98a; box-shadow: 0 0 18px 4px #ffc24d99, inset 0 0 12px #ffc24d55;
}
/* победа: из домов разлетаются масти */
.gburst { position: absolute; inset: 0; z-index: 2100; pointer-events: none; }
.gburst span {
  position: absolute; margin: calc(var(--cw) * -.2) 0 0 calc(var(--cw) * -.14); font: 700 calc(var(--cw) * .42) / 1 Georgia, serif;
  text-shadow: 0 2px 6px #0009; opacity: 0;
}
.gburst .r { color: #ff5a5f; }
.gburst .g { color: var(--accent); }
.gburst .w { color: #fff; }
.gcard.dragging { transition: none; cursor: grabbing; }
.gcard.dragging img { filter: drop-shadow(0 10px 16px #000b); }
.gcard.nope img { animation: gnope .3s ease-in-out; }
@keyframes gnope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.no-anim .gcard { transition: none !important; }
.gdrop {
  position: absolute; left: 0; top: 0; z-index: 900; pointer-events: none; border-radius: 9px;
  border: 3px solid var(--go); box-shadow: 0 0 18px #5fe39a88; background: #5fe39a14;
}
.gdrop[hidden] { display: none; }
.gover { position: absolute; inset: 0; z-index: 2000; display: grid; place-items: center; background: #0009; backdrop-filter: blur(2px); }
.gover[hidden] { display: none; }
.gover-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: #0d1110f0; border: 1px solid var(--line); border-radius: 18px; padding: 22px 30px; box-shadow: 0 16px 50px #000c;
}
.gover-box.won { border-color: var(--accent); }
.gover-box b { font-size: 24px; color: var(--accent); }
.gover-box.lost b { color: var(--text); }
.gover-box span { color: var(--muted); }

/* ---------- подвал и донат ---------- */
.sitefoot {
  flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px;
  padding: 6px 16px 8px; border-top: 1px solid var(--line); font-size: 12px; color: #7d8a84; background: #0f1513;
}
.foot-sep { color: #4a5550; }
.link-btn { background: none; border: 0; padding: 2px 4px; color: var(--accent); cursor: pointer; font-size: 12px; }
.link-btn:hover { text-decoration: underline; }
.link-btn.quiet { color: #9aa8a1; }
.link-btn.quiet:hover { color: var(--text); }
.about-box { width: min(520px, 100%); }
.about-box p { line-height: 1.55; }
.donate-box { width: min(600px, 100%); }
.donate-main { display: flex; gap: 18px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.donate-qr { width: 168px; height: 168px; flex: none; background: #fff; border-radius: 12px; padding: 6px; }
.donate-qr svg { width: 100%; height: 100%; display: block; }
.donate-info { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.donate-info .block-title { margin-bottom: 0; }
.donate-addr {
  font-size: 13px; word-break: break-all; user-select: all; padding: 8px 10px; border-radius: 8px;
  background: #0f1513; border: 1px solid var(--line); line-height: 1.4;
}
.donate-box .warn { margin: 10px 0 0; }
@media (max-width: 960px) {
  .game-view { padding: 8px 10px; }
  .game-stats { gap: 10px; margin: 0 4px; font-size: 13px; }
}

/* ---------- решатель косынки ---------- */
.kboard .kcard { cursor: pointer; touch-action: none; }
.kboard .kcard.nope img { animation: gnope .3s ease-in-out; }
/* открытая карта, которой помощник ещё не знает: рубашка со знаком вопроса */
.kcard.ask::before {
  content: "?"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none;
  font: 700 calc(var(--cw) * .5) / 1 Georgia, serif; color: var(--accent); text-shadow: 0 2px 6px #000c;
}
.kcard.asknow::after {
  opacity: 1; border: 3px solid var(--accent); box-shadow: 0 0 16px #ffc24dcc; animation: pulse 1.2s ease-in-out infinite;
}
/* запомненная карта рубашкой вверх */
.kmem {
  position: absolute; left: 5%; top: 1.5%; z-index: 1; pointer-events: none; white-space: nowrap;
  font: 700 max(9px, calc(var(--cw) * .15)) / 1.2 Georgia, serif; color: #1c1c1c; background: #f6f4efeb;
  border-radius: 4px; padding: 0 .28em; box-shadow: 0 1px 2px #0007;
}
.kmem.red { color: var(--red-suit); }
.kmem[hidden] { display: none; }
.kboard.small .kmem { padding: 0 .18em; }
.kboard .kstock { cursor: pointer; }
.kboard .kstock::before { content: attr(data-label); font-size: calc(var(--cw) * .45); }
.kboard .kstock.pulse { border-color: var(--go); box-shadow: 0 0 18px #5fe39a66; }
.kboard .kstock.pulse.kempty { background: #5fe39a22; }
.kboard .kwaste { border-color: #ffffff17; background: #00000012; }
.kbadge {
  position: absolute; z-index: 300; transform: translate(-50%, -50%); min-width: 22px; padding: 1px 6px; border-radius: 10px;
  background: #0d1110e0; border: 1px solid #ffffff33; color: var(--text); font-size: 12px; font-weight: 650;
  text-align: center; pointer-events: none; font-variant-numeric: tabular-nums;
}
.kbadge[hidden], .knext[hidden] { display: none; }
.knext {
  position: absolute; z-index: 300; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; pointer-events: none;
  font-size: 11.5px; color: #ffffffb0; white-space: nowrap;
}
.knext .cl { font-size: 11.5px; padding: 0 3px; }
.kfix .kcard.kmemo, .kfix .kcard:not(.ask) { cursor: crosshair; }

.step-card.thinking { border-color: var(--line); }
.kspin {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle;
  border: 3px solid #ffffff22; border-top-color: var(--accent); animation: kspin .8s linear infinite;
}
@keyframes kspin { to { transform: rotate(360deg); } }
.kbefore { margin-top: 6px; color: var(--text); }
.kchance { margin-top: 10px; }
.kchance:empty { display: none; }
.kchance-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.kchance-row b { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.kchance .progress { margin: 6px 0 6px; height: 6px; }
.kchance .progress-bar { background: var(--go); }
.kchance-sub { font-size: 12.5px; color: var(--muted); }
.kopts:empty { display: none; }
.kopts { margin-top: 8px; font-size: 13px; }
.kopts-title { color: var(--muted); margin-bottom: 2px; }
.kopts ul { list-style: none; margin: 0; padding: 0; }
.kopts li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.kopts li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.kopts .cl { font-size: 12.5px; padding: 0 3px; }
.kopts .sub { color: #6f7d76; font-size: 12px; }
.kchance + .play-ctrl, .step-auto + .play-ctrl { margin-top: 12px; }
#kStepBlock .play-ctrl { flex-wrap: wrap; }
#kStepBlock .step-text { min-height: 0; }
#kStepBlock .step-text .where { color: var(--accent); font-weight: 650; }
#kStepBlock .step-auto:empty { display: none; }
#kStepBlock .step-auto { margin-top: 6px; line-height: 1.45; }
#kStepBlock kbd { font-family: ui-monospace, Menlo, monospace; background: #ffffff18; border-radius: 4px; padding: 0 5px; }
.kmem-sum { font-size: 14px; }
.kmem-sum .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.kstock-strip:empty { display: none; }
.kstock-title { font-size: 12.5px; color: var(--muted); margin: 10px 0 5px; }
.kchips { display: flex; flex-wrap: wrap; gap: 3px; }
.kchip {
  font: 700 12px/1.5 Georgia, serif; padding: 0 4px; border-radius: 4px; background: #f6f4ef; color: #1c1c1c;
  min-width: 26px; text-align: center;
}
.kchip.red { color: var(--red-suit); }
.kchip.unk { background: #ffffff14; color: var(--muted); font-family: inherit; }
.kchip.waste { opacity: .45; }
.kchip.first { box-shadow: 0 0 0 2px var(--go); }
.move-list li.kundo { color: var(--danger); text-decoration: line-through; text-decoration-color: #ff7a6b99; }
.kstart-note { margin: 10px 0 0; }
.panel-block[hidden] { display: none; }
.kpre { font-size: 14px; color: var(--muted); margin-bottom: 4px; line-height: 1.45; }
.kpre .cl { font-size: 13.5px; }
#kPickBlock .row-btns[hidden] { display: none; }
@media (max-width: 1100px) and (min-width: 961px) {
  .topbar { gap: 12px; }
  .tab { padding: 6px 10px; }
}