/* Table chat (src/chat/ChatPanel.js). One component dressed per game:
     .chat-g-whot      cream card paper, red ink, bubbles are little cards with corner shapes; mine is a red card back
     .chat-g-checkers  walnut and brass: bubbles are engraved brass plaques, mine a green board-square inlay; the button is a bottle cap
     .chat-g-pool      green felt under a cue-wood rail: round cue-ball bubbles, mine chalk blue, names wear a little pool ball
     .chat-g-ludo      the ivory board with its four colours: each speaker's bubble takes their seat colour, with dice-dot accents
   Closed, it is only a button in the table's header (never over the board) and a brief toast along the top edge that never takes a tap. */

.chat-slot{display:inline-flex}
.chat-slot:empty{display:none}
.chat-sr,.chat-live{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the header makes room for the button on small phones: "← Games" becomes "←", buttons a little narrower */
@media (max-width:430px){
  .top.has-chat .gl{display:none}
  .top.has-chat .tools{gap:6px}
  .top.has-chat .tools .btn{padding-left:11px;padding-right:11px}
  .top.has-chat>.btn.quiet{padding-left:8px;padding-right:8px}
}
@media (max-width:370px){.top.has-chat .tools .btn{padding-left:9px;padding-right:9px;font-size:13.5px}}
.bar.has-chat .title{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- the button ---------- */
.chat-fab{--cf-bg:rgba(255,255,255,.08);--cf-ink:var(--text);--cf-dot:#e5323a;--cf-ring:var(--felt-lo);
  position:relative;flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);border-radius:12px;background:var(--cf-bg);color:var(--cf-ink)}
.chat-fab>svg{width:22px;height:22px;fill:currentColor;position:relative;z-index:1}
.chat-fab>svg .d{fill:var(--cf-hole,var(--cf-bg))}
.chat-fab-n{position:absolute;z-index:2;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--cf-dot);color:#fff;font:700 11.5px/20px var(--body);text-align:center;box-shadow:0 0 0 2px var(--cf-ring),0 2px 6px rgba(0,0,0,.4)}
.chat-fab.unread .chat-fab-n{animation:chatpop .4s cubic-bezier(.2,.9,.3,1.5) both}
.chat-fab[aria-expanded="true"]{outline:2px solid var(--gold);outline-offset:2px}
.chat-fab:active{transform:scale(.95)}
@keyframes chatpop{from{transform:scale(.3)}}

/* ---------- the tray: a bottom sheet on phones, a drawer on the right when the screen is wide or a phone is sideways ---------- */
.chat-scrim{position:fixed;inset:0;z-index:13;background:rgba(0,10,5,.32)}
.chat-tray{
  --ct-bg:#10251a;--ct-ink:#f1f6ee;--ct-mute:#a5c7b3;--ct-line:rgba(255,255,255,.14);--ct-chip:rgba(255,255,255,.08);--ct-chip-ink:inherit;--ct-name:#ffe08a;
  --cb-r:14px;--cb-bg:#fff;--cb-ink:#1d140b;--cb-mine:#c8141c;--cb-mine-ink:#fff;--cs-bg:#fff;--cs-ink:#1d140b;--ct-field:rgba(0,0,0,.25);--ct-field-ink:inherit;
  position:fixed;z-index:14;left:0;right:0;bottom:var(--kb,0px);margin:0 auto;width:min(100%,560px);
  height:min(66vh,calc(var(--vvh,100vh) - 72px));min-height:min(300px,calc(var(--vvh,100vh) - 24px));
  display:flex;flex-direction:column;border-radius:22px 22px 0 0;overflow:hidden;
  background:var(--ct-bg);color:var(--ct-ink);box-shadow:0 -12px 40px rgba(0,0,0,.55);
  padding-bottom:max(6px,var(--safe-b));transform:translateY(102%);transition:transform .24s cubic-bezier(.2,.8,.3,1);font-family:var(--body)}
.chat-tray.on{transform:none}
/* the edge band (Whot ink, Pool rail, Ludo's four colours): one even ring drawn over the tray's own rounded outline, so it bends
   round the corners at full thickness instead of stopping short (border-image ignores border-radius; a one-sided border tapers).
   Sheet: top and both sides. Drawer: top, left and bottom. A game sets --ring (any background) and --ring-w. */
.chat-tray{padding-top:var(--ring-w,0px);padding-left:var(--ring-w,0px);padding-right:var(--ring-w,0px)}
.chat-tray::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  border:var(--ring-w,0px) solid transparent;border-bottom-width:0;background:var(--ring,none) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0)}
.chat-tray:focus{outline:none}
@media (min-width:900px),(orientation:landscape) and (max-height:520px){
  .chat-tray{left:auto;right:0;top:0;margin:0;width:min(380px,48vw);height:auto;min-height:0;border-radius:22px 0 0 22px;transform:translateX(102%);padding-bottom:calc(max(6px,var(--safe-b)) + var(--ring-w,0px));padding-right:var(--safe-r)}
  .chat-tray::after{border-width:var(--ring-w,0px) 0 var(--ring-w,0px) var(--ring-w,0px)}
  .chat-scrim{background:rgba(0,10,5,.12)}
}

