/* Sidequest — monochrome, mobile-first, iMessage-like */
:root {
  --bg: #ffffff; --bg2: #f2f2f7; --card: #ffffff; --fg: #000000; --fg2: #3c3c43; --muted: #8e8e93;
  --line: rgba(60,60,67,.14); --line-strong: rgba(60,60,67,.32);
  --me: #000000; --me-fg: #ffffff; --them: #e9e9eb; --them-fg: #000000;
  --accent: #000000; --accent-fg: #ffffff; --online: #30d158; --danger: #ff3b30;
  --p0: #0a84ff; --p1: #ff375f; --c4a: #ff453a; --c4b: #ffd60a;
  --r: 14px; --shadow: 0 10px 40px rgba(0,0,0,.18);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --spring: cubic-bezier(.2,.9,.25,1.05); --ease: cubic-bezier(.25,.8,.25,1);
  color-scheme: light dark;
}
/* theme: html[data-theme] is set before first paint by the inline script in index.html (system/light/dark) */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
    --bg: #000000; --bg2: #1c1c1e; --card: #1c1c1e; --fg: #ffffff; --fg2: #ebebf5; --muted: #8e8e93;
    --line: rgba(84,84,88,.45); --line-strong: rgba(235,235,245,.3);
    --me: #ffffff; --me-fg: #000000; --them: #262628; --them-fg: #ffffff;
    --accent: #ffffff; --accent-fg: #000000; --shadow: 0 10px 40px rgba(0,0,0,.6);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
svg { display: block; }
#app { height: 100%; max-width: 560px; margin: 0 auto; position: relative; overflow: hidden; }
@media (min-width: 600px) { #app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* brand */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.03em; }
.mark-tile { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; }
.mark-tile img { width: 100%; height: 100%; object-fit: contain; }
:root[data-theme="dark"] .mark-tile { background: #fff; padding: 3px; }
.wordmark { font-size: 22px; }
.brand.lg .mark-tile { width: 68px; height: 68px; border-radius: 18px; }
:root[data-theme="dark"] .brand.lg .mark-tile { padding: 7px; }
.brand.lg { flex-direction: column; gap: 14px; }
.brand.lg .wordmark { font-size: 36px; }
.brand.xs .mark-tile { width: 20px; height: 20px; border-radius: 6px; padding: 2px; }
.brand.xs .wordmark { font-size: 15px; }
.boot { height: 100%; display: grid; place-items: center; }
.boot .mark-tile { width: 64px; height: 64px; border-radius: 18px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.92); opacity: .7; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform .12s, opacity .2s, background .2s; white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.btn.ghost { background: var(--bg2); color: var(--fg); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--line-strong); }
.btn.big { height: 50px; width: 100%; font-size: 17px; border-radius: 14px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 14px; }
.btn:disabled { opacity: .4; }
.btn.busy { opacity: .6; pointer-events: none; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--fg); }
.icon-btn:active { background: var(--bg2); }

/* auth */
.auth { height: 100%; overflow-y: auto; padding: calc(var(--sat) + 48px) 24px calc(var(--sab) + 28px); display: flex; flex-direction: column; gap: 22px; }
.auth-top { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tag { margin: 0; color: var(--muted); font-size: 16px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg2); border-radius: 12px; padding: 3px; }
.seg button { height: 36px; border-radius: 9px; font-weight: 600; font-size: 15px; color: var(--muted); transition: background .2s, color .2s; }
.seg button.on { background: var(--card); color: var(--fg); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
:root[data-theme="dark"] .seg button.on { background: #3a3a3c; }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span, .addfriend label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.field input, .uname, .input-wrap { background: var(--bg2); border: 1px solid transparent; border-radius: 12px; }
.field input { height: 50px; padding: 0 14px; outline: none; width: 100%; }
.field input:focus, .uname:focus-within { border-color: var(--line-strong); }
.uname { display: flex; align-items: center; height: 50px; padding-left: 14px; flex: 1; min-width: 0; }
.uname i { font-style: normal; color: var(--muted); font-weight: 600; }
.uname input { border: 0; background: transparent; height: 100%; flex: 1; min-width: 0; padding: 0 12px 0 2px; outline: none; }
.hint { font-size: 13px; color: var(--muted); }
.hint.good { color: var(--online); } .hint.bad { color: var(--danger); }
.err { color: var(--danger); margin: 0; min-height: 1em; font-size: 14px; }
.notice { background: var(--bg2); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.notice b { display: block; margin-bottom: 2px; }
.fine { color: var(--muted); font-size: 13px; margin: 0; text-align: center; }
.center { text-align: center; }

/* shell */
.root { height: 100%; position: relative; }
.shell { height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sat) + 10px) 12px 10px 18px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--line); z-index: 2; }
.tabview { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
.tabbar { display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 8px calc(var(--sab) + 6px); border-top: .5px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); position: relative; padding: 4px 0; }
.tabbar button.on { color: var(--fg); }
.tabbar svg { width: 25px; height: 25px; }
.badge { display: none; position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 11px/18px system-ui; font-style: normal; }
.badge.show { display: block; }

.sec { margin: 22px 20px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.list { margin: 0 12px; background: var(--card); border-radius: 16px; overflow: hidden; }
:root[data-theme="light"] .tabview .list, :root[data-theme="light"] .sheet .list { background: var(--bg2); } :root[data-theme="light"] .tabview .list .row, :root[data-theme="light"] .sheet .list .row { background: transparent; }
.list + .list { margin-top: 18px; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; position: relative; min-height: 60px; }
button.row:active { background: var(--line); }
.row + .row::before { content: ''; position: absolute; top: 0; right: 0; left: 70px; border-top: .5px solid var(--line); }
.row-main { flex: 1; min-width: 0; }
.row-main b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main p { margin: 1px 0 0; color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-top { display: flex; align-items: baseline; gap: 8px; }
.row-top b { flex: 1; }
.row-top time { color: var(--muted); font-size: 14px; flex: none; }
.row > svg { color: var(--muted); flex: none; }
.row.unread .row-main b { font-weight: 800; }
.row.unread .row-main p { color: var(--fg); }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg); flex: none; }
.row.danger b { color: var(--danger); font-weight: 600; }
.row-btns { display: flex; gap: 8px; justify-content: center; }
.bot-row .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--fg); }
.on-txt { color: var(--online) !important; }
.muted { color: var(--muted); }
.pad { padding: 8px 20px; }
.card { margin: 14px 12px 0; background: var(--bg2); border-radius: 16px; padding: 14px; }

/* avatars */
.av { --s: 40px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: calc(var(--s) * .42); flex: none; position: relative; }
.av-l { display: contents; }
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0; transition: opacity .15s; }
.av-img.ok { opacity: 1; transition: none; }
:root { --av-ph: rgba(127,127,127,.22); }
.av-edit { position: relative; border-radius: 50%; }
.av-edit .av-badge { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--card); font-size: 15px; font-weight: 800; line-height: 1; }
.crop { position: relative; width: min(100%, 300px); aspect-ratio: 1; margin: 6px auto 14px; border-radius: 50%; overflow: hidden; background: #000; touch-action: none; cursor: grab; box-shadow: 0 0 0 3px var(--bg2); }
.crop img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; pointer-events: none; max-width: none; }
.crop-zoom { width: 100%; margin: 0 0 14px; accent-color: var(--fg); }
.photo-actions { display: flex; flex-direction: column; gap: 10px; }
.av.bot { background: var(--fg); color: var(--bg); }
.av.bot svg { width: 58%; height: 58%; }
.av.icon { background: var(--fg); color: var(--bg); }
.dot-online { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 2.5px var(--bg); }
.av-group { --s: 40px; width: var(--s); height: var(--s); position: relative; flex: none; display: inline-block; }
.av-group > .av { position: absolute; box-shadow: 0 0 0 2px var(--bg); }
.av-group > .av:first-child { top: 0; left: 0; }
.av-group > .av:last-child { right: 0; bottom: 0; }
.av-sp { width: 28px; flex: none; }

