/* ============================================================
   BETERENO ROYALE — styles
   Colours: deep royal red + gold
   ============================================================ */
:root {
  --gold: #d4af37;
  --gold-light: #f3d77a;
  --red-deep: #5e0f1c;
  --red: #8b1e2f;
  --ink: #0d0a0b;
  --panel: #1a1013;
  --text: #f5efe6;
  --muted: #b9aea3;
  --green: #4cd964;
}

/* ============================================================
   PAGE
   ============================================================ */
* {
  box-sizing: border-box;
}

/* no pull-down-to-refresh / rubber-band scrolling (a refresh would interrupt the game) */
html,
body {
  overscroll-behavior: none;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at 50% -10%, #3a1219 0%, #1a0b0e 45%, var(--ink) 80%);
  background-attachment: fixed;
  color: var(--text);
  margin: 0;
  padding: 16px;
  font-size: 16px;
  text-align: center;
  min-height: 100vh;
}

/* logo */
.brand {
  margin: 6px 0 22px;
}

.logo {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: 4px;
  color: var(--gold-light);
  background: linear-gradient(180deg, #fff3c4 0%, var(--gold) 55%, #9c7a1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}

.logo span {
  font-weight: 700;
}

/* ============================================================
   LOBBY SCREENS
   ============================================================ */
.panel {
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(180deg, #2a1418, var(--panel));
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 4px rgba(212, 175, 55, 0.12);
}

.panel h2 {
  margin-top: 0;
  font-family: "Cinzel", Georgia, serif;
  color: var(--gold-light);
  letter-spacing: 1px;
}

.panel label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.panel input {
  font-size: 1.1rem;
  padding: 12px 14px;
  width: 85%;
  margin: 8px 0;
  border-radius: 10px;
  border: 1px solid #5a4a3a;
  background: #0f0a0b;
  color: var(--text);
  text-align: center;
}

.panel input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

#codeInput {
  letter-spacing: 6px;
  font-size: 1.4rem;
}

.gold-btn,
.grey-btn {
  font-size: 1.05rem;
  padding: 11px 24px;
  margin: 8px 4px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.gold-btn {
  background: linear-gradient(180deg, #f3d77a, var(--gold) 60%, #a8861f);
  color: #1a1206;
  box-shadow: 0 4px 0 #6e5512;
}

.grey-btn {
  background: #3a3033;
  color: var(--text);
  box-shadow: 0 4px 0 #1f1a1b;
}

.gold-btn:hover:not(:disabled),
.grey-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.gold-btn:active:not(:disabled),
.grey-btn:active:not(:disabled) {
  transform: translateY(2px);
}

.gold-btn:disabled,
.grey-btn:disabled {
  background: #444;
  color: #888;
  box-shadow: none;
  cursor: not-allowed;
}

.big {
  display: block;
  width: 85%;
  margin: 14px auto;
  padding: 18px;
  font-size: 1.3rem;
}

#error {
  color: #ff7b7b;
  min-height: 1.4em;
  margin-top: 14px;
  font-weight: bold;
}

.code {
  font-family: "Cinzel", Georgia, serif;
  font-size: 2.6rem;
  letter-spacing: 8px;
  color: #ffd700;
  font-weight: bold;
  margin: 6px 0 2px;
}

#playerList {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

#playerList li {
  background: rgba(0, 0, 0, 0.35);
  margin: 6px 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.15);
}

.host-tag {
  color: #ffd700;
  font-size: 0.8rem;
  margin-left: 8px;
  font-weight: bold;
}

.you-tag {
  color: #c0ffc0;
  font-size: 0.8rem;
  margin-left: 6px;
}

.hint {
  color: var(--muted);
  font-size: 0.9rem;
}

.hidden {
  display: none !important;
}

.chips-row input {
  width: 40% !important;
}

/* ============================================================
   GAME SCREEN
   ============================================================ */
#gameScreen {
  max-width: 1000px;
  margin: 0 auto;
}

#gameTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 10px;
}

#gameTopBar .code-small {
  color: #ffd700;
  font-weight: bold;
  letter-spacing: 3px;
}

#gameTopBar .grey-btn {
  padding: 7px 18px;
  font-size: 0.9rem;
  margin: 0;
}

.top-buttons {
  display: inline-flex;
  gap: 8px;
}

#muteBtn {
  padding: 7px 12px;
}

#drawControls .big {
  max-width: 360px;
}

/* ============================================================
   THE TABLE
   ============================================================ */
#table-wrapper {
  display: flex;
  justify-content: center;
  margin: 34px 0 10px;
  padding: 0 60px;
}

#table-oval {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 36 / 21;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(ellipse at center, var(--red) 0%, var(--red-deep) 62%, #3a0812 100%);
  border: 16px solid #4a2c1a;
  /* wooden rail */
  box-shadow:
    0 0 0 3px var(--gold),
    /* gold edge */
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 0 60px rgba(0, 0, 0, 0.65),
    0 25px 60px rgba(0, 0, 0, 0.85);
  transition: filter 0.3s ease;
}

/* gold line on the felt */
#table-oval::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid rgba(212, 175, 55, 0.35);
  pointer-events: none;
}

/* logo printed on the felt */
#table-oval::after {
  content: "BETERENO ROYALE";
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", Georgia, serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 6px;
  color: rgba(212, 175, 55, 0.16);
  white-space: nowrap;
  pointer-events: none;
}

#table-oval.round-over {
  filter: brightness(0.7);
}

#seats-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* ============================================================
   SEATS
   ============================================================ */
.seat {
  position: absolute;
  width: 150px;
  text-align: center;
  color: var(--text);
  font-size: 0.9rem;
  transform: translate(-50%, -50%);
}

.seat-inner {
  position: relative;
  background: linear-gradient(180deg, rgba(30, 24, 26, 0.95), rgba(12, 9, 10, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 14px;
  padding: 12px 6px 6px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.me .seat-inner {
  border: 2px solid #9be89b;
}

/* DEALER / UNDER-HAND badges sit on the top edge */
.seat-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.dealer-chip {
  background: linear-gradient(180deg, #fff6d0, var(--gold));
  color: #2a1a00;
}

.underhand-label {
  background: #2f5fb3;
  color: #fff;
}

.player-name {
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: #2a1a00;
  font-size: 0.8rem;
  font-weight: 900;
  flex-shrink: 0;
}

.avatar.bot {
  background: #2b2f3a;
  font-size: 0.85rem;
}

.player-cards {
  min-height: 64px;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.seat-money {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 0.82rem;
  align-items: center;
}

.player-stack {
  color: #c8f5c8;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.player-info {
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.15);
  padding: 1px 7px;
  border-radius: 999px;
}

.player-state {
  font-size: 0.7rem;
  margin-top: 4px;
  color: #ffccaa;
  letter-spacing: 1px;
  font-weight: bold;
}

/* 7+ players: smaller seats so they don't touch */
#seats-container.many .seat {
  width: 128px;
  font-size: 0.82rem;
}

#seats-container.many .seat-inner {
  padding: 10px 4px 4px;
}

#seats-container.many .player-name {
  margin-bottom: 3px;
}

#seats-container.many .player-cards {
  min-height: 53px;
  margin-bottom: 3px;
}

#seats-container.many .card {
  width: 37px;
  height: 52px;
}

#seats-container.many .card .rank {
  font-size: 18px;
}

#seats-container.many .card .suit {
  font-size: 22px;
}

/* folded / out / away */
.seat-inner.folded {
  opacity: 0.45;
  filter: grayscale(1);
}

.seat-inner.folded .player-state {
  color: #ff6b6b;
}

.seat-inner.out {
  opacity: 0.3;
}

.away {
  opacity: 0.6;
}

