/* ==========================================================================
   Rummy — Design tokens
   Felt-table aesthetic: deep green felt, ivory chrome, brass accents.
   ========================================================================== */

:root {
  --felt-deep: #1B4332;
  --felt-shadow: #0D2818;
  --ivory: #F5F0E6;
  --brass: #C9A227;
  --danger-red: #8B1E1E;
  --card-back: #B0202E;
  --ink: #2A2A2A;
  --ink-soft: #5A5A52;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --radius-card: 6px;
  --radius-panel: 12px;
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-card-lifted: 0 6px 16px rgba(0, 0, 0, 0.45);

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--felt-deep);
}

.hidden {
  display: none !important;
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Shared: screens, buttons, panels
   ========================================================================== */

.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#lobby-screen {
  justify-content: flex-start;
  padding-top: 40px;
  padding-bottom: 40px;
  min-height: auto;
}

.game-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--ivory);
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: 0.02em;
}

.game-title-image {
  display: block;
  max-width: 420px;
  width: 100%;
  height: auto;
  margin: 0 auto 24px;
}

.lobby-card {
  background: var(--ivory);
  border-radius: var(--radius-panel);
  padding: 32px;
  max-width: 960px;
  width: 100%;
  box-shadow: var(--shadow-card-lifted);
  position: relative;
}

.lobby-card .game-title {
  color: var(--felt-deep);
}

.account-status {
  display: block;
  margin: -14px auto 20px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  text-align: center;
}

.account-status:hover {
  color: var(--felt-deep);
}

.account-status.signed-in {
  color: var(--felt-deep);
  font-weight: 600;
  text-decoration: none;
}

.lobby-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  justify-content: center;
}

.lobby-panel {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lobby-panel h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 8px;
  color: var(--felt-deep);
}

.lobby-panel label {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 8px;
}

.lobby-panel input {
  padding: 10px 12px;
  border: 1px solid #ccc4b0;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
}

.lobby-panel select {
  padding: 10px 12px;
  border: 1px solid #ccc4b0;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  height: 42px;
}

.lobby-divider {
  align-self: center;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
}

.lobby-error {
  color: var(--danger-red);
  text-align: center;
  margin-top: 16px;
  font-weight: 600;
}

.btn {
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 12px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--brass);
  color: var(--felt-shadow);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.5);
}

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--ink-soft);
  color: var(--ink-soft);
}

.code-display {
  margin-top: 16px;
  text-align: center;
}

.game-code {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--felt-deep);
  background: rgba(201, 162, 39, 0.15);
  border: 2px dashed var(--brass);
  border-radius: 8px;
  padding: 12px 20px;
  display: inline-block;
  margin-top: 8px;
}

.copy-link-btn {
  display: block;
  margin: 10px auto 0;
}

.invite-form {
  margin-top: 24px;
  text-align: left;
}

.invite-form label {
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
}

.invite-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.invite-form-row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ccc4b0;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
}

.invite-form-row .btn {
  margin-top: 0;
  white-space: nowrap;
}

.invite-status {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--felt-deep);
}

.player-roster {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  text-align: left;
}

.player-roster li {
  padding: 8px 12px;
  background: rgba(201, 162, 39, 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
  color: var(--felt-deep);
  font-weight: 600;
}

.player-roster li.roster-open {
  background: transparent;
  border: 1.5px dashed #ccc4b0;
  color: var(--ink-soft);
  font-weight: 400;
  font-style: italic;
}

/* ==========================================================================
   Draw-off ("who goes first") screen — once per match only
   ========================================================================== */

.draw-off-card {
  text-align: center;
}

.draw-off-card #draw-off-subtitle {
  color: var(--ink-soft);
  margin: -12px 0 20px;
}

.draw-off-deck-row {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.draw-off-deck {
  display: inline-flex;
}

.draw-off-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 16px 0;
}

.draw-off-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.draw-off-slot-name {
  color: var(--felt-deep);
  font-weight: 600;
  font-size: 0.9rem;
}

.draw-off-slot-card {
  display: flex;
}

/* An empty outline where a seat's card will land — replaced by the real
   (revealed) card the instant its flight animation lands, see
   runDrawOffFlights. Sized to match a real card in JS so nothing shifts. */