/* strip */
.strip { padding: 4px 0 0; }
.strip .sec { margin-top: 14px; }
.strip-row { display: flex; gap: 10px; overflow-x: auto; padding: 0 12px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip-row::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--bg2); scroll-snap-align: start; position: relative; max-width: 240px; text-align: left; }
.chip.mine { background: var(--fg); color: var(--bg); }
.chip.mine small { color: inherit; opacity: .75; }
.chip-art { width: 38px; height: 38px; flex: none; }
.chip-art svg { width: 100%; height: 100%; }
.chip-txt { display: flex; flex-direction: column; min-width: 0; }
.chip-txt b { font-size: 15px; font-weight: 700; }
.chip-txt small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--online); }
.strip.compact { padding: 8px 0; border-bottom: .5px solid var(--line); }
.strip.compact .chip { padding: 6px 12px 6px 6px; }
.strip.compact .chip-art { width: 30px; height: 30px; }
.chat-strip:empty { display: none; }

/* empty */
.empty { text-align: center; padding: 30px 30px; }
.empty-art { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.empty-art svg { width: 54px; height: 54px; }
.empty-art svg:nth-child(1) { transform: rotate(-8deg); } .empty-art svg:nth-child(3) { transform: rotate(8deg); }
.empty h3 { margin: 0 0 4px; font-size: 20px; }
.empty p { color: var(--muted); margin: 0 0 16px; }

.addfriend { display: flex; flex-direction: column; gap: 8px; }
.af-row { display: flex; gap: 8px; align-items: center; }
.af-row .uname { height: 44px; background: var(--bg); }
.sheet .af-row .uname { background: var(--bg2); }
.af-row .btn { height: 44px; }
.me { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 14px; }
.me h2 { margin: 10px 0 0; font-size: 22px; letter-spacing: -.02em; }
.me p { margin: 0; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; }
.pill button { width: 22px; height: 22px; display: grid; place-items: center; }
.pill svg { width: 14px; height: 14px; }
.tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
.picked .tick { background: var(--fg); border-color: var(--fg); box-shadow: inset 0 0 0 4px var(--bg2); }
.stack { display: flex; flex-direction: column; gap: 10px; margin: 18px 12px 0; }

/* chat */
.chat { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .38s var(--ease); z-index: 5; visibility: hidden; }
.chat.open { transform: none; visibility: visible; }
.chat-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(var(--sat) + 6px) 6px 6px; border-bottom: .5px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.peer { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.peer-txt { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.peer-txt b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.peer-txt small { font-size: 12px; color: var(--muted); }
.msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px 6px; display: flex; flex-direction: column; }
.msgs > :first-child { margin-top: auto; }
.stamp { text-align: center; font-size: 12px; color: var(--muted); margin: 14px 0 6px; font-weight: 500; }
.who { font-size: 12px; color: var(--muted); margin: 8px 0 2px 40px; }
.mrow { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.mrow.first { margin-top: 8px; }
.mrow.mine { justify-content: flex-end; }
.mrow.center { justify-content: center; margin: 12px 0; }
.bubble { max-width: 76%; padding: 8px 13px; border-radius: 19px; font-size: 17px; line-height: 1.3; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; animation: pop .28s var(--spring); }
.mine .bubble { background: var(--me); color: var(--me-fg); border-bottom-right-radius: 6px; }
.theirs .bubble { background: var(--them); color: var(--them-fg); border-bottom-left-radius: 6px; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.typing { padding: 0 12px; }
.typing-b { display: inline-flex !important; gap: 4px; padding: 12px 14px !important; background: var(--them); border-radius: 19px; margin-bottom: 6px; }
.typing-b i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing-b i:nth-child(2) { animation-delay: .15s; } .typing-b i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 30% { opacity: .25; transform: translateY(-2px); } }
.loading-dots { margin: auto !important; display: flex; gap: 6px; }
.loading-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.loading-dots i:nth-child(2) { animation-delay: .15s; } .loading-dots i:nth-child(3) { animation-delay: .3s; }
.chat-empty { text-align: center; padding: 30px 16px; display: flex; flex-direction: column; align-items: center; margin-top: auto; margin-bottom: auto; }
.chat-empty h3 { margin: 12px 0 2px; } .chat-empty p { margin: 0 0 18px; color: var(--muted); font-size: 15px; max-width: 280px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 340px; }
.qg { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg2); }
.qg svg { width: 56px; height: 56px; transition: transform .15s; }
.qg:active svg { transform: scale(.92); }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(var(--sab) + 8px); border-top: .5px solid var(--line); background: var(--bg); }
.game-btn { width: 38px; height: 38px; background: var(--bg2); flex: none; }
.input-wrap { flex: 1; display: flex; border-radius: 20px; padding: 0 4px 0 14px; border: 1px solid var(--line-strong); background: transparent; min-height: 38px; }
.input-wrap textarea { flex: 1; resize: none; border: 0; background: transparent; outline: none; padding: 8px 0; max-height: 120px; line-height: 1.3; font-size: 17px; }
.send-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex: none; transition: transform .15s var(--spring), opacity .2s; }
.send-btn:disabled { opacity: .25; transform: scale(.9); }

/* game bubbles */
.gbubble { width: 232px; border-radius: 20px; overflow: hidden; background: var(--them); text-align: left; animation: pop .3s var(--spring); transition: transform .15s; }
.gbubble:active { transform: scale(.97); }
.mine .gbubble { border-bottom-right-radius: 6px; }
.theirs .gbubble { border-bottom-left-radius: 6px; }
.g-snap { aspect-ratio: 1 / .82; display: grid; place-items: center; padding: 12px; background: var(--bg2); border-bottom: .5px solid var(--line); }
:root[data-theme="dark"] .g-snap { background: #111; }
.g-snap svg, .g-snap .snap { width: 100%; height: 100%; }
.snap-ph svg { width: 70px; height: 70px; opacity: .6; }
.g-cap { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--card); }
.mine .g-cap { background: var(--me); color: var(--me-fg); }
.mine .g-cap small { color: inherit; opacity: .7; }
.g-art { width: 34px; height: 34px; flex: none; }
.g-art svg { width: 100%; height: 100%; }
.g-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.g-txt b { font-size: 15px; font-weight: 700; }
.g-txt small { font-size: 13px; color: var(--muted); }
.g-go { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--online); color: #fff; }
.gbubble.hot { box-shadow: 0 0 0 2px var(--online); }
.rbubble { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); animation: pop .35s var(--spring); }
.rbubble.won { background: var(--fg); color: var(--bg); border-color: transparent; }
.rbubble.won small { color: inherit; opacity: .7; }
.rbubble .g-art { width: 40px; height: 40px; }