.away-tag {
  color: #ff9b9b;
  font-size: 0.7rem;
}

/* whose turn it is */
.active-turn {
  border: 2px solid gold !important;
  animation: pulseTurn 1.1s infinite ease-in-out;
  transform: scale(1.06);
  transition: transform 0.25s ease;
}

@keyframes pulseTurn {
  0% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
  }

  50% {
    box-shadow: 0 0 26px rgba(255, 215, 0, 1);
  }

  100% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.45);
  }
}

/* winner */
.winner-seat {
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 28px rgba(76, 217, 100, 0.9);
  animation: winnerPulse 1.2s ease;
}

@keyframes winnerPulse {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

/* ============================================================
   PLAYING CARDS
   ============================================================ */
.card {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 62px;
  margin: 0 1px;
  border-radius: 6px;
  background: linear-gradient(160deg, #ffffff 0%, #f3efe6 100%);
  color: #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  text-align: left;
}

.card .rank {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -1px;
}

.card .suit {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 27px;
  line-height: 1;
}

.card.red {
  color: #c8102e;
}

/* fan the 3 cards a little, like a real hand */
.player-cards .card:nth-child(1) {
  transform: rotate(-6deg) translateY(2px);
}

.player-cards .card:nth-child(3) {
  transform: rotate(6deg) translateY(2px);
}

.player-cards .card:nth-child(2) {
  z-index: 1;
}

/* card back: royal red with a gold diamond pattern */
.card.back {
  background-color: #6b0f1e;
  background-image:
    linear-gradient(45deg, rgba(212, 175, 55, 0.35) 25%, transparent 25%, transparent 75%, rgba(212, 175, 55, 0.35) 75%),
    linear-gradient(45deg, rgba(212, 175, 55, 0.35) 25%, transparent 25%, transparent 75%, rgba(212, 175, 55, 0.35) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  border: 2px solid #f3efe6;
}

/* ============================================================
   CHIPS
   ============================================================ */
.chip {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 35%, #fff 36% 45%, var(--gold) 46%);
  border: 2px dashed #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.chip-pile {
  display: inline-flex;
  margin-right: 8px;
  vertical-align: middle;
}

.chip-pile .chip {
  width: 20px;
  height: 20px;
  margin-left: -8px;
}

.chip-pile .chip:nth-child(1) {
  margin-left: 0;
  background: radial-gradient(circle, #c8102e 0 35%, #fff 36% 45%, #c8102e 46%);
}

.chip-pile .chip:nth-child(2) {
  background: radial-gradient(circle, #1f6fd1 0 35%, #fff 36% 45%, #1f6fd1 46%);
}

/* ============================================================
   CENTRE OF THE TABLE
   ============================================================ */
#table-center-info {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

#center-bet {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--gold-light);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

#center-pot {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 6px 18px;
  border-radius: 999px;
}

#center-pot:empty {
  display: none;
}

.allin-tag {
  margin-left: 8px;
  font-size: 0.75rem;
  background: #c8102e;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}

#center-last {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #fff;
  opacity: 0.85;
}

#round-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 14px #000, 0 2px 4px #000;
  text-align: center;
  pointer-events: none;
  white-space: pre-line;
  z-index: 3;
  width: 70%;
}

/* ============================================================
   STATUS + BUTTONS
   ============================================================ */
#status {
  margin: 70px auto 0;
  font-size: 1.1rem;
  font-weight: bold;
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 1.2em;
}

#status:empty {
  display: none;
}

#status.my-turn {
  color: #1a1206;
  background: linear-gradient(180deg, #f3d77a, var(--gold));
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.7);
}

#action-panel {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#action-panel button {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 13px 24px;
  border-radius: 999px;
  border: none;
  color: #fff;
  cursor: pointer;
  min-width: 110px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.1s ease, filter 0.15s ease;
}

#action-panel button:hover:not(:disabled) {
  filter: brightness(1.12);
}

#action-panel button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