.draw-off-placeholder {
  border: 1.5px dashed #ccc4b0;
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.03);
}

/* Tappable state applies to the shared deck only, and only while your own
   seat hasn't drawn yet — see canDraw in renderDrawOffScreen. */
.draw-off-tappable .card {
  cursor: pointer;
  animation: draw-off-pulse 1.6s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  .draw-off-tappable .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-lifted);
  }
}

@keyframes draw-off-pulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50% { box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.6), var(--shadow-card); }
}

/* Reuses the same gold-flash cue as a discard landing, timed to the
   moment a slot's card actually flips face-up. */
.draw-off-revealed .draw-off-slot-card .card {
  animation: discard-flash-anim 1.4s ease-out;
}

.draw-off-announcement {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--felt-deep);
}

.resume-session-list {
  list-style: none;
  margin: 16px auto;
  padding: 0;
  text-align: left;
  max-width: 500px;
}

.resume-session-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(201, 162, 39, 0.1);
  border-radius: 6px;
  margin-bottom: 8px;
}

.resume-session-info {
  color: var(--felt-deep);
  font-weight: 600;
}

.resume-session-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.resume-session-list .btn {
  margin-top: 0;
  white-space: nowrap;
}

.invite-status-error {
  color: var(--danger-red);
}

/* ==========================================================================
   Game table
   ========================================================================== */

#table-screen {
  justify-content: flex-start;
  padding: 12px;
  gap: 12px;
  min-height: auto;
}

/* Board-focus mode: hides the GameShack site header/nav and the in-game
   table header (scores, turn indicator, leave-game link), leaving just
   the meld quadrants, piles, and hand. Toggled via #board-focus-btn. */
body.board-focus-mode .site-header,
body.board-focus-mode .site-nav,
body.board-focus-mode .table-header {
  display: none;
}

.table-header {
  width: 100%;
  max-width: min(1100px, 96vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(13, 40, 24, 0.5);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(245, 240, 230, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}

.icon-btn {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--brass);
  background: rgba(13, 40, 24, 0.9);
  color: var(--brass);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.icon-btn:hover {
  background: var(--brass);
  color: var(--felt-shadow);
}

.lobby-icon-row {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

.bottom-right-controls {
  width: 100%;
  max-width: min(1100px, 96vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.corner-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--brass);
  background: var(--felt-shadow);
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: var(--shadow-card-lifted);
}

.corner-btn:hover {
  background: var(--brass);
  color: var(--felt-shadow);
}

.corner-btn.active {
  background: var(--brass);
  color: var(--felt-shadow);
}

.switcher-panel {
  position: fixed;
  bottom: 84px;
  right: 20px;
  width: 300px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  background: var(--ivory);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card-lifted);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 95;
}

.switcher-game-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  overflow-y: auto;
  flex: 1;
}

.switcher-game-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(201, 162, 39, 0.1);
  border-radius: 6px;
  margin-bottom: 8px;
}

.switcher-game-info {
  flex: 1;
  color: var(--felt-deep);
  font-size: 0.85rem;
  line-height: 1.3;
}

.switcher-game-list .btn {
  margin-top: 0;
  padding: 6px 12px;
  font-size: 0.85rem;
}

.switcher-empty {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
  padding: 12px 0;
}

.switcher-add-btn {
  margin: 0;
  border-radius: 0;
  width: 100%;
}

.score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ivory);
  min-width: 90px;
}

.score-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.presence-online {
  background: #4caf50;
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.7);
}

.presence-offline {
  background: rgba(245, 240, 230, 0.3);
}

.score-name {
  font-size: 0.8rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score-presence-label {
  font-size: 0.65rem;
  color: rgba(245, 240, 230, 0.55);
  margin-top: 1px;
}

.score-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--brass);
}

