:root {
  /* Postal-ink card colors: muted, dusty, still distinguishable at a glance */
  --green: #5b8266;
  --pink: #a8677f;
  --blue: #5a7fa0;
  --red: #a85a45;
  --orange: #9c6c35;

  /* Paper-toned neutrals */
  --bg: #f2ede3;
  --card-bg: #f8f4ea;
  --ink: #3a332a;
  --ink-soft: #726858;
  --border: #e6ddc9;

  /* Postmark-ink accent */
  --accent: #5b7089;
  --accent-dark: #435568;

  --success: #4f7d5c;
  --success-dark: #3d6248;
  --danger: #b5564a;
  --danger-dark: #8f4237;

  /* Pale tints for badges/banners */
  --tint-accent: #e2e8ee;
  --tint-success: #dfece2;
  --tint-danger: #f3ded9;

  /* Neomorphic soft-shadow pair (warm light source, top-left) */
  --shadow-light: rgba(255, 255, 255, 0.8);
  --shadow-dark: rgba(158, 138, 105, 0.28);

  --radius: 20px;
  --radius-sm: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(1200px 800px at 50% -10%, #f9f5eb 0%, #f2ede3 55%, #ece4d2 100%);
  color: var(--ink);
  min-height: 100vh;
}

#app {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 12px 80px;
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 18px;
  gap: 8px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.brand h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent-dark);
}

.brand .tagline {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-soft);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lang-switch {
  display: flex;
  gap: 4px;
  background: var(--card-bg);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 4px 4px 9px var(--shadow-dark), -4px -4px 9px var(--shadow-light);
}

.lang-switch button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.85rem;
  transition: box-shadow 0.15s ease, color 0.15s ease;
}

.lang-switch button.active {
  color: var(--accent-dark);
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}

section { display: none; }
section.visible { display: block; }

.panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 8px 8px 18px var(--shadow-dark), -8px -8px 18px var(--shadow-light);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.panel h2 {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; }
.field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(67, 85, 104, 0.3);
  transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.1s ease;
}
button.btn:hover { background: var(--accent-dark); }
button.btn:active { transform: scale(0.97); box-shadow: 0 2px 5px rgba(67, 85, 104, 0.3); }
button.btn:disabled { background: var(--border); color: var(--ink-soft); box-shadow: none; cursor: not-allowed; }
button.btn.secondary {
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
}
button.btn.secondary:hover { color: var(--accent-dark); }
button.btn.secondary:active {
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  transform: none;
}
button.btn.success { background: var(--success); box-shadow: 0 4px 10px rgba(79, 125, 92, 0.3); }
button.btn.success:hover { background: var(--success-dark); }
button.btn.danger { background: var(--danger); box-shadow: 0 4px 10px rgba(143, 66, 55, 0.3); }
button.btn.danger:hover { background: var(--danger-dark); }
button.btn.block { width: 100%; }
button.btn.small { padding: 7px 14px; font-size: 0.85rem; border-radius: 999px; }
button.btn.secondary.danger-text { color: var(--danger-dark); }

.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.account-bar span { font-weight: 600; color: var(--ink-soft); font-size: 0.9rem; }

