/* Endesga 32 inspired palette */
:root {
  --bg: #0f0f1a;
  --panel: #1a1c2c;
  --panel-border: #2d3a4f;
  --felt: #1d4d3a;
  --felt-dark: #163d2f;
  --felt-wood: #6b4223;
  --felt-wood-dark: #4a2e18;
  --accent: #f4a261;
  --accent-hover: #e76f51;
  --text: #e8e6e3;
  --muted: #8b9bb4;
  --red: #e43f5a;
  --shadow: rgba(0, 0, 0, 0.45);
  --card-w: clamp(54px, 7.2vh, 82px);
  --card-h: calc(var(--card-w) * 512 / 368);
  --play-w: clamp(76px, 8.5vh, 108px);
  --play-h: clamp(106px, 11.5vh, 140px);
  --draw-w: clamp(56px, 5.2vw, 72px);
  --draw-h: clamp(78px, 7.2vw, 96px);
  --hand-overlap: clamp(22px, 2.1vw, 30px);
  --stack-step: 4px;
  --calligraphy: rgba(255, 255, 255, 0.88);
  --calligraphy-soft: rgba(255, 255, 255, 0.42);
  --calligraphy-faint: rgba(255, 255, 255, 0.16);
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M8 64 C8 30 18 12 64 8' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M14 56 C16 34 26 18 54 14' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.55' stroke-linecap='round'/%3E%3Cpath d='M4 68 Q22 62 28 44' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.4' stroke-linecap='round'/%3E%3Cpath d='M20 64 Q30 58 34 46' fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.35'/%3E%3Ccircle cx='10' cy='62' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E");
  --corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M64 64 C64 30 54 12 8 8' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M58 56 C56 34 46 18 18 14' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.55' stroke-linecap='round'/%3E%3Cpath d='M68 68 Q50 62 44 44' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.4' stroke-linecap='round'/%3E%3Cpath d='M52 64 Q42 58 38 46' fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.35'/%3E%3Ccircle cx='62' cy='62' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E");
  --corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M8 8 C8 42 18 60 64 64' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M14 16 C16 38 26 54 54 58' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.55' stroke-linecap='round'/%3E%3Cpath d='M4 4 Q22 10 28 28' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.4' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='10' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath d='M64 8 C64 42 54 60 8 64' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M58 16 C56 38 46 54 18 58' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.55' stroke-linecap='round'/%3E%3Cpath d='M68 4 Q50 10 44 28' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.4' stroke-linecap='round'/%3E%3Ccircle cx='62' cy='10' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E");
  --swash-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M4 18 C30 4 50 4 60 12 C70 20 90 20 116 6' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M20 16 C40 10 52 10 60 14 C68 18 80 18 100 12' fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.45'/%3E%3C/svg%3E");
  --frame-pad-top: 2.35rem;
  --frame-pad-x: 2.1rem;
  --frame-pad-bottom: 1.85rem;
  --frame-pad-soft: 1.55rem;
  --frame-pad-table: 1.65rem;
  --frame-pad-table-x: 1.5rem;
  --corner-size-table: 28px;
  --corner-size: 44px;
  --corner-size-header: 34px;
  --corner-size-soft: 30px;
  --corner-size-pile: 26px;
  --pile-corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M5 35 C5 13 13 5 35 5' fill='none' stroke='%23ffffff' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M9 31 C10 19 19 10 31 9' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.58' stroke-linecap='round'/%3E%3Cpath d='M3 37 Q9 33 12 27' fill='none' stroke='%23ffffff' stroke-width='0.65' opacity='0.38' stroke-linecap='round'/%3E%3C/svg%3E");
  --pile-corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M35 35 C35 13 27 5 5 5' fill='none' stroke='%23ffffff' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M31 31 C30 19 21 10 9 9' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.58' stroke-linecap='round'/%3E%3Cpath d='M37 37 Q31 33 28 27' fill='none' stroke='%23ffffff' stroke-width='0.65' opacity='0.38' stroke-linecap='round'/%3E%3C/svg%3E");
  --pile-corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M5 5 C5 27 13 35 35 35' fill='none' stroke='%23ffffff' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M9 9 C10 21 19 30 31 31' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.58' stroke-linecap='round'/%3E%3Cpath d='M3 3 Q9 7 12 13' fill='none' stroke='%23ffffff' stroke-width='0.65' opacity='0.38' stroke-linecap='round'/%3E%3C/svg%3E");
  --pile-corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M35 5 C35 27 27 35 5 35' fill='none' stroke='%23ffffff' stroke-width='1.35' stroke-linecap='round'/%3E%3Cpath d='M31 9 C30 21 21 30 9 31' fill='none' stroke='%23ffffff' stroke-width='0.8' opacity='0.58' stroke-linecap='round'/%3E%3Cpath d='M37 3 Q31 7 28 13' fill='none' stroke='%23ffffff' stroke-width='0.65' opacity='0.38' stroke-linecap='round'/%3E%3C/svg%3E");
  --pile-swash-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 14'%3E%3Cpath d='M3 10 C22 4 38 4 48 7 C58 10 74 10 93 4' fill='none' stroke='%23ffffff' stroke-width='0.95' stroke-linecap='round' opacity='0.5'/%3E%3Cpath d='M14 9 C30 6 42 6 48 7.5 C54 9 66 9 82 6' fill='none' stroke='%23ffffff' stroke-width='0.6' opacity='0.32' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  background:
    radial-gradient(ellipse at top, #243b55 0%, var(--bg) 55%),
    var(--bg);
  color: var(--text);
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  pointer-events: none;
}

.app {
  height: 100dvh;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.3rem 0.45rem 0.5rem;
  display: grid;
  gap: 0.28rem;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "header"
    "game-table";
  overflow: hidden;
  --table-felt: var(--felt);
  --table-felt-dark: var(--felt-dark);
  --table-border-color: #2a6b52;
  --table-badge: var(--felt);
  --table-surface: rgba(0, 0, 0, 0.14);
}

.app.app-table--wood {
  --table-felt: var(--felt-wood);
  --table-felt-dark: var(--felt-wood-dark);
  --table-border-color: #85562f;
  --table-badge: var(--felt-wood);
  --table-surface: rgba(0, 0, 0, 0.18);
}

.game-table {
  grid-area: game-table;
  display: grid;
  gap: 0.22rem;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas:
    "opponent"
    "table"
    "player";
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  border-radius: 10px;
  padding: 0.3rem 0.35rem 0.35rem;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
    linear-gradient(160deg, var(--table-felt) 0%, var(--table-felt-dark) 100%);
  border: 1px solid var(--table-border-color);
  box-shadow: 0 4px 18px var(--shadow);
}

.game-table .panel:not(.panel--playfield) {
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0.7rem 0.5rem;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.game-table .opponent-area.panel {
  padding-top: 0.5rem;
  padding-bottom: 0.45rem;
}

.game-table .player-area.panel {
  padding-top: 0.55rem;
  padding-bottom: 0.4rem;
}

.game-table .opponent-area .area-header,
.game-table .player-area .player-bar {
  flex-shrink: 0;
  margin-bottom: 0.05rem;
}

.game-table .area-header h2 {
  font-size: 0.78rem;
}

.game-table .opponent-area .hand-wrap,
.game-table .player-area .hand-wrap {
  flex: 1 1 auto;
  min-height: var(--card-h);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.1rem 0.25rem;
  margin-inline: 0.1rem;
  overflow: hidden;
}

.game-table .hand-wrap {
  padding-inline: 0.4rem;
}

.game-table .panel {
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  isolation: isolate;
}

.game-table .panel::before {
  inset: 6px;
}

.game-table .panel::after {
  background-image:
    var(--corner-tl),
    var(--corner-tr),
    var(--corner-bl),
    var(--corner-br);
  background-size:
    var(--corner-size-soft) var(--corner-size-soft),
    var(--corner-size-soft) var(--corner-size-soft),
    var(--corner-size-soft) var(--corner-size-soft),
    var(--corner-size-soft) var(--corner-size-soft);
  background-position:
    6px 6px,
    calc(100% - 6px) 6px,
    6px calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px);
}

.game-table .badge {
  background: var(--table-badge);
}

.game-table .player-bar {
  padding-inline: 0.25rem;
}

.game-table .panel--playfield {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding: 1.2rem 1.15rem;
  overflow: hidden;
  --draw-w: clamp(62px, 6.8vh, 82px);
  --draw-h: clamp(86px, 9.4vh, 114px);
  --pile-box-width: calc(var(--draw-w) + 2.1rem);
  --pile-box-height: calc(var(--draw-h) + 1.5rem);
  --stack-step: 2px;
}

.game-table .panel--playfield::before {
  inset: 12px;
  border-color: rgba(255, 255, 255, 0.2);
}

.game-table .panel--playfield::after {
  background-size:
    var(--corner-size-table) var(--corner-size-table),
    var(--corner-size-table) var(--corner-size-table),
    var(--corner-size-table) var(--corner-size-table),
    var(--corner-size-table) var(--corner-size-table);
  background-position:
    8px 8px,
    calc(100% - 8px) 8px,
    8px calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px);
}