.chat-top{position:relative;display:flex;align-items:center;gap:10px;padding:14px 10px 8px 16px;flex:none}
.chat-title{margin:0;flex:1;font:400 17px/1 var(--display);letter-spacing:.05em}
.chat-deco{display:flex;gap:4px;align-items:center}
.chat-deco i{display:block;width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.8}
.chat-x{width:42px;height:42px;flex:none;border-radius:12px;border:1px solid var(--ct-line);background:var(--ct-chip);color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.chat-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round}
.chat-mutes{flex:none;padding:0 16px 4px;font-size:12.5px;color:var(--ct-mute)}
.chat-mutes p{margin:0 0 4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chat-unmute{border:0;background:none;color:inherit;text-decoration:underline;font:700 12.5px var(--body);cursor:pointer;padding:4px 2px;min-height:28px}

.chat-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.chat-list{list-style:none;margin:0;padding:6px 14px 14px;overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
/* messages scrolling up melt into the notice instead of being sliced by it */
.chat-list{-webkit-mask:linear-gradient(transparent,#000 10px);mask:linear-gradient(transparent,#000 10px)}
.chat-list:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;border-radius:12px}
.chat-body{container-type:inline-size}
.chat-notice{flex:none;display:flex;align-items:center;justify-content:center;gap:0;margin:2px 10px 0;padding:3px 0 5px;font:500 11px/1.3 var(--body);color:var(--ct-mute);text-align:center;text-wrap:balance}
.chat-notice::before,.chat-notice::after{content:'';flex:1;min-width:10px;height:1px;background:var(--ct-line);display:none}
@container (min-width:440px){.chat-notice{gap:10px;margin:2px 14px 0;font-size:11.5px}.chat-notice::before,.chat-notice::after{display:block}}
.chat-empty{position:absolute;left:24px;right:24px;top:38%;margin:0;text-align:center;color:var(--ct-mute);font-size:13.5px;pointer-events:none}
.chat-jump{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:1;border:0;border-radius:999px;padding:8px 14px;min-height:36px;font:700 12.5px var(--body);cursor:pointer;background:var(--ct-ink);color:var(--ct-bg);box-shadow:0 6px 16px rgba(0,0,0,.35)}

/* a message */
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:84%;min-width:0}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-msg:not(.cont){margin-top:5px}
.chat-head{margin:0 2px 2px;display:flex;align-items:center;min-height:22px}
.chat-who{flex:none;border:0;background:none;color:var(--ct-name);padding:2px 4px;margin:0;min-height:24px;border-radius:7px;cursor:pointer;font:700 12px/1.2 var(--body);max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-who.me{cursor:default;opacity:.8}
button.chat-who:hover,button.chat-who[aria-expanded="true"]{text-decoration:underline}
.chat-bubble{position:relative;max-width:100%;padding:8px 12px 5px;border-radius:var(--cb-r);background:var(--cb-bg);color:var(--cb-ink);font-size:15px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.chat-msg.mine .chat-bubble{background:var(--cb-mine);color:var(--cb-mine-ink)}
.chat-text{display:block;unicode-bidi:plaintext}
.k-preset .chat-text{font-weight:700}
.chat-meta{display:flex;gap:6px;justify-content:flex-end;align-items:center;font-size:10.5px;line-height:1;opacity:.72;margin-top:3px;font-variant-numeric:tabular-nums}
.chat-flag{font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.k-sticker .chat-bubble{background:none!important;box-shadow:none!important;padding:2px 0 0;color:var(--ct-ink)!important}
.k-sticker .chat-bubble::before,.k-sticker .chat-bubble::after{display:none!important}
.k-sticker .chat-meta{justify-content:flex-start;padding-left:4px}
.mine.k-sticker .chat-meta{justify-content:flex-end}
.chat-sticker{display:block;width:96px;height:96px;
  filter:drop-shadow(1.6px 0 0 #fff) drop-shadow(-1.6px 0 0 #fff) drop-shadow(0 1.6px 0 #fff) drop-shadow(0 -1.6px 0 #fff) drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.chat-sticker svg{display:block;width:100%;height:100%}

/* the note line: slow down, reported, reconnecting */
.chat-note{flex:none;margin:0 12px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:600;max-height:0;overflow:hidden;transition:max-height .2s,padding .2s,margin .2s}
.chat-note.show{max-height:60px;padding:8px 12px;margin:4px 12px}
.chat-note[data-tone="warn"]{background:#ffe0b3;color:#5a2d00}
.chat-note[data-tone="good"]{background:#cdf3dc;color:#0b4024}
.chat-note[data-tone="off"]{background:rgba(0,0,0,.28);color:var(--ct-ink);border:1px dashed var(--ct-line)}

/* quick phrases: one line you can slide along */
.chat-presets{--pad:12px;--fl:0px;--fr:0px;flex:none;display:flex;gap:6px;overflow-x:auto;padding:6px 0 4px var(--pad);scroll-padding-inline:var(--pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  -webkit-mask:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
/* the end gap: engines differ on a flex scroller's trailing padding, so a spacer (plus the 6px gap before it) gives the same --pad */
.chat-presets::after{content:'';flex:0 0 calc(var(--pad) - 6px)}
.chat-presets.more-l{--fl:24px}.chat-presets.more-r{--fr:32px}
.chat-presets::-webkit-scrollbar{display:none}
.chat-chip{flex:none;scroll-snap-align:start;min-height:36px;padding:7px 13px;border-radius:999px;border:1px solid var(--ct-line);background:var(--ct-chip);color:var(--ct-chip-ink);font:600 13px/1.1 var(--body);white-space:nowrap;cursor:pointer}
.chat-chip:active,.chat-st:active,.chat-em:active{transform:scale(.94)}

/* emoji and stickers */
.chat-pane{flex:none;overflow-y:auto;overscroll-behavior:contain;margin:4px 10px 2px;padding:6px;border-radius:14px;background:var(--ct-chip);border:1px solid var(--ct-line)}
.chat-emoji{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:2px;max-height:min(168px,26vh)}
.chat-em{height:42px;border:0;border-radius:10px;background:none;font-size:24px;line-height:1;cursor:pointer;padding:0;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.chat-stk{max-height:min(258px,38vh);padding-top:0}
.chat-stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:4px}
/* skin tones for the people stickers: five swatches, light to deep, pinned above the stickers while they scroll */
.chat-tones{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:0;margin:0 -6px 4px;padding:0 6px;
  background:linear-gradient(var(--ct-chip),var(--ct-chip)),var(--ct-bg);border-bottom:1px solid var(--ct-line)}
.chat-tones-l{margin-right:auto;padding-left:4px;font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ct-mute)}
.chat-tone{flex:none;width:40px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px}
.chat-tone i{display:block;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.4),transparent 46%),linear-gradient(160deg,var(--sw) 55%,var(--sw2));
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.chat-tone[aria-checked="true"] i{transform:scale(1.12);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.28),0 0 0 2.5px var(--ct-bg),0 0 0 4.5px var(--ct-sel,var(--ct-name))}
.chat-tone:focus-visible{outline:2px solid var(--ct-sel,var(--ct-name));outline-offset:-2px}
.chat-tray.chat-g-ludo{--ct-sel:#2a1608}
.chat-tone:active i{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){.chat-tone i{transition:none}}
.chat-st{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;border-radius:12px;background:none;cursor:pointer;padding:6px 2px 4px;color:inherit}
.chat-st .chat-sticker{width:64px;height:64px}
.chat-st small{font:600 11px/1.1 var(--body);opacity:.85;text-align:center}
@media (hover:hover){.chat-em:hover,.chat-st:hover{background:var(--ct-chip)}}

/* typing */
.chat-form{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px 4px}
.chat-tg{flex:none;width:40px;height:44px;border-radius:12px;border:1px solid transparent;background:none;color:inherit;font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.chat-tg{color:var(--ct-icon,inherit)}
.chat-tg svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.chat-tg svg .d{fill:currentColor;stroke:none}
.chat-tg[aria-expanded="true"]{background:var(--ct-chip);border-color:var(--ct-line)}
.chat-field{position:relative;flex:1;min-width:0;display:block}
.chat-in{width:100%;min-height:44px;border-radius:14px;padding:10px 52px 10px 14px;font-size:16px;background:var(--ct-field);color:var(--ct-field-ink);border:1px solid var(--ct-line)}
.chat-in::placeholder{color:var(--ct-mute);opacity:.85}
.chat-count{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 10.5px/1 var(--body);color:var(--ct-mute);font-variant-numeric:tabular-nums;pointer-events:none}
.chat-count.near{color:#e5523a}
.chat-send{flex:none;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--cs-bg);color:var(--cs-ink);box-shadow:0 3px 0 rgba(0,0,0,.25);padding:0}
.chat-send svg{width:21px;height:21px;fill:currentColor;transform:translateX(-1px)}
.chat-send:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.chat-tray.off .chat-in,.chat-tray.off .chat-send,.chat-tray.off .chat-chip,.chat-tray.off .chat-st{opacity:.45;cursor:not-allowed}

/* the name menu */
.chat-menu{position:absolute;z-index:3;min-width:200px;max-width:calc(100% - 16px);padding:6px;border-radius:14px;background:#fff;color:#1d140b;box-shadow:0 12px 30px rgba(0,0,0,.45);display:flex;flex-direction:column}
.chat-menu-h{margin:2px 8px 6px;font:700 12px var(--body);color:#6b5a45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-menu button{min-height:42px;border:0;border-radius:10px;background:none;text-align:left;padding:8px 12px;font:600 14px var(--body);color:inherit;cursor:pointer}
.chat-menu button:hover,.chat-menu button:focus-visible{background:#f2ebdb}
.chat-menu button[data-menu="report"]:not(:disabled){color:#b0121a}
.chat-menu button:disabled{opacity:.55;cursor:default}

/* ---------- the toast: a short line along the top while the chat is closed. It never takes a tap. ---------- */
.chat-toast{position:fixed;z-index:15;top:max(8px,var(--safe-t));left:50%;transform:translate(-50%,-150%);opacity:0;pointer-events:none;max-width:min(340px,calc(100vw - 24px));transition:transform .26s cubic-bezier(.2,.9,.3,1.2),opacity .2s}
.chat-toast *{pointer-events:none}
.chat-toast.show{transform:translate(-50%,0);opacity:1}
.chat-toast-in{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 14px;border-radius:14px;background:#fff;color:#1d140b;box-shadow:0 8px 22px rgba(0,0,0,.45);font-size:13.5px;line-height:1.25}
.chat-toast-who{font-weight:700;white-space:nowrap;max-width:9em;overflow:hidden;text-overflow:ellipsis;flex:none}
.chat-toast-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-toast-st{display:block;width:34px;height:34px;flex:none}
.chat-toast-st svg{display:block;width:100%;height:100%}
.chat-toast .k-sticker .chat-toast-tx{opacity:.8;font-size:12.5px}

/* new lines come in with a little movement (each game its own) */
@media (prefers-reduced-motion:reduce){
  .chat-tray,.chat-toast,.chat-note{transition:none}
  .chat-msg.new,.chat-fab.unread .chat-fab-n{animation:none!important}
}

/* =================================================================================================== */
/* WHOT: cream card paper and red ink. Bubbles are small cards with a shape in two corners; mine is a red card back. */
.chat-fab.chat-g-whot{--cf-bg:var(--paper);--cf-ink:var(--ink);--cf-dot:var(--ink);border:0;border-radius:9px;width:40px;box-shadow:0 3px 0 #b9ad8b,0 6px 12px rgba(0,0,0,.35),inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px var(--ink)}
.chat-tray.chat-g-whot{--ct-bg:var(--paper);--ct-ink:#241a10;--ct-mute:#7c6a4c;--ct-line:rgba(120,90,40,.25);--ct-chip:rgba(200,20,28,.07);--ct-chip-ink:#8e0d13;--ct-name:#8e0d13;
  --cb-r:11px;--cb-bg:#fffdf6;--cb-ink:#241a10;--cb-mine:var(--ink);--cb-mine-ink:var(--paper);--cs-bg:var(--ink);--cs-ink:var(--paper);--ct-field:#fffdf6;--ct-field-ink:#241a10;
  background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.6),transparent 40%),repeating-radial-gradient(circle at 30% 40%,rgba(120,90,40,.035) 0 1px,transparent 1px 4px),var(--paper);
  --ring:var(--ink);--ring-w:5px;--ct-icon:var(--ink)}
.chat-g-whot .chat-title{color:var(--ink)}
.chat-g-whot .chat-notice{color:#7c6a4c}
.chat-g-whot .chat-notice::before,.chat-g-whot .chat-notice::after{height:0;border-top:1.5px dashed rgba(200,20,28,.3);background:none}
.chat-g-whot .chat-deco i{border-radius:0;background:var(--ink);opacity:1;-webkit-mask:var(--sh) center/contain no-repeat;mask:var(--sh) center/contain no-repeat}
.chat-g-whot .chat-deco i:nth-child(1){--sh:var(--shape-circle)}.chat-g-whot .chat-deco i:nth-child(2){--sh:var(--shape-triangle)}.chat-g-whot .chat-deco i:nth-child(3){--sh:var(--shape-cross)}.chat-g-whot .chat-deco i:nth-child(4){--sh:var(--shape-star)}
.chat-g-whot .chat-who{font:400 11px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase}
.chat-g-whot .chat-bubble{padding:9px 14px 6px 24px;box-shadow:0 2px 0 #d8ccad,0 4px 10px rgba(80,50,10,.18),inset 0 0 0 1px rgba(120,90,40,.18)}
.chat-g-whot .chat-bubble::before,.chat-g-whot .chat-bubble::after{content:'';position:absolute;width:10px;height:10px;background:var(--ink);-webkit-mask:var(--sh) center/contain no-repeat;mask:var(--sh) center/contain no-repeat}
.chat-g-whot .chat-bubble::before{left:8px;top:9px}
.chat-g-whot .chat-bubble::after{right:6px;bottom:-5px;transform:rotate(180deg);width:8px;height:8px;opacity:0}
.chat-g-whot .sh-circle{--sh:var(--shape-circle)}.chat-g-whot .sh-triangle{--sh:var(--shape-triangle)}.chat-g-whot .sh-cross{--sh:var(--shape-cross)}.chat-g-whot .sh-square{--sh:var(--shape-square)}.chat-g-whot .sh-star{--sh:var(--shape-star)}
.chat-g-whot .mine .chat-bubble{padding:9px 24px 6px 14px;background:repeating-linear-gradient(45deg,#c8141c 0 5px,#b70f17 5px 10px);box-shadow:0 2px 0 var(--ink-lo),0 4px 10px rgba(80,10,10,.25),inset 0 0 0 2px var(--ink),inset 0 0 0 3.5px rgba(251,244,226,.75)}
.chat-g-whot .mine .chat-bubble::before{left:auto;right:9px;background:var(--paper)}
.chat-g-whot .mine .chat-text{text-shadow:0 1px 0 rgba(0,0,0,.25)}
.chat-g-whot .chat-chip{border-radius:8px;border-color:rgba(200,20,28,.3);box-shadow:0 2px 0 rgba(200,20,28,.18)}
.chat-g-whot .chat-send{border-radius:10px;box-shadow:0 3px 0 var(--ink-lo),inset 0 0 0 2px var(--ink),inset 0 0 0 3.5px rgba(251,244,226,.6)}
.chat-g-whot .chat-x{border-color:rgba(200,20,28,.3);color:var(--ink)}
.chat-g-whot .chat-jump{background:var(--ink);color:var(--paper)}
.chat-g-whot .chat-note[data-tone="off"]{background:rgba(200,20,28,.06);color:#5b4d36}
.chat-toast.chat-g-whot .chat-toast-in{background:var(--paper);color:#241a10;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px var(--ink)}
.chat-toast.chat-g-whot .chat-toast-who{color:var(--ink);font:400 11.5px/1 var(--display);letter-spacing:.05em}
@media (prefers-reduced-motion:no-preference){.chat-g-whot .chat-msg.new{animation:chatdeal .38s cubic-bezier(.2,.9,.3,1.25) both}.chat-g-whot .chat-msg.mine.new{animation-name:chatdealm}}
@keyframes chatdeal{from{opacity:0;transform:translate(-18px,-10px) rotate(-7deg) scale(.92)}}
@keyframes chatdealm{from{opacity:0;transform:translate(18px,-10px) rotate(7deg) scale(.92)}}

/* =================================================================================================== */
/* CHECKERS: walnut and brass. Bubbles are engraved plaques with two pins; mine is a green board-square inlay. The button is a cap. */
.chat-fab.chat-g-checkers{--cf-bg:#b3151e;--cf-hole:#b3151e;--cf-ink:#fbe9d0;--cf-dot:#f4c542;border:0;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#ff6a6f 0 8%,#d42029 30%,#9c0f17 72%,#6d0a10),#b3151e;
  box-shadow:0 0 0 3px #7a0b11,0 0 0 4px rgba(255,255,255,.18),0 4px 8px rgba(0,0,0,.45)}
.chat-fab.chat-g-checkers::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#8a0d14 0 8deg,#c21c25 8deg 16deg);-webkit-mask:radial-gradient(circle,transparent 19px,#000 19.5px);mask:radial-gradient(circle,transparent 19px,#000 19.5px)}
.chat-fab.chat-g-checkers .chat-fab-n{color:#2a1d00}
.chat-tray.chat-g-checkers{--ct-bg:#3a2311;--ct-ink:#fbeedb;--ct-mute:#d9bf98;--ct-line:rgba(255,220,160,.2);--ct-chip:rgba(255,226,175,.1);--ct-chip-ink:#fbe7c2;--ct-name:#f3d58a;
  --cb-r:5px;--cb-bg:linear-gradient(180deg,#f8ecd0,#e6cf9f);--cb-ink:#3a240f;--cb-mine:linear-gradient(180deg,#1d6b47,#0f4a30);--cb-mine-ink:#f6ecd8;--cs-bg:radial-gradient(circle at 36% 30%,#ff6a6f 0 8%,#d42029 30%,#9c0f17 72%);--cs-ink:#fbe9d0;--ct-field:#24150a;--ct-field-ink:#fbeedb;
  background:
    repeating-linear-gradient(97deg,rgba(40,16,2,0) 0 3px,rgba(40,16,2,.16) 3px 4px,rgba(255,220,160,.05) 4px 6px,rgba(40,16,2,0) 6px 11px),
    repeating-linear-gradient(83deg,rgba(255,220,160,.04) 0 9px,rgba(40,16,2,.12) 9px 10px,transparent 10px 23px),
    linear-gradient(155deg,#8a5a30,#5e3818 45%,#3c220e);
  box-shadow:0 -12px 40px rgba(0,0,0,.55),inset 0 1.5px 0 rgba(255,226,175,.45)}
.chat-g-checkers .chat-body{margin:0 10px;border-radius:8px;background:rgba(20,10,2,.55);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,226,175,.2)}
.chat-tray.chat-g-checkers{--ct-icon:#f3d58a}
.chat-g-checkers .chat-notice{margin:0 6px;padding:8px 0 6px;color:#d9bf98;letter-spacing:.01em}
.chat-g-checkers .chat-notice::before,.chat-g-checkers .chat-notice::after{background:linear-gradient(90deg,transparent,rgba(243,213,138,.35),transparent)}
.chat-g-checkers .chat-title{color:#f3d58a;text-shadow:0 1px 0 #1d0f04}
.chat-g-checkers .chat-deco i{width:12px;height:12px;background:radial-gradient(circle at 36% 30%,#fff 0 10%,#e9dcc0 40%,#b9a67e);opacity:1;box-shadow:0 0 0 1.5px #6b5330}
.chat-g-checkers .chat-deco i:nth-child(even){background:radial-gradient(circle at 36% 30%,#ff7a7f 0 10%,#c41c25 45%,#7d0b12);box-shadow:0 0 0 1.5px #5a070c}
.chat-g-checkers .chat-who{font:700 10.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase}
.chat-g-checkers .chat-bubble{padding:8px 22px 5px;box-shadow:0 2px 0 #7a5a2c,0 4px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(90,60,20,.45),inset 0 0 0 3px rgba(255,248,230,.35)}
.chat-g-checkers .chat-bubble::before,.chat-g-checkers .chat-bubble::after{content:'';position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7d6,#a07a34 60%,#5b4214);box-shadow:0 1px 0 rgba(255,255,255,.5)}
.chat-g-checkers .chat-bubble::before{left:7px}.chat-g-checkers .chat-bubble::after{right:7px}
.chat-g-checkers .chat-text{font-weight:600;letter-spacing:.01em}
.chat-g-checkers .mine .chat-bubble{box-shadow:0 2px 0 #062d1c,0 4px 8px rgba(0,0,0,.45),inset 0 0 0 1.5px #c9a55a,inset 0 0 0 3px rgba(0,0,0,.25),inset 0 1px 0 4px rgba(255,255,255,.05)}
.chat-g-checkers .chat-chip{border-radius:6px;background:linear-gradient(180deg,rgba(255,236,200,.16),rgba(255,236,200,.06));border-color:rgba(243,213,138,.35);color:#f8e3b8}
.chat-g-checkers .chat-pane{background:rgba(20,10,2,.45)}
.chat-g-checkers .chat-in{border-radius:8px;box-shadow:inset 0 2px 5px rgba(0,0,0,.5);border-color:rgba(243,213,138,.3)}
.chat-g-checkers .chat-send{box-shadow:0 0 0 2px #7a0b11,0 3px 0 #4d060a,0 4px 8px rgba(0,0,0,.45)}
.chat-g-checkers .chat-jump{background:#f3d58a;color:#3a240f}
.chat-toast.chat-g-checkers .chat-toast-in{border-radius:6px;background:linear-gradient(180deg,#f8ecd0,#e1c893);color:#3a240f;box-shadow:0 8px 22px rgba(0,0,0,.5),inset 0 0 0 1px rgba(90,60,20,.5),inset 0 0 0 3px rgba(255,248,230,.4)}
.chat-toast.chat-g-checkers .chat-toast-who{letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;color:#7a0b11}
@media (prefers-reduced-motion:no-preference){.chat-g-checkers .chat-msg.new{animation:chatslide .32s cubic-bezier(.25,.8,.3,1) both}.chat-g-checkers .chat-msg.mine.new{animation-name:chatslidem}}
@keyframes chatslide{0%{opacity:0;transform:translateX(-30px) scale(.96)}70%{transform:translateX(2px)}}
@keyframes chatslidem{0%{opacity:0;transform:translateX(30px) scale(.96)}70%{transform:translateX(-2px)}}

/* =================================================================================================== */
/* POOL: felt under a cue-wood rail. Round cue-ball bubbles, mine chalk blue, and each name wears a small pool ball. */
.chat-fab.chat-g-pool{--cf-bg:#f6f2e6;--cf-hole:#f6f2e6;--cf-ink:#1a3b58;--cf-dot:#e5323a;border:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#f6f2e6 0 13px,transparent 13.5px),radial-gradient(circle at 34% 28%,#9fd2ff 0 8%,#3b8fd9 34%,#1f5f9e 78%,#143f6b);
  box-shadow:0 4px 8px rgba(0,0,0,.45),inset 0 -3px 6px rgba(0,0,0,.25)}
.chat-fab.chat-g-pool>svg{width:16px;height:16px}
.chat-tray.chat-g-pool{--ct-bg:#0f5c37;--ct-ink:#f1f6ee;--ct-mute:#a9d6bb;--ct-line:rgba(255,255,255,.16);--ct-chip:rgba(0,0,0,.18);--ct-name:#d5ecff;
  --cb-r:20px;--cb-bg:radial-gradient(circle at 30% 20%,#fff,#efeadb);--cb-ink:#12261b;--cb-mine:linear-gradient(160deg,#5fb2f0,#2f7fc6);--cb-mine-ink:#fff;--cs-bg:radial-gradient(circle at 34% 28%,#9fd2ff 0 8%,#3b8fd9 40%,#1f5f9e);--cs-ink:#fff;--ct-field:rgba(0,0,0,.25);
  background:radial-gradient(130% 80% at 50% 30%,#1b7f4d,#0f5c37 60%,#0a4428);
  --ring:repeating-linear-gradient(100deg,rgba(40,16,2,0) 0 7px,rgba(40,16,2,.18) 7px 8px,rgba(255,220,160,.06) 8px 10px,rgba(40,16,2,0) 10px 19px),linear-gradient(#8a5528,#6b3e1b);--ring-w:9px;--ct-icon:#d5ecff}
/* the rail's sights: little pearl dots along the top rail on a phone, down the left rail on a wide screen */
.chat-tray.chat-g-pool::before{content:'';position:absolute;z-index:6;left:30px;right:30px;top:3px;height:3px;background:radial-gradient(circle,#f3e6c4 0 1.5px,transparent 2px) 0 0/64px 3px repeat-x;pointer-events:none}
@media (min-width:900px),(orientation:landscape) and (max-height:520px){.chat-tray.chat-g-pool::before{left:3px;right:auto;top:30px;bottom:30px;width:3px;height:auto;background-size:3px 64px;background-repeat:repeat-y}}
.chat-g-pool .chat-notice{color:#b9e0c8}
.chat-g-pool .chat-notice::before,.chat-g-pool .chat-notice::after{height:0;border-top:1.5px dotted rgba(243,230,196,.45);background:none}
.chat-g-pool .chat-title{color:#fff;font-family:'Titan One',var(--display);letter-spacing:.03em;font-size:18px}
.chat-g-pool .chat-deco i{width:12px;height:12px;opacity:1;box-shadow:inset -2px -2px 3px rgba(0,0,0,.3)}
.chat-g-pool .chat-deco i:nth-child(1){background:#f2b92b}.chat-g-pool .chat-deco i:nth-child(2){background:#2f6fe0}.chat-g-pool .chat-deco i:nth-child(3){background:#d8222b}.chat-g-pool .chat-deco i:nth-child(4){background:#111}
.chat-g-pool .chat-who{display:inline-flex;align-items:center;gap:5px;padding-left:2px}
.chat-g-pool .chat-who::before{content:'';flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 2.6px,transparent 3px),radial-gradient(circle at 34% 28%,rgba(255,255,255,.7) 0 12%,var(--ball,#f2b92b) 40%,color-mix(in srgb,var(--ball,#f2b92b) 60%,#000));box-shadow:0 1px 2px rgba(0,0,0,.4)}
.chat-g-pool .sh-circle{--ball:#f2b92b}.chat-g-pool .sh-triangle{--ball:#2f6fe0}.chat-g-pool .sh-cross{--ball:#d8222b}.chat-g-pool .sh-square{--ball:#7b3fb8}.chat-g-pool .sh-star{--ball:#f47a1f}
.chat-g-pool .chat-who.me::before{background:radial-gradient(circle at 34% 28%,#fff 0 15%,#eee8d6 50%,#bdb59c)}
.chat-g-pool .chat-bubble{padding:8px 15px 6px;box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 -2px 4px rgba(0,0,0,.08)}
.chat-g-pool .mine .chat-bubble{box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.15)}
.chat-g-pool .theirs .chat-bubble{border-top-left-radius:8px}.chat-g-pool .mine .chat-bubble{border-top-right-radius:8px}
.chat-g-pool .chat-chip{background:rgba(255,255,255,.1);border-color:rgba(213,236,255,.3)}
.chat-g-pool .chat-in{border-radius:22px}
.chat-g-pool .chat-send{box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 -3px 5px rgba(0,0,0,.25)}
.chat-g-pool .chat-jump{background:#d5ecff;color:#0f3a5c}
.chat-toast.chat-g-pool .chat-toast-in{border-radius:999px;padding:6px 16px 6px 8px;background:radial-gradient(circle at 30% 20%,#fff,#efeadb);color:#12261b;box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 0 3px rgba(47,127,198,.55)}
.chat-toast.chat-g-pool .chat-toast-who{display:inline-flex;align-items:center;gap:6px;color:#1f5f9e}
.chat-toast.chat-g-pool .chat-toast-who::before{content:'';width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 3.5px,transparent 4px),radial-gradient(circle at 34% 28%,#9fd2ff 0 8%,#3b8fd9 40%,#1f5f9e)}
@media (prefers-reduced-motion:no-preference){.chat-g-pool .chat-msg.new{animation:chatroll .42s cubic-bezier(.3,.9,.3,1) both}.chat-g-pool .chat-msg.mine.new{animation-name:chatrollm}}
@keyframes chatroll{0%{opacity:0;transform:translateX(-40px)}60%{transform:translateX(5px)}80%{transform:translateX(-2px)}}
@keyframes chatrollm{0%{opacity:0;transform:translateX(40px)}60%{transform:translateX(-5px)}80%{transform:translateX(2px)}}

/* =================================================================================================== */
/* LUDO: the ivory board and its four colours. A speaker's bubble takes their seat colour, with die pips in the corner. */
.chat-fab.chat-g-ludo{--cf-bg:#fbf6e8;--cf-hole:#fbf6e8;--cf-ink:#d8222b;--cf-dot:#2f6fe0;border:0;border-radius:11px;
  background:linear-gradient(145deg,#fffdf6,#efe6cf);box-shadow:0 3px 0 #c9bc98,0 5px 10px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.08)}
.chat-fab.chat-g-ludo::before,.chat-fab.chat-g-ludo::after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#2a1608;opacity:.75}
.chat-fab.chat-g-ludo::before{left:5px;top:5px}.chat-fab.chat-g-ludo::after{right:5px;bottom:5px}
.chat-tray.chat-g-ludo{--ct-bg:#fbf6e8;--ct-ink:#2a1608;--ct-mute:#7d6a50;--ct-line:rgba(60,35,10,.16);--ct-chip:rgba(60,35,10,.06);--ct-chip-ink:#3a240f;--ct-name:#fff;
  --cb-r:16px;--cs-bg:#2a1608;--cs-ink:#fbf6e8;--ct-field:#fff;--ct-field-ink:#2a1608;
  background:radial-gradient(circle at 15% 0,rgba(255,255,255,.8),transparent 40%),#fbf6e8;
  --ring:linear-gradient(90deg,var(--lc0) 0 25%,var(--lc1) 25% 50%,var(--lc2) 50% 75%,var(--lc3) 75%);--ring-w:6px;--ct-icon:#2a1608}
@media (min-width:900px),(orientation:landscape) and (max-height:520px){.chat-tray.chat-g-ludo{--ring:linear-gradient(180deg,var(--lc0) 0 25%,var(--lc1) 25% 50%,var(--lc2) 50% 75%,var(--lc3) 75%)}}
.chat-g-ludo .chat-title{color:#2a1608}
.chat-g-ludo .chat-notice{color:#7d6a50}
.chat-g-ludo .chat-notice::before,.chat-g-ludo .chat-notice::after{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--lc0) 0 25%,var(--lc1) 25% 50%,var(--lc2) 50% 75%,var(--lc3) 75%);opacity:.55}
.chat-g-ludo .chat-deco i{width:11px;height:11px;border-radius:3px;opacity:1}
.chat-g-ludo .chat-deco i:nth-child(1){background:var(--lc0)}.chat-g-ludo .chat-deco i:nth-child(2){background:var(--lc1)}.chat-g-ludo .chat-deco i:nth-child(3){background:var(--lc2)}.chat-g-ludo .chat-deco i:nth-child(4){background:var(--lc3)}
.chat-g-ludo .chat-msg{--seat:#6b5a45;--seat-d:#3c3022;--seat-ink:#fff}
.chat-g-ludo .chat-msg[data-seat="0"]{--seat:var(--lc0);--seat-d:var(--lc0d)}
.chat-g-ludo .chat-msg[data-seat="1"]{--seat:var(--lc1);--seat-d:var(--lc1d)}
.chat-g-ludo .chat-msg[data-seat="2"]{--seat:var(--lc2);--seat-d:var(--lc2d);--seat-ink:#3a2600}
.chat-g-ludo .chat-msg[data-seat="3"]{--seat:var(--lc3);--seat-d:var(--lc3d)}
.chat-g-ludo .chat-who{background:var(--seat);color:var(--seat-ink);border-radius:999px;padding:3px 9px;margin:0;min-height:22px;font-size:11.5px;box-shadow:0 1px 0 var(--seat-d)}
.chat-g-ludo .chat-who.me{opacity:1}
.chat-g-ludo .chat-bubble,.chat-g-ludo .mine .chat-bubble{background:var(--seat);color:var(--seat-ink);padding:8px 26px 6px 13px;box-shadow:0 3px 0 var(--seat-d),0 5px 10px rgba(60,35,10,.2)}
.chat-g-ludo .theirs .chat-bubble{border-top-left-radius:4px}
.chat-g-ludo .mine .chat-bubble{border-top-right-radius:4px;box-shadow:0 3px 0 var(--seat-d),0 5px 10px rgba(60,35,10,.2),inset 0 0 0 2.5px rgba(255,255,255,.55)}
.chat-g-ludo .chat-bubble::after{content:'';position:absolute;right:7px;top:8px;width:13px;height:13px;opacity:.5;
  background:radial-gradient(circle,currentColor 1.6px,transparent 2px) 0 0/6.5px 6.5px;-webkit-mask:linear-gradient(135deg,#000 0 30%,transparent 30% 70%,#000 70%);mask:linear-gradient(135deg,#000 0 30%,transparent 30% 70%,#000 70%)}
.chat-g-ludo .chat-chip{background:#fff;border-color:rgba(60,35,10,.18);box-shadow:0 2px 0 rgba(60,35,10,.12)}
.chat-g-ludo .chat-chip:nth-child(4n+1){border-bottom:3px solid var(--lc0)}.chat-g-ludo .chat-chip:nth-child(4n+2){border-bottom:3px solid var(--lc1)}.chat-g-ludo .chat-chip:nth-child(4n+3){border-bottom:3px solid var(--lc2)}.chat-g-ludo .chat-chip:nth-child(4n){border-bottom:3px solid var(--lc3)}
.chat-g-ludo .chat-send{border-radius:12px;box-shadow:0 3px 0 #000}
.chat-g-ludo .chat-send::before{content:'';position:absolute}
.chat-g-ludo .chat-in{border-radius:12px}
.chat-g-ludo .chat-jump{background:#2a1608;color:#fbf6e8}
.chat-g-ludo .chat-note[data-tone="off"]{background:rgba(60,35,10,.06);color:#5b4d36}
.chat-toast.chat-g-ludo .chat-toast-in{--seat:#2a1608;background:#fbf6e8;color:#2a1608;border-radius:12px;border-left:6px solid var(--seat);box-shadow:0 8px 22px rgba(0,0,0,.45)}
.chat-toast.chat-g-ludo[data-seat="0"] .chat-toast-in{--seat:var(--lc0)}.chat-toast.chat-g-ludo[data-seat="1"] .chat-toast-in{--seat:var(--lc1)}.chat-toast.chat-g-ludo[data-seat="2"] .chat-toast-in{--seat:var(--lc2)}.chat-toast.chat-g-ludo[data-seat="3"] .chat-toast-in{--seat:var(--lc3)}
.chat-toast.chat-g-ludo .chat-toast-who{color:color-mix(in srgb,var(--seat) 75%,#000)}
@media (prefers-reduced-motion:no-preference){.chat-g-ludo .chat-msg.new{animation:chatdrop .45s cubic-bezier(.3,1.4,.4,1) both}}
@keyframes chatdrop{0%{opacity:0;transform:translateY(-16px) scale(.8) rotate(-4deg)}60%{opacity:1}}