/* sheets */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s; z-index: 20; }
.scrim.in { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 560px; max-height: 92%; background: var(--bg); border-radius: 14px 14px 0 0; z-index: 21; display: flex; flex-direction: column; transform: translateY(105%); transition: transform .42s var(--spring); box-shadow: var(--shadow); }
:root[data-theme="light"] .sheet:not(.full) { background: #fff; }
.sheet.in { transform: none; }
.sheet.closing { transition: transform .32s var(--ease); }
.sheet.dragging { transition: none; }
.sheet.full { top: 0; max-height: none; border-radius: 0; padding-top: var(--sat); }
.sheet.compact .sheet-body { padding-bottom: calc(var(--sab) + 22px); }
.sheet-head { flex: none; touch-action: none; }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 7px auto 0; }
.sheet.full .grabber { display: none; }
.sheet-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 4px 6px; }
.sheet-bar h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.sheet-body { overflow-y: auto; padding: 4px 0 calc(var(--sab) + 18px); flex: 1; -webkit-overflow-scrolling: touch; }
.sheet-body > .form { padding: 8px 16px; }
.sheet .list { margin: 0 12px; }
.confirm-text { text-align: center; font-size: 17px; margin: 6px 24px 0; }
.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; padding: 10px 16px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-align: center; }
.pick-art { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: transform .15s var(--spring); }
.pick-art svg { width: 100%; height: 100%; }
.pick:active .pick-art { transform: scale(.9); }

/* toasts & banner */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--sab) + 84px); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 50; pointer-events: none; }
.toast { background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; max-width: 88%; text-align: center; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .25s, transform .3s var(--spring); }
.toast.error { background: var(--danger); color: #fff; }
.toast.in { opacity: 1; transform: none; }
.banner { position: fixed; top: calc(var(--sat) + 8px); left: 50%; width: min(540px, calc(100% - 16px)); transform: translate(-50%, -140%); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow); z-index: 60; text-align: left; transition: transform .45s var(--spring); }
.banner.in { transform: translate(-50%, 0); }
.banner div { display: flex; flex-direction: column; min-width: 0; }
.banner b { font-size: 15px; } .banner span { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* game sheet chrome */
.game-sheet .sheet-body { display: flex; flex-direction: column; padding-left: 12px; padding-right: 12px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 2px 12px; }
.vs-mid { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .08em; }
.pl { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 16px; border: 1.5px solid transparent; min-width: 0; transition: border-color .2s, background .2s; }
.pl.p1 { flex-direction: row-reverse; text-align: right; padding: 6px 6px 6px 10px; }
.pl.on { border-color: var(--fg); background: var(--bg2); }
.pl-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pl-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-txt small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.pl.p1 .pl-txt small { justify-content: flex-end; flex-direction: row-reverse; }
.pl em { font-style: normal; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.mk svg { width: 14px; height: 14px; }
.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; width: 100%; }
.stage > * { max-width: 100%; }
.stage > .c4, .stage > .filler, .stage > .sea, .stage > .pool, .stage > .dots, .stage > .wh { width: 100%; }
.g-status { text-align: center; padding: 14px 0 4px; min-height: 60px; }
.g-status p { margin: 0; color: var(--muted); font-weight: 600; }
.g-status .your-turn { color: var(--fg); font-size: 18px; font-weight: 800; }
.over b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; display: block; animation: pop .4s var(--spring); }
.over small { display: block; color: var(--muted); margin-top: 2px; }
.over .row-btns { margin-top: 12px; }
.snap { width: 100%; height: auto; }

/* tic tac toe */
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; width: min(100%, 340px); margin: 0 auto; aspect-ratio: 1; }
.ttt-cell { background: var(--bg2); border-radius: 18px; display: grid; place-items: center; transition: transform .12s, background .2s; }
.ttt-cell:not(:disabled):active { transform: scale(.94); }
.ttt-cell span { width: 64%; height: 64%; display: block; }
.ttt-cell span svg { width: 100%; height: 100%; }
.ttt-cell.pop span { animation: pop .3s var(--spring); }
.ttt-cell.win { background: var(--fg); }
.ttt-cell.win span { color: var(--bg) !important; }

