/* ───────────── Slime glass ─────────────
   Clear, glossy, slightly squishy surfaces over a slowly drifting colour field.
   html.slime turns it on, --cloud (0..1) sets how frosted it is, html.no-anim stops all motion. */
:root{--cloud:.1;--spring:cubic-bezier(.34,1.56,.64,1);--goo:cubic-bezier(.5,1.8,.4,.8)}

/* ---------- the colour field behind everything (layers and the 39 backgrounds live in backgrounds.css) ---------- */
@keyframes slimeDrift{
  0%{transform:translate3d(0,0,0) rotate(0) scale(1,1)}
  33%{transform:translate3d(6vmax,4vmax,0) rotate(40deg) scale(1.15,.9)}
  66%{transform:translate3d(-4vmax,7vmax,0) rotate(-25deg) scale(.92,1.12)}
  100%{transform:translate3d(3vmax,-5vmax,0) rotate(15deg) scale(1.08,1)}
}
/* low-power: thinner blur is much cheaper to draw */
html.slime.lite,html.slime.battery-low,html.slime.heat-paused{--gl-blur:min(calc(3px + var(--cloud) * 40px), 10px)}
/* nothing to see behind a call or a game: don't spend battery on it */
body:has(#call:not(.hidden)):not(.call-mini) #slimeBg,body.in-game #slimeBg{display:none!important}
html.slime #app,html.slime #auth,html.slime .screen{position:relative;z-index:1}

/* ---------- glass tokens ---------- */
html.slime{
  --slime-base:#eef1f9;
  --b1:rgba(120,160,255,.62);--b2:rgba(196,150,255,.55);--b3:rgba(110,232,206,.5);--b4:rgba(255,166,214,.5);--b5:rgba(255,220,130,.42);
  --gl-tint:255 255 255;
  --gl-a:calc(.05 + var(--cloud) * .82);        /* panels */
  --gl-a2:calc(.04 + var(--cloud) * .56);       /* fills: inputs, chips, plain buttons */
  --gl-blur:calc(5px + var(--cloud) * 38px);
  --gl-rim:rgba(255,255,255,.7);
  --gl-edge:rgba(255,255,255,.9);
  --gl-shine:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 60%);
  --gl-under:rgba(255,255,255,.38);
  --bg:transparent;
  --surface:rgb(var(--gl-tint) / var(--gl-a));
  --surface2:rgb(var(--gl-tint) / var(--gl-a2));
  --surface3:rgb(var(--gl-tint) / calc(var(--gl-a2) + .18));
  --glass:rgb(var(--gl-tint) / var(--gl-a));
  --them:rgb(var(--gl-tint) / calc(var(--gl-a) + .24));
  --line:rgba(255,255,255,.55);
  --gl-sh:0 10px 34px rgba(60,72,120,.16),0 2px 6px rgba(60,72,120,.08);
}
@media(prefers-color-scheme:dark){html.slime{
  --slime-base:#06070c;
  --b1:rgba(48,92,255,.5);--b2:rgba(140,60,255,.45);--b3:rgba(0,190,150,.36);--b4:rgba(255,60,160,.34);--b5:rgba(255,170,0,.26);
  --gl-tint:28 31 42;
  --gl-a:calc(.16 + var(--cloud) * .7);
  --gl-a2:calc(.12 + var(--cloud) * .54);
  --gl-rim:rgba(255,255,255,.14);
  --gl-edge:rgba(255,255,255,.28);
  --gl-shine:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 60%);
  --gl-under:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.1);
  --gl-sh:0 12px 38px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
}}
html.slime body{background:var(--slime-base)}

/* glass recipe: translucent fill + gloss on top + bright rim + soft inner glow at the bottom = clear slime */
html.slime :is(header,#composer,#recBar,.sheet,#msgMenu,.card,#toast,.set-card,#sidebar){
  background:var(--gl-shine),var(--glass);
  border-color:var(--gl-rim);
}
html.slime :is(header,#composer,#recBar,.sheet,#msgMenu,.card,#toast){
  -webkit-backdrop-filter:saturate(1.9) blur(var(--gl-blur));backdrop-filter:saturate(1.9) blur(var(--gl-blur));
}
html.slime :is(.sheet,#msgMenu,.card,.set-card){
  box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim),inset 0 -14px 30px -18px var(--gl-under),var(--gl-sh);
}
html.slime header{box-shadow:inset 0 -1px 0 var(--gl-rim)}
html.slime #composer{box-shadow:inset 0 1px 0 var(--gl-rim)}
html.slime #sidebar{border-right:1px solid var(--gl-rim)}
html.slime #chat{background:rgb(var(--gl-tint) / calc(var(--gl-a2) * .35))}
html.slime .screen{background:transparent}
html.slime #toast{color:var(--text);box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim),var(--gl-sh)}
html.slime .modal{background:rgba(20,24,40,calc(.12 + var(--cloud) * .18))}

