/* ─── Паперові океани ─── */

:root {
  --bg-deep: #06263d;
  --bg-mid: #0b3c5d;
  --bg-soft: #12557f;
  --ink: #eaf4fb;
  --ink-dim: #9dbdd4;
  --gold: #f5c518;
  --coral: #ff6b4a;
  --teal: #12c2c9;
  --panel: rgba(4, 26, 43, .62);
  --panel-solid: #0a3149;
  --line: rgba(255, 255, 255, .14);
  --radius: 14px;
  /* базовий розмір карти; масштабується від ширини й висоти вікна */
  --card-w: clamp(60px, min(9vw, 14vh), 124px);
  /* центральні стоси (колода й скиди) — окремий розмір,
     на мобільному вони більші за карти в руці */
  --pile-w: var(--card-w);
  /* під час добору на місці колоди лежать дві карти; ширину під них
     резервуємо завжди, інакше скиди щоразу зсувались би вбік */
  --pair-w: calc(var(--pile-w) * 2 + 6px);
  --piles-gap: clamp(12px, 3vw, 42px);
  --mini-w: clamp(30px, min(4vw, 6vh), 52px);
  --card-h-ratio: 1.396;
  --cards-pad: 0px;        /* вертикальні відступи рядів карт (на мобільному > 0) */
  --card-r: calc(var(--card-w) * 0.09);
  --shadow: 0 10px 24px rgba(0, 0, 0, .38);
  --font: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 20% -10%, #1a6f9c 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 100%, #0e7c86 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  overflow: hidden;
}

button { font: inherit; color: inherit; }

/* ─────────────── каркас ─────────────── */

#app {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(200px, 260px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top" "table side";
  gap: 10px;
  padding: 10px;
  /* запобіжник: якщо стіл не вміщається — сторінка прокручується,
     а блоки не налазять один на одного */
  overflow-y: auto;
}
#app[hidden] { display: none; }

.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 14px;
  min-width: 0;                       /* інакше чипи рахунку розпирають сітку */
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .3px; flex: 0 0 auto; }
.brand-mark { font-size: 20px; }
.brand-text { white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }

