/* MAPLES TO MAPLES — mobile-first. Same dark "evening newsroom" palette as
   the rest of the Btown Games arcade, plus the two card faces the game is
   named for: the green prompt card and the cream answer (red) cards. */

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #14212e;
  --panel: #1e3040;
  --panel-2: #253a4d;
  --ink: #f2ede2;
  --muted: #9db2c4;
  --accent: #ffb62e;      /* maple gold */
  --good: #45d483;
  --bad: #ff6b6b;
  --green-card: #2e7d43;  /* the weekly prompt card */
  --green-deep: #21592f;
  --paper: #f7f1e3;       /* answer card face */
  --paper-ink: #26221a;
  --maple-red: #c0392b;
  --radius: 14px;
}
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* header */
#topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px 10px;
}
#logo { font-size: 20px; font-weight: 900; letter-spacing: 1px; }
#logo span { color: var(--accent); }
#week-chip { font-size: 12px; color: var(--muted); font-weight: 600; }

/* views */
#views { flex: 1; padding: 0 14px 18px; }
.view { animation: fadein .18s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
.hidden { display: none !important; }
.section-title { font-size: 17px; margin: 6px 2px 10px; }

.notice {
  text-align: center; color: var(--muted);
  padding: 38px 22px; line-height: 1.5; font-size: 15px;
}
.notice.mini { padding: 12px; font-size: 14px; color: var(--good); }
.notice .big { font-size: 42px; margin-bottom: 10px; }
.notice p { margin: 6px 0; }
/* Empty states get a barely-there Burlington backdrop: Green Mountains
   ridgelines over Lake Champlain (static inline SVG — nothing animates,
   so prefers-reduced-motion needs no special case). */
#round-none, #round-upcoming, #results-none, #deck-empty {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 130' preserveAspectRatio='none'%3E%3Cpath fill='%231c3040' d='M0 78 L45 52 L95 72 L150 40 L205 70 L260 50 L315 74 L365 46 L420 68 L470 54 L520 72 L520 96 L0 96 Z'/%3E%3Cpath fill='%231b3532' d='M0 92 L60 68 L120 88 L190 60 L250 84 L320 64 L390 88 L450 70 L520 88 L520 96 L0 96 Z'/%3E%3Crect y='96' width='520' height='34' fill='%23132a3d'/%3E%3Cg fill='%239db2c4' fill-opacity='.06'%3E%3Crect x='70' y='105' width='96' height='2' rx='1'/%3E%3Crect x='300' y='112' width='140' height='2' rx='1'/%3E%3Crect x='190' y='120' width='70' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E") bottom center / 100% 130px no-repeat;
  border-radius: var(--radius);
  padding-bottom: 110px;
}
.linkish {
  background: none; border: none; color: var(--accent);
  font: inherit; text-decoration: underline; cursor: pointer;
  padding: 12px 8px; margin: -4px 0; min-height: 44px;
  display: inline-flex; align-items: center;
}

.phase-banner {
  background: var(--panel); color: var(--accent);
  border: 1px solid rgba(255, 182, 46, .35);
  font-size: 13px; font-weight: 700; text-align: center;
  padding: 8px 10px; border-radius: 999px; margin: 2px 0 12px;
}
.phase-banner.vote { color: var(--good); border-color: rgba(69, 212, 131, .35); }

/* ---------------- the green card ---------------- */
/* The prompt is the green card: deep green stock, inset keyline, corner
   maples, and a compact pinned version above the judging deck. */
