/* ============================================================
   BISCA — Balatro-inspired look & feel
   ============================================================ */

:root {
  --red: #fe4c40;
  --red-dk: #a81c12;
  --blue: #0f9bff;
  --blue-dk: #085a9e;
  --orange: #ff9800;
  --orange-dk: #a35b00;
  --gold: #ffd54a;
  --cream: #f6f1e3;
  --cream-dk: #d9d2bd;
  --ink: #2a2733;
  --felt: #16382b;
  --felt-2: #0d241b;
  --panel: rgba(10, 26, 20, .82);
  --panel-edge: rgba(255, 255, 255, .12);
  --white: #fff;
  --shadow: rgba(0, 0, 0, .45);
  --cw: clamp(64px, 19vw, 104px);      /* my hand card width  */
  --ch: calc(var(--cw) * 1.4);
  --tw: calc(var(--cw) * .82);          /* table card width    */
  --th: calc(var(--tw) * 1.4);
  font-size: clamp(14px, 2.4vw, 18px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  font-family: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
  background: var(--felt-2);
  color: var(--white);
  user-select: none;
  -webkit-user-select: none;
}

#bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* faint CRT scanlines + vignette, very Balatro */
#crt {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%);
  mix-blend-mode: multiply;
}

#app { position: relative; z-index: 2; height: 100dvh; }

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen.active { display: flex; }

/* ============================== MENU ============================== */

.menu-box {
  width: min(92vw, 420px);
  max-height: 96dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 3px solid var(--panel-edge);
  border-radius: 18px;
  padding: 22px 22px 26px;
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
  scrollbar-width: none;
}
.menu-box::-webkit-scrollbar { display: none; }

