/* Public multiview - view only. Broadcast control room look: #1 is the program monitor with a red tally. */
:root{
  --bg:#0f131a;--panel:#151a22;--raise:#1b212b;--line:#242b37;--text:#e7eaf0;--muted:#8d97a8;--dim:#6b7586;
  --acc:34 197 94;           /* accent: green */
  --tally:255 59 71;         /* on-air red */
  --green:#4ade80;
  --gap:10px;--r:14px;
  --cond:'Barlow Semi Condensed',Barlow,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1400px 800px at 55% 40%,#18202b 0%,#0f131a 55%,#0b0e13 100%) fixed var(--bg);color:var(--text);
  font:15px/1.45 Barlow,system-ui,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#2f3846;border-radius:9px}*{scrollbar-width:thin;scrollbar-color:#2f3846 transparent}
h2{margin:0;font:600 16.5px/1.2 var(--cond);letter-spacing:.01em}

/* top strip */
.top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:var(--gap) var(--gap) 0;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r);
  background:rgba(21,26,34,.85);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:9px;font:700 19px/1 var(--cond);letter-spacing:.01em;white-space:nowrap}
.brand i{width:11px;height:11px;border-radius:3px;background:rgb(var(--acc));box-shadow:0 0 12px rgb(var(--acc)/.7)}
.status{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted)}
.status .dot{width:8px;height:8px;border-radius:50%;background:#4b5563}
.status.live .dot{background:rgb(var(--tally));animation:tally 1.8s ease-out infinite}.status.live{color:#ffd4d7}
.status.warn .dot{background:#f5b83d}.status.warn{color:#f5d38a}
.mode{font-size:13px;color:var(--muted)}.mode b{color:var(--text);font-weight:600}
.leaders{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.leader{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:999px;background:#10141b;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;white-space:nowrap}
.leader b{font-weight:600}.leader span{color:var(--muted);font-variant-numeric:tabular-nums}
@keyframes tally{0%{box-shadow:0 0 0 0 rgb(var(--tally)/.75)}100%{box-shadow:0 0 0 8px rgb(var(--tally)/0)}}

/* layout: chat | stage | channels */
.layout{--cw:440px;--gw:460px;flex:1;min-height:0;display:grid;grid-template-columns:max(260px,var(--cw)) 6px max(220px,var(--gw)) 6px minmax(0,1fr);grid-template-areas:"chat g1 chans g2 stage";column-gap:4px;padding:var(--gap)}
/* resize grips: the only thing a viewer can drag, and it only changes their own screen */
.grip{position:relative;cursor:col-resize;border-radius:4px;touch-action:none}
#grip1{grid-area:g1}#grip2{grid-area:g2}
.grip::after{content:'';position:absolute;left:50%;top:50%;width:2px;height:32px;margin:-16px 0 0 -1px;border-radius:2px;background:#2f3846;transition:background .15s}
.grip:hover::after,.grip.drag::after{background:rgb(var(--acc));height:56px;margin-top:-28px}
body.resizing{cursor:col-resize;user-select:none}body.resizing iframe{pointer-events:none}
.chat{grid-area:chat}.stage{grid-area:stage}.chans{grid-area:chans}
.panel{min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:rgba(21,26,34,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 34px -16px rgba(0,0,0,.7)}
.ph{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line)}
.ph .hi{width:16px;height:16px;flex:none;fill:none;stroke:rgb(var(--acc));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill{font-size:12px;font-weight:600;color:rgb(var(--acc));padding:1px 9px;border-radius:999px;background:rgb(var(--acc)/.12);max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill:empty{display:none}.sub{margin-left:auto;font-size:12px;color:var(--dim)}

/* stage + monitors */
.stage{position:relative;min-height:0}
.stage-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted);font-size:15px}
.stage-msg:empty{display:none}
.tile{position:absolute;overflow:hidden;border-radius:12px;background:#05070a;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 22px 44px -20px rgba(0,0,0,.9);
  transition:box-shadow .4s}
.tile.no-anim{transition:none}
.tile.pgm{box-shadow:0 0 0 2px rgb(var(--tally)),0 0 28px -6px rgb(var(--tally)/.6),0 22px 44px -20px rgba(0,0,0,.9)}
.tile iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.plate{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:10px;padding:10px 12px 26px;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,10,.82) 0%,rgba(5,7,10,.45) 62%,rgba(5,7,10,0) 100%)}
.rank{flex:none;display:flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;border-radius:8px;background:rgba(255,255,255,.12);font:700 20px/1 var(--cond);color:#fff}
.pgm .rank{background:rgb(var(--tally));box-shadow:0 0 14px rgb(var(--tally)/.6)}
.who{min-width:0;flex:1}
.name{font:600 19px/1.05 var(--cond);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;font-weight:500;color:#ffd4d7}
.tag i{width:7px;height:7px;border-radius:50%;background:rgb(var(--tally));animation:tally 1.8s ease-out infinite}
.small .name{font-size:15px}.small .rank{min-width:24px;height:24px;font-size:16px;border-radius:7px}
.score{flex:none;display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 10px 0 5px;border-radius:999px;background:rgba(8,10,14,.62);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.09);font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* hype chevrons */
.hype{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:18px;height:24px}
.hype svg{width:15px;height:15px;margin:-5px 0;fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.hype.up svg{stroke:var(--green)}.hype.down svg{stroke:#f87171}
.hype.max svg{animation:pulse .9s ease-in-out infinite}
.hype.max svg:nth-child(2){animation-delay:.12s}.hype.max svg:nth-child(3){animation-delay:.24s}
@keyframes pulse{0%,100%{transform:none;filter:drop-shadow(0 0 2px #4ade80)}35%{transform:translateY(-2px) scale(1.25);filter:drop-shadow(0 0 8px #86efac) brightness(1.4)}}

/* channel cards */
.cards{flex:1;min-height:0;overflow-y:auto;padding:18px 0 4px;position:relative}
.card{margin:0 10px 8px;padding:10px 12px 9px;border-radius:12px;border:1px solid var(--line);background:#131820;position:relative}
/* top 3: gold, silver, bronze highlight with glow (same strength as the console defaults) */
.card.d{--m:185 242 255}.card.g{--m:245 197 66}.card.s{--m:213 219 227}.card.b{--m:208 138 74}.card.i{--m:138 148 158}
.card.d,.card.g,.card.s,.card.b,.card.i{background:rgb(var(--m)/calc(.12*var(--k)));border-color:rgb(var(--m)/calc(.2 + .25*var(--k)));box-shadow:0 0 calc(16px*var(--k)) calc(3px*var(--k)) rgb(var(--m)/calc(.4*var(--k))),inset 0 0 10px rgb(var(--m)/calc(.13*var(--k)))}
/* the glow fades with the rank: gold clearly, silver less, bronze soft, iron faint */
.card.g{--k:.9}.card.s{--k:.65}.card.b{--k:.45}.card.i{--k:.25}
/* #1: diamond, with a light sweep rippling across the card and a few twinkles (only the #1 gets this) */
.card.d{isolation:isolate;background:linear-gradient(135deg,rgb(185 242 255/.26),rgb(150 200 255/.13) 45%,rgb(220 190 255/.16));border-color:rgb(var(--m)/.85);box-shadow:0 0 22px 4px rgb(var(--m)/.5),inset 0 0 16px rgb(var(--m)/.22);filter:brightness(1.06)}
.card.d::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 38%,rgba(185,242,255,.08) 45%,rgba(255,255,255,.32) 50%,rgba(170,235,255,.12) 55%,transparent 62%) no-repeat;
  background-size:300% 100%;animation:diaSweep 6s cubic-bezier(.45,.05,.3,1) infinite}
.card.d::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:radial-gradient(circle at 18% 30%,rgba(255,255,255,1) 0 1.4px,transparent 2.6px),radial-gradient(circle at 72% 22%,rgba(220,250,255,1) 0 1.4px,transparent 2.6px),
  radial-gradient(circle at 86% 74%,rgba(255,255,255,1) 0 1.4px,transparent 2.6px),radial-gradient(circle at 40% 80%,rgba(200,245,255,1) 0 1.4px,transparent 2.6px);
  animation:diaTwinkle 2.2s ease-in-out infinite}
@keyframes diaSweep{0%{background-position:120% 0}45%,100%{background-position:-20% 0}}
.dia-crown{position:absolute;left:-6px;top:-13px;width:30px;height:23px;z-index:4;pointer-events:none;transform-origin:70% 90%;
  transform:rotate(-24deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(245,197,66,.45));animation:crownSway 3.6s ease-in-out infinite}
.dia-crown svg{width:100%;height:100%;display:block}
@keyframes crownSway{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(-18deg) translateY(-1px)}}
.dia-crown{display:none}.card.d .dia-crown{display:block}

@keyframes diaTwinkle{0%,100%{opacity:.08}50%{opacity:.45}}
.medal.gem{animation:diaGem 2.4s ease-in-out infinite}
@keyframes diaGem{0%,100%{filter:drop-shadow(0 0 2px rgba(185,242,255,.6))}50%{filter:drop-shadow(0 0 6px rgba(220,250,255,1))}}
/* level 3 hype: the card trembles while it keeps the triple chevron */
.card.max{animation:shake .22s linear infinite}
@keyframes shake{0%,100%{transform:none}12%{transform:translate(-2.5px,1.2px) rotate(-.25deg)}27%{transform:translate(2.5px,-1.5px) rotate(.25deg)}41%{transform:translate(-1.5px,-2.5px) rotate(-.18deg)}58%{transform:translate(2.2px,1.8px) rotate(.2deg)}76%{transform:translate(-2px,.5px) rotate(-.12deg)}}
.sect{padding:0 14px 6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.card .row{display:flex;align-items:center;gap:8px;min-width:0}
.card .rk{flex:none;min-width:22px;height:22px;padding:0 4px;border-radius:6px;display:flex;align-items:center;justify-content:center;font:700 14px/1 var(--cond);background:#1f2530;color:var(--dim)}
.card .rk.r0{background:rgb(var(--tally));color:#fff}.card .rk.r1,.card .rk.r2{background:#2f3846;color:var(--text)}
.card .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 16px/1.2 var(--cond)}
.card .mc{flex:none;font-size:11.5px;font-weight:600;color:rgb(var(--acc));padding:1px 7px;border-radius:999px;background:rgb(var(--acc)/.12)}
.card .sc{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:600;color:#c4cbd6;white-space:nowrap;font-variant-numeric:tabular-nums}
.card .ac{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--green);padding-left:6px}
.card .ac i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgb(74 222 128/.5)}
.card .ac b{font:700 19px/1 var(--cond);font-variant-numeric:tabular-nums}.card .ac small{font-size:11.5px;color:var(--dim)}
.card .ac.off{color:var(--dim)}.card .ac.off i{background:#4b5563;box-shadow:none}
.spark{display:none;position:relative;height:30px;margin:8px 0 7px;border-radius:6px;overflow:hidden;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px #2b3340}
.spark svg{display:block;width:100%;height:100%}.spark polygon{fill:rgb(var(--acc)/.22)}.spark polyline{fill:none;stroke:rgb(var(--acc));stroke-width:1.5;vector-effect:non-scaling-stroke}
.spark span{position:absolute;right:5px;top:1px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.stats{margin-top:10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 8px}
.stats div{display:flex;flex-direction:column;min-width:0}
.stats span{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats b{font-size:13.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.medal{width:14px;height:14px;flex:none}
.empty{padding:14px;color:var(--muted);font-size:14px}

/* chat (read only) */
.chatlog{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 12px;font:400 14px/1.55 Inter,'Segoe UI',system-ui,sans-serif;color:#cfd2d7;overflow-anchor:none}
.msg{margin:6px 0;padding:8px 12px;border-radius:6px;border:1px solid #242b37;box-shadow:0 10px 15px -3px rgba(0,0,0,.5),0 4px 6px -4px rgba(0,0,0,.5);overflow-wrap:anywhere}
.msg .t{margin-right:8px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.msg .u{font-weight:600}.msg .badge{width:16px;height:16px;margin-right:4px;vertical-align:-3px}
.msg.polite{border-color:rgb(var(--acc));animation:in .28s ease-out,politePulse 1.6s ease-in-out infinite}
@keyframes politePulse{0%,100%{box-shadow:0 0 0 0 rgb(var(--acc)/0),0 0 2px rgb(var(--acc)/.25)}50%{box-shadow:0 0 0 1px rgb(var(--acc)/.55),0 0 9px rgb(var(--acc)/.6)}}
.msg.new{animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.noscript{padding:20px;text-align:center}

/* tablets: monitors on top, channels and chat side by side below; the page scrolls */
@media (max-width:1180px){
  body{overflow:auto}
  .layout{grid-template-columns:minmax(460px,1fr) minmax(0,1fr);grid-template-areas:"stage stage" "chans chat";grid-template-rows:auto 70vh;gap:var(--gap);flex:none}
  .grip{display:none}
  .stage{min-height:0}
}
/* phones: one column */
@media (max-width:760px){
  :root{--gap:8px}
  .layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "chans" "chat";grid-template-rows:auto auto 65vh;gap:var(--gap)}
  .chans .cards{flex:none;max-height:none;overflow:visible}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .name{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.tile{transition:none}}

.card.lnk{cursor:pointer}.card.lnk:hover{filter:brightness(1.12)}.card.lnk:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:2px}

/* ---------- side bar + Cat Jump game ---------- */
[hidden]{display:none!important}
.rail{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px;width:48px;
  border:1px solid var(--line);border-radius:var(--r);background:rgba(21,26,34,.92);box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}
.rb{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:#10141b;color:var(--dim);cursor:pointer;transition:color .15s,background .15s}
.rb svg,.railshow svg,.ib svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rb:hover{color:var(--text);background:#1b212b}.rb.on{color:rgb(var(--acc));background:#1b212b;box-shadow:inset 0 0 0 1px rgb(var(--acc)/.7)}
.rb.small{height:20px;background:transparent}.rb.small svg{width:16px;height:16px}
.rb:focus-visible,.railshow:focus-visible,.ib:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:2px}
.railshow{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;display:none;width:18px;height:48px;align-items:center;justify-content:center;border:1px solid var(--line);border-right:0;
  border-radius:10px 0 0 10px;background:rgba(21,26,34,.92);color:var(--dim);cursor:pointer;padding:0}
.railshow svg{width:14px;height:14px}.railshow:hover{color:var(--text)}
body.rail-off .rail{display:none}body.rail-off .railshow{display:flex}
@media (min-width:1181px){
  body:not(.rail-off) .layout{padding-right:calc(var(--gap) + 56px)}
  body.rail-off .layout{padding-right:calc(var(--gap) + 18px)}
  .layout.gm{grid-template-columns:max(260px,var(--cw)) 6px max(220px,var(--gw)) 6px minmax(0,1fr) 340px;grid-template-areas:"chat g1 chans g2 stage game"}
}
.game{grid-area:game;outline:none}
.ph .ib{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--dim);cursor:pointer;padding:0}
.ph .ib svg{width:17px;height:17px}.ph .ib:hover,.ph .ib.on{color:var(--text);background:#1b212b}.ph .ib.on{color:rgb(var(--acc))}
.ph .sub+.ib{margin-left:auto}.ph .ib+.ib{margin-left:0}
.gbox{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px}
.gbox canvas{touch-action:none;cursor:none;display:block;image-rendering:pixelated;box-shadow:0 0 0 1px var(--line)}
.gform{position:absolute;left:12px;right:12px;bottom:14px;padding:12px;border-radius:12px;background:rgba(0,0,0,.82);box-shadow:0 0 0 1px rgba(255,255,255,.1);text-align:center;font-size:13px;color:#cfd2d7;backdrop-filter:blur(6px)}
.gform b{color:#fff}.grow{display:flex;gap:8px;margin-top:8px}
.grow input{flex:1;min-width:0;padding:6px 9px;border-radius:8px;border:0;background:#1b212b;color:var(--text);font:inherit;box-shadow:inset 0 0 0 1px #2f3846;outline:none}
.grow input:focus{box-shadow:inset 0 0 0 1px rgb(var(--acc))}
.grow button{padding:6px 14px;border:0;border-radius:8px;background:rgb(var(--acc));color:#04140a;font:700 13px/1 inherit;cursor:pointer}.grow button:disabled{opacity:.4}
.gerr{min-height:0;margin-top:6px;font-size:12px;color:#f87171}.gerr:empty{display:none}
.gskip{margin-top:6px;border:0;background:none;color:var(--dim);font:inherit;font-size:12px;cursor:pointer}.gskip:hover{color:var(--text)}
.glb{position:absolute;inset:8px;display:flex;flex-direction:column;padding:12px;border-radius:12px;background:#0f1214;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.glbh{display:flex;align-items:center;gap:8px;margin-bottom:8px}.glbh h3{margin:0;font:600 15px/1 var(--cond);flex:1}
.glbh button{border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:4px 8px;cursor:pointer}.glbh button:hover{background:#1b212b;color:var(--text)}
:is(#glist,#fglist,#banklist){list-style:none;margin:0;padding:14px 4px 4px 12px;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
:is(#glist,#fglist,#banklist) li{list-style:none}
.lbr{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:#10141b;font-size:14px}
:is(#glist,#fglist,#banklist) li.lbr.me{outline:2px solid rgb(var(--acc)/.75);outline-offset:2px}
:is(#glist,#fglist,#banklist) li.none{justify-content:center;color:var(--dim);padding:22px 0;font-size:13px}
:is(#glist,#fglist,#banklist) .rk{width:20px;text-align:center;font-weight:700;font-size:13px;color:var(--dim)}
:is(#glist,#fglist,#banklist) .lbr[class*=' '] .rk{color:rgb(var(--m))}
:is(#glist,#fglist,#banklist) .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(#glist,#fglist,#banklist) b{font-variant-numeric:tabular-nums}
/* tablets and phones: the game opens as a floating window above the page; the side bar becomes a small button bottom right */
@media (max-width:1180px){
  .rail{top:auto;bottom:12px;right:12px;transform:none;flex-direction:row-reverse;width:auto;padding:5px 6px}
  .railshow{top:auto;bottom:12px;transform:none}
  .game{position:fixed;right:12px;bottom:72px;width:min(380px,calc(100vw - 24px));height:min(620px,calc(100vh - 90px));z-index:60;box-shadow:0 20px 50px -10px rgba(0,0,0,.8)}
}

/* leaderboard rows use the same tier look as the Global Watch cards: #1 diamond (the only one that shines), 2 gold, 3 silver, 4 bronze, 5 iron */
.lbr.d{--m:185 242 255}.lbr.g{--m:245 197 66}.lbr.s{--m:213 219 227}.lbr.b{--m:208 138 74}.lbr.i{--m:138 148 158}
.lbr.d,.lbr.g,.lbr.s,.lbr.b,.lbr.i{background:rgb(var(--m)/calc(.12*var(--k)));border-color:rgb(var(--m)/calc(.2 + .25*var(--k)));box-shadow:0 0 calc(16px*var(--k)) calc(3px*var(--k)) rgb(var(--m)/calc(.4*var(--k))),inset 0 0 10px rgb(var(--m)/calc(.13*var(--k)))}
.lbr.g{--k:.9}.lbr.s{--k:.65}.lbr.b{--k:.45}.lbr.i{--k:.25}
/* #1: diamond, with a light sweep rippling across the card and a few twinkles (only the #1 gets this) */
.lbr.d{isolation:isolate;background:linear-gradient(135deg,rgb(185 242 255/.26),rgb(150 200 255/.13) 45%,rgb(220 190 255/.16));border-color:rgb(var(--m)/.85);box-shadow:0 0 20px 4px rgb(var(--m)/.5),inset 0 0 16px rgb(var(--m)/.24);filter:brightness(1.06)}
.lbr.d::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 38%,rgba(185,242,255,.08) 45%,rgba(255,255,255,.32) 50%,rgba(170,235,255,.12) 55%,transparent 62%) no-repeat;
  background-size:300% 100%;animation:diaSweep 6s cubic-bezier(.45,.05,.3,1) infinite}
.lbr.d::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:radial-gradient(circle at 18% 30%,rgba(255,255,255,1) 0 1.4px,transparent 2.6px),radial-gradient(circle at 72% 22%,rgba(220,250,255,1) 0 1.4px,transparent 2.6px),
  radial-gradient(circle at 86% 74%,rgba(255,255,255,1) 0 1.4px,transparent 2.6px),radial-gradient(circle at 40% 80%,rgba(200,245,255,1) 0 1.4px,transparent 2.6px);
  animation:diaTwinkle 2.2s ease-in-out infinite}
@keyframes diaSweep{0%{background-position:120% 0}60%,100%{background-position:-20% 0}}

.lbr.d .dia-crown{display:block;width:24px;height:18px;left:-9px;top:-12px}
.lbr.d .nm{font-weight:700}
:is(#glist,#fglist,#banklist) li.lbr{overflow:visible}

/* fish wallet (shared by the games) */
.wallet{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0 4px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:8px;width:44px}
.wallet:hover,.wallet.on{background:rgba(170,222,146,.1)}.wallet:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:2px}
.wallet svg{width:27px;height:15px;display:block}
.wallet b{font:700 11px/1 Inter,system-ui,sans-serif;color:#aade92;font-variant-numeric:tabular-nums}
.wallet.bump svg{animation:wbump .5s ease-out}
@keyframes wbump{30%{transform:translateY(-3px) scale(1.2)}100%{transform:none}}
#fgcanvas{touch-action:none;cursor:pointer;display:block;image-rendering:pixelated;box-shadow:0 0 0 1px var(--line)}
@media (max-width:1180px){.wallet{flex-direction:row;padding:0 4px}}

/* sections hidden from the side bar */
.layout.no-chat .chat,.layout.no-chat #grip1,.layout.no-lb .chans,.layout.no-lb #grip2{display:none}

@media (max-width:1180px){
  .layout.no-chat{grid-template-areas:"stage stage" "chans chans"}
  .layout.no-lb{grid-template-areas:"stage stage" "chat chat"}
  .layout.no-chat.no-lb{grid-template-areas:"stage stage";grid-template-rows:auto}
}
@media (max-width:760px){
  .layout.no-chat{grid-template-areas:"stage" "chans";grid-template-rows:auto auto}
  .layout.no-lb{grid-template-areas:"stage" "chat";grid-template-rows:auto 65vh}
  .layout.no-chat.no-lb{grid-template-areas:"stage";grid-template-rows:auto}
}

/* the side bar holds two separate groups: sections (chat, leaderboard) and games (wallet, Cat Jump, Cat Fishing) */
.rail{background:none;border:0;box-shadow:none;padding:0;gap:10px;width:48px}
.rgroup{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px;width:48px;border:1px solid var(--line);border-radius:var(--r);background:rgba(21,26,34,.92);box-shadow:0 14px 34px -16px rgba(0,0,0,.7)}
.rail>.rb.small{width:48px;height:22px;border:1px solid var(--line);border-radius:10px;background:rgba(21,26,34,.92)}
@media (max-width:1180px){
  .rail{flex-direction:row-reverse;width:auto;padding:0;gap:8px}
  .rgroup{flex-direction:row-reverse;width:auto;padding:5px 6px}
  .rail>.rb.small{width:22px;height:46px}
}

/* smooth section open/close on wide screens: the grid tracks slide, panels fade */
@media (min-width:1181px){
  .layout{column-gap:0;grid-template-columns:max(260px,var(--cw)) 14px max(220px,var(--gw)) 14px minmax(0,1fr) 0px;grid-template-areas:"chat g1 chans g2 stage game"}
  .layout.anim{transition:grid-template-columns .38s cubic-bezier(.4,0,.2,1)}
  .layout>*{min-width:0}
  .layout .chat,.layout .chans,.layout .grip{transition:opacity .22s ease .12s,visibility 0s linear 0s}
  .layout.no-chat .chat,.layout.no-chat #grip1,.layout.no-lb .chans,.layout.no-lb #grip2{display:flex;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .38s}
  .layout.no-chat #grip1,.layout.no-lb #grip2{display:block}
  .layout .game{margin-left:4px}
  body.resizing .layout{transition:none}
}
@media (prefers-reduced-motion:reduce){.layout{transition:none!important}}

/* channel name glows softly green when it has enough active chatters (5+) to be shown */
.card.qual .nm{text-shadow:0 0 6px rgb(var(--acc)/.75),0 0 14px rgb(var(--acc)/.35)}

/* icons drawn in both themes */
svg.px{fill:currentColor;stroke:none;image-rendering:pixelated}
.ph .hi.px{width:18px;height:auto;max-height:18px;stroke:none}
.ph .hi.px{fill:rgb(var(--acc))}
.ph .ib svg.px,.rb svg.px{fill:currentColor;stroke:none}.ph .ib svg.px{width:14px;height:14px}.rb svg.px{width:18px;height:18px}.rb.small svg.px,.railshow svg.px{width:6px;height:12px}
/* =====================================================================================================
   PIXEL THEME - handheld-green pixel art look, matching the games. Hard edges, stepped glows, pixel fonts.
   ===================================================================================================== */
html:not(.classic){--px-bg:#0b1f25;--px-bg2:#0e2930;--px-dk:#1b4238;--px-md:#4a8f57;--px-lt:#a2d78a;--px-ink:#04110f;--acc:82 158 96;--green:#aade92;
  --pxf:'Pixelify Sans','Silkscreen',ui-monospace,monospace;--pxh:'Silkscreen','Pixelify Sans',ui-monospace,monospace;--cond:var(--pxf)}
html:not(.classic) body{background:#071619;background-image:radial-gradient(rgba(170,222,146,.05) 1px,transparent 1px);background-size:6px 6px;font-family:var(--pxf);color:#d8eccf}
html:not(.classic) ::-webkit-scrollbar{width:8px}html:not(.classic) ::-webkit-scrollbar-thumb{background:var(--px-dk);border-radius:0;border:2px solid var(--px-ink)}html:not(.classic) *{scrollbar-color:var(--px-dk) transparent}
html:not(.classic) h2{font:400 15px/1 var(--pxh);letter-spacing:.04em;text-transform:uppercase;color:var(--px-lt)}
html:not(.classic) svg.px{fill:currentColor;stroke:none;image-rendering:pixelated}
/* panels: square, 2px frame, hard drop shadow */
html:not(.classic) .panel{border:0;border-radius:0;background:var(--px-bg);box-shadow:0 0 0 2px var(--px-dk),0 0 0 4px var(--px-ink),6px 6px 0 2px rgba(0,0,0,.45)}
html:not(.classic) .ph{gap:10px;padding:10px 12px;background:var(--px-dk);border-bottom:2px solid var(--px-md);box-shadow:inset 0 2px 0 rgba(170,222,146,.15)}
html:not(.classic) .ph .hi.px{width:18px;height:auto;max-height:18px;fill:var(--px-lt);stroke:none}
html:not(.classic) .pill{border-radius:0;background:var(--px-md);color:var(--px-ink);font:400 11px/1 var(--pxh);padding:3px 6px;text-transform:uppercase}
html:not(.classic) .sub{font:400 10px/1 var(--pxh);color:var(--px-md);text-transform:uppercase}
html:not(.classic) .ph .ib{border-radius:0}html:not(.classic) .ph .ib svg.px{width:14px;height:14px;fill:currentColor;stroke:none}html:not(.classic) .ph .ib:hover,html:not(.classic) .ph .ib.on{background:var(--px-bg)}
html:not(.classic) .ph .ib.on{color:var(--px-lt)}
/* the leaderboard cards */
html:not(.classic) .cards{padding:18px 4px 6px}
html:not(.classic) .sect{font:400 10px/1 var(--pxh);letter-spacing:.06em;text-transform:uppercase;color:var(--px-md);padding:0 12px 10px}
html:not(.classic) .card{margin:0 10px 12px;padding:9px 11px 8px;border:0;border-radius:0;background:var(--px-bg2);box-shadow:0 0 0 2px #1d4148,4px 4px 0 0 rgba(0,0,0,.35)}
html:not(.classic) .card .rk{border-radius:0;min-width:22px;height:22px;font:400 13px/1 var(--pxh);background:#1d4148;color:var(--px-lt);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
html:not(.classic) .card .rk.r0{background:#e0475a;color:#fff}
html:not(.classic) .card .nm{font:600 17px/1.15 var(--pxf);letter-spacing:.01em}
html:not(.classic) .card .mc{border-radius:0;background:var(--px-md);color:var(--px-ink);font:400 9px/1 var(--pxh);padding:3px 5px;text-transform:uppercase}
html:not(.classic) .card .sc{font:500 14px/1 var(--pxf);color:#cfe6c4}
html:not(.classic) .card .ac i{width:8px;height:8px;border-radius:0;background:var(--px-lt);box-shadow:0 0 0 2px rgba(170,222,146,.25)}
html:not(.classic) .card .ac b{font:700 21px/1 var(--pxf);color:var(--px-lt)}html:not(.classic) .card .ac small{font:400 9px/1 var(--pxh);text-transform:uppercase;color:var(--px-md)}
html:not(.classic) .card .ac.off b{color:#5b7a71}html:not(.classic) .card .ac.off i{background:#3b5a52;box-shadow:none}
html:not(.classic) .stats span{font:400 9px/1.3 var(--pxh);text-transform:uppercase;letter-spacing:.02em;color:#6f9c86}
html:not(.classic) .stats b{font:600 15px/1.15 var(--pxf);color:#e3f3da}
html:not(.classic) .spark{border-radius:0;background:var(--px-ink);box-shadow:0 0 0 2px #1d4148}
html:not(.classic) .spark polyline{stroke:var(--px-lt);stroke-width:2;shape-rendering:crispEdges}html:not(.classic) .spark polygon{fill:rgba(82,158,96,.3)}
html:not(.classic) .spark span{font:400 9px/1 var(--pxh);color:var(--px-md)}
html:not(.classic) .card.qual .nm{text-shadow:0 0 0 transparent,2px 0 0 rgba(170,222,146,.18),-2px 0 0 rgba(170,222,146,.18),0 2px 0 rgba(170,222,146,.18),0 -2px 0 rgba(170,222,146,.18);color:var(--px-lt)}
/* tier highlights as stepped pixel glows that fade with rank: diamond strongest, iron faint */
html:not(.classic) .card.d,html:not(.classic) .card.g,html:not(.classic) .card.s,html:not(.classic) .card.b,html:not(.classic) .card.i{background:color-mix(in srgb,rgb(var(--m)) calc(10% * var(--k)),var(--px-bg2));
  box-shadow:0 0 0 2px rgb(var(--m)/calc(.35 + .55*var(--k))),0 0 0 4px rgb(var(--m)/calc(.35*var(--k))),0 0 0 6px rgb(var(--m)/calc(.15*var(--k))),4px 4px 0 2px rgba(0,0,0,.35)}
html:not(.classic) .card.d{--k:1;background:linear-gradient(135deg,color-mix(in srgb,#b9f2ff 18%,var(--px-bg2)),color-mix(in srgb,#9ab8ff 8%,var(--px-bg2)) 50%,color-mix(in srgb,#dcbfff 12%,var(--px-bg2)));filter:none;
  box-shadow:0 0 0 2px rgb(185 242 255/.95),0 0 0 4px rgb(185 242 255/.4),0 0 0 6px rgb(185 242 255/.18),0 0 0 8px rgb(185 242 255/.07),4px 4px 0 2px rgba(0,0,0,.35)}
html:not(.classic) .card.d::after{border-radius:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.22) 47%,rgba(255,255,255,.22) 50%,transparent 51%,transparent 53%,rgba(255,255,255,.14) 54%,rgba(255,255,255,.14) 56%,transparent 57%) no-repeat;background-size:300% 100%}
html:not(.classic) .card.d::before{border-radius:0}
html:not(.classic) .lbr{border-radius:0;border:0;background:var(--px-bg2);box-shadow:0 0 0 2px #1d4148;font-family:var(--pxf)}
html:not(.classic) .lbr.d,html:not(.classic) .lbr.g,html:not(.classic) .lbr.s,html:not(.classic) .lbr.b,html:not(.classic) .lbr.i{background:color-mix(in srgb,rgb(var(--m)) calc(10% * var(--k,1)),var(--px-bg2));
  box-shadow:0 0 0 2px rgb(var(--m)/calc(.35 + .55*var(--k,1))),0 0 0 4px rgb(var(--m)/calc(.3*var(--k,1))),0 0 0 6px rgb(var(--m)/calc(.12*var(--k,1)));filter:none}
html:not(.classic) .lbr.d{--k:1}html:not(.classic) .lbr.d::after,html:not(.classic) .lbr.d::before{border-radius:0}
html:not(.classic) :is(#glist,#fglist,#banklist){gap:9px;padding:16px 8px 8px 14px}
html:not(.classic) :is(#glist,#fglist,#banklist) .rk{font:400 11px/1 var(--pxh)}html:not(.classic) :is(#glist,#fglist,#banklist) b{font:600 15px/1 var(--pxf)}
/* chat */
html:not(.classic) .chatlog{font:400 15px/1.45 var(--pxf);color:#d8eccf;padding:8px 12px}
html:not(.classic) .msg{border:0;border-radius:0;background:var(--px-bg2);box-shadow:0 0 0 2px #1d4148,3px 3px 0 0 rgba(0,0,0,.35);margin:8px 2px;padding:7px 10px}
html:not(.classic) .msg .t{font:400 9px/1 var(--pxh);color:#5f8b77}html:not(.classic) .msg .u{font-weight:600}
html:not(.classic) .msg.polite{box-shadow:0 0 0 2px var(--px-lt),0 0 0 4px rgba(170,222,146,.3),3px 3px 0 2px rgba(0,0,0,.35);animation:in .25s steps(4)}
html:not(.classic) .msg.new{animation:in .25s steps(4)}
/* video tiles: square pixel frames */
html:not(.classic) .tile{border-radius:0;background:#05110f;box-shadow:0 0 0 2px var(--px-dk),0 0 0 4px var(--px-ink),6px 6px 0 2px rgba(0,0,0,.4)}
html:not(.classic) .tile.pgm{box-shadow:0 0 0 2px #ff5a6a,0 0 0 4px rgba(255,90,106,.35),0 0 0 6px rgba(255,90,106,.12),6px 6px 0 4px rgba(0,0,0,.4)}
html:not(.classic) .plate{background:linear-gradient(180deg,rgba(6,22,27,.88) 0%,rgba(6,22,27,.5) 62%,rgba(6,22,27,0) 100%)}
html:not(.classic) .rank{border-radius:0;font:400 18px/1 var(--pxh);background:var(--px-dk);box-shadow:inset -2px -2px 0 rgba(0,0,0,.3)}
html:not(.classic) .pgm .rank{background:#e0475a;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),0 0 0 2px rgba(255,90,106,.35)}
html:not(.classic) .name{font:600 19px/1.05 var(--pxf)}html:not(.classic) .small .name{font-size:15px}html:not(.classic) .small .rank{border-radius:0;font-size:14px}
html:not(.classic) .tag{font:400 9px/1 var(--pxh);text-transform:uppercase;letter-spacing:.04em}html:not(.classic) .tag i{border-radius:0;width:6px;height:6px}
html:not(.classic) .score{border-radius:0;background:rgba(6,22,27,.8);box-shadow:0 0 0 2px var(--px-dk);font:500 13px/1 var(--pxf)}
html:not(.classic) .stage-msg{font:400 12px/1.6 var(--pxh);text-transform:uppercase;color:var(--px-md)}
/* resize grips: pixel dots */
html:not(.classic) .grip::after{width:2px;background:repeating-linear-gradient(180deg,var(--px-dk) 0 4px,transparent 4px 8px);border-radius:0}
html:not(.classic) .grip:hover::after,html:not(.classic) .grip.drag::after{background:repeating-linear-gradient(180deg,var(--px-lt) 0 4px,transparent 4px 8px)}
/* side bar */
html:not(.classic) .rgroup,html:not(.classic) .rail>.rb.small,html:not(.classic) .railshow{border:0;border-radius:0;background:var(--px-bg);box-shadow:0 0 0 2px var(--px-dk),0 0 0 4px var(--px-ink),4px 4px 0 2px rgba(0,0,0,.4)}
html:not(.classic) .rb{border-radius:0;background:var(--px-bg2);color:#6f9c86}
html:not(.classic) .rb svg.px{width:18px;height:18px}html:not(.classic) .rb.small svg.px,html:not(.classic) .railshow svg.px{width:6px;height:12px}
html:not(.classic) .rb:hover{background:var(--px-dk);color:var(--px-lt)}
html:not(.classic) .rb.on{background:var(--px-dk);color:var(--px-lt);box-shadow:inset 0 0 0 2px var(--px-md)}
html:not(.classic) .wallet b{font:400 10px/1 var(--pxh);color:var(--px-lt)}
/* game overlays */
html:not(.classic) .gbox canvas,html:not(.classic) #fgcanvas{box-shadow:0 0 0 2px var(--px-dk)}
html:not(.classic) .gform,html:not(.classic) .glb{border-radius:0;background:var(--px-ink);box-shadow:0 0 0 2px var(--px-md),4px 4px 0 2px rgba(0,0,0,.5);font-family:var(--pxf)}
html:not(.classic) .glbh h3{font:400 13px/1 var(--pxh);text-transform:uppercase;color:var(--px-lt)}
html:not(.classic) .grow input{border-radius:0;font-family:var(--pxf);background:var(--px-bg2);box-shadow:inset 0 0 0 2px var(--px-dk)}
html:not(.classic) .grow button{border-radius:0;font:400 12px/1 var(--pxh);background:var(--px-md);color:var(--px-ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
html:not(.classic) .glbh button,html:not(.classic) .gskip{font:400 10px/1 var(--pxh);text-transform:uppercase}
html:not(.classic) .medal{image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){html:not(.classic) .msg,html:not(.classic) .msg.new{animation:none}}


/* classic theme (button on the side bar): the older smooth design */
html.classic .ph .hi.px{fill:rgb(var(--acc))}

/* ---------- dark mode (both designs): near-black backgrounds, softer accents ---------- */
html.dark:not(.classic){--px-bg:#061114;--px-bg2:#08171b;--px-dk:#123029;--px-md:#3a7546;--px-lt:#8fc479;--px-ink:#020809}
html.dark:not(.classic) body{background:#030a0c;background-image:radial-gradient(rgba(143,196,121,.035) 1px,transparent 1px);background-size:6px 6px;color:#bcd6b1}
html.dark:not(.classic) .card:not(.d):not(.g):not(.s):not(.b):not(.i),html.dark:not(.classic) .msg:not(.polite),html.dark:not(.classic) .lbr:not(.d):not(.g):not(.s):not(.b):not(.i){box-shadow:0 0 0 2px #0f2a2d,4px 4px 0 0 rgba(0,0,0,.5)}
html.dark.classic{--bg:#07090c;--panel:#0b0e12;--raise:#10141a;--line:#181d25;--text:#d7dbe2;--muted:#7a8494;--dim:#596273}
html.dark.classic body{background:#050608}
html.dark.classic .panel,html.dark.classic .rgroup,html.dark.classic .rail>.rb.small,html.dark.classic .railshow{background:rgba(11,14,18,.96)}
html.dark.classic .card{background:#0c0f14}html.dark.classic .msg{background:#0a0d11;border-color:#181d25}
html.dark.classic .tile{background:#020304}
html.dark .tile iframe{filter:none}
/* ---------- the game panels' "best" is an achievement: a clear badge ---------- */
.game .ph .sub{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:rgb(var(--acc)/.14);color:rgb(var(--acc));font-size:13px;font-weight:700;white-space:nowrap}
.game .ph .sub::before{content:'';width:12px;height:12px;background:currentColor;-webkit-mask:var(--trophy) center/contain no-repeat;mask:var(--trophy) center/contain no-repeat}
:root{--trophy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v3h-1v1h-1v1h-1v1H8v1h1v2H3V7h1V6H3V5H2V4H1V3H0V1h1z'/%3E%3C/svg%3E")}
html:not(.classic) .game .ph .sub{border-radius:0;background:var(--px-ink);color:var(--px-lt);box-shadow:0 0 0 2px var(--px-md),inset 0 -2px 0 rgba(0,0,0,.35);font:400 12px/1 var(--pxh);letter-spacing:.03em;padding:5px 8px}

.game .ph h2{white-space:nowrap}
html:not(.classic) .game .ph .sub{font-size:11px;padding:5px 7px}

/* ---------- tablets and phones: no pop-ups, a proper bottom bar with finger-sized buttons ---------- */
@media (max-width:1180px){
  .game{position:static;width:auto;height:auto;min-height:0;z-index:auto;scroll-margin-top:8px}
  .game .gbox{min-height:0}
  body{padding-bottom:84px}
  .rail{position:fixed;left:8px;right:8px;bottom:8px;top:auto;transform:none;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;width:auto;padding:0;z-index:70}
  .rgroup{flex-direction:row;gap:8px;padding:6px 8px}
  .rb{width:48px;height:48px}.rb svg.px{width:24px;height:24px}
  .wallet{flex-direction:row;gap:6px;padding:0 6px}.wallet svg{width:32px;height:18px}.wallet b{font-size:13px}
  #railhide,.railshow{display:none!important}
  body.rail-off .rail{display:flex}
  .ph{padding:12px 14px}.ph .ib{width:40px;height:40px}.ph .ib svg.px{width:18px;height:18px}
  .grow input,.grow button{min-height:42px;font-size:16px}
  .gskip,.glbh button{min-height:36px;padding:8px 12px}
}
@media (max-width:760px){
  .rail{left:0;right:0;bottom:0;gap:6px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(4,10,12,.94);border-top:2px solid var(--px-dk,#242b37)}
  .rgroup{box-shadow:none!important;background:transparent!important;padding:0 4px;gap:6px}
  .rb{width:52px;height:48px}
  .card .stats b{font-size:15px}
}

/* fish bank: everyone's fish totals, opened from the wallet */
.bankpop{position:fixed;right:72px;top:50%;transform:translateY(-50%);z-index:60;width:310px;max-height:min(72vh,540px);display:flex;flex-direction:column;padding:12px;border-radius:12px;background:#0f1214;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.55);animation:bankin .18s ease-out}
.bankpop[hidden]{display:none}
@keyframes bankin{from{opacity:0;transform:translate(10px,-50%)}}
.bankme{font-size:13px;color:#cfd2d7;padding:2px 2px 8px}.bankme b{color:#aade92;font-size:20px;font-variant-numeric:tabular-nums}.bankme small{display:block;color:var(--dim);font-size:12px;margin-top:4px}
.bankform{margin:0 0 6px}
#banklist b::after{content:' fish';font-weight:400;font-size:.8em;opacity:.7}
.wplus{position:absolute;left:50%;top:-6px;transform:translateX(-50%);pointer-events:none;font:700 12px/1 Inter,system-ui,sans-serif;color:#aade92;text-shadow:0 1px 0 #04110f,0 0 6px rgba(170,222,146,.6);white-space:nowrap;animation:wplus 1.4s ease-out forwards}
.wplus.big{font-size:16px;color:#ffe680;text-shadow:0 1px 0 #3a2a00,0 0 10px rgba(255,214,90,.8)}
@keyframes wplus{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}15%{opacity:1;transform:translate(-50%,-4px) scale(1.25)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px) scale(1)}}
.wallet.bump svg{animation:wbump .35s ease-out}.wallet.bump b{animation:wcount .35s ease-out}
@keyframes wcount{30%{transform:scale(1.35);color:#fff}}
.cfx-fish{position:fixed;left:0;top:0;width:18px;height:10px;z-index:9999;pointer-events:none;will-change:transform;filter:drop-shadow(0 0 3px rgba(170,222,146,.7))}
.cfx-fish svg{display:block;width:100%;height:100%}
.cfx-fish.gold{filter:sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.25) drop-shadow(0 0 4px rgba(255,214,90,.9))}
@media (max-width:1180px){.bankpop{left:12px;right:12px;width:auto;top:auto;bottom:84px;transform:none;max-height:62vh}@keyframes bankin{from{opacity:0;transform:translateY(10px)}}}
html:not(.classic) .bankpop{border-radius:0;background:var(--px-bg);box-shadow:0 0 0 2px var(--px-dk),0 0 0 4px var(--px-ink),6px 6px 0 2px rgba(0,0,0,.45)}
html:not(.classic) .bankpop h3{font:400 14px/1 var(--pxh);text-transform:uppercase;color:var(--px-lt)}
html:not(.classic) .bankme{font-family:var(--pxf);color:var(--px-md)}html:not(.classic) .bankme b{font:400 22px/1 var(--pxh);color:var(--px-lt)}
html:not(.classic) .wallet{border-radius:0}html:not(.classic) .wplus{font:400 11px/1 var(--pxh)}
@media (prefers-reduced-motion:reduce){.bankpop,.wplus,.wallet.bump svg,.wallet.bump b{animation:none}}
@media (max-width:1180px){.wallet{width:auto}}
#fgcanvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Fish Plinko */
#pkcanvas{touch-action:manipulation;cursor:pointer;display:block;image-rendering:pixelated;box-shadow:0 0 0 1px var(--line);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pkbar{display:flex;gap:8px;align-items:stretch;padding:0 10px 10px}
.pkbets{display:flex;flex:1;gap:4px;min-width:0}
.pkbets button{flex:1;min-width:0;padding:8px 0;border:0;border-radius:8px;background:#1b212b;color:var(--muted);font:700 13px/1 inherit;cursor:pointer;font-variant-numeric:tabular-nums}
.pkbets button[aria-checked=true]{background:rgb(var(--acc));color:#04140a}
.pkdrop{padding:8px 16px;border:0;border-radius:8px;background:#aade92;color:#04140a;font:800 15px/1 inherit;cursor:pointer;letter-spacing:.03em;transition:transform .06s}
.pkdrop:active{transform:translateY(2px) scale(.96)}
.pkdrop.no{animation:pkno .3s}
@keyframes pkno{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
html:not(.classic) .pkbets button{border-radius:0;font:400 12px/1 var(--pxh);background:var(--px-bg2);color:var(--px-md);box-shadow:inset 0 0 0 2px var(--px-dk)}
html:not(.classic) .pkbets button[aria-checked=true]{background:var(--px-md);color:var(--px-ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
html:not(.classic) .pkdrop{border-radius:0;font:400 15px/1 var(--pxh);background:var(--px-lt);color:var(--px-ink);box-shadow:inset -3px -3px 0 rgba(0,0,0,.25),0 0 0 2px var(--px-ink)}
html:not(.classic) .pkdrop:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,.25),0 0 0 2px var(--px-ink)}
html:not(.classic) #pkcanvas{box-shadow:0 0 0 2px var(--px-dk)}
@media (max-width:760px){.pkbets button,.pkdrop{min-height:48px;font-size:16px}}
@media (prefers-reduced-motion:reduce){.pkdrop.no{animation:none}}
.pkmode{display:flex;gap:4px;padding:0 10px 6px}
.pkmode button{flex:1;padding:7px 0;border:0;border-radius:8px;background:#1b212b;color:var(--muted);font:700 12px/1 inherit;cursor:pointer}
.pkmode button[data-mode=normal][aria-checked=true]{background:rgb(var(--acc));color:#04140a}
.pkmode button[data-mode=risk][aria-checked=true]{background:#f0465a;color:#fff;box-shadow:0 0 14px rgba(240,70,90,.55)}
#plinko.risk .pkdrop{background:#f0465a;color:#fff}
#plinko.risk #pkcanvas{box-shadow:0 0 0 2px #f0465a,0 0 18px rgba(240,70,90,.35)}
html:not(.classic) .pkmode button{border-radius:0;font:400 11px/1 var(--pxh);text-transform:uppercase;background:var(--px-bg2);color:var(--px-md);box-shadow:inset 0 0 0 2px var(--px-dk)}
html:not(.classic) .pkmode button[data-mode=normal][aria-checked=true]{background:var(--px-md);color:var(--px-ink)}
html:not(.classic) .pkmode button[data-mode=risk][aria-checked=true]{background:#f0465a;color:#fff;box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),0 0 12px rgba(240,70,90,.45)}
html:not(.classic) #plinko.risk .pkdrop{background:#f0465a;color:#fff}
@media (max-width:760px){.pkmode button{min-height:42px;font-size:14px}}
.sndbtn.off{opacity:.45}.sndbtn.off svg path{clip-path:inset(0 40% 0 0)}

/* fish collection log: slides up from the bottom of the fishing game */
.flog{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;padding:10px 10px 12px;border-radius:12px;background:#0f1214;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 -10px 30px rgba(0,0,0,.5);
  transform:translateY(calc(100% + 16px));visibility:hidden;transition:transform .5s cubic-bezier(.2,1.25,.35,1),visibility 0s linear .5s}
.flog.open{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,1.25,.35,1),visibility 0s}
.flogh{display:flex;align-items:center;gap:8px;margin-bottom:8px}.flogh h3{margin:0;flex:1;font:600 14px/1 var(--cond)}.flogh h3 span{color:var(--dim);font-weight:400;margin-left:4px}
.flogh button{border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:12px;padding:4px 8px;cursor:pointer}.flogh button:hover{background:#1b212b;color:var(--text)}
.floggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fcell{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;border-radius:8px;background:#141a20;box-shadow:inset 0 0 0 1px #232c35;overflow:visible}
.fcell canvas{display:block;width:78%;height:52%;object-fit:contain;image-rendering:pixelated}
.fcell .fn{font-size:9px;line-height:1;color:var(--dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fcell .fc{position:absolute;right:4px;top:3px;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}
.fcell.got{background:#17221f;box-shadow:inset 0 0 0 1px #2e4a3d}.fcell.got .fn{color:#cfe8c4}
.fcell.gold.got{background:#2a2410;box-shadow:inset 0 0 0 1px #8a6d1c,0 0 12px rgba(245,197,66,.35)}
.fcell.new{animation:fnew 1.1s cubic-bezier(.2,1.6,.4,1);z-index:2}
.fcell.new::after{content:'NEW!';position:absolute;left:50%;top:-8px;transform:translateX(-50%) rotate(-6deg);padding:2px 5px;border-radius:4px;background:#f5c542;color:#2a1d00;font:800 9px/1 Inter,system-ui,sans-serif;box-shadow:0 2px 0 #9a6b00;animation:fbadge .6s ease-out both .45s}
@keyframes fnew{0%{transform:scale(.6)}35%{transform:scale(1.25) rotate(-4deg);box-shadow:inset 0 0 0 2px #aade92,0 0 22px rgba(170,222,146,.8)}70%{transform:scale(.95) rotate(2deg)}100%{transform:none}}
@keyframes fbadge{from{opacity:0;transform:translateX(-50%) scale(.3)}to{opacity:1}}
html:not(.classic) .flog{border-radius:0;background:var(--px-bg);box-shadow:0 0 0 2px var(--px-dk),0 0 0 4px var(--px-ink),0 -8px 0 0 rgba(0,0,0,.35)}
html:not(.classic) .flogh h3{font:400 13px/1 var(--pxh);text-transform:uppercase;color:var(--px-lt)}html:not(.classic) .flogh button{font:400 10px/1 var(--pxh);text-transform:uppercase}
html:not(.classic) .fcell{border-radius:0;background:var(--px-bg2);box-shadow:inset 0 0 0 2px #163238}
html:not(.classic) .fcell.got{background:#123029;box-shadow:inset 0 0 0 2px var(--px-dk)}
html:not(.classic) .fcell.gold.got{background:#2a2410;box-shadow:inset 0 0 0 2px #8a6d1c,0 0 12px rgba(245,197,66,.35)}
html:not(.classic) .fcell .fn,html:not(.classic) .fcell .fc{font-family:var(--pxh);font-size:8px;text-transform:uppercase}
html:not(.classic) .fcell.new::after{border-radius:0;font:400 9px/1 var(--pxh)}
#fglogbtn.on{color:var(--text)}
@media (prefers-reduced-motion:reduce){.flog,.flog.open{transition:none}.fcell.new,.fcell.new::after{animation:none}}
.ph .sub{min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ph h2{flex-shrink:0}.ph .ib{flex-shrink:0}
.fcell canvas,html:not(.classic) .gbox .fcell canvas{box-shadow:none!important;cursor:default}

/* Kick link in the fish bank */
.banklink{margin:0 0 8px;padding:8px 10px;border-radius:10px;background:#12171c;box-shadow:inset 0 0 0 1px #232c35;font-size:12px;color:#cfd2d7}
.banklink:empty{display:none}
.banklink p{margin:0 0 6px;line-height:1.35}.banklink small{color:var(--dim)}
.banklink .krow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.banklink button{border:0;border-radius:7px;padding:7px 10px;font:700 12px/1 inherit;cursor:pointer;background:#53fc18;color:#0b0e0f}
.banklink button.ghost{background:#1b212b;color:var(--muted);font-weight:600}
.banklink .kcode{display:inline-block;padding:6px 10px;border-radius:8px;background:#0b0e0f;color:#53fc18;font:800 16px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.12em;box-shadow:inset 0 0 0 1px #2c3a1f;user-select:all}
.banklink .kname{color:#53fc18;font-weight:700}
.kbadge{display:inline-block;margin-left:5px;padding:1px 4px;border-radius:4px;background:#53fc18;color:#0b0e0f;font:800 9px/1.2 Inter,system-ui,sans-serif;vertical-align:1px}
.kbadge.chat{background:#2a3a1c;color:#9fe870}
html:not(.classic) .banklink{border-radius:0;background:var(--px-bg2);box-shadow:inset 0 0 0 2px var(--px-dk);font-family:var(--pxf)}
html:not(.classic) .banklink button{border-radius:0;font:400 11px/1 var(--pxh);text-transform:uppercase;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
html:not(.classic) .banklink .kcode{border-radius:0;font-family:var(--pxh)}
html:not(.classic) .kbadge{border-radius:0;font:400 8px/1.3 var(--pxh)}

/* "just for fun" wallet */
.bankmode{display:flex;gap:4px;margin:0 0 8px;font-size:12px;color:var(--dim)}
.bankmode button{flex:1;padding:6px 0;border:0;border-radius:7px;background:#1b212b;color:var(--muted);font:700 12px/1 inherit;cursor:pointer}
.bankmode button[aria-pressed=true]{background:rgb(var(--acc));color:#04140a}
.bankmode button:last-child[aria-pressed=true]{background:#ffd34d;color:#2a1d00}
.refill{margin-top:6px;border:0;border-radius:7px;padding:6px 10px;background:#ffd34d;color:#2a1d00;font:700 12px/1 inherit;cursor:pointer}
.wallet.fun::after{content:'FUN';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);padding:1px 3px;border-radius:3px;background:#ffd34d;color:#2a1d00;font:800 8px/1.1 Inter,system-ui,sans-serif;pointer-events:none}
.wallet.fun b{color:#ffd34d}
html:not(.classic) .bankmode button,html:not(.classic) .refill{border-radius:0;font:400 11px/1 var(--pxh);text-transform:uppercase}
html:not(.classic) .bankmode button[aria-pressed=true]{background:var(--px-md);color:var(--px-ink)}
html:not(.classic) .bankmode button:last-child[aria-pressed=true]{background:#ffd34d;color:#2a1d00}
html:not(.classic) .wallet.fun::after{border-radius:0;font:400 7px/1.2 var(--pxh)}
html:not(.classic) .wallet.fun b{color:#ffd34d}

/* chat names never flip the direction of the rest of the line; strange text never spills out of its line */
.msg .u{unicode-bidi:isolate}.msg{overflow:hidden;overflow-wrap:anywhere}

/* ===== chat: Kick's own chat inside our frame, with an Auto switch and a channel list ===== */
.chat [hidden]{display:none!important}
.auto{position:relative;margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);user-select:none;-webkit-user-select:none}
.auto input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.auto .sw{position:relative;width:30px;height:17px;border-radius:999px;background:#2a3140;transition:background .2s}
.auto .sw::after{content:'';position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#cfd5de;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.auto input:checked+.sw{background:rgb(var(--acc))}
.auto input:checked+.sw::after{transform:translateX(13px);background:#fff}
.auto input:focus-visible+.sw{outline:2px solid rgb(var(--acc));outline-offset:2px}
.auto.on .al{color:rgb(var(--acc))}
.auto:has(input:disabled){opacity:.35;cursor:default}
.pill:not(:empty)+.auto{margin-left:auto}
.chat .ph .ib{margin-left:0}
.chatbar{padding:8px 10px;border-bottom:1px solid var(--line)}
.chatbar select{width:100%;appearance:none;-webkit-appearance:none;padding:7px 30px 7px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  background:#10141b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2322c55e'/%3E%3C/svg%3E") no-repeat right 11px center/10px 6px;
  color:var(--text);font:600 13px/1.2 Inter,'Segoe UI',system-ui,sans-serif;text-overflow:ellipsis}
.chatbar select:focus-visible{outline:2px solid rgb(var(--acc));outline-offset:1px}
.chatbar option{background:#10141b;color:var(--text)}
.kchat{flex:1;min-height:0;position:relative;background:#0b0e11}
.kchat iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
html:not(.classic) .auto{font:400 10px/1 var(--pxh);text-transform:uppercase;letter-spacing:.04em;color:var(--px-md)}
html:not(.classic) .auto .sw{border-radius:0;background:var(--px-ink);box-shadow:0 0 0 2px var(--px-dk)}
html:not(.classic) .auto .sw::after{border-radius:0;background:var(--px-dk)}
html:not(.classic) .auto input:checked+.sw{background:var(--px-md)}
html:not(.classic) .auto input:checked+.sw::after{background:var(--px-lt);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
html:not(.classic) .auto.on .al{color:var(--px-lt)}
html:not(.classic) .chatbar{background:var(--px-bg);border-bottom:2px solid var(--px-dk)}
html:not(.classic) .chatbar select{border:0;border-radius:0;background-color:var(--px-bg2);box-shadow:inset 0 0 0 2px var(--px-dk);color:var(--px-lt);font:400 14px/1.2 var(--pxf);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h5v1H0zM1 1h3v1H1zM2 2h1v1H2z' fill='%23a2d78a'/%3E%3C/svg%3E")}
html:not(.classic) .chatbar select:hover{box-shadow:inset 0 0 0 2px var(--px-md)}
html:not(.classic) .chatbar option{background:var(--px-bg2);color:var(--px-lt)}
html:not(.classic) .kchat{background:#04110f}
html:not(.classic) .kchat iframe{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);box-shadow:0 0 0 2px var(--px-dk)}
@media (max-width:760px){.auto .sw{width:38px;height:22px}.auto .sw::after{width:18px;height:18px}.auto input:checked+.sw::after{transform:translateX(16px)}.chatbar select{min-height:44px;font-size:16px}}

/* ===== click a card: only that video ("your pick", green), click again for the top 3 ===== */
.tile{transition:box-shadow .4s,opacity .35s ease,transform .35s ease}
.tile.gone{opacity:0;transform:scale(.96);pointer-events:none}
.tile.enter{opacity:0}
.tile.solo{box-shadow:0 0 0 2px #4ade80,0 0 30px -6px rgba(74,222,128,.65),0 22px 44px -20px rgba(0,0,0,.9)}
.solo .rank{background:#22c55e;box-shadow:0 0 14px rgba(74,222,128,.6)}
.solo .tag{color:#c8f7d6}.solo .tag i{background:#4ade80}
.soloback{display:none;pointer-events:auto;flex:none;align-items:center;gap:5px;height:28px;padding:0 12px 0 10px;border:0;border-radius:999px;background:rgba(8,10,14,.72);color:#fff;
  font:600 13px/1 Inter,'Segoe UI',system-ui,sans-serif;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.soloback::before{content:'';width:0;height:0;border:5px solid transparent;border-right:6px solid currentColor;border-left:0}
.soloback:hover{background:#22c55e;color:#04140a}
.tile.solo .soloback{display:inline-flex}
.card.pick{outline:3px solid #4ade80;outline-offset:3px}
.card.pick .nm{color:#4ade80}
.card .kl{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:-3px;border-radius:6px;color:var(--dim)}
.card .kl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.card .kl:hover,.card .kl:focus-visible{color:rgb(var(--acc));background:rgb(var(--acc)/.14);outline:none}
html:not(.classic) .tile.solo{box-shadow:0 0 0 2px #aade92,0 0 0 4px rgba(170,222,146,.4),0 0 0 6px rgba(170,222,146,.14),6px 6px 0 4px rgba(0,0,0,.4)}
html:not(.classic) .solo .rank{background:#529e60;color:var(--px-ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.3),0 0 0 2px rgba(170,222,146,.4)}
html:not(.classic) .solo .tag i{background:#aade92}
html:not(.classic) .soloback{border-radius:0;background:var(--px-lt);color:var(--px-ink);font:400 11px/1 var(--pxh);text-transform:uppercase;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),0 0 0 2px var(--px-ink)}
html:not(.classic) .soloback:hover{background:#fff}
html:not(.classic) .card.pick{outline:2px solid #aade92;outline-offset:4px}
html:not(.classic) .card.pick .nm{color:#aade92}
html:not(.classic) .card .kl{border-radius:0}
@media (max-width:1180px){.stage{transition:height .35s cubic-bezier(.4,0,.2,1)}}
@media (max-width:760px){.soloback{height:36px;padding:0 14px}}
@media (prefers-reduced-motion:reduce){.tile,.stage{transition:none!important}}
.solo .tag i{animation:pickdot 1.8s ease-out infinite}
@keyframes pickdot{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%,100%{box-shadow:0 0 0 6px rgba(74,222,128,0)}}

/* ===== resizing the Leaderboard: the cards keep their height and just get narrower, dropping details one at a time
   (stat columns, tags, labels) until, at the narrowest, they are squares: rank, hype chevrons, name, active chatters.
   Every effect stays (tier glows, diamond shine, crown, hype shake, green "your pick" outline). ===== */
.chans{container:lb / inline-size}
@media (min-width:1181px){
  .chans .card{height:91px}
  html:not(.classic) .chans .card{height:82px}
  .chans .card .stats{grid-template-columns:repeat(auto-fit,minmax(66px,1fr));grid-auto-rows:0;grid-template-rows:auto;row-gap:0;overflow:hidden}
  .chans .ph h2,.chans .sect{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @container lb (max-width:400px){.chans .card .mc{display:none}}
  @container lb (max-width:350px){.chans .card .ac small{display:none}}
  @container lb (max-width:320px){.chans .card .kl{display:none}}
  @container lb (max-width:290px){.chans .card .sc,html:not(.classic) .chans .card .sc{font-size:0;gap:0}}   /* chevrons only */
  @container lb (max-width:250px){
    .chans .card{display:flex;flex-direction:column;padding:6px 8px}
    .chans .card .stats,.chans .card .spark{display:none!important}
    .chans .card .row{flex:1;flex-direction:column;justify-content:center;gap:2px;text-align:center}
    .chans .card .rk{position:absolute;left:6px;top:6px;min-width:18px;height:18px;font-size:11.5px}
    .chans .card .sc,html:not(.classic) .chans .card .sc{position:absolute;right:6px;top:4px;margin:0}
    .chans .card .nm{max-width:100%;font-size:13.5px;line-height:1.2;margin-top:10px}
    .chans .card .ac{margin:0;padding:0;justify-content:center}
    .chans .card .ac b{font-size:18px}
    html:not(.classic) .chans .card{padding:5px 6px}
    html:not(.classic) .chans .card .nm{font-size:12.5px;margin-top:9px}
    html:not(.classic) .chans .card .ac b{font-size:18px}
    html:not(.classic) .chans .card .rk{min-width:18px;height:18px;font-size:10px;top:5px;left:5px}
    .chans .dia-crown{width:22px;height:17px;left:-9px;top:-11px}
  }
  @container lb (max-width:175px){.chans .ph h2,.chans .sect{display:none}.chans .ph{justify-content:center}}   /* just the crown icon on top */
}

/* the chat has a fixed width: no resize grip beside it */
#grip1{visibility:hidden!important;pointer-events:none!important}

/* the CX cctv mark at the top of the side bar (a logo: it does nothing) */
.brand{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:none;
  border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,#16301f,#0d1a13);box-shadow:0 14px 34px -16px rgba(0,0,0,.7),inset 0 0 0 1px rgb(var(--acc)/.25);
  color:rgb(var(--acc));user-select:none;-webkit-user-select:none;cursor:default}
.brand b{font:800 19px/1 var(--cond);letter-spacing:.02em;color:#e9fbe9;text-shadow:0 0 8px rgb(var(--acc)/.6)}
.brand small{font:600 8.5px/1 Inter,'Segoe UI',system-ui,sans-serif;letter-spacing:.18em;text-transform:lowercase;color:rgb(var(--acc));margin-right:-.18em}
html:not(.classic) .brand{border:0;border-radius:0;background:var(--px-dk);box-shadow:0 0 0 2px var(--px-md),0 0 0 4px var(--px-ink),4px 4px 0 2px rgba(0,0,0,.4),inset -3px -3px 0 rgba(0,0,0,.25)}
html:not(.classic) .brand b{font:400 17px/1 var(--pxh);color:var(--px-lt);text-shadow:2px 2px 0 var(--px-ink)}
html:not(.classic) .brand small{font:400 7px/1 var(--pxh);letter-spacing:.12em;color:#c8f0b4;margin-right:-.12em}
@media (max-width:1180px){.brand{width:46px;height:46px}}
@media (max-width:760px){.brand{display:none}}   /* phones: the bottom bar needs the room */

/* wide screens: the CX mark sits at the very top of the side bar column (the buttons stay centred below) */
@media (min-width:1181px){.brand{position:fixed;top:var(--gap);right:8px;z-index:41}body.rail-off .brand{display:none}}
@media (max-width:1180px){.brand{display:none}}