.header {
  grid-area: header;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 0;
  z-index: 50;
  overflow: visible;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  position: relative;
  overflow: visible;
  z-index: 3;
  padding-left: 0.15rem;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.social-icons li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.social-icons .icon {
  text-decoration: none;
  border-bottom: none;
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.social-icons .icon::before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  font-size: 0.95rem;
}

.social-icons .icon.solid::before {
  font-weight: 900;
}

.social-icons .icon.brands::before {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

.social-icons .icon > .label {
  display: none;
}

.social-icons .icon:hover {
  color: rgba(255, 255, 255, 0.95);
  opacity: 1;
  transform: translateY(-1px);
}

.brand h1 {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rules-details {
  font-size: 0.72rem;
  color: var(--muted);
  position: relative;
}

.rules-details summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--calligraphy-soft);
  border-radius: 6px;
  position: relative;
  z-index: 2;
}

.rules-details summary::-webkit-details-marker {
  display: none;
}

.rules-details[open] summary {
  margin-bottom: 0.35rem;
}

.rules-details ul,
.rules-details .rules-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 200;
  margin: 0;
  padding: 0.55rem 0.55rem 0.55rem 1.15rem;
  background: rgba(10, 12, 20, 0.94);
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  box-shadow: 0 10px 28px var(--shadow);
  width: max-content;
  max-width: min(320px, 92vw);
  max-height: min(52vh, 22rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  line-height: 1.45;
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(0, 0, 0, 0.2);
}

.rules-details ul::-webkit-scrollbar,
.rules-details .rules-panel::-webkit-scrollbar {
  width: 6px;
}

.rules-details ul::-webkit-scrollbar-thumb,
.rules-details .rules-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.header .btn-secondary {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text);
}

