/* ============================================================
   Cassino — mobile portrait styles
   ============================================================ */

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

:root {
  --felt: #05411a;
  --felt-light: #0b5a26;
  --gold: #e8c15a;
  --card-w: clamp(42px, 12.5vw, 62px);
  --hand-card-w: clamp(56px, 16vw, 82px);
  --mini-card-w: clamp(30px, 8.5vw, 44px);
  --ink: #1c2430;
  --red: #c0392b;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #f2efe6;
  user-select: none;
  -webkit-user-select: none;
}

/* ===== The table cloth =====
   Three layers, top to bottom: a procedural fibre grain, the felt
   photograph, and a gradient that only shows if WebP cannot be decoded.

   The photograph carries the colour and the vignette, but its own grain
   does not survive WebP compression and the smooth gradient bands when it
   is stretched. The grain layer fixes both: it restores the fibre and it
   dithers the gradient. Being rasterised from SVG it never blurs, at any
   size or pixel density.

   The tile is resized per device-pixel-ratio so one noise cell always spans
   the same number of DEVICE pixels — sized in CSS pixels instead, the grain
   collapses into per-pixel static on 1x screens.

   Measured against the source photograph (centre / grain sigma / lag-1
   autocorrelation): this renders 5,73,27 / 3.77 / 0.51 against the
   photograph's 5,73,27 / 3.92 / 0.50, with no banding at 1x, 2x or 3x.
   No background-attachment: fixed — the layout never scrolls and fixed
   backgrounds are janky on iOS. */
body {
  background-color: var(--felt);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("assets/felt.webp"),
    radial-gradient(ellipse at 50% 42%, var(--felt-light), #02150a 78%);
  background-size: 800px 800px, cover, auto;
  background-position: center center, center center, center center;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal;
}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  body { background-size: 400px 400px, cover, auto; }
}
@media (min-resolution: 3dppx), (-webkit-min-device-pixel-ratio: 3) {
  body { background-size: 267px 267px, cover, auto; }
}

.hidden { display: none !important; }

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== Start menu ===== */
#menu { justify-content: center; align-items: center; }
.menu-box { text-align: center; padding: 24px; width: 100%; max-width: 360px; }
.logo {
  font-size: 52px;
  letter-spacing: 3px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.tagline { opacity: .8; margin: 6px 0 30px; }
.credit { opacity: .55; margin-top: 26px; font-size: 13px; }

.btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--gold);
  color: #3a2c07;
  font-size: 17px;
  font-weight: 700;
  padding: 14px;
  margin: 10px 0;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn.ghost { background: transparent; color: var(--gold); border: 2px solid var(--gold); box-shadow: none; }
.btn.big { font-size: 18px; }

/* ===== Top bar ===== */
#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  /* Faded at the ends: .screen is a centred 560px column, so a flat fill
     cuts hard vertical seams into the cloth on wide screens. */
  background: linear-gradient(90deg,
    rgba(0,0,0,0), rgba(0,0,0,.3) 7%, rgba(0,0,0,.3) 93%, rgba(0,0,0,0));
}
.icon-btn {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}
#scorebar {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}
.score b { font-size: 12px; opacity: .75; font-weight: 600; }
.score span { font-size: 19px; font-weight: 800; color: var(--gold); }
.score-dash { opacity: .5; }
#deck-info { font-size: 14px; opacity: .85; flex: none; }

/* ===== Arena: seats around the table ===== */
#arena {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#seat-north {
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}
#arena-mid {
  flex: 1;
  display: flex;
  min-height: 0;
}
.seat-slot.side {
  width: 66px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* no tint: a panel colour here cuts a visible seam across the cloth */
}
.seat-slot.side .seat { padding: 4px 2px; width: 62px; }
.seat-slot.side .seat-name { font-size: 12px; }
.seat-slot.side .mini-back { width: 16px; height: 22px; margin-left: -11px; }
.seat-slot.side .pile-chip { font-size: 10px; padding: 2px 6px; }

