/* კურსელები · app layer: resets, safe areas, real-app screens (auth, editor, chat, admin) on top of base.css */
[hidden]{display:none!important}
html,body{margin:0;overscroll-behavior:none}
body{min-height:100dvh;-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
img,video{max-width:100%}
img.av{object-fit:cover;padding:0;background:var(--sunk)}
.av svg{width:55%;height:55%;color:#fff}
.av.sq{border-radius:28%}
.av.gav{color:#fff}
#app{height:100dvh}
header.top{padding-top:calc(8px + env(safe-area-inset-top,0px));padding-left:calc(14px + env(safe-area-inset-left,0px));padding-right:calc(6px + env(safe-area-inset-right,0px))}
.tabs{padding-bottom:calc(2px + env(safe-area-inset-bottom,0px))}
@media (max-width:380px){header.top .ibtn{width:36px;height:36px}header.top .ibtn svg{width:21px;height:21px}.logo{font-size:27px}.coinchip{padding:0 8px 0 5px}}
button.logo{padding:0 2px;border-radius:8px}
a{color:var(--wine)}
::selection{background:color-mix(in srgb,var(--wine) 26%,transparent)}
.field.sq{border-radius:10px}
input,textarea,select{font:inherit}
textarea{resize:vertical}

/* boot + auth */
#boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--bg);z-index:90}
#boot .logo{font-size:40px;flex-direction:column;gap:14px}
#boot .kmk{width:2.4em;height:2.4em;animation:kpop .8s var(--ease-spring) both}
@keyframes kpop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
#auth{position:fixed;inset:0;overflow-y:auto;z-index:40;background:radial-gradient(120% 60% at 50% -10%,color-mix(in srgb,var(--wine) 22%,var(--bg)),var(--bg) 70%)}
.auth-in{min-height:100%;max-width:440px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 40px) 18px calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;gap:22px;justify-content:center}
.auth-brand{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.logo.big{font-size:46px;flex-direction:column;gap:12px}
.logo.big .kmk{width:2.2em;height:2.2em;animation:kpop .8s var(--ease-spring) both}
.auth-brand p{color:var(--muted);font-size:15px;max-width:30ch}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;animation:popin .5s var(--ease-out)}
.auth-card h2{font-size:22px}
.auth-card .seg{margin:0}
.auth-card>.trb{align-self:center}
.form0{display:flex;flex-direction:column;gap:12px}
.btn.wide{width:100%;height:46px;font-size:15px}
.aerr{min-height:0;font-size:13.5px;color:var(--nope);font-weight:600}
.aerr:empty{display:none}
.aerr.ok{color:var(--vine)}
.auth-foot{display:flex;justify-content:center;gap:8px;align-items:center;color:var(--muted);font-size:12px}
.auth-foot .trb{align-self:center;color:var(--muted)}
label.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:500;color:var(--ink);line-height:1.45;cursor:pointer}
label.chk input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--wine)}
label.chk .trb{display:inline;font-size:inherit}

/* skeletons, empty, spinners */
.skel{display:flex;gap:12px;padding:16px;background:var(--surface);border-bottom:1px solid var(--line)}
.sk-av{width:40px;height:40px;border-radius:50%;background:var(--sunk);flex:none}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.sk-lines i{display:block;height:10px;border-radius:6px;background:var(--sunk)}
.skel,.story.sk .av{position:relative;overflow:hidden}
.skel::after,.story.sk .av::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--surface) 60%,transparent) 50%,transparent 70%);background-size:220% 100%;animation:shimmer 1.3s linear infinite}
.story.sk .av{background:var(--sunk)}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.empty3{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:40px 24px;color:var(--muted)}
.empty3 h3{font-size:18px;color:var(--ink)}
.empty3 p{max-width:34ch;font-size:14px}
.empty3 .btn,.empty3 .row2{margin-top:8px}
.row2{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.spin{display:inline-block;width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--wine);animation:spin .8s linear infinite}
.morebox{display:flex;justify-content:center;padding:18px 0 28px;min-height:24px}
.btn.danger{background:var(--nope)!important;color:#fff}
.ptag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
button.ptag{cursor:pointer}
.ptag.warn{background:color-mix(in srgb,var(--nope) 16%,transparent);color:var(--nope)}
.ptag.ad{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.hash{color:var(--wine);font-weight:600;display:inline;padding:0}
.hash:hover{text-decoration:underline}
.tdot{position:absolute;top:5px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--wine);border:2px solid var(--surface)}
.coinchip.bonus{position:relative}
.coinchip.bonus::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--surface);animation:pulse 1.6s ease-in-out infinite}

/* create button + sheet */
.fab{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(var(--bh) + 16px);z-index:19;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:var(--on-accent);background:linear-gradient(145deg,color-mix(in srgb,var(--wine) 80%,#fff),var(--wine));box-shadow:0 10px 28px color-mix(in srgb,var(--wine) 40%,transparent),0 2px 6px rgb(0 0 0/.15);animation:popin .5s var(--ease-spring);transition:transform .35s var(--ease-out),border-radius .35s}
.fab svg{width:26px;height:26px}
.fab:hover{border-radius:28px}
#app.barhidden .fab{transform:translateY(6px) scale(.9)}
.createg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px}
.createg button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px;border-radius:16px;background:var(--sunk);text-align:left}
.createg .cgi{grid-row:1/3;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--wine-soft);color:var(--wine)}
.createg .cgi svg{width:22px;height:22px}
.createg b{font-size:14px;line-height:1.2}
.createg small{font-size:11.5px;color:var(--muted);line-height:1.3}

/* in-app live banner */
.inapp{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);width:calc(100% - 24px);max-width:520px;z-index:85;display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:18px;background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border:1px solid var(--line);box-shadow:var(--shadow);text-align:left}
.inapp .grow{display:flex;flex-direction:column;min-width:0}
.inapp .grow>span{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}