.table-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.turn-indicator {
  color: var(--ivory);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* Consistent emoji size everywhere a player's emoji appears — score row,
   hand labels, turn indicator, meld boxes, chat, game-over modal, waiting
   room, game lists — independent of whatever font-size the surrounding
   label happens to use. Matches the turn indicator's size, since that's
   the reference point for "how big it should look." */
.player-emoji {
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: -1px;
}

.table-game-code {
  color: var(--ivory);
  opacity: 0.6;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.leave-game-link {
  background: transparent;
  border: none;
  color: var(--ivory);
  opacity: 0.5;
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
}

.leave-game-link:hover {
  opacity: 0.85;
}

.scores-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.header-logo {
  align-self: stretch;
  width: auto;
  max-height: 64px;
  flex-shrink: 0;
}

.hand-toolbar {
  width: 100%;
  max-width: min(1100px, 96vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hand-toolbar-actions {
  display: flex;
  gap: 8px;
}

.btn-small {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(245, 240, 230, 0.3);
  color: var(--ivory);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-small:hover {
  background: rgba(201, 162, 39, 0.25);
}

.btn-small:disabled {
  opacity: 0.4;
  cursor: default;
}

.hint-banner {
  width: 100%;
  max-width: min(1100px, 96vw);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: rgba(201, 162, 39, 0.15);
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: var(--radius-panel);
  padding: 8px 14px;
  color: var(--ivory);
  font-size: 0.85rem;
  margin: 0;
}

#hint-banner-text {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hint-line-heading {
  opacity: 0.75;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.hint-banner-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--ivory);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.7;
}

.hint-banner-close:hover {
  opacity: 1;
}

/* Applied to the shared #undo-meld-btn specifically while it represents
   an undoable discard rather than a meld — bright and impossible to miss
   for the few seconds it's actually actionable. */
.btn-small.discard-undo {
  background: #ffd700;
  border-color: #ffd700;
  color: #1a1a1a;
  font-weight: 700;
}

.btn-small.discard-undo:hover {
  background: #ffe44d;
}

.card.hint-highlight {
  box-shadow: 0 0 0 3px #ffd700, var(--shadow-card-lifted);
}

.hand-label {
  width: 100%;
  max-width: min(1100px, 96vw);
  text-align: center;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 0.9rem;
  opacity: 0.75;
  margin: 4px 0 0;
}

.your-hand-row-wrap {
  width: 100%;
  max-width: min(1100px, 96vw);
  position: relative;
}

.your-hand-row-wrap .hand-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  max-width: none;
  text-align: left;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

.your-hand-row {
  max-width: min(1100px, 96vw);
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 8px 8px 90px; /* left space reserved for the overlaid "My hand" label */
  border-radius: var(--radius-panel);
  position: relative;
  /* Same shrink-wrap fix as .opponent-hand-block — was width: 100%,
     which made the .slot-active highlight span the full row width
     instead of hugging just the cards. max-width above still caps it
     so a full hand wraps to a second line exactly as before. */
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}

/* The generic .slot-active background/box-shadow below would otherwise
   paint across the row's own padding box — including the 90px gutter
   reserved for the "My hand" label on the left, which has no cards in
   it. Paint the highlight on a pseudo-element instead, inset past that
   gutter, so it hugs just the actual cards. Always rendered (opacity
   toggled) rather than added/removed with the class, so it still fades
   in/out the same way the row's own background used to. */
.your-hand-row.slot-active {
  background: none;
  box-shadow: none;
}

.your-hand-row::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* 90px minus 8px so this leaves the same ~8px gap before the first
     card that top/right/bottom already get from the row's own padding
     — left: 90px landed exactly on the card edge with no gap at all. */
  left: 82px;
  background: rgba(201, 162, 39, 0.14);
  box-shadow: 0 0 0 2px var(--brass);
  border-radius: var(--radius-panel);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.your-hand-row.slot-active::before {
  opacity: 1;
}


/* Highlights whichever quadrant/opponent-block belongs to the currently
   active player — since nobody's position on screen moves with whose
   turn it is, this (plus the "X's turn" banner above the table) is the
   tell-tale for who's up. */
.slot-active {
  background: rgba(201, 162, 39, 0.14);
  box-shadow: 0 0 0 2px var(--brass);
}

/* Meld quadrants + piles, together in one grid. Your own melds live in
   the standalone #quadrant-me block near your hand, not here.
   Turn order flows clockwise starting from you: next (your left), then
   third (across from you), then fourth (your right) — but visually they
   all sit in a single row across the top now, in that order left-to-right,
   each with equal width and room for their hand + melds stacked vertically.
   The piles get their own full-width row below that opponent row.
     2 players -> next, stacked directly above the piles
     3 players -> next, third across the top; piles span full width below
     4 players -> next, third, fourth across the top; piles span full
                  width below */
.meld-quadrants {
  width: 100%;
  max-width: min(1100px, 96vw);
  display: grid;
  gap: 12px;
}

.meld-quadrants.count-2 {
  grid-template-columns: 1fr;
  grid-template-areas:
    "next"
    "piles";
}

.meld-quadrants.count-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "next   third"
    "piles  piles";
}

.meld-quadrants.count-4 {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "next   third  fourth"
    "piles  piles  piles";
}

.meld-quadrant {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0; /* lets this grid/flex item actually shrink to its
                   column's width instead of overflowing past it */
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(245, 240, 230, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 26px 10px 10px;
  min-height: 72px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.quadrant-hand {
  flex-shrink: 0;
}

/* Your own melds: a standalone block (not part of the .meld-quadrants
/* Your own melds AND your own hand, together — sitting between the
   piles and the rest of the page, needing its own width/centering the
   way .piles-row gets theirs. Your hand used to be a separate element
   entirely (a plain .your-hand-row-wrap sibling below); now it's nested
   inside here too, same as an opponent's hand sits inside their own
   .meld-quadrant box. */
#quadrant-me {
  width: 100%;
  max-width: min(1100px, 96vw);
}

/* The player's name sits superimposed in the top-left corner of their
   quadrant, rather than taking up a full row of its own, so a quadrant
   with few/no melds yet doesn't look mostly empty. */
.quadrant-header {
  position: absolute;
  top: 6px;
  left: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
}

.quadrant-melds {
  flex: 1;
  min-width: 0; /* same fix — a flex child needs this to wrap its
                   contents instead of pushing past the box edge */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* A small tell-tale for which difficulty a bot is playing at, since once
   the game starts there's nowhere else that shows it. Color-coded so it
   reads at a glance without needing to parse the word every time. */
.bot-difficulty-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.bot-difficulty-easy {
  background: rgba(111, 168, 74, 0.25);
  color: #6fa84a;
}

.bot-difficulty-medium {
  background: rgba(201, 162, 39, 0.25);
  color: var(--brass);
}

.bot-difficulty-hard {
  background: rgba(199, 62, 58, 0.25);
  color: #c73e3a;
}

.meld-group {
  display: flex;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.meld-group:hover {
  background: rgba(201, 162, 39, 0.15);
}

.meld-group .card {
  margin-left: -30px;
}

.meld-group .card:first-child {
  margin-left: 0;
}

/* Each meld-segment is one player's contribution to one meld, shown in
   their own quadrant — a label clarifies whose meld it's part of when
   it's not their own (a lay-off onto someone else's run/set). */
.meld-segment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.meld-segment-label {
  font-size: 0.65rem;
  color: rgba(245, 240, 230, 0.55);
  margin-bottom: 2px;
  white-space: nowrap;
}

/* Each opponent's hand-count block, now built inside their own quadrant
   (see .quadrant-hand in index.php) rather than a separate shared row. */

.opponent-hand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-panel);
  padding: 6px 10px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
  /* Shrink-wrap to the actual card content instead of stretching to the
     full quadrant width (its default as a block-level flex container) —
     otherwise the .slot-active highlight below spans the whole quadrant
     width rather than hugging just the hand itself. -webkit- fallback
     for older iOS Safari, which doesn't understand the bare keyword. */
  width: -webkit-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.other-hand-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 60px;
}

.piles-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: min(1100px, 96vw);
  min-width: 0; /* grid item — must shrink to its column, not overflow
                   into the neighboring quadrant's column (this was
                   letting the discard pile spill over into East's box) */
  padding-top: 26px; /* reserves real room for .pile-caption (the "Draw
                         N" label), which is absolutely positioned above
                         the draw pile — without this, the label floats
                         outside .piles-row's own box entirely and
                         overlaps whatever quadrant sits above it */
  /* Positioning context for .pile-toast, so the toast can overlay the
     space just below the piles instead of pushing layout below it. */
  position: relative;
}

.pile {
  width: 90px;
  height: 130px;
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  /* Without this, iOS Safari treats a finger-drag on the pile as a page
     pan/scroll gesture and takes the touch over before pointermove ever
     sees enough movement to cross the drag threshold — so tap-to-draw
     still works but drag never starts. Same reasoning as
     .your-hand-row .card below. */
  touch-action: none;
}

.draw-pile {
  background: transparent;
  border: none;
  flex-direction: column;
}

/* Two faux cards peeking out from behind the top card, offset diagonally,
   to read as "a stack" rather than a single flat card sitting on a plain
   box. Purely decorative — the real pile count still lives in .pile-count. */
.draw-pile::before,
.draw-pile::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 89px;
  border-radius: var(--radius-card);
  background: var(--card-back);
  box-shadow: var(--shadow-card);
}

.draw-pile::before {
  transform: translate(-50%, -50%) translate(3px, 3px);
  z-index: 0;
}

.draw-pile::after {
  transform: translate(-50%, -50%) translate(6px, 6px);
  z-index: 0;
}

.draw-pile-card {
  position: relative;
  z-index: 1;
}

.draw-pile.pile-empty::before,
.draw-pile.pile-empty::after {
  display: none;
}

.draw-pile:hover {
  filter: brightness(1.1);
}

.draw-pile-card svg {
  display: block;
}

.pile-caption {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  white-space: nowrap;
}

.pile-label {
  color: rgba(245, 240, 230, 0.5);
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pile-count {
  color: rgba(245, 240, 230, 0.6);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

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

.discard-pile {
  background: rgba(0, 0, 0, 0.1);
  border: 2px dashed rgba(245, 240, 230, 0.15);
}

.discard-pile.selectable {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.4);
}

.discard-pile.expanded {
  width: auto;
  max-width: min(80vw, 520px);
  height: auto;
  min-height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  justify-content: flex-start;
}

/* Brief reminder toast for tapping a pile when it's not actually
   actionable (not your turn, or already drawn and time to discard
   instead). Non-blocking — fades on its own, never demands a click. */
.pile-toast {
  /* Absolute within .piles-row (now its parent): overlays the space
     right below the piles without occupying flow space, so it no
     longer pushes the hand row down while visible. */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  max-width: min(90vw, 360px);
  background: rgba(13, 40, 24, 0.94);
  color: var(--ivory);
  border: 1px solid var(--brass);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card-lifted);
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-align: center;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
}

.pile-toast.hidden {
  display: none;
}

.pile-toast.showing {
  animation: pile-toast-fade 2.4s ease-in-out forwards;
}

@keyframes pile-toast-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.discard-toggle-link {
  background: transparent;
  border: none;
  color: var(--ivory);
  opacity: 0.6;
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.discard-toggle-link:hover {
  opacity: 0.9;
}

/* Individual cards */

.card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, margin 0.15s ease;
  cursor: pointer;
  flex-shrink: 0;
  /* The card art includes SVG <text> elements for the rank/suit corner
     labels — without this, a mouse drag across the hand highlights them
     like ordinary page text instead of just moving/selecting cards. */
  user-select: none;
  -webkit-user-select: none;
}

.card svg {
  display: block;
  border-radius: var(--radius-card);
}

/* The SVG deck's back designs set their own fill to `inherit` specifically
   so it can be recolored via CSS without editing the SVG file — this pulls
   the card back into the felt/brass theme instead of the deck's default
   blue. */
.card-back svg use {
  fill: var(--card-back);
}

.your-hand-row .card {
  margin-left: -28px;
  cursor: grab;
  touch-action: none;
}

.your-hand-row .card:first-child {
  margin-left: 0;
}

/* Only apply the hover-lift on devices with a real hover-capable pointer
   (mouse/trackpad). On touch devices, iOS/iPadOS Safari simulates :hover
   after a tap and doesn't clear it until the next tap lands somewhere
   else — so a card re-rendered at the same screen position (e.g. right
   after being deselected) would otherwise pick up this hover transform
   and look like it only lifted "halfway" instead of dropping fully back
   down. Touch has no real hover concept anyway, so scoping this out
   entirely is correct, not just a workaround. */
@media (hover: hover) and (pointer: fine) {
  .your-hand-row .card:not(.selected):hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-card-lifted);
    z-index: 5;
  }
}