.my-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  box-shadow: 4px 4px 9px var(--shadow-dark), -4px -4px 9px var(--shadow-light);
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.my-game-row:hover { box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light); transform: translateY(-1px); }
.my-game-row:active { box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); transform: none; }
.my-game-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.my-game-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.my-game-code {
  font-weight: 800;
  letter-spacing: 2px;
  background: var(--tint-accent);
  color: var(--accent-dark);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.85rem;
}
.my-game-status { font-size: 0.9rem; color: var(--ink-soft); }
.my-game-status.your-turn { color: var(--success-dark); font-weight: 700; }
.my-game-progress { font-size: 0.8rem; color: var(--ink-soft); }
.my-game-delete {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.my-game-delete:hover { background: var(--tint-danger); color: var(--danger-dark); }

.code-display {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 2rem;
  letter-spacing: 6px;
  font-weight: 700;
  text-align: center;
  padding: 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 2px dashed var(--border);
  box-shadow: inset 2px 2px 6px var(--shadow-dark), inset -2px -2px 6px var(--shadow-light);
  color: var(--accent-dark);
  cursor: pointer;
  user-select: all;
}

.player-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.player-chip {
  background: var(--card-bg);
  box-shadow: 3px 3px 7px var(--shadow-dark), -3px -3px 7px var(--shadow-light);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.player-chip.you { background: var(--accent); color: #fff; box-shadow: 0 3px 8px rgba(67, 85, 104, 0.3); }
.player-chip.eliminated { text-decoration: line-through; opacity: 0.5; box-shadow: none; }
.player-chip.won { background: var(--success); color: #fff; box-shadow: 0 3px 8px rgba(79, 125, 92, 0.3); }

.turn-banner {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}
.turn-banner.mine { background: var(--tint-success); color: var(--success-dark); }
.turn-banner.theirs { background: var(--tint-accent); color: var(--accent-dark); }

.deck-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.deck-stats .stat-label { font-weight: 600; }

.pile-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pile-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 3px 3px 8px var(--shadow-dark), -2px -2px 6px var(--shadow-light);
  flex-shrink: 0;
}
.pile-tile.color-green { background: linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%), var(--green); }
.pile-tile.color-pink { background: linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%), var(--pink); }
.pile-tile.color-blue { background: linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%), var(--blue); }
.pile-tile.color-red { background: linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%), var(--red); }
.pile-tile.color-orange { background: linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%), var(--orange); }
.pile-tile .animal svg { width: 16px; height: 16px; color: #fff; }
.pile-tile .pile-count { font-size: 0.8rem; font-weight: 800; }
.pile-tile.selectable { cursor: pointer; transition: transform 0.1s ease; }
.pile-tile.selectable:hover { transform: translateY(-3px); }
.pile-tile.empty { opacity: 0.35; filter: grayscale(0.6); cursor: not-allowed; }

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.card {
  width: 68px;
  height: 92px;
  border-radius: 14px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-weight: 800;
  position: relative;
  box-shadow: 4px 4px 10px var(--shadow-dark), -2px -2px 8px var(--shadow-light);
  cursor: default;
  flex-shrink: 0;
}

.card.selectable { cursor: pointer; transition: transform 0.1s ease; }
.card.selectable:hover { transform: translateY(-4px); }
.card.selected { outline: 3px solid var(--ink); outline-offset: 2px; }
.card.disabled { opacity: 0.4; filter: grayscale(0.5); cursor: not-allowed; }

.card .animal svg { width: 22px; height: 22px; color: rgba(255,255,255,0.95); display: block; }
.card .num { font-size: 1.25rem; line-height: 1; }
.card .dots {
  display: flex;
  gap: 3px;
  margin-top: 2px;
  height: 6px;
}
.card .dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.9); }

.card.color-red { background: linear-gradient(155deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%), var(--red); }
.card.color-blue { background: linear-gradient(155deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%), var(--blue); }
.card.color-green { background: linear-gradient(155deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%), var(--green); }
.card.color-pink { background: linear-gradient(155deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%), var(--pink); }
.card.color-orange { background: linear-gradient(155deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 55%), var(--orange); }

.card.unknown-number .num { font-size: 1.5rem; opacity: 0.85; }

.card .color-label {
  position: absolute;
  top: -8px;
  left: -6px;
  background: var(--ink);
  color: #fff;
  font-size: 0.6rem;
  border-radius: 6px;
  padding: 1px 4px;
}

.clue-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 0.7rem; max-width: 110px; }
.hand-slot-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hand-slot-wrap .color-name { font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); }

/* Markers and hand cards are two rows of ONE shared grid (not two separate
   grids stacked on top of each other) so a marker's column is guaranteed to
   line up with the true boundary between the two hand cards below it. Two
   independent grids only look aligned when both happen to render at the
   same width -- on a narrow phone, "hand-board"'s horizontal scroll lets the
   (wider, card-filled) cards row stretch past the (emptier) markers row's
   natural width, which drifts their columns apart. */
.hand-board { margin: 10px 0; }
.hand-board-grid {
  display: grid;
  grid-template-columns: 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px;
  grid-template-rows: minmax(28px, auto) auto;
  align-items: end;
  column-gap: 4px;
  row-gap: 8px;
}
.hand-gap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-self: center;
  overflow: visible;
}
/* The marker card itself is wide and centers (with overflow) on its 14-20px
   gap column, so on narrow screens it can visually read as sitting "on top
   of" one neighboring hand card instead of "between" the two. This pointer
   stays exactly as wide as the gap column (never overflows), so it always
   marks the true boundary precisely, regardless of card width or screen size. */