/* layer above sheets: editor, recorder */
.sheet.layer{z-index:58}
.sheet.layer .panel{height:auto;max-height:94%}
.ed{gap:12px}
.edwrap{display:grid;place-items:center;background:repeating-conic-gradient(var(--sunk) 0 25%,var(--surface) 0 50%) 0 0/18px 18px;border-radius:14px;overflow:hidden;min-height:180px;max-height:52dvh}
.edwrap canvas{max-width:100%;max-height:52dvh;display:block}
.chipsbar.filt{padding:0}
.chipsbar.filt button{height:auto;padding:6px 8px 6px 6px;display:flex;align-items:center;gap:6px;border-radius:12px}
.ed .chipsbar{padding:0}
.ed .chipsbar button[aria-pressed="true"],.chipsbar button[aria-pressed="true"]{border-color:var(--wine)}
.fsw{width:30px;height:30px;border-radius:8px;flex:none;background:linear-gradient(135deg,#F7B267,#4F46E5 55%,#2C7A55)}
.fld input[type=range]{padding:0;height:28px;accent-color:var(--wine);background:none;border:0}
.recbox{display:flex;align-items:center;justify-content:center;gap:12px;padding:26px 0}
.recbox b{font-size:34px;font-variant-numeric:tabular-nums;font-family:var(--f-display)}
.recdot{width:16px;height:16px;border-radius:50%;background:var(--nope);animation:pulse 1.2s ease-in-out infinite}

/* composer */
.compose.cbtn{width:100%;align-items:center;text-align:left;cursor:text}
.cph{flex:1;height:40px;display:flex;align-items:center;padding:0 16px;border-radius:999px;background:var(--sunk);color:var(--muted);font-size:14.5px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cq{display:flex;gap:8px;color:var(--wine)}
.cq svg{width:22px;height:22px}
.ctext{width:100%;min-height:110px;border:0;background:none;color:var(--ink);font-size:16px;line-height:1.5;padding:0;outline:none;resize:none}
.ctext::placeholder{color:var(--muted)}
.cattach{display:flex;gap:8px;flex-wrap:wrap}
.cattach:empty{display:none}
.catt{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--sunk);flex:none}
.catt img,.catt video{width:100%;height:100%;object-fit:cover;display:block}
.catt button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;background:rgb(0 0 0/.6);color:#fff;display:grid;place-items:center}
.catt button svg{width:14px;height:14px}
.cpoll{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line)}
.prow{display:flex;gap:6px;align-items:center}
.cbar{align-items:center;flex-wrap:wrap}
.cbar .ibtn svg{color:var(--wine)}
.cbar select,.cbar .field{height:34px;font-size:13px}

/* post media grid + polls */
.ph.vid{aspect-ratio:auto;cursor:default;background:#000}
.ph.vid video{width:100%;max-height:70dvh;display:block}
.ph video{width:100%;height:100%;object-fit:cover;display:block}
.mg{display:grid;gap:3px;margin-top:4px;border-radius:12px;overflow:hidden;aspect-ratio:1}
.mg.n2{grid-template-columns:1fr 1fr;aspect-ratio:2/1.2}
.mg.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.mg.n3 .mgi:first-child{grid-row:1/3}
.mg.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.mgi{position:relative;background:var(--sunk);overflow:hidden;min-height:0}
.mgi img,.mgi video{width:100%;height:100%;object-fit:cover;display:block}
.playi{position:absolute;inset:auto auto 8px 8px;width:30px;height:30px;border-radius:50%;background:rgb(0 0 0/.55);color:#fff;display:grid;place-items:center}
.playi svg{width:17px;height:17px}
.mgi .more{position:absolute;inset:0;display:grid;place-items:center;background:rgb(0 0 0/.45);color:#fff;font-size:26px;font-weight:700}
.poll{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding:12px;border-radius:14px;border:1px solid var(--line)}
.poll>b{font-size:15px}
.popt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:8px 12px;border-radius:10px;background:var(--sunk);overflow:hidden;font-size:14px;font-weight:500;isolation:isolate}
.popt::before{content:"";position:absolute;inset:0;width:var(--pc,0%);background:color-mix(in srgb,var(--wine) 18%,transparent);z-index:-1;transition:width .6s var(--ease-out)}
.popt.mine{box-shadow:inset 0 0 0 1.5px var(--wine)}
.popt em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
.poll .note{margin-top:2px}
.ph-body.lb{gap:10px;background:#000;padding:0}
.lbm{width:100%;max-height:none;display:block}
.pimg{background:var(--sunk)}
.post .pname{display:inline-flex;width:auto;gap:4px}
.post .ptag{margin-left:2px}

/* home extras */
.trends{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:12px 16px 4px}
.trends .eyebrow{margin-right:4px}
.tchip{height:30px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--wine)}
.tchip em{font-style:normal;color:var(--muted);font-weight:500;font-size:11.5px}
.pcard2{flex:none;width:150px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:center}
.pc2{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.pc2 b{font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc2 span{font-size:12px;color:var(--muted)}
.pcard2 .btn{width:100%}
.list .row{padding:8px 4px}
.row.note.unread{background:color-mix(in srgb,var(--wine-soft) 55%,transparent);padding-inline:8px}
.row.note .grow>span:first-child{font-size:14px;line-height:1.35}
.row .ptag{flex:none}

/* profile */
.eprow{display:flex;align-items:center;gap:14px}
.epav{position:relative;border-radius:50%}
.epav>span:not(.av){position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--wine);color:var(--on-accent);display:grid;place-items:center;border:3px solid var(--surface)}
.epav>span svg{width:15px;height:15px}
.pbtns{display:flex;gap:8px;flex-wrap:wrap}
.pro>.av{margin-top:-46px;border:4px solid var(--surface);box-shadow:var(--shadow)}
.pgrid button{display:block;aspect-ratio:1;overflow:hidden;background:var(--sunk)}
.pgrid button img,.pgrid button video{width:100%;height:100%;object-fit:cover;display:block}

/* clips extras */
.cliptop-add{position:absolute;right:12px;top:calc(env(safe-area-inset-top,0px) + 8px);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgb(255 255 255/.16);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cliptop-add svg{width:22px;height:22px}
.clip .cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* the list of clips is as tall as the screen, so each clip (height:100%) fills one screen */
#clipb{height:100%}
.clip.land .cv,body.wide .clip .cv{object-fit:contain}
body.wide .clip{--bh:0px}
.ctap{position:absolute;inset:0;z-index:1;width:100%;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ctap:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgb(255 255 255/.6)}
.clip .shade,.clip .burst{pointer-events:none}
.clip .burst{z-index:2}
.cbig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:2;font-weight:600;text-shadow:0 1px 3px rgb(0 0 0/.5)}
.cbig svg{width:74px;height:74px;padding:18px 16px 18px 20px;border-radius:50%;background:rgb(0 0 0/.38);stroke:none}
.clip.paused .cbig{opacity:1;transform:translate(-50%,-50%)}
.cbuf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
.clip.buf .cbuf{opacity:1}
.cbuf .spin{width:38px;height:38px;border-color:rgb(255 255 255/.25);border-top-color:#fff}
.cerr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;padding:24px 90px 24px 24px;z-index:1;pointer-events:none}
.cerr[hidden]{display:none}
.cerr svg{width:42px;height:42px;opacity:.75}
.cerr small{color:rgb(255 255 255/.72);max-width:260px}
.cprog{position:absolute;left:0;right:0;bottom:var(--bh);height:2px;background:rgb(255 255 255/.2);z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.clip.started .cprog{opacity:1}
.cprog i{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.clip .mute{position:absolute;left:12px;top:calc(env(safe-area-inset-top,0px) + 54px);width:36px;height:36px;border-radius:50%;background:rgb(0 0 0/.4);color:#fff;display:grid;place-items:center;z-index:3}
.clip .mute svg{width:19px;height:19px}
.clipload,.clipempty{display:grid;place-items:center;color:#fff;text-align:center}
.clipempty>div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;max-width:320px}
.clipempty p{color:rgb(255 255 255/.7)}
.clipload .spin{border-color:rgb(255 255 255/.2);border-top-color:#fff}

/* chat */
.panel:has(.chatb){height:min(94%,900px)}
.chatb{gap:6px;background:color-mix(in srgb,var(--bg) 60%,var(--surface));padding:12px}
.mrow{display:flex;gap:6px;align-items:flex-end;max-width:100%}
.mrow.me{justify-content:flex-end}
.mav{flex:none;margin-bottom:16px}
.mcol{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:82%}
.mrow.me .mcol{align-items:flex-end}
.mcol .bubble,.mcol .bubwrap{max-width:100%}
.mname{font-size:11.5px;font-weight:700;color:var(--wine);padding-left:10px}
.mtime{font-size:10.5px;color:var(--muted);padding:0 8px;font-variant-numeric:tabular-nums}
.bubble.img{padding:3px;background:var(--sunk);overflow:hidden}
.bubble.img img{display:block;max-width:240px;max-height:320px;border-radius:15px;cursor:zoom-in}
.bubble.img.me{background:var(--wine)}
.vmsg audio{max-width:230px;height:38px}
.vmsg span{font-size:11px;opacity:.75}
.sysmsg{align-self:center;font-size:12px;color:var(--muted);background:var(--sunk);padding:4px 12px;border-radius:999px;margin:6px 0;text-align:center}
.chatfoot{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.chatfoot .btn{width:42px;padding:0;height:40px}
.ph-head .grow{display:flex;flex-direction:column;min-width:0}
.ph-head .grow b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-head .sub,.row .sub{font-size:12.5px;color:var(--muted)}
.row.pick{cursor:pointer;padding:6px 4px}
.row.pick input{width:20px;height:20px;accent-color:var(--wine);flex:none}

/* calls */
.call .ring2.still::before,.call .ring2.still::after{animation:none;opacity:0}
.rvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:0}
.lvid{position:absolute;right:14px;top:calc(env(safe-area-inset-top,0px) + 14px);width:110px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;z-index:2;box-shadow:0 8px 24px rgb(0 0 0/.4);background:#222;transform:scaleX(-1)}
.call-in{position:relative}
.call-in>*:not(video){position:relative;z-index:1}
.cbtns .ok{background:var(--like);color:#fff}

/* groups, pages, market */
.ghead{display:flex;gap:14px;align-items:center;padding:20px 16px 14px;background:linear-gradient(160deg,hsl(var(--h,330) 60% 50%/.18),transparent 70%)}
.ghead h1{font-size:22px;line-height:1.2}
.gbig{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;flex:none;font-size:32px;font-weight:800;color:#fff;background:linear-gradient(140deg,hsl(var(--h,330) 72% 58%),hsl(calc(var(--h,330) + 38) 66% 38%));box-shadow:var(--shadow)}
.mgal{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.mgal>*{flex:0 0 100%;scroll-snap-align:center}

/* dating extras */
.dph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,hsl(var(--h,330) 70% 60%),hsl(calc(var(--h,330) + 40) 60% 30%))}
.dph span{font-size:96px;font-weight:800;color:rgb(255 255 255/.92);font-family:var(--f-display)}
.tile .dph span{font-size:48px}
.dintro{padding:8px 0 4px;display:flex;flex-direction:column;gap:6px}
.dintro h2{font-size:22px}
.dintro p{color:var(--muted);font-size:14px}
.dfoot{display:flex;justify-content:center;padding:0 16px 24px}
.chips.pick6 button{padding:6px 12px;border-radius:999px;background:var(--sunk);font-size:13px;font-weight:500;border:1px solid transparent}
.chips.pick6 button[aria-pressed="true"]{background:var(--wine-soft);color:var(--wine);border-color:var(--wine)}

/* settings docs */
.doc{font-size:14.5px;line-height:1.6}
.doc h3{font-size:16px;margin-top:8px}
.doc ul,.doc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.doc p{color:var(--ink)}

/* admin */
.adstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 16px 4px}
.adtile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-align:center}
.adtile b{font-size:22px;font-family:var(--f-display);font-variant-numeric:tabular-nums;line-height:1.1}
.adtile span{font-size:11px;color:var(--muted);line-height:1.2}
#adtabs{padding-top:10px}
#adtabs .badge{margin-left:4px}
.repcard{margin:10px 16px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.rephead{display:flex;align-items:center;gap:10px}
.rephead .grow{display:flex;flex-direction:column;min-width:0}
.reppv{display:flex;gap:10px;padding:10px;border-radius:12px;background:var(--sunk)}
.reppv img,.reppv video{width:72px;height:72px;border-radius:10px;object-fit:cover;flex:none}
.reppv p{font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.repcard .chips span{background:color-mix(in srgb,var(--nope) 12%,var(--sunk))}
.vcmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vcmp figure{margin:0;display:flex;flex-direction:column;gap:4px;align-items:center}
.vcmp img,.vcmp .dph{position:relative;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--sunk)}
.vcmp .dph span{font-size:48px}
.vcmp figcaption{font-size:12px;color:var(--muted)}
.adprev{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.adprev .post{border-bottom:0}

/* small screens: denser sheet grids */
@media (max-width:360px){.createg{grid-template-columns:1fr}.svc{grid-template-columns:repeat(2,1fr)}.adstats{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.skel::after,.story.sk .av::after,.coinchip.bonus::after{animation:none}}
.ctext:focus,.ctext:focus-visible{outline:none}

/* fixes from the smoke test */
.pghead{top:calc(var(--toff) - var(--th))}
.row>svg{width:20px;height:20px;flex:none;color:var(--muted)}
.sub svg,.rephead svg,.note svg{width:14px;height:14px;vertical-align:-2px;display:inline-block}
.bubwrap.txw{flex-direction:row;align-items:flex-end}
.mrow.me .bubwrap{align-self:flex-end}
.field:focus-visible,.fld input:focus-visible,.fld textarea:focus-visible,.fld select:focus-visible{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px color-mix(in srgb,var(--wine) 22%,transparent)}
.cpoll>.field{flex:none;height:42px}
.prow .field{flex:1;height:42px}

/* ---------- batch 2: rooms, matches, rides, jobs, stickers, links, drafts, eco, desktop ---------- */
.live{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--nope);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:var(--nope);animation:pulse 1.4s ease-in-out infinite}
.rico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(140deg,#C21E5A,#6E0B2F)}
.rico.birja{background:linear-gradient(140deg,#3E8EF7,#1E3A8A)}
.rico svg{width:22px;height:22px}
.roomrow{padding:10px 4px}

/* virtual supra */
#view.is-room{padding-bottom:calc(var(--bh) + 96px)}
.tamada{display:flex;gap:12px;align-items:center;margin:12px 16px;padding:12px 14px;border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--wine) 88%,#000),color-mix(in srgb,var(--gold) 70%,var(--wine)));color:#fff;box-shadow:var(--shadow)}
.tamada .eyebrow{color:rgb(255 255 255/.75)}
.tamada b{font-family:var(--f-display);font-size:18px;line-height:1.25;display:block}
.tamada .sub{color:rgb(255 255 255/.85)}
.tam-ic{font-size:30px;animation:tilt 3s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.rgrid{display:grid;gap:6px;padding:0 16px;grid-template-columns:repeat(2,1fr)}
.rgrid[data-n="1"]{grid-template-columns:1fr}
.rgrid[data-n="1"] .vtile{aspect-ratio:3/4;max-height:60dvh}
.vtile{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#140C19;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s}
.vtile video{width:100%;height:100%;object-fit:cover;display:block;background:#140C19}
.vtile video#rv-me{transform:scaleX(-1)}
.vav{position:absolute;inset:0;display:grid;place-items:center;background:#1E1525}
.vname{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:rgb(0 0 0/.55);color:#fff;font-size:12px;font-weight:600}
.vname svg{width:13px;height:13px}
.vfloor{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-size:11px;font-weight:800}
.vtile.floor,.ptile.floor .pav{box-shadow:inset 0 0 0 3px var(--gold)}
.vtile.speaking,.ptile.speaking .pav{box-shadow:inset 0 0 0 3px var(--like)}
.rbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bh) + 14px + env(safe-area-inset-bottom,0px));z-index:21;display:flex;gap:12px;padding:10px 14px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow)}
.rbtn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);font-size:24px}
.rbtn svg{width:24px;height:24px}
.rbtn[aria-pressed="false"]{background:color-mix(in srgb,var(--nope) 16%,var(--sunk));color:var(--nope)}
.rbtn.end{background:var(--nope);color:#fff}
.rbtn.clink{background:color-mix(in srgb,var(--gold) 30%,var(--sunk))}
.rbtn.on{background:var(--gold)}
.tampanel{margin:14px 16px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.tcustom{display:flex;gap:8px}
.clinkfx{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:95;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;animation:clink 1.7s var(--ease-out) forwards}
.clinkfx span{font-size:96px;line-height:1;filter:drop-shadow(0 8px 20px rgb(0 0 0/.3))}
.clinkfx b{font-family:var(--f-display);font-size:28px;color:var(--wine);text-shadow:0 2px 0 #fff}
.clinkfx small{font-size:13px;color:var(--muted);font-weight:600}
@keyframes clink{0%{opacity:0;transform:translate(-50%,-40%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}35%{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}50%{transform:translate(-50%,-50%) rotate(6deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%) scale(.96)}}
/* birja */
.topicbar{display:flex;align-items:center;gap:8px;margin:12px 16px 0;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-weight:600}
.topicbar svg{width:18px;height:18px;color:var(--super)}
.spk,.lst{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px;padding:0 16px}
.ptile{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12.5px;position:relative}
.pav{border-radius:50%;padding:3px;transition:box-shadow .2s}
.lst .ptile .av{--s:52px!important;width:52px;height:52px}
.pmic{position:absolute;top:44px;right:calc(50% - 38px);width:24px;height:24px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow)}
.pmic svg{width:13px;height:13px}
.lst .pmic{display:none}

/* match rooms */
.fxlist,.ridelist,.joblist{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.fxcard,.ridecard,.jobcard{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:left;width:100%}
.fxtop{display:flex;align-items:center;gap:8px}
.fxteams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;text-align:center}
.fxteams b{font-size:16px;line-height:1.2}
.fxteams.big b{font-family:var(--f-display);font-size:22px}
.fxscore{font-family:var(--f-display);font-weight:900;font-size:22px;color:var(--wine);min-width:56px}
.fxteams.big .fxscore{font-size:34px}
.fxcard .sub svg{width:13px;height:13px;vertical-align:-2px}
.fxhero{margin:12px 16px;padding:18px 14px;border-radius:20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;color:#fff;background:radial-gradient(120% 120% at 50% 0%,#2C7A55,#123B29);box-shadow:var(--shadow)}
.fxhero .eyebrow{color:rgb(255 255 255/.75)}
.fxhero .fxteams{width:100%}
.fxhero .fxscore{color:var(--gold)}
.fxpred,.fxchat{margin:12px 16px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.fxpred .note svg{width:13px;height:13px;vertical-align:-2px}
.fxpicks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fxpick{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:14px;background:var(--sunk);border:2px solid transparent;text-align:center}
.fxpick::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--pc,0%);background:color-mix(in srgb,var(--wine) 14%,transparent);z-index:-1;transition:height .6s var(--ease-out)}
.fxpick b{font-size:13.5px;line-height:1.2}
.fxpick span{font-size:12px;color:var(--muted);font-weight:700}
.fxpick.on{border-color:var(--wine)}
.fxpick:disabled{opacity:1;cursor:default}
.fxstake{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:600}
.fxstake [data-st]{min-width:44px;height:34px;border-radius:999px;border:1px solid var(--line);font-weight:700}
.fxstake [data-st][aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.fxmine{font-size:14px}
.fxmine svg{width:14px;height:14px;vertical-align:-2px}
.fxadmin{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--line);font-size:13px}
.fxadmin .field{width:64px;flex:none;height:34px;text-align:center}
.fxmsgs{max-height:46dvh;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.fxmsg{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.fxmsg b{font-size:12px;color:var(--wine);display:block}
.fxmsg.me b{color:var(--vine)}
.fxform{display:flex;gap:8px}

/* rides */
.ridesearch{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;padding:0 16px 12px;align-items:center}
.ridesearch input[type=date]{grid-column:1/3}
.ridesearch .btn{height:40px}
.rtime{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--wine)}
.rroute{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-weight:700;font-size:16px}
.rroute i{height:2px;background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 11px);position:relative}
.rroute i::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left-color:var(--muted)}
.rroute.big{font-family:var(--f-display);font-size:22px}
.rmeta{display:flex;align-items:center;gap:8px;font-size:13px}
.rseats{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-weight:600}
.rseats svg{width:15px;height:15px}
.rprice{color:var(--vine);font-size:15px}
.ridehero{margin:12px 16px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}

/* jobs */
.jlogo{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff;background:linear-gradient(140deg,hsl(var(--h) 60% 52%),hsl(calc(var(--h) + 40) 55% 36%))}
.jlogo.big{width:72px;height:72px;border-radius:20px;font-size:32px}
.jobcard{flex-direction:row;align-items:flex-start;gap:12px}
.jobcard .grow{display:flex;flex-direction:column;gap:3px;min-width:0}
.jtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.jobhero{padding:18px 16px 8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.jobhero h1{font-size:24px}
.jobbody{padding:8px 16px 12px;display:flex;flex-direction:column;gap:10px}
.approw{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.approw .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
.cvv{display:flex;flex-direction:column;gap:10px}
.cvv h3{font-size:15px;margin-top:6px}
.cvi{display:flex;flex-direction:column;padding-left:10px;border-left:3px solid var(--wine-soft)}
.cvi span{font-size:13px;color:var(--muted)}
.cvrows{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.cvrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-radius:12px;background:var(--sunk);position:relative}
.cvrow input:nth-child(3){grid-column:1/2}
.cvrow .ibtn{position:absolute;right:4px;bottom:4px}
.kv{display:flex;align-items:center;gap:8px;font-size:14px}
.kv svg{width:17px;height:17px;color:var(--muted);flex:none}

/* place groups */
.placec{display:flex;align-items:center;gap:12px;margin:12px 16px 0;padding:14px;border-radius:16px;background:linear-gradient(120deg,var(--wine-soft),color-mix(in srgb,var(--gold) 18%,var(--surface)));border:1px solid var(--line)}
.placec .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.placec .sub{font-size:12.5px}

/* stickers */
.stk{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgb(0 0 0/.18))}
.stkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stkgrid button{aspect-ratio:1;padding:6px;border-radius:16px;background:var(--sunk);transition:transform .2s var(--ease-spring)}
.stkgrid button:hover{transform:scale(1.05) rotate(-2deg)}
.stkmsg{width:132px;height:132px;animation:popin .4s var(--ease-spring)}
.mrow.me .stkmsg{align-self:flex-end}
.stkb{font-size:20px}
.kantsi{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.25em}
.picker .kantsi{width:26px;height:26px}
.fire{margin-left:6px;font-size:12px;font-weight:800;color:#E8590C;white-space:nowrap}

/* link cards */
.lcard2{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--surface);margin-top:4px;max-width:100%}
.lcard2 img{width:100%;aspect-ratio:1.91/1;object-fit:cover;display:block;background:var(--sunk)}
.lc-t{display:flex;flex-direction:column;gap:2px;padding:10px 12px}
.lc-t small{font-size:11.5px;color:var(--muted);text-transform:lowercase}
.lc-t b{font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc-t em{font-style:normal;font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lcard2.inchat{max-width:260px;margin-top:2px}
.lcard2.inchat img{aspect-ratio:2/1}
.clinkw{position:relative}
.clinkw .ibtn{position:absolute;top:8px;right:8px;background:rgb(0 0 0/.55);color:#fff}

/* drafts, memories */
.csched{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--sunk)}
#c_sch[aria-pressed="true"]{background:var(--wine-soft)}
.draftw{border-bottom:6px solid var(--bg)}
.draftbar{display:flex;align-items:center;gap:6px;padding:10px 16px 0;background:var(--surface)}
.memo{margin:12px 16px 0;padding:12px;border-radius:18px;background:linear-gradient(140deg,color-mix(in srgb,var(--super) 14%,var(--surface)),var(--surface));border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.memo h3{font-size:16px}
.memo-in{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.memo-in .post{border-bottom:0}
.ring.close{background:conic-gradient(from 200deg,#2FBF80,#55C08C,#2FBF80)}

/* economy mode */
.ecoimg{display:flex;align-items:center;gap:10px;width:100%;margin-top:4px;padding:16px;border-radius:12px;background:var(--sunk);border:1px dashed var(--line);color:var(--muted);font-size:13.5px;font-weight:600}
.ecoimg svg{width:22px;height:22px;color:var(--wine)}
html.eco *,html.eco *::before,html.eco *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
html.eco header.top,html.eco .tabs,html.eco .sheet,html.eco .pghead,html.eco .inapp,html.eco .rbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* desktop: three columns */
body.wide{display:flex;justify-content:center;gap:24px;background:var(--bg)}
body.wide #app{flex:0 0 600px;max-width:600px;margin:0;order:1;border-inline:1px solid var(--line)}
body.wide .tabs,body.wide #fab{display:none!important}
body.wide #view{padding-bottom:24px}
body.wide .rbar{bottom:20px}
body.wide #toast{bottom:28px}
.side-l,.side-r{height:100dvh;overflow-y:auto;scrollbar-width:thin;padding:16px 0}
.side-l{order:0;flex:0 0 236px;display:flex;flex-direction:column;gap:12px}
.side-r{order:2;flex:0 0 320px;display:flex;flex-direction:column;gap:12px}
.side-l .logo{font-size:27px;padding:4px 12px;align-self:flex-start}
.snavs{display:flex;flex-direction:column;gap:2px}
.snav{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:999px;font-size:16px;font-weight:600;position:relative}
.snav svg{width:24px;height:24px}
.snav.sm{font-size:14px;padding:8px 14px;color:var(--muted)}
.snav.sm svg{width:20px;height:20px}
.snav:hover{background:var(--sunk)}
.snav[aria-current="true"]{color:var(--wine);background:var(--wine-soft)}
.snavsep{height:1px;background:var(--line);margin:8px 14px}
.sdot{position:absolute;left:30px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--wine);border:2px solid var(--bg)}
.side-l .btn.wide{height:48px;font-size:16px}
.smine{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;margin-top:auto;text-align:left}
.smine:hover{background:var(--sunk)}
.smine .grow{display:flex;flex-direction:column;min-width:0}
.smine small{color:var(--muted);font-size:12px}
.ssearch{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:var(--sunk);position:sticky;top:0;z-index:1}
.ssearch svg{width:18px;height:18px;color:var(--muted)}
.ssearch input{flex:1;border:0;background:none;color:var(--ink);outline:none;font-size:14.5px}
.scard{padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.scard h3{font-size:17px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.scard h3 svg{width:18px;height:18px;color:var(--wine)}
.srow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:12px;text-align:left;width:100%}
.srow:hover{background:var(--sunk)}
.srow .grow{display:flex;flex-direction:column;min-width:0}
.srow small{color:var(--muted);font-size:12px}
.srow .rico{width:36px;height:36px;border-radius:12px}
.sfoot{font-size:12px;color:var(--muted);padding:0 8px}
.sfoot .trb{color:var(--muted);font-size:12px}
@media (max-width:1279px){.side-r{display:none}}
body.wide .sheet{align-items:center}
body.wide .panel{border-radius:22px;height:min(84%,760px)}
body.wide .panel.short{height:auto;max-height:84%}
body.wide .panel::before{display:none}
.ridesearch .field{width:100%;min-width:0}
.draftbar{flex-wrap:wrap;row-gap:6px}
.picker .kantsi{width:30px;height:30px}
.fxstake [data-st]{padding:0 10px}

/* ===== batch 3: name days, chat tools, places, toasts, help, family, live ===== */
/* name days */
.ndhero{margin:12px 16px 4px;padding:16px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));display:flex;flex-direction:column;gap:10px}
.ndhero .eyebrow{color:var(--gold)}
.ndmine{display:flex;flex-direction:column}
.ndmine b{font-family:var(--f-display);font-size:24px;line-height:1.1}
.ndmine span{font-size:13px;color:var(--muted)}
.ndrow{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.ndrow:last-child{border-bottom:0}
.ndrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.ndrow .grow b{font-size:14px}
.nddate{width:44px;flex:none;display:flex;flex-direction:column;align-items:center;padding:4px 0;border-radius:12px;background:var(--sunk)}
.nddate b{font-family:var(--f-display);font-size:19px;line-height:1}
.nddate small{font-size:10.5px;color:var(--muted)}
.ndico{width:36px;height:36px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--gold) 18%,var(--sunk));display:grid;place-items:center;font-size:18px}
.ndico svg{width:18px;height:18px}

/* greeting cards */
.gcard{position:relative;width:240px;max-width:100%;aspect-ratio:4/5;border-radius:18px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;gap:6px;overflow:hidden;color:var(--gc-ink,#3b2306);background:var(--gc-bg);box-shadow:0 6px 22px rgb(0 0 0/.14);isolation:isolate}
.gcard::after{content:"";position:absolute;inset:8px;border-radius:12px;border:1px solid currentColor;opacity:.28;pointer-events:none}
.gc-orn{position:absolute;top:7%;left:6%;width:88%;height:40%;z-index:-1;color:var(--gc-orn,currentColor)}
.gc-t{font-family:var(--f-display);font-size:21px;line-height:1.15;text-wrap:balance;text-shadow:0 1px 0 color-mix(in srgb,var(--gc-bg-solid,transparent) 40%,transparent)}
.gc-to{font-family:var(--f-display);font-size:17px;font-weight:700;opacity:.9}
.gc-m{font-size:12.5px;line-height:1.45;opacity:.95;text-wrap:pretty}
.gc-f{font-size:12px;font-weight:700;opacity:.75}
.gc-f::before{content:"— "}
.gc-nd1{--gc-bg:linear-gradient(165deg,#FBF1D9,#EBCB86);--gc-ink:#47290A;--gc-orn:#A6741A}
.gc-nd2{--gc-bg:linear-gradient(170deg,#18264F,#3A2A6E);--gc-ink:#FFF4D6;--gc-orn:#F3D27A}
.gc-bd1{--gc-bg:linear-gradient(160deg,#4F46E5,#2E2A8F);--gc-ink:#FFF0F4}
.gc-bd2{--gc-bg:linear-gradient(170deg,#FF9F5A,#E8466E);--gc-ink:#fff}
.gc-gm1{--gc-bg:linear-gradient(165deg,#E7F2DA,#B9D79A);--gc-ink:#1F3B17;--gc-orn:#3F6B2A}
.gc-gm2{--gc-bg:linear-gradient(180deg,#CFE3F2,#F7E6D1);--gc-ink:#20324A;--gc-orn:#41608A}
.mcol>.gcard{width:220px}
.mrow.me .mcol>.gcard{align-self:flex-end}
.gcdesigns{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;flex:none}
.gcdesigns button{flex:none;width:96px;border-radius:14px;padding:2px;border:2px solid transparent}
.gcdesigns button[aria-pressed="true"]{border-color:var(--wine)}
.gcdesigns .gcard{width:88px;padding:6px;border-radius:12px;gap:2px;box-shadow:none}
.gcdesigns .gc-t{font-size:9.5px}.gcdesigns .gc-m,.gcdesigns .gc-f,.gcdesigns .gc-to{display:none}
.gcprev{display:flex;justify-content:center;flex:none}

/* chat: tools */
.chatfoot{flex-direction:column;align-items:stretch;gap:8px}
.chrow{display:flex;gap:6px;align-items:center}
.chrow .ibtn{width:36px;height:36px}
.replybar{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--sunk);border-left:3px solid var(--wine)}
.replybar>svg{width:18px;height:18px;color:var(--wine);flex:none}
.replybar .grow{display:flex;flex-direction:column;min-width:0}
.replybar .grow b{font-size:12.5px;color:var(--wine)}
.replybar .grow span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinbar{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--line);background:var(--surface);text-align:left;flex:none}
.pinbar>svg{width:18px;height:18px;color:var(--wine);flex:none}
.pinbar .grow{display:flex;flex-direction:column;min-width:0}
.pinbar .grow b{font-size:12px;color:var(--wine)}
.pinbar .grow span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rquote{display:flex;flex-direction:column;align-items:flex-start;max-width:78%;padding:5px 10px;border-radius:12px;border-left:3px solid var(--wine);background:color-mix(in srgb,var(--wine) 8%,var(--sunk));font-size:12.5px;text-align:left}
.mrow.me .rquote{align-self:flex-end}
.rquote b{color:var(--wine);font-size:12px}
.rquote span{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fwdl{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);font-style:italic;padding:0 6px}
.mrow.me .fwdl{align-self:flex-end}
.fwdl svg{width:13px;height:13px}
.bubble.del{font-style:italic;color:var(--muted);background:transparent;border:1px dashed var(--line);display:flex;gap:6px;align-items:center}
.bubble.del.me{color:var(--muted)}
.bubble.del svg{width:14px;height:14px}
.mrow{position:relative}
.mrow .mcol{align-items:flex-start}
.mrow.me .mcol{align-items:flex-end}
.mact{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .15s;flex:none;align-self:center}
.mact svg{width:16px;height:16px}
.mrow:hover .mact,.mact:focus-visible{opacity:1}
.mrow.me .mact{order:-1}
@media (hover:none){.mact{opacity:.45}}
.mrow.flash .mcol>*{animation:flashmsg 1.2s ease}
@keyframes flashmsg{0%,40%{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 70%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.mttl{display:inline-flex;vertical-align:-2px}
.mttl svg{width:11px;height:11px}
.ttlc{display:inline-flex;align-items:center;gap:3px;color:var(--wine);font-weight:600}
.ttlc svg{width:12px;height:12px}
.loccard{display:flex;flex-direction:column;width:240px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink)}
.locmap{position:relative;display:block;width:240px;height:140px;overflow:hidden;background:#E8E4DA}
.locmap img{position:absolute;width:256px;height:256px;max-width:none}
.locpin{position:absolute;left:50%;top:50%;transform:translate(-50%,-92%);color:var(--wine);filter:drop-shadow(0 2px 2px rgb(0 0 0/.35))}
.locpin svg{width:30px;height:30px}
.loct{display:flex;align-items:center;gap:8px;padding:8px 12px}
.loct svg{width:18px;height:18px;color:var(--wine);flex:none}
.loct b{font-size:13.5px}
.loct small{margin-left:auto;font-size:11.5px;color:var(--muted)}
.osmc{font-size:9.5px;color:var(--muted);padding:0 6px}

/* places */
.search .ibtn{margin-left:6px;background:var(--sunk)}
.plmapw{position:relative;margin:0 16px 4px;height:min(58vh,520px);min-height:300px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--sunk)}
.plmap,.pdmap,.pnmap{width:100%;height:100%;z-index:0}
.plpeek{position:absolute;left:10px;right:10px;bottom:10px;z-index:500;display:flex;align-items:center;gap:6px;padding:6px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.plpeek .plcard{flex:1;border:0;padding:4px;background:none}
.pllist{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}
.plcard{display:flex;gap:12px;align-items:center;width:100%;padding:10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:left}
.plcard>img,.plico{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none}
.plico{display:grid;place-items:center;font-size:28px;background:color-mix(in srgb,var(--wine) 10%,var(--sunk))}
.plico.sm{width:40px;height:40px;font-size:20px}
.plcard .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.plcard .grow b{font-size:15px;line-height:1.25}
.stars{color:var(--gold);letter-spacing:1px;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.stars em{font-style:normal;color:var(--muted);font-size:12px;letter-spacing:0}
.stars.sm{font-size:12px}
.mpinw{background:none;border:0}
.mpin{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:3px;padding:4px 8px 4px 5px;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgb(0 0 0/.25);font:600 12px var(--f-body);white-space:nowrap}
.mpin::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--surface);border-bottom:0}
.mpin i{font-style:normal;font-size:15px}
.mpin b{font-size:11.5px}
.mpin.on{background:var(--wine);color:var(--on-accent)}
.mpin.on::after{border-top-color:var(--wine)}
.leaflet-container{font-family:var(--f-body);background:var(--sunk)}
.leaflet-control-attribution{font-size:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}}
:root[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .locmap img{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}}
:root[data-theme="dark"] .locmap img{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9)}
.plcover{position:relative;background:var(--sunk)}
.plcover>img{width:100%;height:200px;object-fit:cover;display:block}
.pdmap{height:190px}
.pdmap.small{position:absolute;right:12px;bottom:-30px;width:120px;height:90px;border-radius:14px;border:3px solid var(--surface);box-shadow:var(--shadow);overflow:hidden;z-index:2}
.plpro{padding-top:16px}
.plpro h1{font-size:24px}
.plpro .pbtns a{text-decoration:none}
.plpro p.muted svg{width:15px;height:15px;vertical-align:-2px}
.cbar{flex-wrap:nowrap}
.cbar .ibtn{width:36px;height:36px}
@media (max-width:360px){.cbar .ibtn{width:31px}.cbar .btn{padding:0 12px}}
.cbar .btn{flex:none}
.avrow{display:flex;gap:6px;padding:0 16px 8px;flex-wrap:wrap}
.rvsum{display:flex;gap:16px;align-items:center;padding:4px 16px 12px}
.rvbig{display:flex;flex-direction:column;align-items:center;min-width:92px}
.rvbig b{font-family:var(--f-display);font-size:38px;line-height:1}
.rvbig small{font-size:12px;color:var(--muted)}
.rvbars{flex:1;display:flex;flex-direction:column;gap:4px}
.rvbars div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.rvbars i{flex:1;height:7px;border-radius:4px;background:var(--sunk);position:relative;overflow:hidden}
.rvbars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--gold);border-radius:4px}
.rvbars em{font-style:normal;width:22px;text-align:right}
.rvrow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.rvrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.rvph{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.rvph button{width:72px;height:72px;border-radius:10px;overflow:hidden}
.rvph img{width:100%;height:100%;object-fit:cover}
.starpick{display:flex;gap:6px;justify-content:center}
.starpick button{font-size:38px;line-height:1;color:var(--line);transition:transform .15s,color .15s}
.starpick button.on{color:var(--gold)}
.pnmap{height:240px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.pnph{width:96px;height:64px;object-fit:cover;border-radius:10px}
.cplchip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--wine-soft);color:var(--wine);font-size:13px;font-weight:600}
.cplchip button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.cplchip svg{width:13px;height:13px}
#cplace:empty{display:none}
.ptag.plc{background:var(--wine-soft);color:var(--wine)}

/* toasts */
.tcard{margin:0 16px 12px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.tchead{display:flex;align-items:center;gap:8px;font-size:12px}
.tchead .sub button{color:var(--muted);font-weight:600}
.tcard h3{font-size:19px}
.tcbody{font-family:var(--f-display);font-size:15.5px;line-height:1.6;white-space:pre-line;text-wrap:pretty}
.tcbody.clamp:not(.open){display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.tcacts{display:flex;align-items:center;gap:4px}
.tcacts .act .kantsi{width:22px;height:22px}
.tcacts .act.on{color:var(--gold)}
.tcacts .act.on .kantsi{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gold) 60%,transparent))}
.chips>.chip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600}
.chips>.chip[aria-pressed="true"]{background:var(--wine-soft);color:var(--wine);border-color:var(--wine)}
.tambook{font-size:13px;line-height:1.5;margin-top:4px;color:inherit;opacity:.88;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.tambook.open{display:block}
.tbrow{align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--line)}
.tbrow svg{color:var(--wine);width:20px;height:20px;flex:none;margin-top:4px}

/* help board */
.hhero{display:flex;gap:12px;align-items:center;margin:12px 16px;padding:14px;border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,#2FBF80 14%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,#2FBF80 30%,var(--line))}
.hhico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#2FBF80;color:#fff;flex:none}
.hhico svg{width:24px;height:24px}
.hhero{flex-wrap:wrap}
.hhero .grow{display:flex;flex-direction:column;min-width:0;flex:1 1 170px}
.hhero .grow .sub{white-space:normal}
.hbar{display:flex;gap:12px;align-items:flex-end;padding:0 16px 10px}
.hbar select{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);padding:0 10px;font:inherit}
.hlist{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}
.hcard{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:left;width:100%}
.hcard.urgent{border-color:color-mix(in srgb,var(--nope) 45%,var(--line));box-shadow:inset 3px 0 0 var(--nope)}
.hcard .grow{display:flex;flex-direction:column;gap:3px;min-width:0}
.hcard .grow b{font-size:15px;line-height:1.3}
.hcard>img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex:none}
.hkico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;flex:none;background:var(--sunk)}
.hkico.k-blood{background:color-mix(in srgb,var(--nope) 16%,var(--sunk))}
.hkico.k-lost_pet,.hkico.k-found_pet{background:color-mix(in srgb,var(--gold) 18%,var(--sunk))}
.hkico.k-volunteer{background:color-mix(in srgb,#2FBF80 18%,var(--sunk))}
.htags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ptag.blood{background:var(--nope);color:#fff}
.ptag.ok{background:color-mix(in srgb,#2FBF80 18%,transparent);color:var(--vine)}
.hdet{padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface);border-bottom:1px solid var(--line)}
.hdet.urgent{box-shadow:inset 0 3px 0 var(--nope)}
.hdet h1{font-size:22px}
.hcontact{display:flex;align-items:center;gap:8px;font-weight:600}
.hcontact svg{width:18px;height:18px;color:var(--vine)}
.hcontact a{color:var(--vine)}
.hkpick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.hkpick button{display:flex;align-items:center;gap:8px;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;text-align:left}
.hkpick button span{font-size:20px}
.hkpick button[aria-pressed="true"]{border-color:var(--wine);background:var(--wine-soft);color:var(--wine)}

/* family tree */
.kpend{margin:12px 16px;padding:12px 14px;border-radius:16px;background:var(--wine-soft);display:flex;flex-direction:column;gap:6px}
.ktree{overflow-x:auto;padding:8px 0 4px}
.ktin{position:relative;min-width:max-content;padding:0 16px}
.kedges{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.kedges .ke{fill:none;stroke:color-mix(in srgb,var(--wine) 45%,var(--line));stroke-width:2;stroke-linejoin:round}
.kedges .ke.dash{stroke-dasharray:4 4;stroke:var(--muted);opacity:.6}
.kgen{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 22px}
.kgl{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);background:var(--bg);padding:0 8px;border-radius:6px;position:relative;z-index:1}
.kpend .sub{white-space:normal}
.knodes{display:flex;gap:14px;justify-content:center}
.knode{width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:center;position:relative;z-index:1}
.knode b{font-size:12.5px;line-height:1.2}
.knode small{font-size:11px;color:var(--muted);line-height:1.25}
.knode.root{border-color:var(--wine);box-shadow:0 0 0 3px var(--wine-soft)}
.knode.pend{border-style:dashed;opacity:.75}
.knode.gone .av{filter:grayscale(1)}
.kfr{max-height:40vh;overflow-y:auto}
.snhero{display:flex;gap:14px;align-items:center;margin:12px 16px;padding:16px;border-radius:18px;background:linear-gradient(130deg,var(--wine-soft),var(--surface))}
.snbig{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--wine);color:var(--on-accent);font-family:var(--f-display);font-size:28px;font-weight:800;flex:none}

/* live */
.rico.live{background:linear-gradient(140deg,#FF3B5C,#B00030)}
.ring.live::before{background:conic-gradient(from 0deg,#FF3B5C,#FF8A3D,#FF3B5C)}
.ring .lvtag{width:auto;height:auto;left:50%;right:auto;bottom:-4px;transform:translateX(-50%);padding:1px 6px;border-radius:6px;background:#E5133A;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em}
.is-live{padding-bottom:0}
.livebox{position:relative;margin:0 auto;width:100%;max-width:560px;height:calc(100dvh - var(--th) - var(--bh) - 60px);min-height:420px;background:#0B090D;color:#fff;overflow:hidden}
.livebox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B090D}
.livebox video.mirror{transform:scaleX(-1)}
.lvshade{position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0/.45),transparent 22%,transparent 55%,rgb(0 0 0/.65));pointer-events:none}
.lvtop{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:10px;align-items:center}
.lvtop .grow{display:flex;flex-direction:column;min-width:0;text-shadow:0 1px 3px rgb(0 0 0/.5)}
.lvtop small{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvbadge{padding:3px 8px;border-radius:6px;background:#E5133A;font-size:11px;font-weight:800;letter-spacing:.08em;animation:lvpulse 1.6s ease-in-out infinite}
@keyframes lvpulse{50%{opacity:.7}}
.lvcount{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;background:rgb(0 0 0/.45);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.lvcount svg{width:14px;height:14px}
.lvwait{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;opacity:.85}
.lvwait[hidden]{display:none}
.lvunmute{position:absolute;top:64px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:8px 14px;border-radius:999px;background:rgb(255 255 255/.9);color:#111;font-weight:700;font-size:13px}
.lvunmute svg{width:16px;height:16px}
.lvcmts{position:absolute;left:12px;right:84px;bottom:76px;max-height:38%;overflow-y:auto;display:flex;flex-direction:column;gap:4px;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%);scrollbar-width:none}
.lvc{align-self:flex-start;max-width:100%;padding:5px 10px;border-radius:14px;background:rgb(0 0 0/.42);font-size:13px;line-height:1.35;overflow-wrap:anywhere;animation:popin .3s var(--ease-spring)}
.lvc b{color:#FFD27A}
.lvc.host b{color:#FF8FA3}
.lvhearts{position:absolute;right:24px;bottom:84px;width:40px;height:50%;pointer-events:none}
.lvhearts span{position:absolute;bottom:0;left:50%;font-size:26px;animation:lvheart 2.2s ease-out forwards}
@keyframes lvheart{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),-260px) scale(1.2);opacity:0}}
.lvgift{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-shadow:0 2px 8px rgb(0 0 0/.6);animation:lvgift 2.6s ease forwards;pointer-events:none}
.lvgift span{font-size:72px;line-height:1}
.lvgift b{font-size:16px}
.lvgift small{font-size:12px;opacity:.85}
@keyframes lvgift{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}15%{transform:translate(-50%,-50%) scale(1.1);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
.lvfoot{position:absolute;left:10px;right:10px;bottom:12px;display:flex;gap:8px;align-items:center}
.lvfoot .field{background:rgb(0 0 0/.42);border-color:rgb(255 255 255/.25);color:#fff}
.lvfoot .field::placeholder{color:rgb(255 255 255/.7)}
.lvfoot .rbtn{width:44px;height:44px;flex:none;background:rgb(255 255 255/.16);color:#fff;font-size:20px}
.lvfoot .rbtn.end{background:var(--nope)}
.lvfoot .rbtn svg{width:20px;height:20px}
body.wide .livebox{height:calc(100dvh - var(--th) - 80px);border-radius:0 0 18px 18px}
html.eco .lvbadge,html.eco .lvhearts span{animation:none}
@media (prefers-reduced-motion:reduce){.lvbadge,.lvhearts span,.lvgift,.mrow.flash .mcol>*{animation:none}}

/* ===== post cards v2: full width, photo first, info laid over it ===== */
.post.pm,.post.pc{display:block;padding:0;background:none;border:0;margin:0 12px 16px}
.post.pc{display:flex;flex-direction:column;gap:8px;padding:12px 14px 4px;background:var(--surface);border:1px solid var(--line);border-radius:20px}
.post.is-hidden{opacity:.6}
.pchead,.pmtop,.pvtop{display:flex;align-items:center;gap:10px;min-width:0}
.pwho{flex:none;border-radius:50%}
.pwt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.pwn{display:flex;align-items:center;gap:4px 6px;flex-wrap:wrap;min-width:0}
.pwn .pname b{font-size:14.5px}
.pwtime{font-size:12px;color:var(--muted)}
.pmw{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:9/8;max-height:68dvh;background:#0B090D;box-shadow:0 2px 14px rgb(20 10 30/.12);isolation:isolate}
.pmtrack{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pmtrack::-webkit-scrollbar{display:none}
.pmi{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;position:relative;display:block;touch-action:pan-x pan-y}
.pmi img,.pmi video{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block;pointer-events:none}
.pmplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0/.45);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pmplay svg{width:26px;height:26px;margin-left:3px;stroke:none}
.pmplay{transition:opacity .2s,transform .2s}
.pmi.on .pmplay{opacity:0;transform:translate(-50%,-50%) scale(.7)}
/* a playing feed video: the time left in one corner, the sound button in the other */
.pmdur{position:absolute;left:10px;bottom:10px;padding:2px 7px;border-radius:999px;background:rgb(0 0 0/.5);color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.pmdur:empty{display:none}
.pmsnd{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0/.5);color:#fff;z-index:2;opacity:0;pointer-events:none;transition:opacity .2s}
.pmsnd svg{width:18px;height:18px}
.pmmedia.vact .pmsnd{opacity:1;pointer-events:auto}
.pmi.bad video{opacity:.35}
.pmtop{position:absolute;top:0;left:0;right:0;height:58px;padding:0 12px;z-index:2;color:#fff;background:rgb(14 10 18/.5);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);pointer-events:none}
.pmbot{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:6px 6px 2px 12px;color:#fff;background:rgb(14 10 18/.5);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);pointer-events:none;display:flex;flex-direction:column;gap:2px}
.pmtop :is(button,a),.pmbot :is(button,a){pointer-events:auto}
.pmtop .av,.pvtop .av{box-shadow:0 0 0 2px rgb(255 255 255/.85)}
.pmtop .pname,.pmtop .pname b,.pvtop .pname b{color:#fff}
.pmtop .pwtime,.pvtop .pwtime{color:rgb(255 255 255/.75)}
.pmtop .ptag,.pvtop .ptag{background:rgb(255 255 255/.18);color:#fff}
.pmtop .vb,.pvtop .vb{color:#fff}
.pmcount{flex:none;margin-left:auto;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgb(0 0 0/.35);font-variant-numeric:tabular-nums}
.pmdots{display:flex;justify-content:center;gap:5px;padding:2px 0 2px}
.pmdots i{width:6px;height:6px;border-radius:50%;background:rgb(255 255 255/.4);transition:background .2s,transform .2s}
.pmdots i.on{background:#fff;transform:scale(1.2)}
.pmbot .grade,.pvbot .grade{color:rgb(255 255 255/.8);gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pmbot .grade button,.pvbot .grade button{border-color:rgb(255 255 255/.32);color:#fff;height:26px;min-width:30px;flex:none}
.pmbot .grade button.plus,.pvbot .grade button.plus{color:#FFD166;border-color:#FFD166}
.pmbot .grade button.on,.pvbot .grade button.on{background:var(--gold);border-color:var(--gold);color:#1A1205}
.pmbot .grade em,.pvbot .grade em{white-space:nowrap;padding-right:6px}
.grade.mine em{margin-left:6px}
.pmbot .acts,.pvbot .acts{margin-left:-10px}
.pmbot .act,.pvbot .act{color:#fff}
.pmbot .act:hover,.pvbot .act:hover{background:rgb(255 255 255/.12)}
.pmbot .act.on,.pvbot .act.on{color:#FF8FB1}
.pmw .burst{z-index:3}
.pmnav{position:absolute;top:50%;z-index:3;width:38px;height:38px;margin-top:-19px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0/.45);color:#fff;opacity:0;transition:opacity .2s}
.pmnav.prev{left:10px}.pmnav.next{right:10px}
.pmnav.next svg{transform:rotate(180deg)}
.pmnav svg{width:20px;height:20px}
.pmw:hover .pmnav,.pvframe:hover .pmnav,.pmnav:focus-visible{opacity:1}
@media (hover:none){.pmnav{display:none}}
.pdesc{padding:8px 4px 0;font-size:14.5px;line-height:1.5}
.post.pc .pdesc{padding:0}
.pdesc.clamp:not(.open) .txt{display:-webkit-box;-webkit-line-clamp:var(--l,2);-webkit-box-orient:vertical;overflow:hidden}
.pmore2{color:var(--muted);font-weight:700;font-size:13px;padding:2px 0}
.post.pm .poll{margin:8px 0 0}
.post.pc .acts{margin-left:-10px}
.memo-in .post,.adprev .post{margin:0}
.memo-in .post.pc{border:0;border-radius:0}

/* the post viewer */
.pv{position:fixed;inset:0;z-index:45;background:#07050A;display:flex;justify-content:center;overflow-y:auto;overscroll-behavior:contain;animation:fade .2s}
.pv.closing{animation:fadeout .22s forwards}
.pv.closing .pvin{transition:transform .22s var(--ease-out),opacity .22s;transform:translateY(40px) scale(.97);opacity:0}
html.pvopen #view{overflow:hidden}
.pvin{width:100%;max-width:680px;min-height:100%;display:flex;flex-direction:column;color:#fff;animation:pvup .48s var(--ease-spring)}
@keyframes pvup{from{opacity:0;transform:translateY(70px) scale(.94)}to{opacity:1;transform:none}}
.pvtop{padding:calc(10px + env(safe-area-inset-top,0px)) 6px 10px 14px}
.pvtop .ibtn{color:#fff;margin-left:auto}
.pvtop .ibtn:hover{background:rgb(255 255 255/.12)}
.pvframe{position:relative;width:100%;height:min(66dvh,125vw);background:#000;flex:none}
.pvtrack{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pvtrack::-webkit-scrollbar{display:none}
.pvs{flex:0 0 100%;height:100%;display:grid;place-items:center;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden}
.pvs img,.pvs video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pvcount{position:absolute;top:10px;right:10px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgb(0 0 0/.5);font-variant-numeric:tabular-nums}
.pvdots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.pvdots i{width:6px;height:6px;border-radius:50%;background:rgb(255 255 255/.4)}
.pvdots i.on{background:#fff}
.pvframe.text{display:grid;place-items:center;height:auto;min-height:min(56dvh,110vw);background:none;padding:12px}
.pvtext{width:100%;min-height:inherit;border-radius:22px;padding:28px 24px;display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-size:20px;line-height:1.45;background:linear-gradient(150deg,hsl(var(--h) 48% 32%),hsl(calc(var(--h) + 45) 52% 20%))}
.pvtext .txt{white-space:pre-wrap}
.pvbot{padding:8px 6px 0 14px;display:flex;flex-direction:column;gap:2px}
.pvdesc{padding:6px 14px calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55}
.pvdesc .btn.ghost{background:rgb(255 255 255/.1);color:#fff}
.pv .popt{background:rgb(255 255 255/.1);color:#fff}
.pv .poll{border-color:rgb(255 255 255/.18);width:100%}
.pv .trb{color:#FF8FB1}
.pv .lcard2{background:rgb(255 255 255/.06);border-color:rgb(255 255 255/.14);color:#fff;width:100%}
body.wide .pv{padding:24px 0}
body.wide .pvframe{border-radius:16px;overflow:hidden}

/* profile v2 */
.pcov{position:relative;height:172px;background:var(--sunk);overflow:hidden}
.pcov img{width:100%;height:100%;object-fit:cover;display:block}
.pcov.own{cursor:pointer}
.pcam{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgb(10 6 14/.55);color:#fff;font-size:12.5px;font-weight:600;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pcam svg{width:16px;height:16px}
.pro2{padding:0 16px 16px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pro2top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:-54px;position:relative;z-index:1}
.pav2{position:relative;border-radius:50%;flex:none}
.pav2 .av{border:4px solid var(--surface);box-shadow:var(--shadow)}
.pcam2{position:absolute;right:4px;bottom:6px;width:32px;height:32px;border-radius:50%;background:var(--wine);color:var(--on-accent);display:grid;place-items:center;border:3px solid var(--surface)}
.pcam2 svg{width:15px;height:15px}
.ond.big{position:absolute;right:10px;bottom:10px;width:18px;height:18px;border:3px solid var(--surface)}
.pro2acts{display:flex;gap:6px;align-items:center;padding-bottom:6px;flex-wrap:wrap;justify-content:flex-end}
.ibtn.sq{background:var(--sunk);border-radius:12px;width:38px;height:38px}
.ibtn.sq svg{width:19px;height:19px}
.pro2n{font-size:26px;font-weight:800;font-stretch:87.5%;display:flex;align-items:center;gap:6px;margin-top:8px}
.pro2m{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;color:var(--muted);font-size:13.5px}
.pro2m svg{width:14px;height:14px;vertical-align:-2px;margin-right:2px}
.dotsep{margin:0 3px;opacity:.6}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--sunk);font-size:12.5px;font-weight:600;color:var(--ink)}
.pchip svg{width:14px;height:14px;color:var(--wine)}
.stats2{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.stats2 button{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-radius:14px;background:var(--sunk);text-align:center}
.stats2 b{font-size:18px;font-variant-numeric:tabular-nums;line-height:1.2}
.stats2 span{font-size:11.5px;color:var(--muted)}
.pbanners{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;padding:12px 16px 0}
.pbanner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);text-align:left}
.pbanner>svg:first-child{width:22px;height:22px;color:var(--wine);flex:none}
.pbanner.adm>svg:first-child{color:var(--gold)}
.pbanner>svg:last-child{width:16px;height:16px;transform:rotate(180deg);color:var(--muted);flex:none}
.pbanner .grow{display:flex;flex-direction:column}
.pbanner small{color:var(--muted);font-size:12px}
.ptiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 4px;padding:14px 10px 8px}
.ptiles button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;font-weight:600;text-align:center;line-height:1.2}
.pti{position:relative;width:50px;height:50px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;transition:transform .15s}
.ptiles button:active .pti{transform:scale(.94)}
.pti svg{width:22px;height:22px;color:var(--wine)}
.pti .badge{position:absolute;top:-5px;right:-5px}
.ptabs2{display:flex;background:var(--surface);border-bottom:1px solid var(--line);border-top:1px solid var(--line);margin-top:8px}
.ptabs2 button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 4px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.ptabs2 button svg{width:18px;height:18px}
.ptabs2 button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--wine)}
.pgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px 0 16px}
.pgt{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sunk);display:block}
.pgt img,.pgt video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pgt.is-hidden{opacity:.5}
.pgtext{position:absolute;inset:0;padding:10px;color:#fff;font-size:12.5px;line-height:1.35;text-align:left;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;background:linear-gradient(150deg,hsl(var(--h) 45% 36%),hsl(calc(var(--h) + 40) 50% 22%))}
.pgtext svg{width:28px;height:28px;margin:auto}
.pgb{position:absolute;top:6px;right:6px;display:flex;align-items:center;gap:2px;color:#fff;font-size:11px;font-weight:700;filter:drop-shadow(0 1px 2px rgb(0 0 0/.6))}
.pgb svg{width:16px;height:16px}
@media (min-width:600px){.pgrid2{gap:4px;padding:4px 4px 16px}.pgt{border-radius:6px}}
/* edit profile */
.epcov{position:relative;height:120px;border-radius:16px;margin-bottom:38px;cursor:pointer;flex:none}
.epcov>img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.epcov .epav{position:absolute;left:14px;bottom:-38px}
.epcov .epav .av{border:4px solid var(--surface)}
.epsec{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-top:4px}

/* composer v2 */
.panel.cmpanel{height:min(92%,800px)}
.cmphead{gap:6px;padding:8px 10px}
.cmphead h2{font-size:18px}
.cmphead .btn{height:36px;padding:0 16px}
.cmphead .btn:disabled{opacity:.45;cursor:default}
.cmp{gap:14px}
.cmpwho{display:flex;align-items:center;gap:12px}
.cmpwho .grow{display:flex;flex-direction:column;min-width:0}
.cmpwho b{font-size:15px}
.cmpwho .sub{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted)}
.cmpwho .sub svg{width:13px;height:13px}
.ctext.big{font-size:19px;line-height:1.45;min-height:140px;flex:none}
.ctext.big::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.cmp .cattach{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;flex:none;scrollbar-width:thin}
.cmp .catt{width:132px;height:168px;border-radius:16px}
.cmp>.cnt{align-self:flex-end;margin-top:auto;font-size:11.5px}
.cmptools{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:4px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
.ctool{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 0;border-radius:12px}
.ctool>span{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,var(--sunk));color:var(--c);transition:transform .15s,background .15s}
.ctool:active>span{transform:scale(.92)}
.ctool svg{width:22px;height:22px}
.ctool[aria-pressed="true"]>span{background:var(--c);color:#fff}
.t-img{--c:#2FBF80}.t-vid{--c:#E5484D}.t-poll{--c:#C98A12}.t-pl{--c:var(--wine)}.t-sch{--c:#3E8EF7}
html.eco .pmtop,html.eco .pmbot,html.eco .pmplay{-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.pvin{animation:none}}

/* reposts and quotes */
.rpw{margin:0 0 16px}
.rphead{display:flex;align-items:center;gap:6px;margin:0 14px 6px;font-size:13px;color:var(--muted);min-width:0}
.rphead>svg{width:16px;height:16px;color:var(--vine);flex:none}
.rphead .pname{font-weight:700;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.rphead>span{white-space:nowrap}
.rphead .ibtn{margin-left:auto;width:28px;height:28px}
.rpw>.post{margin-bottom:0}
.qcard{display:flex;gap:10px;align-items:stretch;width:100%;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:8px;color:var(--ink);overflow:hidden;min-width:0}
button.qcard:hover{border-color:color-mix(in srgb,var(--wine) 35%,var(--line))}
.qcard.gone{align-items:center;color:var(--muted);font-size:13px;padding:12px}
.qcard.gone svg{width:18px;height:18px}
.qimg{position:relative;flex:none;width:84px;min-height:84px;border-radius:11px;overflow:hidden;background:var(--sunk)}
.qimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qimg i{position:absolute;inset:auto 6px 6px auto;width:24px;height:24px;border-radius:50%;background:rgb(0 0 0/.55);color:#fff;display:grid;place-items:center}
.qimg i svg{width:14px;height:14px}
.qtx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;padding:2px 0}
.qwho{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px}
.qwho b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qwho small{color:var(--muted);font-size:12px;white-space:nowrap}
.qb{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.cmp .qcard{margin-top:4px}
.act.on>svg{color:var(--vine)}
.act[data-a="share"].on{color:var(--vine)}

/* share sheet */
.shgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:4px;padding:12px 10px 16px}
.shgrid button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 2px;border-radius:14px;font-size:12.5px;font-weight:600;color:var(--ink);text-align:center}
.shgrid button:hover{background:var(--sunk)}
.shi{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--ink)}
.shi svg{width:24px;height:24px}
.shi.on{background:color-mix(in srgb,var(--vine) 18%,var(--surface));color:var(--vine)}
.spst{display:flex;align-items:center;color:var(--muted)}
.spst svg{width:20px;height:20px}
.eplace{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* story from a post */
.sv-post{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 76px);z-index:3;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:rgb(255 255 255/.92);color:#1D1724;font-weight:700;font-size:14px;box-shadow:0 6px 20px rgb(0 0 0/.25)}
.sv-post svg{width:18px;height:18px}

/* comments with replies */
#cb .cth{display:flex;flex-direction:column;gap:2px;padding:6px 0}
.trow.cmt{gap:8px}
.trow.cmt>button:first-child{flex:none}
.cbub{display:inline-block;max-width:100%;background:var(--sunk);border-radius:16px;padding:7px 12px 8px;font-size:14px;line-height:1.4}
.cbub b{display:block;font-size:13px;margin-bottom:1px}
.cbub p{margin:0;overflow-wrap:anywhere}
.cmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:3px 10px 0;font-size:12px;color:var(--muted)}
.cmeta button{font-size:12px;font-weight:700;color:var(--muted);padding:2px 0}
.cmeta button:hover{color:var(--ink)}
.cmeta button.on{color:var(--wine)}
.clk{display:inline-flex;align-items:center;gap:3px;color:var(--wine);font-weight:700}
.clk svg{width:13px;height:13px}
.creps{display:flex;flex-direction:column;gap:6px;padding-left:42px}
.creps:empty{display:none}
.trow.rep .cbub{font-size:13.5px}
.cmore{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--muted);padding:4px 0}
.cmore svg{width:15px;height:15px;transform:scaleX(-1)}
.cfoot .chrow .field{flex:1}

/* chat: shared posts, seen, typing */
.mpost{display:flex;flex-direction:column;width:230px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left}
.mpost img{width:100%;height:150px;object-fit:cover;display:block;background:var(--sunk)}
.mpi{display:grid;place-items:center;height:72px;background:var(--sunk);color:var(--muted)}
.mpi svg{width:26px;height:26px}
.mpt{display:flex;flex-direction:column;gap:2px;padding:8px 12px 10px;min-width:0}
.mpt b{font-size:13px}
.mpt small{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mrow.me .mcol>.mpost{align-self:flex-end}
.seenmark{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:11.5px;color:var(--muted);padding:0 10px 2px;margin-top:-4px;animation:popin .3s var(--ease-out)}
.seenmark svg{width:13px;height:13px}
.seenmark.on{color:var(--vine)}
#chsub.typing{color:var(--vine);font-weight:600}
.tdots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.tdots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:tdot 1.1s infinite ease-in-out}
.tdots i:nth-child(2){animation-delay:.15s}.tdots i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* notification settings */
.nsic{width:36px;height:36px;border-radius:11px;background:var(--sunk);display:grid;place-items:center;flex:none;color:var(--wine)}
.nsic svg{width:19px;height:19px}
.nqhours{gap:10px;padding-top:10px}
.nqhours .fld{flex:1}

/* first steps */
.fsc{margin:4px 12px 14px;padding:14px 14px 8px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--wine) 12%,var(--surface)),var(--surface) 70%);border:1px solid color-mix(in srgb,var(--wine) 22%,var(--line))}
.fsc.done{display:flex;align-items:center;gap:12px;padding:12px 14px;background:color-mix(in srgb,var(--vine) 12%,var(--surface));border-color:color-mix(in srgb,var(--vine) 30%,var(--line))}
.fsc.done .grow{display:flex;flex-direction:column}
.fshead{display:flex;align-items:flex-start;gap:8px}
.fshead .grow{display:flex;flex-direction:column;gap:2px}
.fshead b{font-size:16px}
.fsc .sub{font-size:12.5px;color:var(--muted)}
.fsbar{height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;margin:10px 0 6px}
.fsbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--wine),var(--gold));transition:width .5s var(--ease-out)}
.fslist{display:flex;flex-direction:column}
.fsi{display:flex;align-items:center;gap:12px;padding:9px 2px;font-size:14px;font-weight:600;color:var(--ink);text-align:left;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.fsi:first-child{border-top:0}
.fsi .grow{display:block;min-width:0}
.fsi em{font-style:normal;font-weight:600;color:var(--muted);font-size:12.5px;margin-left:4px}
.fsi.ok{color:var(--muted);cursor:default}
.fsi.ok .grow{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.fsic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface);border:1px solid var(--line);color:var(--wine)}
.fsic svg{width:17px;height:17px}
.fsi.ok .fsic,.fsc.done .fsic{background:var(--vine);border-color:var(--vine);color:#fff}
.fsgo{color:var(--muted);display:flex}
.fsgo svg{width:16px;height:16px;transform:rotate(180deg)}
.fsdots{display:flex;gap:6px;justify-content:center;padding:2px 0 6px}
.fsdots i{width:22px;height:4px;border-radius:2px;background:var(--sunk);transition:background .3s}
.fsdots i.on{background:var(--wine)}
.fsdots i.done{background:color-mix(in srgb,var(--wine) 45%,var(--sunk))}
.fsbody{min-height:300px}
.fsstep{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 4px}
.fsstep.left{align-items:stretch;text-align:left}
.fsstep h3{font-size:20px;margin:6px 0 0}
.fsstep p{margin:0}
.fsstep .fld{margin-top:4px}
.fsav{position:relative;border-radius:50%;margin-top:8px}
.fsav>i{position:absolute;right:2px;bottom:2px;width:36px;height:36px;border-radius:50%;background:var(--wine);color:var(--on-accent);display:grid;place-items:center;border:3px solid var(--surface)}
.fsav>i svg{width:18px;height:18px}
.fsph{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:var(--wine-soft);color:var(--wine)}
.fsph svg{width:44px;height:44px}
.fsrow{display:flex;align-items:flex-start;gap:12px}
.fsrow .grow{display:flex;flex-direction:column;gap:6px}
.fscount{flex:none;display:flex;align-items:baseline;gap:1px;padding:8px 12px;border-radius:14px;background:var(--wine-soft);color:var(--wine);font-weight:800}
.fscount b{font-size:26px;line-height:1}
.fscount span{font-size:14px}
.fsp .ptag{flex:none}
.fsideas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.fsideas .tchip{height:auto;min-height:34px;padding:6px 14px;white-space:normal;text-align:center}

/* menus with icons, sheets that scroll */
.reasons button{display:flex;align-items:center;gap:12px;justify-content:flex-start}
.reasons button>svg{width:20px;height:20px;flex:none;color:var(--muted)}
.reasons button.warnbtn>svg{color:inherit}
.panel>.svc,.panel>.reasons,.panel>.shgrid{overflow-y:auto;min-height:0;flex:0 1 auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.panel>.svc{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}

/* chat rows: no native long-press highlight or text callout, no composited filters inside the scroller */
.chatb{overflow-x:hidden}
#cb .mrow{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#cb .mrow a,#cb .mrow audio{-webkit-touch-callout:default}
.stkmsg .stk{filter:none}
.stkmsg{animation:none}
.seenmark{animation:none}
@keyframes flashmsg{0%,40%{box-shadow:0 0 0 3px rgba(201,138,18,.7)}100%{box-shadow:0 0 0 0 rgba(201,138,18,0)}}
@media (hover:none){.mact{display:none}}
#cb .mrow.held .mcol{transform:scale(.97);transition:transform .2s var(--ease-out)}

/* @mention suggestions */
.mbox{position:fixed;z-index:70;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgb(20 10 30/.22);padding:4px;max-height:260px;overflow-y:auto}
.mbox button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border-radius:10px;text-align:left;color:var(--ink)}
.mbox button[aria-selected="true"],.mbox button:hover{background:var(--sunk)}
.mbox span{display:flex;flex-direction:column;min-width:0}
.mbox b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbox small{font-size:12px;color:var(--muted)}

/* chat: reactions, mute, archive, search, media */
.mreact{display:inline-flex;align-items:center;gap:2px;margin-top:-8px;padding:2px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;line-height:1.2;box-shadow:0 2px 6px rgb(0 0 0/.08);position:relative;z-index:1;color:var(--ink)}
.mreact b{font-size:11.5px;margin-left:2px;color:var(--muted)}
.mreact.mine{border-color:color-mix(in srgb,var(--wine) 45%,var(--line));background:var(--wine-soft)}
.mreact svg{width:16px;height:16px}
.mrow.me .mreact{align-self:flex-end;margin-right:8px}
.mrow:not(.me) .mreact{margin-left:8px}
.mqr{display:flex;justify-content:space-between;gap:4px;padding:12px 16px 2px}
.mqr button{width:42px;height:42px;border-radius:50%;font-size:24px;display:grid;place-items:center;background:var(--sunk);transition:transform .15s var(--ease-out)}
.mqr button:active{transform:scale(.9)}
.mqr button.on{background:var(--wine-soft);box-shadow:0 0 0 2px var(--wine)}
.mqr button svg{width:24px;height:24px}
.rxe{font-size:22px;line-height:1;display:flex}
.rxe svg{width:22px;height:22px}
.chmu{display:inline-flex;margin-left:6px;color:var(--muted);vertical-align:-2px}
.chmu svg{width:15px;height:15px}
.badge.muted{background:var(--muted)}
.archrow .av{color:#fff}
.chgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.chgrid button{aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--sunk)}
.chgrid img{width:100%;height:100%;object-fit:cover;display:block}
.lkimg{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--sunk);display:grid;place-items:center;color:var(--muted)}
.lkimg svg{width:20px;height:20px}
#chsr mark{background:color-mix(in srgb,var(--gold) 40%,transparent);color:inherit;border-radius:3px;padding:0 1px}
#chsr .row{text-align:left}
.pv.top{z-index:57}

/* stories: polls, reactions, text stories */
.svpoll{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:3;width:min(84%,380px);display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:20px;background:rgb(255 255 255/.94);color:#1D1724;box-shadow:0 12px 40px rgb(0 0 0/.3)}
.svpoll>b{font-size:17px;text-align:center;line-height:1.3}
.svpoll small{text-align:center;color:#6C6377;font-size:12.5px}
.svpo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;background:#ECE8F1;font-weight:700;font-size:15px;color:#1D1724;overflow:hidden;text-align:left}
button.svpo{justify-content:center}
button.svpo:active{transform:scale(.98)}
div.svpo::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--pc);background:color-mix(in srgb,#4F46E5 22%,#ECE8F1);transition:width .6s var(--ease-out)}
div.svpo>*{position:relative}
div.svpo.mine{box-shadow:inset 0 0 0 2px #4F46E5}
div.svpo em{font-style:normal;color:#4F46E5}
.svpoll.inline{position:static;transform:none;width:auto;box-shadow:none;background:var(--sunk);color:var(--ink);margin-bottom:8px}
.svpoll.inline .svpo{background:var(--surface);color:var(--ink)}
.sv-rx{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 66px);z-index:3;display:flex;justify-content:center;gap:6px}
.sv-rx button{width:40px;height:40px;border-radius:50%;font-size:22px;display:grid;place-items:center;background:rgb(0 0 0/.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .15s var(--ease-out)}
.sv-rx button:active{transform:scale(1.25)}
.sv-rx button svg{width:24px;height:24px}
.sv-in:has(.sv-rx) .sv-post{bottom:calc(env(safe-area-inset-bottom,0px) + 118px)}
.stc{gap:12px}
.stprev{height:220px;border-radius:16px;display:grid;place-items:center;padding:18px;text-align:center;color:#fff;font-weight:700;font-size:18px;line-height:1.35;overflow:hidden;overflow-wrap:anywhere;transition:background .3s}
.stgs{display:flex;gap:10px}
.stgs button{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,var(--a),var(--b));border:2px solid transparent}
.stgs button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--wine)}
#st_pf{display:flex;flex-direction:column;gap:8px}

/* events: toast list and costs */
.evsec:empty{display:none}
.evsec{display:flex;flex-direction:column;gap:8px}
.evtl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.evtl li{display:flex;align-items:center;gap:8px;padding:8px 6px 8px 8px;border-radius:12px;background:var(--sunk)}
.evtl li .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface);font-size:12.5px;font-weight:800;color:var(--muted)}
.evtl li .n svg{width:14px;height:14px}
.evtl li .grow{display:flex;flex-direction:column;min-width:0;font-size:14px;font-weight:600}
.evtl li small{color:var(--wine);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.evtl li.cur{background:var(--wine-soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--wine) 45%,transparent)}
.evtl li.cur .n{background:var(--wine);color:var(--on-accent)}
.evtl li.done{opacity:.6}
.evtl li.done .grow{text-decoration:line-through}
.evtl li.done .n{background:var(--vine);color:#fff}
.evtl [data-a="evtup"] svg{transform:rotate(90deg)}
.evtl .ibtn.sm{width:30px;height:30px}
.evtadd{margin:4px 0 0;gap:8px}
.evcost-sum{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.evcost-sum div{padding:12px;border-radius:14px;background:var(--sunk);display:flex;flex-direction:column;gap:2px}
.evcost-sum b{font-size:20px}
.evcost-sum small{font-size:12px;color:var(--muted)}
.evcl .row,.evmv .row,.evpays .row{padding:8px 0}
.amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.evh4{margin:8px 0 0;font-size:14px}
.evcadd{display:grid;grid-template-columns:1fr 88px;gap:8px;margin-top:4px}
.evcadd select{grid-column:1}
.evcadd .btn{grid-column:2}
.evpays summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0}
.toastread{font-size:16px;line-height:1.6}

/* albums */
.albgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:0 16px 12px}
.albc{display:flex;flex-direction:column;gap:4px;text-align:left;color:var(--ink);min-width:0}
.albcov{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--sunk);display:grid;place-items:center;color:var(--muted)}
.albcov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.albcov i svg{width:34px;height:34px}
.albcov em{position:absolute;right:8px;bottom:8px;font-style:normal;font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:rgb(0 0 0/.55);color:#fff}
.albc b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.albc small{font-size:12px;color:var(--muted)}
.albhead{padding:14px 16px 10px;display:flex;flex-direction:column;gap:8px}
.albhead h1{font-size:22px;margin:0}
.albhead p{margin:0}
.albhead .avs{display:flex;align-items:center}
.albhead .avs>button+button{margin-left:-6px}
.albhead .avs span{margin-left:6px;font-size:12.5px;color:var(--muted)}
.albcap{display:flex;align-items:center;gap:10px;color:#fff}
.albcap .grow{display:flex;flex-direction:column;min-width:0}
.albcap small{opacity:.7;font-size:12px}
.albcap .ibtn{color:#fff}
.upbar{position:fixed;left:50%;bottom:calc(var(--bh) + 20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:6px;min-width:220px;padding:10px 14px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:13.5px;box-shadow:0 10px 30px rgb(0 0 0/.25)}
.upbar i{display:block;height:4px;border-radius:2px;background:rgb(255 255 255/.25);overflow:hidden}
.upbar i b{display:block;height:100%;background:var(--gold);transition:width .3s}

/* groups: rules, requests, management */
.grules{margin:0 16px 12px;padding:10px 14px;border-radius:14px;background:var(--sunk);font-size:14px}
.grules summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700}
.grules summary svg{width:16px;height:16px;color:var(--wine)}
.grules.open{margin:0}
.ghead .muted svg{width:14px;height:14px;vertical-align:-2px}
.row .sub svg{width:13px;height:13px;vertical-align:-2px}
.pbtns .btn .badge{margin-left:6px;position:static}
.gmreq{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
.gmnote{margin:0 0 0 54px;padding:8px 12px;border-radius:12px;background:var(--sunk);font-size:14px}
.gmreq .row2{justify-content:flex-start;gap:8px;margin-left:54px}
.gmpost{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px;border-bottom:1px solid var(--line)}
.gmpost .row2{justify-content:flex-start;gap:8px;padding:0 12px}
.gmpost .post{margin-bottom:6px}

/* admin: masked words */
.bwlist{display:flex;flex-wrap:wrap;gap:6px}
.bw{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--sunk);font-size:13.5px;font-weight:600}
.bw button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.bw button svg{width:13px;height:13px}

/* bigger text: the page is zoomed, viewport heights are divided back */
html.zoomed body{min-height:calc(100dvh / var(--z))}
html.zoomed #app{height:calc(100dvh / var(--z))}
html.zoomed .side-l,html.zoomed .side-r{height:calc(100dvh / var(--z))}
html.zoomed .livebox{height:calc(100dvh / var(--z) - var(--th) - var(--bh) - 60px)}
html.zoomed body.wide .livebox{height:calc(100dvh / var(--z) - var(--th) - 80px)}
html.zoomed .pmw{max-height:calc(68dvh / var(--z))}
html.zoomed .pvframe{height:min(calc(66dvh / var(--z)),calc(125vw / var(--z)))}
html.zoomed .pvframe.text{height:auto}
html.zoomed .panel{max-height:calc(94dvh / var(--z))}

/* high contrast */
html.hc{--muted:#3A3242;--line:#8E8399;--sunk:#E4DEEB}
@media (prefers-color-scheme:dark){html.hc:not([data-theme="light"]){--muted:#E2DAEA;--line:#7A6F86;--ink:#FFFFFF;--sunk:#2C2734}}
html.hc[data-theme="dark"]{--muted:#E2DAEA;--line:#7A6F86;--ink:#FFFFFF;--sunk:#2C2734}
html.hc :focus-visible{outline:3px solid var(--wine)!important;outline-offset:2px}
html.hc .field,html.hc .btn.ghost,html.hc .seg{border-width:1.5px}
html.hc .note,html.hc .sub,html.hc small,html.hc .muted,html.hc .hint{color:var(--muted)}
.mbox b{display:flex;align-items:center;gap:4px}
.stc>*{flex:none}
#st_pf .field{flex:none}
.evmv .grow{display:block}
@media (max-width:340px){header.top .coinchip{display:none}}
#st_pf .prow .field{flex:1}

/* header: search, chats, notifications, friends, visitors, services in one row */
header.top .hicons{display:flex;align-items:center;flex:none}
header.top .logo{flex:none}header.top.lsm .logo{gap:.16em}header.top.lsm .lw{font-size:.8em}header.top.ltight .lw{display:none}header.top.ltight .kmk{width:1.32em;height:1.32em}
header.top .hicons .ibtn{width:38px;height:40px;border-radius:12px}
header.top .hicons .dot{top:4px;right:0;min-width:15px;height:15px;font-size:9.5px;padding:0 3px;box-shadow:0 0 0 2px var(--surface)}
@media (max-width:430px){header.top .hicons .ibtn{width:35px}header.top .hicons .ibtn svg{width:21px;height:21px}header.top .logo{font-size:27px}header.top .coinchip{padding:0 8px 0 5px;gap:4px}}
@media (max-width:384px){header.top .hicons .ibtn{width:32px;height:38px}header.top .hicons .ibtn svg{width:20px;height:20px}header.top .logo{font-size:24px}header.top .coinchip{height:30px;font-size:12px}header.top .coinchip svg{width:17px;height:17px}}
@media (max-width:350px){header.top .hicons .ibtn{width:30px}header.top{padding-left:calc(10px + env(safe-area-inset-left,0px));padding-right:calc(2px + env(safe-area-inset-right,0px))}}

/* a picture field for groups and pages */
.picf{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:var(--sunk);border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent)}
.picf .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.picf .grow b{font-size:14px}
.picf .sub{font-size:12px;color:var(--muted)}
.picb{position:relative;width:64px;height:64px;border-radius:18px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--wine)}
.picb>img{width:100%;height:100%;object-fit:cover;display:block}
.picb>span svg{width:26px;height:26px}
.picb>i{position:absolute;right:4px;bottom:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0/.55);color:#fff}
.picb>i svg{width:13px;height:13px}
.picf.busy .picb::after{content:"";position:absolute;inset:0;background:rgb(0 0 0/.35) center/26px no-repeat;animation:pulse 1s ease-in-out infinite}
.picf.busy .sub::after{content:" · იტვირთება…"}

/* group and page headers: the picture, tappable for the owner */
.gbig{position:relative;overflow:hidden;padding:0}
.gbig.img{background:var(--sunk)}
.gbig>img{width:100%;height:100%;object-fit:cover;display:block}
button.gbig>i{position:absolute;right:5px;bottom:5px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0/.55);color:#fff}
button.gbig>i svg{width:13px;height:13px}
.gbig.img>i{opacity:.9}

/* groups of your corner */
#placeg .sec2{margin-top:6px}
.placenew{margin:10px 16px 0;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.placenew .chipsbar{padding:0;flex-wrap:wrap;overflow:visible}
.placenew .chipsbar button{display:inline-flex;align-items:center;gap:4px;color:var(--wine);border-color:color-mix(in srgb,var(--wine) 40%,var(--line))}
.placenew .chipsbar svg{width:15px;height:15px}

/* grades on profile photo tiles */
.pgg{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 7px 0 5px;border-radius:999px;background:rgb(14 10 18/.62);color:#fff;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pgg svg{width:13px;height:13px;color:#FFD166}
.pgg small{font-size:10px;font-weight:600;opacity:.75;margin-left:2px}
.pgg.on{background:var(--gold);color:#1A1205}
.pgg.on svg{color:#1A1205}
.pgg.new{font-weight:600;background:rgb(14 10 18/.5)}
.pgg.new svg{color:#fff}
.post.pc .grade{padding:2px 0 0}

/* CV: a header card and sections with a timeline */
.cvwrap{padding:12px 16px 20px;display:flex;flex-direction:column;gap:10px}
.cvbar{display:flex;align-items:center;gap:8px;justify-content:space-between}
.cvvis{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.cvvis svg{width:15px;height:15px}
.cvvis.on{color:var(--wine)}
.cvv{display:flex;flex-direction:column;gap:10px}
.cvhero{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--wine-soft),color-mix(in srgb,var(--gold) 14%,var(--surface)));border:1px solid var(--line)}
.cvhero .grow{display:flex;flex-direction:column;gap:3px;min-width:0}
.cvhero h2{font-size:19px;line-height:1.25;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cvhl{font-size:14px;font-weight:600;color:var(--wine);line-height:1.35}
.cvmeta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted)}
.cvmeta svg{width:14px;height:14px}
.cvsec{padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.cvsec h3{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin:0}
.cvsec h3 svg{width:17px;height:17px;color:var(--wine)}
.cvsum{font-size:14.5px;line-height:1.55}
.cvtl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.cvit{display:flex;align-items:flex-start;gap:12px;position:relative;padding-bottom:14px}
.cvit:last-child{padding-bottom:0}
.cvit:not(:last-child)::before{content:"";position:absolute;left:17px;top:38px;bottom:2px;width:2px;border-radius:2px;background:var(--line)}
.cvdot{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--wine-soft);color:var(--wine)}
.cvdot svg{width:18px;height:18px}
.cvit .grow{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
.cvit b{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.cvit .grow span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.cvit em{font-style:normal;font-size:12px;font-weight:600;white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--sunk);color:var(--ink);margin-top:2px}
.cvchips{display:flex;flex-wrap:wrap;gap:6px}
.cvchips span{padding:6px 12px;border-radius:999px;background:var(--sunk);font-size:13px;font-weight:600;border:1px solid var(--line)}
.cvchips.lang span{background:transparent}
.cvcall{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;padding:2px 0}
.cvcall .grow{display:flex;flex-direction:column;gap:1px}
.cvcall b{font-size:15px;font-variant-numeric:tabular-nums}
.cvcall small{font-size:12px;color:var(--muted)}
.cvcall>svg{width:18px;height:18px;transform:rotate(180deg);color:var(--muted)}
.sheet .cvv .cvhero{margin-top:2px}
.placec .sub,.picf .sub{white-space:normal;overflow:visible;text-overflow:clip}
.btn.ghost.warnbtn{color:var(--nope)}

/* stories: hold to pause, the controls step aside; the picture keeps its own shape */
.sv-in>img{object-fit:contain;background:#000}
.sv.holding .sv-head,.sv.holding .sv-rx,.sv.holding .sv-foot,.sv.holding .sv-bars,.sv.holding .sv-post,.sv.holding .svpoll{opacity:0;transition:opacity .2s}
.sv-head,.sv-rx,.sv-foot,.sv-bars{transition:opacity .2s}
#svpz svg{width:20px;height:20px}
.sv-prev,.sv-next{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* a reply or an emoji on a story, in the chat */
.stmsg{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:78%}
.stmsg.me{align-items:flex-end;margin-left:auto}
.stlbl{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.stlbl svg{width:14px;height:14px}
.stthumb{position:relative;width:132px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;display:block;box-shadow:0 2px 10px rgb(20 10 30/.15);border:2px solid var(--surface)}
.stmsg.me .stthumb{border-color:color-mix(in srgb,var(--wine) 35%,var(--surface))}
.stthumb img,.stthumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.stthumb .svplay{position:absolute;inset:auto auto 8px 8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgb(0 0 0/.55);color:#fff}
.stthumb .svplay svg{width:15px;height:15px}
.stgone{display:none;position:absolute;inset:0;place-items:center;text-align:center;padding:10px;font-size:12px;color:#fff;background:linear-gradient(160deg,#3a2a40,#151018)}
.stmsg.gone .stgone{display:grid}
.stmsg.gone .stthumb img,.stmsg.gone .stthumb video{visibility:hidden}
.stemo{font-size:44px;line-height:1}
.stemo svg{width:46px;height:46px}
.stmsg .bubble{max-width:100%}

/* sheets whose content is a grid or a form scroll inside the panel (the create sheet, gifts, matches) */
.panel>.createg,.panel>.match,.panel>.gmenu,.panel>.jchoice,.panel>.gifts,.panel>.form{overflow-y:auto;min-height:0;flex:0 1 auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.panel>.createg{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));align-content:start}

/* home: the services strip, small pictures of the pages */
.svstrip{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 0 14px}
.svhd{display:flex;align-items:center;gap:4px;padding:0 10px 8px 16px}
.svhd h3{font-size:15px;font-weight:700}
.svall{height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--wine);background:var(--wine-soft)}
.svarr{display:none;width:30px;height:30px}
.svarr svg{width:18px;height:18px}
.svarr.nx svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.svarr{display:grid}}
.svtrack{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 4px;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.svtrack::-webkit-scrollbar{display:none}
.svcard{flex:0 0 136px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;text-align:left;border-radius:18px;overflow:hidden;background:var(--sunk);border:1px solid var(--line);transition:transform .2s var(--ease-out)}
.svcard:active{transform:scale(.97)}
.svart{position:relative;height:78px;overflow:hidden;background:linear-gradient(140deg,hsl(var(--h) 74% 60%),hsl(calc(var(--h) + 34) 68% 40%));display:flex;align-items:flex-end;padding:10px}
.svart::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 12%,rgb(255 255 255/.32),transparent 46%)}
.svbig{position:absolute;right:-14px;bottom:-16px;color:#fff;opacity:.2;transform:rotate(-12deg)}
.svbig svg{width:78px;height:78px;stroke-width:1.4}
.svico{position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgb(255 255 255/.94);color:hsl(var(--h) 62% 38%);box-shadow:0 3px 10px rgb(0 0 0/.16)}
.svico svg{width:21px;height:21px}
.svlive{position:absolute;top:8px;left:8px;max-width:calc(100% - 16px);height:20px;padding:0 8px;border-radius:999px;background:rgb(0 0 0/.42);color:#fff;font-style:normal;font-size:11px;font-weight:700;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.svlive.red::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#FF4D6D;margin-right:5px;vertical-align:1px;animation:pulse 1.4s ease-in-out infinite}
.svcard b{font-size:14px;line-height:1.25;padding:9px 11px 0}
.svcard small{font-size:11.5px;line-height:1.35;color:var(--muted);margin:2px 11px 11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:calc(2 * 1.35em)}
@media (prefers-reduced-motion:reduce){.svlive.red::before{animation:none}}

/* photos are never cropped and nothing lies on top of them: the author row above, the photo in its own shape
   (between 4:5 and 1.91:1, the rest is the theme's background), grades and actions below; the viewer letterboxes on black */
.pmw{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);box-shadow:none}
.pmmedia{position:relative;aspect-ratio:var(--ar,1);max-height:68dvh;background:var(--sunk);overflow:hidden;flex:none}
/* the photo fills its frame edge to edge: the frame takes the photo's shape (from 4:5 to 1.91:1), only photos beyond that are trimmed a little */
.pmi img,.pmi video{object-fit:cover;object-position:center}
.pmw .pmtop{position:static;height:auto;padding:10px 12px;background:none;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:auto}
.pmw .pmtop .av{box-shadow:none}
.pmw .pmtop .pname,.pmw .pmtop .pname b{color:var(--ink)}
.pmw .pmtop .pwtime{color:var(--muted)}
.pmw .pmtop .ptag{background:var(--sunk);color:var(--muted)}
.pmw .pmtop .ptag.plc{background:var(--wine-soft);color:var(--wine)}
.pmw .pmtop .ptag.warn{background:color-mix(in srgb,var(--nope) 16%,transparent);color:var(--nope)}
.pmw .pmtop .ptag.ad{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold)}
.pmw .pmtop .vb{color:#fff}
.pmw .pmcount{background:var(--sunk);color:var(--ink)}
.pmw .pmbot{position:static;padding:4px 6px 2px 12px;background:none;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:auto}
.pmw .pmdots i{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.pmw .pmdots i.on{background:var(--wine)}
.pmw .pmbot .grade{color:var(--muted)}
.pmw .pmbot .grade button{border-color:var(--line);color:var(--ink)}
.pmw .pmbot .grade button.plus{color:var(--gold);border-color:var(--gold)}
.pmw .pmbot .grade button.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.pmw .pmbot .act{color:var(--muted)}
.pmw .pmbot .act:hover{background:var(--sunk)}
.pmw .pmbot .act.on{color:var(--wine)}
html.eco .pmw .pmtop,html.eco .pmw .pmbot{-webkit-backdrop-filter:none;backdrop-filter:none}
.pvs{position:relative}
.pvs img,.pvs video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}

/* profile: the actions sit in one labeled row under the name, so settings are easy to find */
.pro2row{display:flex;gap:8px;margin-top:14px;align-items:center}
.pro2row .btn{flex:1 1 0;min-width:0;height:42px;padding:0 10px;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pro2row .btn svg{width:18px;height:18px;flex:none}
.pro2row .ibtn.sq{width:42px;height:42px;flex:none}
.pro2row .btn.ghost{background:var(--sunk);border-color:var(--line)}
html.zoomed .pmw{max-height:none}html.zoomed .pmmedia{max-height:calc(68dvh / var(--z))}
.pro2row .btn{font-size:14px}.pro2row .btn:first-child{flex-grow:1.35}
.stlbl{white-space:nowrap}

/* story stickers: on the story and in the composer */
.svst{position:absolute;inset:0;z-index:2;pointer-events:none}
.sst{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;max-width:78%;padding:8px 13px;border-radius:14px;background:#fff;color:#1d1320;font-weight:700;font-size:15px;box-shadow:0 6px 22px rgb(0 0 0/.28);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.sst svg{width:17px;height:17px;flex:none}
.sst span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sst-mention{color:#4F46E5}
.sst-place{color:#1d1320}
.sst-place svg{color:#4F46E5}
.sst-count,.sst-ask{flex-direction:column;align-items:stretch;gap:4px;min-width:170px;text-align:center;padding:12px 14px;background:linear-gradient(150deg,#fff,#FCE9F0)}
.sst-count b,.sst-ask b{font-size:15px;line-height:1.25;white-space:normal}
.stkc{font-family:var(--f-display);font-size:24px;font-weight:800;color:#4F46E5}
.stkf,.sst-ask small{font-size:12px;font-weight:500;color:#6b5a70}
.svask{display:flex;gap:6px;margin-top:4px}
.svask input{flex:1;min-width:0;height:36px;border-radius:10px;border:1px solid #e7d6de;padding:0 10px;font:inherit;font-size:14px;font-weight:500;background:#fff;color:#1d1320}
.svask button{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#4F46E5;color:#fff}
.svask button svg{width:17px;height:17px}
.sv.holding .svst{opacity:0;transition:opacity .2s}
.scmp{gap:10px}
.scbox{position:relative;width:min(100%,300px);aspect-ratio:9/16;margin:0 auto;border-radius:18px;overflow:hidden;background:#000;flex:none}
.scbox>img,.scbox>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sclay{position:absolute;inset:0}
.sclay .sst{font-size:12.5px;padding:6px 10px;cursor:grab}
.sclay .sst.drag{cursor:grabbing;box-shadow:0 10px 30px rgb(0 0 0/.4)}
.sclay .sst-count,.sclay .sst-ask{min-width:130px;padding:8px 10px}
.sclay .stkc{font-size:18px}
.stkx{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#1d1320;color:#fff;box-shadow:0 2px 6px rgb(0 0 0/.3)}
.stkx svg{width:12px;height:12px}
.sctools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:none}
.sctools button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;background:var(--sunk);font-size:12px;font-weight:600}
.sctools button svg{width:20px;height:20px;color:var(--wine)}
.scpan{display:flex;flex-direction:column;gap:8px}
.scpan.row2,.scpan .row2{flex-direction:row;align-items:center}
.scpan .field{flex:1;min-width:0}
.scres{display:flex;flex-wrap:wrap;gap:6px}
.scres button{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--sunk);font-size:13px;font-weight:600}

/* ---------- highlights on the profile, story archive ---------- */
.hlrow{display:flex;gap:14px;overflow-x:auto;padding:6px 16px 10px;scrollbar-width:none}
.hlrow::-webkit-scrollbar{display:none}
.hlc{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:600;text-align:center}
.hlc>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hlr{width:62px;height:62px;border-radius:50%;padding:3px;background:var(--surface);box-shadow:0 0 0 1.5px var(--line);display:grid;place-items:center;overflow:hidden;color:var(--muted);flex:none}
.hlr img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.hlr svg{width:24px;height:24px}
.hlc.add .hlr{box-shadow:none;border:1.5px dashed var(--muted);background:var(--sunk)}
.hlr.sm{width:42px;height:42px;padding:2px}
.hlr.sm svg{width:18px;height:18px}
.argrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px 0 28px}
.argh{grid-column:1/-1;margin:14px 16px 6px;font-size:15px;font-family:var(--f-display)}
.art{position:relative;aspect-ratio:9/16;background:var(--sunk);overflow:hidden}
.art img,.art video{width:100%;height:100%;object-fit:cover;display:block}
.ard{position:absolute;left:6px;top:6px;min-width:26px;padding:1px 6px;border-radius:8px;background:rgb(255 255 255/.92);color:#1d1320;font-weight:800;font-size:13px;text-align:center}
.arlive{position:absolute;left:6px;bottom:6px;font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#4F46E5;color:#fff}
#hlmine .list .row{align-items:center;gap:10px}
#hlrow .hlrow{margin:2px -16px 0;padding:4px 16px 8px}

/* ---------- QR code ---------- */
.qrb{display:flex;flex-direction:column;gap:14px}
.qrcard{align-self:center;width:min(100%,270px);padding:16px 16px 14px;border-radius:24px;background:#fff;color:#1d1320;box-shadow:0 10px 34px rgb(30 20 40/.16);display:flex;flex-direction:column;gap:10px;align-items:center;border:1px solid #eee5ee}
.qrimg{width:100%;aspect-ratio:1;display:grid;place-items:center}
.qrimg svg{width:100%;height:100%;display:block}
.qrwho{display:flex;align-items:center;gap:8px;font-size:15px;max-width:100%}
.qrwho b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrb .row2{justify-content:center;flex-wrap:wrap}
.qrscan{display:flex;flex-direction:column;gap:12px}
.qrcam{position:relative;width:min(100%,360px);aspect-ratio:3/4;margin:0 auto;border-radius:20px;overflow:hidden;background:#000}
.qrcam video{width:100%;height:100%;object-fit:cover;display:block}
.qrframe{position:absolute;inset:20% 14%;border:3px solid rgb(255 255 255/.92);border-radius:20px;box-shadow:0 0 0 999px rgb(0 0 0/.38)}

/* ---------- badges ---------- */
.bdgs{display:flex;flex-direction:column;gap:8px;width:100%;margin:10px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-align:left}
.bdgh{display:flex;align-items:center;gap:8px;font-size:14px}
.bdgh em{font-style:normal;color:var(--muted);font-size:13px;font-weight:600}
.bdgh svg{width:16px;height:16px;margin-left:auto;transform:rotate(180deg);color:var(--muted)}
.bdgl{display:flex;flex-wrap:wrap;gap:6px}
.bdg{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:linear-gradient(150deg,#FFF6DD,#F7DCE6);box-shadow:inset 0 0 0 1.5px rgb(201 138 18/.45)}
.bdggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.bdgc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px 12px;border-radius:var(--r);background:var(--sunk);text-align:center}
.bdgc:not(.on) .bdgi{filter:grayscale(1);opacity:.45}
.bdgc.on{background:var(--surface);box-shadow:var(--shadow)}
.bdgi{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:linear-gradient(150deg,#FFF6DD,#F7DCE6);margin-bottom:2px}
.bdgc b{font-size:14px;line-height:1.3}
.bdgc small{font-size:12px;color:var(--muted);line-height:1.35}
.bdgc em{font-style:normal;font-size:12px;font-weight:700;color:var(--gold);display:inline-flex;align-items:center;gap:3px;margin-top:2px}
.bdgc em svg{width:14px;height:14px}

/* ---------- topics for the feed ---------- */
.feedbar{display:flex;align-items:center;gap:6px;margin:12px 16px}
.feedbar .seg{flex:1;margin:0;min-width:0}
.feedbar>.ibtn{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sunk);display:grid;place-items:center}
.tpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 14px}
.tpc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;border-radius:14px;background:var(--sunk);font-size:12.5px;font-weight:600;text-align:center;border:1.5px solid transparent;line-height:1.25}
.tpc span{font-size:24px;line-height:1}
.tpc[aria-pressed="true"]{background:var(--wine-soft);border-color:var(--wine)}
.sec3{font-size:14px;margin:4px 0 8px}
.tpmine{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tpmine .chip{display:inline-flex;align-items:center;gap:4px}
.tpmine .chip svg{width:13px;height:13px}
#tpb .row2 .field{flex:1;min-width:0}

/* ---------- saved folders ---------- */
.savchips button{display:inline-flex;align-items:center;gap:4px}
.savchips button svg{width:16px;height:16px}
.sbic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:var(--on-accent);flex:none}
.sbic svg{width:18px;height:18px}
.fico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--sunk);color:var(--wine);flex:none}
.fico svg{width:20px;height:20px}
#fnf .field,#hlnf .field{flex:1;min-width:0}

/* ---------- Georgian kitchen ---------- */
.rcsearch{margin:12px 16px 10px}
.rcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 12px;padding:4px 16px 28px}
.rcard{display:flex;flex-direction:column;gap:3px;text-align:left;min-width:0}
.rcimg{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--sunk);display:block}
.rcimg>img,.rcimg>.rcart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcimg em{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgb(0 0 0/.55);color:#fff;font-style:normal;font-size:12px;font-weight:600}
.rcimg em svg{width:13px;height:13px}
.rcart{display:grid;place-items:center;background:radial-gradient(120% 100% at 30% 20%,hsl(var(--h) 75% 84%),hsl(var(--h) 52% 60%))}
.rcart i{font-style:normal;font-size:46px;filter:drop-shadow(0 4px 8px rgb(0 0 0/.2))}
.rcard b{font-size:14.5px;line-height:1.3;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcst{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);font-weight:600}
.rcst svg{width:14px;height:14px}
.rchero{position:relative;aspect-ratio:16/10;max-height:46vh;width:100%;background:var(--sunk);overflow:hidden}
.rchero>img,.rchero>.rcart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rchero .rcart i{font-size:84px}
.rcbody{display:flex;flex-direction:column;gap:12px;padding:18px 16px 32px;margin-top:-20px;position:relative;background:var(--bg);border-radius:22px 22px 0 0}
.rcbody h1{font-size:26px}
.rcby{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.rcby .pname,.rccook .pname{display:inline-flex;width:auto;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.rcsys{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.rcsys svg{width:16px;height:16px;color:var(--wine)}
.rcmeta{display:flex;flex-wrap:wrap;gap:6px}
.rcmeta span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--sunk);font-size:13px;font-weight:600}
.rcmeta svg{width:14px;height:14px;color:var(--wine)}
.rcabout{font-size:15px;line-height:1.6}
.rcsec{background:var(--surface);border-radius:var(--r);padding:14px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.rcsec h3{font-size:18px}
.rcsh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--sunk);border-radius:999px;padding:3px}
.stepper button{width:32px;height:32px;border-radius:50%;font-size:18px;font-weight:700;display:grid;place-items:center;background:var(--surface);box-shadow:0 1px 3px rgb(0 0 0/.12)}
.stepper span{min-width:78px;text-align:center;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rcing{list-style:none;margin:0;padding:0}
.rcing li{border-bottom:1px solid var(--line)}
.rcing li:last-child{border-bottom:0}
.rcing label.chk{align-items:center;padding:10px 0;font-size:15px}
.rcing .chk span{flex:1;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rcing .chk b{font-weight:500}
.rcing .chk em{font-style:normal;font-weight:700;color:var(--wine);white-space:nowrap}
.rcing input:checked+span{opacity:.45;text-decoration:line-through}
.rcsteps{margin:0;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:14px}
.rcsteps li{counter-increment:st;display:grid;grid-template-columns:28px 1fr;gap:10px;line-height:1.6}
.rcsteps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--wine);color:var(--on-accent);font-weight:800;font-size:14px}
.rccooks{display:flex;flex-direction:column;gap:14px}
.rccook{display:flex;gap:10px;align-items:flex-start}
.rccook p{font-size:14px;margin-top:3px}
.rccook small{font-size:12px;color:var(--muted)}
.rccp{flex:none;width:78px;height:78px;border-radius:12px;overflow:hidden;background:var(--sunk)}
.rccp img{width:100%;height:100%;object-fit:cover;display:block}
.rcpick{display:flex;flex-direction:column;max-height:42vh;overflow:auto;padding:2px 0}
.rcpick label.chk{align-items:center;padding:8px 2px;font-size:14px}
.rcrows{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.rcrow{display:grid;grid-template-columns:1fr 104px 32px;gap:6px;align-items:center}
.rcrow.st{grid-template-columns:24px 1fr 32px;align-items:start}
.rcrow .field{min-width:0}
.rcn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--wine-soft);color:var(--wine);font-weight:800;font-size:12.5px;margin-top:9px}
.ckbody{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:28px 20px;min-height:50vh}
.ckn{font-size:13px;font-weight:700;color:var(--wine)}
.ckt{font-family:var(--f-display);font-size:24px;line-height:1.5}
.ckbody .btn{align-self:flex-start}

/* ---------- online joker ---------- */
.jkonline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border-radius:12px;background:var(--wine-soft)}
.jkonline>div{flex:1;min-width:180px}
.jkonline .note{margin-top:2px}
.jkwait{gap:14px}
.jkseats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.jkseat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:14px;background:var(--sunk);text-align:center;min-width:0}
.jkseat b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jkseat small{font-size:11.5px;color:var(--muted);line-height:1.25}
.jkseat.free{background:transparent;border:1.5px dashed var(--line)}
.av.cav{background:#4A2E20 url(/icons/g/cast2f.webp) 0 0/1000% 100% no-repeat}
.av.jkempty{background:transparent;border:2px dashed currentColor;color:var(--muted);display:inline-grid;place-items:center;font-weight:700;opacity:.7}
.jt .av.jkempty{color:#F5EFE4}
.jkwait .seg{margin:0}
.jkacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.jko .jt{margin-top:2px}

/* ---------- comments with a sticker or a photo ---------- */
.cbub.hasm{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cstk{display:block;width:96px;height:96px}
.cbub.stkonly{background:none;padding:0 0 0 2px;border:0;box-shadow:none}
.cstk .stk{width:100%;height:100%}
.cimg{display:block;width:min(220px,100%);aspect-ratio:var(--ar,4/3);max-height:280px;border-radius:12px;overflow:hidden;background:var(--sunk);margin-top:2px}
.cimg img{width:100%;height:100%;object-fit:cover;display:block}
.cfoot .chrow .ibtn{flex:none}

/* ---------- a group video call in the chat ---------- */
.callmsg{display:flex;align-items:center;gap:10px;max-width:78%;min-width:min(250px,78%);padding:10px 14px 10px 10px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:left;box-shadow:var(--shadow)}
.callmsg.me{margin-left:auto}
.callmsg .grow{display:flex;flex-direction:column;min-width:0}
.callmsg b{font-size:14px}
.callmsg small{font-size:12.5px;color:var(--vine);font-weight:600}
.cmi{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--vine);color:#fff;flex:none}
.cmi svg{width:20px;height:20px}

/* ---------- admin panel: tabs, overview, charts ---------- */
.adtabs{padding-top:12px}
.adstats.wide{grid-template-columns:repeat(2,1fr)}
.sec2+.adstats{padding-top:0}
.adquick{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}
.adcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;padding:12px 16px 4px}
.dchart{margin:0;padding:14px 14px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.dchart figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14px}
.dchart figcaption span{font-size:12px;color:var(--muted)}
.dcbars{display:flex;align-items:flex-end;gap:2px;height:96px;padding-top:18px;border-bottom:1px solid var(--line)}
.dcb{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;outline:none}
.dcb i{display:block;width:100%;max-width:18px;height:max(calc(var(--v) * 100%),2px);border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--wine) 42%,var(--surface))}
.dcb.now i{background:var(--wine)}
.dcb em{position:absolute;bottom:calc(var(--v) * 100% + 2px);font-style:normal;font-size:11px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dcb:hover i,.dcb:focus-visible i{background:var(--wine)}
.dcb:hover::after,.dcb:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(var(--v) * 100% + 20px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:4px 8px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;z-index:2;pointer-events:none}
.dcb:first-child:hover::after,.dcb:first-child:focus-visible::after{left:0;transform:none}
.dcb:last-child:hover::after,.dcb:last-child:focus-visible::after{left:auto;right:0;transform:none}
.dcx{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.dctbl summary{font-size:12px;color:var(--muted);cursor:pointer}
.dctbl table{width:100%;font-size:12.5px;border-collapse:collapse;margin-top:6px}
.dctbl td{padding:3px 0;border-bottom:1px solid var(--line)}
.dctbl td:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* content browser */
.adhid{padding:0 16px 8px}
.acrow{display:flex;gap:12px;margin:8px 16px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.acrow .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
.acrow p{font-size:14px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acrow .sub{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.acrow .pbtns{margin-top:4px;gap:6px}
.acth{width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--sunk);flex:none}
.acth img,.acth video{width:100%;height:100%;object-fit:cover;display:block}
#acmore{margin:8px 16px 20px;width:calc(100% - 32px)}

/* one person */
.auinfo{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.auin{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.auin span{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:12px;background:var(--sunk);font-size:11.5px;color:var(--muted);text-align:center;line-height:1.25}
.auin b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.auinfo .sub{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}

/* promos in the admin */
.prcard .reppv b{font-size:14.5px}
.prcard .reppv .sub{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.prstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prstats span{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:12px;background:var(--sunk);font-size:11.5px;color:var(--muted);text-align:center}
.prstats b{font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
.prform{gap:12px}
.prmd{position:relative;width:100%;aspect-ratio:var(--ar,16/9);max-height:46vh;border-radius:14px;overflow:hidden;background:var(--sunk);display:grid;place-items:center;border:1.5px dashed var(--line);flex:none}
.prmd.story{width:min(62%,240px);margin:0 auto}
.prmd img,.prmd video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prmd>span{font-size:13px;color:var(--muted);padding:12px;text-align:center}
.prmd.busy::after{content:"";position:absolute;inset:0;background:rgb(0 0 0/.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='none' stroke='white' stroke-width='4' stroke-dasharray='60 30'/%3E%3C/svg%3E") center/40px no-repeat}
.prlinks{margin-top:-4px}
.prlinks .chip{height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;font-weight:600}
.fld .inl{display:flex;align-items:center;gap:8px;margin-top:4px}
.fld .inl input{width:90px}
.fld .inl span{font-size:14px;color:var(--muted)}

/* a notification to everyone, the site, the log */
.adnf{padding:12px 16px;gap:12px}
.adnf .fld{position:relative}
.adnf .cnt{align-self:flex-end;margin-top:2px}
.anest{display:flex;align-items:center;gap:8px;font-size:14px;padding:10px 12px;border-radius:12px;background:var(--sunk)}
.anest svg{width:18px;height:18px;color:var(--wine)}
.bcrow{align-items:flex-start}
.bcrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.bcrow .grow>span:first-child{font-size:14px;overflow-wrap:anywhere}
.bcrow .sub{font-size:12px;color:var(--muted)}
.adsite{margin:12px 16px}
.adsite h3{font-size:17px}
.feats .setrow:last-child{border-bottom:0}
.bnpv:empty{display:none}
.lgrow{align-items:flex-start;gap:10px}
.lgrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:14px;overflow-wrap:anywhere}
.lgrow .sub{font-size:12px;color:var(--muted)}

/* ---------- what everyone sees: banner, sponsored post, sponsored story ---------- */
.annc{display:flex;align-items:center;gap:10px;margin:10px 12px 0;padding:10px 10px 10px 12px;border-radius:16px;font-size:14px;line-height:1.4;border:1px solid transparent}
.annc .grow{min-width:0;overflow-wrap:anywhere}
.anic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.anic svg{width:18px;height:18px}
.annc.t-info{background:var(--wine-soft);border-color:color-mix(in srgb,var(--wine) 25%,transparent)}
.annc.t-info .anic{background:var(--wine);color:var(--on-accent)}
.annc.t-warn{background:color-mix(in srgb,var(--gold) 16%,var(--surface));border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.annc.t-warn .anic{background:var(--gold);color:var(--on-gold)}
.annc.t-fest{background:color-mix(in srgb,var(--vine) 14%,var(--surface));border-color:color-mix(in srgb,var(--vine) 35%,transparent)}
.annc.t-fest .anic{background:var(--vine);color:#fff}
.annc .btn{flex:none}
.post.promo{gap:10px;padding-bottom:12px}
.post.promo .pchead .ibtn{margin-left:auto}
.post.promo .ptag.ad{margin-left:0}
.prt{font-size:17px;line-height:1.3}
.prm{display:block;position:relative;width:calc(100% + 28px);margin:0 -14px;aspect-ratio:var(--ar,1);max-height:68dvh;background:var(--sunk);overflow:hidden}
.prm img,.prm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.prcta{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:11px 14px;border-radius:12px;background:var(--wine);color:var(--on-accent);font-weight:700;font-size:14.5px}
.prcta svg{width:18px;height:18px;transform:rotate(180deg)}
.prpad{display:none}
.prev{padding:12px 0}
.prev .post.promo{margin:0 12px}
.ring.ad::before{background:conic-gradient(from 0deg,var(--gold),#FFD166,var(--gold))}
.ring.ad.seen::before{background:var(--line)}
.ring .adtag{width:auto;height:auto;left:50%;right:auto;bottom:-4px;transform:translateX(-50%);padding:1px 6px;border-radius:6px;background:var(--gold);color:var(--on-gold);font-size:9px;font-weight:800;font-style:normal;white-space:nowrap;position:absolute;line-height:1.4}
.sv-cap{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 130px);z-index:3;display:flex;flex-direction:column;gap:4px;color:#fff;text-shadow:0 1px 8px rgb(0 0 0/.6);pointer-events:none}
.sv-cap b{font-size:20px;line-height:1.25;font-family:var(--f-display)}
.sv-cap span{font-size:14.5px;line-height:1.45}
.sv-cta{bottom:calc(env(safe-area-inset-bottom,0px) + 40px);background:var(--gold);color:var(--on-gold)}
.sv-cta svg{transform:rotate(180deg)}
.seg button svg{width:16px;height:16px;flex:none}
.frow>.fld{min-width:0}
.frow input[type="datetime-local"]{min-width:0;width:100%;font-size:14px}
@media (max-width:440px){.prform .frow:has(input[type="datetime-local"]){grid-template-columns:1fr}}

/* ---------- games: 3D boards, fullscreen, domino ---------- */
.gtop .g3tg.on{color:var(--gold)}
.gacts{display:flex;gap:8px;flex-wrap:wrap}
.gacts:empty{display:none}
.gres svg{width:16px;height:16px}
.gcap{font-size:15px;letter-spacing:-.5px;color:var(--muted);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gcap small{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:0}
.prom{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px}
.prom button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:14px;background:var(--sunk);font-size:12.5px;font-weight:600}
.prom button span{font-size:40px;line-height:1}
.g3{position:relative;width:100%;aspect-ratio:1/.96;border-radius:16px;overflow:hidden;background:#0b0807;box-shadow:var(--shadow);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.g3-nardi{aspect-ratio:1/.92}
.g3cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:inherit}
.g3sr,.g3jt .trick{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0!important;margin:0!important;border:0!important;min-height:0!important}
.g3rv{position:absolute;right:8px;top:8px;z-index:3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgb(20 12 8/.6);color:#F5E7C8;opacity:0;pointer-events:none;transition:opacity .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.g3rv svg{width:18px;height:18px}
.g3.moved .g3rv{opacity:1;pointer-events:auto}
.is3d .g3hide{display:none}
.jt.g3jt{display:block;position:relative;aspect-ratio:4/5;min-height:0;padding:0;background:#0b0807;overflow:hidden}
.g3jt .g3{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.g3jt .seat{position:absolute;z-index:2;pointer-events:none;display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto;column-gap:7px;row-gap:0;align-items:center;text-align:left;
 background:rgb(12 8 6/.62);padding:3px 11px 3px 3px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgb(0 0 0/.35);white-space:nowrap;width:max-content}
.g3jt .seat>.av{grid-row:1/3;--s:30px!important;width:30px;height:30px}
.g3jt .seat b{grid-column:2/4;font-size:12px;max-width:96px;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.g3jt .seat .bt{background:none;padding:0;font-size:11px;color:#E9DCC6;line-height:1.2}
.g3jt .seat>span:not(.bt):not(.av){font-size:11px;color:#F2C46A;font-weight:700;font-variant-numeric:tabular-nums}
.g3jt .seat>span:not(.bt):not(.av)::before{content:"· ";color:#E9DCC6;font-weight:400}
.g3jt .seat.turn{box-shadow:0 0 0 2px var(--gold),0 2px 12px rgb(0 0 0/.4)}
.g3jt .seat{left:50%;top:50%;transform:translate(-50%,-50%)}
.g3jt .seat.top{top:9%}.g3jt .seat.left{left:12%;top:38%}.g3jt .seat.right{left:88%;top:38%}
.g3jt .jinfo{position:absolute;left:8px;right:8px;top:8px;z-index:2;pointer-events:none;align-items:flex-start;flex-direction:column;gap:4px;width:auto}
.g3jt .jinfo>span:last-child{background:rgb(0 0 0/.3);padding:2px 9px;border-radius:999px;font-size:11.5px}
.g3jt .g3rv{top:auto;bottom:8px}
.dmtab.g3jt{aspect-ratio:1/1.1}
/* domino, flat */
.dmtab .trick.dmchain{display:flex;flex-wrap:wrap;gap:3px;align-content:center;justify-content:center;padding:8px 2px;min-height:150px}
.dmt{display:inline-flex;flex:none;background:#F7F0E1;border-radius:5px;box-shadow:inset 0 -2px 0 rgb(0 0 0/.12),0 1px 3px rgb(0 0 0/.35);padding:2px;gap:2px;position:relative}
.dmt .dh{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:18px;height:18px;padding:2px}
.dmt .dh i{width:3.6px;height:3.6px;border-radius:50%;background:#1d1412;place-self:center}
.dmt .dh+.dh{border-left:1px solid rgb(60 40 20/.35)}
.dmt.dbl{flex-direction:column}
.dmt.dbl .dh+.dh{border-left:0;border-top:1px solid rgb(60 40 20/.35)}
.dmt.root{box-shadow:0 0 0 2px var(--gold),0 1px 3px rgb(0 0 0/.35)}
.dmhand{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:8px 0}
.dmhand .dmt .dh{width:26px;height:26px}
.dmhand .dmt .dh i{width:5px;height:5px}
.dmhand .dmt{flex-direction:column;transition:transform .15s}
.dmhand .dmt .dh+.dh{border-left:0;border-top:1px solid rgb(60 40 20/.35)}
.dmhand .dmt:disabled{filter:brightness(.7);cursor:default}
.dmhand .dmt.ok{box-shadow:0 0 0 2px rgb(237 181 74/.6),0 1px 3px rgb(0 0 0/.35)}
.dmhand .dmt.sel{transform:translateY(-8px);box-shadow:0 0 0 3px var(--gold),0 3px 8px rgb(0 0 0/.4)}
.dmends{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.flipx svg{transform:scaleX(-1)}
.sheet-tbl tr.prem td{color:var(--gold);font-weight:700}


/* ---------- the game screen: the board fills the screen, players and controls float over it like in a game app ---------- */
.view-pad.game.gx{position:fixed;inset:0;z-index:30;padding:0;gap:0;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none;
 background:radial-gradient(130% 90% at 50% 38%,#2b1c12 0,#140d09 55%,#070504 100%);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
 --ink:#F3ECE2;--muted:#B9AC9D;--wine:#F2B84B;--surface:#1d1612;--sunk:#2b211c;--line:#3c3029;--gold:#F2B84B;--on-gold:#1b1205;--on-accent:#1b1205}
.gx .gstage{position:absolute;inset:0;z-index:0}
.gx .gstage>.g3,.gx .gstage>.jt{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;margin:0;max-height:none;min-height:0;padding:0;background:transparent;touch-action:none}
.gx .gstage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(125% 95% at 50% 46%,transparent 58%,rgb(0 0 0/.55))}
.gx .ghud{position:relative;z-index:3;display:flex;flex-direction:column;gap:8px;pointer-events:none;min-width:0}
.gx .ghud>*{pointer-events:auto}
.gx .ghud.top{padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 10px) 20px calc(env(safe-area-inset-left,0px) + 10px);background:linear-gradient(rgb(9 6 4/.86),rgb(9 6 4/.5) 62%,transparent)}
.gx .ghud.bot{padding:24px calc(env(safe-area-inset-right,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 10px);background:linear-gradient(transparent,rgb(9 6 4/.62) 28%,rgb(9 6 4/.9));max-height:64%;overflow-y:auto;scrollbar-width:none}
.gx .gmid{flex:1;min-height:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px 10px;container-type:size;pointer-events:none}
.gx .gmid>*{pointer-events:auto}
.gx .gmid>.cb,.gx .gmid>.ck{width:min(100cqw,100cqh);max-width:none;flex:none}
.gx .gmid>.nb{width:min(100cqw,calc(100cqh * 13 / 11));max-width:none;flex:none}
.gx .gmid>.jt{width:min(100cqw,calc(100cqh * 1.2));max-height:100cqh;flex:none}
.gx .gtop{display:flex;align-items:center;gap:4px}
.gx .gtop h2{font-size:21px;font-weight:900;font-stretch:62.5%;text-shadow:0 2px 8px rgb(0 0 0/.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gx .gtop .ibtn{width:40px;height:40px;border-radius:13px;background:rgb(255 255 255/.09);color:#F3ECE2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex:none}
.gx .gtop .ibtn.g3tg.on{color:var(--gold)}
.gx .gtop .gb{margin-right:4px}
.gtag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgb(242 184 75/.16);color:#F2B84B;margin-left:6px;flex:none}
.gx .ginfo{display:flex;gap:6px;flex-wrap:wrap}
.gx .ginfo>span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgb(18 12 9/.62);border:1px solid rgb(255 255 255/.08)}
.gx .pl{align-self:flex-start;max-width:100%;display:flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:999px;background:rgb(18 12 9/.64);border:1px solid rgb(255 255 255/.09);
 box-shadow:0 6px 18px rgb(0 0 0/.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;transition:box-shadow .35s,border-color .35s}
.gx .pl .pln{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.gx .pl .pln b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx .pl .muted{font-size:11.5px}
.gx .pl .sp{flex:1}
.gx .pl.turn{border-color:rgb(242 184 75/.5);box-shadow:0 6px 22px rgb(0 0 0/.4),0 0 22px rgb(242 184 75/.18)}
/* the turn ring: a gold arc turning around the avatar */
.gx .plav{position:relative;flex:none;display:grid;border-radius:50%}
.gx .plav::after{content:"";position:absolute;inset:-4px;border-radius:50%;opacity:0;transition:opacity .3s;pointer-events:none;
 background:conic-gradient(from 0deg,#FFD98A,rgb(242 184 75/0) 38%,rgb(242 184 75/0) 52%,#F2B84B 92%,#FFD98A);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.gx .pl.turn .plav::after{opacity:1;animation:spin 2.2s linear infinite}
.gx .think{display:inline-flex;gap:3px;margin-left:7px;vertical-align:middle}
.gx .think i{width:4px;height:4px;border-radius:50%;background:#F2B84B;animation:gdot 1.2s ease-in-out infinite}
.gx .think i:nth-child(2){animation-delay:.16s}.gx .think i:nth-child(3){animation-delay:.32s}
@keyframes gdot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.gx .pc{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.3),0 1px 2px rgb(0 0 0/.4)}
.gx .pc.w{background:linear-gradient(#FFF9EE,#CDBEA6)}.gx .pc.b{background:linear-gradient(#6E3B2C,#2A1610)}
/* what a player has taken: chess pieces as glyphs (+material), checkers as one disc and a count, nardi as a progress ring */
.gx .gcap{margin-left:auto;padding-left:10px;font-size:16px;letter-spacing:-.18em;color:#F4EADB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-family:"Noto Sans Symbols 2","Segoe UI Symbol","DejaVu Sans",sans-serif}
.gx .gcap.b{color:#3A2219;text-shadow:0 0 1px #EADCC7,0 0 1px #EADCC7,0 0 2px rgb(234 220 199/.6)}
.gx .gcap small{letter-spacing:0;font-family:var(--f-body);font-size:11.5px;font-weight:800;color:#F2C46A;margin-left:.4em;text-shadow:none}
.gx .gcap.ckd{display:inline-flex;align-items:center;gap:6px;letter-spacing:0;font-family:var(--f-body);font-size:12.5px;font-weight:700;line-height:1;color:#E9DCC6;text-shadow:none}
.gx .gcap.ckd i{width:15px;height:15px;border-radius:50%;box-shadow:0 1px 2px rgb(0 0 0/.55),inset 0 -2px 0 rgb(0 0 0/.18)}
.gx .gcap.ckd.w i{background:radial-gradient(circle at 40% 35%,#FFFBF2,#D8C9B0)}.gx .gcap.ckd.b i{background:radial-gradient(circle at 40% 35%,#6A3E2E,#22130D)}
.gx .goff{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding-left:10px;font-size:12.5px;font-weight:700;color:#E9DCC6;font-variant-numeric:tabular-nums}
.gx .goff i{width:18px;height:18px;border-radius:50%;background:conic-gradient(#F2B84B calc(var(--p)*1turn),rgb(255 255 255/.14) 0);
 -webkit-mask:radial-gradient(farthest-side,transparent 52%,#000 56%);mask:radial-gradient(farthest-side,transparent 52%,#000 56%)}
/* chess: the last moves under the opponent, newest on the right */
.gx .mvs{display:flex;justify-content:flex-end;align-items:center;gap:7px;height:22px;overflow:hidden;white-space:nowrap;padding:0 4px;font-size:13px;font-weight:600;color:#DCCFBF;font-variant-numeric:tabular-nums;
 -webkit-mask:linear-gradient(90deg,transparent,#000 22%);mask:linear-gradient(90deg,transparent,#000 22%)}
.gx .mvs .n{color:#8E8070;font-weight:500;margin-right:-3px}
.gx .mvs .now{color:#1B1205;background:#F2B84B;border-radius:6px;padding:1px 6px}
/* joker: said and taken */
.pips{display:inline-flex;align-items:center;gap:3px;min-height:12px;vertical-align:middle}
.pips i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgb(242 196 106/.8)}
.pips i.on{background:#F2C46A;box-shadow:0 0 6px rgb(242 196 106/.6)}
.pips.over i{box-shadow:inset 0 0 0 1.5px #FF9A86}.pips.over i.on{background:#FF9A86;box-shadow:none}
.pips em{font-style:normal;font-size:11px;font-weight:800;color:#FF9A86;margin-left:2px}
.pips.z{font-size:11px;color:#E9DCC6}.pips.z.over{color:#FF9A86}
.gx .jme{display:inline-flex;align-items:center;gap:8px}
.gx .gscore{display:inline-flex;align-items:center;gap:6px}
.gx .ginfo>span.gscore{padding:3px 12px}
.gx .gscore b{font-size:15px;font-weight:800;color:#F2C46A;font-variant-numeric:tabular-nums}.gx .gscore i{font-style:normal;color:#8E8070}
.gx .status{align-self:center;text-align:center;min-height:0;padding:7px 14px;border-radius:12px;background:rgb(12 8 5/.5);border:1px solid rgb(255 255 255/.07);font-size:13.5px;color:#E7DCCE;font-weight:500;line-height:1.35;max-width:100%;text-wrap:balance;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gx .status:empty{display:none}
.gx .status.mine{background:rgb(242 184 75/.12);border-color:rgb(242 184 75/.36);color:#FFE4A8;font-weight:600;animation:gpop .4s var(--ease-out) both}
.gx .status.mine::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#F2B84B;margin-right:8px;vertical-align:1px;box-shadow:0 0 8px #F2B84B}
@keyframes gpop{from{transform:translateY(5px);opacity:0}}
.gx .note,.gx details,.gx .gacts,.gx .gres,.gx .tourcard>.note{display:none}
.gx .btn{border-radius:15px}
.gx .ghud .btn:not(.ghost):not(.sm){height:48px;padding:0 24px;font-size:16px;font-weight:800;background:linear-gradient(180deg,#F8CA6A,#D38E22);color:#1b1205;box-shadow:0 6px 20px rgb(242 184 75/.32),inset 0 1px 0 rgb(255 255 255/.5)}
.gx .ghud .btn svg{width:20px;height:20px}
.gx .btn.ghost{background:rgb(255 255 255/.08);color:#F3ECE2;border-color:rgb(255 255 255/.14)}
.gx .nctl{justify-content:center}
.gx .nctl .sp{display:none}
.gx .offs{justify-content:center}
.gx .offbtn{height:32px;font-size:12px;background:rgb(18 12 9/.6);border-color:rgb(255 255 255/.16)}
.gx .offbtn.tgt{background:var(--gold);color:#1b1205}
.gx .bids{display:grid;grid-template-columns:repeat(var(--c,8),minmax(0,1fr));gap:7px;width:100%;max-width:min(440px,calc(var(--c,8) * 60px));align-self:center}
.gx .bids button{display:grid;place-items:center;min-width:0;padding:0;height:48px;border-radius:14px;font-size:18px;font-weight:800;background:rgb(255 255 255/.08);border:1px solid rgb(255 255 255/.15);color:#F3ECE2;font-variant-numeric:tabular-nums}
.gx .bids button[data-v="0"]{font-size:13px;font-weight:700}
.gx .bids button:disabled{opacity:1;color:rgb(243 236 226/.28);background:transparent;border-style:dashed;text-decoration:line-through}
.gx .bids button:not(:disabled):hover{background:rgb(242 184 75/.16);border-color:rgb(242 184 75/.5)}
.gx .bids button:not(:disabled):active{transform:scale(.94)}
.gx .sheet-tbl{background:rgb(18 12 9/.72);border-radius:14px;padding:4px 6px;border:1px solid rgb(255 255 255/.08)}
.gx .ghud .hand{padding-top:8px;min-height:0}
.gx .dmends .btn{height:46px}
.gx .setupc{align-self:center;width:min(440px,100%);display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:24px;background:rgb(18 12 9/.78);border:1px solid rgb(242 184 75/.2);box-shadow:0 20px 50px rgb(0 0 0/.5)}
.gx .setupc h3{font-size:26px;font-weight:900;font-stretch:62.5%}
.gx .setupc .note{display:block}
.gx .setupc .jkonline{background:rgb(255 255 255/.05)}
.g3.loading{background:transparent}
.g3load{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:3px solid rgb(242 184 75/.2);border-top-color:#F2B84B;animation:spin .8s linear infinite}
/* the end of a game */
.gend{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 42%,rgb(20 12 8/.5),rgb(5 3 2/.84));animation:fade .3s}
.gendc{width:min(360px,100%);text-align:center;padding:28px 20px 18px;border-radius:26px;background:linear-gradient(180deg,#2c1f16,#160f0b);border:1px solid rgb(242 184 75/.28);box-shadow:0 22px 60px rgb(0 0 0/.6);animation:gup .55s var(--ease-spring) both;margin-top:40px}
@keyframes gup{from{transform:translateY(26px) scale(.9);opacity:0}}
.gendi{display:grid;place-items:center;width:86px;height:86px;margin:-72px auto 10px;border-radius:50%;color:#1b1205;background:radial-gradient(circle at 35% 30%,#FFE6A3,#D9952A 60%,#8a5410);box-shadow:0 0 0 7px rgb(242 184 75/.16),0 12px 34px rgb(242 184 75/.42)}
.gendi svg{width:42px;height:42px}
.gend.lose .gendi{background:radial-gradient(circle at 35% 30%,#e6ddd4,#8f8379 60%,#4a413a);box-shadow:0 0 0 7px rgb(255 255 255/.06),0 12px 30px rgb(0 0 0/.5)}
.gend.draw .gendi{background:radial-gradient(circle at 35% 30%,#d6e7ff,#6f8fbf 60%,#334766)}
.gend h2{font-size:40px;font-weight:900;font-stretch:62.5%;margin:4px 0 2px;color:#F3ECE2}
.gend.win h2{background:linear-gradient(180deg,#FFEAB0,#F2B84B);-webkit-background-clip:text;background-clip:text;color:transparent}
.gend p{color:var(--muted);font-size:14px;margin:0 0 10px}
.gendd{display:inline-block;padding:4px 12px;border-radius:999px;background:rgb(242 184 75/.15);color:#F2B84B;font-weight:800;font-size:13px;margin-bottom:14px}
.gend.lose .gendd{background:rgb(255 255 255/.07);color:#D9CBBB}
.gendb{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.gendb .btn{width:100%;height:46px;justify-content:center}
.gendb .btn.gold{background:linear-gradient(180deg,#F8CA6A,#D38E22);color:#1b1205;border:0}
/* the game menu */
.gmenu{display:flex;flex-direction:column;padding:4px 10px 14px}
.gmenu button{display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:14px;font-size:15px;font-weight:600;text-align:left;width:100%}
.gmenu button:hover{background:var(--sunk)}
.gmenu button>svg{width:22px;height:22px;color:var(--wine);flex:none}
.gmenu button span{flex:1}
.sw{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.3);transition:transform .2s var(--ease-out)}
.sw.on{background:var(--vine)}
.sw.on::after{transform:translateX(18px)}
.grules{line-height:1.65;font-size:14.5px}
@media (min-aspect-ratio:5/4){
 .gx{--hw:min(380px,40vw)}
 .gx .ghud{margin-left:auto;width:var(--hw)}
 .gx .ghud.top{padding-bottom:6px;background:linear-gradient(90deg,transparent,rgb(9 6 4/.6) 16%,rgb(9 6 4/.72))}
 .gx .ghud.bot{flex:1;max-height:none;justify-content:flex-end;padding-top:8px;background:linear-gradient(90deg,transparent,rgb(9 6 4/.6) 16%,rgb(9 6 4/.72))}
 .gx .gmid{position:absolute;left:0;top:0;bottom:0;right:var(--hw);padding:14px}
 .gx .gend{right:var(--hw)}
 .gx .status{align-self:stretch}}
.gendt{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:4px 0 14px}
.gendt span{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;border-radius:12px;background:rgb(255 255 255/.06);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.gendt span b{font-size:11px;font-weight:600;color:var(--muted);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gendt span:first-child{background:rgb(242 184 75/.16);color:#F2B84B}

/* ---------- games lobby ----------
   the shelf is the page: every game is a poster rendered with its own 3D board (icons/g). the last game played is the big one.
   --ac is each game's accent, taken from its board (amber walnut, crimson lacquer, ivory, card-table green, billiard teal) */
.gs-page{gap:18px}
.gs-head{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.gs-head h2{font-size:clamp(32px,9vw,42px);font-weight:900;font-stretch:62.5%;line-height:1;letter-spacing:-.01em}
.gs-chips{display:flex;gap:8px;flex-wrap:wrap}
.gs-chips>span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gs-chips .live i{background:var(--vine)}
.gs-rt svg{width:15px;height:15px;color:var(--gold)}
.gs-rt span{color:var(--muted);font-weight:500}.gs-rt b{color:var(--ink);font-weight:700}

.gs-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gs-post{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:20px;overflow:hidden;isolation:isolate;background:#1B120C;color:#FBF4E8;text-align:left;
 box-shadow:0 14px 30px -18px rgb(20 10 4/.75),0 2px 6px -2px rgb(20 10 4/.35);transition:transform .25s var(--ease-out),box-shadow .25s}
.gs-post.big{grid-column:1/-1;aspect-ratio:1/1;border-radius:24px}
@media (min-width:520px){.gs-post.big{aspect-ratio:16/10}}
.gs-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%;z-index:-2;transition:transform .9s var(--ease-out)}
.gs-post.big .gs-pic{object-position:50% 40%}
/* the dark lower third that carries the name, then a low glow in the game's own colour, then a hairline rim */
.gs-post::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(16 10 6/0) 34%,rgb(16 10 6/.62) 62%,rgb(13 8 5/.93) 100%)}
.gs-post::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:radial-gradient(120% 34% at 50% 104%,color-mix(in srgb,var(--ac) 34%,transparent),transparent 72%);box-shadow:inset 0 0 0 1px rgb(255 236 210/.09),inset 0 1px 0 rgb(255 236 210/.12)}
.gs-body{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.gs-name{display:block;font-family:var(--f-display);font-weight:900;font-stretch:62.5%;font-size:31px;line-height:.92;letter-spacing:0;text-shadow:0 2px 14px rgb(0 0 0/.55)}
.gs-post.big .gs-body{padding:20px;gap:9px}
.gs-post.big::before{background:linear-gradient(180deg,rgb(16 10 6/0) 26%,rgb(16 10 6/.66) 56%,rgb(13 8 5/.95) 100%)}
.gs-desc,.gs-meta{text-shadow:0 1px 6px rgb(0 0 0/.6)}
.gs-post.big .gs-name{font-size:clamp(48px,14vw,64px)}
.gs-last{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#FBF4E8;background:rgb(16 10 6/.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(255 236 210/.12)}
.gs-last::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac)}
.gs-desc{font-size:14px;line-height:1.4;color:rgb(251 244 232/.84);max-width:34ch}
.gs-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.gs-cta .btn{height:40px;padding:0 18px;font-size:15px;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--gold) 70%,transparent)}
.gs-cta .btn svg{width:16px;height:16px}
.gs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;font-weight:500;color:rgb(251 244 232/.8);font-variant-numeric:tabular-nums}
.gs-meta .on{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-weight:600;color:#DFFBEA;background:rgb(47 191 113/.24);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gs-meta .on i{width:6px;height:6px;border-radius:50%;background:#6CF2A8;animation:pulse 1.6s infinite}
.gs-post:active{transform:scale(.985)}
.gs-post:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (hover:hover){.gs-post:hover{box-shadow:0 22px 40px -20px rgb(20 10 4/.85),0 2px 6px -2px rgb(20 10 4/.35)}.gs-post:hover .gs-pic{transform:scale(1.045)}}
@media (max-width:359px){.gs-name{font-size:26px}.gs-body{padding:11px}}

.gs-tour{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:18px;text-align:left;color:var(--ink);
 background:linear-gradient(100deg,color-mix(in srgb,var(--gold) 15%,var(--surface)),var(--surface) 72%);border:1px solid color-mix(in srgb,var(--gold) 32%,var(--line))}
.gs-medal{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#3B2404;
 background:radial-gradient(circle at 34% 28%,#FFE9AE,#E0A93A 52%,#9C6512 100%);box-shadow:inset 0 -3px 5px rgb(80 40 0/.3),0 6px 14px -6px rgb(201 138 18/.7)}
.gs-medal svg{width:24px;height:24px}
.gs-tour b{display:block;font-family:var(--f-display);font-size:19px;font-weight:800;line-height:1.2}
.gs-tour small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px}
.gs-tour .gs-chev{flex:none;display:grid;color:var(--muted)}.gs-tour .gs-chev svg{width:18px;height:18px;transform:scaleX(-1)}
.gs-tour:focus-visible,.livegames .lgcard:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.ohint{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ohint p{margin:0;flex:1 1 200px}

.livegames{gap:12px;margin:0 -16px;padding:2px 16px 4px;scroll-snap-type:x mandatory;scroll-padding:0 16px}
.livegames .lgcard{width:218px;padding:0;gap:0;overflow:hidden;border-radius:16px;scroll-snap-align:start}
.gs-mini{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#1B120C}
.gs-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.gs-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgb(13 8 5/.85)),radial-gradient(90% 40% at 50% 110%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%)}
.gs-mini em{position:absolute;left:12px;bottom:8px;z-index:1;font-style:normal;font-family:var(--f-display);font-weight:900;font-stretch:62.5%;font-size:22px;line-height:1;color:#FBF4E8;text-shadow:0 1px 8px rgb(0 0 0/.6)}
.livegames .lgcard .vsn{padding:10px 12px 0}
.livegames .lgcard small{padding:3px 12px 12px}
.vsn .gs-avs{display:inline-flex}.vsn .gs-avs>*+*{margin-left:-8px;box-shadow:0 0 0 2px var(--surface);border-radius:50%}

.gs-lb{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2px 12px}
.gs-lb .lb tr:last-child td{border-bottom:0}
.gs-lb .lb td{padding:9px 4px}
.gs-lb .lb td:first-child{width:36px}
.lb .gs-rk{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--muted)}
.lb .gs-rk.r1{background:linear-gradient(#FFE29A,#D9A030);color:#3B2404}
.lb .gs-rk.r2{background:linear-gradient(#F4F4F7,#AEB4BF);color:#23262C}
.lb .gs-rk.r3{background:linear-gradient(#F5C9A0,#B5703B);color:#3A1E08}
.lb tr.mine td{color:var(--wine)}

@media (prefers-reduced-motion:reduce){.gs-post,.gs-pic{transition:none}.gs-post:hover .gs-pic{transform:none}.gs-post:active{transform:none}}
/* plates that sit just off the board's edges on tall screens (offsets from g3Hug) */
.ghug .gx.is3d .ghud.top>.pl,.ghug .gx.is3d .ghud.top>.mvs{translate:0 var(--hugT,0px);transition:translate .5s var(--ease-out)}
.ghug .gx.is3d .ghud.bot>.pl{translate:0 calc(-1 * var(--hugB,0px));transition:translate .5s var(--ease-out)}
.ghug .gx.is3d .ghud.bot{overflow:visible}
@media (prefers-reduced-motion:reduce){.ghug .gx.is3d .ghud .pl,.ghug .gx.is3d .mvs{transition:none}}
.gx .mvs .fg{font-style:normal;font-size:1.22em;line-height:1;margin-right:.04em;font-family:"Noto Sans Symbols 2","Segoe UI Symbol","DejaVu Sans","Apple Symbols",serif}
/* flat boards on a tall screen: the plates sit against the board too, the status and buttons stay down by the thumb */
@media (max-aspect-ratio:4/5){
 .gx:not(.is3d):is([data-g="chess"],[data-g="shashi"],[data-g="nardi"]){--ar:1}
 .gx:not(.is3d)[data-g="nardi"]{--ar:calc(11 / 13)}
 .gx:not(.is3d):is([data-g="chess"],[data-g="shashi"],[data-g="nardi"]) .ghud.top{flex:1;justify-content:flex-end;padding-bottom:6px}
 .gx:not(.is3d):is([data-g="chess"],[data-g="shashi"],[data-g="nardi"]) .ghud.top>.gtop{margin-bottom:auto}
 .gx:not(.is3d):is([data-g="chess"],[data-g="shashi"],[data-g="nardi"]) .gmid{flex:none;height:calc((100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)) * var(--ar) + 8px)}
 .gx:not(.is3d):is([data-g="chess"],[data-g="shashi"],[data-g="nardi"]) .ghud.bot{flex:1;max-height:none;padding-top:6px}
 .gx:not(.is3d):is([data-g="chess"],[data-g="shashi"],[data-g="nardi"]) .ghud.bot>.pl+*{margin-top:auto}}
/* joker at the 3D table: your cards are held along the bottom of the screen, so the panels sit just above them */
.gx.is3d:is([data-g="joker"],.jko) .ghud.bot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18.5vh);background:linear-gradient(transparent,rgb(9 6 4/.35) 40%,rgb(9 6 4/.55))}
@media (min-aspect-ratio:5/4){.gx.is3d:is([data-g="joker"],.jko) .ghud.bot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}}
/* ---------- the joker score sheet: a page of a squared school notebook, written in blue ballpoint ---------- */
.jnote{--c:20px;--ink:#1F3C98;--red:#C62F2B;position:relative;padding:calc(var(--c)*.5) 6px var(--c) 0;color:var(--ink);background-color:#FBFBF5;
 background-image:linear-gradient(rgb(70 125 205/.22) 1px,transparent 1px),linear-gradient(90deg,rgb(70 125 205/.22) 1px,transparent 1px),radial-gradient(120% 80% at 30% 0%,rgb(255 255 255/.6),transparent 60%);
 background-size:var(--c) var(--c),var(--c) var(--c),100% 100%;background-position:-1px -1px;font-family:"Caveat","Segoe Print","Bradley Hand",var(--f-body);line-height:1;text-align:left;
 border-radius:3px;box-shadow:0 1px 1px rgb(0 0 0/.08),0 12px 30px rgb(0 0 0/.3);overflow:hidden;-webkit-user-select:none;user-select:none}
.jnote::before{content:"";position:absolute;left:calc(var(--c)*2.2 - 1px);top:0;bottom:0;width:2px;background:rgb(222 82 82/.55);pointer-events:none}
.jnote i{font-style:normal;display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0))}
.jn-r{display:grid;grid-template-columns:calc(var(--c)*2.2) repeat(4,minmax(0,1fr));height:calc(var(--c)*2);align-items:center}
.jn-m{text-align:center;font-size:19px;color:rgb(31 60 152/.62)}
.jn-c{position:relative;text-align:center;font-size:23px;font-weight:500;white-space:nowrap;letter-spacing:.01em}
.jn-c sup{position:absolute;left:5px;top:3px;font-size:14px;font-weight:700;opacity:.7;line-height:1}
.jn-c.neg{color:var(--red)}
.jn-c.kh::after{content:"";position:absolute;left:22%;right:22%;top:52%;height:2px;border-radius:2px;background:var(--red);opacity:.75;transform:rotate(-9deg)}
.jn-h{height:calc(var(--c)*1.5)}
.jn-h .jn-c{font-family:var(--f-body);font-size:15px;font-weight:500;font-style:italic;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis}
.jn-h .jn-c::after{content:"";position:absolute;left:16%;right:16%;bottom:-3px;height:1.5px;background:var(--ink);opacity:.6;transform:rotate(-1.2deg)}
.jn-pr .jn-m{color:#C9871A;font-size:20px}.jn-pr .jn-c{font-size:21px}
.jn-sub{border-top:1.5px solid rgb(31 60 152/.75);position:relative}.jn-sub::before{content:"";position:absolute;left:calc(var(--c)*2.2);right:4px;top:3px;height:1.5px;background:rgb(31 60 152/.75)}
.jn-sub .jn-c{font-weight:700}
.jn-tot{height:calc(var(--c)*2.2)}.jn-tot .jn-m{font-family:var(--f-body);font-size:12px;font-style:italic}
.jn-tot .jn-c{font-size:26px;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.jn-r.new .jn-c,.jn-r.new .jn-m{animation:jnw .9s steps(9,end) both}.jn-r.new .jn-c:nth-child(3){animation-delay:.25s}.jn-r.new .jn-c:nth-child(4){animation-delay:.5s}.jn-r.new .jn-c:nth-child(5){animation-delay:.75s}
@keyframes jnw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* the full page in a sheet */
.panel.jnp .ph-body.jnbody{padding:10px 12px 18px;background:var(--sunk)}
.panel.jnp .jnote{--c:22px;transform:rotate(-.4deg);margin:4px 2px}
/* the small page in the corner of the table */
.gx .ghud.top .jsm{position:absolute;right:calc(env(safe-area-inset-right,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 56px);width:64px;height:84px;padding:0;border-radius:3px;overflow:hidden;
 background:#FBFBF5;transform:rotate(4deg);box-shadow:0 8px 18px rgb(0 0 0/.5),0 0 0 1px rgb(0 0 0/.06);z-index:5;transition:width .45s var(--ease-out),height .45s var(--ease-out),transform .45s var(--ease-out),right .45s var(--ease-out)}
.gx .ghud.top .jsm .jnote{width:300px;transform:scale(.215);transform-origin:0 0;box-shadow:none;border-radius:0}
.gx .ghud.top .jsm::after{content:"";position:absolute;left:50%;top:-4px;width:26px;height:12px;margin-left:-13px;border-radius:2px;background:rgb(238 228 196/.85);box-shadow:0 1px 2px rgb(0 0 0/.25);transform:rotate(-4deg)}
.gx .ghud.top .jsm:active{transform:rotate(4deg) scale(.96)}
.gx .ghud.top .jsm.pop{width:min(86vw,360px);height:auto;right:50%;transform:translateX(50%) rotate(-1.2deg);top:calc(env(safe-area-inset-top,0px) + 64px)}
.gx .ghud.top .jsm.pop .jnote{width:100%;transform:none}
@media (min-aspect-ratio:5/4){.gx .ghud.top .jsm.pop{right:calc(var(--hw) * .5);transform:translateX(50%) rotate(-1.2deg);width:min(60vw,360px)}}
@media (prefers-reduced-motion:reduce){.gx .ghud.top .jsm{transition:none}.jn-r.new .jn-c,.jn-r.new .jn-m{animation:none}}
/* flat joker cards: bigger, with rank and suit together in the corner so they stay readable where cards overlap */
.gx .jt .card,.gx .hand .card{width:56px;height:80px;border-radius:8px;padding:5px 6px;justify-content:flex-start;align-items:flex-start;gap:1px;font-size:19px}
.gx .jt .card .s2,.gx .hand .card .s2{align-self:flex-start;font-size:19px;line-height:1}
.gx .jt .card:not(.jk)::after,.gx .hand .card:not(.jk)::after{content:attr(data-s);position:absolute;right:6px;bottom:4px;font-size:30px;opacity:.9}
.gx .hand .card{margin-left:-20px}.gx .hand .card:first-child{margin-left:0}
.gx .jt .card.jk,.gx .hand .card.jk{align-items:center;justify-content:center;font-size:11px}
.gmenu button .gmv{flex:none;font-size:13px;font-weight:600;color:var(--muted)}
.gmenu button[aria-pressed="true"]>svg{color:var(--vine)}
.gmenu button small.muted{font-weight:500;font-size:12.5px}
/* joker: four-colour deck, the bid hint, the last trick */
html.c4 .card[data-s="♣"],html.c4 .suits button[data-s="c"]{color:#1C7A3A}
html.c4 .card[data-s="♦"],html.c4 .suits button[data-s="d"]{color:#1A55C4}
.gx .bids button.hint{position:relative;border-color:rgb(242 184 75/.55);box-shadow:inset 0 0 0 1px rgb(242 184 75/.25)}
.gx .bids button.hint::after{content:"";position:absolute;bottom:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold)}
.gx .status .bhint{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:700;color:var(--gold);background:rgb(242 184 75/.12)}
.gx .ginfo .jlt{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px 4px 8px;border-radius:999px;background:rgb(18 12 9/.62);border:1px solid rgb(242 184 75/.35);color:#F3E3C4}
.gx .ginfo .jlt svg{width:14px;height:14px}
.gx .ginfo .jlt:active{transform:scale(.95)}
.jlast{display:grid;grid-template:"x t y" auto "l m r" auto "z b w" auto/1fr 1fr 1fr;gap:4px 6px;justify-items:center;align-items:center;padding:6px 0 10px;max-width:360px;margin:0 auto}
.jlast .jl{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:13px;line-height:1.2}
.jlast .jl.t{grid-area:t}.jlast .jl.l{grid-area:l}.jlast .jl.r{grid-area:r}.jlast .jl.b{grid-area:b}
.jlast .jlmid{grid-area:m;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--felt,#1d5a40);color:rgb(255 255 255/.7)}
.jlast .jlmid svg{width:20px;height:20px}
.jlast .jlc{position:relative;display:block}
.jlast .card{width:62px;height:88px;border-radius:8px;font-size:20px;position:relative}
.jlast .card.jk{font-size:12px;align-items:center;justify-content:center}
.jlast .jlc em{position:absolute;top:-7px;right:-9px;min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:11px;font-weight:700;font-style:normal;color:var(--muted)}
.jlast .jl.won .card{box-shadow:0 0 0 3px var(--gold),0 6px 16px rgb(0 0 0/.35)}
.jlast .jl small{font-size:11.5px;color:var(--muted)}
.jlast .jl small.jlw{color:var(--gold);font-weight:700}
/* the online clock: the ring around the avatar empties as the time goes, the chip shows what is left */
.gx .plav.pclk::before{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;background:conic-gradient(rgb(243 236 226/.55) calc(var(--ck,1) * 360deg),rgb(255 255 255/.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.gx .pl.turn .plav.pclk::after{display:none}
.gx .pl.turn .plav.pclk::before{background:conic-gradient(var(--gold) calc(var(--ck,1) * 360deg),rgb(255 255 255/.1) 0)}
.gx .pl .gclk{flex:none;padding:5px 9px;border-radius:9px;font-size:15px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;background:rgb(255 255 255/.07);color:rgb(243 236 226/.62);border:1px solid rgb(255 255 255/.1)}
.gx .pl .gclk.run{background:#F3ECE2;color:#1F1612;border-color:transparent}
.gx .pl .gclk.low{color:#FF8A8F}.gx .pl .gclk.run.low{background:#E5484D;color:#fff}
/* reactions: a speech bubble over the plate, and the sheet to pick one */
#rxl{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.rxb{position:absolute;display:flex;align-items:center;gap:7px;padding:6px 14px 6px 9px;border-radius:999px;background:#FFFDF8;color:#1F1612;box-shadow:0 10px 26px rgb(0 0 0/.38);font-size:14px;white-space:nowrap;transform:translate(-50%,-100%);animation:rxup 2.7s var(--ease-out) forwards}
.rxb.dn{transform:translate(-50%,0);animation-name:rxdn}
.rxb span{font-size:25px;line-height:1}
.rxb::after{content:"";position:absolute;left:50%;bottom:-5px;width:11px;height:11px;margin-left:-5.5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.rxb.dn::after{bottom:auto;top:-5px}
@keyframes rxup{0%{opacity:0;transform:translate(-50%,-70%) scale(.55)}12%{opacity:1;transform:translate(-50%,-104%) scale(1.06)}22%{transform:translate(-50%,-100%) scale(1)}82%{opacity:1;transform:translate(-50%,-112%)}100%{opacity:0;transform:translate(-50%,-128%)}}
@keyframes rxdn{0%{opacity:0;transform:translate(-50%,-30%) scale(.55)}12%{opacity:1;transform:translate(-50%,4%) scale(1.06)}22%{transform:translate(-50%,0) scale(1)}82%{opacity:1;transform:translate(-50%,12%)}100%{opacity:0;transform:translate(-50%,28%)}}
@media (prefers-reduced-motion:reduce){.rxb,.rxb.dn{animation:rxfade 2.7s linear forwards}}
@keyframes rxfade{0%,85%{opacity:1}100%{opacity:0}}
.grx{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 16px 18px}
.grx button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:transform .12s}
.grx button:active{transform:scale(.94)}
.grx button span{font-size:32px;line-height:1}
.grx button small{font-size:12.5px;color:var(--muted);font-weight:600}
.gtag.gw{display:inline-flex;align-items:center;gap:3px;background:rgb(255 255 255/.08);color:#E7DCCE}.gtag.gw svg{width:12px;height:12px}
/* the end of an online game: a rematch offer; and sharing a win */
.gendr{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 12px;font-size:13.5px;color:#E7DCCE}.gendr svg{width:16px;height:16px;color:#F2B84B;flex:none}
.gendb .btn svg{width:18px;height:18px}
/* a game invitation in the messenger */
.gamemsg{display:flex;align-items:stretch;width:min(286px,74vw);border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.mrow.me .gamemsg{margin-left:auto}
.gamemsg img{width:92px;object-fit:cover;flex:none;background:var(--ac)}
.gamemsg .gmb{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;min-width:0}
.gamemsg .gmb b{font-size:15px}.gamemsg .gmb small{font-size:12.5px;color:var(--muted)}
.gamemsg .gmb .btn{margin-top:6px}
/* my character */
.gs-lk{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.gs-lk svg{width:15px;height:15px;color:var(--vine)}
.lked{display:flex;flex-direction:column;gap:12px}
.lkprev{position:relative;flex:none;height:min(40vh,280px);border-radius:18px;overflow:hidden;background:#140e0b;display:grid;place-items:center}
.lkprev .g3load{position:absolute;inset:0;margin:auto}
#lkopts{display:flex;flex-direction:column;gap:12px}
.lkrow{display:flex;align-items:center;gap:10px}
.lkn{flex:0 0 92px;font-size:13.5px;font-weight:600;color:var(--muted)}
.lkv{flex:1;min-width:0}
.lkv .seg{margin:0}
.lksw{display:flex;gap:8px;flex-wrap:wrap}
.lksw{gap:7px}.lksw button{width:29px;height:29px;border-radius:50%;background:var(--c);border:2px solid rgb(255 255 255/.16);box-shadow:inset 0 0 0 1px rgb(0 0 0/.2);transition:transform .12s}
.lksw button[aria-pressed="true"]{outline:2.5px solid var(--gold);outline-offset:2px;transform:scale(1.06)}
.lksw button:active{transform:scale(.92)}
/* the leaderboard: a game, then everyone, friends or this month's season */
.gs-lbs #lbc{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.gs-lbt{display:flex;gap:6px;flex-wrap:wrap}
.gs-lbt button{height:32px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted)}
.gs-lbt button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:transparent}
.gs-lb .lbn .lbnn{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.2}
.gs-lb .lbn .lbnn small{font-size:11.5px;color:var(--muted);font-weight:500}
.lkv .seg.lkwrap{flex-wrap:wrap;border-radius:18px}.lkv .seg.lkwrap button{flex:1 1 30%}
/* the style picker */
.gstyl{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.gsty{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);text-align:left}
.gsty.on{border-color:var(--gold);box-shadow:0 0 0 3px rgb(242 184 75/.15)}
.gsw{flex:none;width:46px;height:46px;border-radius:12px;background:conic-gradient(var(--a) 0 120deg,var(--b) 0 240deg,var(--c) 0);box-shadow:inset 0 0 0 2px rgb(0 0 0/.15)}
.gstx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.gstx b{font-size:15px}.gstx small{font-size:12.5px;color:var(--muted);line-height:1.3}
.gpr{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--gold)}.gpr svg{width:15px;height:15px}
.gstynote{text-align:center;margin:4px 0 0}
/* the style picker leaves the table in plain view above it */
.sheet:has(>.panel.gclear){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.panel.gclear{max-height:56vh}
/* the opponent's plate over their head at a 3D board */
.gx .gstage .g3op{position:absolute;z-index:3;transform:translate(0,-50%);pointer-events:auto}
.gx .gstage .g3op .pl{margin:0}
/* upright phones keep the plate in the top bar; wide screens put it beside the opponent's head */
@media (max-aspect-ratio:4/5){.gx .gstage .g3op{display:none}}
@media (min-aspect-ratio:4/5){.gx .ghud.top .oppt{display:none}}
/* chess analysis */
.anbody{display:flex;flex-direction:column;gap:10px}
.anbar{height:6px;border-radius:9px;background:var(--sunk);overflow:hidden}.anbar i{display:block;height:100%;background:var(--gold);transition:width .3s}
.anacc{display:grid;grid-template-columns:1fr 1fr;gap:8px}.anacc span{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.anacc b{font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.anb{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(100%,340px);aspect-ratio:1;flex:none;margin:0 auto;border-radius:8px;overflow:hidden;border:6px solid #5a301b}
.anb span{display:grid;place-items:center;font-size:min(7.4vw,29px);line-height:1;min-height:0;overflow:hidden}.anb .l{background:#EBD4AE}.anb .d{background:#A9714B}.anb .last{box-shadow:inset 0 0 0 100px rgb(244 188 76/.35)}
.annav{display:flex;align-items:center;gap:6px;justify-content:center}.annav span{flex:1;text-align:center;font-weight:700;font-size:14px}.annav .ibtn{display:inline-flex;align-items:center;justify-content:center}.annav .ibtn svg{width:16px;height:16px;flex:none}.annav .flip svg{transform:scaleX(-1)}.annav .ibtn svg+svg{margin-left:-9px}
.anwhy{margin:0;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}.anwhy .anev{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.anwhy.k-blunder b:first-child{color:#E5484D}.anwhy.k-mistake b:first-child{color:#F08A3E}.anwhy.k-inacc b:first-child{color:#E8C04A}.anwhy.k-best b:first-child{color:#4FC383}
.anlist{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 6px;max-height:34vh;overflow:auto}
.ann{color:var(--muted);font-size:12.5px;align-self:center;font-variant-numeric:tabular-nums}
.anm{display:flex;justify-content:space-between;padding:5px 9px;border-radius:9px;background:var(--surface);font-size:13.5px;font-weight:600}.anm.on{outline:2px solid var(--gold)}
.anm em{font-style:normal;font-weight:800}.anm.k-blunder em{color:#E5484D}.anm.k-mistake em{color:#F08A3E}.anm.k-inacc em{color:#E8C04A}.anm.k-best em{color:#4FC383}
/* the puzzle of the day in the lobby */
.gs-pz{display:flex;align-items:center;gap:14px;padding:12px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-align:left}
.gs-pzb{flex:none;width:86px}.gs-pzb .anb{width:86px;border-width:3px;border-radius:6px}.gs-pzb .anb span{font-size:10px}
.gs-pz b{font-size:16px}.gs-pz small{display:block;font-size:12.5px;color:var(--muted)}.gs-pz .gs-pzs{color:var(--gold);font-weight:600;margin-top:2px}
.gs-pz .gs-chev svg{transform:scaleX(-1)}
/* the game card */
.gpcard{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gcpic{width:200px;height:220px;border-radius:24px;overflow:hidden;background:#140e0b;display:grid;place-items:center;box-shadow:var(--shadow)}.gcpic img{width:100%;height:100%;object-fit:cover}
.gpcard h3{margin:0;font-size:20px;color:var(--ink)}
.gcrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;width:100%}
.gcrs span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 6px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.gcrs b{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}.gcrs small{font-size:11px;margin-top:2px}
.gcmed{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.gcmed span{display:flex;flex-direction:column;align-items:center;font-size:28px;padding:6px 10px;border-radius:14px;background:var(--surface)}.gcmed small{font-size:11px;color:var(--muted)}
.gcb{display:flex;gap:8px;width:100%}.gcb .btn{flex:1;justify-content:center}
.gpcard #gcr,.gpcard #gcm{width:100%}
/* the toast of horns on a win */
.ghorn{position:fixed;left:50%;top:max(8vh,calc(env(safe-area-inset-top) + 40px));transform:translateX(-50%);width:min(64vw,300px);z-index:80;pointer-events:none;text-align:center;animation:ghfade 2.7s ease both}
.ghorn.big{width:min(78vw,380px)}
.ghorn svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.ghorn b{display:block;margin-top:-2px;font-weight:800;font-size:clamp(24px,6.6vw,34px);line-height:1.1;color:#fff;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.55),0 0 18px rgba(255,200,110,.5);animation:ghtxt 2.7s ease both}
.ghorn .hl,.ghorn .hr{transform-box:fill-box;transform-origin:15% 97%;animation:ghswing 2.7s cubic-bezier(.3,.7,.25,1) both}
.ghorn .hspark{transform-box:fill-box;transform-origin:50% 50%;animation:ghspark 2.7s ease both}
.ghorn .hglow{opacity:0;animation:ghglow 2.7s ease both}
.ghorn .hd{opacity:0;animation:ghdrop 2.7s cubic-bezier(.2,.6,.4,1) both;animation-delay:var(--dl)}
@keyframes ghfade{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes ghswing{0%{transform:rotate(-34deg) translate(-26px,24px)}36%{transform:rotate(-9deg)}44%{transform:rotate(3.5deg)}50%{transform:rotate(-2.5deg)}58%{transform:rotate(1deg)}66%,100%{transform:rotate(0)}}
@keyframes ghspark{0%,40%{transform:scale(0) rotate(0);opacity:0}45%{transform:scale(1.25) rotate(20deg);opacity:1}62%{transform:scale(.4) rotate(45deg);opacity:0}100%{opacity:0}}
@keyframes ghglow{0%,40%{opacity:0}47%{opacity:1}100%{opacity:.25}}
@keyframes ghdrop{0%,42%{opacity:0;transform:translate(0,0)}47%{opacity:1}68%{opacity:.9;transform:translate(var(--dx),var(--dy))}80%{opacity:0;transform:translate(calc(var(--dx)*1.3),calc(var(--dy)*.4 + 14px))}100%{opacity:0}}
@keyframes ghtxt{0%,44%{opacity:0;transform:translateY(8px) scale(.92)}54%{opacity:1;transform:none}100%{opacity:1}}
.ghorn.still,.ghorn.still *{animation-duration:1.9s!important}
.ghorn.still .hl,.ghorn.still .hr,.ghorn.still .hspark,.ghorn.still .hd{animation:none!important}.ghorn.still .hspark,.ghorn.still .hd{opacity:0}.ghorn.still b{animation:none}
/* the result card waits while the camera takes its closing turn round the table */
.gend.late{animation:gendlate .35s var(--late,0ms) both}
@keyframes gendlate{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
/* a word said at the table: a speech bubble over the player */
.rxb.say{background:#FFF8EC;color:#2A1A12;border-radius:16px;padding:8px 14px;box-shadow:0 8px 22px rgb(0 0 0/.35);max-width:min(70vw,260px);white-space:normal;text-align:center}
.rxb.say b{font-weight:800;font-size:15px;line-height:1.25;color:#2A1A12}
/* ---------- the other ways to play: career, hand of the day, one phone, learning ---------- */
.gmodes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gmode{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:left;color:var(--ink);min-height:112px}
.gmode b{font-size:15.5px;line-height:1.25;font-weight:800}.gmode small{font-size:12.5px;color:var(--muted);line-height:1.3}
.gmode .gmi{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgb(242 184 75/.14);color:var(--gold);margin-bottom:4px}.gmode .gmi svg{width:20px;height:20px}
.gmode:active{transform:scale(.98)}.gmode:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* the career path */
.cbar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:6px 0 2px}.cbar i{display:block;height:100%;background:linear-gradient(90deg,#F2B84B,#FFD98A);border-radius:inherit}
.clist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cstage{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.cstage.next{border-color:rgb(242 184 75/.6);box-shadow:0 0 0 3px rgb(242 184 75/.12)}.cstage.locked{opacity:.55}
.cstage .cnum{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--line);font-weight:800;font-size:14px}.cstage.done .cnum{background:#3E8E5A;color:#fff}.cstage .cnum svg{width:16px;height:16px}
.cstage .cav{flex:none}.cstage .grow{min-width:0}.cstage b{display:block;font-size:15px}.cstage small{display:block;font-size:12.5px;line-height:1.35}
/* the coach */
.gcoach{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 108px);transform:translateX(-50%);z-index:70;width:min(92vw,440px);display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;padding:12px 14px;border-radius:18px;background:#FFF8EC;color:#2A1A12;box-shadow:0 14px 34px rgb(0 0 0/.42);animation:fade .3s}
.gcoach p{margin:0;font-size:14.5px;line-height:1.4;color:#2A1A12}.gcoach .gco{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#F2B84B;color:#2A1A12}.gcoach .gco svg{width:19px;height:19px}
.gcoach .btn{grid-column:2;justify-self:end}
/* hints on the flat boards */
.gx .pt.hint .tri{filter:drop-shadow(0 0 6px #7CF0B4)}.gx .pt.hint{box-shadow:inset 0 0 0 2px #7CF0B4;border-radius:6px}
.gx .hand .card.hint{box-shadow:0 0 0 3px #7CF0B4,0 8px 18px rgb(0 0 0/.35);transform:translateY(-6px)}
/* the game kind sheet */
.gvar .gvh{margin:12px 4px 4px;font-size:13px;color:var(--muted);font-weight:700;text-transform:none}.gvar .gvh:first-child{margin-top:0}
/* badges on the game card */
.gbadges h4{margin:16px 0 8px;font-size:15px}.gbadges h4 small{color:var(--muted);font-weight:500}
.gbl{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.gbd{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);opacity:.55}.gbd.on{opacity:1;border-color:rgb(242 184 75/.5)}
.gbd i{font-style:normal;font-size:20px}.gbd b{font-size:13.5px}.gbd small{font-size:11.5px;color:var(--muted);line-height:1.3}
.gs-rt small{display:block;font-size:11px;color:var(--gold);font-weight:600;line-height:1.1}.gcrs small{display:block}
.lbsc{flex-wrap:wrap}
/* big buttons and letters */
.gbig .gx .pl b{font-size:17px}.gbig .gx .pl .muted{font-size:14px}.gbig .gx .status{font-size:17px;padding:12px 16px}
.gbig .gx .btn{min-height:52px;font-size:17px;padding-inline:20px}.gbig .gx .ibtn{width:50px;height:50px}.gbig .gmenu button{font-size:17px;min-height:58px}
.gbig .gx .cb .cs span{font-size:min(10vw,48px)}.gbig .gx .ck .man{width:84%;height:84%}.gbig .gx .ck .man.w{background:#FFFFFF;box-shadow:inset 0 0 0 3px #222}.gbig .gx .ck .man.b{background:#0E0E0E;box-shadow:inset 0 0 0 3px #FFF}
.gbig .gx .nb .ch.w{background:#FFFFFF;box-shadow:0 0 0 2px #111}.gbig .gx .nb .ch.b{background:#111;box-shadow:0 0 0 2px #FFF}
.gbig .gx .card{font-size:1.18em}.gbig .gx .dmt{transform:scale(1.08)}.gbig .gcoach p{font-size:17px}
/* friends' tables: the wide mode tile, domino pairs, talking at the table */
.gmode.wide{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.gmode.wide .gmi{grid-row:span 2;margin:0}
.dmteams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dmteams .gvh{margin:0 0 6px}
.jkseats.two{grid-template-columns:1fr 1fr}
.gvb.on{color:#5BD38A;background:rgb(91 211 138/.16)}
.gvb.mute{color:#F08A7E}
.gvb.ask{animation:gvask 1.4s ease-in-out infinite}
@keyframes gvask{50%{box-shadow:0 0 0 6px rgb(91 211 138/.28)}}
.speaking:is(.pl,.seat){box-shadow:0 0 0 3px #5BD38A,0 0 18px rgb(91 211 138/.45)}
.gvlist .row{display:flex;align-items:center;gap:12px;padding:8px 0}
.gvlist .row.speaking .av{box-shadow:0 0 0 3px #5BD38A}
@media (prefers-reduced-motion:reduce){.gvb.ask{animation:none;box-shadow:0 0 0 3px rgb(91 211 138/.4)}}
/* the side column on wide screens: the game so far, between the bars */
.gside{display:flex;flex-direction:column;gap:6px;min-height:0;flex:0 1 auto;margin-bottom:auto;padding:10px 12px;border-radius:16px;background:rgb(20 14 10/.62);border:1px solid rgb(255 255 255/.08);color:#EFE4D4;backdrop-filter:blur(6px)}
.gside h4{margin:0;font-size:13px;font-weight:700;letter-spacing:.02em;color:#C9B9A4}
.gside .gsl{overflow:auto;min-height:0;max-height:min(46vh,420px);overscroll-behavior:contain;scrollbar-width:thin}
.gsmv{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.gsmv td{padding:3px 6px;border-bottom:1px solid rgb(255 255 255/.06)}
.gsmv td.n{color:#8E8070;width:2.4em}
.gsmv td.t{text-align:right;font-weight:700}
.gsmv tr.now td{color:#F2B84B}
.gsmv .fg{font-style:normal;font-size:1.15em;font-family:"Noto Sans Symbols 2","Segoe UI Symbol","DejaVu Sans","Apple Symbols",serif}
.gside .jnote{transform:none;margin:0}
.gsp{margin:0;font-size:13px;color:#C9B9A4}
.gsmatch{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0}
.gsmatch span{display:flex;flex-direction:column;align-items:center;font-size:12px;color:#C9B9A4}
.gsmatch b{font-size:30px;line-height:1.1;color:#F2B84B}
.gsmatch i{font-style:normal;font-size:22px;color:#8E8070}
.gx:has(.gside) .ghud.top>.mvs,.gx:has(.gside) .jsm:not(.pop){display:none}
/* durak and bura on the flat table: pairs of attack and defence, the deck with its trump, the led row and the answer */
.dkt .trick.dtable,.bura .trick.btable{display:flex;flex-wrap:wrap;gap:10px 14px;align-content:center;justify-content:center;padding:8px 2px 8px 70px;min-height:170px}
.dtable .card,.btable .card{position:relative;left:auto;top:auto;transform:none}
.dpair{position:relative;display:inline-block;width:72px;height:96px}
.dpair .card{position:absolute;left:0;top:0}
.dpair .card.dd{left:16px;top:18px;transform:rotate(-10deg);box-shadow:0 4px 12px rgb(0 0 0/.45)}
.ddeck{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:62px;height:96px}
.ddeck .card.dtr{position:absolute;left:12px;top:14px;transform:rotate(90deg);opacity:.95}
.ddeck .cbk{position:absolute;left:0;top:0}
.ddeck.none{width:auto;height:auto;display:inline-flex;gap:4px;align-items:center;font-size:12.5px;background:rgb(0 0 0/.25);padding:3px 9px;border-radius:999px;color:#F5EFE4}
.cbk{position:relative;display:inline-block;width:46px;height:66px}
.cbk i{position:absolute;inset:0;border-radius:7px;background:repeating-linear-gradient(45deg,#7A1E2C 0 4px,#8F2A38 4px 8px);border:2px solid #FFFDF8;box-shadow:0 1px 3px rgb(0 0 0/.4)}
.cbk i:nth-child(2){transform:translate(1px,-1px)}.cbk i:nth-child(3){transform:translate(2px,-2px)}.cbk i:nth-child(4){transform:translate(3px,-3px)}
.cbk b{position:absolute;right:-6px;bottom:-6px;min-width:20px;height:20px;border-radius:10px;background:#1B1410;color:#F2B84B;font-size:11.5px;display:grid;place-items:center;padding:0 4px;z-index:2}
.btable{flex-direction:column;align-items:center}
.burow{display:flex;gap:8px;justify-content:center}
.burow.won .card{box-shadow:0 0 0 3px var(--gold),0 6px 16px rgb(0 0 0/.35)}
.bura{grid-template-columns:0 1fr 0}
.gx .hand .card.sel,.hand .card.sel{transform:translateY(-16px);box-shadow:0 0 0 3px var(--gold),0 10px 20px rgb(0 0 0/.4)}
.seat.dfd .av,.pl.dfd .plav{box-shadow:0 0 0 3px #E5654F}
.gx.is3d:is([data-g="durak"],[data-g="bura"]) .ghud.bot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18.5vh);background:linear-gradient(transparent,rgb(9 6 4/.35) 40%,rgb(9 6 4/.55))}
@media (min-aspect-ratio:5/4){.gx.is3d:is([data-g="durak"],[data-g="bura"]) .ghud.bot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}}
/* lotto: the caller's barrel, the other players, the tickets */
.lset{gap:10px}.lset .lsh{font-size:13px;color:var(--muted);margin-top:4px}.lset .seg{margin:0}
.lchk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.35;margin:6px 0}
.lchk input{width:20px;height:20px;accent-color:var(--gold);flex:none;margin-top:1px}
.lroom{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px;margin:0 auto;padding:6px 4px 12px}
.lbar{display:flex;align-items:center;gap:12px}
.lkeg{flex:none;width:112px;height:112px;border-radius:26px 26px 30px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#2A1A12;
 background:radial-gradient(70% 60% at 50% 45%,#F7E3C0,#E2B97D 60%,#A9733C),#C89150;box-shadow:inset 0 0 0 4px rgb(90 50 20/.35),inset 0 10px 0 -6px rgb(90 50 20/.3),inset 0 -10px 0 -6px rgb(90 50 20/.3),0 10px 24px rgb(0 0 0/.4);animation:lpop .35s var(--ease-out)}
.lkeg b{font-size:46px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.lkeg small{font-size:11.5px;text-align:center;line-height:1.2;max-width:96px;color:#5B3A1E}
.lkeg.wait{animation:none;opacity:.8}
@keyframes lpop{0%{transform:scale(.6) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.llast{flex:1;display:flex;gap:6px;flex-wrap:wrap;align-content:center}
.llast span{min-width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgb(255 255 255/.08);font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.llast span:first-child{background:rgb(242 184 75/.2);color:#F2B84B}
.lpls{display:flex;gap:8px;flex-wrap:wrap}
.lpl{flex:1;min-width:96px;display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:14px;background:rgb(255 255 255/.06)}
.lpl b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpl small{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.lpl.hot small{color:#F08A7E;font-weight:700}.lpl.won{box-shadow:0 0 0 2px var(--gold)}
.ltixs{display:flex;flex-direction:column;gap:12px}
.ltix{padding:9px;border-radius:12px;background:#FBF4E4;box-shadow:inset 0 0 0 3px #C2342E,0 8px 20px rgb(0 0 0/.35)}
.ltix.done{box-shadow:inset 0 0 0 3px #2E8B57,0 0 0 3px var(--gold),0 8px 20px rgb(0 0 0/.35)}
.ltg{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
.lc{aspect-ratio:1/1.05;border-radius:6px;display:grid;place-items:center;font-weight:800;font-size:clamp(14px,4.2vw,20px);color:#2A1A12;background:#fff;border:1px solid #E3D2B2;font-variant-numeric:tabular-nums;position:relative;padding:0}
.lc.e{background:repeating-linear-gradient(45deg,#F1E3C6 0 5px,#EAD8B5 5px 10px);border-color:transparent}
.lc.on::after{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F06A5E,#B3121C 70%);box-shadow:0 2px 4px rgb(0 0 0/.35);opacity:.86}
.lc.now{box-shadow:0 0 0 3px #F2B84B;animation:lnow 1s ease-in-out infinite alternate}
@keyframes lnow{to{box-shadow:0 0 0 5px rgb(242 184 75/.35)}}
.ltl{display:block;margin-top:6px;font-size:12px;color:#7A5A3A;text-align:right}
.ltix.done .ltl{color:#2E8B57;font-weight:800}
.lacts{justify-content:center}
.lclaim{font-size:20px;padding:12px 30px;animation:lclaim .7s ease-in-out infinite alternate}
@keyframes lclaim{to{transform:scale(1.07)}}
.l90{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.l90 span{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:13px;background:var(--sunk);color:var(--muted);font-variant-numeric:tabular-nums}
.l90 span.on{background:#B3121C;color:#fff;font-weight:700}
@media (prefers-reduced-motion:reduce){.lkeg,.lc.now,.lclaim{animation:none}}
/* egg tapping on the flat table: the basket, the two eggs meeting, the timing bar and the ring */
.ebasket{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:420px;margin:0 auto;padding:14px;border-radius:28px;background:radial-gradient(circle at 50% 40%,#5C8A2E,#2F4F17)}
.eslot{display:grid;place-items:center;aspect-ratio:1/1.1;border-radius:18px;padding:6px;background:rgb(0 0 0/.12)}
.eslot .egg{width:72%;height:auto;transition:transform .2s}
.eslot:active .egg{transform:rotate(-8deg)}
.eslot.sel{background:rgb(242 184 75/.25);box-shadow:0 0 0 3px var(--gold)}
.eslot.sel .egg{transform:translateY(-6px) scale(1.08)}
.educl{display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:8px 0}
.eside{display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .2s cubic-bezier(.5,0,.9,.4)}
.eside .egg{width:96px;height:auto;filter:drop-shadow(0 8px 10px rgb(0 0 0/.4))}
.eside .egg.flip{transform:rotate(180deg)}
.eside small{font-size:12.5px;color:var(--muted)}
.eside.b{flex-direction:column-reverse}
.educl.hit.sa .eside.a{transform:translateY(-34px)}.educl.hit.sb .eside.b{transform:translateY(34px)}
.emeter{position:relative;height:22px;border-radius:11px;margin:4px auto;width:min(86%,360px);background:linear-gradient(90deg,#8E2A2A,#E0A43A 38%,#5BD38A 50%,#E0A43A 62%,#8E2A2A)}
.emeter i{position:absolute;top:-6px;bottom:-6px;width:6px;margin-left:-3px;border-radius:3px;background:#fff;box-shadow:0 0 6px rgb(0 0 0/.5);animation:emet linear infinite;left:0}
@keyframes emet{0%{left:0}50%{left:100%}100%{left:0}}
.ering{position:relative;width:96px;height:96px;margin:2px auto}
.ering::after{content:"";position:absolute;inset:34%;border-radius:50%;background:#B3121C;box-shadow:0 0 0 3px #F2B84B}
.ering i{position:absolute;inset:0;border-radius:50%;border:4px solid #F2B84B;animation:ering linear forwards}
@keyframes ering{from{transform:scale(1.6);opacity:.4}to{transform:scale(.3);opacity:1}}
.eggbtn{font-size:20px;padding:12px 34px}
.lpl{display:grid;grid-template-columns:auto 1fr;column-gap:7px;row-gap:0;align-items:center}
.lpl>.av{grid-row:span 2}.lpl small{margin-left:0}
/* the opening's name, the sprint bar, the nardi analysis and the replay page */
.gopn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:4px 0 0 4px;padding:4px 10px;border-radius:999px;background:rgb(0 0 0/.35);color:#F2DDB4;font-size:12.5px;font-weight:600;max-width:calc(100% - 8px)}
.gopn svg{width:14px;height:14px;flex:none}.gopn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvseq{font-size:15px;line-height:1.7;margin:8px 0 0}.mvseq b{color:var(--muted);font-weight:600}
.sprbar{display:flex;align-items:center;gap:12px;align-self:center;margin-top:6px;padding:6px 14px;border-radius:999px;background:rgb(0 0 0/.45);color:#F5EFE4;font-size:14px}
.sprbar svg{width:16px;height:16px}.sprbar b{font-size:18px;font-variant-numeric:tabular-nums;color:#F2B84B}.sprbar em{font-style:normal;font-weight:800}.sprbar .hearts{color:#F0606A;letter-spacing:2px}
.nansum{display:flex;gap:10px;margin-bottom:10px}.nansum span{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:14px;background:var(--sunk)}
.nansum b{font-size:24px}.nansum small{font-size:12px;color:var(--muted)}
.nanr{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.nanr .nand{flex:none;min-width:40px;text-align:center;font-weight:800;padding:4px 6px;border-radius:8px;background:var(--sunk)}
.nanr b{font-size:14px;font-weight:600}.nanr small{display:block;font-size:12.5px;color:var(--muted)}
.nanr .nanv{font-size:12.5px;font-weight:700}.nanr.bad .nanv{color:#E5654F}.nanr.meh .nanv{color:#E0A43A}.nanr.ok .nanv{color:#5BD38A}
.rpc{gap:10px}.rpb{display:flex;justify-content:center}.rpb .anb{width:min(100%,420px)}
.rpn{width:min(100%,460px);height:auto;border-radius:12px}
.rpctl{display:flex;align-items:center;justify-content:center;gap:6px}.rpctl span{min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.rplist{display:flex;flex-wrap:wrap;gap:6px;max-height:220px;overflow:auto}
.rpm{padding:4px 9px;border-radius:9px;background:var(--sunk);font-size:13.5px}.rpm.on{background:var(--gold);color:#1B1205}.rpm b{margin-right:3px;color:var(--muted)}
.ckm span{position:relative}.ckm i{position:absolute;inset:14%;border-radius:50%}.ckm i.w{background:#F4EAD8;box-shadow:inset 0 -2px 0 rgb(0 0 0/.25)}.ckm i.b{background:#2A1A12;box-shadow:inset 0 -2px 0 rgb(255 255 255/.15)}
.ckm i.k::after{content:"♛";position:absolute;inset:0;display:grid;place-items:center;font-size:.8em;color:#C9A227}
/* comments over a live board */
#gcmt{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom) + 150px);z-index:72;display:flex;flex-direction:column;gap:6px;max-width:min(70vw,320px);pointer-events:none}
.gcm{padding:7px 12px;border-radius:14px 14px 14px 4px;background:rgb(20 14 10/.78);color:#F5EFE4;font-size:14px;line-height:1.35;box-shadow:0 6px 16px rgb(0 0 0/.35);animation:fade .3s;transition:opacity .6s,transform .6s}
.gcm b{color:#F2B84B;font-weight:700}.gcm.me{background:rgb(242 184 75/.88);color:#1B1205}.gcm.me b{color:#5A3A0A}.gcm.out{opacity:0;transform:translateY(-8px)}
.gcq{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.gcf{display:flex;gap:8px}.gcf input{flex:1;min-width:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);font-size:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the day's tasks and the season's event in the lobby */
.gquests .gql{display:flex;flex-direction:column;gap:8px}
.gq{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.gq b{font-size:14.5px}.gq small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.gqbar{display:block;height:6px;border-radius:3px;background:var(--sunk);margin-top:7px;overflow:hidden}.gqbar em{display:block;height:100%;background:var(--gold);border-radius:3px}
.gq.done{border-color:rgb(242 184 75/.5)}.gqok{color:#5BD38A}.gqpend{color:var(--muted)}.gqok svg,.gqpend svg{width:22px;height:22px}
.gev{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--ec) 34%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--ec) 50%,transparent)}
.gev b{font-size:15.5px}.gev small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.gevi{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ec);color:#fff;flex:none}.gevi svg{width:22px;height:22px}
/* stronger colours */
.ghc .cs.l{background:#FFFFFF}.ghc .cs.d{background:#35557F}
.ghc .pb{color:#000;text-shadow:0 0 0 #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff}
.ghc .pw{color:#FFF;text-shadow:0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.ghc .man.w{background:#FFFFFF;box-shadow:0 0 0 3px #000}.ghc .man.b{background:#000;box-shadow:0 0 0 3px #F2D04B}
.ghc .card{box-shadow:0 0 0 2px #000,0 2px 6px rgb(0 0 0/.4)}.ghc .card .s2,.ghc .card span{font-weight:900}
.ghc .gx .status{background:#000;color:#FFF;border:2px solid #FFF}
.ghc .gx .pl{background:#000;box-shadow:0 0 0 2px #FFF}
.ghc .lc{border:2px solid #000}.ghc .lc.on::after{background:#000;opacity:.8}.ghc .ltix{box-shadow:inset 0 0 0 5px #000}
/* cups among friends and duels between groups */
.crow.mine{background:color-mix(in srgb,var(--gold) 12%,transparent);border-radius:12px}
.cupic{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 22%,var(--surface));color:var(--ac)}
.cupic svg{width:22px;height:22px}
.gamemsg .cupic.big{width:92px;height:auto;border-radius:0;background:linear-gradient(160deg,#E7C14A,#A07A12);color:#fff}
.gamemsg .cupic.big svg{width:38px;height:38px}
.cuphead{border-top:4px solid var(--ac)}
.cupwin{display:flex;align-items:center;gap:8px;font-size:15px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--gold) 16%,var(--surface))}
.cupwin svg{width:20px;height:20px;color:var(--gold);flex:none}
.cupnext{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.cupnext .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.cupnext small{font-size:12px;color:var(--muted)}
.cuplbl{margin:4px 0 -4px;font-size:13px;font-weight:600;color:var(--muted)}
.cupon{width:10px;height:10px;border-radius:50%;background:#2EA36B;flex:none;box-shadow:0 0 0 2px var(--surface)}
.bm.mine{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold)}
.cdres{display:flex;flex-direction:column;gap:2px;margin-top:-6px}
.cdres .row.pick{border-radius:10px}
.cdres .row.pick.on{background:color-mix(in srgb,var(--wine) 10%,transparent);color:var(--wine)}
.cdres .row.pick svg{width:18px;height:18px}
.cduel{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start;margin:14px 0}
.cdside{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);min-width:0}
.cdside h4{margin:0;font-size:15px;overflow-wrap:anywhere}
.cdside>small{color:var(--muted);font-size:12px;margin-top:-4px}
.cdside .btn{align-self:flex-start;margin-top:4px}
.cdp{display:flex;align-items:center;gap:6px;font-size:13px;min-width:0}
.cdp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdp.me{color:var(--wine);font-weight:600}
.cdvs{align-self:center;font-weight:800;font-size:18px;color:var(--muted);display:flex;gap:4px}
.cdvs b{font-size:26px;color:var(--ink)}
.cdpair{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-size:14px}
.cdpair span:last-child{text-align:right}
.cdpair .w{font-weight:700}
.cdpair i{font-style:normal;color:var(--muted)}
.cdpair.mine{color:var(--wine)}
.cupb .bcol{justify-content:flex-start}
.cupb .bcolm{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:10px}
/* ---------- the night lounge at the card table: navy glass, thin light borders, gold for what is mine ---------- */
.gx.is3d.lux .ghud.top{background:linear-gradient(rgb(4 8 20/.9),rgb(4 8 20/.5) 62%,transparent)}
.gx.is3d.lux .ghud.bot{background:linear-gradient(transparent,rgb(4 8 20/.36) 40%,rgb(4 8 20/.62))}
.gx.lux .gtop .ibtn{background:linear-gradient(180deg,rgb(24 36 70/.7),rgb(10 16 34/.72));border:1px solid rgb(150 175 255/.18);box-shadow:inset 0 1px 0 rgb(255 255 255/.07),0 4px 12px rgb(0 0 0/.35);border-radius:14px;color:#E8EEFF}
.gx.lux .gtop h2{display:flex;align-items:center;gap:8px;letter-spacing:.01em}
.gx.lux .gtop h2::before{content:"";flex:none;width:26px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE9A8'/%3E%3Cstop offset='1' stop-color='%23CF9128'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M3 15 1.5 4.5l6.2 4.6L13 1l5.3 8.1 6.2-4.6L23 15z'/%3E%3Crect x='3' y='16' width='20' height='3' rx='1.2' fill='url(%23g)'/%3E%3Ccircle cx='1.6' cy='3.6' r='1.5' fill='%23FFE9A8'/%3E%3Ccircle cx='13' cy='1.4' r='1.5' fill='%23FFE9A8'/%3E%3Ccircle cx='24.4' cy='3.6' r='1.5' fill='%23FFE9A8'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 4px rgb(255 190 80/.45))}
.gx.lux .ginfo{gap:8px}
.gx.lux .ginfo>span{padding:6px 13px;border-radius:13px;font-size:12.5px;background:linear-gradient(180deg,rgb(22 34 66/.78),rgb(10 16 34/.8));border:1px solid rgb(150 175 255/.2);box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 4px 12px rgb(0 0 0/.3);color:#E8EEFF}
.gx.lux .ginfo .jlt{border-radius:13px;background:linear-gradient(180deg,rgb(22 34 66/.78),rgb(10 16 34/.8))}
.gx.lux .g3jt .seat{background:linear-gradient(180deg,rgb(20 31 62/.86),rgb(9 14 32/.86));border:1px solid rgb(150 175 255/.22);padding:4px 16px 4px 4px;column-gap:9px;box-shadow:inset 0 1px 0 rgb(255 255 255/.07),0 8px 22px rgb(0 0 0/.45)}
.gx.lux .g3jt .seat>.av{--s:38px!important;width:38px;height:38px;box-shadow:0 0 0 2px rgb(255 255 255/.9),0 2px 8px rgb(0 0 0/.4)}
.gx.lux .g3jt .seat b{font-size:13.5px;max-width:110px;color:#F4F6FF}
.gx.lux .g3jt .seat .bt{color:#B9C4E6;font-size:11.5px;letter-spacing:.06em}
.gx.lux .g3jt .seat>span.jsc{font-size:13px;color:#7EE0A6}
.gx.lux .g3jt .seat>span.jsc.neg{color:#FF6F7A}
.gx.lux .g3jt .seat>span.jsc::before{content:"";margin-left:2px}
.gx.lux .g3jt .seat.turn{border-color:rgb(242 196 106/.85);box-shadow:0 0 0 1px rgb(242 196 106/.6),0 0 24px rgb(242 196 106/.35),0 8px 22px rgb(0 0 0/.45)}
.gx.lux .ghud .pl{background:linear-gradient(180deg,rgb(20 31 62/.86),rgb(9 14 32/.88));border:1px solid rgb(150 175 255/.2);box-shadow:inset 0 1px 0 rgb(255 255 255/.07),0 8px 22px rgb(0 0 0/.45);padding:6px 20px 6px 6px}
.gx.lux .ghud .pl.me{border-color:rgb(226 186 98/.6);box-shadow:inset 0 1px 0 rgb(255 240 200/.1),0 0 0 1px rgb(226 186 98/.18),0 8px 24px rgb(0 0 0/.5)}
.gx.lux .ghud .pl.me .plav{position:relative;border-radius:50%;box-shadow:0 0 0 2px #E2BA62,0 0 14px rgb(226 186 98/.35)}
.gx.lux .ghud .pl.me .plav::after{content:"";position:absolute;right:-7px;top:-9px;width:18px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath fill='%23F2C766' d='M3 15 1.5 4.5l6.2 4.6L13 1l5.3 8.1 6.2-4.6L23 15z'/%3E%3Crect x='3' y='16' width='20' height='3' rx='1.2' fill='%23F2C766'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(18deg);filter:drop-shadow(0 1px 2px rgb(0 0 0/.6))}
.gx.lux .ghud .pl b{color:#F4F6FF;letter-spacing:.01em}
.gx.lux .ghud .pl .muted{color:#B9C4E6}
.gx.lux .status{display:flex;align-items:center;justify-content:center;gap:10px;text-align:left;padding:9px 16px;border-radius:14px;background:linear-gradient(180deg,rgb(20 31 62/.84),rgb(9 14 32/.86));border:1px solid rgb(150 175 255/.2);color:#E8EEFF;box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 6px 18px rgb(0 0 0/.35)}
.gx.lux .status::before{content:"i";flex:none;display:grid;place-items:center;width:20px;height:20px;margin:0;border-radius:50%;background:#2F7BF6;color:#fff;font:700 12px/1 Georgia,serif;box-shadow:0 0 12px rgb(47 123 246/.55)}
.gx.lux .status.mine{color:#FFF1CC;border-color:rgb(242 196 106/.55);background:linear-gradient(90deg,rgb(242 184 75/.16),rgb(14 22 46/.88) 60%)}
.gx.lux .status.mine::before{content:"i";width:20px;height:20px;background:#E9B44C;color:#1B1205;box-shadow:0 0 12px rgb(233 180 76/.55)}
.gx.lux .status .bhint{color:#9CC2FF;background:rgb(61 134 255/.16)}
.gx.lux .bids{gap:8px}
.gx.lux .bids button{height:52px;border-radius:15px;font-size:20px;color:#EAF0FF;background:linear-gradient(180deg,rgb(30 46 86/.9),rgb(12 19 42/.92));border:1px solid rgb(150 175 255/.24);box-shadow:inset 0 1px 0 rgb(255 255 255/.09),0 6px 14px rgb(0 0 0/.38)}
.gx.lux .bids button:not(:disabled):hover{background:linear-gradient(180deg,rgb(40 64 120/.95),rgb(18 30 66/.95));border-color:#4D8DFF}
.gx.lux .bids button:not(:disabled):active{border-color:#5B9BFF;box-shadow:0 0 0 1px #5B9BFF,0 0 22px rgb(61 134 255/.6)}
.gx.lux .bids button.hint{border-color:#3D86FF;background:linear-gradient(180deg,#2457B8,#173E8A);box-shadow:0 0 0 1px #3D86FF,0 0 20px rgb(61 134 255/.5),inset 0 1px 0 rgb(255 255 255/.15)}
.gx.lux .bids button.hint::after{background:#9CC2FF;box-shadow:0 0 6px #9CC2FF}
.gx.lux .bids button:disabled{color:rgb(200 210 240/.3);background:transparent;border:1px dashed rgb(150 175 255/.25);box-shadow:none}
/* the trump: a big suit on a small white card, the name beside it */
.gx .ginfo>span.tchip{display:inline-flex;align-items:center;gap:9px;padding:4px 14px 4px 4px}
.gx .ginfo .tsu{display:grid;place-items:center;flex:none;width:34px;height:42px;border-radius:7px;background:linear-gradient(180deg,#FFFFFF,#F1ECE2);box-shadow:inset 0 0 0 1px rgb(0 0 0/.12),0 3px 8px rgb(0 0 0/.35);font-style:normal}
.gx .ginfo .tsu svg{width:25px;height:25px;filter:drop-shadow(0 1px 0 rgb(0 0 0/.15))}
.gx .ginfo .tsu .tq{font-size:20px;font-weight:800;line-height:1}
.gx .ginfo .tsn{display:flex;flex-direction:column;line-height:1.15}
.gx .ginfo .tsn small{font-size:10.5px;font-weight:600;opacity:.72;letter-spacing:.02em}
.gx .ginfo .tsn b{font-size:15px;font-weight:800}
.gx.lux .ginfo>span.tchip{padding:4px 16px 4px 4px}
.gbig .gx .ginfo .tsu{width:40px;height:50px}.gbig .gx .ginfo .tsu svg{width:30px;height:30px}.gbig .gx .ginfo .tsn b{font-size:18px}
/* the bids: always sized for ten (pass to nine), so a short hand gets small buttons in the middle, not two big blocks */
.gx .bids{display:flex;flex-wrap:nowrap;justify-content:center;gap:5px;width:100%;max-width:min(100%,470px)}
.gx .bids button{flex:0 0 calc((100% - 45px) / 10);height:44px;border-radius:12px;font-size:17px}
.gx .bids button[data-v="0"]{font-size:11px;letter-spacing:-.01em}
.gx.lux .bids{gap:5px}
.gx.lux .bids button{height:44px;border-radius:12px;font-size:17px}
.gbig .gx .bids button{height:52px;font-size:20px}
/* the players sheet: the seats, then the ten characters to seat there */
.castsh{overflow-y:auto;min-height:0;flex:0 1 auto;overscroll-behavior:contain;padding:2px 0 8px}
.cseats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 14px 2px}
.cseat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border-radius:16px;background:var(--sunk);border:2px solid transparent;min-width:0}
.cseat b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cseat small{font-size:12px;color:var(--muted)}
.cseat[aria-pressed="true"]{border-color:var(--wine);background:var(--surface);box-shadow:var(--shadow)}
.chint{margin:10px 16px 6px;font-size:13.5px;color:var(--muted);line-height:1.4}.chint b{color:var(--ink)}
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 4px;padding:4px 10px 6px}
.cpick{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;border-radius:14px;min-width:0;position:relative}
.cpick b{font-size:12.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpick small{font-size:10.5px;color:var(--muted);margin-top:-2px}
.cpick .av{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.cpick.cur .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4.5px var(--wine)}.cpick.cur b{color:var(--wine)}
.cpick.busy .av{opacity:.55}
.cpick:hover{background:var(--sunk)}
.castsh .gmenu{padding-bottom:4px}
.seat[data-a="gcast"]{cursor:pointer}
@media (max-width:360px){.cgrid{grid-template-columns:repeat(4,1fr)}}
.bm div>span{display:flex;align-items:center;gap:6px;min-width:0}
/* the editor: the drawn character first, then the sculpted figure */
.lkcast{display:flex;flex-direction:column;gap:6px}
.lkcast .lkn{flex:none}
.lkcg{padding:0}
.lkauto{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font-size:14px;font-weight:600;text-align:left;background:var(--sunk)}
.lkauto svg{width:18px;height:18px;color:var(--wine);flex:none}
.lkauto[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--wine)}
.lksub{margin:6px 0 -2px;font-size:13.5px;font-weight:700}.lksub small{font-weight:500;color:var(--muted)}
.cport{display:block;width:200px;height:220px;background:url(/icons/g/cast2.webp) no-repeat,radial-gradient(circle at 50% 38%,#C4804A,#3A2218 70%);background-size:1024px 512px,100% 100%}
.gmenu button span.av{flex:none}
.gpcard .gcpic{flex:none;margin:0 auto}
/* over the moving 3D table a blur behind each panel would be worked out again on every frame, which costs phones dearly:
   in the game screen the panels are just a little more solid instead */
.gx *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.gx .pl{background:rgb(18 12 9/.84)}
.g3jt .seat{background:rgb(12 8 6/.82)}
.gx .status{background:rgb(12 8 5/.78)}
.gx .gtop .ibtn{background:rgb(28 20 16/.74)}

/* ---------- study: the study tab, timetable, deadlines, notes, education ---------- */
.kuhub{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}
.kuhero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 2px 0}
.kuhero h2{font-size:30px;font-weight:800;letter-spacing:-.01em}
.kucard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.kucard:empty{display:none}
.kucard.kunow{min-height:64px;justify-content:center}
.kuhd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kuhd h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px}
.kuhd h3 svg{width:18px;height:18px;color:var(--wine)}
.kuempty{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.kuempty p{color:var(--muted);font-size:14px}
.kulive{display:inline-flex;align-items:center;gap:6px;color:var(--vine);font-weight:700;font-size:13px}
.kulive svg{width:16px;height:16px}
.kusub{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px}
.kugrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kutile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border-radius:18px;text-align:left;
 background:linear-gradient(150deg,hsl(var(--h) 85% 97%),hsl(var(--h) 70% 92%));border:1px solid hsl(var(--h) 60% 88%);color:var(--ink);transition:transform .15s var(--ease-out)}
.kutile:active{transform:scale(.97)}
.kutile b{font-size:14.5px;line-height:1.25}
.kutile small{color:var(--muted);font-size:12px}
.kuti{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:hsl(var(--h) 70% 55%);color:#fff;margin-bottom:4px}
.kuti svg{width:20px;height:20px}
.kulist{display:flex;flex-direction:column;gap:8px;padding:12px 16px}
.kucard .kulist{padding:0}
.kurow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.kucard .kurow{background:var(--sunk);border-color:transparent}
.kurow .sub{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.kurow b{font-weight:700}
.lrow{border-left:4px solid hsl(var(--h) 70% 55%)}
.kugtag{display:inline-flex;align-items:center;gap:3px;max-width:58%;vertical-align:bottom;margin-right:6px;padding:0 7px 0 5px;border-radius:99px;background:var(--wine-soft);color:var(--wine);font-size:11.5px;font-weight:600;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kugtag svg{width:12px;height:12px;flex:none}
.kugf{padding:10px 16px 0}.kugf button svg{width:14px;height:14px;margin-right:3px;vertical-align:-2px}
.kurow .kugtag{margin-top:4px;max-width:100%;align-self:flex-start;width:fit-content}
.kuinfo h3{font-size:19px;margin:0 0 4px}.kuinfo .sub{color:var(--muted);margin:0 0 10px;line-height:1.5;white-space:normal;overflow:visible}.kuinfo .kunotes{white-space:pre-wrap;margin:0 0 10px}.kuinfo .kugtag{max-width:100%;margin:0 0 8px}.kuinfo .hint .hash{font-size:inherit}
#ku_for+.hint,select#ku_for~.hint{display:block;margin-top:4px}
.lrow.big{padding:12px 14px}
.lrow.big b{font-size:16px}
.ltime{display:flex;flex-direction:column;align-items:center;min-width:46px;font-variant-numeric:tabular-nums}
.ltime b{font-size:15px}
.ltime small{color:var(--muted);font-size:12px}
.kudays{margin:12px 16px 0}
.kudays button.today{font-weight:800}
.kudays button.today::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:2px auto 0}
.kuhues{display:flex;gap:10px;flex-wrap:wrap}
.kuhues button{width:32px;height:32px;border-radius:50%;background:hsl(var(--h) 70% 55%);border:3px solid transparent;box-shadow:0 0 0 1px var(--line)}
.kuhues button[aria-pressed="true"]{border-color:var(--surface);box-shadow:0 0 0 2px hsl(var(--h) 70% 45%)}
.dlrow{padding:6px 8px 6px 6px;gap:6px}
.dlchk{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);color:transparent;transition:background .15s,color .15s}
.dlchk svg{width:18px;height:18px}
.dlchk[aria-pressed="true"]{background:var(--vine);border-color:var(--vine);color:#fff}
.dlmain{display:flex;flex-direction:row;align-items:center;gap:10px;text-align:left;min-width:0;padding:4px}
.dlmain .grow{min-width:0}
.dlemo{font-size:20px;flex:none}
.dlwhen{flex:none;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.dlwhen.soon{background:color-mix(in srgb,var(--gold) 18%,transparent);color:color-mix(in srgb,var(--gold) 80%,var(--ink))}
.dlwhen.week{background:var(--wine-soft);color:var(--wine)}
.dlwhen.late{background:color-mix(in srgb,var(--nope) 14%,transparent);color:var(--nope)}
.dlrow.done b{text-decoration:line-through;color:var(--muted)}
.kuhint{display:flex;align-items:center;gap:6px;padding:10px 16px 0;font-size:12.5px}
.kuhint svg{width:14px;height:14px;flex:none}
.kusearch{margin:12px 16px 0;position:relative;display:block}
.kusearch>svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.kusearch .field{width:100%;padding-left:38px}
#libc{padding:10px 16px 0}
.libcard{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;padding:10px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.libcard .grow{min-width:0;display:flex;flex-direction:column;gap:2px}
.libcard b{font-size:15px;line-height:1.3}
.libcard .sub{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.libimg{position:relative;width:64px;height:64px;flex:none;border-radius:12px;overflow:hidden;background:var(--sunk);display:grid;place-items:center;color:var(--wine)}
.libimg img{width:100%;height:100%;object-fit:cover}
.libimg i{position:absolute;right:4px;bottom:4px;font-style:normal;font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;background:rgb(0 0 0/.55);color:#fff}
.libimg.noimg svg{width:26px;height:26px}
.libmeta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:4px}
.libmeta .av{flex:none}
.kumates{padding:0 0 8px}
.kumates .kuhd{padding:14px 16px 4px}
.kumates .list{padding:0 12px}
.kumates .row{padding:6px 4px}
.kumates .row>button.grow{display:flex;flex-direction:row;align-items:center;gap:12px;text-align:left;min-width:0}
.kumates .row .sub{display:block;color:var(--muted);font-size:12.5px}
.edurow .eduic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--wine-soft);color:var(--wine);flex:none}
.edurow .eduic svg{width:20px;height:20px}
.pedu{margin-top:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kutile{background:linear-gradient(150deg,hsl(var(--h) 30% 16%),hsl(var(--h) 35% 12%));border-color:hsl(var(--h) 30% 22%)}}
:root[data-theme="dark"] .kutile{background:linear-gradient(150deg,hsl(var(--h) 30% 16%),hsl(var(--h) 35% 12%));border-color:hsl(var(--h) 30% 22%)}
.kusafe{display:flex;gap:8px;align-items:flex-start;background:var(--wine-soft);color:var(--ink);padding:10px 12px;border-radius:12px;margin:6px 0 8px}.kusafe svg{width:18px;height:18px;flex:none;color:var(--wine);margin-top:1px}