.title {
  font-size: clamp(3.2rem, 15vw, 4.6rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  margin-top: 6px;
  color: var(--gold);
  text-shadow: 0 4px 0 var(--red-dk), 0 8px 0 rgba(0,0,0,.4), 0 12px 24px rgba(0,0,0,.6);
  filter: drop-shadow(0 0 18px rgba(255, 213, 74, .25));
}
.title span { display: inline-block; animation: bob 2.4s ease-in-out infinite; }
.title span:nth-child(2) { animation-delay: .15s; color: var(--red); }
.title span:nth-child(3) { animation-delay: .3s; }
.title span:nth-child(4) { animation-delay: .45s; color: var(--blue); }
.title span:nth-child(5) { animation-delay: .6s; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

.tagline { color: rgba(255,255,255,.75); font-size: .95rem; margin-top: -8px; }

.field { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.field span { font-size: .8rem; color: rgba(255,255,255,.65); padding-left: 4px; }

input[type=text] {
  font: inherit;
  font-size: 1.15rem;
  color: var(--white);
  background: rgba(0,0,0,.35);
  border: 3px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  text-align: center;
  min-width: 0;
}
input[type=text]:focus { border-color: var(--gold); }
#code-input { text-transform: uppercase; letter-spacing: .35em; flex: 1; }

.variant-toggle {
  display: flex; gap: 6px;
  background: rgba(0,0,0,.3);
  border-radius: 12px;
  padding: 5px;
}
.variant-toggle .seg {
  flex: 1;
  font: inherit; font-weight: 700; font-size: 1rem;
  border: none; border-radius: 9px;
  padding: 8px 6px;
  background: transparent;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  transition: background .15s, color .15s;
}
.variant-toggle .seg small { font-size: .62rem; font-weight: 400; opacity: .85; }
.variant-toggle .seg.active {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 3px 0 var(--red-dk);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.variant-toggle .seg.active[data-variant="sueca"] { background: var(--blue); box-shadow: 0 3px 0 var(--blue-dk); }

.score-toggle .seg { font-size: .9rem; padding: 6px; }
.score-toggle .seg.active {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--orange-dk);
  text-shadow: none;
}

/* card back theme picker (settings) */
.back-picker {
  display: flex; gap: 6px;
  background: rgba(0,0,0,.3);
  border-radius: 12px;
  padding: 5px;
}
.back-choice {
  flex: 1;
  font: inherit;
  border: 3px solid transparent; border-radius: 9px;
  padding: 7px 2px 5px;
  background: transparent;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .15s, background .15s, color .15s;
}
.back-choice small { font-size: .58rem; font-weight: 400; letter-spacing: .04em; }
.back-choice .cb-swatch {
  width: 36px; height: 50px;
  border-radius: 5px;
  background-size: 100% 100%, 14px 14px;
  box-shadow:
    inset 0 0 0 2px var(--cream),
    inset 0 0 0 3px var(--cb-dark),
    0 3px 6px rgba(0,0,0,.4);
}
.back-choice.active {
  border-color: var(--gold);
  background: rgba(255,213,74,.1);
  color: var(--white);
}
.back-choice.active .cb-swatch { box-shadow:
  inset 0 0 0 2px var(--cream),
  inset 0 0 0 3px var(--cb-dark),
  0 0 10px rgba(255,213,74,.45);
}

.lang-toggle {
  display: flex; gap: 4px;
  align-self: center;
  background: rgba(0,0,0,.3);
  border-radius: 9px;
  padding: 4px;
}
.lang-toggle .seg {
  font: inherit; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em;
  border: none; border-radius: 6px;
  padding: 4px 16px;
  background: transparent;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-toggle .seg.active { background: rgba(255,255,255,.16); color: var(--white); }

.lobby-variant {
  font-size: .8rem; letter-spacing: .3em; font-weight: 700;
  color: var(--blue);
  margin-top: -8px;
}

.menu-group { display: flex; flex-direction: column; gap: 10px; }
.group-label {
  font-size: .85rem; font-weight: 400;
  color: rgba(255,255,255,.6);
  letter-spacing: .18em; text-transform: uppercase;
}
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }

/* Pixel-style checkbox (private room toggle) */
.check-field {
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left;
  padding: 2px 4px;
  cursor: pointer;
  user-select: none;
}
.check-field input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-field .check-box {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-top: 1px;
  background: rgba(0,0,0,.35);
  border: 3px solid rgba(255,255,255,.18);
  border-radius: 8px;
  display: grid; place-items: center;
  transition: border-color .15s, background-color .15s;
}
.check-field .check-box::after {
  content: '✓';
  font-size: 1rem; line-height: 1; font-weight: 700;
  color: var(--gold);
  opacity: 0; transform: scale(.4);
  transition: opacity .12s, transform .12s;
}
.check-field input:checked + .check-box { border-color: var(--gold); background: rgba(255,213,74,.12); }
.check-field input:checked + .check-box::after { opacity: 1; transform: scale(1); }
.check-field input:focus-visible + .check-box { border-color: var(--white); }
.check-field .check-text { display: flex; flex-direction: column; gap: 2px; font-size: .95rem; }
.check-field .check-text .hint { font-size: .75rem; }

/* ============================== OPEN ROOMS ============================== */

.open-rooms {
  background: rgba(0,0,0,.3);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.open-rooms-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; color: rgba(255,255,255,.6);
  letter-spacing: .18em; text-transform: uppercase;
}
.btn-icon.refresh {
  width: 30px; height: 30px;
  font-size: 1rem;
  background: rgba(255,255,255,.1);
}
.rooms-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.rooms-list:empty { display: none; }
.rooms-list li {
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  animation: popin .25s ease;
}
.rooms-list .room-info {
  display: flex; flex-direction: column;
  min-width: 0; line-height: 1.25;
}
.rooms-list .room-host {
  font-size: .98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rooms-list .room-info small { font-size: .68rem; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.rooms-list .btn { flex-shrink: 0; }
#rooms-empty { text-align: center; padding: 2px 0 4px; }

/* ============================== BUTTONS ============================== */

.btn {
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.btn small { font-size: .72rem; font-weight: 400; opacity: .85; }
.btn:active { transform: translateY(4px); }
.btn:hover { filter: brightness(1.12); animation: jiggle .35s ease; }
@keyframes jiggle {
  0%,100% { rotate: 0deg; } 25% { rotate: -1.6deg; } 75% { rotate: 1.6deg; }
}

.btn-red    { background: var(--red);    box-shadow: 0 5px 0 var(--red-dk),    0 9px 14px var(--shadow); }
.btn-blue   { background: var(--blue);   box-shadow: 0 5px 0 var(--blue-dk),   0 9px 14px var(--shadow); }
.btn-orange { background: var(--orange); box-shadow: 0 5px 0 var(--orange-dk), 0 9px 14px var(--shadow); }
.btn-red:active, .btn-blue:active, .btn-orange:active { box-shadow: 0 1px 0 rgba(0,0,0,.4); }

.btn-ghost {
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
  font-weight: 400;
  font-size: .95rem;
}
.btn.small { padding: 8px 12px; font-size: .9rem; }

.btn-icon {
  font: inherit; font-size: 1.1rem;
  width: 40px; height: 40px;
  border: none; border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.btn-icon:active { transform: translateY(3px); box-shadow: none; }
.btn-icon.off { color: rgba(255,255,255,.35); text-decoration: line-through; }

/* ============================== LOBBY ============================== */

.lobby-title { font-size: 1.3rem; color: rgba(255,255,255,.7); letter-spacing: .2em; text-transform: uppercase; }
.room-code {
  font-size: 3.4rem; font-weight: 700; letter-spacing: .28em;
  color: var(--gold);
  text-shadow: 0 4px 0 rgba(0,0,0,.45);
  background: rgba(0,0,0,.3);
  border-radius: 14px;
  padding: 6px 0 6px .28em;
  animation: glowpulse 2s ease-in-out infinite;
}
@keyframes glowpulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,213,74,0); }
  50% { box-shadow: 0 0 26px rgba(255,213,74,.35); }
}
.hint { font-size: .85rem; color: rgba(255,255,255,.6); }

.lobby-players { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lobby-players li {
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center;
  animation: popin .25s ease;
}
.lobby-players li .tag { font-size: .72rem; padding: 3px 8px; border-radius: 6px; background: var(--blue); }
.lobby-players li .tag.cpu { background: var(--orange); }
.lobby-players li .tag.empty { background: rgba(255,255,255,.15); }
.lobby-players li.empty-seat { color: rgba(255,255,255,.4); }

/* ============================== SCOREBAR ============================== */

.scorebar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: stretch; justify-content: space-between;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  gap: 8px;
  z-index: 10;
}

.team-score {
  flex: 1; max-width: 170px;
  display: flex; align-items: center; gap: 8px;
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: 12px;
  padding: 6px 10px;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.team-score.them { flex-direction: row-reverse; text-align: right; }
.team-name { font-size: .95rem; font-weight: 700; letter-spacing: .08em; }
.us .team-name { color: var(--blue); }
.them .team-name { color: var(--red); }
.team-score .pts { margin-left: auto; display: flex; align-items: baseline; gap: 3px; }
.team-score.them .pts { margin-left: 0; margin-right: auto; }
.team-score .pts b { font-size: 1.25rem; }
.team-score .pts small { font-size: .6rem; opacity: .6; }
.team-score.bump { animation: bump .4s ease; }
@keyframes bump { 30% { transform: scale(1.12); } }

.cross { width: 26px; height: 26px; overflow: visible; }
.cross line, .pente line {
  stroke: var(--gold); stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.5));
}
.cross circle, .pente circle {
  fill: var(--gold);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.5));
}
.pente circle.d-us { fill: var(--blue); }
.pente circle.d-them { fill: var(--red); }
.cross circle.new, .pente circle.new {
  transform-box: fill-box; transform-origin: center;
  animation: dotin .45s cubic-bezier(.2, 2.4, .5, 1);
}
@keyframes dotin { from { transform: scale(0); opacity: 0; } }
.cross.hidden, .pente.hidden { display: none; }

.scorebar-mid { display: flex; gap: 6px; align-items: center; }
.scorebar .pente { width: 46px; height: 27px; overflow: visible; }

/* ============================== TABLE ============================== */

#screen-table { justify-content: flex-start; padding: 0; }

#table-area { position: absolute; inset: 62px 0 calc(var(--ch) + 58px); }

.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seat-top { top: 4px; left: 50%; transform: translateX(-50%); }
.seat-left { left: 6px; top: 34%; }
.seat-right { right: 6px; top: 34%; }
.seat.hidden { display: none; }

.plate {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: 10px;
  padding: 4px 12px;
  font-size: .9rem;
  display: flex; gap: 8px; align-items: center;
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
  transition: border-color .2s, box-shadow .2s;
  white-space: nowrap;
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis;
}
.plate .pcards { font-size: .75rem; opacity: .6; }
.plate.turn {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255, 213, 74, .55), 0 3px 0 rgba(0,0,0,.3);
  animation: platepulse 1.1s ease-in-out infinite;
}
@keyframes platepulse { 50% { box-shadow: 0 0 26px rgba(255,213,74,.8), 0 3px 0 rgba(0,0,0,.3); } }
.plate.gone { opacity: .45; filter: grayscale(1); }

