/* ───────────── Vibe pass: everything speaks the same clear-slime language ─────────────
   1. controls inside panels get a visible jelly fill (tinted, glossy, with a rim) instead of white-on-white
   2. game tables sit in a deep glowing slime pool instead of flat felt, with glass HUD chips and glossy jelly buttons
   3. calls get the same glow and glass
   4. text and icons always stay inside their boxes */

/* ---------- 1. controls inside panels ---------- */
html.slime{--jelly:rgba(92,106,160,.085);--jelly2:rgba(92,106,160,.15);--jelly-rim:rgba(92,106,160,.14);--jelly-hi:rgba(255,255,255,.75);--jelly-on:#fff}
html.slime.bg-dark{--jelly:rgba(255,255,255,.075);--jelly2:rgba(255,255,255,.13);--jelly-rim:rgba(255,255,255,.1);--jelly-hi:rgba(255,255,255,.12);--jelly-on:rgba(255,255,255,.16)}
html.slime :is(.sheet,.set-card,.card,#msgMenu,#gChat,.g-card,#sidebar){--surface2:var(--jelly);--surface3:var(--jelly2)}
html.slime :is(.sheet,.set-card,.card,#gChat,.g-card) :is(input:not([type=range]):not([type=checkbox]):not([type=file]),textarea,.seg2,details,.inv-row,.ring-item,.pick,.tl-seat,.to-row,.gm-card,.gm-live){
  box-shadow:inset 0 1px 0 var(--jelly-hi),inset 0 0 0 1px var(--jelly-rim)}
html.slime :is(.sheet,.set-card,.card,#gChat,.g-card) button:not(.primary):not(.ghost):not(.icon):not(.switch):not(.swatch):not(.seg2 button):not(.gm-card):not(.gm-live):not(.pick):not(.ring-item):not(.sw-row):not(.danger){
  background:var(--gl-shine),var(--jelly);box-shadow:inset 0 1px 0 var(--jelly-hi),inset 0 0 0 1px var(--jelly-rim)}
html.slime .seg2{background:var(--jelly)}
html.slime .seg2 button{color:var(--sub);font-weight:600}
html.slime .seg2 button.on{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78));color:var(--accent);box-shadow:0 2px 8px rgba(60,72,140,.16),inset 0 0 0 1px rgba(255,255,255,.9)}
html.slime.bg-dark .seg2 button.on{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.1));color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.18)}
html.slime :is(input,textarea):focus{box-shadow:inset 0 1px 0 var(--jelly-hi),0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;border-color:transparent}
html.slime button.ghost{background:var(--gl-shine),color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
html.slime button.primary{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px rgba(79,107,255,.3)}
html.slime .day{background:var(--gl-shine),rgb(var(--gl-tint) / calc(var(--gl-a) * .9));box-shadow:inset 0 0 0 1px var(--gl-rim)}

/* ---------- 2. game tables: a deep glowing slime pool ---------- */
#table{background:
  radial-gradient(55% 40% at 12% 8%,rgba(120,170,255,.32),transparent 70%),
  radial-gradient(50% 38% at 92% 28%,rgba(196,150,255,.26),transparent 70%),
  radial-gradient(65% 45% at 45% 104%,rgba(110,232,206,.3),transparent 70%),
  radial-gradient(120% 90% at 50% 18%,#1d6457,#0e2b31 78%)}
#table .tb-head .icon{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.14)}
#table .g-panel{background:rgba(8,26,30,.42)}
/* HUD chips (players, scores, sides): clear glass on the pool */
#table :is(.vc-p,.bt-pl,.rb-sc,.rr-opp,.cf-side,.tb-chip){background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12);border-radius:999px}
#table .cf-side{border-radius:14px}
#table :is(.vc-p.on,.bt-pl.on,.rb-sc.on,.rr-opp.on){background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));color:#123a35;box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(0,0,0,.22),0 0 0 3px rgba(255,209,102,.35)}
#table .cf-side.active{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.1))}
/* action buttons: glossy white jelly instead of chunky wooden 3D */
#table :is(.vc-roll,.rs-roll,.bt-btn.go,.rr-flash){background:linear-gradient(180deg,#fff 0%,#f1f5ff 55%,#e2e9fb 100%);color:#123a35;box-shadow:inset 0 1px 0 #fff,inset 0 -6px 12px -8px rgba(80,110,200,.35),0 6px 18px rgba(0,0,0,.28)}
#table :is(.vc-roll,.rs-roll,.bt-btn.go):disabled{box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(0,0,0,.18)}
#table .bt-btn:not(.go){background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.14)}
#table .tb-turn.mine,#table .tb-turn.over{color:#ffe08a;text-shadow:0 0 12px rgba(255,209,102,.55)}

/* ---------- 3. calls: same glow and glass ---------- */
.inc-bg{background:
  radial-gradient(45% 32% at 20% 14%,rgba(120,160,255,.45),transparent 70%),
  radial-gradient(42% 30% at 85% 30%,rgba(196,150,255,.35),transparent 70%),
  radial-gradient(55% 38% at 50% 98%,rgba(110,232,206,.28),transparent 70%),
  radial-gradient(900px 600px at 50% 18%,#2f3fc4 0%,#161a4e 40%,#07080f 80%)}
.inc-hint{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.12)}

/* ---------- 4. text and icons stay inside their boxes ---------- */
button,.chip,.pill,.gm-card,.sw-row,.to-row,.tl-seat,.ring-item,.pick,.inv-row{min-width:0}
:is(button,.chip,.pill) .ic,:is(button,.chip,.pill)>svg{flex-shrink:0;max-width:100%;max-height:100%}
.seg2 button,.bt-btn,.vc-roll,.rs-roll,#table .icon{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.seg2{min-width:0;max-width:100%}
.sw-text,.gm-t,.tl-seat>span,.to-row span,.ring-item span,.pick .nm{min-width:0;overflow-wrap:anywhere}
.gm-ppl{flex-shrink:0;max-width:34%;text-align:right;overflow-wrap:anywhere}

/* ---------- Patchwork HUD: glass on the quilt ---------- */
#game :is(.g-x,.g-time,.g-me,.g-board,.gp,.g-arrow){background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 6px 18px rgba(60,40,20,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:is(.gfx-auto,.gfx-low,.gfx-saver) #game :is(.g-x,.g-time,.g-me,.g-board,.gp,.g-arrow){-webkit-backdrop-filter:none;backdrop-filter:none}
#game .gp{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#game .gp .ic{width:15px;height:15px;flex-shrink:0}
#game .gp.speed{box-shadow:inset 0 0 0 2px #f2b234,0 4px 12px rgba(242,178,52,.3)}#game .gp.shield{box-shadow:inset 0 0 0 2px #22b5c9,0 4px 12px rgba(34,181,201,.3)}#game .gp.ghost{box-shadow:inset 0 0 0 2px #b46cf0,0 4px 12px rgba(180,108,240,.3)}
#game .gf{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(0,0,0,.18)}
#game .g-hint{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));box-shadow:inset 0 1px 0 #fff,0 10px 28px rgba(60,40,20,.2)}
#game .g-map{border-color:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 6px 16px rgba(60,40,20,.2)}
#game .g-x .ic{width:20px;height:20px}

/* ---------- install Huddle (PWA) ---------- */
#installBar{position:fixed;z-index:55;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--sab));width:min(560px,calc(100vw - 24px));display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:22px;
  background:var(--gl-shine),rgb(var(--gl-tint,255 255 255) / .9);box-shadow:inset 0 1px 0 var(--gl-edge,#fff),inset 0 0 0 1px var(--gl-rim,rgba(255,255,255,.7)),0 14px 40px rgba(40,50,90,.22)}
#installBar.hidden{display:none}
html:not(.no-anim) #installBar:not(.hidden){animation:installIn .5s var(--spring) both}
@keyframes installIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
#installBar img{width:40px;height:40px;border-radius:10px;flex-shrink:0}
#installBar .ib-t{flex:1;min-width:0;display:flex;flex-direction:column}
#installBar .ib-t b{font-size:15px}
#installBar .ib-t span{font-size:12.5px;color:var(--sub);line-height:1.3}
#installBar .primary{flex-shrink:0;padding:9px 16px}
#installBar .icon{flex-shrink:0;width:34px;height:34px}
body.inchat #installBar,body.in-game #installBar,body:has(#call:not(.hidden)) #installBar{display:none}
.install-steps{list-style:none;margin:6px 0 16px;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:st}
.install-steps li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--gl-shine),var(--jelly,var(--surface2));box-shadow:inset 0 1px 0 var(--jelly-hi,transparent),inset 0 0 0 1px var(--jelly-rim,transparent);font-size:15px;line-height:1.35;counter-increment:st}
.install-steps li::before{content:counter(st);flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:800;font-size:13.5px}
.install-steps li .ic{flex-shrink:0;width:22px;height:22px;color:var(--accent)}
#installDlg .sheet{gap:6px}
/* running as an installed app: no browser bars, so give the top a touch more breathing room on phones */
html.pwa body{overscroll-behavior:none}

/* ---------- editing a sent message ---------- */
#editBar{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:7px 8px 7px 12px;border-radius:14px;font-size:13.5px;font-weight:600;color:var(--accent);
  background:var(--gl-shine),color-mix(in srgb,var(--accent) 10%,var(--surface,#fff));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
#editBar.hidden{display:none}
#editBar span{flex:1;min-width:0}
#editBar button{padding:5px 12px;font-size:13px}
@media(min-width:900px){#editBar{margin-left:max(12px,calc((100% - 860px)/2));margin-right:max(12px,calc((100% - 860px)/2))}}
body.editing #composer .field-wrap{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)!important}
.edited{font-size:11px;color:var(--sub);margin:2px 8px 0;opacity:.85}
.me .edited{text-align:right;align-self:flex-end}
.them .edited{align-self:flex-start}

/* ---------- What's new ---------- */
.news-sheet{gap:8px}
.news-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:6px 0 4px}
.news-hero h2{margin:6px 0 0;font-size:22px}
.news-badge{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px rgba(79,107,255,.35)}
.news-badge .ic{width:30px;height:30px}
html:not(.no-anim) #newsDlg:not(.hidden) .news-badge{animation:newsPop .9s var(--spring) both .1s}
@keyframes newsPop{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:none}}
.news-list{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;max-height:min(52vh,480px);overflow-y:auto}
.news-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--gl-shine),var(--jelly,var(--surface2));box-shadow:inset 0 1px 0 var(--jelly-hi,transparent),inset 0 0 0 1px var(--jelly-rim,transparent)}
html:not(.no-anim) #newsDlg:not(.hidden) .news-list li{animation:newsItem .45s var(--spring) both}
html:not(.no-anim) #newsDlg:not(.hidden) .news-list li:nth-child(2){animation-delay:.06s}html:not(.no-anim) #newsDlg:not(.hidden) .news-list li:nth-child(3){animation-delay:.12s}html:not(.no-anim) #newsDlg:not(.hidden) .news-list li:nth-child(4){animation-delay:.18s}html:not(.no-anim) #newsDlg:not(.hidden) .news-list li:nth-child(5){animation-delay:.24s}
@keyframes newsItem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.news-ic{flex-shrink:0;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.news-ic .ic{width:19px;height:19px}
.news-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.news-t b{font-size:15px}.news-t span{font-size:13.5px;color:var(--sub);line-height:1.38;overflow-wrap:anywhere}
#updateBar{position:fixed;z-index:95;left:50%;transform:translateX(-50%);top:calc(10px + var(--sat));display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;font-size:14px;font-weight:600;
  background:var(--gl-shine),rgb(var(--gl-tint,255 255 255) / .94);box-shadow:inset 0 0 0 1px var(--gl-rim,rgba(255,255,255,.7)),0 10px 30px rgba(40,50,90,.22);max-width:calc(100vw - 24px)}
#updateBar.hidden{display:none}
#updateBar .ic{color:var(--accent);flex-shrink:0}
#updateBar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#updateBar button{flex-shrink:0;padding:6px 14px}
html:not(.no-anim) #updateBar:not(.hidden){animation:updIn .5s var(--spring) both}
@keyframes updIn{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- tidying the people list ---------- */
.nm-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nm-head h3{margin:0}
.nm-head button{padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--accent)}
#newDlg.managing #groupName,#newDlg.managing #newGo{display:none}
.manage-hint{margin:2px 2px 8px;font-size:13px}
.pick.manage{cursor:default}
.pick.manage.is-hidden{opacity:.62}
.pm-acts{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.pm-acts button{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;font-size:13px;font-weight:600;white-space:nowrap}
.pm-acts button.danger{background:color-mix(in srgb,var(--red) 12%,transparent)!important;color:var(--red)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 25%,transparent)!important}
.pm-acts button.danger.armed{background:var(--red)!important;color:#fff!important}
.pm-sec{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sub);margin:14px 4px 6px}
.pick-hidden-link{display:block;width:100%;margin-top:8px;background:none!important;box-shadow:none!important;color:var(--sub);font-size:13px;padding:8px}
@media(max-width:380px){.pm-acts button span{display:none}}
#blockBar{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:7px 8px 7px 12px;border-radius:14px;font-size:13.5px;font-weight:600;color:var(--sub);
  background:var(--gl-shine),var(--jelly,var(--surface2));box-shadow:inset 0 0 0 1px var(--jelly-rim,var(--line))}