.card.selected {
  transform: translateY(-20px);
  box-shadow: 0 0 0 3px var(--brass), var(--shadow-card-lifted);
  z-index: 6;
}

.card.dragging {
  cursor: grabbing;
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
  transition: none;
}

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

.card.shake {
  animation: card-shake 0.35s ease;
}

/* Briefly draws the eye to a card the instant it lands on top of the
   discard pile — added in JS only on the render right after the top
   card actually changes, so a fast bot's discard is noticeable even if
   it happens between one glance and the next. */
@keyframes discard-flash-anim {
  0% {
    box-shadow: 0 0 0 5px rgba(201, 162, 39, 0.9);
    transform: scale(1.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    transform: scale(1);
  }
}

.discard-flash {
  animation: discard-flash-anim 1.4s ease-out;
}

/* Positioning/stacking for the synthetic card clone used to animate an
   opponent's action (e.g. a discard) traveling across the table — the
   clone is created and animated entirely in JS via the Web Animations
   API (see flyCard() in game.js), so no CSS transition is defined here;
   that sidesteps any interaction with .card's own transition rule. */
.card.flying-card {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 9999;
  pointer-events: none;
}

.other-hand-row .card {
  margin-left: -35px;
  cursor: default;
}

.other-hand-row .card:first-child {
  margin-left: 0;
}

.other-hand-row .card:hover {
  transform: none;
}

.discard-selectable {
  cursor: pointer;
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  /* touch-action isn't inherited from .discard-pile/.pile — each
     draggable discard card needs its own, or iOS Safari hijacks the
     drag as a page pan the same way the draw pile did. */
  touch-action: none;
}

/* Action bar */

.action-bar {
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  background: rgba(13, 40, 24, 0.7);
  padding: 8px 14px;
  border-radius: var(--radius-panel);
}

.action-bar .btn {
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.action-hint {
  color: var(--ivory);
  font-size: 0.85rem;
  flex: 1;
  text-align: center;
  min-width: 0;
}

/* Game over */

.modal {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--ivory);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card-lifted);
  z-index: 100;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--felt-deep);
  color: var(--ivory);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: grab;
  user-select: none;
}

