/* Catan — "monsoon block-print" style: warm paper, indigo sea, flat tiles. */
@font-face { font-family: "Baloo 2"; font-weight: 500; font-display: swap; src: url(/fonts/baloo-2-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 600; font-display: swap; src: url(/fonts/baloo-2-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 700; font-display: swap; src: url(/fonts/baloo-2-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(/fonts/baloo-2-latin-800-normal.woff2) format("woff2"); }
:root {
  --bg: #f6efe2;
  --bg2: #efe4cf;
  --card: #fffaf0;
  --ink: #2a2118;
  --ink2: #6b5d4c;
  --muted: #8c7c68;
  --line: #e2d4bb;
  --accent: #c8553d;
  --accent-ink: #fff;
  --accent2: #1d3557;
  --good: #23996b;
  --bad: #c0392b;
  --shadow: 0 2px 0 rgba(60, 40, 20, .08), 0 8px 24px rgba(60, 40, 20, .10);
  --radius: 16px;

  --shallow: #4f8fbf; --sand: #ead9a6;
  --sea: #2c5d8f;
  --sea2: #3b70a6;
  --sea-line: rgba(255, 255, 255, .18);
  --frame: #f3e6c8;
  --forest: #4b8b53; --tree: #2d5e37; --trunk: #6b4a2b;
  --hills: #cd6a3e; --brick: #a3462a; --mound: #b75a35;
  --pasture: #a6cf6c; --wool: #fffdf6; --face: #3b3229; --grass: #6d9a3e;
  --fields: #ebc052; --stalk: #b38a26; --grain: #c99a2e;
  --mountains: #9ba0b4; --peak: #6f7489; --peak2: #858aa0; --snow: #fbfbff;
  --desert: #ead7a4; --dune: #dcc185; --dune2: #d2b373; --cactus: #6c9a4f; --sun: #f2a33a;
  --token: #fbf3e0; --token-ink: #2a2118; --hot: #c0392b;
  --robber: #2b2b33;

  --c-red: #d9443a; --c-blue: #2f6fd6; --c-saffron: #f29a1d; --c-green: #23996b; --c-purple: #8a4fd1; --c-brown: #8a5a3b;
  --piece-outline: #2a1c10;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161f; --bg2: #181e2a; --card: #1d2433; --ink: #f1e9da; --ink2: #c3b8a6; --muted: #8f8676; --line: #2c3547;
    --accent: #e0694f; --accent2: #9fb8e0;
    --shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .35);
    --shallow: #1f4466; --sand: #8c7c59; --sea: #13263f; --sea2: #183152; --sea-line: rgba(160, 200, 255, .12); --frame: #2e3546;
    --forest: #3b6f43; --tree: #234a2c; --trunk: #4f3820;
    --hills: #a9573a; --brick: #7e3720; --mound: #94492c;
    --pasture: #7fa553; --wool: #e9e5da; --face: #2a241e; --grass: #4f7530;
    --fields: #c49d3f; --stalk: #8d6c1e; --grain: #a07a24;
    --mountains: #767b8f; --peak: #545a6c; --peak2: #646a7e; --snow: #d9dbe6;
    --desert: #b9a679; --dune: #a99464; --dune2: #9c8657; --cactus: #4f7a3b; --sun: #d18a2a;
    --token: #efe5cc; --robber: #0d0d12;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12161f; --bg2: #181e2a; --card: #1d2433; --ink: #f1e9da; --ink2: #c3b8a6; --muted: #8f8676; --line: #2c3547;
  --accent: #e0694f; --accent2: #9fb8e0;
  --shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .35);
  --shallow: #1f4466; --sand: #8c7c59; --sea: #13263f; --sea2: #183152; --sea-line: rgba(160, 200, 255, .12); --frame: #2e3546;
  --forest: #3b6f43; --tree: #234a2c; --trunk: #4f3820;
  --hills: #a9573a; --brick: #7e3720; --mound: #94492c;
  --pasture: #7fa553; --wool: #e9e5da; --face: #2a241e; --grass: #4f7530;
  --fields: #c49d3f; --stalk: #8d6c1e; --grain: #a07a24;
  --mountains: #767b8f; --peak: #545a6c; --peak2: #646a7e; --snow: #d9dbe6;
  --desert: #b9a679; --dune: #a99464; --dune2: #9c8657; --cactus: #4f7a3b; --sun: #d18a2a;
  --token: #efe5cc; --robber: #0d0d12;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 500 16px/1.35 "Baloo 2", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-image:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 40%),
    radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 45%),
    radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 14px 14px;
  background-attachment: fixed;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.01em; font-weight: 800; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
#app { min-height: 100%; }
.muted { color: var(--muted); }
.center { text-align: center; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 8px; }
.grow { flex: 1; min-width: 0; }

/* ---------- buttons ---------- */
.btn {
  border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 16px; font-weight: 650;
  box-shadow: 0 2px 0 var(--line); transition: transform .08s, box-shadow .08s, background .2s; touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--line); }
