/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --ink:        oklch(28% 0.05 260);
  --ink-soft:   oklch(46% 0.04 260);
  --ink-faint:  oklch(62% 0.03 260);
  --paper:      oklch(97% 0.012 85);
  --paper-deep: oklch(93% 0.02 80);
  --panel:      oklch(99% 0.006 85);
  --hairline:   oklch(87% 0.02 80);

  --jade:       oklch(54% 0.15 155);
  --jade-deep:  oklch(40% 0.13 155);
  --jade-soft:  oklch(93% 0.05 155);

  --gold:       oklch(88% 0.05 85);
  --gold-deep:  oklch(62% 0.09 70);
  --gold-soft:  oklch(95% 0.03 85);

  --sun:        oklch(70% 0.16 45);
  --lacquer:      oklch(58% 0.19 32);
  --lacquer-soft: oklch(93% 0.06 35);

  --font-display: 'Abril Fatface', Georgia, serif;
  --font-ui: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   Base & Layout
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background:
    radial-gradient(ellipse 900px 500px at 50% -8%, oklch(98% 0.02 85) 0%, transparent 60%),
    var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

.app {
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 16px 48px;
}

/* No escape hatch mid-calculation. visibility (not display) keeps the layout
   steady so the bar doesn't jump when it returns. This used to guard a
   standalone back link; the page now carries the site header, so it guards
   the nav inside it instead. */
body.phase-computing .site-header .site-nav { visibility: hidden; }

.hidden { display: none !important; }

/* The page heading: present for screen readers and crawlers, absent visually.
   Defined here as well as in css/shared.css because this page is
   self-contained and does not load the shared stylesheet — without it the h1
   renders at 2.6rem across the top of the game. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); }
h1 { font-size: 2.6rem; margin-bottom: 6px; letter-spacing: 0.005em; }
h2 { font-size: 1.9rem; margin-bottom: 12px; }
h3 { font-size: 1.25rem; margin-bottom: 8px; }

p { line-height: 1.6; }

.tile, .tile *, .computing-tile, .computing-tile * { font-family: Georgia, 'Times New Roman', serif; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary   { background: var(--jade); color: var(--panel); }
.btn-primary:hover:not(:disabled) { background: var(--jade-deep); }

.btn-secondary { background: var(--sun); color: var(--paper); }
.btn-secondary:hover:not(:disabled) { background: oklch(58% 0.19 40); }

.btn-ghost     { background: var(--panel); border-color: var(--hairline); color: var(--ink-soft); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--paper-deep); border-color: var(--ink); }
.btn-ghost:active { transform: none; }

/* ============================================================
   Welcome Screen
   ============================================================ */
#screen-welcome {
  text-align: center;
  padding-top: 0;
  position: relative;
  z-index: 0;
}
#screen-welcome::before { content: none; }
#screen-welcome .felt-band {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.felt-band {
  background: var(--jade);
  border: 3px solid var(--ink);
  border-radius: 0 0 28px 28px;
  padding: 22px 20px 26px;
  margin: 0 -16px 32px;
  box-shadow: 0 6px 0 var(--jade-deep);
}
.felt-band-tight { padding: 20px 20px 18px; margin-bottom: 24px; }
.felt-band h2 { color: var(--paper); margin-bottom: 0; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.brand-seal {
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-image: url('tiles/MJs1b8-.svg');
  background-size: 150%;
  background-position: 33% 50%;
  background-repeat: no-repeat;
  background-color: var(--paper);
  border: 2.5px dashed var(--jade-deep);
  box-shadow: 0 0 0 2.5px var(--paper);
  flex-shrink: 0;
  transform: rotate(-6deg);
}
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-align: left;
}
.welcome-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 700;
  margin-bottom: 14px;
  transform: rotate(-2deg);
}
.welcome-puzzle-id {
  font-size: 0.9rem;
  color: var(--paper);
  opacity: 0.85;
  margin-bottom: 0;
}
.name-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 14px 22px;
  box-shadow: 3px 3px 0 var(--gold-deep);
}
.name-input-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 700;
}
.name-input {
  width: 240px;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 1rem;
  background: var(--panel);
  border: 1.5px solid var(--hairline);
  border-radius: 10px;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.name-input:focus { border-color: var(--jade); box-shadow: 0 0 0 3px var(--jade-soft); }

.welcome-prev {
  display: inline-block;
  background: var(--jade-soft);
  border: 2px solid var(--jade);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.9rem;
  color: var(--jade-deep);
  font-weight: 700;
  margin-bottom: 24px;
}
.welcome-rules {
  text-align: left;
  background: var(--jade);
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 24px 28px 20px;
  margin: 0 auto 32px;
  max-width: 520px;
  font-size: 0.95rem;
  box-shadow: 5px 5px 0 var(--gold-deep), inset 0 0 0 5px var(--jade-deep);
}
.welcome-rules h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
  opacity: 0.85;
  font-family: var(--font-ui);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--paper);
  margin-bottom: 4px;
}
.rules-steps { list-style: none; }
.rules-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  position: relative;
}
.rules-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 38px;
  bottom: -8px;
  width: 1px;
  background: var(--paper);
  opacity: 0.4;
}
.step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--jade-deep);
  font-size: 0.8rem;
  font-weight: 700;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.step-text { padding-top: 4px; color: var(--paper); line-height: 1.55; }
.step-text strong { color: var(--sun); }

.tile-attribution {
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 16px;
}
.tile-attribution a { color: var(--ink-faint); text-decoration: underline; }
a { color: var(--jade-deep); }
a:hover { color: var(--jade); }

/* ============================================================
   Charleston Screen
   ============================================================ */
#screen-charleston { padding-top: 8px; position: relative; }

.charleston-card {
  background: var(--panel);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 5px 5px 0 var(--gold);
  margin-bottom: 16px;
}
.charleston-card .info-bar {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 0 0 16px;
  margin-bottom: 16px;
}
.charleston-card .hand-section { margin-bottom: 0; }

.hand-hint { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 12px; margin-top: -4px; }

.hand-tray {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px;
}

/* Drag-to-reorder tile states */
.tile.dragging  { opacity: 0.35; transform: scale(0.92); }

/* Without this the browser claims the gesture for scrolling and the pointer
   stream stops mid-drag, so a tile can be picked up and never dropped. */
/* Only the hand tray is draggable — the courtesy screen has no reordering, so
   its tiles keep normal touch behaviour. */
/* Both hands are draggable, so the browser must not claim the gesture for
   scrolling on either. */
#hand-tiles > .tile,
#courtesy-hand > .tile { touch-action: none; }
.drag-placeholder-el {
  width: 4px;
  align-self: stretch;
  min-height: 60px;
  background: var(--jade);
  border-radius: 2px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Direction flash overlay */
.direction-flash {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  padding: 20px 44px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  text-align: center;
}
.direction-flash .flash-arrow { font-size: 3rem; line-height: 1; }
.direction-flash .flash-label { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; }
.direction-flash.flash-in { animation: dir-flash 1.1s ease-out forwards; }
@keyframes dir-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1);    }
}

.info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.round-label    { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; }
.direction-label { font-size: 0.95rem; color: var(--ink-soft); }

.seat-indicator {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jade-deep);
  background: var(--jade-soft);
  border: 2px solid var(--jade);
  border-radius: 999px;
  padding: 4px 12px;
}

.round-dots { display: flex; gap: 9px; align-items: center; }
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--hairline);
  display: inline-block;
}
.dot.done   { background: var(--jade-soft); box-shadow: inset 0 0 0 1px oklch(80% 0.06 155); }
.dot.active { background: var(--jade); transform: scale(1.3); }

.hand-section { margin-bottom: 20px; }
.hand-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hand-section-header h3 {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0;
}
/* Two sorts, one segmented pill — the Commute's control, so the same hand
   behaves the same way in both games. Neither option is lit until you pick
   one: a freshly dealt hand is in dealt order, which is neither. */
