/* Press Start 2P (SIL Open Font License, see assets/fonts/OFL.txt), self-hosted
   so the app works fully offline inside the iOS/Android shells. */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/PressStart2P-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/PressStart2P-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

:root {
  --felt-dark: #063f22;
  --felt: #0b6b3a;
  --felt-light: #128a4a;
  --cream: #f3ead8;
  --gold: #e8c766;
  --gold-dark: #a8862f;
  --ink: #1a1a1a;
  --red: #c1272d;
  --shadow: #04220f;

  /* Card sizes. Everything card-shaped reads these, so each device class
     only has to override the variables (see the responsive section). */
  --cw: 46px;  --ch: 64px;  --cfs: 10px;   /* your cards + the piles */
  --sw: 32px;  --sh: 46px;  --sfs: 7px;    /* opponents' cards */
  --peek: 0.30;                            /* how much face-down shows under face-up */
  --label-fs: 9px;
  --hud-fs: 11px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  font-family: 'Press Start 2P', monospace;
  color: var(--cream);
  overflow: hidden;
  image-rendering: pixelated;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

button {
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
}

/* ---------------------------------------------------------------- */
/* Screens                                                            */
/* ---------------------------------------------------------------- */

.screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.screen.active {
  display: flex;
}

/* Win screen is deliberately NOT part of the exclusive .screen group above -
   it layers on top of the still-visible table (cards, event log) rather
   than replacing it, so you can see how the game ended before moving on. */
.overlay-screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(4, 34, 15, 0.5);
}

.overlay-screen.active {
  display: flex;
}

.pixel-btn {
  background: var(--gold);
  color: var(--ink);
  border: 4px solid var(--gold-dark);
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 14px 20px;
  font-size: 14px;
  letter-spacing: 1px;
  image-rendering: pixelated;
  transition: transform 0.05s;
}

.pixel-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.pixel-btn.small {
  padding: 8px 12px;
  font-size: 10px;
  box-shadow: 2px 2px 0 var(--shadow);
}

.pixel-btn.hidden {
  display: none;
}

/* PICK UP and PLAY stay pinned in fixed slots *within the PLAYING phase* -
   fixed width so a changing label ("PLAY" vs "PLAY (2)" vs "PICK UP") never
   resizes the button, and turn-inactive (visibility, not display) drives
   "not your move right now" so the other button doesn't slide into the gap.
   .hidden still fully collapses them outside PLAYING (e.g. swap/game-over),
   so they don't leave dead space next to unrelated buttons like I'M READY. */
.action-slot {
  width: 84px;
  white-space: nowrap;
  text-align: center;
}

.action-slot.turn-inactive {
  visibility: hidden;
}

/* Splash */

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.splash-mascot {
  width: 132px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 var(--shadow));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .splash-mascot { width: 84px; }
  .splash-cards { display: none; }
}

.pixel-title {
  font-size: clamp(32px, 10vw, 64px);
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--shadow), 0 0 24px rgba(232, 199, 102, 0.4);
  letter-spacing: 4px;
  margin: 0;
}

.pixel-title.small {
  font-size: clamp(20px, 6vw, 36px);
}

/* The end banner ("SANDRA IS THE SHEETHEAD") runs to two or three lines on
   phones: centre it and give the lines room so the text shadows don't touch. */
#win-banner {
  text-align: center;
  line-height: 1.35;
  max-width: 100%;
}

.pixel-heading {
  font-size: 14px;
  color: var(--cream);
  letter-spacing: 1px;
}

.splash-cards {
  display: flex;
  gap: -10px;
  height: 70px;
  position: relative;
  width: 120px;
}