.green-card {
  position: relative;
  background: linear-gradient(160deg, var(--green-card), var(--green-deep));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px rgba(247, 251, 240, .55), 0 8px 24px rgba(0, 0, 0, .35);
  padding: 26px 20px 28px;
  text-align: center;
  font-size: 24px; font-weight: 800; line-height: 1.25;
  color: #f2f8ee;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.green-card.hero-card {
  width: min(76vw, 300px);
  min-height: clamp(320px, 44vh, 390px);
  margin: 0 auto;
  padding: 56px 30px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: clamp(24px, 7vw, 31px);
  box-shadow:
    inset 0 0 0 3px rgba(247, 251, 240, .65),
    inset 0 0 0 9px rgba(33, 89, 47, .6),
    0 16px 32px rgba(0, 0, 0, .42);
}
.green-card.hero-card::before,
.green-card.hero-card::after {
  position: absolute;
  color: rgba(242, 248, 238, .86);
  font-size: 24px;
  line-height: 1;
}
.green-card.hero-card::before { content: "🍁"; top: 20px; left: 20px; }
.green-card.hero-card::after { content: "🍁"; right: 20px; bottom: 20px; transform: rotate(180deg); }
.green-card.deal-in { animation: deal-card .58s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes deal-card {
  from { opacity: 0; transform: translateY(-38px) rotate(-5deg) scale(.92); }
  70% { opacity: 1; transform: translateY(4px) rotate(1deg) scale(1.01); }
  to { opacity: 1; transform: none; }
}
.green-card .green-label {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(242, 248, 238, .65);
  margin-bottom: 10px; text-shadow: none;
}
.green-card.slim { padding: 16px 16px 18px; font-size: 18px; margin-bottom: 12px; }
.green-card.slim .green-label { margin-bottom: 6px; }
.green-card.mini {
  padding: 12px 14px; font-size: 15px; text-align: left;
  border-radius: 10px; box-shadow: none;
}
.judging-prompt {
  position: sticky;
  top: 6px;
  z-index: 4;
  box-shadow: inset 0 0 0 2px rgba(247, 251, 240, .55), 0 5px 16px rgba(0, 0, 0, .45);
}

.deadline { font-size: 13px; color: var(--muted); text-align: center; margin: 10px 0 4px; }
.hint { font-size: 13px; color: var(--muted); text-align: center; margin: 10px 4px; line-height: 1.45; }

/* answer form */
#answer-form { margin-top: 10px; }
textarea, input[type="text"], input[type="password"], #name-input {
  width: 100%; background: var(--panel); color: var(--ink);
  border: 1px solid #35506a; border-radius: var(--radius);
  padding: 12px 14px; font: inherit; font-size: 16px; resize: none;
}
textarea:focus, input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.form-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 10px;
}
#answer-chars { font-size: 13px; color: var(--muted); min-width: 34px; }