.modal-header:active {
  cursor: grabbing;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--ivory);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal-body {
  padding: 20px;
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 99;
}

/* Chat */

.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger-red);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-panel {
  position: fixed;
  bottom: 84px;
  right: 20px;
  width: 300px;
  max-width: calc(100vw - 32px);
  height: 380px;
  max-height: calc(100vh - 120px);
  background: var(--ivory);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card-lifted);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 95;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--felt-deep);
  color: var(--ivory);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 700;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-message {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.3;
  word-wrap: break-word;
}

.chat-message-mine {
  align-self: flex-end;
  background: rgba(201, 162, 39, 0.25);
  color: var(--ink);
}

.chat-message-theirs {
  align-self: flex-start;
  background: rgba(27, 67, 50, 0.12);
  color: var(--ink);
}

.chat-message-sender {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.65;
  display: block;
  margin-bottom: 2px;
}

.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid #ddd4c0;
}

.chat-input-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc4b0;
  border-radius: 6px;
  font-size: 0.9rem;
}

.chat-input-row .btn {
  margin-top: 0;
  padding: 8px 14px;
}

.rules-modal {
  width: 1400px;
  top: 40px;
}

.rules-modal .modal-header {
  cursor: default;
}

.rules-body {
  text-align: left;
  max-height: 78vh;
  overflow-y: auto;
  overflow-anchor: none;
  scroll-behavior: smooth;
  color: var(--ink);
}

