:root {
  --bg-deep: #101742;
  --panel: rgba(32, 40, 96, 0.9);
  --panel-strong: rgba(39, 47, 110, 0.96);
  --line: rgba(178, 190, 255, 0.22);
  --text: #f9f7ea;
  --muted: #aeb7e5;
  --gold: #ffd467;
  --gold-dark: #a86c18;
  --green: #8ee16d;
  --green-dark: #338a45;
  --red: #ff6d75;
  --blue: #78b9ff;
  --shadow: 0 16px 40px rgba(4, 8, 30, 0.42);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
html { background: var(--bg-deep); }
body {
  color: var(--text);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow-x: hidden;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.page {
  min-height: 100dvh;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 8, 31, 0.02), rgba(5, 8, 31, 0.22));
  z-index: 0;
}
.page--home { background-image: url("/assets/bg-main.png?v=20260712151013"); }
.page--inside { background-image: url("/assets/bg-pages.png?v=20260712151013"); }

.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(46, 55, 124, 0.94), rgba(25, 33, 84, 0.94));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.panel--glass { backdrop-filter: blur(14px); }

.home-screen {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  padding: 0 22px max(18vh, 138px);
}
.play-button {
  position: relative;
  width: min(330px, 82vw);
  min-height: 82px;
  border: 0;
  border-radius: 30px;
  color: #fff8d9;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background:
    linear-gradient(180deg, #aef585 0%, #79d866 48%, #54ad53 49%, #43934b 100%);
  box-shadow:
    0 10px 0 #28693b,
    0 17px 28px rgba(4, 8, 29, 0.48),
    inset 0 3px 0 rgba(255, 255, 255, 0.38),
    inset 0 -4px 0 rgba(18, 85, 43, 0.28);
  border: 4px solid #d6ffa6;
  animation: floatButton 2.7s ease-in-out infinite;
  overflow: hidden;
}
.play-button:active { transform: translateY(5px) scale(0.98); box-shadow: 0 5px 0 #28693b, 0 10px 18px rgba(4, 8, 29, 0.4); }
.play-button__shine {
  position: absolute;
  inset: 5px 10px auto;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  opacity: .75;
}
.play-button__text { position: relative; z-index: 1; font-size: clamp(25px, 6vw, 34px); font-weight: 1000; text-shadow: 0 3px 0 rgba(32, 94, 41, .55); }
.play-button__arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #f8ffdb;
  font-size: 25px;
  text-shadow: 0 2px 0 rgba(25, 81, 42, .5);
}
.home-status { margin: 25px 0 0; color: rgba(240, 243, 255, .72); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 8px #080d2d; }
@keyframes floatButton { 0%,100%{ transform: translateY(0) rotate(-.3deg);} 50%{ transform: translateY(-9px) rotate(.3deg);} }

.app-shell, .table-shell { position: relative; z-index: 1; min-height: 100dvh; }
.app-shell { padding: max(12px, env(safe-area-inset-top)) 14px calc(105px + env(safe-area-inset-bottom)); }
.topbar {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 74px;
  padding: 10px 13px;
  border-radius: 24px;
}
.profile { min-width: 0; display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff7d2;
  font-weight: 1000;
  font-size: 20px;
  background: linear-gradient(145deg, #6aa9ff, #6c4fd6);
  border: 3px solid rgba(255, 238, 147, .9);
  box-shadow: 0 5px 13px rgba(5, 10, 40, .36), inset 0 2px 0 rgba(255,255,255,.26);
  background-size: cover;
  background-position: center;
}
.profile__copy { min-width: 0; display: flex; flex-direction: column; }
.profile__label, .eyebrow { color: var(--muted); font-size: 10px; line-height: 1.2; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; }
.profile__name { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.balance-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  color: #fff2ae;
  background: linear-gradient(180deg, rgba(10, 15, 51, .78), rgba(17, 23, 67, .88));
  border: 1px solid rgba(255, 220, 103, .38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-variant-numeric: tabular-nums;
}
.balance-pill--small { min-height: 38px; font-size: 14px; }
.coin {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff2a5;
  background: linear-gradient(145deg, #ffe682, #d58a1f);
  border: 2px solid #fff0a2;
  box-shadow: inset 0 -2px 0 rgba(121, 66, 9, .35), 0 2px 5px rgba(0,0,0,.22);
  font-size: 10px;
}

.lobby-content { padding: 26px 2px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 5px 14px; }
.section-heading h1, .modal-card h2, .waiting-view h1, .confirm-card h2 { margin: 4px 0 0; font-size: clamp(24px, 7vw, 34px); line-height: 1.05; text-shadow: 0 3px 10px rgba(4,8,35,.4); }
.online-dot { display: flex; align-items: center; gap: 7px; color: #bce9c1; font-size: 12px; font-weight: 900; }
.online-dot span { width: 9px; height: 9px; border-radius: 50%; background: #79e281; box-shadow: 0 0 0 5px rgba(121,226,129,.12), 0 0 10px rgba(121,226,129,.6); }
.rooms-list { display: grid; gap: 12px; }
.room-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border-radius: 23px;
  overflow: hidden;
}
.room-card::after { content:""; position:absolute; right:-22px; top:-28px; width:100px; height:100px; border-radius:50%; background:rgba(121,137,255,.12); }
.room-card__main { min-width: 0; position: relative; z-index: 1; }
.room-card__owner { display: flex; align-items: center; gap: 9px; min-width: 0; }
.room-card__owner .avatar { width: 38px; height: 38px; border-width: 2px; font-size: 15px; }
.room-card__title { min-width: 0; }
.room-card__title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.room-card__title span { color: var(--muted); font-size: 11px; }
.room-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag { padding: 6px 9px; border-radius: 999px; color: #e9ecff; background: rgba(8, 13, 48, .45); border: 1px solid rgba(255,255,255,.08); font-size: 11px; font-weight: 900; }
.tag--gold { color: #ffe99c; border-color: rgba(255,221,98,.25); }
.join-button, .button, .exit-button, .create-fab, .icon-button, .player-count button {
  border: 0;
  cursor: pointer;
  color: inherit;
}
.join-button {
  position: relative;
  z-index: 1;
  min-width: 88px;
  min-height: 48px;
  border-radius: 17px;
  color: #fff7dd;
  font-weight: 1000;
  background: linear-gradient(180deg, #83d9ff, #4786db);
  box-shadow: 0 5px 0 #285ba3, inset 0 2px 0 rgba(255,255,255,.3);
}
.join-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #285ba3; }
.empty-state { text-align: center; padding: 34px 24px; border-radius: 27px; }
.empty-state__icon { width: 72px; height: 72px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 24px; color: #ffe589; background: rgba(7,12,49,.4); border: 1px solid rgba(255,229,137,.2); font-size: 36px; transform: rotate(-8deg); }
.empty-state h2 { margin: 0 0 8px; }
.empty-state p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 14px; }
.create-fab {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 30;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(330px, calc(100vw - 34px));
  min-height: 64px;
  border-radius: 23px;
  color: #fff8db;
  font-weight: 1000;
  font-size: 18px;
  background: linear-gradient(180deg, #99ea76, #4eaa53);
  border: 3px solid #d9ffad;
  box-shadow: 0 8px 0 #2e7140, 0 14px 25px rgba(5,9,32,.46), inset 0 2px 0 rgba(255,255,255,.34);
}
.create-fab:active { transform: translate(-50%, 4px); box-shadow: 0 4px 0 #2e7140, 0 10px 18px rgba(5,9,32,.4); }
.create-fab__plus { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: rgba(23,104,47,.35); font-size: 25px; }

.modal-backdrop, .confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(5, 8, 29, .72);
  backdrop-filter: blur(8px);
}
.modal-card { width: min(560px, 100%); border-radius: 29px 29px 22px 22px; padding: 12px 16px 18px; animation: slideUp .24s ease-out; }
.modal-card__handle { width: 54px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: rgba(255,255,255,.22); }
.modal-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.icon-button { width: 42px; height: 42px; border-radius: 14px; color: #dce1ff; background: rgba(6,11,43,.38); font-size: 28px; }
.option-group { margin: 18px 0 0; padding: 0; border: 0; }
.option-group legend { margin-bottom: 9px; color: #e8ebff; font-weight: 1000; font-size: 14px; }
.segmented { display: grid; gap: 8px; }
.segmented--three { grid-template-columns: repeat(3, 1fr); }
.segmented--two { grid-template-columns: repeat(2, 1fr); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #bec6ef;
  font-weight: 1000;
  background: rgba(8,13,50,.42);
  border: 1px solid rgba(255,255,255,.08);
  transition: .15s ease;
}
.segmented input:checked + span { color: #fff7c8; background: linear-gradient(180deg, rgba(100,132,255,.72), rgba(64,79,174,.8)); border-color: rgba(255,238,151,.45); box-shadow: inset 0 2px 0 rgba(255,255,255,.16), 0 5px 12px rgba(6,10,38,.25); }
.player-count { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.player-count button { min-height: 45px; border-radius: 15px; color: #bec6ef; font-weight: 1000; background: rgba(8,13,50,.42); border: 1px solid rgba(255,255,255,.08); }
.player-count button.is-active { color: #fff7c8; background: linear-gradient(180deg, #718cf5, #4b5cba); border-color: rgba(255,238,151,.5); }
.player-count button:disabled { opacity: .3; cursor: not-allowed; }
.field-hint { min-height: 16px; margin: 8px 2px 0; color: #aab4e2; font-size: 11px; }
.form-error { min-height: 18px; margin: 11px 2px 0; color: #ffabb1; font-size: 12px; font-weight: 800; }
.modal-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; margin-top: 11px; }
.button { min-height: 52px; border-radius: 17px; font-weight: 1000; }
.button--ghost { background: rgba(7,12,45,.42); color: #d6dcff; border: 1px solid rgba(255,255,255,.1); }
.button--primary { color: #fff8d9; background: linear-gradient(180deg, #94e875, #4ba64f); box-shadow: 0 5px 0 #2e723d, inset 0 2px 0 rgba(255,255,255,.3); }
.button--danger { color: #fff1ee; background: linear-gradient(180deg, #ff8c83, #d64a5c); box-shadow: 0 5px 0 #913141, inset 0 2px 0 rgba(255,255,255,.25); }
@keyframes slideUp { from { transform: translateY(35px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.table-shell { padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
.table-topbar { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; }
.exit-button { justify-self: start; min-height: 42px; padding: 0 14px; border-radius: 15px; color: #f4f1ff; font-weight: 1000; background: rgba(19,27,77,.84); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 4px 10px rgba(3,7,27,.25); }
.table-badge { justify-self: center; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffeaa0; font-size: 12px; font-weight: 1000; text-transform: uppercase; letter-spacing: .08em; }
.table-topbar .balance-pill { justify-self: end; }
.game-area { position: relative; min-height: calc(100dvh - 78px); padding-top: 16px; }
.game-board { min-height: min(52dvh, 500px); display: grid; place-items: center; border-radius: 36px; padding: 22px 16px; overflow: hidden; position: relative; }
.game-board::before { content:""; position:absolute; inset:13px; border:1px dashed rgba(179,192,255,.18); border-radius:28px; pointer-events:none; }
.waiting-view { position: relative; z-index: 1; text-align: center; max-width: 380px; }
.waiting-view p { color: var(--muted); line-height: 1.5; margin: 10px 0 0; }
.waiting-cards { height: 94px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px; }
.waiting-cards span { width: 58px; height: 78px; display: grid; place-items: center; border-radius: 12px; color: #273064; background: linear-gradient(150deg,#fff9e4,#e7d9b5); border: 4px solid #c7a154; box-shadow: 0 7px 13px rgba(4,7,25,.34); font-size: 34px; margin: 0 -6px; }
.waiting-cards span:nth-child(1){ transform:rotate(-12deg) translateY(5px); }
.waiting-cards span:nth-child(2){ color:#c03950; transform:translateY(-7px); }
.waiting-cards span:nth-child(3){ color:#c03950; transform:rotate(12deg) translateY(5px); }
.loading-dots { display:flex; justify-content:center; gap:7px; margin-top:18px; }
.loading-dots i { width:9px; height:9px; border-radius:50%; background:#91a3ff; animation:dot 1.15s infinite ease-in-out; }
.loading-dots i:nth-child(2){animation-delay:.14s}.loading-dots i:nth-child(3){animation-delay:.28s}
@keyframes dot { 0%,80%,100%{ transform:scale(.65); opacity:.45;} 40%{ transform:scale(1); opacity:1;} }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.seat { min-width: 0; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 5px; border-radius: 19px; background: rgba(22,30,83,.68); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 18px rgba(5,8,30,.2); }
.seat .avatar { width: 42px; height: 42px; font-size: 14px; border-width: 2px; }
.seat__name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:900; }
.seat--empty { color:#7f8bbd; border-style:dashed; }
.seat--empty .seat-empty-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(6,11,43,.26); font-size:21px; }
.owner-crown { position:absolute; margin:-34px 0 0 30px; color:#ffe27a; font-size:14px; transform:rotate(10deg); }
.playing-view { position: relative; z-index: 1; width: 100%; align-self: stretch; display: flex; flex-direction: column; }
.game-info-row { display:grid; grid-template-columns:64px 1fr 64px; align-items:center; gap:10px; }
.deck-stack, .trump-card { height:82px; border-radius:12px; display:grid; place-items:center; box-shadow:0 7px 13px rgba(4,7,25,.34); }
.deck-stack { color:#fff; font-weight:1000; background:repeating-linear-gradient(45deg,#233474 0 7px,#324b9d 7px 14px); border:4px solid #d2b564; transform:rotate(-3deg); }
.trump-card { color:#c8324c; font-size:34px; background:linear-gradient(150deg,#fff9e4,#e7d9b5); border:4px solid #c7a154; transform:rotate(5deg); }
.turn-banner { min-width:0; text-align:center; color:#fff1a3; font-size:13px; font-weight:1000; }
.battlefield { flex:1; min-height:250px; margin-top:14px; border-radius:25px; display:grid; place-items:center; background:radial-gradient(circle at center,rgba(88,104,188,.24),rgba(8,13,46,.1)); border:1px dashed rgba(179,192,255,.18); }
.battlefield__hint { color:#8f9bca; font-size:12px; }
.my-hand { position: relative; z-index: 15; display:flex; justify-content:center; align-items:flex-end; min-height:120px; margin-top:-36px; padding:0 15px 6px; overflow:visible; }
.card { width:63px; height:94px; flex:0 0 auto; margin-left:-17px; padding:7px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; border-radius:10px; color:#22273f; background:linear-gradient(150deg,#fffdf0,#e7dcc2); border:3px solid #c8a457; box-shadow:0 8px 14px rgba(4,7,25,.4); font-weight:1000; }
.card:first-child{margin-left:0}.card:nth-child(odd){transform:translateY(4px) rotate(-2deg)}.card:nth-child(even){transform:translateY(-2px) rotate(2deg)}
.card--red{color:#c4314a}.card__rank{font-size:17px;line-height:1}.card__suit{font-size:24px;align-self:center;margin-top:8px}
.confirm-backdrop { align-items: center; }
.confirm-card { width:min(390px,100%); padding:24px 18px 18px; border-radius:27px; text-align:center; }
.confirm-card__icon { width:58px; height:58px; margin:0 auto 12px; display:grid; place-items:center; border-radius:20px; color:#17204d; background:linear-gradient(145deg,#fff099,#e2a834); border:3px solid #fff5b6; font-size:31px; font-weight:1000; transform:rotate(-5deg); }
.confirm-card p { color:var(--muted); line-height:1.45; }
.toast { position:fixed; left:50%; bottom:max(92px,calc(env(safe-area-inset-bottom) + 76px)); z-index:200; transform:translateX(-50%); max-width:calc(100vw - 30px); padding:11px 15px; border-radius:14px; color:#fff; background:rgba(10,15,48,.94); border:1px solid rgba(255,255,255,.13); box-shadow:0 10px 24px rgba(3,6,25,.35); font-size:13px; font-weight:800; text-align:center; }

@media (min-width: 700px) {
  .app-shell { max-width: 760px; margin: 0 auto; }
  .table-shell { max-width: 900px; margin: 0 auto; }
  .modal-backdrop { align-items: center; }
  .modal-card { border-radius: 29px; }
  .rooms-list { grid-template-columns: 1fr 1fr; }
  .game-board { min-height: 560px; }
  .seats { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 370px) {
  .profile__name { max-width: 38vw; font-size: 14px; }
  .balance-pill { padding-right: 10px; font-size: 13px; }
  .room-card { grid-template-columns: 1fr; }
  .join-button { width: 100%; }
  .modal-card { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Полный игровой стол */
.turn-box { min-width:0; text-align:center; }
.round-label, .attack-limit { display:block; color:#aeb8e8; font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.turn-banner { margin:3px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trump-card { position:relative; grid-template-columns:1fr; grid-template-rows:auto auto; align-content:center; line-height:1; }
.trump-card b { font-size:17px; }
.trump-card span { font-size:32px; margin-top:3px; }
.trump-card.card--red { color:#c8324c; }
.deck-stack span { display:grid; place-items:center; min-width:34px; min-height:34px; border-radius:50%; background:rgba(7,12,45,.36); }

.battlefield { display:block; padding:13px 8px; overflow:auto; scrollbar-width:none; }
.battlefield::-webkit-scrollbar { display:none; }
.battlefield__hint { min-height:220px; display:grid; place-items:center; text-align:center; }
.card-pairs { min-height:220px; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:12px 7px; padding:8px 2px; }
.card-pair { position:relative; width:100px; height:126px; padding:0; border:0; border-radius:17px; background:transparent; cursor:pointer; transition:transform .15s ease, filter .15s ease; }
.card-pair:not(:disabled):active { transform:scale(.96); }
.card-pair.is-selected { filter:drop-shadow(0 0 8px rgba(255,225,102,.85)); }
.card-pair.can-target:not(:disabled) { animation:targetPulse 1.25s ease-in-out infinite; }
.card-pair .card { position:absolute; width:60px; height:88px; margin:0; pointer-events:none; transform:none; }
.card-pair .card--attack { left:6px; top:25px; transform:rotate(-7deg); }
.card-pair .card--defense { right:5px; top:4px; transform:rotate(8deg); z-index:2; }
.defense-slot { position:absolute; right:5px; top:4px; z-index:1; width:60px; height:88px; display:grid; place-items:center; border-radius:10px; color:rgba(195,204,255,.4); border:2px dashed rgba(195,204,255,.25); background:rgba(8,13,48,.2); font-size:25px; font-weight:1000; }
.card-pair.is-selected .defense-slot { color:#ffe27a; border-color:#ffe27a; background:rgba(255,226,122,.08); }
@keyframes targetPulse { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }

.card { position:relative; cursor:default; }
.card__corner { display:flex; flex-direction:column; align-items:center; line-height:.85; }
.card__corner i { margin-top:3px; font-style:normal; font-size:14px; }
.card__suit { position:absolute; left:50%; top:50%; margin:0; transform:translate(-50%,-42%); font-size:30px; }
.my-hand { min-height:128px; padding-top:12px; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; scroll-snap-type:x proximity; }
.my-hand::-webkit-scrollbar { display:none; }
.my-hand .card { appearance:none; min-width:66px; width:66px; height:99px; padding:7px; border:3px solid #c8a457; scroll-snap-align:center; transition:transform .16s ease, filter .16s ease, opacity .16s ease; }
.my-hand .card:first-child { margin-left:auto; }
.my-hand .card:last-child { margin-right:auto; }
.my-hand .card:nth-child(odd), .my-hand .card:nth-child(even) { transform:translateY(7px); }
.my-hand .card--playable { cursor:pointer; filter:brightness(1.07); }
.my-hand .card--playable:hover, .my-hand .card--playable:active { transform:translateY(-5px); z-index:20; }
.my-hand .card--disabled { opacity:.58; filter:saturate(.72); }
.my-hand .card--transfer::after { content:"↪"; position:absolute; right:-5px; top:-8px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff9cc; background:#5489e6; border:2px solid #d7e7ff; box-shadow:0 3px 8px rgba(4,8,30,.35); font-size:14px; }
.my-hand .card.is-selected { transform:translateY(-10px) !important; z-index:25; box-shadow:0 0 0 3px #ffe477,0 10px 20px rgba(4,7,25,.48); }
.my-hand .card:disabled { cursor:default; }

.game-actions { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.action-hint { min-height:34px; display:flex; align-items:center; justify-content:center; padding:0 8px; color:#c5cdf3; font-size:12px; font-weight:800; line-height:1.35; text-align:center; }
.action-buttons { display:flex; justify-content:center; gap:9px; margin-top:8px; }
.game-button { min-width:116px; min-height:45px; padding:0 17px; border:0; border-radius:16px; color:#fff9e8; font-weight:1000; cursor:pointer; box-shadow:0 5px 0 rgba(4,8,30,.35),inset 0 2px 0 rgba(255,255,255,.27); }
.game-button:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(4,8,30,.35); }
.game-button--take { background:linear-gradient(180deg,#ff9a82,#d95261); }
.game-button--done { background:linear-gradient(180deg,#96e978,#4ca952); }

.seat { position:relative; transition:border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.seat__avatar-wrap { position:relative; }
.hand-count { position:absolute; right:-8px; bottom:-3px; min-width:24px; height:24px; display:grid; place-items:center; padding:0 5px; border-radius:12px; color:#fff8d8; background:#202b71; border:2px solid #91a5ff; box-shadow:0 3px 7px rgba(4,8,30,.35); font-size:11px; font-weight:1000; }
.seat-status { position:absolute; top:-7px; left:50%; z-index:3; transform:translateX(-50%); max-width:90%; padding:3px 7px; border-radius:999px; white-space:nowrap; color:#fff; font-size:8px; font-weight:1000; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 3px 8px rgba(4,8,30,.3); }
.seat-status--attacker { background:#4ca956; }
.seat-status--defender { background:#4e83d7; }
.seat-status--place { color:#372a06; background:#f3cf5c; }
.seat-status--loser { background:#d64858; }
.seat--attacker { border-color:rgba(123,232,125,.65); box-shadow:0 0 0 2px rgba(82,181,91,.17),0 8px 18px rgba(5,8,30,.2); }
.seat--defender { border-color:rgba(115,176,255,.65); box-shadow:0 0 0 2px rgba(82,127,213,.17),0 8px 18px rgba(5,8,30,.2); }
.seat--finished { border-color:rgba(255,220,101,.5); }
.seat--loser { border-color:rgba(255,103,116,.65); }
.seat--left { opacity:.55; filter:grayscale(.55); }

.result-backdrop { z-index:130; align-items:center; }
.result-card { width:min(390px,100%); padding:28px 20px 20px; border-radius:30px; text-align:center; animation:resultPop .28s ease-out; }
.result-card__icon { width:80px; height:80px; margin:0 auto 13px; display:grid; place-items:center; border-radius:27px; background:linear-gradient(145deg,#fff0a0,#df9f31); border:4px solid #fff6c6; box-shadow:0 9px 20px rgba(4,8,30,.37),inset 0 2px 0 rgba(255,255,255,.45); font-size:43px; transform:rotate(-4deg); }
.result-card h2 { margin:8px 0 7px; font-size:25px; }
.result-card p { margin:0; color:var(--muted); line-height:1.5; }
.result-button { width:100%; margin-top:20px; }
@keyframes resultPop { from{transform:scale(.82);opacity:0} to{transform:scale(1);opacity:1} }

@media (max-width: 430px) {
  .table-shell { padding-left:8px; padding-right:8px; }
  .game-area { padding-top:10px; }
  .game-board { min-height:47dvh; padding:14px 8px; border-radius:28px; }
  .game-board::before { inset:8px; border-radius:22px; }
  .game-info-row { grid-template-columns:54px 1fr 54px; gap:6px; }
  .deck-stack, .trump-card { height:72px; }
  .turn-banner { font-size:11px; }
  .battlefield { min-height:218px; margin-top:8px; }
  .card-pairs { min-height:190px; gap:5px 1px; }
  .card-pair { width:88px; height:115px; }
  .card-pair .card, .defense-slot { width:56px; height:83px; }
  .seats { margin-top:8px; }
  .seat { min-height:78px; }
  .seat .avatar { width:38px; height:38px; }
  .my-hand { margin-top:-24px; min-height:118px; padding-left:4px; padding-right:4px; }
  .my-hand .card { min-width:62px; width:62px; height:94px; margin-left:-18px; }
}

/* v0.2.1: понятное состояние соединения и защита от «молчаливых» кнопок */
.online-dot[data-state="connecting"] { color: #ffe3a0; }
.online-dot[data-state="connecting"] span {
  background: #ffc85f;
  box-shadow: 0 0 0 5px rgba(255,200,95,.12), 0 0 10px rgba(255,200,95,.55);
  animation: connectionPulse 1.1s ease-in-out infinite;
}
.online-dot[data-state="offline"] { color: #ffb2ba; }
.online-dot[data-state="offline"] span {
  background: #ff6d7b;
  box-shadow: 0 0 0 5px rgba(255,109,123,.12), 0 0 10px rgba(255,109,123,.5);
}
button:disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: saturate(.7);
}
@keyframes connectionPulse {
  50% { transform: scale(.72); opacity: .55; }
}

/* v0.2.6 — мобильный игровой стол: игрок снизу, соперники сверху, свайп руки */
.page--table {
  overflow: hidden;
  background-position: center;
}
.page--table::before {
  background: linear-gradient(180deg, rgba(8, 10, 54, .08), rgba(7, 9, 43, .2));
}
.page--table .table-shell {
  width: min(100%, 980px);
  height: 100dvh;
  min-height: 620px;
  margin: 0 auto;
  padding: max(7px, env(safe-area-inset-top)) 7px max(7px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
.page--table .table-topbar {
  flex: 0 0 50px;
  min-height: 50px;
  padding: 0 3px;
  grid-template-columns: 54px 1fr auto;
}
.page--table .exit-button--icon {
  width: 45px;
  min-height: 42px;
  padding: 0;
  border-radius: 15px;
  font-size: 25px;
  line-height: 1;
}
.page--table .table-badge {
  max-width: none;
  justify-self: center;
  padding: 8px 14px;
  border-radius: 999px;
  color: #f4f2ff;
  background: rgba(19, 27, 80, .66);
  border: 1px solid rgba(177, 187, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 11px;
  letter-spacing: .04em;
}
.page--table .balance-pill--small {
  min-height: 38px;
  padding: 0 11px 0 7px;
}
.page--table .game-area {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 5px 0 0;
}
.page--table .game-board {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 555px;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(169, 181, 255, .18);
  border-radius: 31px;
  background:
    radial-gradient(circle at 50% 46%, rgba(83, 96, 192, .2), transparent 47%),
    linear-gradient(180deg, rgba(28, 36, 101, .28), rgba(14, 20, 70, .24));
  box-shadow: 0 14px 34px rgba(4, 7, 31, .28), inset 0 1px 0 rgba(255,255,255,.06);
}
.page--table .game-board::before {
  display: none;
}
.page--table .table-felt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,.028) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 62%, rgba(255,255,255,.022) 0 2px, transparent 3px);
  background-size: 17px 17px, 21px 21px;
}

/* Позиции участников вокруг верхней части стола */
.page--table .opponent-seats {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}
.page--table .seat {
  position: absolute;
  width: 76px;
  min-height: 66px;
  padding: 0;
  gap: 2px;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}
.page--table .seat-pos--top { left: 50%; top: 75px; }
.page--table .seat-pos--upper-left { left: 27%; top: 111px; }
.page--table .seat-pos--upper-right { left: 73%; top: 111px; }
.page--table .seat-pos--left { left: 10%; top: 184px; }
.page--table .seat-pos--right { left: 90%; top: 184px; }
.page--table .seat__avatar-wrap {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
}
.page--table .seat .avatar {
  position: relative;
  z-index: 3;
  width: 43px;
  height: 43px;
  font-size: 13px;
  border-width: 2px;
  border-color: rgba(255, 235, 142, .86);
  box-shadow: 0 5px 13px rgba(4, 7, 31, .42), inset 0 1px 0 rgba(255,255,255,.25);
}
.page--table .seat__name {
  max-width: 76px;
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #f7f5ff;
  background: rgba(20, 27, 79, .85);
  border: 1px solid rgba(172, 184, 255, .18);
  box-shadow: 0 4px 9px rgba(4, 7, 30, .24);
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
}
.page--table .seat-status {
  top: -11px;
  z-index: 6;
  max-width: 92px;
  padding: 3px 6px;
  font-size: 7px;
}
.page--table .hand-count {
  right: -5px;
  bottom: -3px;
  z-index: 6;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 10px;
}
.page--table .owner-crown {
  z-index: 7;
  margin: -39px 0 0 31px;
  font-size: 14px;
}
.page--table .opponent-card-fan {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 54px;
  height: 45px;
  transform: translateX(-50%);
  z-index: 1;
}
.page--table .opponent-card-fan i {
  position: absolute;
  left: 18px;
  top: 0;
  width: 25px;
  height: 35px;
  border-radius: 5px;
  background: repeating-linear-gradient(45deg, #334ba0 0 4px, #233574 4px 8px);
  border: 2px solid #d6c07b;
  box-shadow: 0 3px 7px rgba(4,7,25,.28);
}
.page--table .opponent-card-fan i:nth-child(1) { transform: rotate(-17deg) translateX(-7px); }
.page--table .opponent-card-fan i:nth-child(2) { transform: rotate(0deg); }
.page--table .opponent-card-fan i:nth-child(3) { transform: rotate(17deg) translateX(7px); }
.page--table .seat--empty {
  opacity: .48;
}
.page--table .seat--empty .seat-empty-icon {
  width: 40px;
  height: 40px;
  color: #8d99ce;
  border: 1px dashed rgba(166, 178, 239, .38);
  background: rgba(9, 14, 53, .26);
  font-size: 20px;
}
.page--table .seat--attacker .avatar {
  border-color: #8df080;
  box-shadow: 0 0 0 4px rgba(90, 213, 100, .13), 0 0 18px rgba(92, 224, 104, .38);
}
.page--table .seat--defender .avatar {
  border-color: #85c0ff;
  box-shadow: 0 0 0 4px rgba(84, 146, 224, .13), 0 0 18px rgba(92, 161, 244, .38);
}

/* Локальный игрок всегда снизу */
.page--table .local-player {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 35;
  width: min(330px, calc(100% - 36px));
  min-height: 57px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 6px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(38, 48, 119, .94), rgba(20, 27, 78, .96));
  border: 1px solid rgba(177, 189, 255, .23);
  box-shadow: 0 8px 22px rgba(3, 6, 27, .42), inset 0 1px 0 rgba(255,255,255,.1);
}
.page--table .local-player__avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}
.page--table .local-player .avatar--local {
  width: 48px;
  height: 48px;
  border: 3px solid #95ed72;
  box-shadow: 0 0 0 4px rgba(106, 222, 91, .13), 0 5px 14px rgba(3,6,26,.37);
}
.page--table .local-owner-crown {
  position: absolute;
  right: -5px;
  top: -8px;
  z-index: 3;
  color: #ffe36c;
  font-size: 17px;
  transform: rotate(14deg);
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.page--table .local-player__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.page--table .local-player__copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.page--table .local-turn {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #cfd7ff;
  background: rgba(7, 12, 48, .44);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.page--table .local-turn i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8c96bf;
}
.page--table .local-turn--active { color: #caffac; }
.page--table .local-turn--active i { background: #83e85e; box-shadow: 0 0 8px rgba(131,232,94,.8); }
.page--table .local-turn--defender { color: #bfe1ff; }
.page--table .local-turn--defender i { background: #65aef4; box-shadow: 0 0 8px rgba(101,174,244,.7); }
.page--table .local-turn--finished { color: #ffe69a; }
.page--table .local-hand-count {
  min-width: 48px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 9px;
  border-radius: 13px;
  color: #fff4bc;
  background: rgba(75, 66, 170, .72);
  border: 1px solid rgba(189, 182, 255, .24);
  font-size: 14px;
  font-weight: 1000;
}
.page--table .local-hand-count i { font-style: normal; font-size: 16px; }
.page--table .local-player__placeholder {
  grid-column: 1 / -1;
  color: #aeb7e5;
  font-size: 11px;
  text-align: center;
}

/* Центральная зона стола */
.page--table .playing-view {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
}
.page--table .table-status-strip {
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 14;
  width: min(330px, 64%);
  min-height: 34px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #dfe4ff;
  background: rgba(17, 24, 73, .72);
  border: 1px solid rgba(174, 186, 255, .17);
  box-shadow: 0 5px 13px rgba(3,6,28,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.page--table .table-status-strip .round-label,
.page--table .table-status-strip .attack-limit {
  color: #aeb8e8;
  font-size: 8px;
  white-space: nowrap;
}
.page--table .table-status-strip .turn-banner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff2ad;
  font-size: 10px;
}
.page--table .table-surface {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 155px;
  bottom: 218px;
  min-height: 235px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 50%, rgba(75, 93, 187, .18), rgba(13, 20, 67, .04) 67%),
    rgba(14, 21, 72, .12);
  border: 1px solid rgba(173, 185, 255, .09);
  box-shadow: inset 0 0 38px rgba(9, 14, 52, .18);
}
.page--table .deck-zone {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 8;
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.page--table .deck-cluster {
  position: relative;
  width: 80px;
  height: 84px;
}
.page--table .deck-stack,
.page--table .trump-card {
  position: absolute;
  width: 51px;
  height: 73px;
  border-radius: 9px;
  box-shadow: 0 7px 13px rgba(4,7,25,.36);
}
.page--table .deck-stack {
  left: 4px;
  top: 2px;
  z-index: 3;
  transform: rotate(-4deg);
  border: 3px solid #d6c27f;
}
.page--table .deck-stack::before,
.page--table .deck-stack::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 9px;
  background: repeating-linear-gradient(45deg,#233474 0 5px,#324b9d 5px 10px);
  border: 2px solid #c7b36f;
}
.page--table .deck-stack::before { transform: translate(-4px, 3px) rotate(-2deg); }
.page--table .deck-stack::after { transform: translate(-7px, 6px) rotate(-4deg); }
.page--table .deck-count {
  min-width: 29px;
  min-height: 29px;
  font-size: 11px;
}
.page--table .trump-card {
  right: 2px;
  top: 8px;
  z-index: 2;
  transform: rotate(8deg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 7px;
  color: #20263c;
  background: linear-gradient(150deg,#fffdf1,#e8dcc2);
  border: 3px solid #c8a457;
}
.page--table .trump-card b { font-size: 15px; }
.page--table .trump-card span { align-self: center; margin-top: 8px; font-size: 25px; }
.page--table .trump-card.card--red { color: #c8324c; }
.page--table .trump-label {
  padding: 3px 8px;
  border-radius: 999px;
  color: #dce2ff;
  background: rgba(12, 18, 61, .68);
  border: 1px solid rgba(174, 186, 255, .15);
  font-size: 9px;
  font-weight: 900;
}
.page--table .trump-label b { font-size: 12px; }
.page--table .battlefield {
  position: absolute;
  inset: 0;
  min-height: 0;
  margin: 0;
  padding: 83px 7px 50px 76px;
  display: block;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-width: none;
}
.page--table .battlefield__hint {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 10px;
  color: rgba(190, 199, 240, .64);
  font-size: 11px;
  text-align: center;
}
.page--table .card-pairs {
  min-height: 100%;
  padding: 0;
  gap: 7px 2px;
  align-content: center;
}
.page--table .card-pair {
  width: 86px;
  height: 108px;
}
.page--table .card-pair .card,
.page--table .defense-slot {
  width: 55px;
  height: 81px;
}
.page--table .card-pair .card--attack { left: 5px; top: 22px; }
.page--table .card-pair .card--defense,
.page--table .defense-slot { right: 4px; top: 2px; }
.page--table .turn-helper {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 9;
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  color: #cbd3f5;
  background: rgba(10, 16, 56, .72);
  border: 1px solid rgba(174, 186, 255, .12);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page--table .context-actions {
  position: absolute;
  right: 8px;
  bottom: 37px;
  z-index: 15;
  display: flex;
  gap: 7px;
}
.page--table .context-button {
  min-width: 86px;
  min-height: 39px;
  padding: 0 14px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 15px;
  color: #fffbea;
  font-size: 12px;
  font-weight: 1000;
  box-shadow: 0 5px 0 rgba(4,8,30,.32), inset 0 2px 0 rgba(255,255,255,.22);
  animation: contextualActionIn .18s ease-out;
}
.page--table .context-button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(4,8,30,.32); }
.page--table .context-button--take { background: linear-gradient(180deg, #ff9c82, #d75161); }
.page--table .context-button--done { background: linear-gradient(180deg, #9ae97b, #4ba651); }
@keyframes contextualActionIn { from { transform: translateY(8px) scale(.93); opacity: 0; } }

/* Рука: веер, выбор карты и горизонтальный свайп */
.page--table .my-hand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 59px;
  z-index: 27;
  height: 174px;
  min-height: 0;
  margin: 0;
  padding: 24px 0 3px;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.page--table .my-hand.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.page--table .my-hand::-webkit-scrollbar { display: none; }
.page--table .hand-track {
  width: max-content;
  min-width: 100%;
  height: 145px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 7px max(34px, calc(50% - 45px)) 10px;
}
.page--table .my-hand .card {
  --lift: 0px;
  appearance: none;
  position: relative;
  z-index: calc(10 + var(--card-order));
  min-width: clamp(70px, 18vw, 94px);
  width: clamp(70px, 18vw, 94px);
  height: clamp(105px, 27vw, 141px);
  margin-left: clamp(-30px, -6.4vw, -20px);
  padding: 8px;
  border: 3px solid #c9ad68;
  border-radius: 12px;
  transform-origin: 50% 112%;
  transform: translateY(calc(var(--fan-y) - var(--lift))) rotate(var(--fan-angle));
  scroll-snap-align: center;
  transition: transform .17s ease, filter .17s ease, opacity .17s ease, box-shadow .17s ease;
  box-shadow: 0 9px 17px rgba(4, 7, 27, .45), inset 0 1px 0 rgba(255,255,255,.65);
}
.page--table .my-hand .card:first-child { margin-left: 0; }
.page--table .my-hand .card:nth-child(odd),
.page--table .my-hand .card:nth-child(even) {
  transform: translateY(calc(var(--fan-y) - var(--lift))) rotate(var(--fan-angle));
}
.page--table .my-hand .card--playable {
  --lift: 4px;
  cursor: pointer;
  filter: brightness(1.06);
}
.page--table .my-hand .card--playable:active,
.page--table .my-hand .card--playable:hover {
  --lift: 15px;
  z-index: 60;
}
.page--table .my-hand .card--disabled {
  opacity: .78;
  filter: saturate(.84) brightness(.91);
}
.page--table .my-hand .card.is-selected {
  --lift: 25px;
  z-index: 70;
  box-shadow: 0 0 0 3px #ffe477, 0 12px 24px rgba(4,7,25,.52);
}
.page--table .my-hand .card__rank { font-size: clamp(18px, 5vw, 25px); }
.page--table .my-hand .card__corner i { font-size: clamp(14px, 4vw, 20px); }
.page--table .my-hand .card__suit { font-size: clamp(30px, 9vw, 46px); }
.page--table .my-hand .card--transfer::after {
  right: -5px;
  top: -8px;
  width: 25px;
  height: 25px;
}

.page--table .waiting-view {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 25;
  width: min(310px, calc(100% - 34px));
  transform: translate(-50%, -50%);
  padding: 22px 17px 18px;
  border-radius: 27px;
}
.page--table .waiting-view h1 { font-size: 26px; }
.page--table .waiting-view p { font-size: 12px; }
.page--table .waiting-cards { height: 72px; }
.page--table .waiting-cards span { width: 48px; height: 65px; font-size: 27px; }

@media (max-width: 430px), (max-height: 760px) {
  .page--table .table-shell { min-height: 600px; }
  .page--table .game-board { min-height: 535px; border-radius: 25px; }
  .page--table .seat { width: 68px; }
  .page--table .seat-pos--top { top: 68px; }
  .page--table .seat-pos--upper-left { left: 27%; top: 101px; }
  .page--table .seat-pos--upper-right { left: 73%; top: 101px; }
  .page--table .seat-pos--left { left: 10%; top: 157px; }
  .page--table .seat-pos--right { left: 90%; top: 157px; }
  .page--table .seat .avatar { width: 38px; height: 38px; }
  .page--table .seat__avatar-wrap { width: 44px; height: 44px; }
  .page--table .opponent-card-fan { transform: translateX(-50%) scale(.88); transform-origin: center bottom; }
  .page--table .table-surface { top: 139px; bottom: 202px; border-radius: 24px; }
  .page--table .deck-zone { left: 7px; top: 7px; transform: scale(.9); transform-origin: top left; }
  .page--table .battlefield { padding: 71px 4px 44px 63px; }
  .page--table .card-pair { width: 78px; height: 101px; }
  .page--table .card-pair .card,
  .page--table .defense-slot { width: 51px; height: 76px; }
  .page--table .my-hand { bottom: 55px; height: 155px; padding-top: 20px; }
  .page--table .hand-track { height: 132px; padding-inline: max(28px, calc(50% - 39px)); }
  .page--table .my-hand .card { min-width: 68px; width: 68px; height: 103px; margin-left: -23px; }
  .page--table .local-player { bottom: 5px; width: min(310px, calc(100% - 24px)); min-height: 53px; }
  .page--table .local-player .avatar--local,
  .page--table .local-player__avatar-wrap { width: 44px; height: 44px; }
  .page--table .table-status-strip { width: 68%; }
  .page--table .context-button { min-width: 78px; min-height: 37px; }
}

@media (min-width: 720px) {
  .page--table .seat { width: 92px; }
  .page--table .seat .avatar { width: 50px; height: 50px; }
  .page--table .seat__avatar-wrap { width: 57px; height: 57px; }
  .page--table .seat__name { max-width: 92px; font-size: 10px; }
  .page--table .seat-pos--upper-left { left: 30%; }
  .page--table .seat-pos--upper-right { left: 70%; }
  .page--table .seat-pos--left { left: 13%; top: 205px; }
  .page--table .seat-pos--right { left: 87%; top: 205px; }
  .page--table .table-surface { left: 28px; right: 28px; top: 178px; bottom: 235px; }
  .page--table .my-hand { bottom: 64px; height: 195px; }
  .page--table .hand-track { height: 168px; }
  .page--table .my-hand .card { min-width: 88px; width: 88px; height: 132px; margin-left: -29px; }
  .page--table .battlefield { padding-left: 98px; }
  .page--table .card-pair { width: 105px; height: 132px; }
  .page--table .card-pair .card,
  .page--table .defense-slot { width: 66px; height: 98px; }
}

/* v0.2.7 — приглашения друзей из комнаты ожидания */
.page--table .seat--invite {
  appearance: none;
  cursor: pointer;
  opacity: .78;
  color: inherit;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
.page--table .seat--invite:hover,
.page--table .seat--invite:active {
  opacity: 1;
  filter: brightness(1.13);
}
.page--table .seat--invite:active {
  transform: translate(-50%, -50%) scale(.94);
}
.page--table .seat--invite:disabled {
  cursor: wait;
  opacity: .42;
}
.page--table .seat--invite .seat-empty-icon {
  color: #fff2a2;
  border-color: rgba(255, 232, 117, .58);
  background: linear-gradient(180deg, rgba(102, 91, 218, .82), rgba(53, 52, 146, .86));
  box-shadow: 0 0 0 4px rgba(126, 116, 244, .12), 0 7px 15px rgba(4,7,31,.34);
  animation: invitePlusPulse 2s ease-in-out infinite;
}
.page--table .seat--invite .seat__name {
  color: #fff0a8;
}
@keyframes invitePlusPulse {
  50% { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 7px rgba(126,116,244,.08), 0 8px 18px rgba(4,7,31,.4); }
}

.page--table .waiting-view {
  top: 45%;
  padding-bottom: 16px;
}
.page--table .invite-primary {
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255,235,135,.54);
  border-radius: 17px;
  color: #3c2c05;
  background: linear-gradient(180deg, #ffe987, #eabf3f);
  box-shadow: 0 8px 18px rgba(4,7,31,.33), inset 0 2px 0 rgba(255,255,255,.55);
  font-size: 14px;
  font-weight: 1000;
  cursor: pointer;
}
.page--table .invite-primary:active { transform: translateY(2px); }
.page--table .invite-primary:disabled { opacity: .55; cursor: wait; }
.page--table .invite-primary__plus {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #6455d9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  font-size: 23px;
  line-height: 1;
}
.page--table .waiting-view .waiting-invite-note {
  margin-top: 9px;
  color: #aeb8e9;
  font-size: 10px;
  line-height: 1.35;
}

.page--table .invite-dock {
  position: absolute;
  left: 50%;
  bottom: 73px;
  z-index: 38;
  width: min(520px, calc(100% - 24px));
  transform: translateX(-50%);
  padding: 9px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(34,43,111,.96), rgba(17,24,73,.97));
  border: 1px solid rgba(183,192,255,.22);
  box-shadow: 0 10px 24px rgba(3,6,27,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.page--table .invite-dock__label {
  margin: 0 4px 6px;
  color: #bec7f4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page--table .invite-link-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
}
.page--table .invite-link-input {
  min-width: 0;
  height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(165,177,246,.19);
  border-radius: 12px;
  outline: none;
  color: #e9ecff;
  background: rgba(7,12,48,.62);
  font: 700 11px/1.2 system-ui, sans-serif;
  text-overflow: ellipsis;
}
.page--table .invite-link-input:focus {
  border-color: rgba(255,224,105,.58);
  box-shadow: 0 0 0 3px rgba(255,224,105,.09);
}
.page--table .copy-invite-button {
  min-width: 104px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(255,238,151,.54);
  border-radius: 12px;
  color: #3d2d07;
  background: linear-gradient(180deg,#ffe887,#e9bd3a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 1000;
  cursor: pointer;
}
.page--table .copy-invite-button:active { transform: translateY(1px); }
.page--table .copy-invite-button:disabled { opacity: .5; cursor: wait; }

@media (max-width: 430px), (max-height: 760px) {
  .page--table .waiting-view { top: 43%; padding: 15px 14px 13px; }
  .page--table .waiting-view .waiting-cards { height: 54px; margin-bottom: 2px; }
  .page--table .waiting-view .waiting-cards span { width: 40px; height: 54px; font-size: 23px; }
  .page--table .waiting-view h1 { font-size: 22px; }
  .page--table .invite-primary { min-height: 43px; margin-top: 11px; font-size: 12px; }
  .page--table .waiting-view .waiting-invite-note { display: none; }
  .page--table .invite-dock { bottom: 66px; width: calc(100% - 16px); padding: 7px; border-radius: 15px; }
  .page--table .invite-dock__label { margin-bottom: 4px; }
  .page--table .invite-link-input,
  .page--table .copy-invite-button { height: 38px; }
  .page--table .copy-invite-button { min-width: 92px; padding-inline: 9px; }
}

/* v0.2.8 — стол: настоящий козырь, перетаскивание карт и карты соперников */
.page--table .table-status-strip { display: none !important; }

.page--table .table-surface {
  top: 136px;
  bottom: 205px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.page--table .table-surface.is-drop-ready {
  border-color: rgba(255, 227, 112, .26);
  box-shadow: inset 0 0 48px rgba(255, 221, 89, .07), 0 0 0 2px rgba(255, 228, 118, .05);
}
.page--table .table-surface.is-drop-hover {
  border-color: rgba(255, 231, 128, .68);
  box-shadow: inset 0 0 65px rgba(255, 221, 89, .13), 0 0 22px rgba(255, 221, 89, .12);
}

/* Колода находится по центру слева, козырь лежит поперёк под ней и виден справа. */
.page--table .deck-zone {
  left: 9px;
  top: 50%;
  width: 122px;
  gap: 7px;
  transform: translateY(-50%);
  align-items: flex-start;
}
.page--table .deck-cluster {
  width: 120px;
  height: 84px;
}
.page--table .deck-stack {
  left: 5px;
  top: 2px;
  width: 55px;
  height: 78px;
  z-index: 4;
  transform: rotate(-3deg);
}
.page--table .trump-card {
  left: 37px;
  right: auto;
  top: 15px;
  z-index: 1;
  width: 80px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  transform: rotate(2deg);
  display: block;
  color: #1c2237;
  background: linear-gradient(145deg, #fffdf4 0%, #f6edcf 62%, #dfc98e 100%);
  border: 3px solid #d1ad54;
  box-shadow: 0 7px 13px rgba(4,7,25,.38), inset 0 1px 0 rgba(255,255,255,.75);
}
.page--table .trump-card__corner {
  position: absolute;
  right: 6px;
  top: 4px;
  width: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 !important;
  line-height: .9;
}
.page--table .trump-card__corner b { font-size: 17px; }
.page--table .trump-card__corner i { font-size: 14px; font-style: normal; }
.page--table .trump-card__big-suit {
  position: absolute;
  right: 7px;
  bottom: 1px;
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1;
}
.page--table .trump-card.card--red { color: #d22f4b; }
.page--table .trump-label {
  margin-left: 7px;
  font-size: 9px;
}
.page--table .battlefield {
  padding: 24px 10px 48px 108px;
}

/* У соперников видна веерная "шапка" закрытых карт. */
.page--table .opponent-card-fan {
  left: 50%;
  top: -27px;
  width: 86px;
  height: 58px;
  transform: translateX(-50%);
  z-index: 1;
}
.page--table .opponent-card-fan i {
  left: calc(50% - 15px);
  top: 4px;
  width: 30px;
  height: 43px;
  border-radius: 6px;
  transform-origin: 50% 110%;
  transform: translateX(var(--back-x)) translateY(var(--back-y)) rotate(var(--back-angle));
  z-index: calc(1 + var(--back-order));
  background:
    linear-gradient(135deg, transparent 42%, rgba(255,255,255,.13) 43% 48%, transparent 49%),
    repeating-linear-gradient(45deg,#314b9d 0 4px,#20336f 4px 8px);
  border: 2px solid #d8c47e;
  box-shadow: 0 3px 8px rgba(4,7,25,.34), inset 0 0 0 2px rgba(255,255,255,.08);
}
.page--table .seat__avatar-wrap { margin-top: 14px; }
.page--table .seat--empty .seat__avatar-wrap { margin-top: 0; }

/* Перетаскиваемая карта. Свайп вбок по руке остаётся доступен. */
.page--table .my-hand .card--playable { touch-action: pan-x; }
.page--table .my-hand .card.is-drag-origin {
  opacity: .28;
  filter: grayscale(.25) brightness(.8);
}
.drag-card-ghost {
  position: fixed !important;
  z-index: 10000 !important;
  margin: 0 !important;
  pointer-events: none !important;
  touch-action: none !important;
  transform: rotate(-2deg) scale(1.05) !important;
  opacity: .96;
  box-shadow: 0 18px 38px rgba(3, 5, 24, .56), 0 0 0 3px rgba(255, 230, 114, .78) !important;
  transition: none !important;
  animation: draggedCardLift .12s ease-out;
}
@keyframes draggedCardLift {
  from { opacity: .55; transform: rotate(-2deg) scale(.86); }
}
.page--table .card-pair.is-drop-target {
  border-color: #ffe376;
  background: rgba(255, 225, 95, .16);
  box-shadow: 0 0 0 3px rgba(255, 226, 103, .22), 0 0 22px rgba(255, 225, 95, .3);
  transform: scale(1.04);
}

@media (max-width: 430px), (max-height: 760px) {
  .page--table .table-surface { top: 123px; bottom: 188px; }
  .page--table .deck-zone {
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(.83);
    transform-origin: left center;
  }
  .page--table .battlefield { padding: 20px 6px 43px 87px; }
  .page--table .opponent-card-fan { top: -23px; transform: translateX(-50%) scale(.84); transform-origin: center bottom; }
  .page--table .seat__avatar-wrap { margin-top: 11px; }
}

@media (min-width: 720px) {
  .page--table .table-surface { top: 155px; bottom: 220px; }
  .page--table .deck-zone { left: 18px; transform: translateY(-50%) scale(1.08); transform-origin: left center; }
  .page--table .battlefield { padding-left: 132px; }
}
.page--table .opponent-card-fan i:nth-child(n) {
  transform: translateX(var(--back-x)) translateY(var(--back-y)) rotate(var(--back-angle)) !important;
}