.btn {
  border: none; border-radius: 999px; font-weight: 800; font-size: 15px;
  padding: 12px 22px; cursor: pointer; touch-action: manipulation;
}
.btn.primary { background: var(--accent); color: #23180a; }
.btn.primary:disabled { opacity: .45; cursor: default; }
.btn:active { transform: scale(.97); }

/* ---------------- swipe deck (answer cards) ---------------- */
#deck-wrap { position: relative; }
#deck {
  position: relative; height: min(46vh, 380px);
  /* pan-y: the browser keeps vertical page scroll; horizontal drags belong
     to the deck's pointer events (pan-x would let the browser claim them) */
  touch-action: pan-y;
}
.card {
  position: absolute; inset: 0;
  border-radius: var(--radius); overflow: hidden;
  /* cream card stock with a faint maple-leaf watermark (inline SVG tile) */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%23c0392b' fill-opacity='.05'%3E%3Cpath transform='translate(12 10) rotate(-14 16 16)' d='M16 1.5 L18.2 7 L21 5.2 L19 10.2 L27 7.5 L24 12 L30 13.5 L21.5 16 L27.5 20.5 L19.5 20 L21.5 25.5 L17 22.5 L16.8 30 L15.2 30 L15 22.5 L10.5 25.5 L12.5 20 L4.5 20.5 L10.5 16 L2 13.5 L8 12 L5 7.5 L13 10.2 L11 5.2 L13.8 7 Z'/%3E%3Cpath transform='translate(52 50) rotate(18 16 16)' d='M16 1.5 L18.2 7 L21 5.2 L19 10.2 L27 7.5 L24 12 L30 13.5 L21.5 16 L27.5 20.5 L19.5 20 L21.5 25.5 L17 22.5 L16.8 30 L15.2 30 L15 22.5 L10.5 25.5 L12.5 20 L4.5 20.5 L10.5 16 L2 13.5 L8 12 L5 7.5 L13 10.2 L11 5.2 L13.8 7 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
  color: var(--paper-ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  user-select: none; -webkit-user-select: none;
  will-change: transform;
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 20px;
  text-align: center;
}
.card.top { cursor: grab; }
.card.dragging { transition: none !important; cursor: grabbing; }
.card .card-brand {
  position: absolute; top: 14px; left: 0; right: 0;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--maple-red);
}
.card .card-text {
  font-size: 26px; font-weight: 800; line-height: 1.25;
  overflow-wrap: break-word;
}
.card .card-name {
  font-size: 13px; color: #7a715f; margin-top: 14px; font-weight: 600;
}
.card .stamp {
  position: absolute; top: 34px; font-size: 26px; font-weight: 900;
  padding: 4px 14px; border: 4px solid; border-radius: 10px;
  opacity: 0; transform: rotate(-12deg); letter-spacing: 2px;
  background: rgba(247, 241, 227, .85);
  transform-origin: center;
}
.card .stamp.yep { left: 14px; color: #1e7c3c; border-color: #1e7c3c; }
.card .stamp.nope { right: 14px; color: var(--maple-red); border-color: var(--maple-red); transform: rotate(12deg); }
.card .stamp.punch.yep { animation: stamp-yep-punch .2s ease-out both; }
.card .stamp.punch.nope { animation: stamp-nope-punch .2s ease-out both; }
.card.spring-in { animation: card-spring-in .24s cubic-bezier(.22, .9, .35, 1.2); }
@keyframes stamp-yep-punch {
  0% { opacity: 0; transform: rotate(-18deg) scale(1.45); }
  55% { opacity: 1; transform: rotate(-9deg) scale(.92); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
@keyframes stamp-nope-punch {
  0% { opacity: 0; transform: rotate(18deg) scale(1.45); }
  55% { opacity: 1; transform: rotate(9deg) scale(.92); }
  100% { opacity: 1; transform: rotate(12deg) scale(1); }
}
@keyframes card-spring-in {
  0% { transform: translateY(10px) scale(.965); }
  70% { transform: translateY(-3px) scale(1.008); }
  100% { transform: translateY(0) scale(1); }
}

#vote-controls {
  display: flex; justify-content: center; gap: 22px; margin: 16px 0 4px;
}
.swipe-btn {
  width: 62px; height: 62px; border-radius: 50%; border: none;
  font-size: 26px; cursor: pointer; touch-action: manipulation;
  background: var(--panel-2); box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.swipe-btn.yep { background: rgba(69, 212, 131, .18); }
.swipe-btn.nope { background: rgba(255, 107, 107, .18); }
.swipe-btn.undo { width: 48px; height: 48px; font-size: 18px; align-self: center; }
.swipe-btn:disabled { opacity: .35; }
.swipe-btn:active { transform: scale(.92); }
#vote-progress { margin: 10px auto 0; max-width: 360px; }
#vote-progress-label {
  text-align: center; font-size: 14px; font-weight: 800; color: var(--accent);
}
#vote-progress-label.count-pop { animation: count-pop .2s ease-out; }
#vote-progress-track {
  --segments: 1;
  position: relative; height: 9px; margin-top: 7px; overflow: hidden;
  background: var(--panel-2); border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
#vote-progress-track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, transparent calc(100% - 2px), var(--bg) 0);
  background-size: calc(100% / var(--segments)) 100%;
}
#vote-progress-fill {
  width: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good));
  border-radius: inherit;
}
#vote-progress-track.animating #vote-progress-fill {
  transition: width .24s cubic-bezier(.22, .8, .3, 1);
}
@keyframes count-pop {
  0% { transform: translateY(2px) scale(.92); opacity: .6; }
  65% { transform: translateY(-1px) scale(1.06); }
  100% { transform: none; opacity: 1; }
}

