* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #16181d;
  color: #e8e8ea;
  min-height: 100vh;
  min-height: 100dvh;
  /* Touch: no double-tap zoom, no pull-to-refresh reload when installed. */
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  padding-bottom: env(safe-area-inset-bottom);
}

header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 2.42vw, 16px);
  padding: clamp(8px, 1.82vw, 12px) clamp(10px, 3.03vw, 20px);
  padding-top: calc(clamp(8px, 1.82vw, 12px) + env(safe-area-inset-top));
  background: #0f1115;
  border-bottom: 1px solid #2a2d34;
}

header h1 { font-size: clamp(15px, 2.73vw, 18px); font-weight: 600; }

#range-select {
  background: #22252c;
  color: #e8e8ea;
  border: 1px solid #3a3d45;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  max-width: 100%;
}

#stats { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; }
.stat { color: #b9bcc4; }
#stat-accuracy { font-weight: 600; color: #e8e8ea; }

#reset-stats {
  background: none;
  border: 1px solid #3a3d45;
  color: #8a8d95;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4.85vw, 32px);
  justify-content: center;
  align-items: flex-start;
  padding: clamp(14px, 4.85vw, 32px) clamp(8px, 3.03vw, 20px);
}

#play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.64vw, 24px);
  min-width: min(340px, 100%);
  max-width: 100%;
}

#spot-desc {
  color: #b9bcc4;
  font-size: clamp(13px, 2.27vw, 15px);
  text-align: center;
  max-width: 460px;
}

/* ---- poker table ---- */

/* Everything inside the table is sized off the viewport so the whole thing
   scales down to a phone, capped at the desktop sizes it was designed at
   (reached once the table hits its 620px max, around a 646px viewport). */
#table {
  --plate-fs: clamp(10.5px, 2.17vw, 14px);
  --plate-pad-y: clamp(3px, 0.93vw, 6px);
  --plate-pad-x: clamp(8px, 2.48vw, 16px);
  --plate-gap: clamp(4px, 1.24vw, 8px);
  --seat-gap: clamp(3px, 0.93vw, 6px);
  --card-w: clamp(40px, 9.6vw, 62px);
  --back-w: clamp(20px, 4.65vw, 30px);
  --dealer-d: clamp(14px, 3.1vw, 20px);
  --chip-d: clamp(11px, 2.48vw, 16px);

  position: relative;
  width: min(620px, 96vw);
  aspect-ratio: 620 / 400;
  border-radius: 50% / 46%;
  background: radial-gradient(ellipse at 50% 42%, #2f7a4c 0%, #256a40 55%, #1b4f30 100%);
  border: clamp(6px, 1.86vw, 12px) solid #4a3126;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px #5e3f2f;
}

#seats { position: absolute; inset: 0; }

.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--seat-gap);
}
.seat.folded { opacity: 0.4; }

/* Clockwise from the hero at the bottom: slot 1 acts next, slot 5 acted last. */
.slot-0 { bottom: 6px; left: 50%; transform: translateX(-50%); }
.slot-1 { bottom: 22%; left: 1%; }
.slot-2 { top: 22%; left: 1%; }
.slot-3 { top: 12px; left: 50%; transform: translateX(-50%); }
.slot-4 { top: 22%; right: 1%; }
.slot-5 { bottom: 22%; right: 1%; }