.header .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.32);
}

.header .table-switch__text {
  color: rgba(255, 255, 255, 0.82);
}

.rules-details li + li {
  margin-top: 0.35rem;
}

.rules-details .rules-attribution {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  color: var(--muted);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--calligraphy-soft);
  border-radius: 8px;
  padding: var(--frame-pad-top) var(--frame-pad-x) var(--frame-pad-bottom);
  box-shadow: 0 4px 14px var(--shadow);
  min-height: 0;
}

.calligraphy-border,
.panel {
  position: relative;
  isolation: isolate;
}

.calligraphy-border::before,
.panel::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--calligraphy-faint);
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}

.calligraphy-border::after,
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    var(--corner-tl),
    var(--corner-tr),
    var(--corner-bl),
    var(--corner-br),
    var(--swash-top);
  background-repeat: no-repeat;
  background-size:
    var(--corner-size) var(--corner-size),
    var(--corner-size) var(--corner-size),
    var(--corner-size) var(--corner-size),
    var(--corner-size) var(--corner-size),
    76px 14px;
  background-position:
    6px 6px,
    calc(100% - 6px) 6px,
    6px calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    center 8px;
}

.calligraphy-border > *,
.panel > * {
  position: relative;
  z-index: 2;
}

.calligraphy-border--soft::before {
  inset: 8px;
  border-color: rgba(255, 255, 255, 0.1);
}