.mini-card {
  position: absolute;
  width: 46px;
  height: 64px;
  border-radius: 3px;
  border: 3px solid var(--gold-dark);
  background: repeating-linear-gradient(45deg, #2255aa, #2255aa 4px, #1a4488 4px, #1a4488 8px);
  box-shadow: 2px 2px 0 var(--shadow);
}
.mini-card.c1 { left: 0; top: 8px; transform: rotate(-8deg); }
.mini-card.c2 { left: 36px; top: 0; transform: rotate(2deg); }
.mini-card.c3 { left: 72px; top: 8px; transform: rotate(9deg); }

.pulse {
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: rgba(4, 34, 15, 0.85);
  border: 4px solid var(--gold-dark);
  padding: 32px 28px;
  box-shadow: 6px 6px 0 var(--shadow);
}

.count-buttons {
  display: flex;
  gap: 16px;
}

.count-btn {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

/* ---------------------------------------------------------------- */
/* Game table                                                         */
/* ---------------------------------------------------------------- */

#screen-game {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

#screen-game.active {
  display: flex;
}

.table {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-areas:
    ".    top   ."
    "left center right"
    ".    bottom .";
  /* Rows are content-sized (not proportionally stretched) - on a tall
     viewport, 1fr/1.4fr/1.2fr rows would each independently stretch to fill
     their share of the leftover height, and since the actual card content
     inside each row is a fixed size and centered, that leftover height shows
     up as a separate visual gap above and below every row's content. Sizing
     rows to their content and centering the whole cluster instead collapses
     any excess space into a single margin above/below the table, rather
     than three disconnected gaps. */
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1.6fr 1fr;
  align-content: center;
  gap: 4px;
  min-height: 0;
  padding: calc(6px + var(--safe-top)) calc(6px + var(--safe-right)) 6px calc(6px + var(--safe-left));
  background:
    radial-gradient(ellipse at center, var(--felt-light) 0%, var(--felt) 60%, var(--felt-dark) 100%);
}

.zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  overflow: visible;
}

.zone-top { grid-area: top; grid-column: 1 / -1; }
.zone-left { grid-area: left; }
.zone-right { grid-area: right; }
.zone-bottom { grid-area: bottom; align-self: end; grid-column: 1 / -1; }

.center-piles {
  grid-area: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

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

.pile-label {
  font-size: 8px;
  color: var(--gold);
  letter-spacing: 1px;
}

.stock-pile, .discard-pile {
  position: relative;
  width: calc(var(--cw) + 6px);
  height: calc(var(--ch) + 10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pile-count {
  position: absolute;
  bottom: -4px;
  right: -8px;
  background: var(--gold);
  color: var(--ink);
  font-size: 9px;
  padding: 2px 4px;
  border: 2px solid var(--gold-dark);
}

/* ---------------------------------------------------------------- */
/* Cards                                                              */
/* ---------------------------------------------------------------- */

.card {
  position: relative;
  width: var(--cw);
  height: var(--ch);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
  font-size: var(--cfs);
  flex-shrink: 0;
  transition: transform 0.08s;
}

.card.small {
  width: var(--sw);
  height: var(--sh);
  font-size: var(--sfs);
  border-width: 2px;
}

.card.red .card-rank, .card.red .card-suit { color: var(--red); }
.card.black .card-rank, .card.black .card-suit { color: var(--ink); }

.card-rank {
  font-size: inherit;
  line-height: 1;
}
.card-rank-bottom { transform: rotate(180deg); }
.card-suit {
  font-size: 1.3em;
  line-height: 1;
}

.card.back {
  background: repeating-linear-gradient(45deg, #2255aa, #2255aa 4px, #1a4488 4px, #1a4488 8px);
  border-color: var(--gold-dark);
}

.card.slot-empty {
  background: transparent;
  border: 3px dashed rgba(243, 234, 216, 0.25);
  box-shadow: none;
}

.card.selected {
  transform: translateY(-10px);
  box-shadow: 2px 6px 0 var(--shadow), 0 0 10px var(--gold);
  border-color: var(--gold);
}

.card.lift {
  transform: translateY(-6px);
}

.card.clickable {
  cursor: pointer;
}

.card.clickable:active {
  transform: translateY(-3px);
}

.card.reject {
  animation: shake 0.35s;
  border-color: var(--red);
}

.card.forced-card {
  animation: forced-glow 1.1s infinite;
  border-color: var(--gold);
}

.card.muted-card {
  opacity: 0.35;
  filter: grayscale(60%);
}

@keyframes forced-glow {
  0%, 100% { box-shadow: 2px 2px 0 var(--shadow), 0 0 6px var(--gold); }
  50% { box-shadow: 2px 2px 0 var(--shadow), 0 0 16px var(--gold); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.card.fanned {
  position: absolute;
  transform: translateX(calc(var(--fan-offset, 0) * 10px)) rotate(calc(var(--fan-offset, 0) * 4deg));
}

.back.clickable {
  cursor: pointer;
}
.back.clickable:active {
  transform: translateY(-4px) scale(1.03);
}

.back.flipping {
  animation: flip 0.3s;
}
@keyframes flip {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(90deg); }
}

.card-row {
  display: flex;
  gap: 4px;
  position: relative;
  justify-content: center;
}

.zone-bottom .card-row {
  gap: 6px;
}

/* The hand row can grow well past 3 cards (after picking up the pile), and
   its parent .zone uses align-items:center, which by default lets a flex
   child shrink/grow to fit its own content rather than the zone's actual
   width. Without an explicit width here, the row just keeps growing and
   spills off the edge of the screen. Pin it to the zone's width and let
   cards wrap onto additional rows, full width, in dealt order, rather than
   requiring a horizontal swipe to see the rest of the hand. */
.hand-row {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  overflow-y: auto;
  max-height: 260px; /* safety net if an extreme pickup makes even wrapped rows too tall */
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) transparent;
}

.hand-row::-webkit-scrollbar {
  width: 6px;
}
.hand-row::-webkit-scrollbar-track {
  background: transparent;
}
.hand-row::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: 3px;
}

.zone-bottom .hand-row {
  gap: 8px;
  row-gap: 10px;
  margin-top: 4px;
  justify-content: center;
  padding: 10px 8px 14px; /* room for the selected-card lift */
}

.zone-top .hand-row,
.zone-left .hand-row,
.zone-right .hand-row {
  justify-content: center;
  padding: 2px 4px 8px;
}

.hand-count {
  align-self: center;
  font-size: 8px;
  color: var(--cream);
  margin-left: 6px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- */
/* Player labels                                                      */
/* ---------------------------------------------------------------- */

.player-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--label-fs);
  color: var(--cream);
  background: rgba(4, 34, 15, 0.5);
  padding: 3px 6px;
  border-radius: 2px;
}

.player-label.active-turn {
  color: var(--ink);
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.player-phase {
  font-size: 7px;
  opacity: 0.8;
}

/* ---------------------------------------------------------------- */
/* HUD                                                                 */
/* ---------------------------------------------------------------- */

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left));
  background: rgba(4, 34, 15, 0.9);
  border-top: 3px solid var(--gold-dark);
}