#lookBtn {
  background: linear-gradient(180deg, #4a8cf0, #2a62c4);
}

#betBtn {
  background: linear-gradient(180deg, #2fbf6b, #1b8a4a);
}

#blindBtn {
  background: linear-gradient(180deg, #9a5ff0, #6a35c2);
}

#foldBtn {
  background: linear-gradient(180deg, #e2523f, #a92a1d);
}

#showBtn {
  background: linear-gradient(180deg, #f3d77a, #b8921f);
  color: #1a1206;
}

#action-panel button:disabled {
  background: #2e2a2b;
  color: #6d6466;
  box-shadow: none;
  cursor: not-allowed;
}

/* POWER RAISE: buttons look like casino chips */
#power-raise-panel {
  margin: 16px auto 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#power-raise-label {
  font-weight: 900;
  color: var(--gold-light);
  letter-spacing: 2px;
  margin-right: 6px;
}

#powerButtons {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

#powerButtons button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px dashed #fff;
  background: radial-gradient(circle, #c8102e 0 52%, #9b0b22 53%);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

#powerButtons button:hover {
  filter: brightness(1.15);
  transform: scale(1.06);
}

#hostControls {
  margin: 12px 0;
}

/* ============================================================
   ANIMATIONS (flying cards and chips)
   ============================================================ */
#fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.fly {
  position: absolute;
  will-change: transform;
}