.rules-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: rgba(27, 67, 50, 0.06);
  border: 1px solid rgba(27, 67, 50, 0.15);
  border-radius: var(--radius-panel);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.rules-toc-group {
  flex: 1 1 180px;
  min-width: 160px;
}

.rules-toc-group h4 {
  font-family: var(--font-display);
  color: var(--felt-deep);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.rules-toc-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rules-toc-group li {
  margin-bottom: 5px;
  font-size: 0.85rem;
  line-height: 1.3;
}

.rules-toc-group a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted rgba(27, 67, 50, 0.4);
}

.rules-toc-group a:hover,
.rules-toc-group a:focus {
  color: var(--felt-deep);
  border-bottom-style: solid;
}

.back-to-top {
  display: block;
  text-align: left;
  font-size: 0.78rem;
  color: var(--felt-deep);
  opacity: 0.7;
  text-decoration: none;
  margin: -2px 0 4px;
  scroll-margin-top: 8px;
}

.back-to-top:hover,
.back-to-top:focus {
  opacity: 1;
  text-decoration: underline;
}

.rules-body h3 {
  font-family: var(--font-display);
  color: var(--felt-deep);
  margin: 16px 0 6px;
  scroll-margin-top: 8px;
}

.rules-body h3:first-child {
  margin-top: 0;
}