/* fields and plain buttons: thinner glass with a wet top edge */
html.slime :is(input:not([type=checkbox]):not([type=range]),textarea,.field-wrap,details){box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim)}
html.slime .field-wrap{background:var(--gl-shine),var(--surface)}
html.slime .field-wrap textarea,html.slime .field-wrap input{box-shadow:none;background:transparent}
html.slime :is(#app,.sheet,.card) button:not(.icon):not(.primary):not(.danger):not(.switch):not([class*="bt-"]):not([class*="rr-"]):not(.round):not(.title):not(.conv){
  box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim);
}
html.slime :is(.seg2,.searchbox input){box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim)}
html.slime .conv.active{background:rgba(74,116,255,.16);box-shadow:inset 0 0 0 1px rgba(74,116,255,.25)}

/* bubbles: theirs are clear jelly, mine are glossy coloured jelly */
html.slime .them .bubble{background:var(--gl-shine),var(--them);border-color:var(--gl-rim);box-shadow:inset 0 1px 0 var(--gl-edge),0 2px 10px rgba(60,72,120,.1)}
html.slime .me .bubble{background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,0) 60%),var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 16px -10px rgba(255,255,255,.35),0 6px 18px rgba(79,107,255,.32)}
html.slime .day,html.slime .react{background:var(--gl-shine),var(--surface);box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim)}