/* ---------------- results ---------------- */
#results-stats {
  text-align: center; font-size: 13px; color: var(--muted); margin: 10px 0 14px;
}
#results-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.result-row {
  background: var(--panel); border-radius: var(--radius);
  padding: 12px 14px; display: flex; gap: 12px; align-items: center;
}
.result-row .rank { font-size: 15px; font-weight: 900; color: var(--muted); min-width: 26px; text-align: center; }
.result-row .body { flex: 1; }
.result-row .text { font-size: 15px; font-weight: 600; line-height: 1.35; }
.result-row .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.result-row .net { font-weight: 900; font-size: 15px; color: var(--good); }
.result-row .net.neg { color: var(--bad); }
.result-row.winner {
  background: linear-gradient(135deg, #3c2f10, #2a3a24);
  border: 1px solid rgba(255, 182, 46, .5);
}
.result-row.winner .text { font-size: 17px; }
.winner-tag { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.result-row.reveal-row { opacity: 0; animation: result-rise .36s ease-out both; }
.result-row.winner.reveal-row { animation-name: winner-slam; }
@keyframes result-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes winner-slam {
  0% { opacity: 0; transform: translateY(24px) scale(1.08) rotate(-1deg); }
  65% { opacity: 1; transform: translateY(-3px) scale(.985) rotate(.3deg); }
  100% { opacity: 1; transform: none; }
}

/* past weeks archive */
#archive-section { margin-top: 26px; }
#archive-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.archive-row {
  background: linear-gradient(120deg, var(--panel), #26392f);
  border: 1px solid rgba(255, 182, 46, .18);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.archive-details { min-width: 0; flex: 1; }
.archive-medal {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe3a0, #c88916 72%);
  border: 2px solid #ffd36a;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(90, 52, 4, .2);
  font-size: 20px;
}
.archive-medal.empty { filter: grayscale(1); opacity: .35; }
.archive-prompt { font-size: 14px; font-weight: 800; color: #9fd3ab; }
.archive-week { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.archive-winner { font-size: 14px; line-height: 1.35; }
.archive-row.reveal-row {
  animation: archive-rise .36s ease-out both;
}
@keyframes archive-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- tab bar / footer ---------------- */
#tabbar {
  display: flex; background: var(--panel);
  border-top: 1px solid #2c445a;
  position: sticky; bottom: 0; z-index: 5;
}
.tab {
  flex: 1; background: none; border: none; color: var(--muted);
  font-size: 12px; font-weight: 700; padding: 10px 4px 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  touch-action: manipulation;
}
.tab span { font-size: 20px; }
.tab.sel { color: var(--accent); }
#foot {
  text-align: center; font-size: 12px; color: var(--muted);
  padding: 12px 16px 16px; background: var(--panel);
}
#foot a { color: var(--accent); }

/* ---------------- modal & toast ---------------- */
.modal {
  position: fixed; inset: 0; background: rgba(5, 10, 15, .72);
  display: flex; align-items: center; justify-content: center; z-index: 20;
  padding: 24px;
}
.modal-card {
  background: var(--panel); border-radius: var(--radius);
  padding: 22px; width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-card h3 { font-size: 18px; }
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  background: #0d151d; color: var(--ink); border: 1px solid #35506a;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 30;
  max-width: 90vw; text-align: center; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
#toast.success { border-color: var(--good); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 4px 0 var(--good); }
#toast.error { border-color: var(--bad); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 4px 0 var(--bad); }
#toast.toast-in { animation: toast-in .22s ease-out both; }
#toast.toast-out { animation: toast-out .18s ease-in both; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, 8px); }
}
/* ---------------- admin ---------------- */
.admin #views { padding-top: 8px; }
.admin-section { margin-bottom: 22px; }
.admin-card {
  background: var(--panel); border-radius: var(--radius);
  padding: 12px; margin-bottom: 10px;
}
.admin-card .meta { font-size: 13px; color: var(--muted); margin: 8px 2px; line-height: 1.4; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.admin-actions .btn { flex: 1; padding: 10px 8px; font-size: 14px; }
.admin-actions.tight { margin-top: 0; }
.admin-actions.tight .btn { flex: none; padding: 8px 12px; }
.btn.good { background: var(--good); color: #05240f; }
.btn.danger { background: var(--bad); color: #2a0505; }
.btn.ghost { background: var(--panel-2); color: var(--ink); }
.admin-answer-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  font-size: 14px;
}
.admin-answer-row .body { flex: 1; }
.admin-answer-row .who { color: var(--muted); font-size: 12px; margin-top: 3px; }
.badge {
  display: inline-block; background: var(--bad); color: #fff;
  border-radius: 999px; font-size: 12px; font-weight: 800; padding: 2px 9px;
  margin-left: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .view,
  .green-card.deal-in,
  .card .stamp.punch,
  .card.spring-in,
  #vote-progress-label.count-pop,
  .result-row.reveal-row,
  .archive-row.reveal-row,
  #toast.toast-in,
  #toast.toast-out {
    animation: none !important;
  }
  .card .stamp.punch { opacity: 1; }
  .result-row.reveal-row,
  .archive-row.reveal-row { opacity: 1; transform: none; }
  #vote-progress-track.animating #vote-progress-fill { transition: none; }
  .btn:active,
  .swipe-btn:active { transform: none; }
}

/* ---------------- party mode (party.html) ---------------- */
#party-chip { font-size: 12px; color: var(--accent); font-weight: 700; }

.big-btn { width: 100%; padding: 14px 16px; font-size: 16px; margin-top: 12px; }
.party-btn-row { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

#add-player-form { gap: 8px; }
#add-player-form input { flex: 1; }
#player-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px;
}
.player-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border-radius: 999px;
  padding: 7px 8px 7px 14px; font-size: 14px; font-weight: 700;
}
.chip-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 50%;
}
.chip-x:active { color: var(--bad); }

/* the pass-the-phone interstitial */
.pass-card {
  background: var(--panel); border-radius: var(--radius);
  padding: 34px 20px 24px; text-align: center; margin-top: 8px;
}
.pass-kicker {
  font-size: 12px; color: var(--muted); font-weight: 700;
  letter-spacing: .4px; margin-bottom: 18px;
}
.pass-emoji { font-size: 46px; }
.pass-line { font-size: 15px; color: var(--muted); margin-top: 12px; }
.pass-name {
  font-size: 34px; font-weight: 900; color: var(--accent);
  margin: 4px 0 10px; overflow-wrap: anywhere;
}
.pass-card .linkish { margin-top: 14px; }

/* the judge's spread of anonymous answers */
#judge-answers {
  list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 12px 0;
}
.answer-option {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--paper); color: var(--paper-ink);
  border: 2px solid transparent; border-radius: var(--radius);
  padding: 13px 14px; font-size: 16px; font-weight: 600; line-height: 1.35;
  font-family: inherit;
}
.answer-option.picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 182, 46, .25);
}
.answer-option:active { transform: scale(.985); }