.seat { text-align: center; padding: 4px 8px; border-radius: 12px; }
.seat.active { background: rgba(232,193,90,.16); box-shadow: 0 0 0 2px var(--gold); }
.seat-name { font-size: 13px; font-weight: 700; display: inline-block; }
.seat-sub { font-size: 10px; opacity: .6; display: block; }
.seat .backs { display: flex; justify-content: center; margin-top: 4px; height: 30px; }
.mini-back {
  width: 20px; height: 28px;
  border-radius: 4px;
  background: #3d0f0c url("assets/card-back.webp") center/cover no-repeat;
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  margin-left: -10px;
}
.mini-back:first-child { margin-left: 0; }
.pile-chip {
  display: inline-block;
  background: rgba(0,0,0,.35);
  border-radius: 20px;
  font-size: 11px;
  padding: 2px 8px;
  margin-top: 3px;
}
.pile-chip.sweep { color: var(--gold); }

/* ===== Table ===== */
#table-wrap {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* No borders: a hairline here is drawn straight onto continuous cloth,
     and in the 4-player layout it stops at the side seats, reading as a
     scratch with two loose ends. #player-area carries the one highlight. */
  overflow-y: auto;
  min-height: 0;
}
#message {
  text-align: center;
  font-size: 14px;
  min-height: 24px;
  padding: 2px 10px;
  color: var(--gold);
  font-weight: 600;
  transition: opacity .3s;
}
#table {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 16px;
  flex: 1;
}
.table-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#table-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .35;
  font-size: 14px;
  pointer-events: none;
}

/* ===== Cards ===== */
.card {
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  background: #fdfcf7;
  border-radius: 8px;
  border: 1px solid #b9b4a4;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
  position: relative;
  color: var(--ink);
  flex: none;
  transition: transform .12s, box-shadow .12s;
}
.card.red { color: var(--red); }
.card .corner {
  position: absolute;
  top: 2px; left: 3px;
  font-size: calc(var(--card-w) * .22);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}
.card .corner .suit { font-size: calc(var(--card-w) * .155); display: block; margin-top: 1px; }
/* "10" is twice as wide as every other rank and would reach into the pip
   columns; printed decks condense it for the same reason. */
.card .corner.ten { font-size: calc(var(--card-w) * .175); letter-spacing: -.5px; }
.card .pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--card-w) * .52);
  padding-top: 15%;
}
.card.selected {
  transform: translateY(-8px);
  box-shadow: 0 0 0 3px var(--gold), 0 6px 12px rgba(0,0,0,.4);
}

/* ===== Builds ===== */
.build {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 8px 5px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 2px dashed rgba(255,255,255,.35);
  flex: none;
  transition: box-shadow .12s, transform .12s;
}
.build.mine { border-color: var(--gold); }
.build.selected { box-shadow: 0 0 0 3px var(--gold); transform: translateY(-6px); }
.build .sets { display: flex; gap: 6px; }
.build .set { display: flex; }
.build .card {
  width: var(--mini-card-w);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  margin-left: calc(var(--mini-card-w) * -0.45);
}
.build .set .card:first-child { margin-left: 0; }
.build-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}
.build-badge small { font-weight: 500; color: #f2efe6; opacity: .75; }

/* ===== Player area ===== */
#player-area {
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(90deg,
    rgba(0,0,0,0), rgba(0,0,0,.3) 7%, rgba(0,0,0,.3) 93%, rgba(0,0,0,0));
  border-top: 1px solid rgba(255,255,255,.07);
}
#player-info { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; }
#player-info.active .seat-name { color: var(--gold); }
#player-info.active::after {
  content: attr(data-turn);
  font-size: 11px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 1px 8px;
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

#hand {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: calc(var(--hand-card-w) * 1.4 + 10px);
  align-items: flex-end;
  padding: 8px 0 4px;
}
#hand .card { width: var(--hand-card-w); cursor: pointer; }

/* Fixed height, single row. The contents swap between action buttons and a
   hint of wildly different width, and anything that changes this box's
   height shoves the hand up or down under the player's thumb. */
#actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  height: 54px;
  align-items: center;
  padding-top: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#actions::-webkit-scrollbar { display: none; }
.action-btn { flex: none; }
/* Alone on the row the hint is the mockup's caption plaque; sharing the row
   with a button it drops the plaque so both fit without wrapping. */
#actions .action-hint:not(:only-child) {
  padding: 0 2px;
  background: none;
  box-shadow: none;
  font-size: 12.5px;
  min-width: 0;
}
#actions .action-hint:not(:only-child)::before,
#actions .action-hint:not(:only-child)::after { display: none; }
.action-btn {
  border: none;
  border-radius: 22px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  background: var(--gold);
  color: #3a2c07;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.action-btn.secondary { background: rgba(255,255,255,.15); color: #fff; }
.action-btn:active { transform: translateY(1px); }
.action-hint { font-size: 12.5px; opacity: .6; text-align: center; }

/* ===== Modals ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 18px;
}
.modal-box {
  background: #17352a;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.modal-box.scroll { max-height: 86dvh; overflow-y: auto; }
.modal-box h2 { color: var(--gold); margin-bottom: 12px; text-align: center; }

#round-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
#round-table td { padding: 5px 4px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
#round-table td:nth-child(2), #round-table td:nth-child(3) { text-align: center; width: 46px; font-weight: 700; }
#round-table tr.head td { font-size: 12px; opacity: .7; font-weight: 700; }
#round-table td.got { color: var(--gold); }
#round-totals { text-align: center; font-size: 17px; font-weight: 800; margin-bottom: 14px; color: var(--gold); }

.rules-text p { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.rules-text b { color: var(--gold); }
.score-rules { width: 100%; margin: 4px 0 10px; border-collapse: collapse; }
.score-rules td { font-size: 14px; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.score-rules td:last-child { text-align: right; font-weight: 800; color: var(--gold); }

/* Landscape nudge on phones */
@media (orientation: landscape) and (max-height: 500px) {
  body::after {
    content: "Please rotate your phone to portrait ↻";
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--felt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gold);
    text-align: center;
    padding: 20px;
  }
}

/* Link back to the Playzooka hub on the start menu */
.hub-link {
  display: block;
  margin-top: 14px;
  color: var(--gold);
  opacity: .7;
  font-size: 13px;
  text-decoration: none;
}
.hub-link:active { opacity: 1; }

/* ===== Animation layer ===== */
#fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}
.fx-move {
  position: fixed;
  will-change: transform;
}
.fx-move .card,
.fx-move .build {
  width: 100%;
  height: 100%;
}
.fx-move .card { box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.fx-flip {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.fx-hold { visibility: hidden !important; }

/* Cards about to be taken / used are called out before they move */
.fx-target {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 10px;
  animation: targetPulse .6s ease-in-out infinite;
}
@keyframes targetPulse { 50% { outline-color: rgba(232,193,90,.15); } }

.card.back {
  background: #3d0f0c url("assets/card-back.webp") center/cover no-repeat;
  border: 1px solid #2a0a08;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}

.fx-sweep {
  position: fixed;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 10vw, 52px);
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 0 4px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.6);
  will-change: transform, opacity;
}

/* ===== Update popup ===== */
.update-text { font-size: 15px; line-height: 1.5; text-align: center; margin-bottom: 16px; }
.update-text b { color: var(--gold); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; margin: 0; }

/* ===== Language selector ===== */
#lang-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.lang-btn {
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.07);
  color: #f2efe6;
  border-radius: 18px;
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
}
.lang-btn.active {
  background: var(--gold);
  color: #3a2c07;
  border-color: var(--gold);
  font-weight: 700;
}