.btn.primary { background: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, #000); color: var(--accent-ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn:disabled { opacity: .45; }
.btn.sm { padding: 6px 10px; font-size: 14px; border-radius: 10px; }
.btn.big { padding: 14px 18px; font-size: 18px; }
.btn.wide { width: 100%; }
.icon-btn { border: 0; background: transparent; font-size: 20px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; position: relative; flex: none; }
.icon-btn:active { background: var(--bg2); }
.icon-btn.sm { width: 30px; height: 30px; font-size: 14px; }
.link-btn { border: 0; background: none; color: var(--accent); font-weight: 650; padding: 4px 6px; }

.input { border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 11px 12px; min-width: 0; flex: 1; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.input.pin { max-width: 140px; letter-spacing: .3em; }
.input.pin:placeholder-shown { letter-spacing: normal; }

/* ---------- pages ---------- */
.page { max-width: 560px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 18px; }
.page-head { display: flex; align-items: center; gap: 8px; }
.page-head h1 { font-size: 24px; }
.code { letter-spacing: .14em; font-weight: 800; color: var(--accent); }
.hint { font-size: 13px; color: var(--muted); margin: 0; }

.hero { text-align: center; padding: 18px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hero h1 { font-size: 44px; font-weight: 900; letter-spacing: -.02em; }
.hero .tag { margin: 0; color: var(--ink2); }
.hero.small h1 { font-size: 32px; }
.hero-art { width: min(270px, 70vw); margin: -6px auto -14px; }
.island { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 18px rgba(40, 25, 10, .18)); animation: bob 5s ease-in-out infinite; }
.pill { display: inline-flex; align-items: center; gap: 3px; background: var(--bg2); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.pill .ico { width: 13px; height: 13px; }
.btn .ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.logo svg { width: 84px; height: 84px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15)); animation: bob 4s ease-in-out infinite; }
.logo-hex { fill: var(--fields); stroke: var(--frame); stroke-width: 4; }
.logo-house { fill: var(--c-red); stroke: var(--piece-outline); stroke-width: 3; stroke-linejoin: round; }
.logo-house2 { fill: var(--c-blue); stroke: var(--piece-outline); stroke-width: 3; stroke-linejoin: round; }
.logo-sun { fill: var(--sun); }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-2deg); } }

.tabs { display: flex; background: var(--bg2); border-radius: 12px; padding: 3px; }
.tab { flex: 1; border: 0; background: transparent; padding: 8px; border-radius: 10px; font-weight: 650; color: var(--ink2); }
.tab.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.id-form { display: flex; flex-direction: column; gap: 10px; }
.id-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.id-fields .btn { flex: none; }

.me-row { display: flex; align-items: center; gap: 12px; }
.me-row small { display: block; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--accent2); flex: none; position: relative; }
.avatar.big { width: 44px; height: 44px; font-size: 20px; background: var(--accent); }
.join-row { display: flex; gap: 8px; }
.code-in { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; text-align: center; }

.rooms { display: flex; flex-direction: column; gap: 8px; }
.room-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 10px 12px; text-align: left; }
.room-players { display: flex; gap: 3px; flex: 1; }
.mini { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.room-meta { font-size: 13px; color: var(--muted); }
.home-links { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.foot { text-align: center; font-size: 12px; }

/* player colour classes */
.c-red { --pc: var(--c-red); } .c-blue { --pc: var(--c-blue); } .c-saffron { --pc: var(--c-saffron); }
.c-green { --pc: var(--c-green); } .c-purple { --pc: var(--c-purple); } .c-brown { --pc: var(--c-brown); }
.mini[class*="c-"], .seat .avatar, .chip .avatar { background: var(--pc); }
b[class*="c-"], .resp-name { color: var(--pc); }

/* ---------- lobby ---------- */
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite-url { font-family: inherit; font-weight: 600; flex: 1; background: var(--bg2); padding: 10px; border-radius: 10px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite p { margin: 0; }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); border-left: 5px solid var(--pc, var(--line)); }
.seat.empty { opacity: .55; border-style: dashed; }
.seat.empty .avatar { background: var(--line); color: var(--ink2); }
.seat-name { flex: 1; font-weight: 650; }
.seat-meta { font-size: 13px; color: var(--muted); }
.host-tag { color: var(--accent); font-weight: 700; }
.colors { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink2); }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--card); background: var(--pc); box-shadow: 0 0 0 1.5px var(--line); }
.swatch.on { box-shadow: 0 0 0 3px var(--ink); }
.swatch:disabled { opacity: .25; }
.toggle { display: flex; gap: 12px; align-items: flex-start; }
.toggle input { width: 22px; height: 22px; accent-color: var(--accent); margin-top: 2px; flex: none; }
.toggle small { display: block; color: var(--muted); font-size: 13px; }
.select { display: flex; justify-content: space-between; align-items: center; }
.select select { border: 1.5px solid var(--line); background: var(--card); border-radius: 10px; padding: 7px 10px; }
.start-btn { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000), 0 10px 24px rgba(40, 25, 10, .25); }
.start-btn:disabled { opacity: 1; background: var(--card); color: var(--muted); border-color: var(--line); box-shadow: 0 3px 0 var(--line), 0 10px 24px rgba(40, 25, 10, .15); }