#blockBar.hidden{display:none}
#blockBar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#blockBar button{padding:5px 12px;font-size:13px}
@media(min-width:900px){#blockBar{margin-left:max(12px,calc((100% - 860px)/2));margin-right:max(12px,calc((100% - 860px)/2))}}

/* ---------- delete chat ---------- */
#infoDelete{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#infoDelete.armed,#msgMenu button.danger.armed{background:var(--red)!important;color:#fff!important}
#msgMenu .menu-note{font-size:11.5px;color:var(--sub);padding:4px 12px 6px;max-width:220px;line-height:1.35}

/* pressing and holding a message or chat opens its menu: no blue text-selection or grey tap flash getting in the way
   (touchscreens only; use Copy in the menu instead. Computers keep normal text selection) */
@media (pointer:coarse){
  .bubble,.bubble *,.conv,.conv *,.m,.reacts{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .bubble a{-webkit-user-select:none;user-select:none}
}
.bubble,.conv,.pick,button{-webkit-tap-highlight-color:transparent}

/* ---------- swipe to delete a chat ---------- */
.conv-wrap{position:relative;margin-bottom:2px;border-radius:var(--r2);overflow:hidden}
.conv-wrap>.conv{margin-bottom:0;position:relative;z-index:1;touch-action:pan-y;will-change:transform}
.conv-del{position:absolute;right:0;top:0;bottom:0;width:0;opacity:0;z-index:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:0;overflow:hidden;white-space:nowrap;
  border-radius:var(--r2);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),var(--red,#ef4444)!important;color:#fff!important;font-weight:700;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important}
.conv-del .ic{width:18px;height:18px;flex-shrink:0}
.conv-wrap.going{transition:max-height .3s ease,opacity .25s;max-height:0!important;opacity:0}