.opp-hand { display: flex; justify-content: center; height: calc(var(--tw) * .62); }
.opp-hand .mini-back { margin: 0 -9px; transform-origin: 50% 120%; }
.seat-left .opp-hand, .seat-right .opp-hand { height: auto; flex-direction: column; }
.seat-left .opp-hand .mini-back, .seat-right .opp-hand .mini-back { margin: -14px 0; }
.seat-left .opp-hand .mini-back { transform: rotate(90deg); }
.seat-right .opp-hand .mini-back { transform: rotate(-90deg); }

/* deck + trump: the turned-up trump lies sideways UNDER the stock, partially
   visible — it is one of the stock's cards and the very last one drawn. */
#deck-zone {
  position: absolute; left: 8px; bottom: 6px;
  display: grid;
  grid-template-areas: "pile" "count" "label";
  align-items: center; justify-items: center;
  gap: 1px;
  z-index: 3;
}
/* 4p: the left seat's vertical column owns the lower-left edge, so the deck
   parks in the top-left corner, tucked just below the NÓS score capsule. */
#screen-table.four-players #deck-zone { top: 2px; bottom: auto; }
#deck-pile {
  grid-area: pile; position: relative;
  /* room for the pile plus the half-card of trump sticking out to the right */
  width: calc(var(--tw) * .74 * 1.62);
  height: calc(var(--th) * .74 + 8px);
}
#deck-stack {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: calc(var(--tw) * .74 + 8px);   /* the size reference for table cards */
  height: calc(var(--th) * .74 + 8px);
}
#deck-count { grid-area: count; font-size: .8rem; color: rgba(255,255,255,.75); }
#trump-label {
  grid-area: label;
  font-size: .62rem; letter-spacing: .22em; color: var(--gold);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