.calligraphy-border--soft::after {
  background-size:
    var(--corner-size-soft) var(--corner-size-soft),
    var(--corner-size-soft) var(--corner-size-soft),
    var(--corner-size-soft) var(--corner-size-soft),
    var(--corner-size-soft) var(--corner-size-soft),
    56px 12px;
  background-position:
    4px 4px,
    calc(100% - 4px) 4px,
    4px calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    center 6px;
}

.header.calligraphy-border {
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
    linear-gradient(160deg, var(--table-felt) 0%, var(--table-felt-dark) 100%);
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  padding: 2.55rem var(--frame-pad-x) 0.7rem;
  box-shadow: 0 4px 14px var(--shadow);
}

.header.calligraphy-border::before {
  inset: 11px;
}

.header.calligraphy-border::after {
  background-size:
    var(--corner-size-header) var(--corner-size-header),
    var(--corner-size-header) var(--corner-size-header),
    var(--corner-size-header) var(--corner-size-header),
    var(--corner-size-header) var(--corner-size-header),
    58px 10px;
  background-position:
    6px 6px,
    calc(100% - 6px) 6px,
    6px calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    center 9px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding-right: 0.15rem;
  margin-top: calc(24px + 0.3rem);
}

.message {
  margin: calc(24px + 0.3rem) 0 0;
  padding: 0.4rem 2rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--calligraphy-faint);
  border-radius: 6px;
  font-size: clamp(0.72rem, 1.4vw, 0.85rem);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  position: relative;
}

.message::before,
.message::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--calligraphy-soft), transparent);
  pointer-events: none;
}

.message::before {
  left: 6px;
  transform: translateY(-50%) rotate(-8deg);
}

.message::after {
  right: 6px;
  transform: translateY(-50%) rotate(8deg);
}

.opponent-area { grid-area: opponent; overflow: hidden; }
.table {
  grid-area: table;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.player-area { grid-area: player; overflow: hidden; }

.hand-wrap {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 0 0.15rem;
}

.area-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  min-height: 1.1rem;
  padding-inline: 0.25rem;
}

.area-header h2 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.badge {
  background: var(--felt);
  color: #fff;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.hand {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  max-width: 100%;
  padding: 2px 0;
}

.hand .card + .card {
  margin-left: calc(-1 * var(--hand-overlap-local, var(--hand-overlap)));
}

.game-table .hand-wrap .hand {
  height: auto;
  min-height: 0;
  max-height: none;
  align-self: center;
  align-items: center;
}

.game-table .hand-wrap .card {
  width: var(--hand-card-w, var(--card-w));
  height: var(--hand-card-h, var(--card-h));
}

.table-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 2vw, 1.15rem);
  width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 0.15rem 0.5rem;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 2;
}

.pile-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 3vw, 2rem);
  flex-shrink: 0;
}

.draw-zone.pile-zone,
.play-zone.pile-zone {
  flex-shrink: 0;
  align-self: center;
}

.play-pile {
  position: relative;
  width: calc(var(--draw-w) + 6px);
  height: calc(var(--draw-h) + 6px);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  overflow: hidden;
}
.pile-zone.calligraphy-border {
  padding: var(--frame-pad-soft) 1.25rem 1.2rem;
  border-radius: 8px;
  background: var(--table-surface);
}

.pile-zone.calligraphy-border--pile {
  padding: 0.75rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--table-surface);
  overflow: hidden;
  width: var(--pile-box-width, calc(var(--draw-w) + 2.1rem));
  min-width: var(--pile-box-width, calc(var(--draw-w) + 2.1rem));
  max-width: var(--pile-box-width, calc(var(--draw-w) + 2.1rem));
  min-height: var(--pile-box-height, calc(var(--draw-h) + 1.5rem));
  height: var(--pile-box-height, calc(var(--draw-h) + 1.5rem));
  box-sizing: border-box;
  justify-content: center;
}