.plate {
  display: flex;
  align-items: center;
  gap: var(--plate-gap);
  background: #14161a;
  border: 1px solid #3a3d45;
  border-radius: 20px;
  padding: var(--plate-pad-y) var(--plate-pad-x);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.plate .pos { font-weight: 700; font-size: var(--plate-fs); }
.plate .stack { color: #f0c95c; font-size: var(--plate-fs); font-variant-numeric: tabular-nums; }

.dealer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dealer-d);
  height: var(--dealer-d);
  border-radius: 50%;
  background: #f4f4f6;
  color: #14161a;
  font-size: calc(var(--dealer-d) * 0.6);
  font-weight: 800;
}
.hole-backs { display: flex; gap: clamp(3px, 0.78vw, 5px); }
.hole-backs span {
  width: var(--back-w);
  aspect-ratio: 30 / 42;
  border-radius: 5px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 3px, transparent 3px 6px),
    linear-gradient(#8c2f2f, #6e2222);
  border: 2px solid #e8e8ea;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.bet {
  display: flex;
  align-items: center;
  gap: var(--seat-gap);
  font-size: var(--plate-fs);
  font-weight: 600;
  color: #f0c95c;
  font-variant-numeric: tabular-nums;
}
.chip {
  display: inline-block;
  width: var(--chip-d);
  height: var(--chip-d);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e05252, #9c2b2b);
  border: 2px dashed rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

#pot {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  padding: clamp(2.5px, 0.78vw, 5px) clamp(7px, 2.17vw, 14px);
  font-size: var(--plate-fs);
  color: #e8e8ea;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#cards { display: flex; gap: clamp(5px, 1.24vw, 8px); }

.card {
  width: var(--card-w);
  aspect-ratio: 62 / 86;
  border-radius: 7px;
  background: #f4f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  user-select: none;
}
.card .rank { font-size: clamp(19px, 4.65vw, 30px); font-weight: 700; line-height: 1; }
.card .suit { font-size: clamp(14px, 3.41vw, 22px); line-height: 1; }
.card.s { color: #1c1e22; }
.card.h { color: #d33030; }
.card.d { color: #2565d8; }
.card.c { color: #1e8f45; }

#actions {
  display: flex;
  gap: clamp(8px, 1.82vw, 12px);
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.action-btn {
  border: none;
  border-radius: 8px;
  padding: clamp(11px, 2.12vw, 14px) clamp(14px, 3.94vw, 26px);
  font-size: clamp(15px, 2.58vw, 17px);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  min-width: clamp(104px, 19.7vw, 130px);
  min-height: 48px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.05s, filter 0.1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.action-btn:active:not(:disabled) { transform: scale(0.97); }
.action-btn:disabled { cursor: default; opacity: 0.55; }
.action-btn.chosen { outline: 3px solid #fff; opacity: 1; }
.action-btn kbd {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.75;
  margin-left: 8px;
}

#feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
}
#feedback.hidden { visibility: hidden; }

#verdict { font-size: clamp(17px, 3.33vw, 22px); font-weight: 700; text-align: center; }
#verdict.good { color: #4ecb71; }
#verdict.bad { color: #e05252; }

#freq-bar {
  display: flex;
  width: 100%;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
}
#freq-bar .seg { height: 100%; }

#freq-labels {
  display: flex;
  gap: clamp(10px, 2.73vw, 18px);
  font-size: clamp(12px, 2.12vw, 14px);
  color: #b9bcc4;
  flex-wrap: wrap;
  justify-content: center;
}
#freq-labels .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
}

#next {
  margin-top: 4px;
  background: #2c2f37;
  border: 1px solid #3f434c;
  color: #e8e8ea;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#next kbd {
  font-size: 12px;
  color: #8a8d95;
  border: 1px solid #4a4e58;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
}

#grid-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 100%;
}
#grid-panel.hidden { display: none; }

#grid {
  display: grid;
  /* 508 = 13 columns x 38px + 12 x 1px gap + 2 x 1px border, so the desktop
     layout comes out pixel-identical to the old fixed-size grid. */
  width: min(508px, 96vw);
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 1px;
  background: #0f1115;
  border: 1px solid #2a2d34;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  aspect-ratio: 38 / 30;
  padding-left: clamp(1px, 0.57vw, 3px);
  font-size: clamp(8px, 2.1vw, 11px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.cell.hero { outline: 2px solid #fff; outline-offset: -2px; z-index: 1; }

#legend { display: flex; gap: 16px; font-size: 13px; color: #b9bcc4; flex-wrap: wrap; }
#legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
}

/* ---- pointer-dependent affordances ---- */

@media (hover: hover) {
  #reset-stats:hover { color: #e8e8ea; }
  .action-btn:hover:not(:disabled) { filter: brightness(1.15); }
  #next:hover { background: #363a44; }
}

/* Keyboard shortcuts don't exist on touch — don't advertise them, and give
   the button a full-size tap target in the space they free up. */
@media (hover: none) {
  .action-btn kbd, #next kbd { display: none; }
  #next { min-height: 44px; padding: 12px 22px; }
}

/* ---- phones ---- */

@media (max-width: 640px) {
  /* Give the spot picker its own full-width row under the title and stats.
     16px font is the threshold below which iOS Safari zooms on focus. */
  #range-select { order: 3; flex: 1 0 100%; font-size: 16px; padding: 8px 10px; }

  /* A squarer table keeps the six seats from crowding into each other once
     the width is phone-sized. */
  #table { aspect-ratio: 1 / 1; }

  /* Reserving the feedback's height costs too much of the screen here; the
     action buttons sit above it, so revealing it doesn't shift them. */
  #feedback.hidden { display: none; }
}

/* A phone on its side has width to spare and almost no height, so drive the
   table off the height instead. The coefficients are the portrait ones with
   vw swapped for vh — 62vh stands in the same ratio to the 400px design height
   as 96vw does to the 620px design width. */
@media (orientation: landscape) and (max-height: 520px) {
  #table {
    --plate-fs: clamp(9px, 2.38vh, 14px);
    --plate-pad-y: clamp(2px, 1.02vh, 6px);
    --plate-pad-x: clamp(6px, 2.72vh, 16px);
    --plate-gap: clamp(3px, 1.36vh, 8px);
    --seat-gap: clamp(2px, 1.02vh, 6px);
    --card-w: clamp(40px, 10.54vh, 62px);
    --back-w: clamp(17px, 5.1vh, 30px);
    --dealer-d: clamp(12px, 3.4vh, 20px);
    --chip-d: clamp(9px, 2.72vh, 16px);

    width: auto;
    height: min(400px, 68vh);
    aspect-ratio: 620 / 400;
    border-width: clamp(6px, 2.04vh, 12px);
  }
  .card .rank { font-size: clamp(19px, 5.1vh, 30px); }
  .card .suit { font-size: clamp(14px, 3.74vh, 22px); }
  .hole-backs { gap: clamp(3px, 0.86vh, 5px); }
  #cards { gap: clamp(5px, 1.36vh, 8px); }
  #pot { padding: clamp(2.5px, 0.86vh, 5px) clamp(7px, 2.38vh, 14px); }
}