.scoreboard {
  display: flex; gap: 8px; min-width: 0;
  /* один рядок із прокруткою — щоб топбар не ріс у висоту при 4 гравцях */
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.scoreboard::-webkit-scrollbar { display: none; }
.score-chip {
  display: flex; align-items: baseline; gap: 6px;
  flex: 0 0 auto;                     /* не стискатись, а прокручуватись */
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  font-size: 13px; white-space: nowrap;
}
.score-chip.active { background: rgba(245, 197, 24, .18); border-color: rgba(245, 197, 24, .5); }
.score-chip b { font-size: 15px; color: var(--gold); }
.score-chip .lvl { font-size: 11px; color: var(--ink-dim); }
.score-chip .goal-inline { display: none; font-size: 12px; color: var(--ink-dim); margin-left: -3px; }
/* позначка, що в колоді є карти доповнення */
.score-chip.ext { font-size: 12px; color: var(--gold); border-color: rgba(245,197,24,.4); }

.table {
  grid-area: table;
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  gap: 10px;
  min-height: 0;
  min-width: 0;
}

.sidebar {
  grid-area: side;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 4px 10px 12px;
  min-height: 0;
}
.sidebar-title { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dim); }
.log {
  list-style: none; margin: 0; padding: 0 8px 0 0;
  overflow-y: auto; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-dim); flex: 1; min-height: 0;
}
.log li { padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.log li.mine { color: var(--ink); }
.log li.head { color: var(--gold); font-weight: 600; }

/* ─────────────── суперники ─────────────── */

.opponents {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  max-height: 24vh; overflow-y: auto; min-width: 0;
}

.opponent {
  flex: 1 1 220px; max-width: 420px; min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  transition: border-color .25s, box-shadow .25s;
}
.opponent.turn { border-color: rgba(245,197,24,.6); box-shadow: 0 0 0 1px rgba(245,197,24,.25), var(--shadow); }
.opponent-head {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  margin-bottom: 6px; min-height: 21px;   /* щоб значок «думає…» не міняв висоту */
}
.opponent-name { font-weight: 650; }
.opponent-meta { margin-left: auto; color: var(--ink-dim); font-size: 12px; display: flex; gap: 8px; }
.opponent-body {
  display: flex; gap: 10px; align-items: flex-start;
  /* висота під один ряд карт — щоб зона суперника не «стрибала» */
  min-height: calc(var(--mini-w) * var(--card-h-ratio));
}
.opponent-hand, .opponent-zone { display: flex; }
.opponent-hand {
  /* ширина не залежить від кількості карт — зона суперника не з'їжджає */
  flex: 0 0 auto;
  width: calc(var(--mini-w) * 1.95);
  min-height: calc(var(--mini-w) * var(--card-h-ratio));
  overflow-x: auto; scrollbar-width: none;
}
.opponent-hand::-webkit-scrollbar { display: none; }
/* зіграні карти суперника — один ряд із прокруткою: висота картки суперника
   стала, скільки б пар він не виклав */
.opponent-zone {
  flex-wrap: nowrap; gap: 2px; min-height: 10px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.opponent-zone::-webkit-scrollbar { display: none; }
.badge-thinking {
  font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: 999px;
  background: rgba(18,194,201,.2); border: 1px solid rgba(18,194,201,.45);
}
.badge-revealed {
  font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: 999px;
  background: rgba(255,107,74,.2); border: 1px solid rgba(255,107,74,.45);
}
/* ефект медузи (доповнення): наступний хід гравця обмежений */
.badge-stunned {
  font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: 999px;
  background: rgba(160,111,192,.28); border: 1px solid rgba(160,111,192,.6);
}

/* ─────────────── центр ─────────────── */

.center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 0; min-width: 0;
}
.center-piles {
  display: grid;
  /* колода посередині: зарезервоване під дві взяті карти місце
     розходиться симетрично, а скиди лишаються обабіч */
  grid-template-columns: var(--pile-w) var(--pair-w) var(--pile-w);
  gap: var(--piles-gap);
  align-items: start; justify-content: center;
  max-width: 100%;
}
#pile-discard-0 { order: 1; }
#pile-deck      { order: 2; }
#pile-discard-1 { order: 3; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; --card-w: var(--pile-w); }
.pile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.pile-count { font-size: 12px; color: var(--ink-dim); }
.pile-slot {
  width: var(--card-w); aspect-ratio: 745 / 1040;
  border-radius: var(--card-r);
  border: 1.5px dashed rgba(255,255,255,.22);
  position: relative;
  display: grid; place-items: center;
}
.pile-slot .card { position: absolute; inset: 0; width: 100%; }

/* дві щойно взяті карти лягають на місце колоди — стіл лишається видимим */
.pile-slot.pair {
  /* та сама висота, що й у звичайного слота — щоб стіл не зсувався */
  width: auto; aspect-ratio: auto;
  height: calc(var(--card-w) * var(--card-h-ratio));
  border-style: solid; border-color: rgba(245,197,24,.55);
  border-radius: calc(var(--card-r) + 4px);
  padding: 5px; display: flex; gap: 8px; place-items: stretch;
  background: rgba(245,197,24,.10);
}
.pile-slot.pair .card { position: static; inset: auto; width: auto; height: 100%; }

/* скид, куди можна покласти другу карту */
.pile-slot.target { border-color: rgba(18,194,201,.85); border-style: solid; }
.drop-here {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  white-space: nowrap; cursor: pointer; z-index: 3;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  background: linear-gradient(180deg, #17b3ba, #0e8c92);
  border: 1px solid rgba(255,255,255,.3); color: var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.drop-here:hover { background: linear-gradient(180deg, #21c8cf, #12a0a6); }

.status {
  min-height: 46px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 14px; color: var(--ink);
  background: rgba(0,0,0,.28); padding: 5px 14px; border-radius: 14px;
  border: 1px solid var(--line);
  /* стала ширина: текст змінюється щохода, а «пігулка» лишається на місці */
  width: min(620px, 100%);
}
.status.warn { border-color: rgba(255,107,74,.55); color: #ffd9cf; }

/* ─────────────── зона гравця ─────────────── */

.me {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px 10px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  /* якщо рука розрослась на кілька рядів — прокручуємо всередині */
  max-height: 56vh; overflow-y: auto;
}
.me.turn { border-color: rgba(245,197,24,.55); box-shadow: 0 0 0 1px rgba(245,197,24,.2); }
.zone-title {
  margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-dim); display: flex; align-items: center; gap: 8px;
}
.hint { color: var(--gold); text-transform: none; letter-spacing: 0; font-size: 12px; }
.cards {
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-width: 0;
  padding: var(--cards-pad) 0;
  min-height: calc(var(--card-w) * var(--card-h-ratio) + var(--cards-pad) * 2);
}
.zone-cards { --card-w: clamp(40px, min(5vw, 7.5vh), 64px); }

.controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 2px; min-height: 40px;
}
.controls-spacer { flex: 1 1 0; min-width: 0; }

/* ─────────────── карти ─────────────── */

.card {
  width: var(--card-w);
  aspect-ratio: 745 / 1040;
  border-radius: var(--card-r);
  background: #123 no-repeat center / cover;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.16);
  position: relative;
  flex: 0 0 auto;
  transition: transform .18s ease, box-shadow .18s ease, outline-color .18s;
  outline: 2px solid transparent; outline-offset: 2px;
}
.card img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
  /* довге натискання на телефоні показує підказку, а не меню «зберегти зображення» */
  -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.card.clickable { cursor: pointer; }
.card.clickable:hover { transform: translateY(-8px); box-shadow: 0 16px 30px rgba(0,0,0,.45); }
.card.selected { outline-color: var(--gold); transform: translateY(-10px); }
.card.pairable { outline-color: rgba(18,194,201,.75); }
.card.dim { filter: brightness(.55) saturate(.7); }
.card.mini { --card-w: var(--mini-w); }
/* дрібні карти (зіграні пари у зонах) — майже без заокруглень */
.card.mini, .zone-cards .card { border-radius: 3px; }
.card.stacked:not(:first-child) { margin-left: calc(var(--card-w) * -0.62); }
.card-tip {
  position: fixed; top: 0; left: 0; z-index: 200;
  background: #04202f; border: 1px solid var(--line); color: var(--ink);
  padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35;
  width: max-content; max-width: 240px; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.card-tip.on { opacity: 1; }
.card-tip b { font-weight: 650; }
.tip-effect { color: var(--ink-dim); }
.tip-effect:empty { display: none; }

/* кількість таких карт у колоді — те саме число, що надруковане
   в нижньому правому куті карти; на мишці показуємо на ховері,
   на тачскрінах — завжди (див. @media (hover: none)) */
.card-count {
  position: absolute; right: 4%; bottom: 3%;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(4, 26, 43, .88); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: clamp(10px, calc(var(--card-w) * 0.14), 15px);
  font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  opacity: 0; transform: translateY(4px);
  transition: opacity .15s, transform .15s; pointer-events: none;
}
.card:hover > .card-count { opacity: 1; transform: none; }

.card-ghost {
  position: fixed; z-index: 90; pointer-events: none;
  border-radius: var(--card-r); box-shadow: 0 18px 40px rgba(0,0,0,.5);
  background: no-repeat center / cover;
}

/* ─────────────── кнопки ─────────────── */

.btn {
  padding: 8px 16px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.09);
  border: 1px solid var(--line);
  transition: background .18s, transform .1s, border-color .18s, opacity .18s;
  font-weight: 600; font-size: 14px;
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #17b3ba, #0e8c92); border-color: rgba(255,255,255,.25); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #21c8cf, #12a0a6); }
.btn.danger { background: linear-gradient(180deg, #ff7d5e, #e0492b); border-color: rgba(255,255,255,.25); }
.btn.danger:hover:not(:disabled) { background: linear-gradient(180deg, #ff8f73, #ef5735); }
.btn.gold { background: linear-gradient(180deg, #ffd75e, #dda600); color: #2b1d00; border-color: rgba(0,0,0,.2); }
.btn.ghost { background: transparent; }
.btn.big { padding: 12px 22px; font-size: 16px; }
.btn.small { padding: 5px 11px; font-size: 12.5px; }
.btn.small.trio { border-color: rgba(245,197,24,.55); background: rgba(245,197,24,.14); }
.link { background: none; border: 0; color: var(--ink-dim); text-decoration: underline; cursor: pointer; font-size: 13px; padding: 6px; }
.build-version { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-dim); opacity: .65; }
.link:hover { color: var(--ink); }

/* ─────────────── екрани та модалки ─────────────── */

.screen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 16px;
  background: rgba(3, 20, 33, .82); backdrop-filter: blur(6px);
  overflow: auto;
}
.screen[hidden] { display: none; }
.screen-card {
  width: min(460px, 100%);
  background: linear-gradient(180deg, #0d4364, #072e46);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.55);
  text-align: center;
}
.screen-title { margin: 0 0 4px; font-size: 26px; }
.screen-sub { margin: 0 0 22px; color: var(--ink-dim); font-size: 14px; }
.field { text-align: left; margin-bottom: 18px; }
.field label, .field-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); margin-bottom: 6px; }
.field-hint { margin: 6px 0 0; font-size: 12px; color: var(--ink-dim); }
.field input[type=text] {
  width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit;
  background: rgba(0,0,0,.3); border: 1px solid var(--line); color: var(--ink);
}
.segmented { display: flex; gap: 6px; }
.segmented button {
  flex: 1; padding: 9px 6px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
  transition: background .18s, border-color .18s;
}
.segmented button.on { background: rgba(18,194,201,.28); border-color: rgba(18,194,201,.65); }
.screen-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* вище за .screen (z-index: 100), інакше правила зі стартового меню
   відкривались би під самим меню */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center; padding: 16px;
  background: rgba(3, 20, 33, .74); backdrop-filter: blur(5px);
  overflow: auto;
}

/* «легка» накладка: панель угорі, стіл лишається видимим і не затемненим —
   потрібно, коли рішення ухвалюється з огляду на власні карти */
.modal-backdrop.light {
  background: transparent; backdrop-filter: none;
  align-items: start; padding-top: 14px;
  pointer-events: none;            /* стіл видно і він не перехоплює кліки панелі */
  overflow: visible;
}
.modal-backdrop.light .modal {
  pointer-events: auto;
  max-height: 52vh; overflow-y: auto;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .62);
}
.modal {
  width: min(760px, 100%);
  background: linear-gradient(180deg, #0d4364, #072e46);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.modal h2 { margin: 0 0 4px; font-size: 20px; }
.modal p.sub { margin: 0 0 16px; color: var(--ink-dim); font-size: 13.5px; }
.modal-choices { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.choice { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.choice .card { --card-w: clamp(96px, 15vw, 140px); }
.pile-browse {
  display: flex; gap: 6px; justify-content: flex-start;
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
}
.pile-browse .card { --card-w: clamp(56px, min(7vw, 13vh), 92px); }
/* омар: п'ять карт мають уміститись без прокрутки навіть на телефоні;
   «safe» — щоб за нестачі місця не обрізало лівий край */
.lobster-browse { justify-content: safe center; }
.lobster-browse .card { --card-w: clamp(48px, min(14vw, 14vh), 110px); }

/* таблиця підрахунку */
.score-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 14px; }
.score-table th, .score-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; }
.score-table th { color: var(--ink-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.score-table td.num, .score-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.score-table tr.me-row { background: rgba(245,197,24,.1); }
.score-table .gain { color: var(--gold); font-weight: 700; }

/* підсумок раунду блоками — лише на телефоні (див. медіа-запит нижче) */
.score-cards { display: none; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.score-card {
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
.score-card.me-row { background: rgba(245,197,24,.1); border-color: rgba(245,197,24,.35); }
.score-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.score-card-name { font-weight: 650; font-size: 14px; }
.score-card-sum { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.score-card-sum .gain { color: var(--gold); font-weight: 700; font-size: 16px; }
.score-card-sum span { color: var(--ink-dim); font-size: 12.5px; }
.score-card-parts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12.5px; }
.score-card-parts .off { color: var(--ink-dim); text-decoration: line-through; opacity: .75; }
.score-card .score-lines { margin-top: 3px; line-height: 1.35; }
.score-lines { color: var(--ink-dim); font-size: 12px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); margin-left: 6px; white-space: nowrap; }
.tag.win { background: rgba(46,204,113,.18); border-color: rgba(46,204,113,.5); }
.tag.lose { background: rgba(255,107,74,.18); border-color: rgba(255,107,74,.5); }

/* правила */
.rules-body {
  max-height: 62vh; overflow-y: auto; font-size: 14px; line-height: 1.6;
  padding: 0 8px 10px 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.rules-body h3 { margin: 16px 0 6px; font-size: 15px; color: var(--gold); }
.rules-body h3:first-child { margin-top: 0; }
.rules-body ul { margin: 6px 0; padding-left: 20px; }
.rules-body li { margin: 3px 0; }
.rules-body table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.rules-body td, .rules-body th { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }

/* ─────────────── адаптив ─────────────── */

/* журнал у топбарі потрібен лише там, де бічної панелі немає */
#btn-log { display: none; }
.log-modal { max-height: 60vh; }

/* ─────────────── планшет ─────────────── */

@media (max-width: 1100px) and (min-width: 761px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "table" "side";
    grid-template-rows: auto 1fr auto;
  }
  /* стала висота: журнал наповнюється по ходу гри, і max-height
     повільно з'їдав би висоту столу, зсуваючи все вгору */
  .sidebar { height: 150px; }
  .scoreboard { font-size: 12px; }
  :root { --pile-w: clamp(90px, min(14vw, 17vh), 150px); }
}

/* ─────────────── телефон: увесь стіл в один екран ─────────────── */

@media (max-width: 760px) {
  html, body { height: 100dvh; overflow: hidden; overscroll-behavior: none; }

  :root {
    /* центральні стоси помітно більші за карти в руці */
    --pile-w: clamp(70px, min(21.5vw, 19dvh), 132px);
    --piles-gap: 8px;
    --card-w: clamp(52px, min(17vw, 13dvh), 86px);
    --zone-w: clamp(34px, min(11vw, 8dvh), 54px);
    --mini-w: clamp(26px, min(8.5vw, 6dvh), 42px);
  }

  #app {
    height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-areas: "top" "table";
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px; padding: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    overflow: hidden;
  }

  /* бічний журнал ховаємо — він доступний кнопкою в топбарі */
  .sidebar { display: none; }
  #btn-log { display: inline-block; }

  .topbar { gap: 8px; padding: 5px 8px; border-radius: 10px; }
  .brand-text { display: none; }
  .brand-mark { font-size: 17px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .btn { padding: 5px 9px; font-size: 12px; border-radius: 8px; }
  .scoreboard {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; gap: 5px; min-width: 0;
  }
  .scoreboard::-webkit-scrollbar { display: none; }
  .score-chip { font-size: 11.5px; padding: 3px 8px; }
  .score-chip b { font-size: 13px; }
  .score-chip .lvl { display: none; }
  /* рахунок ботів і так видно в їхніх картках, а ціль дублюється
     в чипі гравця — у вузькому топбарі лишається тільки «Ви N/35» */
  .score-chip.bot, .score-chip.goal, .score-chip.ext { display: none; }
  .score-chip .goal-inline { display: inline; }

  .table { gap: 6px; grid-template-rows: auto minmax(min-content, 1fr) auto; }

  /* суперники — один компактний ряд із горизонтальною прокруткою */
  .opponents {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    max-height: none; gap: 6px; justify-content: flex-start;
    scrollbar-width: none;
  }
  .opponents::-webkit-scrollbar { display: none; }
  .opponent {
    /* діляться шириною порівну, поки вміщаються; далі ряд прокручується */
    flex: 1 1 130px; min-width: 130px; max-width: none;
    padding: 5px 7px; border-radius: 10px;
  }
  .opponent-head { flex-wrap: nowrap; min-width: 0; }
  .opponent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .opponent-meta { flex: 0 0 auto; white-space: nowrap; }
  .opponent-head { font-size: 11.5px; margin-bottom: 3px; gap: 5px; }
  .opponent-meta { font-size: 10.5px; gap: 5px; }
  .badge-thinking, .badge-revealed { font-size: 9.5px; padding: 0 5px; }
  .opponent-body { gap: 6px; }

  .center { gap: 6px; justify-content: center; }
  .pile-label { font-size: 10px; }
  .pile-count { font-size: 11px; }
  .status {
    /* висота під найдовше повідомлення — щоб рядок не «дихав» */
    min-height: 52px; font-size: 12.5px; padding: 4px 10px;
    border-radius: 10px;
  }

  .me { padding: 6px 8px 7px; border-radius: 10px; gap: 4px; max-height: none; overflow: visible; }
  .zone-title { font-size: 10px; letter-spacing: .06em; }
  .hint { font-size: 11px; }

  /* руки й зони — один ряд із горизонтальною прокруткою:
     висота лишається сталою, скільки б карт не було */
  .cards {
    --cards-pad: 5px;                 /* щоб прокрутка не зрізала обведення вибору */
    gap: 4px; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    padding: var(--cards-pad) 2px;
  }
  .cards::-webkit-scrollbar { display: none; }
  .zone-cards { --card-w: var(--zone-w); }
  /* на дотику картка не піднімається — вибір показуємо лише обведенням */
  .card.selected { transform: none; }

  .controls { gap: 5px; min-height: 34px; }
  .controls .btn { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
  .controls .btn.small { padding: 5px 9px; font-size: 11.5px; }
  .controls-spacer { flex-basis: 100%; height: 0; }
  /* «Завершити хід» натискають найчастіше — на дотику окремим рядком і більша,
     щоб не влучати в СТОП / ОСТАННІЙ ШАНС поруч */
  .controls .btn.end-turn {
    flex: 0 0 100%; padding: 11px 14px; font-size: 14px; margin-top: 1px;
    background: rgba(255,255,255,.14);
  }

  .drop-here { font-size: 11px; padding: 4px 9px; }
  .modal { padding: 14px; border-radius: 14px; }
  .modal h2 { font-size: 17px; }
  .modal p.sub { font-size: 12.5px; margin-bottom: 10px; }
  .modal-backdrop.light .modal { max-height: 44dvh; }
  .score-table { font-size: 12px; }
  .score-table th, .score-table td { padding: 5px 6px; }
  .score-table.round { display: none; }
  .score-cards { display: flex; }
  .card-tip { font-size: 11.5px; max-width: 200px; }
}

/* дуже вузькі екрани */
@media (max-width: 380px) {
  :root {
    --pile-w: clamp(64px, 21vw, 96px);
    --card-w: clamp(46px, 16vw, 68px);
  }
  .opponent { min-width: 118px; }
}

/* телефон горизонтально: висоти замало навіть після стиснення,
   тому тут чесно дозволяємо вертикальну прокрутку — краще, ніж обрізати */
@media (max-height: 560px) and (orientation: landscape) {
  html, body { height: auto; overflow-y: auto; }
  #app {
    height: auto; min-height: 100dvh; overflow: visible;
    grid-template-rows: auto auto;
  }
  :root {
    --pile-w: clamp(58px, 15dvh, 104px);
    --piles-gap: 10px;
    --card-w: clamp(44px, 12dvh, 78px);
    --zone-w: clamp(28px, 7dvh, 46px);
    --mini-w: clamp(24px, 5.5dvh, 38px);
  }
  .topbar { padding: 4px 8px; }
  .topbar-actions .btn { padding: 4px 8px; font-size: 11.5px; }
  .status { min-height: 28px; font-size: 12px; padding: 3px 9px; }
  .zone-title { font-size: 9.5px; }
  .controls { min-height: 30px; }
  .controls .btn { padding: 5px 9px; font-size: 12px; }
  .controls .btn.end-turn { padding: 9px 12px; font-size: 13px; }
  .me { padding: 5px 7px 6px; }
  .opponent-head { font-size: 11px; }
}

@media (hover: none) {
  .card.clickable:hover { transform: none; box-shadow: var(--shadow); }
  /* на дотику ховера немає — кількість карт у колоді показуємо завжди */
  .card-count { opacity: 1; transform: none; transition: none; }
  /* на дрібних картах суперників бейдж закривав би саму карту */
  .card.mini > .card-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}