/* ---------- chat sidebar (right) ---------- */
:root{--chat-w:340px}
/* Stable account symbols beside soft message bubbles. */
.chat .ch-head{height:58px;padding:0 18px;background:#0e1d34}
.chat .ch-online{padding:0;border:0;background:none;font-size:14px;gap:9px}
.chat .ch-online>span{font-size:12px;font-weight:500;color:var(--muted)}
.chat .ch-rules{background:none;border:0;border-bottom:1px solid #ffffff09;border-radius:0;margin:0;padding:12px 18px;font-size:11px}
.chat .ch-list{padding:14px 12px 20px}
.chat .cm:not(.cm-big):not(.cm-sys){gap:10px;padding:5px 2px;margin-bottom:8px;align-items:flex-start;background:transparent;border:0}
.chat .cm-avatar{flex:none;width:34px;height:34px;display:grid;place-items:center;margin-top:5px;border-radius:50%;background:#1b2a43;border:1px solid #9ab7ed24;box-shadow:inset 0 1px 0 #ffffff08}
.chat .cm-avatar svg{display:block;width:21px;height:21px}
.chat .cm-avatar{position:relative;overflow:hidden}
.chat .cm-skin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;border-radius:50%}
.chat .cm-bd{position:relative;padding:10px 12px 11px;border-radius:5px 13px 13px 13px;background:#1b2b47;border:1px solid #a5c6ff0d;box-shadow:0 3px 8px #030b181f;transition:background .15s}
.chat .cm-bd::before{content:"";position:absolute;left:-5px;top:11px;width:8px;height:8px;background:inherit;transform:rotate(45deg);border-radius:1px}
.chat .cm:hover .cm-bd{background:#203250}
.chat .cm.self .cm-bd{background:#17364d;border-color:#5cc9e42b}
.chat .cm.self:hover .cm-bd{background:#1b3d55}
.chat .cm-reply{top:9px;right:8px;z-index:1}
.chat .cm-top{height:auto;min-height:20px;gap:7px;flex-wrap:wrap}
.chat .cm-nm{font-size:12px;color:#eef5ff;letter-spacing:0;max-width:160px}
.chat .cm-rank{font-size:9px;line-height:1.2;padding:3px 6px;border-radius:6px;box-shadow:none;letter-spacing:0;text-transform:none;background:#29364a;color:#bfcee1}
.chat .cm-rank[data-rank="blue"]{background:#193c59;color:#8bdbff}
.chat .cm-rank[data-rank="violet"]{background:#3a2c57;color:#d7b8ff}
.chat .cm-rank[data-rank="gold"]{background:#4a3a20;color:#ffdb8e}
.chat .cm-t{display:none}
.chat .cm-tx{margin-top:5px;font-size:13px;line-height:1.55;color:#c9d7ee}
.chat .ch-foot{padding:14px 16px 16px;background:#0a172b;border-top:1px solid #ffffff0d}
.ch-login{display:flex;flex-direction:column;align-items:center;gap:9px;padding:4px 0;font-size:12px;color:#91a7c6}
.ch-login[hidden]{display:none}
.ch-login button{border:1px solid #4aa5d45c;background:#15324d;color:#a7e6ff;border-radius:9px;padding:9px 22px;font:700 12px Inter,sans-serif;cursor:pointer}
.chat.signed-out .ch-input,.chat.signed-out .ch-meta,.chat.signed-out .ch-replybar{display:none}
@media (max-width:1500px){ :root{--chat-w:320px} }

/* the page makes room: content narrows, never overlaps */
body.chat-open .shell{margin-right:var(--chat-w)}
.shell{transition:margin-right .34s cubic-bezier(.22,.8,.25,1)}
body.chat-open .toasts{right:calc(var(--chat-w) + 20px)}
/* a few layout rules size from the viewport (vw); with the chat open, size them from the space actually left */
@media (min-width:901px){
  body.chat-open .shell{margin-right:calc(var(--chat-w) * .81 / var(--ui-scale))}
  body .chat{zoom:calc(.81 / var(--ui-scale));height:calc(var(--vh, 1vh) * 100 / .81)}
  body.chat-open .game{grid-template-columns:clamp(300px, calc((100vw - var(--chat-w)) * .24), 344px) minmax(0,1fr)}
  body.chat-open .dz-stage,body.chat-open .lb-stage{padding-left:clamp(20px, calc((100vw - var(--chat-w)) * .04), 56px);padding-right:clamp(20px, calc((100vw - var(--chat-w)) * .04), 56px)}
}

.chat{position:fixed;top:0;right:0;width:var(--chat-w);height:calc(var(--vh, 1vh) * 100 / var(--ui-scale,.9));z-index:24;display:flex;flex-direction:column;
  transform:translateX(101%);visibility:hidden;pointer-events:none;transition:transform .34s cubic-bezier(.22,.8,.25,1),visibility 0s .34s;
  background:linear-gradient(180deg,#0c1a36,#0a1630 60%,#091428);border-left:1px solid var(--border);box-shadow:-8px 0 30px -18px #000}
body.chat-open .chat{transform:translateX(0);visibility:visible;pointer-events:auto;transition-delay:0s}

.ch-head{height:var(--head);flex:none;display:flex;align-items:center;gap:10px;padding:0 10px 0 16px;border-bottom:1px solid var(--border-soft)}
.ch-title{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px}
.ch-title .ic{color:var(--cyan);width:20px;height:20px}
.ch-online{display:flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:99px;background:var(--inset);border:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--muted)}
.ch-online i{width:7px;height:7px;border-radius:50%;background:var(--win);box-shadow:0 0 0 3px #2fe08f30;animation:chPulse 2.4s ease-in-out infinite}
@keyframes chPulse{50%{box-shadow:0 0 0 5px #2fe08f10}}
.ch-close{margin-left:auto}

.ch-rules{flex:none;display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:8px 11px;border-radius:var(--r-sm);background:#4285ff14;border:1px solid #4285ff2e;color:var(--muted);font-size:12px;font-weight:600;line-height:1.3}
.ch-rules .ic{width:15px;height:15px;color:var(--cyan)}

.ch-body{position:relative;flex:1;min-height:0}
.ch-list{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:8px 6px 10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;overscroll-behavior:contain}
.cm{display:flex;padding:4px 8px;border-radius:var(--r-sm);transition:background .15s;position:relative}
.cm:hover{background:#ffffff07}
/* hover-to-reply action (shows on others' messages) */
.cm-reply{position:absolute;top:2px;right:4px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border);border-radius:6px;background:#161d30;color:var(--dim);cursor:pointer;opacity:0;transition:opacity .12s,color .12s,background .12s,border-color .12s}
.cm:hover .cm-reply{opacity:1}
.cm-reply:focus-visible{opacity:1;box-shadow:var(--ring)}
.cm-reply:hover{color:#fff;background:var(--accent);border-color:transparent}
.cm-reply-ic{width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 17l-5-5 5-5M4 12h11a4 4 0 0 1 4 4v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 17l-5-5 5-5M4 12h11a4 4 0 0 1 4 4v3'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:none){.cm-reply{opacity:.5}}
/* reply composer bar (above the input) */
.ch-replybar{display:flex;align-items:center;gap:8px;margin:0 8px 6px;padding:7px 9px;border-left:3px solid var(--accent);border-radius:8px;background:#ffffff08;font-size:11.5px}
.ch-rb-main{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ch-rb-lbl{color:var(--dim)}
.ch-rb-who{font-weight:700;color:var(--muted)}
.ch-rb-tx{color:var(--dim);opacity:.85}
.ch-rb-x{flex:none;width:20px;height:20px;border:none;background:transparent;color:var(--dim);font-size:16px;line-height:1;cursor:pointer;border-radius:5px}
.ch-rb-x:hover{color:#fff;background:#ffffff12}
.cm.in{animation:cmIn .22s ease-out}
@keyframes cmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cm-bd{min-width:0;flex:1}
.cm-top{display:flex;align-items:center;gap:6px;min-width:0;height:18px}
/* VIP wager-rank: a small colored TEXT chip (no icon); text colour = rank colour (set inline) */
.cm-rank{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1;padding:2px 6px;border-radius:5px;
  background:#ffffff0f;box-shadow:inset 0 0 0 1px currentColor;filter:saturate(1.1)}
.cm-nm{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:.2px}
.cm-t{margin-left:auto;flex:none;font-size:10.5px;color:var(--dim);opacity:.85;font-variant-numeric:tabular-nums;padding-left:6px}
.cm-quote{display:flex;align-items:center;gap:5px;margin:1px 0 1px;padding-left:7px;border-left:2px solid #ffffff1f;font-size:11.5px;color:var(--dim);min-width:0}
.cm-qarrow{width:11px;height:11px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 17l-5-5 5-5M4 12h11a4 4 0 0 1 4 4v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 17l-5-5 5-5M4 12h11a4 4 0 0 1 4 4v3'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.7}
.cm-qnm{font-weight:700;color:var(--muted);flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-qtx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;opacity:.85}
.cm-tx{font-size:13.5px;line-height:1.38;color:#dbe5f7;overflow-wrap:anywhere;margin-top:1px}
.cm.self{background:#4285ff12}
.cm.self .cm-tx{color:var(--text)}
/* tip / rain announcements: a distinct banner line, not a normal bubble */
.cm-sys{flex-direction:column;align-items:stretch;gap:6px;margin:6px 4px;padding:9px 11px;border-radius:10px;
  background:linear-gradient(140deg,#1b2340,#131a30);border:1px solid #4285ff33}
.cm-sys.rain{background:linear-gradient(140deg,#102b36,#101c30);border-color:#34d3c540}
.cm-sys:hover{background:linear-gradient(140deg,#20294a,#151d34)}
.cm-sys-head{display:flex;align-items:center;gap:8px;min-width:0}
.cm-sys-ic{flex:none;display:grid;place-items:center;color:var(--accent)}
.cm-sys.rain .cm-sys-ic{color:#34d3c5}
.cm-sys-ic .ic{width:17px;height:17px}
.cm-sys-tx{flex:1 1 auto;min-width:0;font-size:12.8px;font-weight:700;color:#e3ebf8;overflow-wrap:anywhere}
.cm-sys-t{flex:none;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.cm-sys-win{display:flex;flex-wrap:wrap;gap:5px;padding-left:25px}
.cm-win{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:99px;background:#ffffff10;font-size:11px;font-weight:700;color:var(--muted)}
.cm-win small{color:var(--win);font-weight:800}
/* nudge to pick a nickname (chat footer) */
.ch-setnick{flex:none;border:1px solid var(--accent);background:transparent;color:var(--accent);font:inherit;font-size:11px;font-weight:800;
  padding:2px 9px;border-radius:99px;cursor:pointer;white-space:nowrap}
.ch-setnick:hover{background:var(--accent);color:#fff}
.ch-hint.bad ~ .ch-setnick{display:none}

.ch-pill{position:absolute;left:50%;bottom:10px;transform:translate(-50%,8px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;
  border:0;border-radius:99px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px -6px #000c;transition:opacity .18s,transform .18s}
.ch-pill .ic{width:15px;height:15px}
.ch-pill.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ch-pill:hover{background:var(--accent-hi)}

.ch-foot{flex:none;padding:10px 12px 12px;border-top:1px solid var(--border-soft);background:#081329}
.ch-input{display:flex;align-items:center;gap:6px;height:46px;padding:0 5px 0 13px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s}
.ch-input:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.ch-input input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:14px;color:var(--text)}
.ch-input input::placeholder{color:var(--dim)}
.ch-send{width:36px;height:36px;flex:none;display:grid;place-items:center;border:0;border-radius:7px;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo));box-shadow:inset 0 1px 0 #ffffff40;transition:filter .15s,opacity .15s}
.ch-send:hover{filter:brightness(1.1)}
.ch-send:disabled{opacity:.4;cursor:default;filter:none}
.ch-send .ic{width:17px;height:17px}
.ch-meta{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:11.5px;color:var(--dim);min-height:16px}
.ch-as{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ch-as b{color:var(--muted)}
.ch-hint{display:none}
.ch-hint.bad{display:block;color:var(--lose);font-weight:700;white-space:nowrap}
.ch-hint.bad + .ch-as{display:none}
.ch-count{margin-left:auto;flex:none}
.ch-count.warn{color:var(--gold)}
.chat.shake .ch-input{animation:chShake .3s}
@keyframes chShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* header toggle (visible while the panel is closed) */
.ch-toggle{position:relative}
body.chat-open .ch-toggle{display:none}
.ch-toggle.on{color:var(--text);background:var(--control)}
.ch-unread{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--lose);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;
  display:none;place-items:center;line-height:1;box-shadow:0 0 0 2px #0a1631}
.ch-unread.on{display:grid}

.ch-scrim{position:fixed;inset:0;background:#030814b0;z-index:40;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .34s ease,visibility 0s .34s}

/* ---------- big-win feed card (>1B wagered) ---------- */
.cm-big{flex-direction:column;align-items:stretch;gap:8px;margin:6px 4px;padding:11px 12px 12px;border-radius:12px;
  background:linear-gradient(150deg,#2a2033,#121a33 55%,#0e1830);border:1px solid #ffc94a66;box-shadow:0 0 0 1px #0006,0 10px 26px -14px #000,inset 0 1px 0 #ffffff14}
.cm-big:hover{background:linear-gradient(150deg,#2f2335,#131c36 55%,#0e1830)}
.cb-tag{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.cb-tag b{letter-spacing:.14em}
.cb-spark{width:13px;height:13px;flex:none;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);box-shadow:0 0 10px #ffc94a88}
.cb-t{margin-left:auto;color:var(--dim);font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.cb-who{display:flex;align-items:center;gap:8px;min-width:0}
.cb-nm{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cb-game{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;color:var(--muted);background:#ffffff12;border:1px solid var(--border-soft);border-radius:99px;padding:2px 9px;white-space:nowrap}
.cb-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.cb-cell{background:#0a1226cc;border:1px solid var(--border);border-radius:8px;padding:6px 8px;min-width:0;text-align:center}
.cb-cell small{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.cb-cell b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.cb-cell.mid b{color:var(--cyan)}
.cb-cell.pay b{color:var(--gold)}

/* mobile: slide-over drawer */
@media (max-width:900px){
  body.chat-open .shell{margin-right:0}
  .chat{width:min(380px,calc(100vw - 40px));z-index:41}
  body.chat-drawer .chat{transform:translateX(0);visibility:visible;pointer-events:auto;transition-delay:0s}
  body.chat-drawer .ch-scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  body.chat-open .ch-toggle{display:grid}
  .ch-toggle{width:40px}
}
@media (max-width:520px){ .ch-toggle{width:36px;height:40px} }
@media (prefers-reduced-motion:reduce){.shell,.chat,.ch-scrim{transition:none!important}}

/* Minecraft heads and player cards. */
button.cm-avatar{padding:0;cursor:pointer;color:inherit}button.cm-avatar:hover{border-color:#78c6ff;box-shadow:0 0 0 3px #78c6ff16}button.cm-avatar:focus-visible{outline:2px solid #8ad7ff;outline-offset:3px}
.cm-avatar{position:relative;overflow:hidden;display:grid;place-items:center;box-sizing:border-box;background:#1b2a43;border:1px solid #9ab7ed24}.cm-avatar>svg{display:block;width:62%;height:62%;grid-area:1/1}.cm-avatar .cm-mc-head,.cm-avatar .cm-skin{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated}.cb-who .cm-avatar{width:28px;height:28px;flex:0 0 28px}
.ch-player{width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:22px;color:#eaf2ff;background:#101e36;border:1px solid #344b70;border-radius:19px;box-shadow:0 28px 90px #0009;max-height:calc(100dvh - 32px);overflow:auto}
.ch-player::backdrop{background:#020a18a6;backdrop-filter:blur(3px)}.ch-player-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}.ch-player-head>.cm-avatar{width:52px;height:52px;flex:0 0 52px;border-radius:13px}.ch-player-head .cm-skin{width:100%;height:100%}
.ch-player-identity{min-width:0;flex:1}.ch-player h2{margin:0 0 5px;font-size:19px;overflow-wrap:anywhere}.ch-player-identity small{color:#8da4c9;font-size:12px}.ch-player-close{align-self:flex-start;width:28px;height:28px;flex:0 0 28px;border:0;border-radius:7px;background:#ffffff09;color:#b7c9e4;font-size:23px;cursor:pointer}
.ch-player-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.ch-player-stats>div{background:#0a162a;border:1px solid #263c5c;border-radius:10px;padding:13px;min-width:0}.ch-player-stats small{display:block;color:#8da4c9;font-size:11px;margin-bottom:7px}.ch-player-stats b{font-size:18px;color:#b6e5ff;overflow-wrap:anywhere}
.ch-player-note{color:#8da4c9;font-size:12px;line-height:1.6;margin:10px 0 16px}.ch-tip-form{display:flex;flex-direction:column;gap:12px}.ch-tip-form label{font-size:14px;font-weight:700}.ch-tip-form input{width:100%;box-sizing:border-box;background:#091629;border:1px solid #375579;border-radius:9px;padding:14px;color:#f3f7ff;font:700 19px inherit}.ch-tip-form input:focus{outline:2px solid #65c7ff;outline-offset:1px}.ch-tip-error{color:#ff7b97;font-size:13px;margin:0;line-height:1.4}.ch-tip-error:empty{display:none}.ch-tip-form .ch-player-note{margin:0}.ch-tip-success{font-size:24px;color:#43dfa2;font-weight:800}.ch-player .btn{min-height:44px}.ch-player button:focus-visible{outline:2px solid #8ad7ff;outline-offset:3px}

.cm-rank[data-glow="true"]{box-shadow:0 0 9px #ffcf6b55,0 0 20px #ffc44722;border-color:#f5d07b99;text-shadow:0 0 7px #ffe6a580}
.cm.cm-level-glow .cm-nm,.cm.cm-level-glow .cb-nm{color:#fff!important;text-shadow:none;filter:drop-shadow(0 0 3px #ffffff66)}

.ch-player .ch-player-close{display:grid;place-items:center;padding:0;line-height:1;min-height:28px;font-family:Arial,sans-serif;font-weight:400}.ch-player-close svg{width:16px;height:16px;display:block}