/* the maple count */
.score-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.score-row {
  background: var(--panel); border-radius: 10px;
  padding: 10px 14px; display: flex; align-items: center; gap: 12px; font-size: 15px;
}
.score-row .rank { font-weight: 900; color: var(--muted); min-width: 22px; text-align: center; }
.score-row .score-name { flex: 1; font-weight: 700; overflow-wrap: anywhere; }
.score-row .score-maples { font-size: 14px; letter-spacing: 1px; color: var(--muted); }
.score-row.leading {
  background: linear-gradient(135deg, #3c2f10, #2a3a24);
  border: 1px solid rgba(255, 182, 46, .5);
}

/* the party-mode pointer on the weekly page */
#party-callout {
  margin-top: 26px; background: linear-gradient(120deg, var(--panel), #26392f);
  border: 1px solid rgba(255, 182, 46, .18); border-radius: var(--radius);
  padding: 14px 16px; font-size: 14px; line-height: 1.45;
}
#party-callout a { color: var(--accent); font-weight: 800; }

/* everyone else's answers, unmasked on the reveal */
.others-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.other-row {
  background: var(--panel); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; line-height: 1.35;
}
.other-row .who { color: var(--muted); font-size: 12px; margin-top: 3px; }

/* dealing in a latecomer between rounds */
#deal-in-row { text-align: center; margin: 14px 0 2px; }
#deal-in-form { margin-top: 10px; gap: 8px; text-align: left; }
#deal-in-form input { flex: 1; }

/* the final-standings maple shower */
#maple-shower {
  position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden;
}
#maple-shower span { position: absolute; top: -34px; animation: maple-fall linear both; }
@keyframes maple-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to { transform: translateY(108vh) rotate(320deg); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  #maple-shower span { animation: none !important; display: none; }
}

/* ---------------- online play (party mode, own phones) ---------------- */
#online-box { margin-top: 26px; padding-top: 18px; border-top: 1px dashed rgba(157, 178, 196, .35); }
#online-box .party-btn-row { margin-top: 10px; }
#rejoinBtn { display: block; margin: 10px auto 0; }
#onlinePanel input, #opCodeWrap input { width: 100%; margin-top: 10px; }
#opCode { text-align: center; text-transform: uppercase; font-size: 22px; font-weight: 800; letter-spacing: .35em; }
#opSeatsWrap { margin-top: 12px; }
#opSeatsWrap .party-btn-row { flex-direction: row; gap: 8px; margin-top: 8px; }
.seat-btn { flex: 1; }
.seat-btn.selected { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.op-error { color: var(--bad); }
#lobbyNames { list-style: none; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
#lobbyNames li { background: var(--panel-2); border-radius: 10px; padding: 9px 14px; font-size: 14px; text-align: left; }
#wait-list { list-style: none; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.wait-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel-2); border-radius: 10px; padding: 9px 14px; font-size: 14px; text-align: left;
}
#party-wait .others-list { margin-top: 12px; text-align: left; }
#party-wait > .linkish { display: block; margin: 14px auto 0; }