.rules-body ul,
.rules-body ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.rules-body li {
  margin-bottom: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.rules-body p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 8px;
}

.settings-modal {
  width: 640px;
  top: 40px;
}

.settings-body {
  text-align: left;
  color: var(--ink);
  max-height: 78vh;
  overflow-y: auto;
}

.settings-scope-note {
  margin: 0 0 16px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
}

.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.settings-toggle-row input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--felt-deep);
}

.settings-row-label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.settings-row {
  margin: 0 0 20px;
}

.settings-text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ccc4b0;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  font-family: inherit;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}

.emoji-swatch {
  width: 100%;
  aspect-ratio: 1;
  font-size: 1.1rem;
  border-radius: 6px;
  border: 2px solid transparent;
  background: #f4efe4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.emoji-swatch:hover {
  background: #e9e1cd;
}

.emoji-swatch.selected {
  border-color: var(--brass);
  background: #fff;
}

.card-back-swatch-row {
  display: flex;
  gap: 14px;
}

.card-back-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.card-back-swatch[data-color="red"] {
  background: #B0202E;
}

.card-back-swatch[data-color="black"] {
  background: #1C1C1C;
}

.card-back-swatch[data-color="blue"] {
  background: #1B4B72;
}

.card-back-swatch.selected {
  border-color: var(--brass);
}

.gameover-scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  margin: 4px 0 20px;
}

.gameover-scores .score-box {
  color: var(--felt-deep);
}

.gameover-scores .score-value {
  color: var(--danger-red);
}

.match-over-banner {
  background: var(--felt-deep);
  color: var(--brass);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius-panel);
  margin: 0 0 14px;
}

.gameover-scores .match-winner-box {
  border: 2px solid var(--brass);
  border-radius: var(--radius-panel);
  padding: 6px 10px;
  background: rgba(201, 162, 39, 0.12);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
  .lobby-actions {
    flex-direction: column;
  }

  .lobby-divider {
    padding: 4px 0;
  }

  .game-title {
    font-size: 2rem;
  }

  .game-title-image {
    max-width: 280px;
  }

  .header-logo {
    max-height: 44px;
  }

  .pile {
    width: 70px;
    height: 100px;
  }

  .meld-quadrants {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "third"
      "next"
      "fourth"
      "piles" !important;
  }

  .meld-quadrant {
    flex-direction: column !important;
  }
}


/* ---- Head-to-head line (gameover modal) ---- */

.head-to-head-line {
  text-align: center;
  color: var(--felt-deep);
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0 0 14px;
}

/* ---- Stats modal ---- */

.stats-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

#stats-modal label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: left;
  margin: 0 0 6px;
}

#stats-modal input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc4b0;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.stats-status {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 12px;
}

.stats-overall {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--felt-deep);
  font-size: 1.05rem;
  margin: 16px 0 8px;
}

#stats-results h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 16px 0 6px;
  text-align: left;
}

.stats-opponent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.stats-opponent-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(201, 162, 39, 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
  color: var(--felt-deep);
}

.stats-opponent-record {
  font-weight: 700;
  color: var(--brass);
}

/* ---- Sign-in modal (OTP) ---- */

#signin-modal label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: left;
  margin: 0 0 6px;
}

#signin-modal input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc4b0;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  margin-bottom: 12px;
  box-sizing: border-box;
}

#signin-modal .btn {
  width: 100%;
}

.signin-status {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 10px;
  text-align: center;
}

.signin-status.error {
  color: var(--danger-red);
  font-weight: 600;
}