/* === Durak — N-player responsive styles === */

:root {
  --bg: #111a14;
  --bg-dark: #070b08;
  --surface: #1a1a2e;
  --text: #e0e0ff;
  --text-muted: #7777aa;
  --card-bg: #2a2a44;
  --card-border: #444466;
  --card-red: #ff6b6b;
  --card-black: #f8f9fa;
  --btn-bg: rgba(255,255,255,0.07);
  --btn-border: rgba(255,255,255,0.18);
  --btn-text: rgba(255,255,255,0.7);
  --btn-disabled-bg: rgba(255,255,255,0.03);
  --btn-disabled-text: rgba(255,255,255,0.2);
  --overlay-bg: rgba(5,5,16,0.96);
  --header-bg: rgba(10,10,20,0.85);

  /* Felt table + seat/prompt/watermark tokens */
  --felt: radial-gradient(ellipse at center, #1f5740 0%, #0f2e22 70%, #081812 100%);
  --table-border: rgba(255, 215, 100, 0.12);
  --table-inner-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.4);
  --seat-bg: rgba(16, 36, 28, 0.85);
  --seat-border: rgba(255, 255, 255, 0.08);
  --active-seat-glow: rgba(255, 215, 100, 0.45);
  --prompt-bg: rgba(20, 40, 30, 0.85);
  --prompt-text: #f0f4f0;
  --watermark-color: rgba(255, 255, 255, 0.06);
}

body:not(.dark-mode) {
  --bg: #cde0d4;
  --bg-dark: #8ba994;
  --surface: #ffffff;
  --text: #1a202c;
  --text-muted: #64748b;
  --card-bg: #ffffff;
  --card-border: #d0d0d0;
  --card-red: #d32f2f;
  --card-black: #111111;
  --btn-bg: #eef0f4;
  --btn-border: #ccd0d8;
  --btn-text: #333;
  --btn-disabled-bg: #f4f4f4;
  --btn-disabled-text: #bbb;
  --overlay-bg: rgba(240,244,248,0.97);
  --header-bg: rgba(240,244,248,0.9);

  /* Felt table + seat/prompt/watermark tokens (light) */
  --felt: radial-gradient(ellipse at center, #4a7a5c 0%, #355a44 70%, #264030 100%);
  --table-border: rgba(0, 0, 0, 0.15);
  --table-inner-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.2);
  --seat-bg: rgba(245, 245, 240, 0.9);
  --seat-border: rgba(0, 0, 0, 0.08);
  --active-seat-glow: rgba(40, 100, 60, 0.4);
  --prompt-bg: rgba(255, 255, 255, 0.9);
  --prompt-text: #1a2a20;
  --watermark-color: rgba(255, 255, 255, 0.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Paint the root element so iOS PWA safe areas (notch / home indicator)
   don't show through as white. Root tracks the active theme via :has(). */
html {
  background: #070b08;
}
html:has(body:not(.dark-mode)) {
  background: #8ba994;
}

html, body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: radial-gradient(circle at 50% 40%, var(--bg) 0%, var(--bg-dark) 100%);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 700px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 4px env(safe-area-inset-bottom);
}

/* --- Header --- */
#header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  padding-right: 58px;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
#game-title { color: var(--text); font-size: 0.9rem; flex-shrink: 0; }

#trump-display {
  font-weight: 700;
  font-size: 0.88rem;
  flex-shrink: 0;
}
#trump-display.suit-red   { color: var(--card-red); }
#trump-display.suit-black { color: var(--card-black); }

#status-display {
  flex: 1;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#status-display.is-attack   { color: #ffb347; }
#status-display.is-defend   { color: #88ccff; }
#status-display.is-pile-on  { color: #c2a0ff; }
#status-display.status-thinking { animation: pulse 1s ease-in-out infinite; }
body:not(.dark-mode) #status-display.is-attack  { color: #e07a1a; }
body:not(.dark-mode) #status-display.is-defend  { color: #1976d2; }
body:not(.dark-mode) #status-display.is-pile-on { color: #6a3fb5; }