.sort-control {
  display: flex;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper-deep);
  flex: none;
}
.btn-sort-opt {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.btn-sort-opt + .btn-sort-opt { border-left: 1px solid var(--hairline); }
.btn-sort-opt:hover { background: var(--paper); }
.btn-sort-opt.sort-active {
  background: var(--ink-soft);
  color: var(--paper);
}

/* The full hand always reads as a single row. 13 tiles at the natural 60px
   width need ~876px but the tray is ~796px, so instead of wrapping, tiles
   flex down to whatever width fits and keep their shape via aspect-ratio.
   Applies anywhere the whole hand is shown. */
#hand-tiles,
#courtesy-hand,
#results-final-hand {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: clamp(2px, 0.7vw, 8px);
}

#hand-tiles > .tile,
#courtesy-hand > .tile,
#results-final-hand > .tile {
  flex: 1 1 0;
  min-width: 0;          /* let flex shrink past the intrinsic width */
  width: auto;
  height: auto;
  max-width: 60px;       /* never larger than the original tile */
  aspect-ratio: 60 / 78;
  container-type: inline-size;   /* so the label can size off the tile */
}

/* Tile height now follows tile width, so a fixed min-height would just leave
   dead space above the row. */
#hand-tiles { min-height: 0; }

/* The badge sizes off the TILE, not the viewport — a word like "Flower" on a
   shrunken tile would otherwise cover the face. */
#hand-tiles .tile-num-label,
#courtesy-hand .tile-num-label,
#results-final-hand .tile-num-label {
  font-size: clamp(6px, 19cqw, 11px);
  padding: 0 4cqw;
  bottom: 5cqw;
  right: 5cqw;
  max-width: calc(100% - 8cqw);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Blind pass controls */
#blind-controls {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
}
#blind-btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.blind-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-right: 2px;
}
.blind-step {
  width: 26px;
  height: 26px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s;
}
.blind-step:hover:not(:disabled) { background: var(--paper-deep); }
.blind-step:disabled { opacity: 0.3; cursor: not-allowed; }
.blind-count-num {
  font-size: 1.1rem;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
}
.blind-desc {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-left: 4px;
}

/* Previously a full-width bordered panel holding one right-aligned button,
   which left a wide empty band across the bottom. The button carries its own
   border and shadow, so the panel only added dead space. */
.pass-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.pass-controls .btn { min-width: 260px; }

/* Pass tile animations */
@keyframes tile-pass-out {
  0%   { transform: translateY(0)     scale(1);    opacity: 1; }
  40%  { transform: translateY(-64px) scale(1.08); opacity: 1; }
  65%  { transform: translateY(-72px) scale(1.05); opacity: 0.7; }
  100% { transform: translateY(-180px) scale(0.9); opacity: 0; }
}
.tile-leaving {
  animation: tile-pass-out 0.62s ease-in forwards;
  pointer-events: none;
  position: relative;
  z-index: 10;
}

@keyframes tile-pass-in {
  0%   { transform: translateY(-110px) scale(0.88); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(0)      scale(1);    opacity: 1; }
}
.tile-entering {
  animation: tile-pass-in 0.55s cubic-bezier(0.2, 0, 0, 1) var(--ti-delay, 0ms) both;
}

/* ============================================================
   Tiles
   ============================================================ */
.tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 60px;
  height: 78px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s;
  position: relative;
  padding: 4px 3px;
  background: transparent;
  border: none;
}
.tile-img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
  display: block;
}
.tile-face {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tile-num-label {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,0.96);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
  color: #111;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  font-family: system-ui, -apple-system, sans-serif;
}
.tile:hover {
  transform: translateY(-3px);
}
.tile.selected {
  transform: translateY(-10px);
  filter: drop-shadow(0 0 4px var(--gold));
}

.tile .tile-num, .tile .tile-sym, .tile .tile-id,
.tile .tile-bamboo, .tile .tile-bamboo i { pointer-events: none; }

.tile .tile-num { font-size: 18px; font-weight: bold; line-height: 1; }
.tile .tile-sym { font-size: 16px; line-height: 1; }
.tile .tile-id  { font-size: 10px; font-weight: bold; line-height: 1; opacity: 0.7; }