/* switches and sliders get a liquid look */
html.slime .switch{box-shadow:inset 0 1px 3px rgba(0,0,0,.12),inset 0 0 0 1px var(--gl-rim)!important}
html.slime .switch::after{background:linear-gradient(180deg,#fff,#eef1f8);box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 -2px 4px rgba(0,0,0,.05)}

/* games: menus and result cards follow the glass; the felt tables keep their colour */
html.slime :is(.gm-card,.gm-live,.tl-seat,.to-row){background:var(--gl-shine),var(--surface2);box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim)}

/* ---------- cloudiness slider ---------- */
.cloud-row.off{opacity:.45}
.cloud-ctl{display:flex;align-items:center;gap:8px;flex:0 1 210px;min-width:150px}
.cloud-end{font-size:16px;line-height:1}
#setCloud{-webkit-appearance:none;appearance:none;flex:1;height:30px;background:transparent;padding:0;border:0;box-shadow:none;cursor:pointer}
#setCloud::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--accent) 0 var(--pct,45%),var(--surface3) var(--pct,45%));box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
#setCloud::-moz-range-track{height:10px;border-radius:99px;background:var(--surface3)}
#setCloud::-moz-range-progress{height:10px;border-radius:99px;background:var(--accent)}
#setCloud::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e9eef9 60%,#d6deef);box-shadow:0 3px 10px rgba(0,0,0,.22),inset 0 -2px 4px rgba(0,0,0,.06);transition:transform .35s var(--spring)}
#setCloud::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e9eef9 60%,#d6deef);box-shadow:0 3px 10px rgba(0,0,0,.22)}
#setCloud:active::-webkit-slider-thumb{transform:scale(1.25,1.12)}
#setCloud:disabled{cursor:default}

/* ---------- squishy motion (all switched off by html.no-anim) ---------- */
html:not(.no-anim) button{transition:transform .5s var(--spring),background .2s,filter .2s,opacity .2s,box-shadow .2s}
html:not(.no-anim) button:active:not(:disabled){transform:scale(var(--sqx,.9),var(--sqy,.84));transition-duration:.08s}
html:not(.no-anim) button.jig{animation:slimeJig .7s linear}
@keyframes slimeJig{0%{transform:scale(var(--sqx,.88),var(--sqy,.8))}20%{transform:scale(1.1,.9)}36%{transform:scale(.93,1.08)}52%{transform:scale(1.05,.96)}67%{transform:scale(.98,1.025)}82%{transform:scale(1.008,.994)}100%{transform:none}}
html:not(.no-anim) .rr-hand .rr-card:active{transform:translateY(-10px) scale(.95,.92)}
html:not(.no-anim) .sheet{animation:slimeSheet .85s linear}
@keyframes slimeSheet{
  0%{transform:translateY(80px) scale(.9,1.1);opacity:0}
  28%{transform:translateY(-12px) scale(1.05,.93);opacity:1}
  46%{transform:translateY(5px) scale(.97,1.04)}
  62%{transform:translateY(-3px) scale(1.02,.98)}
  78%{transform:translateY(1px) scale(.993,1.008)}
  100%{transform:none}
}
html:not(.no-anim) #msgMenu,html:not(.no-anim) .card{animation:slimePop .7s linear}
@keyframes slimePop{0%{transform:scale(.75,.6);opacity:0}30%{transform:scale(1.07,.93);opacity:1}48%{transform:scale(.96,1.05)}64%{transform:scale(1.025,.98)}80%{transform:scale(.99,1.01)}100%{transform:none}}
html:not(.no-anim) .m.in .bubble{animation:slimeBubble .75s linear;transform-origin:bottom left}
html:not(.no-anim) .m.me.in .bubble{transform-origin:bottom right}
@keyframes slimeBubble{0%{transform:scale(.5,.3);opacity:0}26%{transform:scale(1.12,.88);opacity:1}44%{transform:scale(.93,1.08)}60%{transform:scale(1.045,.965)}75%{transform:scale(.985,1.015)}88%{transform:scale(1.005,.995)}100%{transform:none}}
html:not(.no-anim) .m.in{animation:none}
html:not(.no-anim) .switch::after{transition:width .25s var(--ease)!important}
html:not(.no-anim) .switch:checked::after{animation:knobOn .6s linear}
html:not(.no-anim) .switch:not(:checked)::after{animation:knobOff .6s linear}
@keyframes knobOn{0%{transform:translateX(0)}35%{transform:translateX(23px) scale(1.2,.82)}55%{transform:translateX(18.5px) scale(.9,1.1)}72%{transform:translateX(21px) scale(1.05,.96)}86%{transform:translateX(19.6px) scale(.99,1.01)}100%{transform:translateX(20px)}}
@keyframes knobOff{0%{transform:translateX(20px)}35%{transform:translateX(-3px) scale(1.2,.82)}55%{transform:translateX(1.5px) scale(.9,1.1)}72%{transform:translateX(-1px) scale(1.05,.96)}86%{transform:translateX(.4px) scale(.99,1.01)}100%{transform:translateX(0)}}
html:not(.no-anim) .switch:active::after{width:34px}
html:not(.no-anim) .switch:checked:active::after{transform:translateX(13px)}
html:not(.no-anim) #toast:not(.hidden){animation:slimeToast .7s linear}
@keyframes slimeToast{0%{transform:translateX(-50%) translateY(24px) scale(.8,.6);opacity:0}30%{transform:translateX(-50%) translateY(-4px) scale(1.08,.92);opacity:1}50%{transform:translateX(-50%) scale(.96,1.05)}68%{transform:translateX(-50%) scale(1.02,.98)}100%{transform:translateX(-50%)}}
html:not(.no-anim) .gm-card{transition:transform .5s var(--spring),box-shadow .2s}
html:not(.no-anim) .gm-card:hover{transform:translateY(-2px)}

/* animations off: everything stops, including the games' little bounces */
html.no-anim *,html.no-anim *::before,html.no-anim *::after{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}

/* phones: the chat slides over the list; once it's in place, hide the list so it can't show through the glass */
@media(max-width:699px){
  html.slime #sidebar{transition:visibility 0s}
  html.slime body.inchat #sidebar{visibility:hidden;transition:visibility 0s .32s}
  html.slime #chat{background:rgb(var(--gl-tint) / calc(var(--gl-a2) * .5))}
}

/* game lobby / results cards float over busy boards, so they stay mostly solid whatever the cloudiness */
html.slime .g-card{background:var(--gl-shine),rgb(var(--gl-tint) / calc(.72 + var(--cloud) * .24));-webkit-backdrop-filter:saturate(1.8) blur(22px);backdrop-filter:saturate(1.8) blur(22px);box-shadow:inset 0 1px 0 var(--gl-edge),inset 0 0 0 1px var(--gl-rim),0 24px 60px rgba(0,0,0,.3)}
html:not(.no-anim) .g-panel:not(.hidden) .g-card{animation:slimePop .7s linear}

/* background picker */
.bg-sheet{max-width:560px}
.bg-tabs{align-self:stretch}.bg-tabs button{flex:1}
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:2px 0 6px}
.bg-opt{display:flex;flex-direction:column;gap:6px;padding:4px;border-radius:18px;background:transparent!important;box-shadow:none!important;align-items:stretch}
.bg-opt .bgt{display:block;height:128px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.08)}
.bg-opt.on .bgt{box-shadow:0 0 0 3px var(--accent),0 4px 14px rgba(74,116,255,.3)}
.bg-nm{font-size:12.5px;font-weight:600;text-align:center;color:var(--text)}
.bg-mini{display:block;width:34px;height:46px;border-radius:9px;flex-shrink:0;margin-left:auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
#bgRow .chev{margin-left:10px}
/* with glass switched off, the chosen background still shows behind the messages */
html:not(.slime)[data-bg]:not([data-bg="slime"]) #chat{background:transparent}
html:not(.slime)[data-bg]:not([data-bg="slime"]) #app{position:relative;z-index:1}
#bgDlg{z-index:65}

/* dark backgrounds: switch to dark glass and light text whatever the phone's light/dark setting */
html.bg-dark{--bg:#0a0b0f;--surface:#14161c;--surface2:#1d2029;--surface3:#272b36;
  --text:#f2f3f7;--sub:#9aa1b2;--line:rgba(255,255,255,.08);--glass:rgba(20,22,28,.72);
  --them:#1f222c;--them-text:#f2f3f7;
  --sh1:0 1px 2px rgba(0,0,0,.4);--sh2:0 8px 28px rgba(0,0,0,.5);;color-scheme:dark}
html.bg-dark.slime{--slime-base:#06070c;
  --b1:rgba(48,92,255,.5);--b2:rgba(140,60,255,.45);--b3:rgba(0,190,150,.36);--b4:rgba(255,60,160,.34);--b5:rgba(255,170,0,.26);
  --gl-tint:28 31 42;
  --gl-a:calc(.16 + var(--cloud) * .7);
  --gl-a2:calc(.12 + var(--cloud) * .54);
  --gl-rim:rgba(255,255,255,.14);
  --gl-edge:rgba(255,255,255,.28);
  --gl-shine:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 60%);
  --gl-under:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.1);
  --gl-sh:0 12px 38px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);}