#trump-slot .card, #deck-stack .card-back { width: calc(var(--tw) * .74); height: calc(var(--th) * .74); }
#trump-slot {
  position: absolute; z-index: 1;
  left: calc(var(--tw) * .74 * .38);
  top: 4px;
}
#trump-slot .card { transform: rotate(90deg); font-size: calc(var(--tw) * .74 / 4.4); }
#deck-stack .card-back { position: absolute; left: 4px; top: 4px; }

/* trick zone */
#trick-zone {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
}
#trick-zone .played {
  position: absolute;
  width: var(--tw); height: var(--th);
  transform: translate(-50%, -50%);
}

/* the cut ritual: the deck offered up in the middle of the table */
#cut-zone {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 6;
}
#cut-zone.hidden { display: none; }
#cut-prompt {
  font-size: 1.05rem;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
  white-space: nowrap;
}
#cut-prompt small { display: block; font-size: .68rem; color: rgba(255,255,255,.75); text-align: center; }
#cut-stack {
  position: relative;
  width: var(--tw); height: calc(var(--th) + 18px);
  touch-action: none;
}
#cut-zone.me #cut-stack { cursor: pointer; animation: cutbeckon 1.4s ease-in-out infinite; }
@keyframes cutbeckon { 50% { transform: translateY(-4px); filter: drop-shadow(0 0 12px rgba(255,213,74,.55)); } }
#cut-stack .cut-packet {
  position: absolute; left: 0; width: var(--tw);
  transition: transform .2s cubic-bezier(.22,.9,.36,1.1);
  will-change: transform;
}
#cut-stack .cut-packet .card-back {
  position: absolute; left: 0; width: var(--tw); height: var(--th);
  /* a hairline under each layer so the pile reads as stacked cards */
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 5px #1d5f9e,
    0 1px 0 rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.3);
}
#cut-zone #cut-knock { padding: 4px 16px; }
#cut-zone:not(.me) #cut-knock { display: none; }

#table-msg {
  /* floats just above your nameplate: never covers anyone's cards */
  position: absolute; left: 50%; bottom: 100%;
  margin-bottom: 6px;
  transform: translateX(-50%);
  font-size: 1.1rem;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
  background: rgba(5, 20, 14, .78);
  border-radius: 10px;
  padding: 5px 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  white-space: nowrap;
  max-width: 96vw; overflow: hidden; text-overflow: ellipsis;
  z-index: 5;
}
#table-msg.show { opacity: 1; }

/* ============================== MY ZONE ============================== */

#my-zone {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 4;
}
#my-plate { margin-bottom: 6px; }

#my-hand {
  display: flex; justify-content: center; align-items: flex-end;
  height: calc(var(--ch) + 26px);
}

#my-hand .card {
  margin: 0 clamp(-14px, -2vw, -8px);
  transform-origin: 50% 115%;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s;
  cursor: pointer;
  animation: cardfloat 3.2s ease-in-out infinite;
}
#my-hand .card:nth-child(1) { transform: rotate(-6deg) translateY(8px); animation-delay: 0s; }
#my-hand .card:nth-child(2) { transform: rotate(0deg); animation-delay: .4s; }
#my-hand .card:nth-child(3) { transform: rotate(6deg) translateY(8px); animation-delay: .8s; }
@keyframes cardfloat { 50% { translate: 0 -3px; } }