#settings-gear-btn {
  position: fixed !important;
  top: calc(env(safe-area-inset-top) + 6px) !important;
  right: calc(env(safe-area-inset-right) + 8px) !important;
  width: 42px !important; height: 42px !important;
  border-radius: 10px !important;
}

/* --- Opponents row --- */
#opponents {
  display: flex;
  gap: 8px;
  padding: 8px 12px 4px;
  justify-content: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* --- Seat tiles (opponents) --- */
.seat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.seat-tile .seat-card {
  position: relative;
  width: 50px;
  height: 70px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px),
    var(--surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
body:not(.dark-mode) .seat-tile .seat-card {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px),
    #e8e8f0;
}

.seat-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  background: #e53935;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  border-radius: 13px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
}

.seat-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.seat-role {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
}
body:not(.dark-mode) .seat-role { background: rgba(0, 0, 0, 0.06); }

.seat-role.role-attacker { color: #ffb347; }
.seat-role.role-defender { color: #88ccff; }
.seat-role.role-thrower  { color: #c2a0ff; }
.seat-role.role-out      { color: var(--text-muted); }

body:not(.dark-mode) .seat-role.role-attacker { color: #e07a1a; }
body:not(.dark-mode) .seat-role.role-defender { color: #1976d2; }
body:not(.dark-mode) .seat-role.role-thrower  { color: #6a3fb5; }

.seat-tile.is-priority {
  transform: translateY(-3px);
}
.seat-tile.is-priority .seat-card {
  box-shadow:
    0 0 0 2px var(--active-seat-glow),
    0 6px 24px var(--active-seat-glow),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

.seat-tile.is-out {
  opacity: 0.35;
  filter: grayscale(0.6);
}

/* --- Action Prompt (on the table) --- */
.action-prompt {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 140px);
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--prompt-bg);
  color: var(--prompt-text);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border: 1px solid transparent;
  z-index: 3;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.action-prompt.hidden { display: none; }

.action-prompt.is-attack   { border-left: 3px solid #ffb347; padding-left: 15px; }
.action-prompt.is-defend   { border-left: 3px solid #88ccff; padding-left: 15px; }
.action-prompt.is-pile-on  { border-left: 3px solid #c2a0ff; padding-left: 15px; }
.action-prompt.is-wait     { opacity: 0.8; }

body:not(.dark-mode) .action-prompt.is-attack  { border-left-color: #e07a1a; }
body:not(.dark-mode) .action-prompt.is-defend  { border-left-color: #1976d2; }
body:not(.dark-mode) .action-prompt.is-pile-on { border-left-color: #6a3fb5; }

.action-prompt.status-thinking { animation: pulse 1s ease-in-out infinite; }

#pile-banner {
  color: #ffb347;
  background: rgba(255, 179, 71, 0.18);
}
body:not(.dark-mode) #pile-banner {
  color: #e07a1a;
  background: rgba(224, 122, 26, 0.15);
}

/* --- Table Center — felt surface --- */
#table-center {
  flex: 1.5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px;
  min-height: 0;
  margin: 2px 8px;
  background: var(--felt);
  border: 1px solid var(--table-border);
  border-radius: 16px;
  box-shadow: var(--table-inner-shadow);
  overflow: clip;
}

/* Empty-state trump watermark — sits behind deck + field */
#field-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#table-center.field-empty #field-watermark {
  opacity: 1;
}
#field-watermark svg {
  width: 40%;
  max-width: 280px;
  height: auto;
}
#field-watermark svg path {
  fill: var(--watermark-color);
}

#deck-zone {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 46px;
  height: 64px;
  z-index: 2;
  pointer-events: none;
}

#deck-count, #discard-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  background: #e53935;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  border-radius: 13px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  z-index: 5;
  pointer-events: none;
}


#deck-zone .card-btn,
#discard-zone .card-btn {
  width: 46px;
  height: 64px;
}

#discard-zone {
  position: absolute;
  top: 6px;
  right: 6px;
  left: auto;
  width: 46px;
  height: 64px;
  z-index: 2;
  pointer-events: none;
}

#discard-zone .card-btn {
  position: absolute;
  pointer-events: none;
}

#trump-slot {
  position: absolute;
  top: 6px;
  left: 33px;
  width: 46px;
  height: 64px;
  transform: rotate(90deg);
  z-index: 1;
}