/* ---------- game layout ---------- */
.game-screen { height: 100dvh; display: flex; overflow: hidden; background: var(--bg); }
.game-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; }
.side { display: none; }
.topbar { display: flex; align-items: center; gap: 4px; padding: max(6px, env(safe-area-inset-top)) 6px 6px; background: var(--bg); z-index: 3; }
.chips { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 2px; min-width: 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 7px; border-radius: 14px;
  background: var(--card); border: 1.5px solid var(--line); position: relative; overflow: visible; transition: border-color .3s, transform .3s, box-shadow .3s;
  box-shadow: 0 2px 0 var(--line);
}
.chip .avatar { width: 30px; height: 30px; font-size: 15px; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--pc); }
.chip.current { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, var(--card)); box-shadow: 0 2px 0 color-mix(in srgb, var(--pc) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--pc) 22%, transparent); }
.chip.current .avatar { animation: turnring 1.6s ease-in-out infinite; }
@keyframes turnring { 50% { box-shadow: 0 0 0 2px var(--card), 0 0 0 6px color-mix(in srgb, var(--pc) 55%, transparent); } }
.chip.offline { opacity: .55; }
.chip.offline .avatar::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); border: 2px solid var(--card); }
.bot-tag { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.bot-tag .ico { width: 11px; height: 11px; }
.chip-body { min-width: 0; flex: 1; }
.chip-name { font-size: 14px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-stats { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip-stats > span { display: inline-flex; align-items: center; gap: 2px; }
.chip-stats .ico { width: 13px; height: 13px; vertical-align: 0; }
.chip-stats .vp { color: var(--ink); font-weight: 800; }
.chip-stats .vp .ico { color: #e9a82b; }
.chip-stats .badge { background: var(--pc); color: #fff; border-radius: 6px; padding: 2px 3px; }
.chip-stats .badge .ico { width: 12px; height: 12px; }
.chip-timer { position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--pc) 20%, transparent); }
.chip-timer span { display: block; height: 100%; background: var(--pc); transition: width .5s linear; }
.icon-btn .ico { width: 24px; height: 24px; }
.chat-btn .dot { position: absolute; top: 3px; right: 2px; background: var(--accent); color: #fff; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 4px; font-weight: 800; }

.board-area { flex: 1; position: relative; min-height: 0; }
.board-wrap { position: absolute; inset: 0; touch-action: none; }
@media (min-height: 701px) { .board-wrap { inset: 46px 0 34px; } }
.board { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.prompt {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%); max-width: calc(100% - 16px);
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 14px 5px; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); white-space: nowrap; z-index: 2; pointer-events: auto;
}
.prompt-text { overflow: hidden; text-overflow: ellipsis; }
.prompt-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.prompt.mine { border-color: var(--accent); }
.prompt .countdown { font-variant-numeric: tabular-nums; color: var(--accent); }
.prompt.nudge { animation: nudge .9s ease; }
@keyframes nudge { 0%, 100% { transform: translateX(-50%) scale(1); } 20% { transform: translateX(-50%) scale(1.12); } 40% { transform: translateX(-50%) scale(.97); } 60% { transform: translateX(-50%) scale(1.05); } }
.ticker { position: absolute; left: 8px; right: 8px; bottom: 6px; display: flex; align-items: flex-end; gap: 8px; z-index: 2; pointer-events: none; }
.ticker-lines { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; gap: 2px; pointer-events: auto; cursor: pointer; }
.tl { font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--bg) 80%, transparent); border-radius: 8px; padding: 2px 8px; align-self: flex-start; max-width: 100%; }
.tl:not(.old) { color: var(--ink); font-weight: 600; }
.tl.old { opacity: .7; }
.last-roll { display: flex; gap: 3px; flex: none; }
.mini-die { width: 26px; height: 26px; border-radius: 7px; background: #fffaf0; color: #2a2118; border: 1.5px solid #d9cbb0; display: grid; place-items: center; font-weight: 900; font-size: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.conn-pill { position: absolute; left: 50%; top: 48px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--bg); font-size: 13px; padding: 4px 12px; border-radius: 999px; transition: .3s; pointer-events: none; z-index: 3; }
.conn-pill.show { opacity: .9; transform: translate(-50%, 0); }
.conn-pill { transform: translate(-50%, -10px); }

.bottom { position: relative; padding: 0 8px calc(6px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.hand { display: flex; gap: 5px; justify-content: center; }
.hand.bump .rcard:not(.empty) { animation: bump .5s ease; }
@keyframes bump { 40% { transform: translateY(-6px) scale(1.06); } }
.rcard {
  flex: 1; max-width: 66px; aspect-ratio: 5 / 6.6; border-radius: 12px; position: relative; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 82%, #fff) 0%, var(--rc) 55%, color-mix(in srgb, var(--rc) 80%, #000) 100%);
  border: 2px solid color-mix(in srgb, var(--rc) 70%, #000);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 3px 0 color-mix(in srgb, var(--rc) 55%, #000), 0 6px 12px rgba(40, 25, 10, .18);
  transition: opacity .3s, transform .2s, filter .3s;
}
.rcard-ico { width: 78%; height: auto; margin-top: -10%; filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, .18)); }
.rcard-n {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 15px; line-height: 1;
  color: var(--ink); background: var(--card); border: 2px solid color-mix(in srgb, var(--rc) 70%, #000); border-radius: 999px;
  min-width: 26px; height: 22px; display: grid; place-items: center; padding: 0 6px; font-variant-numeric: tabular-nums;
}
.rcard.empty { filter: saturate(.25) brightness(1.05); opacity: .5; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
.r-wood { --rc: var(--forest); } .r-brick { --rc: var(--hills); } .r-sheep { --rc: var(--pasture); } .r-wheat { --rc: var(--fields); } .r-ore { --rc: var(--mountains); }
.rcard.devcard { --rc: #8f6cc9; color: #fff; }
.devcard-face { display: grid; place-items: center; margin-top: -10%; }
.devcard-face .ico { width: 30px; height: 30px; }
.hand { padding-bottom: 8px; }
.spectating { text-align: center; color: var(--muted); padding: 10px; }

.actionbar { display: flex; gap: 6px; }
.act {
  flex: 1; border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; padding: 7px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  box-shadow: 0 3px 0 var(--line); min-height: 56px; touch-action: manipulation; transition: transform .08s, box-shadow .08s, opacity .2s; color: var(--ink);
}
.act:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.act-ic { display: grid; place-items: center; }
.act-ic .ico { width: 24px; height: 24px; }
.act-l { font-size: 13px; font-weight: 700; line-height: 1.1; }
.act:disabled { opacity: .38; box-shadow: none; }
.act { position: relative; }
.act.has-dot::after { content: ''; position: absolute; top: 6px; right: calc(50% - 20px); width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--card); }
.act.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 70%, #000); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.act.pulse { animation: pulse 1.6s ease-in-out infinite; flex: 1.5; }
.act.pulse .act-ic .ico { animation: wobble 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000), 0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); } }
@keyframes wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 85% { transform: rotate(10deg); } }

.confirm-area { display: none; }
.confirm-area.show { display: block; }
.confirm-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; background: var(--card); border: 1.5px solid var(--accent); border-radius: 14px; padding: 8px; box-shadow: var(--shadow); animation: up .2s ease; }
.confirm-q { flex: 1; font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 120px; }
.btn.victim { border-color: var(--pc); border-width: 2px; }
.cost { display: inline-flex; gap: 2px; align-items: center; }
.cost .rtok { font-size: 14px; }
.cost-i small { font-size: 11px; font-weight: 800; }
@keyframes up { from { transform: translateY(10px); opacity: 0; } }