#my-hand .card.selected {
  transform: translateY(-26px) scale(1.07) rotate(0deg) !important;
  filter: drop-shadow(0 0 14px rgba(255,213,74,.8));
  z-index: 5;
}
#my-hand.disabled .card { cursor: default; filter: brightness(.82) saturate(.85); animation: none; }

/* Sueca: 10-card fan (transforms set inline per card) */
#my-hand.many { --cw: clamp(46px, 11.5vw, 78px); }
#my-hand.many .card {
  margin: 0 clamp(-19px, -3vw, -11px);
  animation: none;
}
/* must follow suit: cards you cannot play right now */
#my-hand .card.illegal { filter: brightness(.5) saturate(.4); cursor: default; }

.opp-hand.crowded .mini-back { margin: 0 -13px; }
.seat-left .opp-hand.crowded .mini-back, .seat-right .opp-hand.crowded .mini-back { margin: -19px 0; }

/* Sueca: the dealer's turned-up trump, face-up among their own cards */
.opp-hand .card.mini {
  width: calc(var(--tw) * .58); height: calc(var(--th) * .58);
  border-radius: calc(var(--tw) * .58 * .1);
  font-size: calc(var(--tw) * .58 / 4.4);
  margin: 0 -9px;
}
.opp-hand.crowded .card.mini { margin: 0 -13px; }
.seat-left .opp-hand .card.mini, .seat-right .opp-hand .card.mini { margin: -14px 0; transform: rotate(90deg); }
.seat-right .opp-hand .card.mini { transform: rotate(-90deg); }
.seat-left .opp-hand.crowded .card.mini, .seat-right .opp-hand.crowded .card.mini { margin: -19px 0; }

/* badge on the dealer's own hand: this exact card is the turned-up trunfo */
.card .trump-badge {
  position: absolute; left: 50%; bottom: 5%;
  transform: translateX(-50%);
  font-family: 'Pixelify Sans', sans-serif;
  font-size: .46em; font-weight: 700; letter-spacing: .1em;
  color: var(--ink); background: var(--gold);
  padding: 1px 6px; border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
  pointer-events: none;
  white-space: nowrap;
}

/* ============================== CARDS ============================== */

.card {
  position: relative;
  width: var(--cw); height: var(--ch);
  background: var(--cream);
  border-radius: calc(var(--cw) * .1);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.08),
    inset 0 -4px 0 var(--cream-dk),
    0 5px 10px rgba(0,0,0,.45);
  color: var(--ink);
  font-size: calc(var(--cw) / 4.4);
  /* Card faces skip the pixel font: Pixelify's 2 and 5 read as S / backwards S. */
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, system-ui, sans-serif;
  flex-shrink: 0;
}
.card.red { color: var(--red-dk); }
.card .corner {
  position: absolute; top: 4.5%; left: 7%;
  font-weight: 700; line-height: 1;   /* .9 let the rank glyph overlap the suit below */
  text-align: center;
  font-size: 1em;
}
.card .corner .csuit { font-size: .78em; display: block; line-height: 1; margin-top: .08em; }
.card .big {
  /* cover the whole face so the pip / court block is truly centered */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5em;
  text-shadow: 0 3px 0 rgba(0,0,0,.12);
}
/* text-align keeps the big letter centered over the (wider) rank name */
.card .big .court { font-weight: 700; font-size: 1em; line-height: 1.05; text-align: center; }
.card .big .court small { display: block; font-size: .4em; font-weight: 400; text-align: center; margin-top: .12em; letter-spacing: .05em; }
.card.trumpish::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(255, 213, 74, .8), 0 0 12px rgba(255,213,74,.4);
  pointer-events: none;
}

/* card backs: azulejo-tile pattern. The two tile colors come from CSS
   variables so a theme is just a [data-cardback=…] swap — on <body> for the
   whole game, on each .back-choice for its settings preview. */
