:root {
  --bg: #0b1026;
  --panel: #151c3d;
  --panel2: #1d2650;
  --line: #2c376b;
  --text: #e8ecff;
  --muted: #9aa4d6;
  --accent: #ff8c42;
  --accent2: #ffb347;
  --good: #69db7c;
  --bad: #ff6b6b;
  /* more colors a theme may change (admin page → theme editor) */
  --glow: #2a1f5c;          /* soft glow at the top of the page */
  --divider: #222b58;       /* lines between log rows */
  --on-accent: #1a1033;     /* text on orange */
  --danger-bg: #5a2131;
  --danger-ink: #ffd6dc;
  --cell-bg: #242d5e;       /* an empty board square */
  --board1: #0f1533cc;      /* board background, top → bottom */
  --board2: #141b40cc;
  --planet1: #4a5799;       /* an unclaimed planet, light → dark */
  --planet2: #222a5a;
  --die-face: #f4f1ea;
  --die-edge: #c9c3b5;
  --die-pip: #22223a;
  --die-bust: #ffd3d3;
  --spark: #ffd27a;         /* rocket glow, dice flash, claim pulse */
  --on-player: #0b1026;     /* text on a player color */
  --off: #55607f;           /* "away" dot */
  --font-display: inherit;  /* a theme may set a display font for the logo, titles and banners */
  --cell: min(26px, calc((100vw - 40px) / 11 - 4px));
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(ellipse at 50% -20%, var(--glow) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--accent2); }
main { max-width: 760px; margin: 0 auto; padding: 16px 14px 60px; }
h1 { font-size: 34px; margin: 18px 0 4px; letter-spacing: .5px; }
h2 { font-size: 20px; margin: 0 0 12px; }
.tag { color: var(--muted); margin: 0 0 22px; font-size: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 14px 0; }
label { display: block; font-size: 14px; color: var(--muted); margin: 10px 0 4px; }
input {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
input:focus { outline: 2px solid var(--accent); border-color: transparent; }
button {
  font: inherit; font-weight: 700; font-size: 16px; border: 0; border-radius: 12px; padding: 12px 18px;
  cursor: pointer; background: var(--panel2); color: var(--text); transition: transform .08s, filter .15s;
}
button:hover:not(:disabled) { filter: brightness(1.15); }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(180deg, var(--accent2), var(--accent)); color: var(--on-accent); }
button.danger { background: var(--danger-bg); color: var(--danger-ink); }
button.link { background: none; padding: 4px; color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: underline; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > input { flex: 1; min-width: 140px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.err { color: var(--bad); min-height: 1.2em; margin: 8px 0 0; font-size: 14px; }
.hidden { display: none !important; }
ul.rules { padding-left: 20px; line-height: 1.55; margin: 0; }

/* ---------- header ---------- */
header.bar { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; }
header.bar .logo { font-weight: 800; font-size: 20px; text-decoration: none; color: var(--text); }
header.bar .code { margin-left: auto; font-family: ui-monospace, Menlo, monospace; color: var(--muted); font-size: 14px; }
header.bar button { padding: 8px 12px; font-size: 14px; }

/* ---------- players ---------- */
.players { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.chip {
  display: flex; align-items: center; gap: 7px; background: var(--panel); border: 2px solid transparent;
  border-radius: 999px; padding: 6px 12px 6px 7px; font-size: 14px; font-weight: 600;
}
.chip.turn { border-color: var(--c); box-shadow: 0 0 14px -2px var(--c); }
.chip .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 11px; color: var(--on-player); font-weight: 800; }
.chip .on { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.chip .off { width: 7px; height: 7px; border-radius: 50%; background: var(--off); }
.chip .pl { color: var(--accent2); font-size: 13px; }

/* ---------- board ---------- */
.board-wrap { position: relative; }
.board {
  display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding: 10px 2px 4px;
  background: linear-gradient(180deg, var(--board1), var(--board2)); border: 1px solid var(--line); border-radius: 18px;
  position: relative; isolation: isolate;
}
.track { display: flex; flex-direction: column; align-items: center; gap: 3px; width: var(--cell); }
.planet {
  width: calc(var(--cell) + 4px); height: calc(var(--cell) + 4px); border-radius: 50%; display: grid; place-items: center;
  font-size: calc(var(--cell) * .72); background: radial-gradient(circle at 35% 30%, var(--planet1), var(--planet2)); margin-bottom: 2px;
  position: relative;
}
/* a rocket on the planet this turn: not claimed until the player stops */
.planet.landed { box-shadow: 0 0 0 2px var(--c), 0 0 14px var(--c); animation: landed 1.2s ease-in-out infinite; }
@keyframes landed { 50% { box-shadow: 0 0 0 3px var(--c), 0 0 22px var(--c); } }
@media (prefers-reduced-motion: reduce) { .planet.landed { animation: none; } }
.planet.mine { box-shadow: 0 0 0 3px var(--c), 0 0 16px var(--c); background: radial-gradient(circle at 35% 30%, #fff6, var(--c)); }
.cell {
  width: var(--cell); height: var(--cell); border-radius: 7px; background: var(--cell-bg); position: relative;
  display: grid; place-items: center;
}
.cell.trail { background: color-mix(in srgb, var(--c) 30%, var(--cell-bg)); }
.track.claimed .cell { background: color-mix(in srgb, var(--c) 55%, var(--cell-bg)); }
.pad { font-weight: 800; font-size: 13px; color: var(--muted); margin-top: 3px; height: 20px; min-width: 22px;
  display: grid; place-items: center; border-radius: 999px; padding: 0 3px; }
/* the current player's tracks: booster placed = solid badge; could boost now = pulsing ring; just picked = flash */
.pad.boosted { background: var(--c); color: var(--on-player); box-shadow: 0 0 10px var(--c); }
.pad.contender { color: var(--text); box-shadow: 0 0 0 2px var(--c), 0 0 10px var(--c); animation: contend 1.2s ease-in-out infinite; }
.pad.picked { animation: picked .4s ease-out 3; }
@keyframes contend { 50% { box-shadow: 0 0 0 2px var(--c), 0 0 3px var(--c); } }
@keyframes picked { 0% { transform: scale(1); } 40% { transform: scale(1.35); box-shadow: 0 0 0 3px #fff, 0 0 16px var(--c); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pad.contender, .pad.picked { animation: none; } }
.markers { position: absolute; inset: 1px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px; }
.m { width: calc(var(--cell) * .42); height: calc(var(--cell) * .42); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px #0008; }
/* a player who just stopped: their saved markers light up for a moment */
.m.saved { transform: scale(1.35); box-shadow: 0 0 0 2px #fff, 0 0 10px 3px var(--c); z-index: 1; position: relative; }
.booster {
  position: absolute; inset: -2px; display: grid; place-items: center; font-size: calc(var(--cell) * .78);
  filter: drop-shadow(0 0 6px var(--spark)); z-index: 2; animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-2px); } }

/* ---------- dice + actions ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-top: 12px; }
.status { font-size: 17px; font-weight: 700; margin: 0 0 10px; text-align: center; }
/* above the dice: current player's color + "booster roll" tag on the first two rolls */
.turninfo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px;
  font-size: 13px; color: var(--muted); margin: -2px 0 8px; min-height: 22px; }
.turninfo .swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff3, 0 0 8px var(--c); }
.turninfo .boosterroll { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid var(--accent); color: var(--accent2); font-weight: 700; }
.dice { display: flex; justify-content: center; gap: 10px; margin: 6px 0 12px; min-height: 52px; }
.die {
  width: 50px; height: 50px; border-radius: 11px; background: var(--die-face); display: grid; padding: 7px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr); box-shadow: inset 0 -3px 0 var(--die-edge), 0 3px 8px #0006;
}
.die.bust { background: var(--die-bust); box-shadow: inset 0 -3px 0 #e99, 0 3px 8px #0006; }
.die i { width: 9px; height: 9px; border-radius: 50%; background: var(--die-pip); place-self: center; visibility: hidden; }
.die i.p { visibility: visible; }
.dice.rolling .die { animation: roll .45s ease-out; }
/* the dice that made a boost light up as the rocket goes up */
.die.flash { animation: diceflash .3s ease-out 2; }
@keyframes diceflash {
  0%   { box-shadow: inset 0 -3px 0 var(--die-edge), 0 0 0 0 transparent, 0 3px 8px #0006; transform: none; }
  40%  { box-shadow: inset 0 -3px 0 var(--die-edge), 0 0 0 4px var(--spark), 0 0 18px 4px color-mix(in srgb, var(--spark) 80%, transparent); transform: scale(1.12); }
  100% { box-shadow: inset 0 -3px 0 var(--die-edge), 0 0 0 0 transparent, 0 3px 8px #0006; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .die.flash { animation: diceflash-still .6s ease-out; }
  @keyframes diceflash-still { 0%, 70% { box-shadow: inset 0 -3px 0 var(--die-edge), 0 0 0 4px var(--spark), 0 3px 8px #0006; } 100% { box-shadow: inset 0 -3px 0 var(--die-edge), 0 3px 8px #0006; } }
}
@keyframes roll { 0% { transform: rotate(-200deg) scale(.6); } 70% { transform: rotate(15deg) scale(1.08); } 100% { transform: none; } }
.actions { display: flex; flex-direction: column; gap: 9px; align-items: stretch; max-width: 420px; margin: 0 auto; }
.actions .two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.actions button { padding: 14px; font-size: 17px; }
.opt { background: var(--panel2); border: 2px solid var(--line); }
.opt b { color: var(--accent2); font-size: 19px; }
.risk { text-align: center; font-size: 13px; color: var(--muted); padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--divider); }
.risk b { color: var(--text); }

/* ---------- banner ---------- */
.banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
  font-size: 34px; font-weight: 900; padding: 14px 24px; border-radius: 18px; background: color-mix(in srgb, var(--bg) 93%, transparent); border: 2px solid var(--accent);
  white-space: nowrap; transition: opacity .2s, transform .25s; z-index: 5; text-align: center;
}
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.banner.small { font-size: 20px; font-weight: 800; padding: 8px 16px; border-width: 1.5px; border-radius: 14px; }
.banner .sub { display: block; font-size: 15px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.shake { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------- log ---------- */
.log { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.log li { padding: 5px 0; border-bottom: 1px solid var(--divider); color: var(--muted); }
.log li:first-child { color: var(--text); }
.log .who { font-weight: 700; color: var(--c); }

/* ---------- lobby ---------- */
.seats { list-style: none; margin: 0 0 12px; padding: 0; }
.seats li { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-weight: 600; }
.seats .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.seats .x { margin-left: auto; }
.seats .yourturn { color: var(--accent2); font-weight: 800; }
.seats .on, .seats .off { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.seats .off { background: var(--off); }
.share { display: flex; gap: 8px; }
.share input { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.winner { text-align: center; font-size: 26px; font-weight: 900; margin: 4px 0 10px; }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 16px; max-width: 520px; padding: 20px; }
dialog::backdrop { background: #000a; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 10; transition: opacity .3s; opacity: 0; pointer-events: none;
}
.toast.show { opacity: 1; }
@media (min-width: 640px) { :root { --cell: 32px; } .die { width: 56px; height: 56px; } }

/* ---------- win celebration ---------- */
.celebrate { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1d2650ee, #0b1026f2); overflow: hidden; animation: cele-in .3s ease-out; cursor: pointer; }
.celebrate.out { opacity: 0; transition: opacity .3s; }
@keyframes cele-in { from { opacity: 0; } }
.cele-card { position: relative; z-index: 1; text-align: center; padding: 20px; }
.cele-card h2 { font-size: 34px; margin: 6px 0 4px; opacity: 0; animation: cele-pop .5s cubic-bezier(.3,1.6,.5,1) 2.4s forwards; }
.cele-card p { color: var(--muted); margin: 0 0 18px; opacity: 0; animation: cele-fade .4s ease-out 2.7s forwards; }
.cele-card button { opacity: 0; animation: cele-fade .4s ease-out 3s forwards; min-width: 140px; }
.cele-planets { display: flex; gap: 34px; justify-content: center; padding-top: 52px; margin-bottom: 26px; }
/* cute planets: pastel body, tilted ring, little face, number badge; they squish when the flag lands */
.cplanet { position: relative; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff9, transparent 40%), radial-gradient(circle at 40% 35%, var(--p1), var(--p2) 75%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--p2) 50%, transparent), inset -7px -8px 14px #0002;
  opacity: 0; animation: cele-pop .45s cubic-bezier(.3,1.6,.5,1) forwards, cele-squish .35s ease-out forwards;
  animation-delay: calc(var(--i) * .7s), calc(var(--i) * .7s + .65s); }
.cplanet .ring { position: absolute; left: -16%; top: 38%; width: 132%; height: 30%; border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--p1) 70%, #fff); border-top-color: transparent; transform: rotate(-14deg); opacity: .9; }
.cplanet .face { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); width: 34px; height: 20px; }
.cplanet .face i { position: absolute; top: 0; width: 7px; height: 9px; border-radius: 50%; background: #2b1d3a; box-shadow: inset 2px 2px 0 -1px #fff; }
.cplanet .face i:first-child { left: 5px; } .cplanet .face i:nth-child(2) { right: 5px; }
.cplanet .face u { position: absolute; left: 50%; top: 9px; width: 12px; height: 6px; transform: translateX(-50%);
  border: 2.5px solid #2b1d3a; border-top: 0; border-radius: 0 0 12px 12px; }
.cplanet .face::before, .cplanet .face::after { content: ""; position: absolute; top: 9px; width: 8px; height: 5px; border-radius: 50%; background: #ff7a9a88; }
.cplanet .face::before { left: -3px; } .cplanet .face::after { right: -3px; }
.cplanet b { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font-size: 14px; color: var(--text);
  background: #0b1026cc; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.cplanet .tw { position: absolute; right: -10px; top: 4px; font-size: 14px; color: #fff; opacity: 0;
  animation: cele-twinkle 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * .7s + 1s); }
@keyframes cele-squish { 0% { transform: scale(1); } 35% { transform: scale(1.12, .88); } 70% { transform: scale(.96, 1.04); } 100% { transform: none; } }
@keyframes cele-twinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
/* flag: a pole with a waving pennant in the winner's color, dropped in from above */
.flag { position: absolute; left: 50%; bottom: 64px; width: 3px; height: 44px; background: #e8ecff; border-radius: 2px;
  opacity: 0; animation: cele-plant .4s ease-in forwards; animation-delay: calc(var(--i) * .7s + .35s); }
.flag::after { content: ""; position: absolute; left: 3px; top: 0; width: 28px; height: 18px; background: var(--c);
  clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%); transform-origin: left center;
  animation: cele-wave 1.1s ease-in-out infinite; }
@keyframes cele-pop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes cele-fade { to { opacity: 1; } }
@keyframes cele-plant { 0% { opacity: 0; transform: translate(-50%, -70px); } 75% { opacity: 1; transform: translate(-50%, 3px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cele-wave { 50% { transform: skewY(-8deg) scaleX(.9); } }
.confetti { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: 0;
  animation-name: cele-fall; animation-timing-function: cubic-bezier(.25,.6,.5,1); animation-fill-mode: forwards; }
@keyframes cele-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: .9; transform: translate(var(--dx), 105vh) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) {
  .cplanet, .flag, .cele-card h2, .cele-card p, .cele-card button { animation: cele-fade .3s ease-out forwards; animation-delay: 0s; }
  .cplanet .tw { animation: none; }
  .flag { transform: translateX(-50%); }
  .flag::after { animation: none; }
}

/* ---------- rematch invite ---------- */
.ask { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  background: #0b1026cc; animation: cele-in .25s ease-out; padding: 16px; }
.ask-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; text-align: center;
  max-width: 340px; width: 100%; box-shadow: 0 10px 40px #0008; }
.ask-card h2 { margin: 6px 0 4px; font-size: 22px; }
.ask-card p { margin: 0 0 16px; }
.ask-emoji { font-size: 40px; animation: ask-bob 1.4s ease-in-out infinite; }
@keyframes ask-bob { 50% { transform: translateY(-5px) rotate(-6deg); } }
.ask-card .two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (prefers-reduced-motion: reduce) { .ask-emoji { animation: none; } }

/* "Stop & claim" when a rocket is on a planet: the main button, with a gentle golden pulse */
.actions button.claim { box-shadow: 0 0 0 2px var(--spark), 0 0 16px color-mix(in srgb, var(--spark) 53%, transparent); animation: claim-pulse 1.4s ease-in-out infinite; }
@keyframes claim-pulse { 50% { box-shadow: 0 0 0 2px var(--spark), 0 0 4px color-mix(in srgb, var(--spark) 27%, transparent); } }
@media (prefers-reduced-motion: reduce) { .actions button.claim { animation: none; } }

/* ---------- badges (#34) ---------- */
.bh { margin: 0 0 8px; font-size: 16px; display: flex; align-items: baseline; gap: 8px; }
.badges { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.badge { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
.badge .be { font-size: 26px; line-height: 1; }
.badge b { font-size: 14px; }
.badge .bd { display: block; font-size: 12px; color: var(--muted); }
.badge.locked { opacity: .45; filter: grayscale(1); }
.badge.new { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2), 0 0 14px #ffb34755; animation: badge-pop .5s cubic-bezier(.3,1.6,.5,1); }
.newtag { font-style: normal; font-size: 11px; font-weight: 800; color: var(--on-accent); background: var(--accent2); border-radius: 999px; padding: 1px 6px; }
details summary { cursor: pointer; color: var(--muted); margin: 4px 0; }
@keyframes badge-pop { from { transform: scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .badge.new { animation: none; } }

/* "Also from us" card */
.promo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 12px 14px; margin-top: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; text-align: left; }
.promo b { display: block; }
.promo .small { display: block; margin-top: 2px; }
.promo-emoji { font-size: 26px; }
.promo-go { margin-left: auto; font-weight: 800; color: var(--accent2); white-space: nowrap; }
#promo .promo { margin: 0 0 16px; }

/* countdown on "Start <bot>'s turn now" */
.botleft { font-variant-numeric: tabular-nums; opacity: .8; margin-left: 2px; }

/* ---------- chat ---------- */
.sr { position: absolute; left: -9999px; }
.chipwrap { position: relative; }
.bubbles { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 8; }
.bubble { position: absolute; bottom: 4px; max-width: min(260px, 80vw); padding: 7px 11px; border-radius: 14px 14px 14px 4px;
  background: #e8ecff; color: #0b1026; font-size: 14px; font-weight: 600; line-height: 1.3; box-shadow: 0 6px 16px #0008, 0 0 0 2px var(--c);
  overflow-wrap: anywhere; opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom left; transition: opacity .25s, transform .25s; }
.bubble.show { opacity: 1; transform: none; }
.bubble.emoji { font-size: 28px; padding: 2px 10px; background: transparent; box-shadow: none; text-shadow: 0 2px 8px #000a; }
.chatrow { position: relative; margin: 0 0 10px; }
.chatrow form { display: flex; align-items: center; gap: 6px; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px; }
.chatrow input { flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 15px; }
.emojibtn, .sendbtn { width: 44px; height: 44px; flex: none; border-radius: 10px; display: grid; place-items: center; padding: 0; }
.emojibtn { border: 1px solid var(--line); background: var(--panel2); color: var(--accent2); }
.emojibtn[aria-expanded="true"] { background: var(--line); }
.sendbtn { border: 0; background: var(--accent); color: var(--on-accent); }
.emojipick { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; background: var(--panel2); border: 1px solid #3a4785; border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 30px #000a; display: grid; grid-template-columns: repeat(6, 44px); gap: 2px; }
.emojipick button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 22px; padding: 0; }
.emojipick button:hover, .emojipick button:focus-visible { background: var(--line); }
.log li.chatline { color: var(--text); }
.grabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.grabs .gl { color: var(--muted); font-weight: 700; }
.grab { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.grab .gh { color: var(--muted); }
.grab.hot { border-color: var(--accent2); box-shadow: 0 0 10px -2px var(--accent2); }
.grab.hot .gh { color: var(--accent2); font-weight: 700; }
.chattools { white-space: nowrap; margin-left: 6px; opacity: .55; }
.chattools button { font-size: 12px; padding: 0 4px; min-height: 24px; }
.log li.chatline:hover .chattools, .chattools:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bubble { transition: opacity .2s; transform: none; } }

/* ---------- themes (web/theme.js) ---------- */
/* An icon a theme swapped for a small picture. */
.ticon { width: 1.15em; height: 1.15em; vertical-align: -.2em; object-fit: contain; display: inline-block; }
.planet .ticon { width: 82%; height: 82%; vertical-align: 0; }
.booster .ticon { width: 100%; height: 100%; }
/* A theme's display font: the logo, page titles, banners and the win screen. */
header.bar .logo, h1, .banner, .cele-card h2 { font-family: var(--font-display); }
/* Backgrounds: stars (the normal look), snow, or plain. */
html[data-decor="none"] body, html[data-decor="snow"] body {
  background: radial-gradient(ellipse at 50% -20%, var(--glow) 0%, transparent 60%), var(--bg); background-attachment: fixed;
}
html[data-decor="none"] .stars, html[data-decor="snow"] .stars { display: none; }
.theme-snow { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.theme-snow::before, .theme-snow::after {
  content: ""; position: absolute; inset: -100% 0 0; background-repeat: repeat;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #ffffffcc 50%, transparent 52%), radial-gradient(1.5px 1.5px at 35% 60%, #ffffff99 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 60% 35%, #ffffffbb 50%, transparent 52%), radial-gradient(1.5px 1.5px at 85% 75%, #ffffff88 50%, transparent 52%),
    radial-gradient(2px 2px at 75% 10%, #ffffffaa 50%, transparent 52%), radial-gradient(1px 1px at 20% 85%, #ffffff99 50%, transparent 52%);
  background-size: 320px 320px; animation: snowfall 26s linear infinite;
}
.theme-snow::after { background-size: 210px 210px; opacity: .6; animation-duration: 18s; }
@keyframes snowfall { to { transform: translateY(50%); } }
@media (prefers-reduced-motion: reduce) { .theme-snow::before, .theme-snow::after { animation: none; inset: 0; } }
main { position: relative; z-index: 1; }
/* Board art: a picture behind the tracks (e.g. a tree for cats to climb). */
html[data-board-art] .board {
  background: var(--board-art) center bottom / contain no-repeat, linear-gradient(180deg, var(--board1), var(--board2));
}
/* Corner art: a small picture in the bottom-right corner of the page. */
.theme-corner { position: fixed; right: 8px; bottom: 8px; width: min(22vw, 140px); max-height: 30vh; object-fit: contain;
  pointer-events: none; z-index: 0; }
label.check { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 15px; cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }

/* ---------- twinkling stars (the normal look; web/theme.js places them) ----------
   Tiny dots and a few soft four-point sparkles, in the page background and behind the board.
   Each star twinkles on its own (its own speed and start), so the sky never pulses in step. */
.stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; border-radius: inherit; }
.stars.sky { position: fixed; z-index: 0; }
.tracks { display: contents; }
.stars i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: var(--k, #fff); opacity: var(--o, .5);
  animation: twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite; }
.stars i.sp { border-radius: 0; background: none;
  -webkit-mask: var(--spark-shape) center / contain no-repeat; mask: var(--spark-shape) center / contain no-repeat; background-color: var(--k); }
:root { --spark-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.8 6.5 13.5 9.2 20 10C13.5 10.8 10.8 13.5 10 20C9.2 13.5 6.5 10.8 0 10C6.5 9.2 9.2 6.5 10 0Z'/%3E%3C/svg%3E"); }
@keyframes twinkle { 0%, 100% { opacity: var(--o, .5); } 50% { opacity: calc(var(--o, .5) * .2); } }
@media (prefers-reduced-motion: reduce) { .stars i { animation: none; } }