:root {
  --bg: #faf7f5; --fg: #221c1f; --muted: #7a6f74; --line: #e6dde0;
  --panel: #ffffff; --accent: #7a1f3d; --accent-fg: #fff; --soft: #f5e8ed;
  --warn: #b3261e; --private: #fff4d6;
  --focus: #1a5fb4; --shield-bg: #dbe8fb; --shield-fg: #173a73;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17131a; --fg: #eee6ea; --muted: #a0949a; --line: #342b31;
    --panel: #211b21; --accent: #d56a8e; --accent-fg: #1a0f14; --soft: #3a2230;
    --warn: #ff8a80; --private: #3b3220;
    --focus: #8ab4ff; --shield-bg: #1d2b44; --shield-fg: #c9dcff;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); -webkit-tap-highlight-color: transparent; }
main { max-width: 560px; margin: 0 auto; padding: 12px 16px 40px; }
h1 { font-size: 2rem; margin: 24px 0 4px; }
h2 { font-size: 1.05rem; margin: 18px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.warn { color: var(--warn); font-weight: 600; }

/* buttons & inputs */
button { font: inherit; color: inherit; }
.btn { display: block; width: 100%; padding: 14px; margin: 10px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; font-size: 1rem; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn:disabled { opacity: .45; }
.btn:focus-visible, .chip:focus-visible, .opt:focus-visible, .card:focus-visible, .link:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: .85rem; }
.link { background: none; border: 0; color: var(--accent); text-decoration: underline; padding: 12px 0; width: 100%; }
input { font: inherit; font-size: 1rem; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); width: 100%; }
.field { display: block; margin: 16px 0; font-weight: 600; }
.field input { margin-top: 6px; font-weight: 400; }
.home .sub { color: var(--muted); margin-top: 0; }
.version { margin: -4px 0 0; overflow-wrap: anywhere; }
.version-new { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--private); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home .field[for="code"] { margin-bottom: 6px; }
.or { text-align: center; color: var(--muted); margin: 18px 0 8px; font-size: .9rem; }
.join { display: flex; gap: 8px; }
.join input { text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; }
.join .btn { width: auto; margin: 0; padding: 12px 20px; }

/* header / status */
.top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: .92rem; }
.top-btns { display: flex; gap: 6px; }
.status { background: var(--private); padding: 8px 16px; font-size: .9rem; text-align: center; }
.banner { margin: 4px 0 8px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; }
.banner.mine { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* lobby */
.card-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 10px 0; }
.code { font-size: 3rem; font-weight: 800; letter-spacing: .2em; margin: 4px 0 8px; }