.offer-area:empty { display: none; }
.offer-card { background: var(--card); border: 1.5px solid var(--pc, var(--accent)); border-radius: 14px; padding: 8px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.offer-card.slide-in { animation: slidein .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes slidein { from { transform: translateX(110%); opacity: 0; } }
.offer-head { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.offer-head .big { font-size: 16px; font-weight: 700; }
.offer-head .link-btn { margin-left: auto; }
.offer-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.resps { display: flex; flex-direction: column; gap: 4px; }
.resp { display: flex; align-items: center; gap: 8px; font-size: 14px; justify-content: space-between; }
.resp-name { font-weight: 750; }
.resp-st { color: var(--muted); font-size: 13px; }
.resp-st.ok { color: var(--good); }
.resp-st.no { color: var(--bad); }
.resp-counter { display: flex; align-items: center; gap: 6px; }

/* ---------- board svg ---------- */
.sea { fill: url(#seaglow); stroke: color-mix(in srgb, var(--sea) 70%, #000); stroke-width: 3; }
.wave { fill: none; stroke: var(--sea-line); stroke-width: 2; stroke-linecap: round; }
.shallow polygon { fill: var(--shallow); }
.beach polygon { fill: var(--sand); }
.depth polygon { fill: rgba(40, 25, 10, .35); }
.hex-bevel { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.token-shadow { fill: rgba(0, 0, 0, .28); }
.token-ring { fill: none; stroke: color-mix(in srgb, var(--token-ink) 18%, transparent); stroke-width: 1; }
.port-shadow { fill: rgba(0, 0, 0, .25); }
.port-sub { font-size: 8px; font-weight: 800; fill: var(--token-ink); letter-spacing: .02em; }
.port.any .port-txt { font-size: 12px; }
.road-shadow { stroke: rgba(0, 0, 0, .3); stroke-width: 12; stroke-linecap: round; }
.road-shine { stroke: rgba(255, 255, 255, .35); stroke-width: 2.2; stroke-linecap: round; }
.town-roof { fill: color-mix(in srgb, var(--pc) 62%, #000); stroke: var(--piece-outline); stroke-width: 1.6; stroke-linejoin: round; }
.town-win { fill: rgba(255, 240, 200, .85); stroke: var(--piece-outline); stroke-width: 1; }
.sea-waves { stroke: none; }
.hex-base { stroke: none; }
.hex-frame { fill: none; stroke: var(--frame); stroke-width: 3.5; stroke-linejoin: round; }
.hex-glow { fill: #fff; opacity: 0; pointer-events: none; }
.hex.glow .hex-glow { animation: hexglow 1.6s ease; }
.hex.glow-blocked .hex-glow { fill: #000; animation: hexglow 1.6s ease; }
@keyframes hexglow { 0% { opacity: 0; } 15% { opacity: .55; } 40% { opacity: .2; } 60% { opacity: .45; } 100% { opacity: 0; } }
.hex.glow .token { animation: tokenpop 1s ease; }
@keyframes tokenpop { 30% { transform: scale(1.35); } }
.t-wood .hex-base { fill: var(--forest); } .t-brick .hex-base { fill: var(--hills); } .t-sheep .hex-base { fill: var(--pasture); }
.t-wheat .hex-base { fill: var(--fields); } .t-ore .hex-base { fill: var(--mountains); } .t-desert .hex-base { fill: var(--desert); }
.a-tree { fill: var(--tree); } .a-trunk { fill: var(--trunk); }
.a-brick { fill: var(--brick); } .a-mound { fill: var(--mound); }
.a-wool { fill: var(--wool); } .a-face { fill: var(--face); } .a-grass { stroke: var(--grass); stroke-width: 2; stroke-linecap: round; }
.a-stalk { stroke: var(--stalk); stroke-width: 1.6; } .a-grain { fill: var(--grain); }
.a-peak { fill: var(--peak); } .a-peak2 { fill: var(--peak2); } .a-snow { fill: var(--snow); }
.a-dune { fill: var(--dune); } .a-dune2 { fill: var(--dune2); } .a-cactus { fill: var(--cactus); } .a-sun { fill: var(--sun); opacity: .8; }
.token { transform-box: fill-box; transform-origin: center; }
.token-bg { fill: var(--token); stroke: rgba(0, 0, 0, .3); stroke-width: 1.3; }
.token-num { font-weight: 800; font-size: 19px; fill: var(--token-ink); font-family: "Baloo 2", ui-rounded, system-ui, sans-serif; }
.token-pips { fill: var(--token-ink); }
.token.hot .token-num, .token.hot .token-pips { fill: var(--hot); }
.hex.robbed .token { opacity: .45; }
.port-plank { stroke: #a5774a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 2.2; }
.port-bg { fill: var(--token); stroke: #a5774a; stroke-width: 2.5; }
.port:not(.any) .port-bg { fill: var(--rc); stroke: color-mix(in srgb, var(--rc) 60%, #000); }
.port:not(.any) .port-sub { fill: #2a1c10; }
.port-txt { font-size: 11px; font-weight: 800; fill: var(--token-ink); }
.port-txt.small { font-size: 8.5px; }
.port-emoji { font-size: 12px; }
.robber { transition: transform .7s cubic-bezier(.5, -.3, .3, 1.3); pointer-events: none; }
.robber.instant { transition: none; }
.robber-body { fill: var(--robber); stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.robber-eye { fill: #f5d76e; }
.robber-shadow { fill: rgba(0, 0, 0, .3); }

.road-outline { stroke: var(--piece-outline); stroke-width: 13; stroke-linecap: round; }
.road-fill { stroke: var(--pc); stroke-width: 8.5; stroke-linecap: round; }
.town-fill { fill: var(--pc); stroke: var(--piece-outline); stroke-width: 2.4; stroke-linejoin: round; }
.town-shadow { fill: rgba(0, 0, 0, .3); }
.town .town-inner { transform: scale(1.22); }
.town.city .town-inner { transform: scale(1.32); }
.piece.drop { animation: drop .55s cubic-bezier(.3, 1.5, .5, 1) both; }
.town.drop .town-inner { animation: dropin .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.town.drop { animation: none; }
@keyframes drop { from { opacity: 0; transform: scale(1.8); } }
@keyframes dropin { from { opacity: 0; transform: translateY(-30px) scale(1.4); } }
.ghost-piece { opacity: .65; pointer-events: none; animation: ghostpulse 1s ease-in-out infinite; }
@keyframes ghostpulse { 50% { opacity: .35; } }

.hl-v { fill: #fff; stroke: var(--accent); stroke-width: 3; animation: hlpulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.hl-e { stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 8; opacity: .95; animation: dash 1s linear infinite; pointer-events: none; }
.hl-h { fill: rgba(255, 255, 255, .18); stroke: #fff; stroke-width: 3; stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; pointer-events: none; }
.layer-hl.k-city .hl-v { r: 16; fill: none; stroke-width: 3.5; }
.hit { fill: transparent; stroke: transparent; cursor: pointer; }
.hit-e { stroke-width: 22; stroke-linecap: round; }
@keyframes hlpulse { 50% { transform: scale(1.35); } }
@keyframes dash { to { stroke-dashoffset: -20; } }

/* ---------- dice ---------- */
.dice-tray { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.6); display: flex; gap: 22px; perspective: 600px; opacity: 0; pointer-events: none; z-index: 4; transition: opacity .3s, transform .4s; }
.dice-tray.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dice-tray.hide { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.dice-tray.settled .die { animation: land .35s ease; }
.die { width: 58px; height: 58px; position: relative; transform-style: preserve-3d; }
.die-face { position: absolute; inset: 0; background: #fffaf0; border-radius: 12px; border: 2px solid #d9cbb0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08); }
.dice-tray.seven .die-face { background: #ffe9e2; }
.die-face .pip { position: absolute; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%; background: #2a2118; }
.die-face.f1 .pip { background: var(--c-red); width: 14px; height: 14px; margin: -7px; }
.f1 { transform: translateZ(29px); } .f6 { transform: rotateY(180deg) translateZ(29px); }
.f2 { transform: rotateY(90deg) translateZ(29px); } .f5 { transform: rotateY(-90deg) translateZ(29px); }
.f3 { transform: rotateX(90deg) translateZ(29px); } .f4 { transform: rotateX(-90deg) translateZ(29px); }
@keyframes land { 50% { translate: 0 6px; } }

.fly-card { position: fixed; z-index: 50; pointer-events: none; width: 40px; height: 52px; border-radius: 9px; display: grid; place-items: center; background: var(--rc, #8f6cc9); border: 2px solid color-mix(in srgb, var(--rc, #8f6cc9) 65%, #000); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), 0 8px 18px rgba(0, 0, 0, .3); }
.fly-card.back { background: repeating-linear-gradient(45deg, #8f6cc9 0 6px, #7a59b5 6px 12px); }
.fly-ico { width: 32px; height: 32px; }
.rtok { display: inline-flex; align-items: center; gap: 1px; vertical-align: -0.3em; margin: 0 1px; }
.rtok-ico { width: 1.45em; height: 1.45em; background: var(--rc); border-radius: 5px; padding: 1px; border: 1.5px solid color-mix(in srgb, var(--rc) 65%, #000); }
.rtok b { font-weight: 800; margin-left: 1px; }
.mi { display: inline-flex; align-items: center; gap: 10px; }
.mi .ico { width: 22px; height: 22px; color: var(--ink2); }
.pick-ico { width: 40px; height: 40px; }
.bi-icon .ico { width: 28px; height: 28px; color: var(--accent); }
.trophy-ico { width: 72px; height: 72px; color: #e9a82b; }
.float-react { position: fixed; z-index: 60; font-size: 34px; pointer-events: none; }

/* ---------- sheets ---------- */
.sheet-wrap { position: fixed; inset: 0; background: rgba(15, 10, 5, 0); z-index: 40; display: flex; align-items: flex-end; justify-content: center; transition: background .22s; }
.sheet-wrap.open { background: rgba(15, 10, 5, .4); }
.sheet-wrap:not(.open) { pointer-events: none; }
.sheet {
  width: 100%; max-width: 560px; max-height: 88dvh; background: var(--card); border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .9, .3, 1); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
}
.sheet-wrap.open .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 18px; }
.sheet-head h2 { font-size: 19px; }
.sheet-body { overflow-y: auto; padding: 6px 16px 18px; -webkit-overflow-scrolling: touch; }
.chat-sheet { height: 80dvh; }
.chat-sheet .sheet-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.build-list { display: flex; flex-direction: column; gap: 8px; }
.build-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); text-align: left; }
.build-item.disabled { opacity: .45; }
.bi-icon { font-size: 26px; }
.bi-main { flex: 1; display: flex; flex-direction: column; }
.bi-main small { color: var(--muted); }

.trade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trade-col { display: flex; flex-direction: column; gap: 6px; }
.trade-col h3 { font-size: 14px; color: var(--ink2); text-transform: uppercase; letter-spacing: .05em; }
.trade-row { display: flex; align-items: center; gap: 4px; }
.trade-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.trade-actions .btn { flex: 1; }
.trade .hint { grid-column: 1 / -1; }
.rate { font-size: 11px; color: var(--muted); min-width: 22px; }
.rate.port { color: var(--good); font-weight: 800; }
.stepper { display: flex; align-items: center; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; flex: 1; }
.st-btn { border: 0; background: transparent; width: 36px; height: 38px; font-size: 20px; font-weight: 700; touch-action: manipulation; }
.st-btn:disabled { opacity: .3; }
.st-val { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; }
.st-val b { font-size: 15px; min-width: 12px; color: var(--muted); }
.st-val.on b { color: var(--ink); }
.discard { display: flex; flex-direction: column; gap: 12px; }
.discard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.dev { display: flex; flex-direction: column; gap: 12px; }
.dev-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dev-buy small { color: var(--muted); }
.dev-list { display: flex; flex-direction: column; gap: 8px; }
.dev-card { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--bg); border: 1.5px solid var(--line); }
.dev-ic { width: 46px; height: 60px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(160deg, #a789d8, #7a59b5); border: 2px solid #5d3f96; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 2px 0 #5d3f96; }
.dev-ic .ico { width: 26px; height: 26px; }
.dev-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dev-main small { color: var(--ink2); font-size: 13px; }
.dev-main .why { color: var(--muted); font-style: italic; }
.new { color: var(--accent); font-size: 11px; font-weight: 900; }
.res-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.res-btn { border: 2px solid color-mix(in srgb, var(--rc) 65%, #000); border-radius: 14px; padding: 8px 0 6px; background: var(--rc); display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 3px 0 color-mix(in srgb, var(--rc) 55%, #000); }
.res-btn small { font-size: 11px; font-weight: 700; color: #2a2118; }
.res-btn:disabled { opacity: .35; }
.res-pick { display: flex; flex-direction: column; gap: 10px; }

.menu { display: flex; flex-direction: column; gap: 4px; }
.menu-item { border: 0; background: transparent; text-align: left; padding: 13px 10px; border-radius: 12px; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.menu-item:active { background: var(--bg2); }
.menu-item small { color: var(--muted); }
.menu-item:disabled { opacity: .4; }
.rules ul { padding-left: 18px; color: var(--ink2); }
.rules li { margin: 5px 0; }

.log { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.log-line { padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink2); }

.chat { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.chat-list { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.msg { background: var(--bg); border-radius: 12px; padding: 6px 10px; font-size: 14px; align-self: flex-start; max-width: 85%; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.react-bar { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.react-btn { border: 0; background: var(--bg); border-radius: 10px; font-size: 22px; padding: 4px 6px; flex: none; }
.react-btn:active { transform: scale(1.3); }
.quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.quick-btn { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 10px; font-size: 13px; white-space: nowrap; }
.chat-send { display: flex; gap: 6px; }
.chat-input { flex: 1; border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px; padding: 10px; min-width: 0; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translate(-50%, -20px); opacity: 0; z-index: 70; pointer-events: none;
  background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 14px; font-weight: 650; font-size: 14px; max-width: calc(100% - 32px);
  transition: opacity .25s, transform .25s; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--bad); color: #fff; }
#toast.big { font-size: 18px; padding: 12px 20px; background: var(--accent); color: #fff; }

/* ---------- victory ---------- */
.victory { position: fixed; inset: 0; z-index: 45; background: rgba(15, 10, 5, 0); display: grid; place-items: center; padding: 16px; transition: background .4s; }
.victory.show { background: rgba(15, 10, 5, .55); }
.victory-card { position: relative; z-index: 2; background: var(--card); border-radius: 24px; padding: 22px 18px; width: min(420px, 100%); max-height: 92dvh; overflow-y: auto; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); transform: scale(.7) translateY(30px); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; display: flex; flex-direction: column; gap: 12px; }
.victory.show .victory-card { transform: none; opacity: 1; }
.trophy { animation: trophy 1.2s ease .3s both; }
@keyframes trophy { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }
.victory h1 { font-size: 30px; }
.victory .sub { margin: 0; color: var(--muted); }
.standings { display: flex; flex-direction: column; gap: 6px; }
.stand { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg); border-left: 5px solid var(--pc); text-align: left; }
.stand.won { background: color-mix(in srgb, var(--pc) 18%, var(--card)); }
.rank { font-weight: 900; color: var(--muted); width: 16px; }
.stand-name { flex: 1; font-weight: 750; }
.stand-break { font-size: 13px; font-weight: 700; color: var(--ink2); display: flex; gap: 6px; align-items: center; }
.stand-break > span { display: inline-flex; align-items: center; gap: 1px; }
.stand-break .ico { width: 15px; height: 15px; }
.stand-break .aw { background: var(--pc); color: #fff; border-radius: 6px; padding: 2px; }
.stand-break .vpc .ico { color: #e9a82b; }
.stand-vp { font-weight: 900; font-size: 20px; min-width: 26px; text-align: right; }
.mystats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mystats div { background: var(--bg); border-radius: 12px; padding: 8px 2px; display: flex; flex-direction: column; }
.mystats b { font-size: 20px; }
.mystats small { font-size: 11px; color: var(--muted); }
.victory-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ---------- stats ---------- */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.chip-btn { border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 14px; }
.chip-btn.on { background: var(--accent2); color: var(--bg); border-color: var(--accent2); }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.lb { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.lb th { text-align: right; color: var(--muted); font-weight: 650; padding: 6px; border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.lb td { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.lb th:nth-child(-n+2), .lb td:nth-child(-n+2) { text-align: left; }
.lb td.name { font-weight: 700; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.award { background: var(--bg); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.aw-ic { font-size: 26px; }
.records { display: flex; flex-direction: column; gap: 8px; }
.rec { display: flex; align-items: center; gap: 10px; }
.rec-ic { font-size: 22px; width: 32px; text-align: center; }
.rec small { display: block; color: var(--muted); }
.rollchart { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-top: 18px; }
.rc-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; outline: none; }
.rc-bar { width: 100%; max-width: 26px; background: var(--accent2); border-radius: 4px 4px 0 0; transition: filter .15s; }
.rc-col:hover .rc-bar, .rc-col:focus .rc-bar { filter: brightness(1.25); }
.rc-bar.seven { background: var(--accent); }
.rc-val { font-size: 11px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.rc-k { font-size: 12px; font-weight: 700; color: var(--ink2); }
.rivals { display: flex; flex-direction: column; gap: 8px; }
.rival { background: var(--bg); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.rival small { color: var(--ink2); }
.recent { display: flex; flex-direction: column; gap: 8px; }
.recent-game { background: var(--bg); border-radius: 12px; padding: 8px 10px; }
.rg-head { display: flex; justify-content: space-between; font-size: 13px; }
.rg-players { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 14px; }
.rg-p i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.rg-p.won { font-weight: 750; }

.loading { min-height: 100dvh; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--muted); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .side { display: flex; flex-direction: column; gap: 8px; width: 320px; padding: 12px; border-left: 1px solid var(--line); background: var(--bg2); }
  .side h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  .side-log { max-height: 38%; overflow-y: auto; flex: none; }
  .side .chat { flex: 1; }
  .bottom { max-width: 640px; width: 100%; margin: 0 auto; }
  .chips { grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); }
  .chat-btn { display: none; }
}
@media (min-width: 600px) {
  .chips { grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); }
  .rcard { max-width: 76px; }
  .act-l { font-size: 13px; }
}
@media (max-height: 700px) {
  .ticker { display: none; }
  .chip { padding: 2px 5px 2px 4px; }
  .rcard { aspect-ratio: 5 / 5; }
  .rcard-emoji { font-size: 20px; }
  .act { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}