/* ===== Tutorial overlay ===== */
#tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
}
.tut-shade {
  position: fixed;
  background: rgba(4, 12, 9, .78);
  transition: all .25s ease;
}
.tut-ring {
  position: fixed;
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(232,193,90,.55);
  pointer-events: none;
  transition: all .25s ease;
  animation: tutRing 1.2s ease-in-out infinite;
}
@keyframes tutRing { 50% { box-shadow: 0 0 4px rgba(232,193,90,.25); } }
.tut-tip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 360px);
  background: #17352a;
  border: 1px solid rgba(232,193,90,.5);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.tut-count {
  font-size: 11px;
  opacity: .55;
  margin-bottom: 4px;
}
.tut-text {
  font-size: 15px;
  line-height: 1.5;
}
.tut-text b { color: var(--gold); }
.tut-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 10px;
}
.tut-next {
  border: none;
  border-radius: 20px;
  background: var(--gold);
  color: #3a2c07;
  font-size: 15px;
  font-weight: 700;
  padding: 9px 22px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.tut-skip {
  border: none;
  background: none;
  color: #f2efe6;
  opacity: .6;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 2px;
}

/* ===== Dealer chip ===== */
.dealer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--gold);
  color: #3a2c07;
  font-size: 10px;
  font-weight: 800;
  vertical-align: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,255,255,.55);
  flex: none;
}

/* ===== Last capture modal ===== */
#last-capture-body { margin-bottom: 14px; }
.last-none { text-align: center; opacity: .7; font-size: 15px; padding: 8px 0; }
.last-line { text-align: center; font-size: 15px; margin-bottom: 12px; }
.last-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.last-cards .card.played {
  box-shadow: 0 0 0 3px var(--gold), 0 2px 5px rgba(0,0,0,.35);
}

/* ===== Madeira-style option ===== */
#opt-hidepiles-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  opacity: .85;
  cursor: pointer;
}
#opt-hidepiles-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
}

/* ===== New game options (variant picker) ===== */
#game-opts {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 12px 10px;
  margin-bottom: 14px;
}
#variant-row {
  display: flex;
  gap: 8px;
}
.variant-btn {
  flex: 1;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.07);
  color: #f2efe6;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  padding: 9px 0;
  cursor: pointer;
}
.variant-btn.active {
  background: var(--gold);
  color: #3a2c07;
  border-color: var(--gold);
}
#variant-desc,
#target-desc {
  font-size: 12.5px;
  opacity: .75;
  margin: 8px 2px 0;
  min-height: 16px;
}
#target-row { display: flex; gap: 8px; }
.target-btn {
  flex: 1;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.07);
  color: #f2efe6;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  cursor: pointer;
}
.target-btn.active {
  background: var(--gold);
  color: #3a2c07;
  border-color: var(--gold);
}
#game-opts #opt-hidepiles-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ===== Setup modal: direction & labels ===== */
.opt-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .6;
  text-align: left;
  margin: 10px 2px 6px;
}
#game-opts .opt-label:first-child { margin-top: 0; }
#dir-row { display: flex; gap: 8px; }
.dir-btn {
  flex: 1;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.07);
  color: #f2efe6;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 2px;
  cursor: pointer;
}
.dir-btn.active {
  background: var(--gold);
  color: #3a2c07;
  border-color: var(--gold);
}
#setup-mode {
  text-align: center;
  font-size: 14px;
  opacity: .8;
  margin-bottom: 12px;
}
#modal-setup #game-opts { margin-bottom: 16px; }
#dir-ind { font-size: 17px; opacity: .85; flex: none; }

/* ===== Drawn court cards ===== */
.card .pip.face {
  padding: 8% 6% 4%;
  font-size: 0;
}
.card .pip.face svg {
  width: 100%;
  height: 100%;
}

/* Deck indicator in the top bar, using the real card back */
.deck-mini {
  display: inline-block;
  width: 14px;
  height: 20px;
  margin-left: 5px;
  vertical-align: -4px;
  border-radius: 2px;
  /* 100% 100% rather than cover: cover crops the artwork asymmetrically at
     this size and the bottom gold rail is lost while the top one survives */
  background: #3d0f0c url("assets/card-back.webp") center / 100% 100% no-repeat;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* Number cards: traditional pip layout fills the card field */
.card .pip.pips {
  padding: 4% 5% 3%;
  font-size: 0;
}
.card .pip.pips svg { width: 100%; height: 100%; }