.hand-gap-pointer {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--ink-soft);
  flex-shrink: 0;
}
.card.marker-mini { width: 42px; height: 58px; border-radius: 8px; }
.card.marker-mini .num { font-size: 0.8rem; }
.card.marker-mini .animal svg { width: 14px; height: 14px; }
.card.marker-mini .dots { height: 4px; }
.card.marker-mini .dots span { width: 4px; height: 4px; }
.clue-badge {
  font-size: 0.65rem;
  background: var(--tint-accent);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--accent-dark);
}
.clue-badge.same { background: var(--tint-success); color: var(--success-dark); }
.clue-badge.diff { background: var(--tint-danger); color: var(--danger-dark); }

.action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.gotfive-work-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
}
.gotfive-work-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  box-shadow: 3px 3px 7px var(--shadow-dark), -3px -3px 7px var(--shadow-light);
}
.gotfive-work-cell .animal-icon svg { width: 18px; height: 18px; display: block; }
.gotfive-work-cell .color-name { font-size: 0.7rem; font-weight: 700; }
.gotfive-work-cell input {
  width: 100%;
  min-width: 0;
  text-align: center;
  border: none;
  border-radius: 8px;
  background: var(--bg);
  padding: 7px 2px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
}
.gotfive-work-cell input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gotfive-work-cell input.invalid { outline: 2px solid var(--danger); }
.gotfive-work-cell input::-webkit-outer-spin-button,
.gotfive-work-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gotfive-work-cell input[type=number] { -moz-appearance: textfield; }

.other-players { display: flex; flex-direction: column; gap: 10px; }
.other-player {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg);
}
.other-player-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.other-player .hand-board { margin: 6px 0 0; }
.other-player .badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tint-accent);
  color: var(--accent-dark);
}
.other-player.current .other-player-head { color: var(--accent-dark); }

.log-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}
.log-list .log-entry { padding: 4px 8px; border-radius: 8px; background: var(--bg); }
.log-list .log-entry:nth-child(odd) { background: var(--tint-accent); }

.workbook-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 7px;
}
.workbook-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease;
}
.workbook-cell:hover { transform: translateY(-2px); }
.workbook-cell-num { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.workbook-cell .dots { display: flex; gap: 2px; margin-top: 1px; height: 5px; }
.workbook-cell .dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.9); }
.workbook-cell.crossed { opacity: 0.3; text-decoration: line-through; }
.workbook-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.workbook-row .label { width: 76px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; display: flex; align-items: center; gap: 5px; }
.workbook-row .label .animal-icon svg { width: 20px; height: 20px; }
.animal-icon svg { width: 16px; height: 16px; display: block; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 37, 27, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 10px 10px 24px rgba(43, 37, 27, 0.25);
}

#toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 100;
  max-width: 90vw;
  text-align: center;
}
#toast.show { opacity: 1; }

.end-banner {
  text-align: center;
  padding: 24px;
}
.end-banner h2 { font-size: 1.6rem; color: var(--accent-dark); }

.hint { font-size: 0.8rem; color: var(--ink-soft); margin: 4px 0 10px; }

@media (max-width: 480px) {
  .card { width: 52px; height: 72px; }
  .card .num { font-size: 1.1rem; }
  .brand h1 { font-size: 1.3rem; }
  .code-display { font-size: 1.5rem; letter-spacing: 4px; }
  .workbook-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .workbook-cell-num { font-size: 0.9rem; }
  .workbook-cell .dots span { width: 4px; height: 4px; }
  .workbook-row .label { width: 60px; font-size: 0.78rem; }

  /* The hand grid's 11-column template (marker-gap, card, marker-gap, card,
     ...) can add up to more than a narrow phone's viewport width. Rather
     than let the last card spill outside the panel, let it scroll
     horizontally on its own so every card stays fully visible and tappable. */
  .hand-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .hand-board-grid {
    grid-template-columns: 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px;
    column-gap: 3px;
    min-width: 330px;
  }
}