/* Игры на двоих: витрина и экран партии. */

/* ---------- витрина ---------- */

.duel-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.duel-tile,
.duel-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 16px;
  color: var(--text);
  text-align: left;
  background: var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: transform 0.12s ease;
  font: inherit;
}

.duel-tile:active,
.duel-row:active {
  transform: scale(0.97);
}

.duel-tile-copy,
.duel-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.duel-tile-copy strong,
.duel-row-copy strong {
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.duel-row-copy strong {
  white-space: nowrap;
}

.duel-tile-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.duel-tile-copy span,
.duel-row-sub {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.duel-tile-copy span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.duel-row-sub {
  white-space: nowrap;
}

.duel-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 12px;
  background: rgba(60, 200, 255, 0.1);
}

.duel-icon svg,
.duel-icon img {
  width: 34px;
  height: 34px;
}

.duel-icon.chess img {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.duel-icon .i-line { fill: none; stroke: rgba(238, 244, 249, 0.35); stroke-width: 5; stroke-linecap: round; }
.duel-icon .i-x { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.duel-icon .i-x.fade { opacity: 0.35; }
.duel-icon .i-o { fill: none; stroke: #ff7a9a; stroke-width: 6; }
.duel-icon .i-ghost { fill: #eef4f9; }
.duel-icon .i-eye { fill: #0b1520; }
.duel-icon .i-frame { fill: #1b4fa8; }
.duel-icon .i-red { fill: #ff5f6d; }
.duel-icon .i-gold { fill: #ffd36b; }
.duel-icon .i-dark { fill: #2c2f36; stroke: #0b0d10; stroke-width: 2; }
.duel-icon .i-light,
.duel-icon .i-light-top { fill: #f4ead6; stroke: #a58b5c; stroke-width: 2; }
.duel-icon .i-crown { fill: #f0a53a; }
.duel-icon .i-ship { fill: #cfd9e2; }
.duel-icon .i-sail { fill: var(--accent); }
.duel-icon .i-wave { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.duel-icon .i-target { fill: none; stroke: #ff6b7d; stroke-width: 4; }
.duel-icon .i-target-line { stroke: #ff6b7d; stroke-width: 3; }

.duel-list {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.duel-pick + .duel-list {
  margin-top: 18px;
}

.duel-list-title {
  margin: 2px 4px;
  color: var(--faint);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.duel-badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.07);
}

.duel-badge.hot {
  color: #04121c;
  background: linear-gradient(150deg, #7fe3ff, var(--accent));
  animation: duel-badge 1.6s ease-in-out infinite;
}

.duel-badge.score {
  font-variant-numeric: tabular-nums;
}

@keyframes duel-badge {
  50% { box-shadow: 0 0 0 5px rgba(60, 200, 255, 0.16); }
}

/* ---------- экран партии ---------- */

.duel-view {
  --board-w: min(calc(100vw - 24px), 470px);
  /* --stage-h ставит duels.js: сколько места реально осталось под доску (без шапки Telegram и кнопок) */
  --board: min(var(--board-w), calc(var(--stage-h, calc(100dvh - 320px)) - 12px));
  /* морской бой в бою: поле соперника во всю ширину, если по высоте рядом влезает своё хотя бы в 0,4
     его размера; своё поле забирает остаток высоты, но не больше 0,56 (1,028 — высота поля к ширине).
     --sea-text — подписи и отступы между полями */
  --sea-text: 58px;
  --sea: min(var(--board-w), max(220px, calc((var(--stage-h, calc(100dvh - 260px)) - var(--sea-text)) / 1.44)));
  --sea-own: min(calc(var(--sea) * 0.56),
    max(calc(var(--sea) * 0.4), calc((var(--stage-h, calc(100dvh - 260px)) - var(--sea-text)) / 1.028 - var(--sea))));
  position: fixed;
  z-index: 55;
  inset: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(110% 50% at 50% 0%, rgba(31, 143, 214, 0.18), transparent 60%),
    #05080d;
  user-select: none;
  -webkit-user-select: none;
}

.duel-view.is-entering {
  animation: duel-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.duel-view.is-leaving {
  animation: duel-out 0.2s ease forwards;
}

@keyframes duel-in {
  from { opacity: 0; transform: translateY(18px); }
}

@keyframes duel-out {
  to { opacity: 0; transform: translateY(14px); }
}

.duel-view.is-busy .duel-board {
  opacity: 0.86;
  pointer-events: none;
}

.duel-top {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 12px 6px;
}

.duel-tools {
  display: flex;
  min-width: 42px;
  flex: none;
  gap: 6px;
  justify-content: flex-end;
}

.duel-tool {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(238, 244, 249, 0.07);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
}

.duel-tool-icon {
  width: 22px;
  height: 22px;
}

.duel-tool-icon .t-pole { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.duel-tool-icon .t-flag { fill: currentColor; }

.duel-tool:active {
  background: rgba(238, 244, 249, 0.16);
}

.duel-tool:disabled,
.duel-tool.is-pending {
  opacity: 0.45;
}

.duel-heads {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.duel-title {
  font-size: 1.05rem;
  line-height: 1.2;
}

.duel-status {
  color: var(--muted);
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.duel-view.your-turn .duel-status {
  color: var(--accent);
  font-weight: 700;
}

.duel-players {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 12px 8px;
}

.duel-player {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  flex: 1;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.duel-player.is-turn {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.duel-player.is-empty {
  justify-content: center;
  color: var(--muted);
}

.duel-player-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.duel-player-name {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-player-name .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--faint);
}

.duel-player-name .dot.online {
  background: var(--online);
  box-shadow: 0 0 0 3px rgba(79, 217, 138, 0.18);
}

.duel-player-wins {
  min-width: 22px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.duel-vs {
  flex: none;
  color: var(--faint);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.duel-taken {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1px;
}

.duel-taken img {
  width: 14px;
  height: 14px;
  margin-right: -3px;
}

.seat-mark {
  display: grid;
  width: 24px;
  height: 24px;
  flex: none;
  place-items: center;
}

.seat-mark svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
}

.seat-mark.s0 svg { stroke: var(--accent); }
.seat-mark.s1 svg { stroke: #ff7a9a; }
.seat-mark img { width: 24px; height: 24px; }

.seat-mark.four::before,
.seat-mark.checkers::before {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  content: "";
}

.seat-mark.four.s0::before { background: #ff5f6d; }
.seat-mark.four.s1::before { background: #ffd36b; }
.seat-mark.checkers.s0::before { background: #f4ead6; box-shadow: inset 0 0 0 2px #a58b5c; }
.seat-mark.checkers.s1::before { background: #2c2f36; box-shadow: inset 0 0 0 2px #6b7280; }

/* у морского боя поля шире: поля по бокам 8px вместо 12px */
.duel-view[data-game="sea"] {
  --board-w: min(calc(100vw - 16px), 470px);
}

.duel-view[data-game="sea"] .duel-stage {
  padding: 0 8px;
}

.duel-stage {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12px;
  overflow-y: auto;
}

.duel-board {
  display: flex;
  width: var(--board);
  margin-block: auto;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.15s ease;
}

.duel-loading {
  padding: 40px 10px;
  color: var(--muted);
  text-align: center;
}

.duel-waiting {
  position: relative;
  display: grid;
  width: 60%;
  aspect-ratio: 1;
  place-items: center;
}

.duel-waiting .duel-icon {
  width: 96px;
  height: 96px;
  border-radius: 28px;
}

.duel-waiting .duel-icon svg,
.duel-waiting .duel-icon img {
  width: 76px;
  height: 76px;
}

.duel-pulse {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 2px solid rgba(60, 200, 255, 0.35);
  animation: duel-pulse 1.8s ease-out infinite;
}

@keyframes duel-pulse {
  from { opacity: 1; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.4); }
}

.duel-card {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: flex;
  width: min(calc(100% - 48px), 330px);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 18px 16px;
  border-radius: 22px;
  text-align: center;
  background: rgba(13, 20, 29, 0.94);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line-strong);
  transform: translate(-50%, -50%);
  animation: duel-card 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  backdrop-filter: blur(6px);
}

.duel-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

@keyframes duel-card {
  from { opacity: 0; transform: translate(-50%, -44%) scale(0.92); }
}

.duel-card-title {
  font-size: 1.25rem;
}

.duel-card-emoji {
  font-size: 2.6rem;
  line-height: 1;
}

.duel-card-emoji.win {
  animation: duel-trophy 0.9s ease;
}

@keyframes duel-trophy {
  30% { transform: scale(1.3) rotate(-8deg); }
  60% { transform: scale(0.95) rotate(4deg); }
}

.duel-card-score {
  margin-top: 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.duel-card-hint {
  color: var(--faint);
  font-size: 0.72rem;
}

.duel-link {
  max-width: 100%;
  overflow: hidden;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--accent-soft);
  user-select: all;
  -webkit-user-select: all;
}

.duel-note {
  min-height: 1.3em;
  margin: 8px 16px 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.duel-actions:empty {
  min-height: 0;
  padding: 0 0 max(8px, env(safe-area-inset-bottom));
}

.duel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 10px 12px max(14px, env(safe-area-inset-bottom));
}

.duel-actions .primary-button {
  min-width: 46%;
  flex: 1 1 auto;
  margin: 0;
}

.duel-button {
  min-height: 46px;
  flex: 1 1 auto;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.duel-button.ghost {
  color: var(--muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.duel-button:disabled,
.duel-actions .primary-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- крестики-нолики ---------- */

.ttt-grid {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.ttt-cell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: default;
}

.ttt-cell.is-open {
  cursor: pointer;
}

.ttt-cell.is-open:active {
  background: var(--accent-soft);
}

.ttt-mark,
.ttt-ghost-mark {
  width: 70%;
  height: 70%;
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  filter: var(--ttt-glow, none);
}

.ttt-mark .m-x,
.ttt-ghost-mark .m-x { stroke: var(--ttt-x, var(--accent)); }
.ttt-mark .m-o,
.ttt-ghost-mark .m-o { stroke: var(--ttt-o, #ff7a9a); }

.ttt-ghost-mark {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ttt-cell.is-open:active .ttt-ghost-mark {
  opacity: 0.3;
}

.ttt-cell.is-new .ttt-mark path,
.ttt-cell.is-new .ttt-mark circle {
  stroke-dasharray: 160;
  animation: ttt-draw 0.35s ease-out;
}

@keyframes ttt-draw {
  from { stroke-dashoffset: 160; }
}

.ttt-cell.is-win {
  background: rgba(79, 217, 138, 0.16);
  box-shadow: inset 0 0 0 2px var(--online);
}

.ttt-cell.is-fading .ttt-mark {
  animation: ttt-fade 1.1s ease-in-out infinite;
}

@keyframes ttt-fade {
  50% { opacity: 0.25; }
}

.ttt-cell.is-gone::after {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 244, 249, 0.5), transparent 70%);
  content: "";
  animation: ck-poof 0.6s ease-out forwards;
}

/* ---------- 4 в ряд ---------- */

.four-grid {
  display: grid;
  width: 100%;
  aspect-ratio: 7 / 6;
  gap: 5px;
  padding: 8px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #1d56b5, #143f88);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25), var(--shadow);
  grid-template-columns: repeat(7, 1fr);
}

.four-cell {
  position: relative;
  border-radius: 50%;
  background: #08111d;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.55);
}

.four-grid.is-open .four-cell.is-open {
  cursor: pointer;
}

.four-disc {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
}

.four-disc.s0 {
  background: radial-gradient(circle at 35% 30%, #ff9aa3, #ff5f6d 55%, #c9303f);
}

.four-disc.s1 {
  background: radial-gradient(circle at 35% 30%, #fff0bf, #ffd36b 55%, #d99a24);
}

.four-disc.is-drop {
  animation: four-drop calc(0.12s + var(--fall, 3) * 0.05s) cubic-bezier(0.5, 0, 0.75, 0);
}

@keyframes four-drop {
  from { transform: translateY(calc(var(--fall, 3) * -118%)); }
}

.four-disc.is-win {
  box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, 0.7);
  animation: four-win 0.9s ease-in-out infinite alternate;
}

@keyframes four-win {
  to { transform: scale(0.88); }
}

/* ---------- шашки ---------- */

.ck-grid,
.cs-grid {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--shadow), 0 0 0 3px rgba(255, 255, 255, 0.06);
  grid-template-columns: repeat(8, 1fr);
}

.ck-cell {
  position: relative;
  background: var(--ck-light, #f0d9b5);
}

.ck-cell.dark {
  background: var(--ck-dark, #b58863);
}

.ck-cell.is-last {
  background: #c9a46a;
}

.ck-cell.is-path {
  background: #8fae5a;
}

.ck-piece {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  transition: transform 0.12s ease;
}

.ck-piece.w {
  background: var(--ck-w, radial-gradient(circle at 40% 35%, #fffdf6, #ece1c8 60%, #c9b48a));
  box-shadow: var(--ck-w-shadow, 0 3px 0 #9b845a, 0 5px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(165, 139, 92, 0.35));
}

.ck-piece.b {
  background: var(--ck-b, radial-gradient(circle at 40% 35%, #5c616b, #2c2f36 60%, #14161a));
  box-shadow: var(--ck-b-shadow, 0 3px 0 #08090b, 0 5px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(255, 255, 255, 0.08));
}

.ck-piece.king::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ck-crown, #f0a53a);
  font-size: calc(var(--board) / 8 * 0.42);
  line-height: 1;
  content: "♛";
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.ck-piece.can-move {
  box-shadow: 0 0 0 3px rgba(60, 200, 255, 0.85), 0 5px 8px rgba(0, 0, 0, 0.35);
}

.ck-piece.is-selected {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 0 0 3px #fff, 0 9px 12px rgba(0, 0, 0, 0.45);
}

.ck-piece.is-new {
  animation: piece-pop 0.3s ease-out;
}

@keyframes piece-pop {
  from { transform: scale(0.7); opacity: 0.4; }
}

.ck-target,
.cs-target {
  position: absolute;
  inset: 36%;
  z-index: 2;
  border-radius: 50%;
  background: rgba(20, 30, 40, 0.38);
  pointer-events: none;
}

.ck-target {
  background: rgba(60, 200, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(60, 200, 255, 0.25);
}

.ck-poof {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 70%);
  pointer-events: none;
  animation: ck-poof 0.6s ease-out forwards;
}

@keyframes ck-poof {
  from { opacity: 1; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.5); }
}

/* ---------- шахматы ---------- */

.cs-wrap {
  position: relative;
  width: 100%;
}

.cs-cell {
  position: relative;
  background: var(--cs-light, #dee3e6);
}

.cs-cell.dark {
  background: var(--cs-dark, #8ca2ad);
}

.cs-cell.is-last::before,
.cs-cell.is-selected::before {
  position: absolute;
  inset: 0;
  background: rgba(60, 200, 255, 0.38);
  content: "";
}

.cs-cell.is-selected::before {
  background: rgba(20, 85, 30, 0.5);
}

.cs-cell.is-check {
  background: radial-gradient(circle, #ff3b4f 0%, #e3253a 30%, rgba(169, 0, 0, 0) 75%), #8ca2ad;
}

.cs-piece {
  position: absolute;
  inset: 3%;
  z-index: 1;
  width: 94%;
  height: 94%;
  pointer-events: none;
}

.cs-piece.w { filter: var(--cs-w, none); }
.cs-piece.b { filter: var(--cs-b, none); }

.cs-piece.is-new {
  animation: piece-pop 0.25s ease-out;
}

.cs-target.capture {
  inset: 2%;
  background: transparent;
  box-shadow: inset 0 0 0 calc(var(--board) / 8 * 0.08) rgba(20, 30, 40, 0.38);
}

.cs-rank,
.cs-file {
  position: absolute;
  z-index: 1;
  font-size: calc(var(--board) / 8 * 0.2);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.cs-rank { left: 3%; top: 4%; }
.cs-file { right: 5%; bottom: 3%; }
.cs-cell .cs-rank,
.cs-cell .cs-file { color: #8ca2ad; }
.cs-cell.dark .cs-rank,
.cs-cell.dark .cs-file { color: #dee3e6; }

.cs-promo {
  position: absolute;
  z-index: 4;
  inset: 18% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  background: rgba(13, 20, 29, 0.95);
  box-shadow: var(--shadow);
}

.cs-promo-title {
  color: var(--muted);
  font-size: 0.86rem;
}

.cs-promo-row {
  display: flex;
  gap: 8px;
}

.cs-promo-option {
  width: 58px;
  height: 58px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: #dee3e6;
  cursor: pointer;
}

.cs-promo-option img {
  width: 100%;
  height: 100%;
}

/* ---------- морской бой ---------- */

/* в бою на экране два поля: доска поменьше, чтобы оба влезали по высоте без прокрутки */
.duel-board[data-game="sea"][data-phase="firing"] {
  --board: var(--sea);
}

/* расстановка: поле во всю ширину, но вместе с подписью над ним — без прокрутки */
.duel-board[data-game="sea"][data-phase="placing"] {
  --board: min(var(--board-w), calc((var(--stage-h, calc(100dvh - 320px)) - 26px) / 1.028));
}

/* на низких экранах подпись «Поле соперника» убираем — поле соперника от этого крупнее */
@media (max-height: 700px) {
  .duel-view[data-game="sea"] {
    --sea-text: 37px;
  }

  .duel-board[data-game="sea"][data-phase="firing"] > .sea-title {
    display: none;
  }

  /* списки флотов не выше своего поля, иначе появится прокрутка */
  .duel-view[data-game="sea"] .sea-side {
    gap: 8px;
    padding-top: 0;
  }
}

.sea-title {
  align-self: flex-start;
  margin: 2px 2px 5px;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sea-title.small {
  margin-top: 0;
  font-size: 0.68rem;
}

.sea-wrap {
  position: relative;
  width: 100%;
}

.sea-grid {
  --sea-gap: 2px;
  display: grid;
  gap: var(--sea-gap);
  grid-template-columns: minmax(0, 0.7fr) repeat(10, minmax(0, 1fr));
}

.sea-label,
.sea-corner {
  display: grid;
  place-items: center;
  color: #a9bccb;
  font-size: calc(var(--board) / 11 * 0.36);
  font-weight: 700;
  line-height: 1;
  aspect-ratio: 1;
}

.sea-wrap.own:not(.big) .sea-label {
  color: var(--muted);
  font-size: calc(var(--sea-own) / 11 * 0.4);
}

.sea-cell {
  position: relative;
  border-radius: 3px;
  background: #0f2235;
  aspect-ratio: 1;
}

.sea-cell.ship {
  background: #11283e;
}

.sea-grid.is-open .sea-cell.unknown {
  background: #13304a;
  box-shadow: inset 0 0 0 1px rgba(127, 190, 230, 0.12);
  cursor: pointer;
}

.sea-grid.is-open .sea-cell.unknown:active,
.sea-cell.is-aiming {
  background: rgba(255, 107, 125, 0.4);
}

.sea-cell.miss::after {
  position: absolute;
  z-index: 2;
  inset: 38%;
  border-radius: 50%;
  background: rgba(238, 244, 249, 0.45);
  content: "";
}

.sea-cell.hit {
  background: rgba(255, 107, 125, 0.35);
}

.sea-cell.ship.hit {
  background: rgba(255, 107, 125, 0.3);
}

.sea-cell.hit::after,
.sea-cell.sunk::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ff6b7d;
  font-size: calc(var(--board) / 11 * 0.55);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 4px rgba(40, 0, 8, 0.9);
  content: "✕";
}

.sea-wrap.own:not(.big) .sea-cell.hit::after,
.sea-wrap.own:not(.big) .sea-cell.sunk::after {
  font-size: calc(var(--sea-own) / 11 * 0.6);
}

.sea-cell.sunk,
.sea-cell.ship.sunk {
  background: #2c1219;
}

.sea-cell.sunk::after {
  color: #ffc2ca;
  font-size: calc(var(--board) / 11 * 0.38);
  opacity: 0.85;
}

.sea-cell.reveal {
  background: rgba(255, 211, 107, 0.1);
}

.sea-cell.is-last {
  animation: sea-last 0.9s ease-out;
}

@keyframes sea-last {
  from { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
}

/* фигурка корабля: картинка в первой клетке, растянутая на всю его длину вместе с зазорами */
.sea-hull {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: var(--hull-glow, drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)));
}

.sea-hull.h { width: calc(100% * var(--len) + var(--sea-gap) * (var(--len) - 1)); }
.sea-hull.v { height: calc(100% * var(--len) + var(--sea-gap) * (var(--len) - 1)); }

.sea-hull .hull,
.sea-mini-hull .hull {
  fill: var(--hull, #8ea6b8);
  stroke: var(--hull-line, #e2eef6);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.sea-hull .deck,
.sea-mini-hull .deck { fill: var(--deck, #5d7589); }
.sea-hull .bridge,
.sea-mini-hull .bridge { fill: var(--bridge, #e6eff5); }
.sea-hull .glass,
.sea-mini-hull .glass { fill: var(--glass, #1f4664); }
.sea-hull .funnel,
.sea-mini-hull .funnel { fill: var(--funnel, #c3d3df); }
.sea-hull .gun,
.sea-mini-hull .gun { fill: var(--gun, #26384a); }

.sea-hull .turret,
.sea-mini-hull .turret {
  fill: var(--turret, #3b5165);
  stroke: var(--turret-line, #b9cad7);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.sea-hull.sunk .hull,
.sea-mini-hull.sunk .hull { fill: #7a2b36; stroke: #ff8a98; }
.sea-hull.sunk .deck,
.sea-mini-hull.sunk .deck { fill: #4d1922; }
.sea-hull.sunk .bridge,
.sea-hull.sunk .funnel,
.sea-mini-hull.sunk .bridge,
.sea-mini-hull.sunk .funnel { fill: #b0606a; }
.sea-hull.sunk .glass,
.sea-hull.sunk .gun,
.sea-mini-hull.sunk .glass,
.sea-mini-hull.sunk .gun { fill: #2b0f15; }
.sea-hull.sunk .turret,
.sea-mini-hull.sunk .turret { fill: #3d1820; stroke: #c9747e; }

/* расстановка своими руками */
.sea-wrap.editable .sea-grid {
  touch-action: none;
}

.sea-wrap.editable .sea-cell {
  cursor: pointer;
}

.sea-cell.place-ok {
  background: rgba(58, 208, 127, 0.42);
  box-shadow: inset 0 0 0 1px rgba(120, 255, 180, 0.8);
}

.sea-cell.place-bad {
  background: rgba(255, 107, 125, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 150, 0.85);
}

.sea-hull.is-dragging {
  z-index: 3;
  opacity: 0.8;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6));
}

/* уцелевшие корабли соперника, которые открываются в конце партии */
.sea-hull.ghost { opacity: 0.6; }
.sea-hull.ghost .hull { stroke: #ffd36b; stroke-dasharray: 4 3; }

.sea-bottom {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
}

.sea-own {
  display: flex;
  width: var(--sea-own);
  flex: none;
  flex-direction: column;
}

.sea-side {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
}

.sea-roster {
  --u: clamp(8px, calc(var(--board) * 0.4 / 12), 13px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sea-roster-title {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sea-roster-row {
  display: flex;
  gap: calc(var(--u) * 0.45);
}

.sea-mini {
  position: relative;
  display: block;
  width: calc(var(--u) * var(--len));
  height: var(--u);
  flex: none;
}

.sea-mini-hull {
  display: block;
  width: 100%;
  height: 100%;
}

.sea-mini.is-sunk::after {
  position: absolute;
  top: 50%;
  right: -2px;
  left: -2px;
  height: 1.5px;
  background: #ff8a98;
  content: "";
  transform: rotate(-12deg);
}

@media (prefers-reduced-motion: reduce) {
  .duel-view,
  .duel-card,
  .four-disc,
  .ck-piece,
  .cs-piece,
  .sea-cell,
  .duel-badge.hot,
  .duel-pulse {
    animation: none !important;
  }
}

/* ---------- вкладка «Вдвоём» ---------- */

.duels {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.duel-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(60, 200, 255, 0.22), transparent 60%),
    var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.duel-hero .duel-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.duel-hero .duel-icon svg {
  width: 44px;
  height: 44px;
}

.duel-hero-copy strong {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}

.duel-hero-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.duels .duel-list {
  margin: 14px 0 0;
}

.duel-new {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #04121c;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  vertical-align: 2px;
  background: linear-gradient(150deg, #7fe3ff, var(--accent));
}

.duel-promo {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  color: var(--text);
  text-align: left;
  font: inherit;
  background:
    linear-gradient(120deg, rgba(31, 107, 74, 0.55), rgba(60, 200, 255, 0.16)),
    var(--panel-raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
}

.duel-promo:active {
  transform: scale(0.98);
}

.duel-promo-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.duel-promo-copy strong {
  font-size: 0.92rem;
}

.duel-promo-copy span {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* ---------- анимации ходов ---------- */

.ck-piece.is-captured,
.cs-piece.is-captured {
  pointer-events: none;
}

.ttt-grid {
  position: relative;
}

.ttt-strike-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ttt-strike {
  fill: none;
  stroke: #ffd36b;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(255, 211, 107, 0.7));
  vector-effect: non-scaling-stroke;
}

.sea-fx {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.sea-fx-a,
.sea-fx-b {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* промах: два круга по воде */
.sea-fx.miss .sea-fx-a,
.sea-fx.miss .sea-fx-b {
  border: 2px solid rgba(160, 220, 255, 0.85);
  animation: sea-ripple 0.9s ease-out forwards;
}

.sea-fx.miss .sea-fx-b {
  animation-delay: 0.18s;
  opacity: 0;
}

@keyframes sea-ripple {
  from { opacity: 0.95; transform: scale(0.2); }
  to { opacity: 0; transform: scale(1.9); }
}

/* попадание: вспышка и огненное кольцо */
.sea-fx.hit .sea-fx-a,
.sea-fx.sunk .sea-fx-a {
  background: radial-gradient(circle, #fff6c2 0%, #ffb340 35%, #ff4d4d 60%, transparent 72%);
  animation: sea-boom 0.6s ease-out forwards;
}

.sea-fx.hit .sea-fx-b,
.sea-fx.sunk .sea-fx-b {
  border: 3px solid rgba(255, 150, 80, 0.9);
  animation: sea-ring 0.7s ease-out forwards;
}

.sea-fx.sunk .sea-fx-a {
  animation-duration: 0.85s;
}

@keyframes sea-boom {
  0% { opacity: 1; transform: scale(0.3); }
  45% { opacity: 1; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(2.3); }
}

@keyframes sea-ring {
  from { opacity: 1; transform: scale(0.4); }
  to { opacity: 0; transform: scale(2.6); }
}

/* ракета: летит по дуге к клетке, хвост огня тянется следом */
.duel-board[data-game="sea"] {
  position: relative;
}

.sea-rocket {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
}

.sea-rocket::before {
  position: absolute;
  top: 88%;
  left: 50%;
  width: 34%;
  height: 150%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 196, 110, 0.85), rgba(255, 140, 80, 0.35) 45%, rgba(255, 255, 255, 0));
  content: "";
  filter: blur(1.5px);
  transform: translateX(-50%);
}

.sea-rocket-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}

.sea-rocket-art .body { fill: #e9eef3; stroke: #7d8a96; stroke-width: 0.8; }
.sea-rocket-art .nose,
.sea-rocket-art .fin { fill: #ff5f6d; }
.sea-rocket-art .port { fill: #7fe3ff; stroke: #3d6b80; stroke-width: 0.6; }
.sea-rocket-art .flame {
  fill: #ffb340;
  transform-origin: 10px 29px;
  animation: sea-flame 0.12s ease-in-out infinite alternate;
}

@keyframes sea-flame {
  from { transform: scaleY(0.75); }
  to { transform: scaleY(1.15); }
}

html.lite .sea-rocket::before { filter: none; }

/* пока ракета летит, результат выстрела в клетке не виден */
.sea-grid .sea-cell.fx-wait {
  background: #0f2235;
  box-shadow: none;
}

.sea-grid.is-open .sea-cell.fx-wait {
  background: #13304a;
  box-shadow: inset 0 0 0 1px rgba(127, 190, 230, 0.12);
}

.sea-wrap.own .sea-cell.ship.fx-wait {
  background: #11283e;
}

.sea-cell.fx-wait::after {
  visibility: hidden;
}

.sea-cell.fx-wait.is-last {
  animation: none;
}

.sea-hull.fx-wait {
  opacity: 0;
}

/* ---------- скины игр вдвоём: задают только цвета, подсветку ходов и потопленные корабли не трогают ---------- */
[data-skin="sea:pirate"] {
  --hull: #8a5a35; --hull-line: #f0cf98; --deck: #b78350; --bridge: #f3e3c0;
  --glass: #3a2414; --funnel: #2b2724; --gun: #1d140c; --turret: #4a3020; --turret-line: #f0cf98;
}

[data-skin="sea:neon"] {
  --hull: #0b1a2a; --hull-line: #48f0ff; --deck: #0f2a40; --bridge: #48f0ff;
  --glass: #ff4fd8; --funnel: #1d3c58; --gun: #48f0ff; --turret: #0b1a2a; --turret-line: #48f0ff;
  --hull-glow: drop-shadow(0 0 3px rgba(72, 240, 255, 0.85));
}

[data-skin="sea:gold"] {
  --hull: #d9a93a; --hull-line: #fff1b8; --deck: #a8761a; --bridge: #fff6d6;
  --glass: #5a3c06; --funnel: #f3d27a; --gun: #6b4a0a; --turret: #8c6413; --turret-line: #ffe9a1;
  --hull-glow: drop-shadow(0 0 3px rgba(255, 211, 107, 0.65));
}

[data-skin="chess:wood"] { --cs-light: #ecd3a8; --cs-dark: #a26b43; }

[data-skin="chess:marble"] {
  --cs-light: #efede9; --cs-dark: #9aa1a8;
  --cs-w: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  --cs-b: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.25));
}

[data-skin="chess:neon"] {
  --cs-light: #16304a; --cs-dark: #0a1622;
  --cs-w: sepia(1) saturate(5) hue-rotate(140deg) drop-shadow(0 0 3px #48f0ff);
  --cs-b: invert(1) sepia(1) saturate(6) hue-rotate(255deg) drop-shadow(0 0 3px #ff4fd8);
}

[data-skin="checkers:candy"] {
  --ck-light: #fde9f2; --ck-dark: #e7a3bf; --ck-crown: #ffffff;
  --ck-w: radial-gradient(circle at 40% 35%, #ffffff, #c8f4e4 60%, #7fd6b6);
  --ck-w-shadow: 0 3px 0 #5fb596, 0 5px 8px rgba(0, 0, 0, 0.3);
  --ck-b: radial-gradient(circle at 40% 35%, #ffd1e6, #ff7fb5 60%, #d64a8a);
  --ck-b-shadow: 0 3px 0 #a8336a, 0 5px 8px rgba(0, 0, 0, 0.35);
}

[data-skin="checkers:emerald"] {
  --ck-light: #d3ead6; --ck-dark: #1f6b45; --ck-crown: #ffe27a;
  --ck-w: radial-gradient(circle at 40% 35%, #fff4c4, #f0c75a 60%, #b8891c);
  --ck-w-shadow: 0 3px 0 #8a6514, 0 5px 8px rgba(0, 0, 0, 0.35);
  --ck-b: radial-gradient(circle at 40% 35%, #4a4f57, #1c1f24 60%, #08090b);
}

[data-skin="checkers:neon"] {
  --ck-light: #16304a; --ck-dark: #0a1622; --ck-crown: #ffffff;
  --ck-w: radial-gradient(circle at 40% 35%, #d8fdff, #48f0ff 55%, #0d8fa0);
  --ck-w-shadow: 0 0 10px rgba(72, 240, 255, 0.75);
  --ck-b: radial-gradient(circle at 40% 35%, #ffd6f5, #ff4fd8 55%, #9a1f83);
  --ck-b-shadow: 0 0 10px rgba(255, 79, 216, 0.75);
}

[data-skin="ttt:fire"] { --ttt-x: #ff7a2f; --ttt-o: #7fd8ff; --ttt-glow: drop-shadow(0 0 6px rgba(255, 140, 60, 0.55)); }
[data-skin="ttt:neon"] { --ttt-x: #48f0ff; --ttt-o: #ff4fd8; --ttt-glow: drop-shadow(0 0 6px rgba(160, 120, 255, 0.7)); }
[data-skin="ttt:gold"] { --ttt-x: #ffd36b; --ttt-o: #fff1b8; --ttt-glow: drop-shadow(0 0 5px rgba(255, 211, 107, 0.6)); }

/* витрина скинов во вкладке «Вдвоём» */
.duel-skins {
  margin-top: 18px;
}

.skin-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.skin-tab {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.skin-tab.is-active {
  color: #04121d;
  background: var(--accent);
}

.skin-preview {
  display: grid;
  width: 100%;
  height: 64px;
  margin-bottom: 4px;
  place-items: center;
}

.skin-sea {
  --sea-gap: 2px;
  display: grid;
  width: 92%;
  gap: var(--sea-gap);
  grid-template-columns: repeat(4, 1fr);
}

.skin-board {
  display: grid;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 8px;
  grid-template-columns: 1fr 1fr;
}

.skin-board.ck {
  --board: 240px;
}

.skin-ttt {
  display: grid;
  width: 112px;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.skin-ttt .ttt-cell {
  aspect-ratio: 1;
  border-radius: 12px;
}

.skin-note {
  margin: 10px 4px 0;
  color: var(--faint);
  font-size: 0.74rem;
  line-height: 1.3;
}

.duel-confetti {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sea-fx,
  .sea-rocket { display: none; }
}

/* ---------- камень, ножницы, бумага ---------- */

.duel-board[data-game="rps"] {
  width: var(--board-w);
}

.rps {
  /* рука соперника сверху, своя снизу: размер — от свободной высоты, чтобы влезли кнопки жестов */
  --hand: clamp(72px, calc((var(--stage-h, 540px) - 300px) / 2), 150px);
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rps-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rps-score-num {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.rps-score-sub,
.rps-label {
  color: var(--muted);
  font-size: 0.78rem;
}

.rps-arena {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rps-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rps-side.them {
  flex-direction: column-reverse;
}

.rps-hand {
  position: relative;
  display: grid;
  width: var(--hand);
  height: var(--hand);
  place-items: center;
  border-radius: 28%;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, filter 0.25s ease;
}

.rps-glyph {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: calc(var(--hand) * 0.58);
  line-height: 1;
}

/* рука соперника смотрит на нас; rotate отдельно от transform, чтобы не мешать анимациям */
.rps-side.them .rps-glyph {
  rotate: 180deg;
}

.rps-hand.is-secret .rps-glyph {
  color: rgba(238, 244, 249, 0.32);
  font-family: inherit;
  font-size: calc(var(--hand) * 0.4);
  font-weight: 800;
  rotate: none;
}

.rps-hand.is-secret:not(.is-ready) {
  animation: rps-think 1.4s ease-in-out infinite;
}

@keyframes rps-think {
  50% { background: rgba(60, 200, 255, 0.1); }
}

.rps-hand.is-ready {
  background: rgba(58, 208, 127, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(58, 208, 127, 0.6);
}

.rps-check {
  position: absolute;
  top: 7%;
  right: 7%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #3ad07f;
  color: #062312;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 800;
}

.rps-hand.is-mine {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.rps-hand.is-win {
  background: rgba(58, 208, 127, 0.16);
  box-shadow: 0 0 0 2px #3ad07f, 0 0 34px rgba(58, 208, 127, 0.45);
  transform: scale(1.06);
}

.rps-hand.is-loss {
  opacity: 0.5;
  filter: grayscale(0.6);
  transform: scale(0.94);
}

.rps-hand.is-tie {
  box-shadow: 0 0 0 2px #ffd36b, 0 0 26px rgba(255, 211, 107, 0.3);
}

.rps-mid {
  min-height: 1.5em;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
}

.rps-mid.is-vs {
  color: rgba(238, 244, 249, 0.35);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
}

.rps-mid.is-win { color: #3ad07f; }
.rps-mid.is-loss { color: #ff7a9a; }
.rps-mid.is-tie { color: #ffd36b; }

.rps-picks {
  display: grid;
  width: 100%;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.rps-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 9px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}

.duel-view.your-turn .rps-pick:not(:disabled) {
  box-shadow: inset 0 0 0 1.5px rgba(60, 200, 255, 0.45);
}

.rps-pick:not(:disabled):active {
  transform: scale(0.94);
  background: var(--accent-soft);
}

.rps-pick:disabled {
  opacity: 0.42;
  cursor: default;
}

.rps-pick.is-chosen {
  opacity: 1;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.rps-pick-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 2rem;
  line-height: 1.1;
}

.rps-pick-name {
  font-size: 0.78rem;
  font-weight: 700;
}

.rps-history {
  display: flex;
  min-height: 26px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.rps-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
}

.rps-chip i {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.rps-chip.win { box-shadow: inset 0 0 0 1px rgba(58, 208, 127, 0.55); }
.rps-chip.loss { box-shadow: inset 0 0 0 1px rgba(255, 122, 154, 0.45); }

.duel-icon.rps {
  background: rgba(255, 211, 107, 0.12);
}

.duel-icon .i-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .rps-hand.is-secret:not(.is-ready) { animation: none; }
}