.hud-left, .hud-right { display: flex; gap: 8px; align-items: center; }

.hud-center {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.hud-last-event {
  display: none;
  margin-top: 4px;
  font-size: 7px;
  line-height: 1.4;
  color: rgba(243, 234, 216, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turn-indicator {
  font-size: var(--hud-fs);
  line-height: 1.4;
  color: var(--gold);
  letter-spacing: 1px;
}

.toast {
  position: fixed;
  z-index: 70;
  max-width: calc(100% - 24px);
  text-align: center;
  line-height: 1.5;
  bottom: calc(70px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4, 34, 15, 0.95);
  border: 2px solid var(--gold);
  padding: 8px 14px;
  font-size: 9px;
  color: var(--cream);
}
.toast.hidden { display: none; }

.event-log {
  position: fixed;
  top: calc(6px + var(--safe-top));
  right: calc(6px + var(--safe-right));
  max-width: 220px;
  font-size: 7px;
  color: rgba(243, 234, 216, 0.85);
  text-align: right;
  pointer-events: none;
  z-index: 60; /* stay readable above the win overlay's dimmed backdrop */
  background: rgba(4, 34, 15, 0.5);
  padding: 4px 6px;
  border-radius: 2px;
}
.log-line { margin-bottom: 2px; }

/* ---------------------------------------------------------------- */
/* Player-count-driven zone visibility                                */
/* ---------------------------------------------------------------- */

body.players-2 .zone-left,
body.players-2 .zone-right {
  visibility: hidden;
}

body.players-3 .zone-top {
  visibility: hidden;
}

/* ---------------------------------------------------------------- */
/* Table stacks: face-up cards sit on top of the face-down ones, with  */
/* the face-down row peeking out above, like on a real table. Saves a  */
/* whole card-row of height per player, which phones badly need.      */
/* ---------------------------------------------------------------- */

.zone .faceup-row {
  margin-top: calc(var(--sh) * (var(--peek) - 1) - 4px);
}
.zone-bottom .faceup-row {
  margin-top: calc(var(--ch) * (var(--peek) - 1) - 6px);
}
/* An empty face-up slot must not cover (or block taps on) the face-down
   card underneath it. */
.faceup-row .slot-empty {
  visibility: hidden;
  pointer-events: none;
}
.facedown-row .slot-empty {
  opacity: 0.6;
}

/* Opponents' hands: an overlapped fan of backs, not a full row. */
.zone-top .hand-row,
.zone-left .hand-row,
.zone-right .hand-row {
  flex-wrap: nowrap;
  gap: 0;
  overflow: visible;
  max-height: none;
}
.zone-top .hand-row .card.back + .card.back,
.zone-left .hand-row .card.back + .card.back,
.zone-right .hand-row .card.back + .card.back {
  margin-left: calc(var(--sw) * -0.62);
}
.zone-top .hand-row .card.back:nth-child(n+11),
.zone-left .hand-row .card.back:nth-child(n+11),
.zone-right .hand-row .card.back:nth-child(n+11) {
  display: none; /* the count label says how many; 10 backs is plenty */
}

/* Your hand: when it won't fit side by side, fx.js (fitHand) works out how
   far to overlap the cards so they stay on one row, and only wraps once
   every card would show less than its rank. Overlapped cards draw the rank
   top-left so it peeks out. The right padding grows by the overlap so the
   last card never spills out of the row. */
.zone-bottom .hand-row.overlap {
  gap: 0;
  padding-right: calc(var(--hand-pad-r, 8px) + var(--hand-overlap, 0px));
}
.zone-bottom .hand-row.overlap > .card {
  margin-right: calc(-1 * var(--hand-overlap, 0px));
  align-items: flex-start;
  padding-left: 3px;
}
.zone-bottom .hand-row.overlap > .card.selected {
  z-index: 1;
}

/* ---------------------------------------------------------------- */
/* Touch: comfortable tap targets                                     */
/* ---------------------------------------------------------------- */

@media (pointer: coarse) {
  .pixel-btn.small {
    min-height: 44px;
    min-width: 44px;
  }
  .action-slot { width: 112px; }
  .card.clickable { touch-action: manipulation; }
}

#continue-btn.hidden { display: none; }

/* ---------------------------------------------------------------- */
/* Phones, portrait                                                    */
/* ---------------------------------------------------------------- */

@media (max-width: 600px) {
  :root {
    --cw: 40px; --ch: 56px; --cfs: 9px;
    --sw: 26px; --sh: 37px; --sfs: 6px;
    --label-fs: 8px;
  }
  .pixel-title { font-size: 36px; }
  .table { grid-template-columns: 1fr 1.3fr 1fr; }

  /* HUD on two lines: turn + latest event on top, buttons below. */
  .hud { flex-wrap: wrap; row-gap: 6px; }
  .hud-center { order: -1; flex-basis: 100%; }
  .hud-left, .hud-right { flex: 0 0 auto; }
  .hud-right { margin-left: auto; }
  .hud-last-event { display: block; }
  .event-log { display: none; }
  .zone-bottom .hand-row { gap: 6px; row-gap: 8px; }
}

/* ---------------------------------------------------------------- */
/* Phones, landscape (short screens)                                  */
/* ---------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --cw: 38px; --ch: 53px; --cfs: 8px;
    --sw: 24px; --sh: 34px; --sfs: 6px;
    --label-fs: 7px;
    --hud-fs: 9px;
  }
  .pixel-title { font-size: 40px; }
  .splash-inner { gap: 16px; }
  .modal-inner { padding: 20px; gap: 16px; }

  /* Opponents on the sides span the full height; the middle column holds
     the top opponent, the piles and you. */
  .table {
    grid-template-areas:
      "left top    right"
      "left center right"
      "left bottom right";
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto auto 1fr;
    align-content: stretch;
    gap: 2px;
    padding-top: calc(4px + var(--safe-top));
  }
  .zone-top { grid-column: 2; }
  .zone-bottom { grid-column: 2; align-self: end; }
  .zone-left, .zone-right { align-self: center; }
  .center-piles { gap: 18px; }
  .pile-label { font-size: 6px; }
  .zone { gap: 2px; }

  /* You: name tag over your table stack on the left, hand to the right.
     (The tag used to get a row of its own across the middle, which pushed
     a crowded hand up into the STOCK/DISCARD labels.) */
  .zone-bottom {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "label hand"
      "stack hand";
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    width: 100%;
  }
  .zone-bottom .player-label { grid-area: label; justify-self: center; }
  .zone-bottom .facedown-row,
  .zone-bottom .faceup-row { grid-area: stack; margin-top: 0; }
  .zone-bottom .faceup-row { margin-top: calc(var(--ch) * var(--peek)); }
  .zone-bottom .hand-row {
    grid-area: hand;
    align-self: center;
    margin-top: 0;
    padding: 10px 4px 4px;
    --hand-pad-r: 4px;
    justify-content: flex-start;
    max-height: calc(var(--ch) * 2 + 34px);
  }
  .zone-bottom .hand-row.overlap { row-gap: 8px; }

  .hud { padding-top: 4px; padding-bottom: calc(4px + var(--safe-bottom)); }
  .hud-last-event { display: block; }
  .event-log { display: none; }
  .toast { bottom: calc(56px + var(--safe-bottom)); }
}

/* ---------------------------------------------------------------- */
/* Tablets and desktops: bigger cards                                 */
/* ---------------------------------------------------------------- */

@media (min-width: 740px) and (min-height: 700px) {
  :root {
    --cw: 64px; --ch: 90px; --cfs: 14px;
    --sw: 44px; --sh: 62px; --sfs: 10px;
    --label-fs: 11px;
    --hud-fs: 14px;
  }
  .pixel-btn.small { font-size: 12px; padding: 12px 16px; }
  .action-slot { width: 120px; }
  .pile-label { font-size: 10px; }
  .event-log { font-size: 9px; max-width: 300px; }
  .toast { font-size: 11px; bottom: calc(90px + var(--safe-bottom)); }
  .zone-bottom .hand-row { max-height: 340px; }
}

/* Tall phones (most modern iPhones/Androids in portrait) have height to spare. */
@media (max-width: 600px) and (min-height: 800px) {
  :root {
    --cw: 46px; --ch: 64px; --cfs: 10px;
    --sw: 30px; --sh: 42px; --sfs: 7px;
  }
}

/* Big tablet landscape (iPad mini / Air / Pro on their side, laptops):
   one size up from the basic tablet cards. */
@media (min-width: 1000px) and (min-height: 720px) {
  :root {
    --cw: 76px; --ch: 106px; --cfs: 16px;
    --sw: 50px; --sh: 70px; --sfs: 11px;
  }
}
@media (min-width: 1150px) and (min-height: 800px) {
  :root {
    --cw: 84px; --ch: 118px; --cfs: 18px;
    --sw: 56px; --sh: 78px; --sfs: 12px;
    --label-fs: 12px;
  }
}

/* Tablet portrait (every iPad held upright, big Android tablets): the
   table is tall, so the cards go a good size bigger and fill it. Side
   opponents still fit three-across in their columns. */
@media (min-width: 740px) and (min-height: 1000px) and (orientation: portrait) {
  :root {
    --cw: 108px; --ch: 150px; --cfs: 22px;
    --sw: 66px; --sh: 92px; --sfs: 15px;
    --label-fs: 13px;
    --hud-fs: 15px;
  }
  .zone-bottom .card-row { gap: 10px; }
  .zone .card-row { gap: 6px; }
  .center-piles { gap: 40px; }
  .pile-label { font-size: 12px; }
  .zone-bottom .hand-row { max-height: 420px; gap: 10px; }
  .table { gap: 18px; }
}

/* Very large tablets in portrait (iPad Pro 13", 1024 x 1366). */
@media (min-width: 1000px) and (min-height: 1300px) and (orientation: portrait) {
  :root {
    --cw: 112px; --ch: 156px; --cfs: 23px;
    --sw: 74px; --sh: 104px; --sfs: 16px;
  }
}

/* ---------------------------------------------------------------- */
/* Card motion (fx.js)                                                */
/* ---------------------------------------------------------------- */

.card.fx-ghost {
  position: fixed;
  margin: 0;
  z-index: 80;
  pointer-events: none;
  will-change: transform, opacity;
  transition: none;
}

.pile-wrap { position: relative; }

.burn-fx {
  position: absolute;
  left: 50%;
  top: calc((var(--ch) + 10px) / 2);
  width: 0;
  height: 0;
  z-index: 75;
  pointer-events: none;
}
/* A pixel flame burst: square sparks thrown out by a box-shadow pattern. */
.burn-fx::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: #ffd23f;
  box-shadow:
    0 -28px 0 #ff8c1a, 20px -20px 0 #ffd23f, 28px 0 0 #ff5a1f, 20px 20px 0 #ff8c1a,
    0 28px 0 #ffd23f, -20px 20px 0 #ff5a1f, -28px 0 0 #ff8c1a, -20px -20px 0 #ffd23f,
    0 -14px 0 #fff3b0, 14px 0 0 #fff3b0, 0 14px 0 #fff3b0, -14px 0 0 #fff3b0;
  animation: burn-sparks 0.7s steps(7) forwards;
}
.burn-word {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-size: calc(var(--cfs) * 1.2);
  color: #ffd23f;
  text-shadow: 2px 2px 0 #a8360f, -1px -1px 0 #a8360f;
  white-space: nowrap;
  animation: burn-word 0.85s steps(6) forwards;
}
@keyframes burn-sparks {
  0% { transform: scale(0.3); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes burn-word {
  0% { transform: translate(-50%, -30%) scale(0.6); opacity: 0; }
  20% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -90%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(1); opacity: 0; }
}
.burn-fx.calm::before { display: none; }
.burn-fx.calm .burn-word { animation: burn-fade 0.85s forwards; }
@keyframes burn-fade {
  0%, 70% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -50%); }
}