#deck-stack, #discard-stack {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
}

#deck-stack .card-btn, #discard-stack .card-btn {
  position: absolute;
  pointer-events: none;
}

#field {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: safe center;
  gap: 6px;
  height: 100%;
  background: transparent;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  padding: 6px 44px 20px 44px;
  box-sizing: border-box;
}
#field::-webkit-scrollbar { display: none; }
.field-pair { display: flex; flex-direction: column; align-items: center; position: relative; }
.field-pair + .field-pair { margin-left: -20px; }
.field-pair > * + * { margin-top: -54px; }

/* --- Human zone (bottom) --- */
#human-zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: min-content;
  padding: 4px 0 env(safe-area-inset-bottom, 0px);
}

.options-row {
  display: flex;
  gap: 6px;
  padding: 4px 8px;
  justify-content: center;
  flex-shrink: 0;
  min-height: 64px;
}

#wait-spinner {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 1.6rem;
}
#wait-spinner.hidden { display: none; }

.suit-pulse {
  animation: pulse-suit 0.8s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-muted);
}
.suit-pulse.suit-hearts, .suit-pulse.suit-diamonds { color: var(--card-red); }
.suit-pulse.suit-spades, .suit-pulse.suit-clubs { color: var(--card-black); }

.suit-pulse:nth-child(1) { animation-delay: 0s; }
.suit-pulse:nth-child(2) { animation-delay: 0.2s; }
.suit-pulse:nth-child(3) { animation-delay: 0.4s; }
.suit-pulse:nth-child(4) { animation-delay: 0.6s; }