:root, [data-cardback="azulejo"]   { --cb-dark: #1d5f9e; --cb-light: #2e7fc4; }
[data-cardback="vinho"]     { --cb-dark: #8e1f1f; --cb-light: #b53a30; }
[data-cardback="esmeralda"] { --cb-dark: #1c6b47; --cb-light: #2f9e6a; }
[data-cardback="ametista"]  { --cb-dark: #5b2a86; --cb-light: #7e46b4; }
[data-cardback="dourado"]   { --cb-dark: #8f6b1c; --cb-light: #c19a2e; }

.card-back, .mini-back, .cb-swatch {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.28) 0 12%, transparent 13%),
    repeating-conic-gradient(var(--cb-dark) 0% 12.5%, var(--cb-light) 12.5% 25%);
  background-size: 100% 100%, 24px 24px;
  box-shadow:
    inset 0 0 0 3px var(--cream),
    inset 0 0 0 5px var(--cb-dark),
    0 4px 8px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.card-back, .mini-back {
  width: var(--tw); height: var(--th);
  border-radius: calc(var(--tw) * .1);
}
.mini-back { width: calc(var(--tw) * .58); height: calc(var(--th) * .58); }

/* flying animation clones */
.fly {
  position: fixed; z-index: 60; margin: 0 !important;
  pointer-events: none;
  transition: all .38s cubic-bezier(.22,.9,.36,1.1);
  animation: none !important;
}

/* score popup chips */
.pop {
  position: fixed; z-index: 70;
  font-size: 1.5rem; font-weight: 700;
  color: var(--gold);
  text-shadow: 0 3px 0 rgba(0,0,0,.55);
  pointer-events: none;
  animation: poprise 1s ease forwards;
}
.pop.zero { color: rgba(255,255,255,.65); font-size: 1.1rem; }
@keyframes poprise {
  0% { transform: translate(-50%,-50%) scale(.4); opacity: 0; }
  25% { transform: translate(-50%,-70%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%,-180%) scale(1); opacity: 0; }
}

/* ============================== OVERLAY ============================== */

#overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(5, 14, 10, .72);
  display: flex; align-items: center; justify-content: center;
  animation: fadein .25s ease;
}
#overlay.hidden { display: none; }
@keyframes fadein { from { opacity: 0; } }
@keyframes popin { from { transform: scale(.7); opacity: 0; } }

#overlay-card {
  width: min(90vw, 400px);
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 3px solid var(--panel-edge);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55);
  animation: popin .3s cubic-bezier(.34,1.56,.64,1);
}
#overlay-card h2 { font-size: 1.9rem; color: var(--gold); text-shadow: 0 3px 0 rgba(0,0,0,.5); }
#overlay-card h2.win { color: var(--gold); }
#overlay-card h2.lose { color: var(--red); }
#overlay-card .big-cross { font-size: 3.4rem; line-height: 1; animation: bob 2s ease-in-out infinite; }
#overlay-card .tally {
  display: flex; justify-content: space-around; align-items: center;
  background: rgba(0,0,0,.28); border-radius: 12px; padding: 12px;
}
#overlay-card .tally .t-team { display: flex; flex-direction: column; gap: 4px; align-items: center; }
#overlay-card .tally .t-name { font-size: .85rem; letter-spacing: .1em; }
#overlay-card .tally .t-pts { font-size: 1.9rem; font-weight: 700; }
#overlay-card .tally .cross { width: 40px; height: 40px; }
#overlay-card .tally .pente { width: 100px; height: 58px; overflow: visible; align-self: center; }
#overlay-card .rules-text { text-align: left; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.85); }
#overlay-card .rules-text b { color: var(--gold); }
#overlay-card .rules-text p { margin-bottom: 8px; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 14%;
  transform: translateX(-50%) translateY(20px);
  z-index: 90;
  background: var(--red);
  color: var(--white);
  font-family: inherit;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--red-dk), 0 10px 20px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  max-width: 86vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================== RESPONSIVE ============================== */

@media (min-width: 760px) {
  :root { --cw: 108px; }
  /* 2p only: no left seat, so the deck can sit mid-left. In 4p the base
     top-left placement (below the NÓS capsule) stays in force. */
  #deck-zone { left: 24px; bottom: 50%; transform: translateY(70%); }
  #screen-table.four-players #deck-zone { top: 2px; bottom: auto; transform: none; }
  .seat-left { left: 24px; }
  .seat-right { right: 24px; }
}

@media (max-height: 600px) and (orientation: landscape) {
  :root { --cw: clamp(56px, 12vh, 84px); }
  #table-area { inset: 56px 0 calc(var(--ch) + 44px); }
  /* the short table brings the top-left deck close to the side seats */
  .seat-left, .seat-right { top: 44%; }
  .menu-box { padding: 12px 18px; gap: 8px; }
  .title { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}