.calligraphy-border--pile::before {
  inset: 9px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.calligraphy-border--pile::after {
  background-image:
    var(--pile-corner-tl),
    var(--pile-corner-tr),
    var(--pile-corner-bl),
    var(--pile-corner-br),
    var(--pile-swash-bottom);
  background-size:
    var(--corner-size-pile) var(--corner-size-pile),
    var(--corner-size-pile) var(--corner-size-pile),
    var(--corner-size-pile) var(--corner-size-pile),
    var(--corner-size-pile) var(--corner-size-pile),
    min(68px, 80%) 9px;
  background-position:
    7px 7px,
    calc(100% - 7px) 7px,
    7px calc(100% - 7px),
    calc(100% - 7px) calc(100% - 7px),
    center calc(100% - 8px);
}

.pile-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
  min-width: 0;
}

.pile-zone.calligraphy-border--pile .draw-pile,
.pile-zone.calligraphy-border--pile .play-pile {
  flex-shrink: 0;
}

.draw-pile {
  width: calc(var(--draw-w) + 6px);
  height: calc(var(--draw-h) + 6px);
  position: relative;
  flex-shrink: 0;
}

.draw-pile .draw-pile-card {
  position: absolute;
  top: var(--stack-offset, 0);
  left: var(--stack-offset, 0);
  width: var(--draw-w);
  height: var(--draw-h);
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
  transition: transform 0.45s ease, opacity 0.35s ease;
}

.pile-row.reshuffling .play-pile-card:not(.play-pile-top) {
  transition: transform 0.62s ease, opacity 0.5s ease;
  transform: translate(calc(var(--stack-x, 0px) - 72px), calc(var(--stack-y, 0px) + 6px)) scale(0.72);
  opacity: 0;
}

.pile-row.reshuffling .play-pile-top {
  transition: transform 0.35s ease;
  transform: translate(var(--stack-x, 0px), var(--stack-y, 0px)) scale(1.02);
}

.pile-row.reshuffling .draw-pile {
  animation: draw-pile-receive 0.62s ease;
}

.pile-row.reshuffling .draw-zone {
  animation: draw-zone-pulse 0.62s ease;
}

@keyframes draw-pile-receive {
  0% {
    transform: scale(0.82);
    opacity: 0.35;
  }
  55% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes draw-zone-pulse {
  0%,
  100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.35);
  }
}

.play-pile-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(244, 162, 97, 0.35);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(0.62rem, 1.4vh, 0.75rem);
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  width: var(--draw-w);
  height: var(--draw-h);
  padding: 0.3rem;
}

.play-pile .play-pile-card {
  position: absolute;
  top: var(--stack-y, 0);
  left: var(--stack-x, 0);
  width: var(--draw-w);
  height: var(--draw-h);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  transition: transform 0.45s ease, opacity 0.35s ease, top 0.2s ease, left 0.2s ease;
}

.play-pile .play-pile-card.suit-hearts,
.play-pile .play-pile-card.suit-diamonds {
  outline: 2px solid rgba(228, 63, 90, 0.45);
  outline-offset: -1px;
}

.play-pile .play-pile-card.suit-clubs,
.play-pile .play-pile-card.suit-spades {
  outline: 2px solid rgba(255, 255, 255, 0.2);
  outline-offset: -1px;
}

.play-pile .play-pile-top {
  box-shadow: 3px 6px 16px rgba(0, 0, 0, 0.5);
}

.empty-pile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
}


.card {
  width: var(--card-w);
  height: var(--card-h);
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 8px var(--shadow);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.card img {
  object-fit: cover;
}

.card.face-down {
  background: transparent;
  box-shadow: 0 2px 6px var(--shadow);
}

.card.playable {
  cursor: pointer;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  z-index: 2;
}

.card.playable:hover {
  transform: translateY(-4px);
  z-index: 5;
}

.card:disabled {
  cursor: default;
}

.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.player-bar .area-header {
  margin-bottom: 0;
}

.player-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.btn {
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #1a1c2c;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--panel-border);
  padding: 0.35rem 0.6rem;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.table-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.table-switch__text {
  font-weight: 600;
}

.table-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.table-switch__track {
  width: 38px;
  height: 20px;
  background: var(--felt);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.table-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.table-switch input:checked + .table-switch__track {
  background: var(--felt-wood);
}

.table-switch input:checked + .table-switch__track .table-switch__thumb {
  transform: translateX(18px);
}

.table-switch input:focus-visible + .table-switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 18, 0.72);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 100;
}

.overlay[hidden] {
  display: none !important;
}

.overlay-card {
  background: var(--panel);
  border: 1px solid var(--calligraphy-soft);
  border-radius: 10px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  max-width: 360px;
  box-shadow: 0 20px 50px var(--shadow);
}

.overlay-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
  color: var(--accent);
}

