/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Screens */
.screen { display: none; flex-direction: column; align-items: center; height: 100%; }
.screen.active { display: flex; }
.hidden { display: none !important; }

/* Join screen */
#join-screen {
  justify-content: center;
  gap: 1.5rem;
  overflow-y: auto;
  padding: 1.5rem 1rem;
}
#lobby-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
#join-screen h1 {
  font-size: 2.5rem;
  color: #e94560;
}

/* Lobby grid */
#lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  max-width: 360px;
}
.lobby-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  border: 2px solid #333;
  border-radius: 0.6rem;
  background: #16213e;
  transition: border-color 0.2s;
}
.lobby-slot[data-color="RED"]   { border-color: #c0392b55; }
.lobby-slot[data-color="WHITE"] { border-color: #ecf0f155; }
.lobby-slot[data-color="GREEN"] { border-color: #27ae6055; }
.lobby-slot[data-color="BLACK"] { border-color: #88888855; }
.lobby-slot.taken { border-color: #f0c040; }
.lobby-slot.you   { border-color: #e94560; }
.lobby-slot.bot   { border-color: #555; }
.lobby-slot-label {
  font-weight: 700;
  font-size: 1rem;
}
.lobby-slot[data-color="RED"] .lobby-slot-label   { color: #e74c3c; }
.lobby-slot[data-color="WHITE"] .lobby-slot-label { color: #ecf0f1; }
.lobby-slot[data-color="GREEN"] .lobby-slot-label { color: #2ecc71; }
.lobby-slot[data-color="BLACK"] .lobby-slot-label { color: #aaa; }
.lobby-slot-status {
  font-size: 0.85rem;
  color: #888;
  min-height: 1.2rem;
}
.lobby-slot.taken .lobby-slot-status { color: #f0c040; }
.lobby-slot.you .lobby-slot-status   { color: #e94560; }
.lobby-slot.bot .lobby-slot-status   { color: #888; }

#lobby-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-height: 2rem;
}
#spectator-count { font-size: 0.85rem; color: #888; }
#lobby-message { font-size: 0.85rem; color: #e94560; }

/* Color join buttons inside lobby slots */
.lobby-slot .color-btn {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: #444;
  transition: transform 0.1s, opacity 0.15s;
}
.lobby-slot .color-btn:active { transform: scale(0.95); }
.lobby-slot[data-color="RED"] .color-btn   { background: #c0392b; }
.lobby-slot[data-color="WHITE"] .color-btn { background: #95a5a6; color: #222; }
.lobby-slot[data-color="GREEN"] .color-btn { background: #27ae60; }
.lobby-slot[data-color="BLACK"] .color-btn { background: #555; }
.lobby-slot .color-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Bot preset selector inside lobby slots */
.lobby-slot .bot-preset-select {
  width: 100%;
  padding: 0.25rem 0.4rem;
  border: 1px solid #444;
  border-radius: 0.3rem;
  background: #0f1a2e;
  color: #ddd;
  font-size: 0.8rem;
  cursor: pointer;
}
.lobby-slot .bot-preset-select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lobby-slot .bot-preset-select.hidden {
  display: none;
}

/* In-game player status bar */
#player-status-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem;
  width: 100%;
}
.player-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.4;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.player-indicator.connected,
.player-indicator.bot {
  opacity: 1;
}
.player-indicator.is-turn {
  box-shadow: 0 0 6px 1px currentColor;
}
.player-indicator .pip {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #555;
}
.player-indicator.connected .pip { background: #2ecc71; }
.player-indicator.bot .pip { background: #888; }
.player-indicator.disconnected .pip { background: #e74c3c; }

.player-indicator[data-color="RED"]   { color: #e74c3c; }
.player-indicator[data-color="WHITE"] { color: #ecf0f1; }
.player-indicator[data-color="GREEN"] { color: #2ecc71; }
.player-indicator[data-color="BLACK"] { color: #aaa; }

.spectator-badge {
  font-size: 0.75rem;
  color: #888;
  margin-left: 0.3rem;
}
.spectator-badge:not(:empty)::before {
  content: '\1F441  ';
}
#spectate-btn {
  margin-top: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: #333;
  color: #aaa;
  border: 1px solid #555;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}
#spectate-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#reset-game-btn {
  margin-top: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: #5a2a2a;
  color: #f4d4d4;
  border: 1px solid #a04040;
  border-radius: 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}
#reset-game-btn:hover:not(:disabled) { background: #6e3535; }
#join-status { color: #e94560; min-height: 1.5rem; }

/* Help panel (lobby) */
#help-panel {
  width: 100%;
  max-width: 360px;
  background: #16213e;
  border: 1px solid #2a2a4a;
  border-radius: 0.6rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#help-panel details + details {
  border-top: 1px solid #2a2a4a;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}
#help-panel details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #888;
  user-select: none;
  padding: 0.25rem 0;
  list-style: none;
}
#help-panel details summary::before {
  content: '▶  ';
  font-size: 0.7rem;
}
#help-panel details[open] summary::before {
  content: '▼  ';
}
.help-content {
  padding-top: 0.6rem;
}
#help-panel dl {
  display: grid;
  gap: 0.5rem;
}
#help-panel dt {
  font-size: 0.8rem;
  font-weight: 700;
  color: #c0c0c0;
  margin-top: 0.4rem;
}
#help-panel dd {
  font-size: 0.8rem;
  color: #888;
  line-height: 1.45;
  margin-left: 0;
}

/* Game screen layout */
#game-screen {
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 0.25rem;
  gap: 0.25rem;
}

#game-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  gap: 0.5rem;
  overflow: hidden;
}

#game-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  gap: 0.25rem;
  overflow: hidden;
  /* Establish a size container so #play-area can be sized as the largest
     aspect-correct box that fits inside this column. */
  container-type: size;
}

/* Play area: vertical split of the center column into a square board (top)
   and a hand row (bottom). Both share the same width so the hand can never
   extend past the board's left/right edges. The split ratio is driven by the
   --hand-fraction custom property (hand height / board height). When the
   local player's hand is empty (e.g. before the game starts) the hand slice
   collapses so the board fills the full column. */
#play-area {
  --hand-fraction: 0.22;
  --total-h: calc(1 + var(--hand-fraction));
  display: flex;
  flex-direction: column;
  /* Largest box with the desired aspect ratio that fits inside #game-main:
     width is the smaller of the column width and the column-height-divided-
     by-aspect; aspect-ratio derives the matching height. */
  width: min(100cqw, calc(100cqh / var(--total-h)));
  aspect-ratio: 1 / var(--total-h);
  min-width: 0;
  min-height: 0;
}

/* Empty hand → give the whole play area to the board (pure 1:1 square). */
#play-area:has(#hand:empty) {
  --hand-fraction: 0;
}

/* Right-side info panel (turn indicator + status text + action buttons) */
#info-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem;
  flex-shrink: 0;
  background: transparent;
}

/* When inside the info-panel, the player status bar reads as a horizontal
   turn-indicator row at the top of the right column. */
#info-panel #player-status-bar {
  width: 100%;
  padding: 0.25rem 0.5rem;
}

/* Move history log sidebar — in-flow on desktop, hidden on mobile */
#move-log {
  display: none;
  flex-direction: column;
  background: #16213e;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid #2a2a4e;
  font-size: 0.7rem;
}

#move-log-header {
  padding: 0.4rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  background: #1a1a2e;
  border-bottom: 1px solid #2a2a4e;
  flex-shrink: 0;
}

#move-log-entries {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 0;
}

.log-entry {
  font-size: 0.68rem;
  line-height: 1.35;
  color: #999;
  word-break: break-word;
}

.log-player {
  font-weight: 700;
}

.log-entry[data-player="RED"] .log-player   { color: #e74c3c; }
.log-entry[data-player="WHITE"] .log-player { color: #ecf0f1; }
.log-entry[data-player="GREEN"] .log-player { color: #2ecc71; }
.log-entry[data-player="BLACK"] .log-player { color: #aaa; }

.log-entry.log-system { font-style: italic; opacity: 0.6; }

/* ── Chat panel (web-only; relayed by crawfish-web/server.js) ────────────
   Lives in the bottom half of the right-side info panel on desktop and is
   hidden on mobile (matches how the move log is hidden on mobile). */
#chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  background: #16213e;
  border: 1px solid #2a2a4e;
  border-radius: 0.4rem;
  overflow: hidden;
  font-size: 0.75rem;
}
#chat-header {
  padding: 0.4rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  background: #1a1a2e;
  border-bottom: 1px solid #2a2a4e;
  flex-shrink: 0;
}
#chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.3rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 0;
}
.chat-msg {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #ddd;
  word-break: break-word;
}
.chat-author {
  font-weight: 700;
  margin-right: 0.3rem;
}
.chat-msg[data-player="RED"]   .chat-author { color: #e74c3c; }
.chat-msg[data-player="WHITE"] .chat-author { color: #ecf0f1; }
.chat-msg[data-player="GREEN"] .chat-author { color: #2ecc71; }
.chat-msg[data-player="BLACK"] .chat-author { color: #aaa; }
.chat-msg[data-player="SPECTATOR"] .chat-author { color: #888; }
.chat-msg.chat-system {
  font-style: italic;
  opacity: 0.7;
  color: #aaa;
}
.chat-msg.chat-system[data-player="RED"]   { color: #e74c3c; }
.chat-msg.chat-system[data-player="WHITE"] { color: #ecf0f1; }
.chat-msg.chat-system[data-player="GREEN"] { color: #2ecc71; }
.chat-msg.chat-system[data-player="BLACK"] { color: #aaa; }
#chat-form {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border-top: 1px solid #2a2a4e;
  background: #1a1a2e;
  flex-shrink: 0;
}
#chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid #2a2a4e;
  border-radius: 0.3rem;
  background: #0f1a2e;
  color: #e0e0e0;
  font-size: 0.8rem;
}
#chat-input:focus { outline: none; border-color: #e94560; }
#chat-send {
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  border-radius: 0.3rem;
}
#chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

#status-bar {
  text-align: center;
  font-size: 1rem;
  padding: 0.25rem;
  min-height: 1.5rem;
  width: 100%;
}

#board-container {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#board {
  width: 100%;
  height: 100%;
  max-height: 100%;
  transform-origin: center;
  transform-box: fill-box;
}

/* Hand — fixed-height bottom slice of #play-area. Width matches the board
   above (both children of #play-area at 100% width) so the leftmost and
   rightmost cards can never extend past the board's edges. */
#hand-container {
  width: 100%;
  flex: 0 0 calc(100% * var(--hand-fraction) / var(--total-h));
  min-height: 0;
  display: flex;
  align-items: stretch;
  padding: 0.25rem 0;
}
#hand {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.card {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 157 / 238;
  min-width: 0;
  padding: 0.25rem;
  border: 3px solid #444;
  border-radius: 0.6rem;
  background: #fff;
  color: #e0e0e0;
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  user-select: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Anchor the absolutely-positioned `.card-tooltip` child. */
  position: relative;
}
.card .card-face {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  border-radius: 0.35rem;
}
.card:active { transform: scale(0.93); }
.card.selected { border-color: #e94560; background: #ffe8ef; }
.card.playable { border-color: #f0c040; }
.card.discard-pick { border-color: #e94560; }
/* Fade only the card face (not the whole button) so the hover tooltip
   stays at full opacity \u2014 child opacity can't exceed its parent's, so
   applying the fade to a sibling of `.card-tooltip` keeps the tooltip
   readable on hover. The button itself stays interactive-looking via
   cursor + the lack of a colored border. */
.card.unplayable { cursor: default; }
.card.unplayable .card-face { opacity: 0.4; }

/* Fade-out animation when the local player plays a card. The card shrinks
   slightly and fades to transparent in place, then is removed from the hand
   on the next render once the server confirms the new state. The duration
   here MUST stay in sync with CARD_PLAY_FADE_MS in app.js. */
.card.playing {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
  pointer-events: none;
  cursor: default;
}

/* Flip-in animation for newly dealt cards. The card briefly turns edge-on
   then rotates to face-up, with a quick fade so it appears to land. */
.card.dealing {
  animation: card-flip-in 560ms ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
@keyframes card-flip-in {
  0%   { transform: rotateY(90deg) scale(0.92); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

/* Hover/focus tooltip describing what each hand card does. The tooltip
   sits above the card, hidden by default and revealed on `:hover` /
   `:focus-visible`. It's driven entirely by CSS — `pointer-events: none`
   ensures it never blocks clicks, and `transition-delay` on the show
   transition prevents it from popping while quickly scanning the hand.
   On touch devices (`hover: none`) it stays hidden to avoid awkward
   tap-to-show behavior. */
.card-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 220px;
  padding: 0.5rem 0.6rem;
  background: #16213e;
  color: #e0e0e0;
  border: 1px solid #2a3a5e;
  border-radius: 0.45rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 50;
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
}
.card-tooltip::after {
  /* Small downward-pointing arrow under the tooltip. */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #16213e;
}
.card:hover .card-tooltip,
.card:focus-visible .card-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 120ms ease-out 120ms, transform 120ms ease-out 120ms, visibility 0s linear 0s;
}
.card-tooltip-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: #fff;
}
.card-tooltip-desc {
  margin: 0 0 0.4rem 0;
}
.card-tooltip-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.kw {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  background: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid transparent;
}
.kw-forward   { background: #3a3a3a; color: #e0e0e0; }
.kw-backward  { background: #4a3322; color: #f0a060; border-color: #6a4a2a; }
.kw-split     { background: #4a1a2a; color: #ff7a92; border-color: #e94560; }
.kw-bring-out { background: #4a3a14; color: #ffd870; border-color: #f0c040; }
.kw-teleport  { background: #1f3a52; color: #9bd4f0; border-color: #5dade2; }
@media (hover: none) {
  .card-tooltip { display: none; }
}

/* Action bar */
#action-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.action-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 0.4rem;
  background: #e94560;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

#start-btn {
  background: #2e8b57;
  color: #fff;
  border-color: #4cc17f;
}

#start-btn:disabled {
  background: #2a2a2a;
  color: #8a8a8a;
  border-color: #444;
}
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.action-btn:active:not(:disabled) { transform: scale(0.95); }

/* Split panel */
#split-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #16213e;
  border-top: 2px solid #e94560;
  padding: 0.75rem;
  max-height: 50vh;
  overflow-y: auto;
  z-index: 10;
}
#split-title { font-weight: 600; margin-bottom: 0.5rem; }
#split-content { display: flex; flex-direction: column; gap: 0.4rem; }

/* Game over overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.overlay-content {
  background: #16213e;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
}
.overlay-content h2 { margin-bottom: 1rem; }

/* Toast */
#toast-container {
  position: fixed;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: #333;
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  animation: toast-in 0.2s ease, toast-out 0.3s ease 2s forwards;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }

/* SVG board styles */
#board .ring-dot { fill: #333; }
#board .ring-dot.entry { fill: #666; }
#board .ring-dot.entrance { fill: #555; }
#board .home-dot { fill: none; stroke: #444; stroke-width: 1; }
#board .start-dot { fill: none; stroke: #444; stroke-width: 1; }
#board .marble { cursor: pointer; transition: r 0.1s; }
#board .marble:hover { filter: brightness(1.2); }
#board .marble-hit { fill: transparent; cursor: pointer; pointer-events: all; }
#board .marble.highlight { stroke: #f0c040; stroke-width: 2.5; stroke-dasharray: 4 2; animation: pulse 0.8s infinite alternate; }
#board .marble.joker-target { stroke: #e74c3c; stroke-width: 2.5; stroke-dasharray: 4 2; animation: pulse 0.8s infinite alternate; cursor: crosshair; }
#board .marble.selected-marble { stroke: #f0c040; stroke-width: 2.5; stroke-dasharray: 4 2; animation: pulse 0.8s infinite alternate; }
#board .dest-marker { fill: #f0c040; opacity: 0.5; cursor: pointer; }
#board .dest-marker:hover { opacity: 0.8; }
#board .dest-hit { fill: transparent; cursor: pointer; pointer-events: all; }
#board .ghost-marble { pointer-events: none; opacity: 0.3; stroke-dasharray: 3 2; stroke-width: 1.5; }
#board .start-count { font-size: 11px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
#board .start-count.highlight { animation: pulse 0.8s infinite alternate; }
#board .corner-dot { fill: #444; }

/* Center draw pile */
#board .draw-pile { pointer-events: none; }
#board .draw-pile-card {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
#board .draw-pile-badge-bg {
  fill: rgba(0, 0, 0, 0.55);
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1;
}
#board .draw-pile-badge {
  fill: #fff;
  font-family: inherit;
}

/* Per-player discard slots (last card played) */
#board .discard-slot { pointer-events: none; }
#board .discard-card-bg {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 0.5;
}
#board .discard-card {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

@keyframes pulse { from { stroke-opacity: 1; } to { stroke-opacity: 0.4; } }
.card.marble-playable { border-color: #5dade2; }

/* Copyright footer */
#copyright {
  font-size: 0.7rem;
  color: #555;
  text-align: center;
  padding: 0.5rem 0;
  letter-spacing: 0.02em;
}

/* ── Desktop join screen: lobby-main centred, help-panel as left sidebar ── */
@media (min-width: 1100px) {
  #join-screen {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow: hidden;
  }
  #lobby-main {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
  }
  #help-panel {
    position: absolute;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    width: 260px;
    max-width: none;
    padding: 0;
    overflow-y: auto;
    border-radius: 0.4rem;
    border-color: #2a2a4e;
    gap: 0;
  }
  #help-panel details + details {
    margin-top: 0;
    padding-top: 0;
  }
  #help-panel details summary {
    display: block;
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    background: #1a1a2e;
    border-bottom: 1px solid #2a2a4e;
    flex-shrink: 0;
  }
  #help-panel details + details summary {
    border-top: 1px solid #2a2a4e;
  }
  .help-content {
    padding: 0.5rem;
  }
}

/* ── Desktop layout (≥ 1100px): 3 columns — move-log | board+hand | info-panel ── */
@media (min-width: 1100px) {
  #game-screen {
    max-width: none;
    padding: 0.5rem;
  }
  #game-body {
    flex-direction: row;
    align-items: stretch;
  }
  #move-log {
    display: flex;
    flex: 0 0 36ch;
    min-height: 0;
  }
  #game-main {
    flex: 1 1 auto;
    min-width: 0;
  }
  #info-panel {
    flex: 0 0 36ch;
    padding: 1rem;
    justify-content: flex-start;
    gap: 1rem;
    background: #16213e;
    border-radius: 0.5rem;
    border: 1px solid #2a2a4e;
  }
  #info-panel #status-bar {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.5rem;
    min-height: 3rem;
  }
  #info-panel #action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  #info-panel .action-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    border-radius: 0.5rem;
  }
  #info-panel #chat-send {
    width: auto;
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 0.3rem;
  }
  /* Hand can also breathe a bit on desktop */
  #hand {
    gap: 0.6rem;
  }
  .card {
    padding: 0.6rem 0.4rem;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
  }
}

/* ── Mobile / narrow layout (< 1100px): cards fill area below the board ── */
@media (max-width: 1099.98px) {
  #game-screen {
    max-width: 100%;
  }
  #game-body {
    flex-direction: column;
  }
  #move-log {
    display: none;
  }
  #chat-panel {
    display: none;
  }
  /* Flatten #info-panel on mobile so the turn indicator stays pinned at the
     top of the screen while #status-bar + #action-bar drop below the hand. */
  #info-panel {
    display: contents;
  }
  #player-status-bar { order: 0; }
  #game-main         { order: 1; }
  #status-bar        { order: 2; }
  #action-bar        { order: 3; }
  /* Slightly taller hand on touch devices for accessible tap targets. */
  #play-area {
    --hand-fraction: 0.28;
  }
  .card {
    font-size: clamp(1.6rem, 7vw, 3rem);
    padding: 0.4rem 0.3rem;
  }
  #status-bar {
    font-size: 0.95rem;
    min-height: 1.4rem;
    text-align: center;
  }
  #action-bar {
    padding: 0.25rem 0;
  }
  .action-btn {
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
  }
}