.fly.card-fly {
  width: 32px;
  height: 45px;
  margin: -22px 0 0 -16px;
  border-radius: 4px;
  background-color: #6b0f1e;
  background-image:
    linear-gradient(45deg, rgba(212, 175, 55, 0.35) 25%, transparent 25%, transparent 75%, rgba(212, 175, 55, 0.35) 75%),
    linear-gradient(45deg, rgba(212, 175, 55, 0.35) 25%, transparent 25%, transparent 75%, rgba(212, 175, 55, 0.35) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  border: 2px solid #f3efe6;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}

.fly.chip-fly {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0 35%, #fff 36% 45%, var(--gold) 46%);
  border: 2px dashed #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
}

.fly.chip-fly.red {
  background: radial-gradient(circle, #c8102e 0 35%, #fff 36% 45%, #c8102e 46%);
}

.fly.chip-fly.blue {
  background: radial-gradient(circle, #1f6fd1 0 35%, #fff 36% 45%, #1f6fd1 46%);
}

/* Power Raise table flash (single-screen version) */
#table-oval.power-raise-flash {
  animation: powerRaiseFlash 0.55s ease;
}

@keyframes powerRaiseFlash {
  35% {
    filter: brightness(1.25);
  }
}

/* ============================================================
   PHONES (screens narrower than 640px)
   ============================================================ */
/* ============================================================
   BOT LEVELS (waiting room)
   ============================================================ */
.level-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 2px;
  flex-wrap: wrap;
}

.level-label {
  color: var(--muted);
  font-size: 0.85rem;
  margin-right: 4px;
}

.lvl {
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: #241a1d;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lvl:hover {
  color: var(--text);
}

.lvl.picked {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.lvl-easy.picked {
  background: linear-gradient(180deg, #2fbf6b, #1b8a4a);
}

.lvl-medium.picked {
  background: linear-gradient(180deg, #f3d77a, #b8921f);
  color: #1a1206;
}

.lvl-hard.picked {
  background: linear-gradient(180deg, #e2523f, #a92a1d);
}

.lvl.opp {
  min-width: 46px;
}

.lvl.opp.picked {
  background: linear-gradient(180deg, #f3d77a, #b8921f);
  color: #1a1206;
}

#quickScreen .level-pick {
  margin: 12px 0 4px;
}

.level-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  vertical-align: middle;
}

.level-tag.lvl-easy {
  background: #1b8a4a;
}

.level-tag.lvl-medium {
  background: #b8921f;
  color: #1a1206;
}

.level-tag.lvl-hard {
  background: #a92a1d;
}

/* ============================================================
   HOW TO PLAY
   ============================================================ */
.link-btn {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gold-light);
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link-btn:hover {
  color: #fff;
}

#howGameBtn {
  font-weight: 900;
  min-width: 38px;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 2, 3, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.overlay.hidden {
  display: none;
}

.how-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  background: linear-gradient(180deg, #24151a, var(--panel));
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.how-box h2 {
  margin: 0 0 6px;
  text-align: center;
  font-family: "Cinzel", Georgia, serif;
  color: var(--gold-light);
  letter-spacing: 1px;
}

.how-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -8px -10px 0 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: #3a3033;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
}

.how-sec {
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  padding: 12px 0 4px;
}

.how-sec h3 {
  margin: 0 0 6px;
  font-family: "Cinzel", Georgia, serif;
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
}

.how-sec p,
.how-sec li,
.how-sec dd {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}

.how-sec ul,
.how-sec ol {
  margin: 0;
  padding-left: 20px;
}

.how-sec li {
  margin-bottom: 4px;
}

.how-sec b {
  color: var(--gold-light);
}

.how-sec dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: start;
}

.how-sec dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  text-align: center;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 1px;
}

.how-sec dd {
  margin: 0;
}

.b-look {
  background: linear-gradient(180deg, #4a8cf0, #2a62c4);
}

.b-bet {
  background: linear-gradient(180deg, #2fbf6b, #1b8a4a);
}

.b-blind {
  background: linear-gradient(180deg, #9a5ff0, #6a35c2);
}

.b-fold {
  background: linear-gradient(180deg, #e2523f, #a92a1d);
}

.b-show {
  background: linear-gradient(180deg, #f3d77a, #b8921f);
  color: #1a1206 !important;
}

.b-power {
  background: linear-gradient(180deg, #ff9f1a, #c4560a);
}

.ex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 6px;
}

.ex {
  text-align: center;
}

.ex-cards {
  display: flex;
  justify-content: center;
}

.ex-cards .card {
  width: 38px;
  height: 54px;
  margin: 0 1px;
}

.ex-cards .card .rank {
  font-size: 18px;
}

.ex-cards .card .suit {
  font-size: 22px;
}

.ex-label {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

.ex-label b {
  color: var(--gold-light);
}

.ex-vs {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}

#howDone {
  display: block;
  margin: 14px auto 0;
  min-width: 140px;
}

@media (max-width: 640px) {
  .overlay {
    padding: 10px;
  }

  .how-box {
    padding: 18px 16px 16px;
  }

  .how-sec p,
  .how-sec li,
  .how-sec dd {
    font-size: 0.9rem;
  }

  .ex-cards .card {
    width: 32px;
    height: 46px;
  }

  .ex-cards .card .rank {
    font-size: 15px;
    top: 2px;
    left: 3px;
  }

  .ex-cards .card .suit {
    font-size: 18px;
  }

  #howGameBtn {
    min-width: 0;
  }

  body {
    padding: 8px 8px 0;
    font-size: 15px;
  }

  .brand {
    margin: 2px 0 10px;
  }

  .logo {
    font-size: 1.5rem;
    letter-spacing: 2px;
  }

  .in-game .brand {
    display: none;
  }

  /* the logo is printed on the table instead */
  .panel {
    padding: 18px;
  }

  .big {
    width: 100%;
    padding: 15px;
    font-size: 1.15rem;
  }

  .code {
    font-size: 2rem;
  }

  #gameTopBar {
    font-size: 0.85rem;
    padding: 0 4px;
    margin-bottom: 0;
  }

  #gameTopBar .grey-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
  }

  #drawControls .big {
    margin: 6px auto;
    padding: 12px;
  }

  /* tall table that fits the screen with the buttons underneath */
  #table-wrapper {
    padding: 0 6px;
    margin: 12px 0 6px;
  }

  #table-oval {
    aspect-ratio: auto;
    height: calc(100svh - 215px);
    min-height: 400px;
    max-height: 600px;
    border-width: 10px;
  }

  #table-oval::after {
    font-size: 0.75rem;
    letter-spacing: 3px;
    top: 70%;
    transform: translate(-50%, -50%);
  }

  /* compact seats */
  .seat,
  #seats-container.many .seat {
    width: 84px;
    font-size: 0.68rem;
  }

  .seat-inner,
  #seats-container.many .seat-inner {
    padding: 8px 2px 2px;
    border-radius: 9px;
  }

  .seat-badge {
    font-size: 0.5rem;
    padding: 2px 5px;
    top: -8px;
    letter-spacing: 0.3px;
  }

  .player-name,
  #seats-container.many .player-name {
    gap: 3px;
    margin-bottom: 1px;
    overflow: hidden;
  }

  .avatar {
    display: none;
  }

  .you-tag {
    display: none;
  }

  .player-cards,
  #seats-container.many .player-cards {
    min-height: 35px;
    margin-bottom: 1px;
  }

  .card,
  #seats-container.many .card {
    width: 24px;
    height: 34px;
    margin: 0 1px;
    border-radius: 4px;
  }

  .card .rank,
  #seats-container.many .card .rank {
    font-size: 13px;
    top: 1px;
    left: 2px;
    letter-spacing: -1px;
  }

  .card .suit,
  #seats-container.many .card .suit {
    font-size: 14px;
    bottom: 0;
    right: 1px;
  }

  .card.back {
    border-width: 1px;
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
  }

  .seat-money {
    gap: 3px;
    font-size: 0.64rem;
    flex-wrap: wrap;
  }

  .chip {
    width: 9px;
    height: 9px;
    border-width: 1px;
  }

  .player-info {
    padding: 0 3px;
  }

  .player-state {
    font-size: 0.52rem;
    margin-top: 0;
    letter-spacing: 0.5px;
  }

  .active-turn {
    transform: scale(1.05);
  }

  /* your own seat is bigger so you can read your cards */
  .seat.me {
    width: 136px;
    font-size: 0.75rem;
  }

  .me .seat-inner .avatar {
    display: inline-flex;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
  }

  .me .seat-inner .card {
    width: 40px;
    height: 56px;
  }

  .me .seat-inner .card .rank {
    font-size: 20px;
    top: 2px;
    left: 3px;
  }

  .me .seat-inner .card .suit {
    font-size: 24px;
  }

  .me .seat-inner .player-cards {
    min-height: 57px;
  }

  /* centre of the table */
  #center-bet {
    font-size: 0.78rem;
    margin-bottom: 5px;
  }

  #center-pot {
    font-size: 1.05rem;
    padding: 4px 12px;
  }

  .chip-pile .chip {
    width: 14px;
    height: 14px;
    margin-left: -6px;
  }

  #center-last {
    font-size: 0.7rem;
    white-space: normal;
    width: 130px;
    margin: 6px auto 0;
  }

  #round-message {
    font-size: 0.82rem;
    width: 46%;
  }

  /* status + one row of big buttons */
  #status {
    margin-top: 14px;
    font-size: 0.9rem;
    padding: 7px 14px;
  }

  #action-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
  }

  #action-panel button {
    min-width: 0;
    padding: 12px 2px;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    line-height: 1.15;
  }

  #showBtn:not(.hidden) {
    grid-column: 1 / -1;
  }

  #powerButtons button {
    width: 44px;
    height: 44px;
    font-size: 0.8rem;
    border-width: 3px;
  }

  .fly.card-fly {
    width: 22px;
    height: 31px;
    margin: -15px 0 0 -11px;
    border-width: 1px;
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
  }

  .fly.chip-fly {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
  }

  #hostControls {
    margin: 6px 0;
  }

  #hostControls .gold-btn {
    padding: 12px 28px;
  }
}