@keyframes pulse-suit {
  0% { transform: translateY(0); opacity: 0.2; }
  100% { transform: translateY(-6px); opacity: 1; }
}
.action-btn {
  min-height: 56px;
  min-width: 80px;
  padding: 8px 24px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 800;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, transform 0.1s;
}
.action-btn.hidden { display: none; }
.action-btn[data-action="take"] {
  background: rgba(255,100,100,0.15);
  border-color: rgba(255,100,100,0.3);
  color: #ff8888;
}
.action-btn[data-action="pass"] {
  background: rgba(100,200,255,0.15);
  border-color: rgba(100,200,255,0.3);
  color: #88ccff;
}
.action-btn[data-action="done"] {
  background: rgba(195,160,255,0.15);
  border-color: rgba(195,160,255,0.3);
  color: #c2a0ff;
}
body:not(.dark-mode) .action-btn[data-action="take"] { background: rgba(211,47,47,0.1); border-color: rgba(211,47,47,0.3); color: #d32f2f; }
body:not(.dark-mode) .action-btn[data-action="pass"] { background: rgba(30,136,229,0.1); border-color: rgba(30,136,229,0.3); color: #1e88e5; }
body:not(.dark-mode) .action-btn[data-action="done"] { background: rgba(120,80,200,0.1); border-color: rgba(120,80,200,0.3); color: #5e35b1; }
.action-btn:active { transform: scale(0.96); background: rgba(255,255,255,0.25); }
body:not(.dark-mode) .action-btn:active { background: rgba(0,0,0,0.1); }

/* --- Hand container --- */
.hand-row {
  --hand-card-w: 84px;
  display: flex;
  gap: 0;
  padding: 20px 8px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
  flex: 1;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: safe center;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hand-row.dragging { cursor: grabbing; scroll-behavior: auto; }
.hand-row.dragging .card-btn { pointer-events: none; }
.hand-row > * + * { margin-left: calc(var(--hand-card-w) * -0.45); }
.hand-row::-webkit-scrollbar { display: none; }

/* --- Cards --- */
.card-btn {
  position: relative;
  display: flex;
  width: 84px;
  height: 118px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(var(--flip-dx, 0px), var(--flip-dy, 0px))
             rotate(var(--fan-angle, 0deg))
             translateY(var(--fan-lift, 0px))
             scale(var(--card-scale, 1));
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s ease;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.card-btn.flip-animating {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 100;
}
.card-btn:active { --card-scale: 0.95; z-index: 10; }
.card-btn.suit-hearts, .card-btn.suit-diamonds { color: var(--card-red); }
.card-btn.suit-spades, .card-btn.suit-clubs { color: var(--card-black); }
.card-btn.trump-card {
  border-color: rgba(255, 200, 50, 0.9);
  box-shadow: 0 0 8px rgba(255, 200, 50, 0.4), inset 0 0 6px rgba(255, 200, 50, 0.2);
}
.card-btn.field-card { cursor: default; opacity: 0.95; width: 76px; height: 106px; }

.card-placeholder {
  width: 76px;
  height: 106px;
  pointer-events: none;
  visibility: hidden;
}

/* --- Overlays --- */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px 20px;
  gap: 12px;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.overlay.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.g-title { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 800; letter-spacing: 0.06em; color: var(--text); }
.g-sub   { font-size: clamp(0.85rem, 3vw, 1.1rem); color: var(--text-muted); text-align: center; max-width: 300px; line-height: 1.4; }
.g-rules { font-size: clamp(0.72rem, 2.5vw, 0.88rem); color: var(--text-muted); text-align: center; max-width: 320px; line-height: 1.5; }

.setup-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 8px;
}

.mbtn {
  min-height: 48px;
  padding: 12px 36px;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  color: #fff;
  transition: transform 0.1s;
}
.mbtn:active { transform: scale(0.96); }
.mbtn.red { background: #e53935; }
.mbtn.red:active { background: #c62828; }

/* --- Mode + count toggles --- */
.mode-toggle, .count-toggle {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--btn-border);
}
.mode-btn, .count-btn {
  flex: 1;
  padding: 8px 18px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}
.count-btn { min-width: 44px; padding: 8px 0; }
.mode-btn.active, .count-btn.active { background: #e53935; color: #fff; }

/* --- Settings panel section --- */
#durak-settings {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body:not(.dark-mode) #durak-settings { border-bottom-color: rgba(0,0,0,0.08); }
#durak-settings .settings-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
#durak-settings .settings-info { font-size: 0.95rem; font-weight: 600; color: var(--text); }
#durak-settings .settings-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

/* --- Thinking pulse --- */
.status-thinking { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* --- Names Modal --- */
.scrollable-modal {
  justify-content: flex-start;
  padding-top: max(40px, 10vh);
  padding-bottom: 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.names-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 16px 0;
}
.name-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.name-input-group label {
  width: 70px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
.name-input-group input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}
.name-input-group input:focus {
  border-color: #88ccff;
  box-shadow: 0 0 0 2px rgba(136, 204, 255, 0.2);
}
body:not(.dark-mode) .name-input-group input:focus {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}
.names-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.mbtn.outline {
  background: transparent;
  border: 1px solid var(--btn-border);
  color: var(--text);
}
.mbtn.outline:active {
  background: rgba(255,255,255,0.05);
}
body:not(.dark-mode) .mbtn.outline:active {
  background: rgba(0,0,0,0.05);
}

/* --- Responsive --- */
@media (max-width: 380px) {
  .card-btn { width: 74px; height: 104px; }
  .card-btn.field-card { width: 64px; height: 90px; }
  .card-placeholder { width: 64px; height: 90px; }
  .hand-row { --hand-card-w: 74px; }
  .hand-row > * + * { margin-left: calc(var(--hand-card-w) * -0.45); }
  .action-btn { padding: 8px 14px; font-size: 0.9rem; min-width: 64px; }
  .seat-tile .seat-card { width: 44px; height: 62px; }
  .seat-count { min-width: 22px; height: 22px; font-size: 0.72rem; line-height: 22px; top: -5px; right: -5px; border-radius: 11px; }
  .seat-name { font-size: 0.62rem; }
  .seat-role { font-size: 0.54rem; padding: 1px 4px; }
  #opponents { gap: 4px; padding: 6px 6px 3px; }
  .count-btn { min-width: 36px; padding: 6px 0; font-size: 0.82rem; }
  .mode-btn { padding: 6px 12px; font-size: 0.82rem; }
  #deck-zone { width: 40px; height: 56px; top: 6px; left: 6px; }
  #trump-slot { width: 40px; height: 56px; top: 6px; left: 28px; transform: rotate(90deg); }
  #discard-zone { top: 6px; right: 6px; left: auto; width: 40px; height: 56px; }
  #deck-zone .card-btn, #discard-zone .card-btn { width: 40px; height: 56px; }
  #field { padding: 6px 40px 20px 40px; }
  .field-pair + .field-pair { margin-left: -18px; }
  .field-pair > * + * { margin-top: -45px; }
  .action-prompt { font-size: 0.82rem; padding: 6px 12px; top: 8px; max-width: calc(100% - 100px); }
  #deck-count, #discard-count { min-width: 22px; height: 22px; font-size: 0.72rem; line-height: 22px; border-radius: 11px; }
}

@media (min-width: 500px) {
  .card-btn { width: 94px; height: 132px; }
  .card-btn.field-card { width: 84px; height: 118px; }
  .card-placeholder { width: 84px; height: 118px; }
  .hand-row { --hand-card-w: 94px; }
  .hand-row > * + * { margin-left: calc(var(--hand-card-w) * -0.45); }
  .seat-tile .seat-card { width: 56px; height: 78px; }
  #deck-zone { width: 56px; height: 78px; top: 12px; left: 12px; }
  #trump-slot { width: 56px; height: 78px; top: 12px; left: 40px; transform: rotate(90deg); }
  #discard-zone { top: 12px; right: 12px; left: auto; width: 56px; height: 78px; }
  #deck-zone .card-btn, #discard-zone .card-btn { width: 56px; height: 78px; }
  #field { padding: 6px 64px 20px 64px; }
  .field-pair + .field-pair { margin-left: -22px; }
  .field-pair > * + * { margin-top: -60px; }
  .action-prompt { font-size: 1.1rem; padding: 10px 22px; top: 14px; }
  .seat-count, #deck-count, #discard-count { min-width: 28px; height: 28px; font-size: 0.9rem; line-height: 28px; border-radius: 14px; top: -7px; right: -7px; }
}

@media (min-width: 768px) {
  .card-btn { width: 106px; height: 148px; border-radius: 8px; }
  .card-btn.field-card { width: 94px; height: 132px; }
  .card-placeholder { width: 94px; height: 132px; }
  .hand-row { --hand-card-w: 106px; }
  .hand-row > * + * { margin-left: calc(var(--hand-card-w) * -0.45); }
  .action-btn { padding: 10px 28px; font-size: 1.2rem; }
  .seat-tile .seat-card { width: 62px; height: 87px; }
  #deck-zone { width: 62px; height: 87px; top: 14px; left: 14px; }
  #trump-slot { width: 62px; height: 87px; top: 14px; left: 45px; transform: rotate(90deg); }
  #discard-zone { top: 14px; right: 14px; left: auto; width: 62px; height: 87px; }
  #deck-zone .card-btn, #discard-zone .card-btn { width: 62px; height: 87px; }
  #field { padding: 6px 74px 20px 74px; }
  .field-pair + .field-pair { margin-left: -24px; }
  .field-pair > * + * { margin-top: -66px; }
  .seat-count, #deck-count, #discard-count { min-width: 32px; height: 32px; font-size: 1.05rem; line-height: 32px; border-radius: 16px; top: -8px; right: -8px; }
}

@media (max-width: 420px) {
  .seat-tile .seat-role { font-size: 0.5rem; padding: 1px 3px; letter-spacing: 0.02em; }
}