.overlay-card p {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

@media (max-height: 720px) {
  :root {
    --card-w: clamp(48px, 6.5vh, 68px);
    --card-h: calc(var(--card-w) * 512 / 368);
    --play-w: 68px;
    --play-h: 92px;
    --draw-w: 48px;
    --draw-h: 66px;
    --hand-overlap: 20px;
    --stack-step: 3px;
    --frame-pad-top: 1.85rem;
    --frame-pad-x: 1.65rem;
    --frame-pad-bottom: 1.5rem;
    --frame-pad-soft: 1.25rem;
    --corner-size: 36px;
    --corner-size-header: 28px;
    --corner-size-soft: 24px;
  }

  .app {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.2rem 0.35rem 0.35rem;
  }

  .game-table {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    padding: 0.22rem 0.28rem 0.28rem;
  }

  .game-table .panel:not(.panel--playfield) {
    padding: 0.4rem 0.6rem 0.45rem;
  }

  .game-table .opponent-area.panel {
    padding-bottom: 0.4rem;
  }

  .game-table .player-area.panel {
    padding-top: 0.45rem;
  }

  .game-table .opponent-area .hand-wrap,
  .game-table .player-area .hand-wrap {
    padding: 0.08rem 0.2rem;
  }

  .game-table .panel--playfield {
    padding: 1rem 0.9rem;
    --draw-w: clamp(56px, 6.2vh, 68px);
    --draw-h: clamp(78px, 8.6vh, 94px);
    --pile-box-width: calc(var(--draw-w) + 1.9rem);
    --pile-box-height: calc(var(--draw-h) + 1.4rem);
  }

  .table-center {
    padding: 0.1rem 0.35rem;
    gap: 0.5rem;
  }

  .pile-row {
    gap: 0.65rem;
  }

  .game-table .panel--playfield::after {
    background-size:
      24px 24px,
      24px 24px,
      24px 24px,
      24px 24px;
  }

  .pile-zone.calligraphy-border--pile {
    padding: 0.7rem 0.85rem;
  }

  .header.calligraphy-border {
    padding-top: 2.1rem;
  }
}

@media (max-width: 640px) {
  /* Keep the single grid column at viewport width; without this the
     header's min-content width pushes the whole app past the right edge. */
  .app,
  .game-table {
    grid-template-columns: minmax(0, 1fr);
  }

  .header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .header.calligraphy-border {
    padding: 2.1rem 0.9rem 0.65rem;
  }

  .brand {
    min-width: 0;
  }

  .header .header-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.35rem;
    padding-right: 0;
  }

  .message {
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.75rem;
  }

  .brand-title {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  /* Expand the rules block in-flow so it pushes status/controls down
     instead of overlapping them underneath an absolute dropdown. */
  .rules-details {
    position: relative;
  }

  .rules-details[open] {
    width: 100%;
    flex-basis: 100%;
  }

  .rules-details ul,
  .rules-details .rules-panel {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    margin: 0 0 0.5rem;
    z-index: auto;
    background: #0a0c14;
  }

  .header:has(.rules-details[open]) .brand {
    z-index: 5;
  }

  .header:has(.rules-details[open]) .message,
  .header:has(.rules-details[open]) .header-actions {
    z-index: 1;
  }

  .game-table .panel:not(.panel--playfield) {
    padding-inline: 0.45rem;
  }

  .game-table .panel--playfield {
    padding: 0.9rem 0.6rem;
  }

  .table-center {
    gap: 0.75rem;
    padding-inline: 0.25rem;
  }

  .pile-row {
    gap: 0.7rem;
  }
}