html.bg-dark body{color:var(--text)}

/* tiny air bubbles trapped in the slime */
html.slime{--bub:rgba(255,255,255,.8);--bubh:rgba(255,255,255,.95);--bubA:radial-gradient(circle at 8% 22%,transparent calc(3.2px - 1px),var(--bub) 3.2px,transparent calc(3.2px + .8px)),radial-gradient(circle at calc(8% - 1.3px) calc(22% - 1.3px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 14% 30%,transparent calc(1.8px - 1px),var(--bub) 1.8px,transparent calc(1.8px + .8px)),radial-gradient(circle at calc(14% - 0.7px) calc(30% - 0.7px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 91% 70%,transparent calc(2.6px - 1px),var(--bub) 2.6px,transparent calc(2.6px + .8px)),radial-gradient(circle at calc(91% - 1.0px) calc(70% - 1.0px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 86% 16%,transparent calc(1.6px - 1px),var(--bub) 1.6px,transparent calc(1.6px + .8px)),radial-gradient(circle at calc(86% - 0.6px) calc(16% - 0.6px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 52% 88%,transparent calc(2.2px - 1px),var(--bub) 2.2px,transparent calc(2.2px + .8px)),radial-gradient(circle at calc(52% - 0.9px) calc(88% - 0.9px),var(--bubh) 0 .9px,transparent 1.5px);--bubB:radial-gradient(circle at 6% 60%,transparent calc(2.4px - 1px),var(--bub) 2.4px,transparent calc(2.4px + .8px)),radial-gradient(circle at calc(6% - 1.0px) calc(60% - 1.0px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 94% 35%,transparent calc(3px - 1px),var(--bub) 3px,transparent calc(3px + .8px)),radial-gradient(circle at calc(94% - 1.2px) calc(35% - 1.2px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 89% 46%,transparent calc(1.6px - 1px),var(--bub) 1.6px,transparent calc(1.6px + .8px)),radial-gradient(circle at calc(89% - 0.6px) calc(46% - 0.6px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 30% 12%,transparent calc(1.8px - 1px),var(--bub) 1.8px,transparent calc(1.8px + .8px)),radial-gradient(circle at calc(30% - 0.7px) calc(12% - 0.7px),var(--bubh) 0 .9px,transparent 1.5px);--bubC:radial-gradient(circle at 3% 40%,transparent calc(2px - 1px),var(--bub) 2px,transparent calc(2px + .8px)),radial-gradient(circle at calc(3% - 0.8px) calc(40% - 0.8px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 97% 55%,transparent calc(2.6px - 1px),var(--bub) 2.6px,transparent calc(2.6px + .8px)),radial-gradient(circle at calc(97% - 1.0px) calc(55% - 1.0px),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at 70% 20%,transparent calc(1.5px - 1px),var(--bub) 1.5px,transparent calc(1.5px + .8px)),radial-gradient(circle at calc(70% - 0.6px) calc(20% - 0.6px),var(--bubh) 0 .9px,transparent 1.5px)}
@media(prefers-color-scheme:dark){html.slime{--bub:rgba(255,255,255,.28);--bubh:rgba(255,255,255,.5)}}
html.slime.bg-dark{--bub:rgba(255,255,255,.28);--bubh:rgba(255,255,255,.5)}
/* air bubbles: three per surface, each surface gets its own spots and sizes from bubbles.js (steady per item, so they never jump) */
html.slime :is(.sheet,.card,#msgMenu,#gChat,.set-card,#toast,.g-card,header,#composer,.field-wrap,.them .bubble){background-image:radial-gradient(circle at var(--b1x,8%) var(--b1y,22%),transparent calc(var(--b1s,3.2px) - 1px),var(--bub) var(--b1s,3.2px),transparent calc(var(--b1s,3.2px) + .8px)),radial-gradient(circle at calc(var(--b1x,8%) - var(--b1s,3.2px) * .4) calc(var(--b1y,22%) - var(--b1s,3.2px) * .4),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at var(--b2x,14%) var(--b2y,30%),transparent calc(var(--b2s,1.8px) - 1px),var(--bub) var(--b2s,1.8px),transparent calc(var(--b2s,1.8px) + .8px)),radial-gradient(circle at calc(var(--b2x,14%) - var(--b2s,1.8px) * .4) calc(var(--b2y,30%) - var(--b2s,1.8px) * .4),var(--bubh) 0 .9px,transparent 1.5px),radial-gradient(circle at var(--b3x,91%) var(--b3y,70%),transparent calc(var(--b3s,2.6px) - 1px),var(--bub) var(--b3s,2.6px),transparent calc(var(--b3s,2.6px) + .8px)),radial-gradient(circle at calc(var(--b3x,91%) - var(--b3s,2.6px) * .4) calc(var(--b3y,70%) - var(--b3s,2.6px) * .4),var(--bubh) 0 .9px,transparent 1.5px),var(--gl-shine)}
html:is(.gfx-low,.gfx-saver).slime :is(.sheet,.card,#msgMenu,#gChat,.set-card,#toast,.g-card,header,#composer,.field-wrap,.them .bubble){background-image:var(--gl-shine)}

/* graphics levels */
.sw-row.stack{flex-direction:column;align-items:stretch;gap:10px}.sw-row.stack .seg2{width:100%}.sw-row.stack .seg2 button{flex:1;padding-left:6px;padding-right:6px}
html.gfx-low{--bubA:none;--bubB:none;--bubC:none}
html.gfx-low.slime{--gl-a:calc(.62 + var(--cloud) * .3);--gl-a2:calc(.5 + var(--cloud) * .3)}
html.gfx-low.slime :is(header,#composer,#recBar,.sheet,#msgMenu,.card,#toast,#gChat,.g-card,#gameDock button,#call *){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.gfx-saver #slimeBg{display:none!important}
html.gfx-saver *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
html.gfx-saver #chat{background:var(--bg)!important}

/* ---------- Auto: optimized aesthetics ----------
   Same slime look, built to stay smooth on any device:
   · no live blur: glass is a static, slightly more opaque tint (blur re-renders every frame the background moves; a tint costs nothing)
   · no melting or squash-and-stretch: buttons dip and spring straight back, panels fade and slide in on a light spring
   · the jelly scroll springs and the drifting background stay (and still ease off when the device is hot or the battery low)
   Low uses the same rigid motion on top of its still background. */
html.gfx-auto.slime,html.gfx-auto.slime.bg-dark{--gl-a:calc(.6 + var(--cloud) * .36);--gl-a2:calc(.4 + var(--cloud) * .44)}
/* things you read on top of other things (sheets, menus, cards, toasts) get a nearly solid tint so text stays crisp without blur */
html.gfx-auto.slime :is(.sheet,#msgMenu,.card,#gChat,#bgDlg .sheet),html.gfx-low.slime :is(.sheet,#msgMenu,.card,#gChat){--gl-a:calc(.95 + var(--cloud) * .05);--glass:rgb(var(--gl-tint) / var(--gl-a))}
html.gfx-auto *,html.gfx-auto *::before,html.gfx-auto *::after,
html.gfx-low *,html.gfx-low *::before,html.gfx-low *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.gfx-auto .modal,html.gfx-low .modal{background:rgba(14,17,28,.4)}
html.gfx-auto .g-card{background:var(--gl-shine),rgb(var(--gl-tint) / calc(.86 + var(--cloud) * .12))}

/* rigid motion: dip, then spring back to shape (no wobble keyframes, no squash) */
html:is(.gfx-auto,.gfx-low):not(.no-anim) button{transition:transform .34s var(--spring),background-color .15s,color .15s,opacity .2s,box-shadow .2s}
html:is(.gfx-auto,.gfx-low):not(.no-anim) button:active:not(:disabled){transform:scale(.95);transform-origin:50% 50%!important;transition-duration:.09s}
html:is(.gfx-auto,.gfx-low):not(.no-anim) button.jig{animation:none}
html:is(.gfx-auto,.gfx-low):not(.no-anim) .rr-hand .rr-card:active{transform:translateY(-10px) scale(.96)}
html:is(.gfx-auto,.gfx-low):not(.no-anim) .sheet{animation:autoSheet .42s var(--spring) both}
html:is(.gfx-auto,.gfx-low):not(.no-anim) :is(#msgMenu,.card),html:is(.gfx-auto,.gfx-low):not(.no-anim) .g-panel:not(.hidden) .g-card{animation:autoPop .26s cubic-bezier(.2,.8,.3,1) both}
html:is(.gfx-auto,.gfx-low):not(.no-anim) .m.in .bubble{animation:autoBubble .34s var(--spring) both}
html:is(.gfx-auto,.gfx-low):not(.no-anim) .me.m.in .bubble{animation-name:autoBubbleMe}
html:is(.gfx-auto,.gfx-low):not(.no-anim) .switch::after{animation:none!important;width:27px!important;transition:transform .3s var(--spring)}
html:is(.gfx-auto,.gfx-low):not(.no-anim) #toast:not(.hidden){animation:autoToast .32s var(--spring) both}
html:is(.gfx-auto,.gfx-low):not(.no-anim) #setCloud:active::-webkit-slider-thumb{transform:scale(1.15)}
@keyframes autoSheet{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes autoPop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes autoBubble{from{opacity:0;transform:translate(-10px,6px)}to{opacity:1;transform:none}}
@keyframes autoBubbleMe{from{opacity:0;transform:translate(10px,6px)}to{opacity:1;transform:none}}
@keyframes autoToast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Low and Saver: battery first, and the processor goes to the call ----------
   Nothing decorative keeps redrawing: every looping animation that's just for show stops (each one wakes the
   graphics chip 60 times a second), video tiles drop their soft shadows and fades, and the speaking ring is a plain border. */
html:is(.gfx-low,.gfx-saver) :is(.tile,.tile video,.tile.sq video){box-shadow:none!important;transition:none!important}
html:is(.gfx-low,.gfx-saver) .tile.speaking{box-shadow:inset 0 0 0 3px var(--green)!important}
html:is(.gfx-low,.gfx-saver) :is(.live-dot,.rr-dir,#gJoy.idle i,.tb-turn.mine,.vc-roll.ready,.rr-deck.ready,.bt-sq.can,.rs-hint,.rs-tray.go,.g-time.low){animation:none!important}