/* ---------------------------------------------------------------- */
/* How to play                                                        */
/* ---------------------------------------------------------------- */

.ghost-btn {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold-dark);
  box-shadow: none;
}

#screen-rules { z-index: 90; background: rgba(4, 34, 15, 0.75); }

.rules-inner {
  width: min(560px, calc(100% - 24px - var(--safe-left) - var(--safe-right)));
  max-height: calc(100% - 24px - var(--safe-top) - var(--safe-bottom));
  padding: 18px 16px 16px;
  gap: 14px;
}
.rules-title { margin: 0; color: var(--gold); }
.rules-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 9px;
  line-height: 1.8;
  color: var(--cream);
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) transparent;
  user-select: text;
}
.rules-body h3 {
  font-size: 10px;
  color: var(--gold);
  margin: 16px 0 6px;
  letter-spacing: 1px;
}
.rules-body p { margin: 0 0 8px; }
.rules-body b { color: var(--gold); font-weight: normal; }
.rules-goal { border: 2px dashed var(--gold-dark); padding: 8px 10px; }
.rules-ladder {
  text-align: center;
  color: var(--gold);
  letter-spacing: 2px;
  font-size: 8px;
}
.rules-specials { list-style: none; margin: 0; padding: 0; }
.rules-specials li { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rules-card {
  flex: 0 0 auto;
  width: 30px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--shadow);
  font-size: 10px;
}
.rules-card.red { color: var(--red); }
.rules-card.quad { font-size: 8px; background: var(--gold); border-color: var(--gold-dark); }

@media (max-height: 520px) and (orientation: landscape) {
  .rules-inner { padding: 12px 14px; gap: 8px; }
  .rules-body { font-size: 8px; }
}
@media (min-width: 740px) and (min-height: 700px) {
  .rules-body { font-size: 11px; }
  .rules-body h3 { font-size: 12px; }
  .rules-ladder { font-size: 10px; }
  .rules-card { width: 38px; height: 54px; font-size: 13px; }
}

/* ---------------------------------------------------------------- */
/* Reduced motion: no flights (fx.js checks too), no bobbing or pulse */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .splash-mascot, .pulse, .card.forced-card { animation: none; }
  .card, .pixel-btn { transition: none; }
}

/* Opponents' "N cards" label scales with their cards on big screens. */
.hand-count { font-size: max(8px, calc(var(--sfs) * 0.8)); }