/* connect 4 */
.c4 { display: flex; justify-content: center; }
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px; background: #1546c9; border-radius: 18px; width: min(100%, 380px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.c4-col { display: grid; grid-template-rows: repeat(6, 1fr); gap: 4px; border-radius: 10px; padding: 2px 0; }
.c4-col:not(:disabled):hover, .c4-col:not(:disabled):active { background: rgba(255,255,255,.12); }
.c4-slot { aspect-ratio: 1; border-radius: 50%; background: rgba(0,0,0,.35); position: relative; box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }
.c4-disc { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.c4-disc.drop { animation: drop .45s cubic-bezier(.4,0,.6,1.4); }
.c4-disc.win { box-shadow: 0 0 0 3px #fff, inset 0 -3px 0 rgba(0,0,0,.2); }
@keyframes drop { from { transform: translateY(calc(var(--r) * -112% - 112%)); } }

/* dots */
.dots { max-width: 360px; margin: 0 auto; }
.dots-svg { width: 100%; height: auto; }
.dots .ln { cursor: pointer; }
.dots .ln:hover .ln-ghost { stroke: var(--muted); }
.dots.locked .ln { pointer-events: none; }
.dots.locked .ln-ghost { opacity: .5; }
.ln-new { animation: lnflash .6s; }
@keyframes lnflash { 0% { opacity: .2; } }

/* filler */
.filler { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fl-grid { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 360px); border-radius: 12px; overflow: hidden; }
.fl-grid i { aspect-ratio: 1; transition: background .3s; }
.fl-grid i.o0 { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.fl-grid i.o1 { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35); }
.fl-pick { display: flex; gap: 10px; justify-content: center; }
.fl-sw { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .15s, opacity .2s; }
.fl-sw:disabled { opacity: .2; transform: scale(.85); }
.fl-sw:not(:disabled):active { transform: scale(.9); }

/* sea battle */
.sea { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sea-note { margin: 4px 0; color: var(--muted); font-weight: 600; }
.sea-label { width: min(100%, 340px); display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sea-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: #0b2545; padding: 4px; border-radius: 12px; }
.sea-grid.big { width: min(100%, 340px); }
.sea-grid.small { width: min(60%, 200px); }
.sea-grid > * { aspect-ratio: 1; background: #13315c; border-radius: 3px; position: relative; display: block; }
.sea-grid.live button:not(:disabled):active { background: #1f4b85; }
.sea-grid .ship { background: #94a3b8; }
.sea-grid .ship.sunk { background: #64748b; }
.sea-grid .hit::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: #ff453a; box-shadow: 0 0 8px #ff453a; }
.sea-grid .miss::after { content: ''; position: absolute; inset: 38%; border-radius: 50%; background: #7dd3fc; opacity: .8; }
.sea-grid .last { outline: 2px solid #fff; outline-offset: -2px; }
.row-btns .btn { min-width: 110px; }
.sea .row-btns { margin-top: 8px; }

/* word hunt */
.wh { max-width: 360px; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.wh-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.wh-intro .snap { width: 180px; margin-bottom: 10px; }
.wh-intro h3 { margin: 4px 0; } .wh-intro p { margin: 0 0 16px; color: var(--muted); }
.wh-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wh-time { font: 800 26px/1 ui-rounded, system-ui; font-variant-numeric: tabular-nums; }
.wh-time.low { color: var(--danger); }
.wh-score { font: 800 26px/1 ui-rounded, system-ui; text-align: right; }
.wh-score small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.wh-word { text-align: center; height: 38px; font: 800 24px/38px ui-rounded, system-ui; letter-spacing: .06em; border-radius: 12px; margin-bottom: 10px; }
.wh-word.ok { background: #30d158; color: #fff; } .wh-word.dup { background: #ffd60a; color: #000; }
.wh-word.flash { animation: pop .3s var(--spring); }
.wh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #f2c14e; padding: 12px; border-radius: 20px; }
.wh-tile { aspect-ratio: 1; display: grid; place-items: center; background: #fff8e1; color: #5c3b00; border-radius: 14px; font: 800 32px/1 ui-rounded, system-ui; box-shadow: 0 4px 0 #c99a2e; transition: transform .1s, background .1s; }
.wh-tile.sel { background: #fff; transform: scale(.92); box-shadow: 0 2px 0 #c99a2e, 0 0 0 3px #5c3b00; }
.wh-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wh-col { background: var(--bg2); border-radius: 14px; padding: 10px 12px; }
.wh-col h4 { margin: 0 0 6px; font-size: 15px; }
.wh-col ul { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
.wh-col li { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; border-bottom: .5px solid var(--line); }
.wh-col li b { color: var(--muted); font-weight: 600; }

/* pool */
.pool { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pool-info { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pi { padding: 6px 10px; border-radius: 12px; background: var(--bg2); border: 1.5px solid transparent; }
.pi.on { border-color: var(--fg); }
.pi.r { text-align: right; }
.pi b { font-size: 14px; } .pi small { display: block; font-size: 12px; color: var(--muted); }
.tray { display: flex; gap: 3px; margin-top: 3px; min-height: 12px; flex-wrap: wrap; }
.pi.r .tray { justify-content: flex-end; }
.pb { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; }
.pb.st { background: radial-gradient(circle, var(--c) 45%, #f8f8f4 47%); }
.pb.in { opacity: .2; }
.pool-wrap { position: relative; display: flex; justify-content: center; width: 100%; }
.pool-cv { touch-action: none; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.pool-power { position: absolute; right: 0; top: 10%; bottom: 10%; width: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.pool-power i { position: absolute; inset: 0; background: linear-gradient(to top, #30d158, #ffd60a, #ff453a); transform: scaleY(0); transform-origin: bottom; }
.pool-hint { margin: 0; text-align: center; color: var(--muted); font-size: 13px; min-height: 18px; }
.pool-stage { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* message ticks */
.bubble .meta { display: inline-flex; align-items: center; float: right; margin: 6px -5px -4px 8px; height: 14px; line-height: 0; }
.mtick { display: inline-flex; align-items: center; color: currentColor; opacity: .6; }
.mtick.sent { opacity: .38; }
.mtick.seen { color: #34b7f1; opacity: 1; }
.mtick.sending { opacity: .55; }
.mtick.failed { opacity: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font: 800 12px/18px system-ui; justify-content: center; }
.mrow.failed .bubble { opacity: .7; }
.gtick { align-self: flex-end; color: var(--muted); margin-left: -4px; }
.gtick .mtick { opacity: 1; } .gtick .mtick.sent { opacity: .5; } .gtick .mtick.seen { color: #34b7f1; }
.chip-av { position: absolute; left: 30px; bottom: 4px; line-height: 0; }
.chip-av .av { box-shadow: 0 0 0 2px var(--bg2); }
.strip.compact .chip-av { left: 24px; bottom: 2px; }
.rb-av { line-height: 0; }
.wh-level { display: inline-block; font: 800 12px/1 system-ui; letter-spacing: .06em; text-transform: uppercase; background: #5c3b00; color: #fff8e1; padding: 5px 9px; border-radius: 999px; }
.wh-meta { display: flex; gap: 8px; justify-content: center; align-items: center; margin-bottom: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.wh-grid.n5 { grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px; }
.wh-grid.n5 .wh-tile { font-size: 26px; border-radius: 12px; }
.c4-board, .dots, .c4-col, .dots-svg { touch-action: manipulation; }
.c4-board.locked .c4-col { cursor: default; }
@media (hover: none) { .c4-col:not(:disabled):hover { background: transparent; } .dots .ln:hover .ln-ghost { stroke: var(--line-strong); } }
.box-x { pointer-events: none; }
.game-sheet:has(.filler-stage) .vs { display: none; }
.fl-hud { width: min(100%, 360px); display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; border: 1.5px solid transparent; }
.fl-hud.on { border-color: var(--fg); background: var(--bg2); }
.fl-hud .fl-name { flex: 1; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-hud .fl-name small { color: var(--muted); font-weight: 600; font-size: 12px; }
.fl-hud .fl-col { width: 16px; height: 16px; border-radius: 5px; }
.fl-hud b { font-size: 20px; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }
.filler { gap: 10px; }
.filler .fl-pick { margin-top: 6px; }

/* appearance picker */
.seg.appearance { margin: 0; }
.appearance-row { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

/* voice notes */
.composer { position: relative; }
.mic-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--fg); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.composer.has-mic:not(.has-text) .send-btn { display: none; }
.composer.has-text .mic-btn { display: none; }
.composer.recording .mic-btn { position: relative; z-index: 3; background: var(--danger); color: #fff; transform: scale(1.35); transition: transform .15s var(--spring); }
.composer.locked .mic-btn { display: none; }
.rec-ui { position: absolute; inset: 0 48px 0 0; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; background: var(--bg); z-index: 2; }
.composer.locked .rec-ui { right: 0; }
.rec-ui[hidden] { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; flex: none; }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 38px; }
.rec-wave { flex: 1; height: 28px; min-width: 40px; color: var(--danger); }
.rec-hint { color: var(--muted); font-size: 14px; white-space: nowrap; transform: translateX(var(--dx, 0)); transition: color .15s; }
.composer.cancelling .rec-hint { color: var(--danger); }
.rec-lock { position: absolute; right: -40px; bottom: 52px; width: 32px; height: 46px; border-radius: 16px; background: var(--bg2); color: var(--muted); display: grid; place-items: center; box-shadow: var(--shadow); }
.composer.locked .rec-lock, .rec-trash, .rec-send { display: none; }
.composer.locked .rec-trash { display: grid; place-items: center; width: 34px; height: 34px; color: var(--danger); flex: none; }
.composer.locked .rec-send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fg); color: var(--bg); flex: none; }
.composer.locked .rec-hint { display: none; }
.bubble.voice { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; min-width: 230px; white-space: normal; }
.vplay { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: currentColor; }
.vplay svg { color: var(--them); }
.mine .vplay svg { color: var(--me); }
.vwave { flex: 1; height: 32px; display: flex; align-items: center; gap: 1.5px; cursor: pointer; touch-action: none; }
.vwave i { flex: 1; min-width: 1.5px; height: calc(var(--h) * 1px); max-height: 100%; border-radius: 2px; background: currentColor; opacity: .32; }
.vwave i.on { opacity: 1; }
.vside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.vrate { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; opacity: .75; }
.bubble.voice .meta { float: none; margin: 0; }
.bubble.voice.loading .vplay { animation: blink 0.9s infinite; }

/* 8 ball v2 */
.game-sheet:has(.pool-stage) .vs { display: none; }
.stage > .pool8 { width: 100%; }
.pool8 { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; position: relative; }
.p8-hud { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p8-pl { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: var(--bg2); border: 1.5px solid transparent; min-width: 0; }
.p8-pl.on { border-color: var(--fg); }
.p8-pl.r { flex-direction: row-reverse; text-align: right; }
.p8-pt { min-width: 0; flex: 1; }
.p8-pt b { font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p8-pl.r .tray { justify-content: flex-end; }
.p8-open { font-size: 11px; color: var(--muted); }
.p8-pl .pb { width: 15px; height: 15px; position: relative; box-shadow: inset -1.5px -2px 2px rgba(0,0,0,.35), inset 1px 1px 2px rgba(255,255,255,.35); }
.p8-pl .pb b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 7px/1 system-ui; color: #111; }
.p8-pl .pb b::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fbfaf5; z-index: -1; }
.p8-pl .pb { isolation: isolate; }
.p8-main { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.p8-table { display: flex; justify-content: center; flex: 1; min-width: 0; }
.p8-table .pool-cv { border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.35); touch-action: none; }
.p8-power, .p8-side { width: 34px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.p8-power small, .p8-side small { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.p8-ptrack { position: relative; width: 22px; border-radius: 11px; background: linear-gradient(#222, #3a3a3a); box-shadow: inset 0 2px 5px rgba(0,0,0,.6); overflow: hidden; }
.p8-pfill { position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; border-radius: 8px; background: linear-gradient(#30d158, #ffd60a 55%, #ff453a); transform: scaleY(0); transform-origin: top; }
.p8-pcue { position: absolute; left: 50%; top: 4px; width: 8px; height: 70%; margin-left: -4px; border-radius: 4px 4px 2px 2px; background: linear-gradient(to bottom, #3b6fd8 0 4px, #f7f5ee 4px 10px, #e7c48a 10px 62%, #3a1a0a 62%); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.p8-power.off { opacity: .45; }
.p8-spin { width: 34px; height: 34px; border-radius: 50%; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.p8-spin canvas { width: 34px; height: 34px; display: block; border-radius: 50%; }
.p8-spin:disabled { opacity: .45; }
.p8-spinpad { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 16px; color: #fff; }
.p8-spinpad[hidden] { display: none; }
.p8-spinball { width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff, #ecebe4 60%, #b8b6aa); position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.5); cursor: crosshair; touch-action: none; }
.p8-spinball::before, .p8-spinball::after { content: ''; position: absolute; background: rgba(0,0,0,.12); }
.p8-spinball::before { left: 50%; top: 8%; bottom: 8%; width: 1.5px; }
.p8-spinball::after { top: 50%; left: 8%; right: 8%; height: 1.5px; }
.p8-spinball i { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.p8-spinpad p { margin: 0; font-weight: 600; }
.p8-spinpad .btn { min-width: 140px; }
.p8-spinpad .btn.ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.p8-spinpad .btn.ghost { background: transparent; }

/* darts */
.game-sheet:has(.darts-stage) .vs { display: none; }
.stage > .darts { width: 100%; }
.darts { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.dt-hud { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dt-pl { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--bg2); border: 1.5px solid transparent; min-width: 0; }
.dt-pl.on { border-color: var(--fg); }
.dt-pl.r { flex-direction: row-reverse; text-align: right; padding: 6px 6px 6px 10px; }
.dt-pt { flex: 1; min-width: 0; }
.dt-pt b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-pl em { font-style: normal; font: 800 24px/1 ui-rounded, system-ui; font-variant-numeric: tabular-nums; }
.dt-darts { display: inline-flex; gap: 4px; margin-top: 3px; }
.dt-darts i { width: 7px; height: 18px; border-radius: 1px 1px 3px 3px; background: linear-gradient(to bottom, #ccc 0 30%, #777 30% 60%, #ff375f 60%); clip-path: polygon(50% 0, 70% 28%, 70% 60%, 100% 100%, 0 100%, 30% 60%, 30% 28%); }
.dt-darts i.used { opacity: .2; }
.dt-darts i.idle { opacity: .35; }
.dt-pl.r .dt-darts { justify-content: flex-end; }
.dt-stage { position: relative; width: 100%; border-radius: 18px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.dt-cv { display: block; touch-action: none; }
.dt-pop { position: absolute; transform: translate(-50%, -100%) scale(.6); opacity: 0; pointer-events: none; font: 900 26px/1 ui-rounded, system-ui; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(0,0,0,.6); white-space: nowrap; transition: transform .25s var(--spring), opacity .2s; }
.dt-pop.show { opacity: 1; transform: translate(-50%, -130%) scale(1); }
.dt-pop.triple, .dt-pop.bull { color: #ffd60a; font-size: 32px; }
.dt-pop.double { color: #7cf2a0; }
.dt-pop.miss { color: #ff9f9f; }
.dt-hint { margin: 0; text-align: center; color: var(--muted); font-size: 13px; min-height: 18px; }

/* ---- bot difficulty */
.seg.difficulty { grid-template-columns: repeat(3, 1fr); }
.chat-head .diff-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 6px 8px 2px; }
.chat-head .diff-row > span { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg.difficulty.compact { flex: 1; padding: 2px; border-radius: 10px; }
.seg.difficulty.compact button { height: 30px; font-size: 14px; border-radius: 8px; }
.diff-pick { display: flex; flex-direction: column; gap: 8px; padding: 6px 16px 0; }
.diff-pick b { font-size: 14px; color: var(--muted); font-weight: 600; }
.g-status .bot-think { display: inline-flex; align-items: center; gap: 2px; }
.g-status .bot-think i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: 2px; animation: sqthink 1.2s infinite ease-in-out; }
.g-status .bot-think i:nth-child(2) { animation-delay: .2s; } .g-status .bot-think i:nth-child(3) { animation-delay: .4s; }
.g-status small.muted { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
@keyframes sqthink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .g-status .bot-think i { animation: none; opacity: .6; } }

/* ---- bot quick replies */
.qrs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 12px 10px 12px; }
.qr { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line-strong); background: var(--card); color: var(--fg); font-weight: 600; font-size: 14px; }
.qr:active { transform: scale(.97); background: var(--bg2); }

/* ---- user search */
.af-results:empty { display: none; }
.af-results .sr-list { margin: 4px 0 0; max-height: 360px; overflow-y: auto; }
.af-results .row.sr { padding-top: 8px; padding-bottom: 8px; }
.sr-state { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 6px; white-space: nowrap; }
.sr-note { margin: 6px 2px 0; font-size: 14px; }

/* message status ticks: bare strokes only, never a circle/pill (all bubble types, both themes) */
.mtick, .mtick.sent, .mtick.delivered, .mtick.seen, .mtick.sending, .gtick, .gtick .mtick { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: auto; height: auto; padding: 0; }
.mtick svg { display: block; }
.mtick.failed { background: var(--danger) !important; border-radius: 50% !important; width: 18px; height: 18px; } /* the retry "!" stays a red dot */

/* message times (WhatsApp-style, bottom-right) + day separators */
.bubble .meta { gap: 3px; height: 15px; margin: 7px -4px -5px 10px; }
.bubble .meta time { font-size: 11px; line-height: 15px; opacity: .62; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrow.mine .bubble .meta time { opacity: .7; }
.bubble.voice .meta { align-self: flex-end; display: inline-flex; gap: 3px; margin-left: 6px; }
.gmeta { display: inline-flex; align-items: center; gap: 3px; align-self: flex-end; margin: 0 2px 2px 6px; color: var(--muted); }
.gmeta time { font-size: 11px; white-space: nowrap; }
.mrow.theirs .gmeta { order: 2; }
.stamp.day { width: fit-content; margin: 14px auto 8px; padding: 4px 10px; border-radius: 8px; background: var(--bg2); color: var(--muted); font-size: 12px; font-weight: 600; }

/* ---- active games strip (cards) */
.strip { padding: 4px 0 0; margin-bottom: 14px; }
.strip .sec { margin: 14px 18px 8px; }
.strip-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 18px 2px; scroll-padding: 0 18px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip-row::-webkit-scrollbar { display: none; }
.agc { flex: none; position: relative; display: flex; align-items: center; gap: 10px; height: 64px; max-width: 240px; padding: 0 16px 0 10px; border-radius: 16px; background: var(--bg2); border: 0; text-align: left; scroll-snap-align: start; color: var(--fg); }
.agc-icon { position: relative; width: 44px; height: 44px; flex: none; }
.agc-icon > svg { width: 44px; height: 44px; border-radius: 10px; display: block; }
.agc-av { position: absolute; right: -5px; bottom: -4px; line-height: 0; }
.agc-av .av { box-shadow: 0 0 0 2px var(--bg2); }
.agc-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.agc-txt b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-txt small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-txt small em { font-style: normal; font-weight: 700; color: var(--online); }
.agc-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--online); }
.strip.compact { padding: 8px 0; margin-bottom: 0; border-bottom: .5px solid var(--line); }
.strip.compact .agc { height: 52px; padding: 0 14px 0 8px; }
.strip.compact .agc-icon, .strip.compact .agc-icon > svg { width: 36px; height: 36px; }
.agc-txt small { display: flex; gap: 4px; min-width: 0; }
.agc-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.agc-sep, .agc-st { flex: none; }
.agc.mine { padding-right: 22px; }

/* push notifications */
.push-row { align-items: center; gap: 12px; }
.push-row .btn { flex: none; }
.push-help .steps, .push-ask { line-height: 1.45; }
.push-help .steps { padding-left: 1.2em; margin: 10px 0 14px; }
.push-help .steps li { margin: 6px 0; }
.push-ask p { margin: 0 0 14px; }
.push-ask .row-btns { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.gbubble.upd .g-cap { border-top: 0; }
/* group roles + system lines */
.role-badge { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--line, rgba(127,127,127,.18)); color: var(--fg); margin-left: 8px; }
.role-badge.owner { background: var(--fg); color: var(--bg); }
.mrow.sys { justify-content: center; margin: 8px 0; }
.sysline { font-size: 12.5px; color: var(--muted, #8e8e93); text-align: center; max-width: 80%; line-height: 1.35; }
.mp-pad { padding: 0 12px; }

/* ---------- Whot! ---------- */
:root { --p2: #30d158; --p3: #ff9f0a; --whot: #7a1220; }
.vs.vs-multi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; }
.vs.vs-multi .pl { min-width: 0; }
.whot { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 420px; padding: 4px 0 8px; user-select: none; -webkit-user-select: none; }
.w-opps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.w-opp { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--bg2); min-width: 0; flex: 1 1 0; max-width: 220px; border: 2px solid transparent; }
.w-opp.on { border-color: var(--fg); }
.w-opp .av { grid-row: span 2; }
.w-oname { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-opp em { font-style: normal; font-size: 12px; color: var(--muted); grid-column: 2; }
.w-back { display: none; }
.w-table { display: flex; justify-content: center; align-items: center; gap: 22px; flex: 1; min-height: 150px; }
.w-market { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--muted); font: inherit; }
.w-market small { font-size: 12px; }
.w-market.hot .wcard { box-shadow: 0 0 0 3px var(--fg); animation: wpulse 1.2s ease-in-out infinite; }
@keyframes wpulse { 50% { transform: translateY(-3px); } }
.w-pile { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.w-pile .wcard { --cw: 84px; }
.w-want { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--fg); color: var(--bg); }
.w-want .wsh { width: 14px; height: 14px; fill: currentColor; }
.w-note { min-height: 20px; text-align: center; font-size: 14px; color: var(--fg2); padding: 0 12px; }
.wcard { --cw: 62px; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--cw); height: calc(var(--cw) * 1.42); border-radius: calc(var(--cw) * .12); background: #fff; color: var(--whot); border: 1px solid rgba(0,0,0,.14); box-shadow: 0 2px 6px rgba(0,0,0,.18); flex: none; }
.wcard .wn.tl { top: 6%; left: 9%; } .wcard .wsh.big { width: 52%; height: 52%; fill: var(--whot); }
.wcard.w-wild .wmid { font-weight: 900; font-size: calc(var(--cw) * .22); letter-spacing: .02em; transform: rotate(-20deg); }
.wcard.back { background: var(--whot); border-color: rgba(255,255,255,.2); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 9px); }
.wcard.back::after { content: 'WHOT'; color: #fff; font-weight: 900; font-size: 13px; transform: rotate(-20deg); }
.w-hand { padding: 0 8px; }
.w-c { background: none; border: 0; padding: 0; transition: transform .15s; }
.w-c:disabled .wcard { filter: saturate(.85) brightness(.95); }
.w-ask { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 20px; background: var(--card); box-shadow: 0 10px 40px rgba(0,0,0,.35); width: max-content; max-width: calc(100% - 16px); }
.w-ask > div { flex-wrap: wrap; justify-content: center; }
.w-ask > div { display: flex; gap: 8px; }
.w-ask [data-want] { width: 52px; height: 52px; border-radius: 14px; border: 0; background: var(--bg2); display: grid; place-items: center; }
.w-ask [data-want] .wsh { width: 28px; height: 28px; fill: var(--whot); }
:root[data-theme="dark"] .w-ask [data-want] .wsh { fill: #ff6b81; }
.seg.seats { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.seg.seats button { padding: 10px 14px; }

/* Whot hand v2: per-shape tints, corner index (number over shape), fanned rows, 2 rows past 8 cards, view-all sheet */
.wcard { --sc: var(--whot); border-color: color-mix(in srgb, var(--whot) 45%, transparent); } /* classic Whot: wine on white, no per-shape tints */
.wcard { color: var(--sc, var(--whot)); }
.wcard .wsh.big { fill: var(--sc, var(--whot)); opacity: .92; }
.wcard .wix { position: absolute; top: 5%; left: 6%; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; width: 28px; }
.wcard .wix b { font-size: calc(var(--cw) * .25); font-weight: 900; letter-spacing: -.02em; }
.wcard .wix .wsh.ix { width: calc(var(--cw) * .22); height: calc(var(--cw) * .22); fill: var(--sc, var(--whot)); }
.wcard .wix .ww { font-style: normal; font-weight: 900; font-size: calc(var(--cw) * .2); }
.wcard .wix.br { top: auto; left: auto; bottom: 5%; right: 6%; transform: rotate(180deg); }
.w-pile .wcard .wix.br, .w-fan .wcard .wix.br { opacity: .9; }
.w-hbar { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 4px; font-size: 13px; color: var(--muted); }
.w-cnt { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--fg); color: var(--bg); font-size: 12px; }
.w-view { border: 0; background: var(--bg2); color: var(--fg); font: 600 13px system-ui; padding: 6px 12px; border-radius: 14px; }
.w-rows { display: flex; flex-direction: column; }
.w-row { overflow: visible; padding: 16px 2px 2px; }
.w-row + .w-row { margin-top: calc(var(--hw) * -.62); }
.w-row.scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.w-row.scroll::-webkit-scrollbar { display: none; }
.w-row.scroll.fr { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.w-row.scroll.fl { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); }
.w-row.scroll.fl.fr { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.w-fan { display: flex; justify-content: center; width: max-content; min-width: 100%; }
.w-fan .wcard { --cw: var(--hw, 62px); }
.w-c { transform: translateY(var(--arc, 0px)) rotate(var(--rot, 0deg)); transform-origin: 50% 120%; flex: none; }
.w-c.ok { transform: translateY(calc(var(--arc, 0px) - 8px)) rotate(var(--rot, 0deg)); }
.w-c.ok .wcard { box-shadow: 0 0 0 2px var(--sc, var(--whot)), 0 4px 10px rgba(0,0,0,.18); }
.w-c.sel, .w-c.ok:active { transform: translateY(calc(var(--arc, 0px) - 16px)) rotate(var(--rot, 0deg)); }
.w-ask { width: min(340px, 92%); }
.w-ask [data-want] { width: 58px; height: auto; padding: 8px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--fg); }
.w-ask [data-want] .wsh { width: 34px; height: 34px; }
.w-ask [data-want] .wsh { fill: var(--whot); }
.w-ask [data-want] { background: #fff; border: 1.5px solid color-mix(in srgb, var(--whot) 35%, transparent); } .w-ask [data-want] .wsh { fill: var(--whot) !important; } .w-ask [data-want] span { color: var(--whot); } .w-ask [data-want] small { color: #8a5a60; }
.w-ask [data-want] span { font: 700 12px system-ui; }
.w-ask [data-want] small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.w-all { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; border-radius: 18px; }
.w-all-in { width: 100%; max-height: 92%; overflow: auto; background: var(--card); border-radius: 20px 20px 0 0; padding: 12px 12px 16px; }
.w-all-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.w-grp small { display: block; color: var(--muted); margin: 8px 0 4px; font-weight: 600; }
.w-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.w-grid .w-c { transform: none; } .w-grid .w-c.ok { transform: translateY(-3px); }
.w-grid .wcard { --cw: 54px; }
/* iMessage-style: where a game was sent, once it has moved on */
.gstub { opacity: .6; margin: 2px 0; }
.gstub span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); padding: 2px 10px; border-radius: 10px; background: var(--bg2); }
.gstub svg { width: 14px; height: 14px; border-radius: 4px; }
/* haptics setting switch + tiny shake */
.hx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch { flex: none; width: 51px; height: 31px; border-radius: 16px; border: 0; padding: 2px; background: var(--line-strong, #c7c7cc); position: relative; transition: background .2s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s; }
.switch.on { background: #34c759; } .switch.on i { transform: translateX(20px); }
@keyframes sqshake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
@keyframes sqshake2 { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-4px,2px); } 40% { transform: translate(4px,-2px); } 60% { transform: translate(-3px,1px); } 80% { transform: translate(2px,0); } }
.sq-shake { animation: sqshake .3s ease-out; } .sq-shake2 { animation: sqshake2 .35s ease-out; }
.dt-pop.bust { color: #ff453a; font-size: 34px; letter-spacing: .04em; }
.dt-hint b { color: var(--fg); font-variant-numeric: tabular-nums; }
.dt-replay { border: 0; background: var(--bg2); color: var(--fg); font: 600 12px system-ui; padding: 3px 9px; border-radius: 10px; margin-left: 4px; }
.g-status .resign { display: block; margin: 8px auto 0; color: var(--muted); font-size: 13px; padding: 6px 14px; }
.seg.appearance { grid-template-columns: repeat(3, 1fr); } /* was 2 columns: "Dark" wrapped to a second row */

/* ---------- Ayo ---------- */
.stage > .ayo { width: 100%; }
.ayo { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 6px 0; user-select: none; -webkit-user-select: none; }
.ay-store { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--bg2); border: 2px solid transparent; transition: border-color .2s; }
.ay-store b { font-size: 20px; font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; }
.ay-store small { color: var(--muted); font-size: 12.5px; }
.ay-store.on { border-color: var(--fg); }
.ay-store.bump b { animation: ay-bump .5s ease; }
@keyframes ay-bump { 40% { transform: scale(1.45); color: #c98a2c; } }
.ay-board { width: min(100%, 420px); padding: 10px 9px; border-radius: 26px; position: relative;
  background: radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.18), transparent 60%),
    repeating-linear-gradient(92deg, rgba(60,28,8,.0) 0 7px, rgba(60,28,8,.13) 7px 9px, rgba(255,220,170,.05) 9px 15px),
    linear-gradient(180deg, #b4723c, #8a4f24 55%, #6e3c1a);
  box-shadow: inset 0 2px 0 rgba(255,230,190,.35), inset 0 -4px 0 rgba(0,0,0,.28), 0 10px 24px rgba(40,18,4,.35); }
.ay-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ay-mid { height: 8px; margin: 4px 10px; border-radius: 4px; background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(255,220,170,.12)); }
.ay-pit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border-radius: 50%; }
.ay-well { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #3a1e0b 0 45%, #4d2a12 70%, #6b3b1a 100%);
  box-shadow: inset 0 5px 9px rgba(0,0,0,.6), inset 0 -2px 2px rgba(255,210,160,.18), 0 1px 0 rgba(255,225,185,.25); transition: box-shadow .2s, transform .15s; }
.ay-pit em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #f6e7c8; text-shadow: 0 1px 1px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ay-row.opp .ay-pit { flex-direction: column-reverse; }
.ay-seed { position: absolute; width: 21%; aspect-ratio: 1.15; margin: -9.5% 0 0 -10.5%; border-radius: 50%; transform: rotate(var(--r));
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--t) 40%, color-mix(in srgb, var(--t) 70%, #6b4a22) 100%);
  box-shadow: 0 1.5px 1.5px rgba(0,0,0,.55); }
.ay-seed.pop { animation: ay-pop .22s ease-out; }
@keyframes ay-pop { 0% { transform: translateY(-60%) scale(1.25) rotate(var(--r)); opacity: .3; } 100% { transform: rotate(var(--r)); } }
.ay-pit.ok .ay-well { box-shadow: inset 0 5px 9px rgba(0,0,0,.6), 0 0 0 2.5px rgba(255,214,120,.85); cursor: pointer; }
.ay-pit.ok:active .ay-well { transform: scale(.94); }
.ay-pit.hot .ay-well { box-shadow: inset 0 5px 9px rgba(0,0,0,.6), 0 0 0 2.5px #fff; }
.ay-pit.from .ay-well { box-shadow: inset 0 5px 9px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.35); }
.ay-pit.cap .ay-well { box-shadow: inset 0 5px 9px rgba(0,0,0,.6), 0 0 0 3px #30d158; animation: ay-cap .5s ease; }
@keyframes ay-cap { 50% { transform: scale(1.08); } }
.ayo.locked .ay-pit { cursor: default; }
.ay-note { min-height: 20px; font-size: 13.5px; color: var(--muted); text-align: center; }
.game-sheet:has(.ayo-stage) .vs .pl em { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ay-seed.pop, .ay-pit.cap .ay-well, .ay-store.bump b { animation: none; } }

/* ---------- Mini Golf ---------- */
.stage > .golf { width: 100%; height: 100%; }
.golf { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.gf-hud { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.gf-hud b { color: var(--fg); font-size: 16px; }
.gf-wrap { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: center; }
.gf-cv { display: block; border-radius: 16px; touch-action: none; box-shadow: 0 0 0 4px #4a2c14, 0 10px 26px rgba(0,0,0,.28); }
.gf-toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.8); padding: 10px 18px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font-weight: 800; font-size: 18px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.6,1); }
.gf-toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gf-card { width: min(100%, 420px); }
.gf-cardbtn { width: 100%; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 12px; background: var(--bg2); font-size: 13px; }
.gf-cardbtn span { color: var(--muted); margin-right: auto; }
.gf-tbl { overflow-x: auto; margin-top: 6px; border-radius: 12px; background: var(--bg2); padding: 4px; }
.gf-tbl table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.gf-tbl th, .gf-tbl td { padding: 4px 2px; text-align: center; min-width: 20px; }
.gf-tbl th:first-child { text-align: left; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gf-tbl th i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.gf-tbl tr.par td, .gf-tbl tr.par th { color: var(--muted); font-weight: 500; }
.gf-tbl td.u { color: #30d158; font-weight: 700; } .gf-tbl td.o { color: #ff453a; }
.gf-tbl .now { background: rgba(127,127,127,.18); border-radius: 6px; }
.game-sheet:has(.golf-stage) .vs { margin-bottom: 2px; }

/* ---------- Draughts ---------- */
.stage > .dr { width: 100%; }
.dr { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; user-select: none; -webkit-user-select: none; }
.dr-banner { min-height: 30px; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: transparent; background: transparent; transition: background .2s, color .2s; }
.dr-banner.on { background: #ff9f0a; color: #1c1100; }
.dr-banner.nudge { animation: sq-nudge .35s; }
@keyframes sq-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.dr-board { position: relative; width: min(100%, 440px); aspect-ratio: 1; padding: 7px; border-radius: 12px; background: linear-gradient(180deg, #6e3f1d, #4d2a12); box-shadow: inset 0 1px 0 rgba(255,220,170,.35), 0 10px 24px rgba(40,18,4,.3); }
.dr-grid, .dr-fx { position: absolute; inset: 7px; }
.dr-grid { display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); border-radius: 4px; overflow: hidden; }
.dr-fx { pointer-events: none; }
.dr-sq { position: relative; display: grid; place-items: center; padding: 0; border-radius: 0; }
.dr-sq.lt { background: #efd9b4; }
.dr-sq.dk { background: #a4683a; background-image: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.08)); }
.dr-sq.last { background-color: #b8864f; }
.dr-sq.sel { background-color: #6f8f3a; }
.dr-sq.via { background-color: #7f9a4a; }
.dr-sq.to::after { content: ''; position: absolute; width: 34%; height: 34%; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 0 0 2px rgba(0,0,0,.18); animation: dr-dot .9s ease-in-out infinite alternate; }
@keyframes dr-dot { to { transform: scale(.78); opacity: .8; } }
.dr-pc { width: 80%; height: 80%; border-radius: 50%; display: grid; place-items: center; transition: opacity .25s, transform .25s; }
.dr-pc.lt { background: radial-gradient(circle at 38% 32%, #fff 0 18%, #f3ead6 45%, #d6c7a5 100%); box-shadow: 0 2px 0 #b7a682, 0 3px 4px rgba(0,0,0,.4), inset 0 0 0 2.5px rgba(160,140,100,.35); }
.dr-pc.dk { background: radial-gradient(circle at 38% 32%, #6a6a70 0 14%, #333338 45%, #1a1a1d 100%); box-shadow: 0 2px 0 #000, 0 3px 4px rgba(0,0,0,.45), inset 0 0 0 2.5px rgba(255,255,255,.08); }
.dr-crown { width: 58%; height: 58%; fill: #e0a800; filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.dr-pc.dk .dr-crown { fill: #ffd60a; }
.dr-pc.gone { opacity: 0; transform: scale(.4); }
.dr-pc.crowned { animation: dr-crown .6s cubic-bezier(.3,1.6,.6,1); }
@keyframes dr-crown { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } }
.dr-sq.mv .dr-pc { cursor: pointer; }
.dr-sq.must .dr-pc { box-shadow: 0 0 0 2.5px #ff9f0a, 0 3px 4px rgba(0,0,0,.4); animation: dr-must 1.1s ease-in-out infinite; }
@keyframes dr-must { 50% { box-shadow: 0 0 0 4px rgba(255,159,10,.55), 0 3px 4px rgba(0,0,0,.4); } }
.dr-sq.sel .dr-pc { transform: translateY(-2px) scale(1.06); }
.dr-grid.locked .dr-sq { cursor: default; }
.dr-fly { position: absolute; left: 0; top: 0; width: 10%; height: 10%; display: grid; place-items: center; transition: transform .2s cubic-bezier(.4,0,.2,1); z-index: 2; }
.dr-fly .dr-pc { transform: scale(1.08); box-shadow: 0 6px 10px rgba(0,0,0,.45); }
.dr-note { min-height: 20px; font-size: 13.5px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .dr-sq.to::after, .dr-sq.must .dr-pc, .dr-pc.crowned { animation: none; } }

/* edit / delete messages */
.mrow .bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform .18s var(--spring); }
.mrow .bubble.pressing { transform: scale(.96); }
.bubble.deleted { background: transparent !important; color: var(--muted, #8e8e93) !important; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); font-style: italic; }
.bubble.deleted .del-txt::before { content: '⊘ '; font-style: normal; }
.bubble .meta .edited { font-style: normal; font-size: 11px; line-height: 15px; opacity: .62; margin-right: 4px; }
.msg-peek { margin: 0 24px 14px; padding: 10px 14px; border-radius: 16px; background: var(--them); color: var(--them-fg); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow: hidden; }
.edit-ta { width: calc(100% - 48px); margin-left: 24px !important; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); background: var(--them); color: var(--them-fg); resize: none; margin-bottom: 14px; }
/* Anagrams */
.an-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; border-radius: 16px; background: var(--bg2); transition: background .15s; }
.an-slots.ok { background: #30d158; } .an-slots.dup { background: #ffd60a; }
.an-slot { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; border: 2px dashed var(--line); font: 800 26px/1 ui-rounded, system-ui; color: #5a3208; }
.an-slot.on { border: 0; background: #fff4dc; box-shadow: 0 3px 0 #c9944a; }
.an-msg { text-align: center; height: 28px; line-height: 28px; font-weight: 700; color: var(--muted); }
.an-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; background: #2f9e8f; padding: 12px; border-radius: 20px; }
.an-tile { aspect-ratio: 1; border: 0; border-radius: 12px; background: #fff4dc; color: #5a3208; font: 800 30px/1 ui-rounded, system-ui; box-shadow: 0 4px 0 #c9944a; transition: transform .08s, opacity .12s; touch-action: manipulation; }
.an-tile:active { transform: scale(.92); }
.an-tile.used { opacity: .25; box-shadow: none; }
.an-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; margin-top: 14px; }
.an-letters.small { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.an-letters.small span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #fff4dc; color: #5a3208; font: 800 18px/1 ui-rounded, system-ui; box-shadow: 0 2px 0 #c9944a; }