.tile .tile-bamboo {
  display: flex; gap: 3px;
  align-items: center; justify-content: center;
}
.tile .tile-bamboo i {
  display: block; width: 3px; height: 14px;
  background: currentColor; border-radius: 2px;
}

.dragon-g  .tile-sym { color: #2e7d32; }
.dragon-r  .tile-sym { color: #c62828; }
.dragon-so .tile-sym { color: #9e9e9e; }

.tile-sm {
  width: 50px; height: 64px;
  padding: 3px; gap: 0;
  cursor: default;
}
.tile-sm:hover { transform: none; box-shadow: 2px 3px 0 #a09070, 1px 2px 6px rgba(0,0,0,0.14); }
.tile-sm .tile-num-label { font-size: 9px; bottom: 3px; }
.tile-sm .tile-num  { font-size: 14px; }
.tile-sm .tile-sym  { font-size: 13px; }
.tile-sm .tile-id   { font-size: 9px; }
.tile-sm .tile-bamboo i { width: 2px; height: 11px; }

.suit-joker  { filter: drop-shadow(0 0 3px var(--gold)); }

/* Tile face artwork */
.face-pips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; width: 100%; padding: 2px; }
.pip { width: 9px; height: 9px; border-radius: 50%; }
.pip-blue { background: #275e9e; }
.pip-red  { background: #a5303a; }
.tile-sm .pip { width: 7px; height: 7px; }

.face-bamboo { display: flex; gap: 2px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.bamboo-stalk { width: 5px; height: 20px; border-radius: 1px; background: #4c8341; position: relative; }
.bamboo-stalk::before, .bamboo-stalk::after { content: ""; position: absolute; left: -1px; right: -1px; height: 1px; background: #35602c; }
.bamboo-stalk::before { top: 33%; }
.bamboo-stalk::after  { top: 66%; }
.tile-sm .bamboo-stalk { width: 4px; height: 16px; }

.face-crak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.crak-num  { font-size: 20px; font-weight: 700; color: #b5232e; line-height: 1; }
.crak-word { font-size: 15px; font-weight: 700; color: #242018; line-height: 1; }
.tile-sm .crak-num  { font-size: 16px; }
.tile-sm .crak-word { font-size: 12px; }

.face-wind { font-size: 26px; font-weight: 700; color: #242018; }
.tile-sm .face-wind { font-size: 20px; }

.face-dragon { font-size: 26px; font-weight: 700; }
.face-dragon-r { color: #b5232e; }
.face-dragon-g { color: #2e7d32; }
.face-dragon-soap { width: 64%; height: 64%; border: 2.5px solid #1c5aa8; border-radius: 4px; box-shadow: inset 0 0 0 2px #fff; }
.tile-sm .face-dragon { font-size: 20px; }

.face-flower { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.flower-glyph { position: relative; width: 20px; height: 20px; }
.flower-glyph i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #a8659a; }
.flower-glyph i:nth-child(1) { top: 0; left: 6.5px; }
.flower-glyph i:nth-child(2) { top: 6.5px; left: 13px; }
.flower-glyph i:nth-child(3) { top: 13px; left: 6.5px; }
.flower-glyph i:nth-child(4) { top: 6.5px; left: 0; }
.flower-glyph .flower-center { top: 6.5px; left: 6.5px; background: #8a3d78; }
.flower-num { font-size: 13px; font-weight: 700; color: #8a3d78; }

.face-joker { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.joker-star { width: 22px; height: 22px; background: #c9992e; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.joker-word { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: #a5781f; }

.tile-no-pass { opacity: 0.45; cursor: not-allowed; }
.tile-no-pass:hover { transform: none; box-shadow: 2px 3px 0 #a09070, 1px 2px 6px rgba(0,0,0,0.14); }

.tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 60px;
}

.closed-badge {
  background: #c62828;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

/* ============================================================
   Second Charleston Prompt
   ============================================================ */
#screen-second-prompt {
  text-align: center;
  padding-top: 60px;
}
.prompt-card {
  position: relative;
  display: inline-block;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 36px 42px;
  max-width: 440px;
  box-shadow: 6px 6px 0 var(--jade);
}
.prompt-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 4px;
  background: var(--sun);
  border-radius: 0 0 3px 3px;
}
.prompt-card h2 { margin-bottom: 12px; }
.prompt-card p  { color: var(--ink-soft); margin-bottom: 28px; }
.prompt-buttons { display: flex; gap: 16px; justify-content: center; }

/* ============================================================
   Courtesy Pass Screen
   ============================================================ */
#screen-courtesy { padding-top: 8px; }

.courtesy-intro {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.courtesy-intro strong { color: var(--ink); }

#courtesy-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 80px;
  margin-bottom: 8px;
}

.courtesy-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   Computing Screen
   ============================================================ */
#screen-computing {
  text-align: center;
  padding-top: 100px;
}
.computing-tiles {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 32px;
}
.computing-tile {
  width: 72px !important;
  height: 94px !important;
  animation: tile-wave 1.4s ease-in-out infinite;
  cursor: default;
}
.computing-tile .tile-num-label { font-size: 12px; }
.computing-tile:nth-child(2) { animation-delay: 0.2s; }
.computing-tile:nth-child(3) { animation-delay: 0.4s; }
@keyframes tile-wave {
  0%, 55%, 100% { transform: translateY(0) scale(1);    box-shadow: none; }
  27%           { transform: translateY(-20px) scale(1.1); box-shadow: 0 12px 24px rgba(0,0,0,0.18); }
}
.computing-label {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--ink-soft);
  transition: opacity 0.3s ease;
}

/* ============================================================
   Results Screen
   ============================================================ */
#screen-results { padding-top: 8px; }

.results-header {
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.results-header.felt-band { display: flex; }
.results-header h2 { margin-bottom: 2px; color: var(--paper); }
.results-puzzle-label { font-size: 0.9rem; color: var(--paper); opacity: 0.8; }
.results-header .btn-hand-card { background: var(--paper); }

.win-prob-card {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 6px 6px 0 var(--gold-deep);
}
.win-delta-row {
  position: relative;
  background: var(--jade);
  padding: 34px 20px 26px;
}
.win-delta-row::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 70px; height: 4px;
  background: var(--sun);
  border-radius: 2px;
}
.win-delta {
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--sun);
}
.win-delta-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sun);
  font-weight: 700;
}
.win-before-after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 22px 20px;
}
.win-col { text-align: center; }
.win-pct {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.win-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.win-arrow {
  font-size: 1.2rem;
  color: var(--gold-deep);
  margin-top: -14px;
}
.delta-up   { color: oklch(88% 0.13 95); }
.delta-down { color: oklch(80% 0.14 27); }
.delta-same { color: oklch(93% 0.02 85); }

.results-panel {
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
}
.results-panel h3 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Streak banner — welcome (nudge) and post-game (reward) */
.streak-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 10px 22px;
  margin: 0 auto 16px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 3px 3px 0 var(--ink);
}
.streak-banner.hidden { display: none; }
.streak-flame { font-size: 1.15rem; line-height: 1; }
.streak-count {
  font-family: var(--font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.streak-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-left: 1px solid var(--hairline);
  padding-left: 10px;
}

/* Small enough that a round's three tiles sit inline beside their label, twice
   over, inside 295px on a phone — so these are smaller than anything else on
   the site. The overlay number label comes off: at this size it is illegible,
   and the tile artwork carries its own numeral anyway. */
.tile-group { display: flex; gap: 4px; }
.tile-xs {
  width: 30px; height: 38px;
  padding: 2px 1px;
  cursor: default;
  flex: none;
}
.tile-xs:hover { transform: none; }
.tile-xs .tile-num-label { display: none; }
.tile-none { color: var(--ink-faint); }

/* ---------- Replay ---------- */
.replay-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.replay-where { text-align: center; line-height: 1.25; }
.replay-label {
  display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
}
.replay-count {
  display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint);
}
.replay-step {
  width: 38px; height: 38px; flex: none;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font-size: 1rem; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}
.replay-step:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.replay-step:disabled { opacity: 0.3; cursor: default; box-shadow: 2px 2px 0 var(--hairline); border-color: var(--hairline); }
.replay-step:disabled:active { transform: none; }

.replay-swap {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding: 10px 0 12px; border-top: 1px solid var(--hairline);
}
.replay-side { display: flex; align-items: center; gap: 8px; }
.replay-side-label {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint);
}
.replay-dealt-note { font-size: 0.82rem; color: var(--ink-faint); font-style: italic; }

/* The tiles that arrived this round. Same jade the game uses for a selected
   tile, so "this one is being acted on" reads the same way throughout. */
.replay-new .tile-img { filter: drop-shadow(0 0 3px var(--jade)) drop-shadow(0 0 1px var(--jade)); }

/* Older records have no round data, so there is nothing to step through and
   the panel is just the final hand under its heading. */
.replay-off .replay-bar,
.replay-off .replay-swap { display: none; }

.results-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ============================================================
   Leaderboard Screen
   ============================================================ */
#screen-leaderboard { padding-top: 8px; }

.lb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 0.95rem;
}
.lb-table thead th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  padding: 0 10px 8px;
}
.lb-table tbody tr td { background: var(--panel); }
.lb-table td {
  padding: 12px 10px;
  border-top: none;
}
.lb-table td:first-child {
  width: 44px;
  text-align: center;
  border-radius: 8px 0 0 8px;
  font-weight: 700;
  color: var(--ink-soft);
}
.lb-table td:last-child {
  border-radius: 0 8px 8px 0;
  font-weight: 700;
  color: var(--jade-deep);
  text-align: right;
}
.lb-table tbody tr td { border: 2px solid var(--ink); border-left: none; border-right: none; }
.lb-table tbody tr td:first-child { border-left: 2px solid var(--ink); }
.lb-table tbody tr td:last-child { border-right: 2px solid var(--ink); }
.lb-table tbody tr:nth-child(1) td:first-child { background: var(--sun); color: var(--paper); }
.lb-table tbody tr:nth-child(1) td { background: oklch(95% 0.06 40); }
.lb-table tbody tr:nth-child(2) td:first-child { background: var(--gold); color: var(--ink); }
.lb-table tbody tr:nth-child(2) td { background: var(--gold-soft); }
.lb-table tbody tr:nth-child(3) td:first-child { background: var(--jade); color: #fff; }
.lb-table tbody tr:nth-child(3) td { background: var(--jade-soft); }
.lb-table tr.lb-me td {
  background: var(--jade-soft);
  font-weight: bold;
}
.lb-table tr.lb-me td:first-child { border-left: 4px solid var(--jade); }
.lb-table tr.lb-me td:last-child { color: var(--jade-deep); }
.lb-status {
  font-size: 0.9rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 16px 0 8px;
}

/* ============================================================
   Hand Card Modal
   ============================================================ */
#modal-hand-card {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 12, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 1000;
  overflow-y: auto;
}
.modal-inner {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 20px;
  width: 100%;
  max-width: 640px;
  padding: 28px;
  box-shadow: 8px 8px 0 var(--jade);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.modal-header h2 { margin: 0; }
.btn-close {
  background: none; border: none;
  font-size: 1.4rem; cursor: pointer;
  color: var(--ink-faint); line-height: 1; padding: 4px 8px;
}
.btn-close:hover { color: var(--jade); }

.hc-section { margin-bottom: 20px; }
.hc-category {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.hc-hand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--paper-deep);
  font-size: 0.9rem;
}
.hc-name { font-family: 'Courier New', monospace; font-weight: bold; }
.hc-meta { color: var(--ink-faint); font-size: 0.85rem; }
.hc-note { color: var(--ink-faint); font-size: 0.8rem; font-style: italic; margin-top: 2px; }
.hc-suit-blue  { color: #0d47a1; }
.hc-suit-green { color: var(--jade-deep); }
.hc-suit-red   { color: var(--lacquer); }
.hc-suit-none  { color: var(--ink); }
.hc-variant { display: block; }
.hc-or { display: block; text-align: center; font-size: 0.75rem; color: var(--ink-faint); font-style: italic; padding: 1px 0; }

.btn-hand-card {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.btn-hand-card:hover { background: var(--paper-deep); }

/* ============================================================
   Responsive
   ============================================================ */
/* Phones can't fit 13 tiles legibly across ~340px — shrinking to fit gives
   18px tiles. The row used to scroll instead, at 44px per tile. That kept the
   tiles tappable but showed only 7 of 13 at a time, and the Charleston choice
   is comparative: you are looking for the three least useful tiles relative to
   everything else you hold, which you cannot do through a 7-tile window.
   There was 418px of empty screen below it the whole time.

   So the hand wraps instead. Five to a row costs one more row out of space
   nobody was using and takes tiles from 44px to 59px — full size, the same as
   desktop — with the whole hand on screen.

   Five per row rather than a natural wrap on tile width, because the count is
   13 or 14 (East is dealt 14 and holds it through the whole Charleston) and
   five gives both of them three rows. A width-based wrap would fit more per
   row on a large phone and fewer on a small one, so the hand's height would
   change between devices and between seats. justify-content centres the short last row so 5/5/3 reads as
   deliberate. Desktop is untouched — above 640px the single row still fits at
   full size. */
@media (max-width: 640px) {
  /* 111px of the 390 was going to nested padding — card, tray and app all
     indenting the same row. Trimming the two inner ones buys the width that
     takes tiles to full size rather than the 44px tap floor. */
  .charleston-card { padding-left: 10px; padding-right: 10px; }
  .hand-tray { overflow-x: visible; padding: 10px 6px; }
  #hand-tiles,
  #courtesy-hand,
  #results-final-hand {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    width: auto;
    min-width: 0;
  }
  #hand-tiles > .tile,
  #courtesy-hand > .tile,
  #results-final-hand > .tile {
    flex: 0 0 calc((100% - 4 * 6px) / 5);
    width: auto;
    max-width: 60px;   /* the tile artwork's own size — never larger */
  }

  /* The pass button sat directly under the hand, in the middle of the screen —
     the hardest place on a phone to reach — with the rest of the display
     empty below it. Push it to the bottom, where the thumb already is. */
  #screen-charleston { display: flex; flex-direction: column; min-height: 78vh; }
  .pass-controls { margin-top: auto; flex-direction: column; gap: 10px; }
  .pass-controls .btn { min-width: 0; width: 100%; }

  /* Three dots beat a sentence: "Select 1 more" has to be read, filled pips
     are seen. */
  .pass-pips { display: flex; gap: 8px; justify-content: center; }
  .pass-pips i {
    display: block; width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid var(--hairline); background: transparent;
    transition: background .15s ease, border-color .15s ease;
  }
  .pass-pips i.on { background: var(--jade); border-color: var(--jade); }
}

@media (min-width: 641px) { .pass-pips { display: none; } }
@media (prefers-reduced-motion: reduce) { .pass-pips i { transition: none; } }

@media (max-width: 520px) {
  .tile    { width: 46px; height: 60px; }
  .tile    .tile-num-label { font-size: 9px; }
  .tile-sm { width: 36px; height: 48px; }
  .tile-sm .tile-num-label { font-size: 8px; }
  /* .tile-xs has to be restated here: it matches .tile on specificity, and the
     rule above it comes later in the file, so without this the pass summary
     draws at 46px and the table stops fitting. */
  .tile-xs { width: 28px; height: 36px; }
  .tile-group { gap: 3px; }
  h1 { font-size: 1.9rem; }
  .win-pct { font-size: 1.5rem; }
  .win-delta { font-size: 2.6rem; }
  .prompt-card { padding: 26px 22px; }
  .seat-badge { padding: 26px 32px; }
  .seat-wind { font-size: 2.6rem; }
  .welcome-rules { padding: 20px 18px 8px; }
}