/* players */
.players { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.player { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.players .player:only-child, .player > span:first-child { font-weight: 600; }
.player.row { flex-direction: row; align-items: center; justify-content: space-between; }
.player.turn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.player.out { opacity: .55; }
.player.out .p-name { color: var(--warn); text-decoration: line-through; }
.p-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-name { font-weight: 600; }
.tokens { margin-left: auto; color: var(--accent); letter-spacing: 1px; }
.badge { font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--soft); }
.badge.shield { background: var(--shield-bg); color: var(--shield-fg); font-weight: 600; }
.offline { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--private); color: var(--muted); }
.discards { display: flex; flex-wrap: wrap; gap: 4px; font-size: .78rem; }
.mini { padding: 2px 6px; border-radius: 6px; background: var(--soft); white-space: nowrap; }
/* discard thumbnails (DISCARD_THUMBS in main.js; delete this block if you switch back to .mini chips) */
.discards:has(.mini-card) { gap: 6px; }
.mini-card { width: 58px; border-radius: 6px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); display: flex; flex-direction: column; }
.mini-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; display: block; }
.mini-label { font-size: .62rem; line-height: 1.2; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mini-label b { color: var(--accent); }
/* lobby order */
.lobby-name { display: flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.seat { color: var(--muted); font-weight: 500; }
.drag-handle { border: 0; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 6px 4px; margin: -6px 0 -6px -6px;
  cursor: grab; touch-action: none; border-radius: 6px; }
.drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.player.dragging { border-color: var(--accent); box-shadow: 0 6px 18px rgb(0 0 0 / .18); position: relative; z-index: 1; }
.player.dragging .drag-handle { cursor: grabbing; }

/* cards
   Cards in a hand share one grid: one column per card, and each card is a subgrid
   spanning the same rows (art, title, rule, note). Every section therefore gets the
   height of the tallest one in the hand, so titles, rules and bottom edges line up
   no matter how long the text is. Art has a fixed 4:3 box and is cropped, never stretched. */
.hand { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.card { position: relative; text-align: left; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel);
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 4px; align-content: start; min-width: 0; min-height: 150px; }
.card.has-art { grid-row: span 4; }
/* A lone card is as wide as one card in a pair. The width comes from the grid column, not a
   percentage width on the card: Firefox (Android) sized the rows as if the card were full width,
   leaving a gap under the art and cutting off the rule text. */
.hand[data-count="1"] { grid-template-columns: minmax(0, calc(50% - 5px)); justify-content: center; }
.card:disabled { opacity: 1; }
.card:not(:disabled) { cursor: pointer; }
.card.selected { border-color: var(--accent); background: var(--soft); }
.card.blocked { border-style: dashed; }
.card-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; min-width: 0; }
.card .rank { font-size: 2rem; font-weight: 800; line-height: 1.15; color: var(--accent); }
.card .cname { font-weight: 700; font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.card .ctext { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
/* Art sits on top; the rule text always stays visible underneath. */
.card.has-art { padding: 0 0 12px; overflow: hidden; row-gap: 6px; }
.card.has-art > :not(.art) { padding: 0 12px; }
.card.has-art .rank { font-size: 1.6rem; }
.art { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); border-bottom: 1px solid var(--line); }
.art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
/* These pictures have their subject low in the frame, so crop from the bottom instead. */
.r0 .art img, .r1 .art img, .r2 .art img, .r6 .art img,
.mini-card.r0 img, .mini-card.r1 img, .mini-card.r2 img, .mini-card.r6 img { object-position: center bottom; }
.art-empty { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 800; color: var(--accent); opacity: .35; }
.card.has-art .ctext { font-size: .8rem; line-height: 1.3; }
.thumb { float: left; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; margin: 2px 8px 2px 0; }
.card .note { font-size: .78rem; color: var(--warn); font-weight: 600; }
/* Three cards (Chancellor) share one row, so tighten type on narrow screens. */
@media (max-width: 420px) {
  .hand[data-count="3"] { gap: 6px; }
  .hand[data-count="3"] .card { padding: 8px; }
  .hand[data-count="3"] .card.has-art { padding: 0 0 8px; }
  .hand[data-count="3"] .card.has-art > :not(.art) { padding: 0 6px; }
  .hand[data-count="3"] .rank { font-size: 1.3rem; }
  .hand[data-count="3"] .cname { font-size: .9rem; }
  .hand[data-count="3"] .ctext { font-size: .72rem; }
}
/* Older browsers without subgrid: cards still share a height; titles reserve two lines. */
@supports not (grid-template-rows: subgrid) {
  .card, .card.has-art { display: flex; flex-direction: column; }
  .card-head { min-height: 2.6em; }
  .card .ctext { flex: 1; }
}

/* action panel */
.action { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.label { font-weight: 600; font-size: .9rem; margin: 6px 0; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); min-width: 44px; }
.opt.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.opt.on .muted { color: inherit; opacity: .85; }
.opts.guess .opt { flex: 1 1 30%; font-size: .88rem; }
/* "Choose a player": inverse colors so the players stand out. Before a choice every player is a
   filled button; once one is chosen it flips to outlined with a ✓ and the rest fade back. */
.opts.targets .opt { background: var(--accent); color: var(--accent-fg); border: 2px solid var(--accent); font-weight: 700; padding: 12px 18px; flex: 1 1 40%; }
.opts.targets .opt.on { background: var(--panel); color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.opts.targets.chosen .opt:not(.on) { opacity: .5; }
.order { margin: 4px 0 8px; padding-left: 20px; }
.plain { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 4px; }

/* log */
.log { margin-top: 18px; }
.log summary { font-weight: 600; cursor: pointer; padding: 6px 0; }
.log ul { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.log li { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.log li.private { background: var(--private); border-radius: 6px; font-weight: 600; }

/* rules sheet */
.sheet { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-body { background: var(--bg); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; border-radius: 16px 16px 0 0; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); }
.sheet-body .p-row { justify-content: space-between; }
.ref { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ref th, .ref td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ref td:first-child { font-weight: 800; color: var(--accent); }

.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 30; max-width: calc(100% - 32px); font-size: .92rem; }

/* fixed "Use this card" bar */
.use-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--bg); border-top: 1px solid var(--line);
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-shadow: 0 -6px 18px rgb(0 0 0 / .12); }
.use-bar > * { max-width: 528px; margin-left: auto; margin-right: auto; }
.use-hint { margin-top: 0; margin-bottom: 8px; font-size: .88rem; }
.use-btn { margin: 0 auto; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.use-btn .use-card { font-weight: 500; font-size: .9rem; opacity: .9; }
.use-btn:disabled { opacity: 1; background: var(--soft); color: var(--fg); border-color: var(--line); }
/* Keep the last content (and toasts) clear of the bar. */
body.has-bar main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
body.has-bar .toast { bottom: calc(140px + env(safe-area-inset-bottom)); }
.spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* card-effect popups */
.fx { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .45); display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.fx-card { background: var(--panel); color: var(--fg); border-radius: 16px; padding: 20px; width: 100%; max-width: 380px; max-height: 100%; overflow: auto;
  text-align: center; box-shadow: 0 10px 40px rgb(0 0 0 / .3); animation: fx-in .2s ease-out; }
.fx-icon { font-size: 2.6rem; line-height: 1.1; }
.fx-card h2 { font-size: 1.2rem; margin: 8px 0; }
.fx-card p { margin: 8px 0; }
.fx-card .btn { margin: 14px 0 0; }
.fx-protected .fx-icon { filter: drop-shadow(0 0 8px var(--shield-bg)); }
.fx-shown-card { margin: 4px 0 6px; text-align: left; }
.fx-shown-card .hand[data-count="1"] { grid-template-columns: minmax(0, 220px); }
.fx-shown-card .card { min-height: 0; }
.fx-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; margin: 4px 0 6px; text-align: left; }
.fx-swap-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.fx-swap .hand[data-count="1"] { grid-template-columns: minmax(0, 1fr); width: 100%; flex: 1; }
.fx-swap .card { min-height: 0; height: 100%; }
.fx-swap-arrow { font-size: 1.4rem; color: var(--accent); align-self: center; }
.fx-chancellor-art { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 6px; }
.fx-backs-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.fx-chancellor-art .fx-backs-label { animation: fx-fade .4s ease-out 1.9s backwards; }
.fx-backs-cards { display: flex; justify-content: center; height: 88px; }
.fx-backs-cards img { width: 60px; height: 88px; margin: 0 4px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgb(0 0 0 / .25);
  animation: fx-deal .35s ease-out backwards; animation-delay: calc(.1s + var(--i) * 150ms); }
/* After the hand is shown, the returned cards drop away and the kept card slides to the middle. */
.fx-backs-cards img.leave { animation: fx-deal .35s ease-out backwards, fx-return .6s ease-in 1.2s forwards;
  animation-delay: calc(.1s + var(--i) * 150ms), calc(1.2s + var(--i) * 120ms); }
@keyframes fx-deal { from { opacity: 0; translate: 0 -14px; } }
@keyframes fx-return { 60% { opacity: 0; translate: 0 26px; width: 60px; margin: 0 4px; } to { opacity: 0; translate: 0 26px; width: 0; margin: 0; } }
@keyframes fx-fade { from { opacity: 0; } }
.fx-name { font-size: 1.7rem; font-weight: 800; color: var(--warn); display: flex; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.dust span { display: inline-block; animation: dust 1.3s ease-in forwards; animation-delay: calc(.6s + var(--i) * 60ms); }
@keyframes fx-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes dust {
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(25deg) scale(.5); filter: blur(3px); }
}
@media (prefers-reduced-motion: reduce) {
  /* No crumbling: the name simply stays red. */
  .fx-card, .dust span, .spinner, .fx-backs-cards img, .fx-backs-cards img.leave, .fx-chancellor-art .fx-backs-label { animation: none; }
  /* No motion: show the final state, with the returned cards faded. */
  .fx-backs-cards img.leave { opacity: .3; }
}

/* round / game result */
.result-hero { margin: 4px 0 10px; padding: 14px; border-radius: 14px; text-align: center; border: 1px solid var(--line); background: var(--panel); }
.result-hero img { display: block; width: 100%; max-height: 42vh; object-fit: contain; border-radius: 10px; margin: 0 auto 10px; }
.result-hero h2 { font-size: 1.6rem; margin: 4px 0; }
.result-hero p { margin: 0; }
.result-hero.won { background: var(--soft); border-color: var(--accent); }
.result-hero.won h2 { color: var(--accent); }
.result-hero.lost img { filter: grayscale(.2); }

/* winner confetti: pink, red, and hearts */
.confetti { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.confetti > span { position: absolute; top: -40px; display: block; animation: confetti-fall var(--dur) cubic-bezier(.3, .6, .5, 1) var(--delay) forwards; opacity: 0; }
.confetti-strip { width: calc(var(--size) * .6); height: calc(var(--size) * 1.6); background: var(--c); border-radius: 2px; }
.confetti-dot { width: var(--size); height: var(--size); background: var(--c); border-radius: 50%; }
.confetti-heart { color: var(--c); font-size: var(--size); line-height: 1; }
@keyframes confetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sway), 110vh) rotate(var(--spin)); }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }