/* Inter is loaded from a non-blocking <link> in index.html — an @import here
   cost two serialised round trips to a third-party origin before first paint. */

/* ============================================================
   20PM — X minimalism, Apple materials
   ============================================================ */
:root{
  --bg:#000000; --bg-2:#0a0a0c; --surf:#101114; --surf-2:#16171b;
  --line:#20232a; --line-2:#2c3038;
  --tx:#e9eaee; --tx-2:#9aa0ac; --tx-3:#6b7280;

  --blue:#1d9bf0; --blue-2:#4db2f5; --green:#00ba7c; --pink:#f91880;
  --gold:#f5c518; --purple:#a855f7; --orange:#ff9f0a;

  --glass:rgba(16,17,20,.72); --glass-2:rgba(22,23,28,.82);
  --blur:blur(28px) saturate(180%);
  --sh:0 16px 44px -20px rgba(0,0,0,.9);
  --spec:inset 0 .5px 0 rgba(255,255,255,.10);
  --r-xl:24px; --r-lg:18px; --r:14px; --r-sm:10px;
  --sp:cubic-bezier(.32,.72,0,1);
  --f:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',system-ui,sans-serif;
}
/* theme variants */
body[data-theme="dim"]{--bg:#15181c;--surf:#1b1f24;--surf-2:#212630;--line:#2b323b;--line-2:#3a434f}
body[data-theme="navy"]{--bg:#05080f;--surf:#0d131f;--surf-2:#121a29;--line:#1c2637;--line-2:#293449}
body[data-theme="dim"] #wall,body[data-theme="navy"] #wall{background:var(--bg)}
body[data-fs="s"]{font-size:14px}
body[data-fs="l"]{font-size:16.5px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--f);font-size:15px;letter-spacing:-.013em;
  overflow:hidden;-webkit-font-smoothing:antialiased}
body.landing{overflow:auto}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:none;background:none}
input,textarea{border:none;outline:none;background:none}
::selection{background:rgba(29,155,240,.35)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2a2d34;border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3b3f48;background-clip:content-box}

/* flat canvas — no gradients, just depth at the edges */
#wall{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg);
  box-shadow:inset 0 0 220px 40px rgba(255,255,255,.014)}
#grain{display:none}

/* ============================================================
   SHELL
   ============================================================ */
/* 100vh on a phone is the viewport with the browser's own bars hidden, which
   is not the viewport anybody is looking at. With the address bar up, the
   bottom of the app — which is where the message box lives — sits below the
   visible area, behind the browser's own chrome. dvh tracks what is actually
   on screen, and shrinks again when the keyboard opens. The vh line stays
   underneath it for anything too old to know dvh. */
.app{position:relative;z-index:2;display:flex;height:100vh;height:100dvh;justify-content:center}
.rail{width:258px;flex:0 0 258px;display:flex;flex-direction:column;padding:10px 10px 14px;gap:1px;
  border-right:1px solid var(--line);z-index:12}
.brand{display:flex;align-items:center;gap:10px;padding:12px 12px 14px;font-size:18px;font-weight:700;letter-spacing:-.04em}
.brand .mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:12.5px;font-weight:800;
  letter-spacing:-.05em;background:var(--tx);color:#000}
.navbtn{position:relative;display:flex;align-items:center;gap:15px;width:100%;padding:10px 12px;border-radius:999px;
  color:var(--tx);font-size:15.5px;font-weight:500;transition:background .18s var(--sp)}
.navbtn:hover{background:rgba(255,255,255,.07)}
.navbtn.on{font-weight:700}
.navbtn.on svg{stroke-width:2.3}
.navbtn svg{width:22px;height:22px;flex:0 0 22px;stroke-width:1.7}
.navbtn .pill{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--blue);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.rail .sect{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--tx-3);padding:14px 14px 6px;text-transform:uppercase}
.rail .grow{flex:1}
.postbtn{width:100%;margin:14px 0 4px;padding:13px;border-radius:999px;background:var(--tx);color:#000;
  font-size:15.5px;font-weight:700;transition:.18s var(--sp)}
.postbtn:hover{background:#fff}
.postbtn:active{transform:scale(.97)}
.mecard{display:flex;align-items:center;gap:10px;padding:9px;border-radius:999px;cursor:pointer;transition:.18s}
.mecard:hover{background:rgba(255,255,255,.07)}
.mecard .n{font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.mecard .s{font-size:13px;color:var(--tx-3)}
/* the whole card opens your profile — the picture is the obvious place to
   press, but nobody should have to hit it exactly */
.mecard.on{background:rgba(255,255,255,.09)}
.mecard:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--blue)}
.mecard .chev{margin-left:auto;color:var(--tx-3);font-size:17px;line-height:1}

main{flex:1;min-width:0;max-width:620px;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--line)}
main.full{max-width:none;border-right:none}
.toolbar{flex:0 0 auto;min-height:54px;display:flex;align-items:center;gap:12px;padding:9px 17px;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);z-index:8}
.toolbar h1{font-size:19px;font-weight:800;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar .sub{font-size:12.5px;color:var(--tx-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- while posting and messaging are off ----
   The bar sits above the toolbar rather than inside the scroller, so it is
   the first thing on every screen and does not scroll away from anyone who
   is about to look for somewhere to type. Amber, not red: nothing is
   broken, it is only switched off. */
.notice{flex:0 0 auto;display:flex;gap:11px;align-items:flex-start;padding:10px 17px;
  background:rgba(255,159,10,.09);border-bottom:1px solid rgba(255,159,10,.26);z-index:9}
.notice-d{flex:0 0 auto;width:7px;height:7px;margin-top:6px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 8px rgba(255,159,10,.6)}
.notice b{display:block;font-size:13.5px;font-weight:750;letter-spacing:-.02em;color:var(--orange)}
.notice span{display:block;font-size:12.5px;line-height:1.45;color:var(--tx-2);margin-top:1px}

/* A box that is off stays exactly where it was and keeps its shape: it is
   dimmed rather than removed, and the reason is written across it. Nothing
   moves, so nobody goes looking for a composer that walked off. */
body[data-paused] [data-off]{position:relative}
body[data-paused] [data-off] > *{opacity:.28;filter:grayscale(.55);pointer-events:none}
body[data-paused] [data-off]::after{content:attr(data-off);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 16px;pointer-events:none;font-size:12.5px;font-weight:600;
  letter-spacing:-.01em;color:var(--tx-2)}

.scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.wrap{padding:0 0 90px}
.pad{padding:16px 17px}

.side{width:334px;flex:0 0 334px;padding:12px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
@media(max-width:1180px){.side{display:none}}
.panel{border-radius:var(--r-lg);overflow:hidden;background:var(--surf);border:1px solid var(--line)}
.panel h3{font-size:16.5px;font-weight:800;padding:13px 16px 7px;letter-spacing:-.03em}
.panel .prow{display:flex;align-items:center;gap:11px;padding:9px 16px;cursor:pointer;transition:.16s}
.panel .prow:hover{background:rgba(255,255,255,.045)}
.panel .more{padding:11px 16px;color:var(--blue);font-size:14px;cursor:pointer}
.panel .more:hover{background:rgba(255,255,255,.045)}
.searchfield{display:flex;align-items:center;gap:9px;padding:10px 15px;border-radius:999px;background:var(--surf);
  border:1px solid transparent;color:var(--tx-3);font-size:14.5px;cursor:pointer;transition:.2s}
.searchfield:hover{border-color:var(--line-2)}
.searchfield svg{width:17px;height:17px}

/* ============================================================
   CONTROLS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 17px;border-radius:999px;
  font-size:14.5px;font-weight:700;color:#000;background:var(--tx);transition:.18s var(--sp)}
.btn:hover{background:#fff}
.btn:active{transform:scale(.96)}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-2)}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line-2)}
.btn.ghost:hover{background:rgba(255,255,255,.07)}
.btn.sm{padding:6px 14px;font-size:13.5px}
.btn.xs{padding:5px 12px;font-size:12.5px}
.btn.danger{background:transparent;color:var(--pink);border:1px solid rgba(249,24,128,.4)}
.btn.danger:hover{background:rgba(249,24,128,.12)}
.btn:disabled{opacity:.4;pointer-events:none}
.iconbtn{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;color:var(--tx-2);
  transition:.18s var(--sp);flex:0 0 auto}
.iconbtn:hover{background:rgba(255,255,255,.08);color:var(--tx)}
.iconbtn svg{width:19px;height:19px;stroke-width:1.8}
.iconbtn.del:hover{background:rgba(249,24,128,.14);color:var(--pink)}
.inp{width:100%;padding:11px 14px;border-radius:12px;background:transparent;border:1px solid var(--line-2);
  font-size:15px;transition:.18s}
.inp:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.inp::placeholder{color:var(--tx-3)}
.row{display:flex;align-items:center;gap:11px}
.lbl{font-size:12.5px;font-weight:600;color:var(--tx-3);margin:20px 3px 8px}
.click{cursor:pointer}
.sep{height:1px;background:var(--line)}

.seg{display:flex;border-bottom:1px solid var(--line)}
.seg button{flex:1;padding:14px 10px;font-size:14.5px;font-weight:600;color:var(--tx-3);position:relative;transition:.16s}
.seg button:hover{background:rgba(255,255,255,.045);color:var(--tx)}
.seg button.on{color:var(--tx);font-weight:700}
.seg button.on::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:56px;height:3.5px;border-radius:999px;background:var(--blue)}
.seg.pill{border:1px solid var(--line);border-radius:999px;padding:3px;gap:3px}
.seg.pill button{padding:8px;border-radius:999px;font-size:13.5px}
.seg.pill button.on{background:var(--tx);color:#000}
.seg.pill button.on::after{display:none}

.group{border-radius:var(--r-lg);overflow:hidden;background:var(--surf);border:1px solid var(--line)}
.gr{display:flex;align-items:center;gap:12px;padding:12px 15px;position:relative}
.gr+.gr::before{content:"";position:absolute;top:0;left:15px;right:0;height:1px;background:var(--line)}
.gr.click:hover{background:rgba(255,255,255,.045)}
.gr .ic{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex:0 0 29px;
  background:rgba(255,255,255,.07);color:var(--tx-2)}
.gr .ic.tint{background:color-mix(in srgb,var(--ic,#1d9bf0) 18%,transparent);color:var(--ic,#1d9bf0)}
.gr .t{flex:1;font-size:15px;font-weight:500}
.gr .v{font-size:14.5px;color:var(--tx-3)}
.chev{color:var(--tx-3);font-size:16px;line-height:1}

.switch{width:48px;height:29px;border-radius:999px;background:#2b2f36;position:relative;cursor:pointer;
  transition:.26s var(--sp);flex:0 0 48px}
.switch i{position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;background:#fff;
  transition:.26s var(--sp);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.switch.on{background:var(--green)}
.switch.on i{left:21px}
.check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;
  transition:.18s;flex:0 0 22px}
.check.on{background:var(--blue);border-color:var(--blue)}
.check svg{width:12px;height:12px;opacity:0}
.check.on svg{opacity:1}

.ico{flex:0 0 auto;vertical-align:-.15em}
.emo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:var(--sz,18px);height:var(--sz,18px)}
.emo svg{width:var(--sz,18px);height:var(--sz,18px);display:block;flex:0 0 auto}

/* ---------- badges ---------- */
.bdg{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;font-size:11.5px;
  font-weight:700;letter-spacing:-.005em;color:var(--bc,var(--tx-2));
  background:color-mix(in srgb,var(--bc,#888) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--bc,#888) 34%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bc,#888) 22%,transparent)}
.bdg .ico{color:var(--bc,var(--tx-2))}
.bdg.mini{padding:0;width:20px;height:20px;justify-content:center;border-radius:999px;gap:0}
.bdg.lg{font-size:12.5px;padding:5px 12px 5px 9px}
.bdg.rare{background:linear-gradient(100deg,color-mix(in srgb,var(--bc) 22%,transparent),color-mix(in srgb,#fff 10%,transparent));
  border-color:color-mix(in srgb,var(--bc) 55%,transparent);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 16px -6px var(--bc)}
.bdg.rare .ico{color:var(--bc)}
.bdg.off{opacity:.4;filter:grayscale(1)}
.bdgrow{display:flex;flex-wrap:wrap;gap:6px}

.minseg{display:flex;gap:3px;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.minseg button{padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--tx-3);transition:.16s}
.minseg button.on{background:var(--tx);color:#000}

/* ---------- shop ---------- */
.wallet{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;
  font-size:13px;font-weight:700;color:var(--gold);border:1px solid rgba(245,197,24,.32);
  background:rgba(245,197,24,.1)}
.wallet .ico{color:var(--gold)}
.railwallet{display:flex;align-items:center;gap:8px;margin:8px 2px 0;padding:9px 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--surf);cursor:pointer;transition:.18s}
.railwallet:hover{border-color:var(--line-2)}
.railwallet b{font-size:14px;font-variant-numeric:tabular-nums}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
.item{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);overflow:hidden;
  transition:.2s var(--sp);display:flex;flex-direction:column}
.item:hover{border-color:var(--line-2);transform:translateY(-2px)}
.item .prev{height:76px;position:relative;overflow:hidden;display:grid;place-items:center;background:var(--surf-2)}
.item .meta{padding:10px 11px 11px}
.item .nm{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:5px}
.item .ds{font-size:11.5px;color:var(--tx-3);margin-top:2px;line-height:1.4;min-height:16px}
.item .buy{margin-top:9px;width:100%;justify-content:center}
.item.owned{border-color:rgba(0,186,124,.4)}
.item .tagowned{position:absolute;top:7px;right:7px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;
  background:rgba(0,186,124,.18);color:var(--green);border:1px solid rgba(0,186,124,.35)}
.keepbtn{display:block;width:100%;margin-top:6px;font-size:10.5px;color:var(--tx-3);text-align:center;
  padding:3px 0;border-radius:8px;transition:.15s}
.keepbtn:hover{color:var(--gold);background:rgba(245,197,24,.08)}
.price{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.earnrow{display:flex;align-items:center;gap:11px;padding:11px 15px;position:relative}
.earnrow+.earnrow::before{content:"";position:absolute;top:0;left:15px;right:0;height:1px;background:var(--line)}
.earnrow .amt{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}

.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--tx-2)}
.chip.blue{color:var(--blue);border-color:rgba(29,155,240,.4)}
.chip.gold{color:var(--gold);border-color:rgba(245,197,24,.4)}
.chip.green{color:var(--green);border-color:rgba(0,186,124,.4)}
.chip.pink{color:var(--pink);border-color:rgba(249,24,128,.4)}
.kbd{font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--tx-3)}
.uname{font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.handle{color:var(--tx-3);font-weight:400}
.verified{width:15px;height:15px;flex:0 0 15px}
.empty{text-align:center;color:var(--tx-3);padding:56px 24px;font-size:14.5px;line-height:1.65}
.empty .big{font-size:30px;margin-bottom:10px;opacity:.5}

/* ---------- avatars + frames (shadcn ring-offset pattern) ---------- */
.avatar{position:relative;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;flex:0 0 auto;
  background-size:cover;background-position:center;--ringbg:#000}
/* status / verification badge — always above the ring, offset outside it */
.dot{position:absolute;right:-3px;bottom:-3px;z-index:5;width:var(--dot,12px);height:var(--dot,12px);
  border-radius:999px;background:var(--green);border:solid var(--ringbg);
  border-width:max(2px,calc(var(--dot,12px)*.17));display:inline-flex;align-items:center;justify-content:center}
.dot svg{width:60%;height:60%;stroke:#fff;stroke-width:3.4;fill:none}
.dot.blue{background:var(--blue)}
/* solid rings: 2px offset gap in the page color, then the ring itself */
.fr-ring{box-shadow:0 0 0 2px var(--ringbg),0 0 0 4px var(--fc,var(--blue))}
.fr-pulse{box-shadow:0 0 0 2px var(--ringbg),0 0 0 4px var(--fc,var(--blue));animation:pulsering 2.4s var(--sp) infinite}
@keyframes pulsering{
  0%{box-shadow:0 0 0 2px var(--ringbg),0 0 0 4px var(--fc,var(--blue)),0 0 0 4px color-mix(in srgb,var(--fc,#1d9bf0) 55%,transparent)}
  70%{box-shadow:0 0 0 2px var(--ringbg),0 0 0 4px var(--fc,var(--blue)),0 0 0 12px transparent}
  100%{box-shadow:0 0 0 2px var(--ringbg),0 0 0 4px var(--fc,var(--blue)),0 0 0 0 transparent}}
/* gradient rings: same offset, drawn under the badge */
.fr-gold,.fr-rainbow{box-shadow:0 0 0 2px var(--ringbg)}
.fr-gold::after,.fr-rainbow::after{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:2px;z-index:1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fr-gold::after{background:conic-gradient(from 0deg,#f5c518,#fff4b8,#d19b00,#f5c518)}
.fr-rainbow::after{background:conic-gradient(from 0deg,#f91880,#f5c518,#00ba7c,#1d9bf0,#a855f7,#f91880);
  animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fr-square{border-radius:30%}
.avgroup{display:flex}
.avgroup .avatar{margin-left:-8px;box-shadow:0 0 0 2px #000}
.avgroup .avatar::after{display:none}
.avgroup .avatar:first-child{margin-left:0}
.avgroup .more{margin-left:-8px;height:24px;min-width:24px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--tx-2);background:var(--surf-2);box-shadow:0 0 0 2px #000}

/* ---------- name effects ---------- */
.ne-gradient{background:linear-gradient(92deg,var(--nc),#fff 65%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ne-glow{color:var(--nc);text-shadow:0 0 14px color-mix(in srgb,var(--nc) 60%,transparent)}
.ne-mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:-.04em}

/* ---------- profile effects (banner overlays) ---------- */
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-glow{background:radial-gradient(60% 120% at 50% 120%,color-mix(in srgb,var(--nc) 45%,transparent),transparent 70%)}
.fx-grid{background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask:linear-gradient(180deg,#000,transparent)}
.fx-aurora{background:conic-gradient(from 180deg at 50% 120%,#1d9bf055,#a855f755,#00ba7c55,#1d9bf055);
  filter:blur(28px);opacity:.85;animation:bgmove 14s ease-in-out infinite;background-size:200% 200%}
@keyframes bgmove{50%{background-position:100% 50%}}
.p-particle{position:absolute;border-radius:50%;background:#fff;opacity:.85;animation:fall linear infinite}
.p-particle.sq{border-radius:1px}
@keyframes fall{from{transform:translateY(-20px) rotate(0)}to{transform:translateY(210px) rotate(320deg)}}
.p-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff;
  animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

/* ============================================================
   TIMELINE
   ============================================================ */
.tl-item{display:flex;gap:12px;padding:12px 17px;border-bottom:1px solid var(--line);transition:.15s;cursor:pointer}
.tl-item:hover{background:rgba(255,255,255,.028)}
.tl-body{flex:1;min-width:0}
.tl-head{display:flex;align-items:center;gap:5px;font-size:15px;margin-bottom:2px}
.tl-head .time{color:var(--tx-3);font-size:14.5px}
.tl-text{font-size:15px;line-height:1.42;white-space:pre-wrap;word-break:break-word}
.tl-media{margin-top:11px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.tl-media img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.acts{display:flex;align-items:center;gap:2px;margin-top:8px;margin-left:-8px;max-width:420px}
.act{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;color:var(--tx-3);
  font-size:13px;transition:.16s}
.act svg{width:17.5px;height:17.5px;stroke-width:1.7}
.act:hover{color:var(--tx)}
.act.cmt:hover{color:var(--blue);background:rgba(29,155,240,.12)}
.act.like:hover{color:var(--pink);background:rgba(249,24,128,.12)}
.act.liked{color:var(--pink)}
.act.share:hover{color:var(--green);background:rgba(0,186,124,.12)}
.composer{display:flex;gap:12px;padding:13px 17px;border-bottom:1px solid var(--line)}
.composer textarea{flex:1;resize:none;font-size:19px;min-height:52px;line-height:1.35;letter-spacing:-.02em}
.composer textarea::placeholder{color:var(--tx-3)}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.champ{position:relative;margin:14px 17px 12px;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:var(--surf);padding:22px 20px;display:flex;align-items:center;gap:18px}
.champ .bgfx{position:absolute;inset:0;background:radial-gradient(70% 130% at 12% 110%,rgba(245,197,24,.22),transparent 62%)}
.champ .crown{position:absolute;top:14px;right:16px;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--gold);text-transform:uppercase}
.champ .who{position:relative;z-index:2;flex:1;min-width:0}
.champ .score{position:relative;z-index:2;text-align:right}
.champ .score b{display:block;font-size:30px;font-weight:800;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.champ .score span{font-size:12.5px;color:var(--tx-3)}
.season{margin:0 17px 14px;padding:13px 15px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf)}
.season .bar{height:6px;margin-top:9px;max-width:none}
.lb{display:flex;align-items:center;gap:13px;padding:11px 17px;border-bottom:1px solid var(--line);transition:.15s;cursor:pointer}
.lb:hover{background:rgba(255,255,255,.035)}
.lb.you{background:rgba(29,155,240,.09);box-shadow:inset 3px 0 0 var(--blue)}
.rank{width:30px;text-align:center;font-size:15px;font-weight:800;color:var(--tx-3);font-variant-numeric:tabular-nums;
  letter-spacing:-.04em}
.rank.m1{color:var(--gold)}.rank.m2{color:#cfd4dc}.rank.m3{color:#cd7f32}
.bar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px;max-width:250px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--blue);width:0;transition:width .9s var(--sp)}
.bar i.gold{background:linear-gradient(90deg,#f5c518,#fff0a8)}
.pts{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.delta{font-size:12px;font-weight:700;color:var(--green)}
.delta.dn{color:var(--pink)}
.tier{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 17px 14px;align-items:end}
.pod{padding:15px 9px 13px;text-align:center;border-radius:var(--r-lg);background:var(--surf);border:1px solid var(--line);
  cursor:pointer;transition:.22s var(--sp);position:relative;overflow:hidden}
.pod:hover{transform:translateY(-3px);border-color:var(--line-2)}
.pod.first{padding-top:22px;padding-bottom:19px;border-color:rgba(245,197,24,.35)}
.pod.first::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 0%,rgba(245,197,24,.16),transparent 70%)}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 17px 14px}
.stat{padding:13px;border-radius:var(--r);background:var(--surf);border:1px solid var(--line);text-align:center}
.stat b{display:block;font-size:21px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{font-size:12.5px;color:var(--tx-3)}

/* ============================================================
   MESSAGES
   ============================================================ */
.chatlayout{display:flex;height:100%;min-height:0;width:100%}
.chatlist{width:348px;flex:0 0 348px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.chatlist .hd{padding:11px 13px;display:flex;gap:9px;border-bottom:1px solid var(--line)}
.citem{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;transition:.15s;border-bottom:1px solid var(--line)}
.citem:hover{background:rgba(255,255,255,.035)}
.citem.on{background:rgba(255,255,255,.06)}
.citem .n{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:5px}
.citem .p{font-size:13.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;margin-top:1px}
.citem .meta{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.citem .t{font-size:12px;color:var(--tx-3)}
.unread{min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center}
.convo{flex:1;display:flex;flex-direction:column;min-width:0}
.convo .hd{flex:0 0 auto;min-height:54px;display:flex;align-items:center;gap:11px;padding:8px 15px;
  border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.msgs{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:2px}
/* chat wallpapers */
.convo.themed{background-size:cover;background-position:center;background-attachment:local}
.convo.themed .hd,.convo.themed .inputbar{background:rgba(8,9,11,.55)}
.convo.themed .m:not(.out) .bub{background:rgba(20,22,27,.74);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);border-color:rgba(255,255,255,.12)}
.convo.themed .typing{background:rgba(20,22,27,.74);backdrop-filter:blur(14px)}
.convo.themed .m .who,.convo.themed .m .time{text-shadow:0 1px 3px rgba(0,0,0,.7)}
.m{display:flex;gap:9px;max-width:70%;align-items:flex-end;position:relative;align-self:flex-start}
.m.out{align-self:flex-end;flex-direction:row-reverse}
.m .bub{padding:9px 14px;border-radius:20px;font-size:15px;line-height:1.4;word-break:break-word;
  background:var(--surf-2);border:1px solid var(--line);animation:bub .3s var(--sp)}
@keyframes bub{from{opacity:0;transform:translateY(6px)}}
.m.out .bub{background:var(--blue);border-color:transparent;color:#fff}
.m:not(.out) .bub{border-bottom-left-radius:6px}
.m.out .bub{border-bottom-right-radius:6px}
.m .who{font-size:12px;color:var(--tx-3);margin:0 0 4px 6px}
.m.first{margin-top:14px}
.m .bub .mention{font-weight:600;color:var(--blue)}
.m.out .bub .mention{color:#fff;text-decoration:underline;text-underline-offset:2px}
.m .time{font-size:11px;color:var(--tx-3);align-self:flex-end;padding-bottom:4px;opacity:0;transition:.18s}
.m:hover .time{opacity:1}
.mbody{position:relative;min-width:0}
.m:not(.out) .react{right:auto;left:0}
.m .react{position:absolute;top:-16px;right:0;display:flex;gap:1px;padding:3px;border-radius:999px;
  background:var(--glass-2);backdrop-filter:var(--blur);border:1px solid var(--line-2);
  opacity:0;transform:translateY(4px);transition:.2s var(--sp);box-shadow:var(--sh)}
.m:hover .react{opacity:1;transform:none}
.m .react button{padding:2px 5px;border-radius:999px;font-size:13px;transition:.14s}
.m .react button:hover{background:rgba(255,255,255,.12);transform:scale(1.16)}
.m .rx{display:flex;gap:3px;margin-top:4px;margin-left:6px}
.m .rx span{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--surf-2);
  border:1px solid var(--line-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-weight:700;
  line-height:1;transition:.15s}
.m .rx span:hover{border-color:var(--blue);background:rgba(29,155,240,.12)}
.hit .bub{box-shadow:0 0 0 2px var(--blue)}
.typing{display:flex;gap:4px;padding:12px 15px;width:fit-content;border-radius:20px;border-bottom-left-radius:6px;
  background:var(--surf-2);border:1px solid var(--line);margin-top:14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--tx-3);animation:ty 1.3s infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes ty{0%,60%,100%{opacity:.3}30%{opacity:1;transform:translateY(-3px)}}
.inputbar{flex:0 0 auto;padding:11px 15px 13px;display:flex;gap:9px;position:relative;border-top:1px solid var(--line);
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.inputbar .inp{border-radius:999px;background:var(--surf)}
.mentionbox{position:absolute;bottom:68px;left:15px;border-radius:var(--r);overflow:hidden;min-width:230px;z-index:9;
  background:var(--glass-2);backdrop-filter:var(--blur);border:1px solid var(--line-2);box-shadow:var(--sh)}
.mentionbox div{padding:9px 13px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:9px}
.mentionbox div:hover{background:var(--blue)}
.jump{position:absolute;top:-46px;left:15px;right:15px;padding:9px 8px 9px 15px;border-radius:999px;cursor:pointer;
  font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:9px;background:var(--blue);box-shadow:var(--sh);
  animation:fade .25s var(--sp)}
.jump .jumpgo{opacity:.85}
.jumpx{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;
  background:rgba(0,0,0,.18);transition:.15s;flex:0 0 26px}
.jumpx:hover{background:rgba(0,0,0,.34)}

/* ============================================================
   SERVERS
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px;padding:14px 17px}
.scard{padding:17px;text-align:center;cursor:pointer;border-radius:var(--r-lg);background:var(--surf);
  border:1px solid var(--line);transition:.22s var(--sp)}
.scard:hover{transform:translateY(-3px);border-color:var(--line-2)}
.sicon{width:52px;height:52px;border-radius:15px;margin:0 auto 11px;font-size:20px;font-weight:700;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid var(--line-2)}
.chanlist{width:230px;flex:0 0 230px;border-right:1px solid var(--line);padding:13px 9px;overflow-y:auto}
.chan{padding:8px 11px;border-radius:999px;color:var(--tx-2);font-size:14.5px;cursor:pointer;display:flex;gap:7px;
  align-items:center;transition:.15s}
.chan:hover{background:rgba(255,255,255,.06);color:var(--tx)}
.chan.on{background:rgba(255,255,255,.1);color:var(--tx);font-weight:600}
.chan .hash{color:var(--tx-3)}
.memlist{width:220px;flex:0 0 220px;border-left:1px solid var(--line);padding:13px 11px;overflow-y:auto}

/* ============================================================
   PROFILE
   ============================================================ */
.banner{height:190px;position:relative;overflow:hidden}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.pinfo{padding:0 17px 12px;margin-top:-44px;position:relative;z-index:3}
.pavatar{display:inline-block;line-height:0}
.pavatar .avatar{--ringbg:#000;box-shadow:0 0 0 4px var(--ringbg)}
.pavatar .avatar.fr-ring,.pavatar .avatar.fr-pulse{box-shadow:0 0 0 4px var(--ringbg),0 0 0 6px var(--fc,var(--blue))}
.pavatar .avatar.fr-gold::after,.pavatar .avatar.fr-rainbow::after{inset:-6px;padding:2.5px}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.pgrid .t{aspect-ratio:1;overflow:hidden;background:var(--surf);cursor:pointer;position:relative}
.pgrid .t img{width:100%;height:100%;object-fit:cover;transition:.3s var(--sp)}
.pgrid .t:hover img{transform:scale(1.04)}
.pgrid .t .ov{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:.18s;display:grid;place-items:center;
  font-size:13px;font-weight:600}
.pgrid .t:hover .ov{opacity:1}
.feat{display:flex;gap:13px;align-items:center;padding:13px 15px;position:relative}
.feat+.feat::before{content:"";position:absolute;top:0;left:15px;right:0;height:1px;background:var(--line)}
.feat .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.07)}

/* customization picker */
.optgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.opt{padding:9px 6px 8px;border-radius:var(--r);border:1px solid var(--line);background:var(--surf);cursor:pointer;
  text-align:center;font-size:12px;font-weight:600;color:var(--tx-2);transition:.18s var(--sp);position:relative}
.opt:hover{border-color:var(--line-2);color:var(--tx)}
.opt.on{border-color:var(--blue);color:var(--tx);box-shadow:0 0 0 1px var(--blue)}
.opt .sw{height:34px;border-radius:9px;margin-bottom:7px;position:relative;overflow:hidden;background:var(--surf-2)}
.opt .lock{position:absolute;top:5px;right:6px;font-size:10px;color:var(--gold)}
.opt.locked{opacity:.55}
.swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.16s}
.swatch.on{border-color:#fff;transform:scale(1.1)}

/* ============================================================
   PREMIUM
   ============================================================ */
.prem-hero{margin:16px 17px 14px;padding:26px 22px;border-radius:var(--r-xl);border:1px solid var(--line);
  background:var(--surf);position:relative;overflow:hidden}
.prem-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 100% 0%,rgba(29,155,240,.18),transparent 60%),
             radial-gradient(70% 120% at 0% 100%,rgba(168,85,247,.14),transparent 60%)}
.prem-hero .in{position:relative;z-index:2}
.prem-hero h2{font-size:29px;font-weight:800;letter-spacing:-.045em;margin:4px 0 8px}
.prem-hero p{color:var(--tx-2);font-size:14.5px;line-height:1.55;max-width:400px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 17px 12px}
.plan{padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);cursor:pointer;
  transition:.2s var(--sp);position:relative}
.plan:hover{border-color:var(--line-2)}
.plan.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.plan .tagline{position:absolute;top:-9px;right:12px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  padding:2px 8px;border-radius:999px;background:var(--blue);color:#fff;text-transform:uppercase}
.plan .price{font-size:25px;font-weight:800;letter-spacing:-.04em;margin:6px 0 2px}
.plan .per{font-size:12.5px;color:var(--tx-3)}
.ck{display:flex;gap:11px;align-items:flex-start;padding:11px 0;font-size:14.5px;border-bottom:1px solid var(--line)}
.ck:last-child{border-bottom:none}
.ck .tick{width:19px;height:19px;border-radius:50%;background:rgba(29,155,240,.16);color:var(--blue);
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 19px;margin-top:1px}
.ck.off .tick{background:rgba(255,255,255,.06);color:var(--tx-3)}


/* ============================================================
   BLACKJACK
   ============================================================ */
.table{position:relative;margin:14px 17px;border-radius:var(--r-xl);border:1px solid var(--line);overflow:hidden;
  padding:20px 16px;display:flex;flex-direction:column;gap:14px;min-height:330px;justify-content:space-between}
.felt{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 0%,rgba(0,186,124,.16),transparent 62%),
  radial-gradient(120% 90% at 50% 100%,rgba(29,155,240,.10),transparent 60%),var(--surf)}
.felt::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:16px 16px}
.seat{position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;align-items:center}
.seatlbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);
  display:flex;align-items:center;gap:8px}
.tot{font-size:12.5px;font-weight:800;letter-spacing:-.02em;color:var(--tx);padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.09);text-transform:none;font-variant-numeric:tabular-nums}
.tot.bust{background:rgba(249,24,128,.18);color:var(--pink)}
.tot.win{background:rgba(0,186,124,.18);color:var(--green)}
.hand{display:flex;gap:7px;justify-content:center;min-height:96px;align-items:center;flex-wrap:wrap}

.pcard{width:66px;height:94px;border-radius:10px;position:relative;flex:0 0 auto;
  background:linear-gradient(160deg,#fbfbfd,#e7e9ef);color:#12141a;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.9),inset 0 1px 0 #fff;
  animation:dealin .38s var(--sp) backwards;animation-delay:calc(var(--i,0)*.09s)}
@keyframes dealin{from{opacity:0;transform:translateY(-26px) rotate(-7deg) scale(.9)}}
.pcard.r{color:#e0113a}
.pcard b{position:absolute;font-size:13px;font-weight:800;line-height:1;letter-spacing:-.04em;display:flex;
  flex-direction:column;align-items:center;gap:1px}
.pcard b i{font-style:normal;font-size:11px}
.pcard .tl{top:7px;left:7px}
.pcard .br{bottom:7px;right:7px;transform:rotate(180deg)}
.pcard .mid{position:absolute;inset:0;display:grid;place-items:center;font-size:31px;opacity:.92}
.pcard.back{background:
  repeating-linear-gradient(45deg,#1d3a63 0 6px,#16305a 6px 12px);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.9),inset 0 0 0 3px #0e1e3c,inset 0 0 0 4px rgba(255,255,255,.14)}
.pcard.back span{position:absolute;inset:9px;border-radius:6px;border:1px dashed rgba(255,255,255,.22)}
.pcard.noanim{animation:none}
.pcard.ghost{background:transparent;border:1.5px dashed var(--line-2);box-shadow:none;animation:none}

.tablemid{position:relative;z-index:2;display:flex;justify-content:center;min-height:34px;align-items:center}
.verdict{font-size:14.5px;font-weight:700;letter-spacing:-.02em;padding:7px 16px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);animation:pop .3s var(--sp)}
.verdict.quiet{color:var(--tx-3);font-weight:500;background:transparent;border-color:transparent}
.verdict.win{color:var(--green);border-color:rgba(0,186,124,.5);background:rgba(0,186,124,.14);
  box-shadow:0 0 26px -10px var(--green)}
.verdict.lose{color:var(--pink);border-color:rgba(249,24,128,.45);background:rgba(249,24,128,.12)}
.verdict.push{color:var(--tx-2)}

.betbar{margin:0 17px;padding:14px 15px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf)}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chip-btn{width:52px;height:52px;border-radius:50%;font-size:13px;font-weight:800;color:#fff;
  background:conic-gradient(from 45deg,#1d9bf0 0 25%,#0b5f96 0 50%,#1d9bf0 0 75%,#0b5f96 0);
  display:grid;place-items:center;transition:.18s var(--sp);box-shadow:0 6px 16px -8px rgba(0,0,0,.9)}
.chip-btn span{width:38px;height:38px;border-radius:50%;background:var(--surf-2);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);font-variant-numeric:tabular-nums}
.chip-btn:hover{transform:translateY(-3px) scale(1.04)}
.chip-btn:active{transform:scale(.94)}
.chip-btn.max{background:conic-gradient(from 45deg,#f5c518 0 25%,#8a6d00 0 50%,#f5c518 0 75%,#8a6d00 0)}
.chip-btn.max span{font-size:11px}
.chip-btn.off{opacity:.35;pointer-events:none}
.betbox{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--surf-2);min-width:118px}
.betbox b{font-size:16px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;flex:1}
.betbar .kbd{margin-left:2px;opacity:.7}

@media(max-width:520px){
  .pcard{width:56px;height:80px}
  .pcard .mid{font-size:26px}
  .table{padding:16px 12px;min-height:300px;margin:12px 14px}
  .betbar{margin:0 14px}
  .chip-btn{width:46px;height:46px;font-size:12px}
  .chip-btn span{width:34px;height:34px}
  .betbar .kbd{display:none}
}
/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);display:grid;place-items:center;
  z-index:100;animation:fade .2s var(--sp);padding:20px}
@keyframes fade{from{opacity:0}}
.modal{width:min(470px,100%);border-radius:var(--r-xl);padding:24px;max-height:86vh;overflow-y:auto;
  background:var(--surf);border:1px solid var(--line-2);box-shadow:var(--sh);animation:pop .32s var(--sp)}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(10px)}}
.modal h3{font-size:20px;font-weight:800;letter-spacing:-.035em;margin-bottom:5px}
.modal p.d{font-size:13.5px;color:var(--tx-3);margin-bottom:18px;line-height:1.55}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;font-size:14px;font-weight:500;background:var(--glass-2);
  backdrop-filter:var(--blur);border:1px solid var(--line-2);box-shadow:var(--sh);animation:tup .35s var(--sp)}
.toast .tdot{width:7px;height:7px;border-radius:50%;background:var(--green)}
@keyframes tup{from{opacity:0;transform:translate(-50%,14px)}}
.ctx{position:fixed;z-index:150;min-width:196px;padding:5px;border-radius:var(--r);background:var(--glass-2);
  backdrop-filter:var(--blur);border:1px solid var(--line-2);box-shadow:var(--sh);animation:pop .2s var(--sp)}
.ctx button{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:9px;font-size:14px;transition:.14s}
.ctx button:hover{background:rgba(255,255,255,.09)}
.ctx button.red{color:var(--pink)}
.ctx button.red:hover{background:rgba(249,24,128,.14)}
.cmdk{position:fixed;inset:0;z-index:180;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;
  justify-content:center;padding-top:15vh;animation:fade .18s}
.cmdbox{width:min(560px,92vw);height:fit-content;max-height:64vh;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surf);border:1px solid var(--line-2);box-shadow:var(--sh);animation:pop .3s var(--sp)}
.cmdbox input{width:100%;padding:17px 21px;font-size:17px;letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.cmdlist{max-height:46vh;overflow-y:auto;padding:6px}
.cmdrow{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;cursor:pointer;font-size:14.5px}
.cmdrow.sel{background:var(--blue);color:#fff}
.cmdrow .hint{margin-left:auto;font-size:12px;color:var(--tx-3)}
.cmdrow.sel .hint{color:rgba(255,255,255,.8)}
.cmdgrp{font-size:11px;font-weight:700;color:var(--tx-3);padding:11px 13px 5px;text-transform:uppercase;letter-spacing:.06em}

/* ============================================================
   MOBILE
   ============================================================ */
.tabbar{display:none}
.fab{display:none}
@media(max-width:980px){
  .rail,.side{display:none}
  main{max-width:none;border:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid var(--line)}
  .tabbar button{flex:1;padding:7px 0 5px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--tx-3);font-size:10px;font-weight:600;transition:.2s var(--sp);position:relative}
  .tabbar button svg{width:23px;height:23px;stroke-width:1.8}
  .tabbar button.on{color:var(--tx)}
  .tabbar button.on svg{stroke-width:2.3}
  .tabbar button:active{transform:scale(.9)}
  .tabbar .pill{position:absolute;top:2px;right:calc(50% - 17px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;
    background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center}
  .fab{display:grid;place-items:center;position:fixed;right:16px;bottom:78px;width:54px;height:54px;border-radius:50%;
    background:var(--blue);color:#fff;z-index:59;box-shadow:0 10px 26px -10px rgba(29,155,240,.9)}
  .fab svg{width:24px;height:24px;stroke-width:2.2}
  .fab:active{transform:scale(.92)}
  .wrap{padding-bottom:96px}
  .chatlist{width:100%;flex:1 0 100%}
  .chatlist.hide,.convo.hide{display:none}
  .chanlist,.memlist{display:none}
  .msgs{padding:14px 14px 20px}
  /* clears the fixed tab bar, and the home indicator underneath it */
  .inputbar{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))}
  .m{max-width:82%}
  .plans{grid-template-columns:1fr}
  .champ{flex-direction:column;text-align:center;gap:12px}
  .champ .score{text-align:center}
}
@media(max-width:520px){
  .pinfo .row:first-child{flex-wrap:wrap}
  .pacts{margin-left:0!important;width:100%;padding-top:10px;justify-content:flex-start}
  .pacts .btn{flex:1}
}
@media(max-width:400px){
  .toolbar .sub{display:none}
  .toolbar .wallet{display:none}
  .minseg button{padding:5px 8px;font-size:11.5px}
  .gr .t div{display:none}
  .tabbar button span{display:none}
  .tabbar button{padding:10px 0}
  .champ{padding:18px 14px}
  .statgrid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.rm *{animation:none!important;transition-duration:.05s!important}

/* profile meta + stat line (X layout) */
.pmeta{display:flex;flex-wrap:wrap;gap:14px;margin-top:11px;font-size:14px;color:var(--tx-3)}
.pmeta span{display:inline-flex;align-items:center;gap:5px}
.pmeta a{color:var(--blue);text-decoration:none}
.pmeta a:hover{text-decoration:underline}
.pstats{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-size:14.5px;color:var(--tx-3)}
.pstat{display:inline-flex;align-items:center;gap:4px}
.pstat b{color:var(--tx);font-weight:700;font-variant-numeric:tabular-nums}
.pstat[data-act]{cursor:pointer}
.pstat[data-act]:hover{color:var(--tx)}
.pstat[data-act]:hover b{text-decoration:underline}
.pstat.hidden{opacity:.42}
.pstat.hidden .ico{color:var(--tx-3)}

/* ============================================================
   GATE — invite key, Discord sign-in, username claim
   ============================================================ */
.gate{position:relative;z-index:3;min-height:100vh;min-height:100dvh;width:100%;display:grid;place-items:center;padding:24px 20px;
  grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow-y:auto}
.gatecard{width:min(430px,100%);max-width:100%;justify-self:center;align-self:center;padding:32px 26px 28px;border-radius:26px;
  border:1px solid var(--line);background:var(--surf);box-shadow:0 30px 80px -40px rgba(0,0,0,.95)}
.gatemark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--tx);color:#000;
  font-size:17px;font-weight:800;letter-spacing:-.06em;margin-bottom:18px}
.gatecard h1{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.15;overflow-wrap:anywhere}
.gatesub{font-size:14.5px;color:var(--tx-2);line-height:1.55;margin-top:9px}
.gatesub b{color:var(--tx)}
.gatelbl{display:block;font-size:12.5px;font-weight:600;color:var(--tx-3);margin:22px 0 7px}
.gateinp{font-size:16px;letter-spacing:.02em}
.gateinp.bare{border:none;background:transparent;padding:0;flex:1;box-shadow:none;letter-spacing:-.01em}
.gateinp.bare:focus{box-shadow:none}
.gatefield{display:flex;align-items:center;gap:6px;padding:11px 14px;border-radius:12px;border:1px solid var(--line-2);
  font-size:16px;transition:.18s}
.gatefield:focus-within{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.gatefield > span:first-child{color:var(--tx-3)}
.gatestat{font-size:12px;font-weight:700}
.gatestat.free{color:var(--green)}
.gatestat.used{color:var(--pink)}
.gatebtn{width:100%;margin-top:16px;padding:13px;font-size:15px}
.gatebtn.discord{background:#5865f2;color:#fff}
.gatebtn.discord:hover{background:#6b76f5}
.gatelink{display:block;width:100%;margin-top:14px;font-size:13.5px;color:var(--tx-3);text-align:center}
.gatelink:hover{color:var(--tx);text-decoration:underline}
.gatenote{font-size:12.5px;color:var(--tx-3);margin-top:12px;line-height:1.5;text-align:center}
.gateerr{margin-top:16px;padding:11px 14px;border-radius:12px;font-size:13.5px;
  background:rgba(249,24,128,.12);border:1px solid rgba(249,24,128,.35);color:#ff9dc4}
.gateok{margin-top:16px;padding:11px 14px;border-radius:12px;font-size:13.5px;
  background:rgba(0,186,124,.12);border:1px solid rgba(0,186,124,.35);color:#5ee3b3}
.gatefoot{font-size:12px;color:var(--tx-3);text-align:center;padding-bottom:8px}

.keytext{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:14px;font-weight:600;letter-spacing:.02em}

/* ============================================================
   COSMETICS — ported from keymaster-vault (rep-gated unlocks,
   particle backgrounds, aura colour, reputation, visitors)
   ============================================================ */
.opt .lock.score{background:rgba(245,197,24,.16);border:1px solid rgba(245,197,24,.4);color:var(--gold);
  border-radius:999px;padding:1px 6px;font-size:9px;font-weight:800;letter-spacing:.02em;top:6px;right:6px}
.hexin{width:98px;padding:6px 10px;font-family:ui-monospace,Menlo,monospace;font-size:13px;text-align:center}

/* extra frames */
.fr-dashed::after{content:"";position:absolute;inset:-4px;border-radius:inherit;
  border:2px dashed var(--fc,var(--blue));animation:spin 12s linear infinite}
.fr-orbit::after{content:"";position:absolute;inset:-5px;border-radius:inherit;
  border:1.5px solid color-mix(in srgb,var(--fc,#1d9bf0) 45%,transparent);animation:spin 6s linear infinite}
.fr-orbit::before{content:"";position:absolute;top:-7px;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--fc,var(--blue));box-shadow:0 0 10px var(--fc,var(--blue));
  transform-origin:3px calc(50% + 7px);animation:spin 6s linear infinite;z-index:2}
.fr-frost::after{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:2px;
  background:conic-gradient(from 0deg,#7dd3fc,#e0f2fe,#38bdf8,#7dd3fc);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 6px #7dd3fc88)}
.fr-ember::after{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:2px;
  background:conic-gradient(from 0deg,#ff7a1a,#ffd23f,#e0113a,#ff7a1a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3.5s linear infinite;
  filter:drop-shadow(0 0 7px #ff7a1a88)}

/* extra name styles */
.ne-chrome{background:linear-gradient(180deg,#fff,#9aa0ac 45%,#e9eaee 55%,#6b7280);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ne-pulse{color:var(--nc);animation:nepulse 2.2s ease-in-out infinite}
@keyframes nepulse{50%{text-shadow:0 0 18px currentColor;opacity:.82}}
.ne-rainbow{background:linear-gradient(92deg,#f91880,#f5c518,#00ba7c,#1d9bf0,#a855f7,#f91880);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nerain 6s linear infinite}
@keyframes nerain{to{background-position:300% 0}}

/* extra background effects */
.fx-neongrid{background-image:linear-gradient(rgba(29,155,240,.22) 1px,transparent 1px),
  linear-gradient(90deg,rgba(29,155,240,.22) 1px,transparent 1px);background-size:34px 34px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 70%);animation:gridmove 8s linear infinite}
@keyframes gridmove{to{background-position:0 34px}}
.p-star{position:absolute;border-radius:50%;background:#fff;animation:twinkle 3s ease-in-out infinite}
.p-fly{position:absolute;width:4px;height:4px;border-radius:50%;animation:drift 6s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0);opacity:.25}
  50%{transform:translate(14px,-16px);opacity:1}}
.p-rain{position:absolute;width:1.5px;background:linear-gradient(180deg,transparent,rgba(190,220,255,.75));
  animation:fall linear infinite}
.p-ember{position:absolute;border-radius:50%;animation:rise linear infinite;filter:blur(.3px)}
@keyframes rise{from{transform:translateY(0) scale(1);opacity:.9}
  to{transform:translateY(-190px) scale(.4);opacity:0}}
.p-code{position:absolute;top:-10%;font-family:ui-monospace,Menlo,monospace;font-size:10px;
  writing-mode:vertical-rl;letter-spacing:2px;opacity:.55;animation:fall linear infinite}
.p-particle.dust{filter:blur(.4px)}

/* reputation */
.rep{display:flex;align-items:center;gap:12px;margin-top:13px;padding:11px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surf)}
.repscore{min-width:52px;text-align:center;font-size:19px;font-weight:800;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--tx-2)}
.repscore.up{color:var(--green)}
.repscore.down{color:var(--pink)}
.repbtn{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--tx-3);
  border:1px solid var(--line);transition:.18s var(--sp)}
.repbtn:hover{color:var(--tx);border-color:var(--line-2);background:rgba(255,255,255,.05)}
.repbtn.on.up{color:var(--green);border-color:rgba(0,186,124,.5);background:rgba(0,186,124,.14)}
.repbtn.on.down{color:var(--pink);border-color:rgba(249,24,128,.5);background:rgba(249,24,128,.14)}

/* recent visitors */
.visitors{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px}
.visitor{flex:0 0 auto;width:78px;text-align:center;padding:9px 5px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surf);transition:.18s var(--sp)}
.visitor:hover{border-color:var(--line-2);transform:translateY(-2px)}
/* .avatar is a grid box with an explicit width, so the card's text-align does
   not reach it — it needs centring of its own, or it sits left of the name
   and the time that are centred underneath it */
.visitor .avatar{margin-inline:auto}
.visitor span{display:block;font-size:11.5px;font-weight:600;margin-top:6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.visitor i{display:block;font-style:normal;font-size:10px;color:var(--tx-3);margin-top:1px}


/* ============================================================
   LANDING PAGE
   ============================================================ */
/* ============================================================
   LANDING

   Quiet on purpose. One column of type, one picture, hairlines between
   sections and nothing filled in. No gradient on the heading, no blurred
   colour behind it, no cards: those are what a page looks like when the
   layout is doing the arguing instead of the words.

   The rhythm is one idea: a small label on the left, the thing itself on
   the right, the same measure every time.
   ============================================================ */
.lp{position:relative;z-index:3;max-width:1040px;margin:0 auto;padding:0 24px 0;
  overflow-x:clip;--lab:150px}

/* ---- nav ---- */
.lp-nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.lp-brand{display:flex;align-items:center}
.lp-navr{display:flex;align-items:center;gap:18px}
.lp-tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.lp-signin{border:0;background:none;color:var(--tx);font:inherit;font-size:14px;font-weight:500;
  cursor:pointer;padding:6px 0;border-bottom:1px solid var(--line-2);border-radius:0;
  transition:border-color .18s}
.lp-signin:hover{border-bottom-color:var(--tx)}

/* ---- hero ---- */
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:start;
  padding:76px 0 96px}
.lp-hero h1{font-size:clamp(31px,4.4vw,50px);line-height:1.08;font-weight:600;
  letter-spacing:-.032em;margin:0;color:var(--tx)}
.lp-sub{font-size:16px;line-height:1.7;color:var(--tx-2);margin:26px 0 0;max-width:46ch}

.lp-cta{margin-top:36px;max-width:400px}
.lp-cta .gatebtn{margin-top:0}
.lp-returning{font-size:13px;color:var(--tx-3);margin-top:12px;line-height:1.6}
.lp-keyline{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.lp-keytoggle{border:0;background:none;color:var(--tx-2);font:inherit;font-size:13.5px;
  cursor:pointer;padding:0;text-align:left;transition:color .18s}
.lp-keytoggle:hover{color:var(--tx)}
.lp-keybox{display:none;margin-top:14px}
.lp-keybox.open{display:block;animation:fade .25s var(--sp)}
.lp-note{font-size:12.5px;line-height:1.6;color:var(--tx-3);margin-top:10px}

.lp-hero-phone{display:grid;place-items:start center}

/* ---- a labelled row, which is the whole layout ---- */
.lp-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);gap:44px;
  padding:52px 0;border-top:1px solid var(--line)}
.lp-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-2);margin:4px 0 0}

.lp-list{margin:0;display:grid;gap:0}
.lp-item{display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.lp-item:last-child{border-bottom:0;padding-bottom:0}
.lp-item:first-child{padding-top:0}
.lp-list dt{font-size:15px;font-weight:600;color:var(--tx);margin:0}
.lp-list dd{font-size:14.5px;line-height:1.65;color:var(--tx-2);margin:0}

.lp-prose{max-width:58ch}
.lp-prose p{font-size:15.5px;line-height:1.75;color:var(--tx-2);margin:0}
.lp-prose p + p{margin-top:16px}
.lp-prose p.lp-quiet{font-size:13.5px;color:var(--tx-3)}
.lp-endbtn{max-width:320px}
.lp-end .lp-quiet{margin-top:14px}
.lp-inline{border:0;background:none;padding:0;font:inherit;color:var(--tx-2);cursor:pointer;
  border-bottom:1px solid var(--line-2)}
.lp-inline:hover{color:var(--tx)}

/* ---- foot ---- */
.lp-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:26px 0 40px;border-top:1px solid var(--line);font-size:12.5px;color:var(--tx-3)}
.lp-foot-logo{display:inline-flex;opacity:.55}

/* ---- the phone ---- */

/* ---- iPhone 15 Pro mockup (vanilla port of the shadcn component) ---- */
.iphone{position:relative;display:block;--s:.62;
  width:calc((var(--w) + var(--bezel)*2) * var(--s));
  height:calc((var(--h) + var(--bezel)*2) * var(--s))}
.iphone-frame{transform:scale(var(--s));transform-origin:top left;
  width:calc(var(--w) + var(--bezel)*2);height:calc(var(--h) + var(--bezel)*2);
  border-radius:calc(var(--radius) + var(--bezel));padding:var(--bezel);box-sizing:border-box;position:relative;
  background:linear-gradient(135deg,#1e2126 0%,#1c1e22 40%,#181a1d 100%);
  box-shadow:0 12px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.22),0 40px 90px -30px rgba(0,0,0,.9)}
.iphone-screen{width:100%;height:100%;border-radius:var(--radius);position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#0d1117,#000 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),inset 0 10px 20px rgba(0,0,0,.35),inset 0 -8px 16px rgba(0,0,0,.28)}
.iphone-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#000;border-radius:20px;
  z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.07)}
.iphone-island::after{content:"";position:absolute;right:11px;top:50%;transform:translateY(-50%);width:9px;height:9px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,#1b2733,#05070a 70%);box-shadow:inset 0 0 2px rgba(120,180,255,.5)}
.iphone-content{position:absolute;top:59px;right:0;bottom:34px;left:0;overflow:hidden;z-index:1;
  display:flex;flex-direction:column}
.iphone-screen::after{content:"";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:134px;height:5px;border-radius:3px;z-index:3;pointer-events:none;opacity:.9;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35))}
.lp-chat-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.lp-back{color:var(--tx-3);font-size:20px;line-height:1}
.lp-ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  font-size:14px;color:#fff}
.lp-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:4px}
.lp-status{font-size:11.5px;color:var(--green)}
.lp-dots{color:var(--tx-3);letter-spacing:1px}
.lp-msgs{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;
  justify-content:flex-end}
.lp-msg{max-width:78%;padding:9px 14px;border-radius:20px;font-size:14.5px;line-height:1.4;
  animation:fade .3s var(--sp)}
.lp-msg.them{align-self:flex-start;background:var(--surf-2);border:1px solid var(--line);
  border-bottom-left-radius:6px}
.lp-msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.lp-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 15px;border-radius:20px;
  border-bottom-left-radius:6px;background:var(--surf-2);border:1px solid var(--line)}
.lp-typing i{width:6px;height:6px;border-radius:50%;background:var(--tx-3);animation:ty 1.3s infinite}
.lp-typing i:nth-child(2){animation-delay:.16s}
.lp-typing i:nth-child(3){animation-delay:.32s}
.lp-bar{display:flex;align-items:center;margin:0 12px 12px;padding:11px 15px;border-radius:999px;
  background:var(--surf-2);border:1px solid var(--line);font-size:14px;color:var(--tx-3)}

@media(max-width:980px){
  .lp-hero{grid-template-columns:1fr;gap:48px;padding:52px 0 64px}
  .lp-hero-phone{order:-1;justify-items:center}
  .iphone{--s:.52}
  .lp-hero h1 br{display:none}
  .lp-row{grid-template-columns:1fr;gap:20px;padding:44px 0}
}
@media(max-width:560px){
  .lp{padding:0 18px}
  .iphone{--s:.44}
  .lp-hero{padding:36px 0 48px}
  .lp-sub{font-size:15.5px;margin-top:20px}
  .lp-item{grid-template-columns:1fr;gap:5px}
  .lp-foot{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---- logo ---- */
.logo-word{display:block;height:auto;filter:drop-shadow(0 2px 10px rgba(255,255,255,.10))}
.logo-mark{display:block}
.gatemark{background:none;border:none;box-shadow:none;width:auto;height:auto;padding:0;margin-bottom:14px}
.brand{padding:14px 10px 16px}
.lp-brand .logo-word{width:auto}
@media(max-width:560px){
  .lp-brand .logo-word{height:22px}
}




/* ============================================================
   COMMENTS — top replies first, the rest behind a toggle
   ============================================================ */
.cmts{margin-top:12px;padding-left:13px;border-left:2px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.cmts-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-3);padding:0 0 6px 2px}

.creply{display:flex;align-items:flex-start;gap:9px;padding:7px 8px 7px 2px;border-radius:12px;
  transition:background .15s}
.creply:hover{background:rgba(255,255,255,.03)}
.creply > .avatar{margin-top:1px}
.cmt-body{flex:1;min-width:0}
.cmt-head{display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.2}
.cmt-head .uname{font-size:13.5px;font-weight:700}
.cmt-head .handle{font-size:13px}
.cmt-time{font-size:12.5px;color:var(--tx-3)}
.cmt-text{font-size:14px;line-height:1.45;margin-top:2px;word-break:break-word;
  white-space:pre-wrap;color:var(--tx)}

.cmt-like{display:flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;
  font-size:12px;font-weight:650;color:var(--tx-3);transition:.16s var(--sp);flex:0 0 auto;
  align-self:flex-start;margin-top:1px;font-variant-numeric:tabular-nums}
.cmt-like svg{width:14px;height:14px}
.cmt-like:hover{color:var(--pink);background:rgba(249,24,128,.12)}
.cmt-like.on{color:var(--pink)}

.cmts-more{align-self:flex-start;margin-top:4px;padding:6px 10px;border-radius:999px;
  font-size:13px;font-weight:650;color:var(--blue);transition:.15s}
.cmts-more:hover{background:rgba(29,155,240,.12)}

@media(max-width:520px){
  .cmts{padding-left:10px}
  .creply{gap:8px;padding:6px 4px 6px 2px}
  .cmt-text{font-size:13.5px}
}

/* ============================================================
   PUBLIC PAGE EDITOR  (/page)
   Section heading outside the card, controls inside it — so the page
   reads as a list of topics rather than one long undifferentiated form.
   ============================================================ */
.biobar{flex:0 0 auto;z-index:6;display:flex;align-items:center;gap:8px;
  padding:11px 17px;background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--line)}
.biobar .dot{width:7px;height:7px;border-radius:99px;background:var(--tx-3);flex:0 0 auto}
.biobar .dot.live{background:var(--green);box-shadow:0 0 0 3px rgba(0,186,124,.18)}

/* tabs, the way the reference splits General from Layout from Links */
.bxtabs{display:flex;gap:4px;padding:10px 17px 0;border-bottom:1px solid var(--line);
  flex:0 0 auto;background:var(--bg)}
/* the screen runs full width, which means it brings its own scroller — the
   bar and the tabs stay put and the settings move under them */
.bxscroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.bxtabs button{padding:9px 14px 11px;font-size:14px;font-weight:600;color:var(--tx-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.16s}
.bxtabs button:hover{color:var(--tx-2)}
.bxtabs button.on{color:var(--tx);border-bottom-color:var(--blue)}

.bxwrap{padding:24px 22px 90px;max-width:820px;margin:0 auto}
.bxh{font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin:26px 2px 3px}
.bxwrap > .bxh:first-child{margin-top:0}
.bxsub{font-size:13px;color:var(--tx-3);margin:0 2px 11px;line-height:1.5}
.bxcard{border:1px solid var(--line);border-radius:16px;background:var(--surf);padding:18px}
.bxcard + .bxcard{margin-top:10px}

/* a labelled control */
.bxf{margin-bottom:15px}
.bxf:last-child{margin-bottom:0}
.bxl{font-size:12.5px;font-weight:500;color:var(--tx-2);margin:0 2px 7px;display:block}
.bxhint{font-size:12px;color:var(--tx-3);margin:7px 2px 0;line-height:1.5}

.bxin{width:100%;padding:11px 13px;border-radius:11px;font-size:14.5px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--tx);transition:.16s}
.bxin:focus{border-color:var(--line-2);background:var(--bg)}
.bxin::placeholder{color:var(--tx-3)}
textarea.bxin{resize:vertical;min-height:84px;line-height:1.55;font-family:inherit}

select.bxin{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-2) 50%),
                   linear-gradient(135deg,var(--tx-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 53%,calc(100% - 13px) 53%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.bxin option{background:var(--surf-2);color:var(--tx)}

/* a switch that says what it is, rather than only showing it */
.bxrow{display:flex;align-items:center;gap:14px}
.bxrow + .bxrow{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.bxrow .t{flex:1;min-width:0;font-size:14.5px;font-weight:600}
.bxrow .t small{display:block;font-size:12.5px;font-weight:400;color:var(--tx-3);
  margin-top:3px;line-height:1.45}
.bxpill{flex:0 0 auto;padding:9px 17px;border-radius:10px;font-size:13px;font-weight:650;
  cursor:pointer;transition:.16s;border:1px solid var(--line-2);background:transparent;color:var(--tx-3)}
.bxpill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.bxpill:hover{border-color:var(--tx-3)}
.bxpill.on:hover{background:var(--blue-2);border-color:var(--blue-2)}

/* value on the right of its own label, the way a setting with a number reads */
.bxsl{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 8px}
.bxsl b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tx)}
.bslide{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:var(--line-2);outline:none;cursor:pointer;margin:0}
.bslide::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;
  border-radius:999px;background:#fff;border:none;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.7)}
.bslide::-moz-range-thumb{width:17px;height:17px;border-radius:999px;background:#fff;
  border:none;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.7)}

/* colour: the swatch, the hex, and the picker hiding behind both */
.bxcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.bxcol{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:11px;background:var(--bg-2);border:1px solid var(--line);cursor:pointer;
  transition:.16s}
.bxcol:hover{border-color:var(--line-2)}
.bxcol i{width:22px;height:22px;border-radius:999px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16)}
.bxcol b{font-size:13px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase;letter-spacing:.01em}
.bxcol input[type="color"]{position:absolute;inset:0;opacity:0;cursor:pointer;
  width:100%;height:100%;border:none;padding:0}

.bxfile{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bxthumb{width:64px;height:40px;border-radius:9px;background-size:cover;background-position:center;
  border:1px solid var(--line);flex:0 0 auto;background-color:var(--bg-2)}

@media (max-width:700px){
  .bxwrap{padding:16px 14px 90px}
  .bxcard{padding:15px;border-radius:14px}
}

/* the platform picker — a grid of names that write a line for you */
.bxplat{display:flex;flex-wrap:wrap;gap:7px}
.bxplatb{padding:8px 13px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line);transition:.16s}
.bxplatb:hover{color:var(--tx);border-color:var(--line-2);background:var(--surf-2)}

/* the widget list — a grip, a name, where it goes, and which way it moves */
.bxwid{display:flex;flex-direction:column;gap:7px}
.bxwrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
  background:var(--bg-2);border:1px solid var(--line);cursor:grab;transition:.16s}
.bxwrow:hover{border-color:var(--line-2)}
.bxwrow.dragging{opacity:.4;cursor:grabbing}
.bxwrow.over{border-color:var(--blue);background:var(--surf-2)}
.bxgrip{color:var(--tx-3);font-size:15px;line-height:1;letter-spacing:-2px;flex:0 0 auto}
.bxwname{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bxplace{padding:6px 11px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;
  color:var(--tx-3);background:transparent;border:1px solid var(--line-2);
  transition:.16s;flex:0 0 auto;white-space:nowrap}
.bxplace:hover{color:var(--tx);border-color:var(--tx-3)}
.bxmv{width:26px;height:26px;border-radius:8px;font-size:13px;cursor:pointer;flex:0 0 auto;
  color:var(--tx-3);background:transparent;border:1px solid var(--line);transition:.16s}
.bxmv:hover{color:var(--tx);border-color:var(--line-2);background:var(--surf-2)}
@media (max-width:560px){
  .bxplace{font-size:11px;padding:6px 8px}
}

/* ============================================================
   GAMES — the hub, and Mines
   ============================================================ */
.glist{display:flex;flex-direction:column;gap:11px}
.gcard{display:flex;align-items:center;gap:15px;padding:15px;border-radius:18px;
  background:var(--surf);border:1px solid var(--line);cursor:pointer;transition:.18s var(--sp)}
.gcard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.gart{width:74px;height:74px;border-radius:15px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.gart.bj{grid-template-columns:1fr 1fr;gap:2px;font-size:20px;line-height:1;padding:9px}
.gsuit.r{color:#e0113a}
.gsuit.b{color:var(--tx-2)}
.gart.mn{grid-template-columns:repeat(3,1fr);gap:4px;padding:11px}
.gart.mn i{border-radius:4px;background:var(--line-2)}
.gart.mn i.boom{background:var(--pink);box-shadow:0 0 9px var(--pink)}
.gbody{flex:1;min-width:0}
.gname{font-size:17px;font-weight:800;letter-spacing:-.03em}
.gtag{font-size:12.5px;color:var(--tx-3);margin-top:2px}
.grow{display:flex;gap:18px;margin-top:10px}
.gstat b{display:block;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.gstat span{font-size:11.5px;color:var(--tx-3)}

.mwrap{position:relative;border-radius:20px;background:var(--surf);border:1px solid var(--line);
  padding:17px;transition:border-color .3s,box-shadow .4s}
.mwrap.live{border-color:var(--line-2)}
.mwrap.won{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 14px 50px -18px rgba(0,186,124,.5)}

.mhead{display:flex;align-items:center;gap:14px;margin-bottom:15px;min-height:52px}
.mmult{font-size:32px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  line-height:1;color:var(--tx-2);transition:color .3s}
.mwrap.live .mmult{color:var(--green)}
.mmult.win{color:var(--green)}
.mmult.lose{color:var(--pink)}
.mmult.bump{animation:mbump .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes mbump{0%{transform:scale(1)}38%{transform:scale(1.22)}100%{transform:scale(1)}}
.mnote{font-size:12.5px;color:var(--tx-3);margin-top:5px;transition:color .3s}
.mnote.win{color:var(--green)}
.mnote.lose{color:var(--pink)}
.mcash{margin-left:auto;padding:11px 18px;background:var(--green);border-color:var(--green)}
.mcash b{font-variant-numeric:tabular-nums;margin-left:5px}
.mcash:disabled{opacity:.55}

.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mtile{position:relative;aspect-ratio:1;border-radius:13px;cursor:pointer;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);color:var(--tx-3);
  display:grid;place-items:center;
  transition:transform .16s var(--sp),background .2s,border-color .2s,opacity .3s}
/* the quiet sheen that says a tile is still worth pressing */
.mtile::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.14),transparent 70%)}
.mtile:not(:disabled):hover{transform:translateY(-3px);border-color:var(--line-2);background:var(--surf-2)}
.mtile:not(:disabled):hover::before{opacity:1}
.mtile:disabled{cursor:default}
.mface{display:grid;place-items:center;width:46%;height:46%}
.mface svg{width:100%;height:100%}

/* dealt in, one after another, so the board arrives rather than appears */
.mgrid:not(.dealing) .mtile{animation:mdeal .34s cubic-bezier(.32,.72,0,1) backwards;
  animation-delay:calc(var(--i) * 18ms)}
@keyframes mdeal{from{opacity:0;transform:scale(.82) translateY(8px)}to{opacity:1;transform:none}}

.mtile.press{transform:scale(.93);background:var(--surf-2)}

.mtile.gem{background:rgba(0,186,124,.14);border-color:rgba(0,186,124,.55);color:var(--green)}
.mtile.pop .mface{animation:mgem .46s cubic-bezier(.34,1.56,.64,1)}
@keyframes mgem{0%{transform:scale(0) rotate(-40deg);opacity:0}
                60%{transform:scale(1.25) rotate(6deg);opacity:1}
                100%{transform:scale(1) rotate(0);opacity:1}}
/* a ring that leaves the tile as the gem lands */
.mtile.pop::after{content:"";position:absolute;inset:0;border-radius:13px;
  border:2px solid var(--green);animation:mring .6s ease-out forwards}
@keyframes mring{from{opacity:.85;transform:scale(.6)}to{opacity:0;transform:scale(1.7)}}

.mtile.bomb{background:rgba(249,24,128,.16);border-color:var(--pink);color:var(--pink)}
.mtile.blow{animation:mblow .5s ease-out}
.mtile.blow .mface{animation:mgem .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes mblow{0%{background:#fff;border-color:#fff;transform:scale(1.14)}
                 30%{background:rgba(249,24,128,.5)}
                 100%{background:rgba(249,24,128,.16);transform:scale(1)}}
.mtile.late{animation:mlate .34s cubic-bezier(.34,1.56,.64,1)}
@keyframes mlate{from{opacity:.2;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.mtile.dim{opacity:.28}
.mtile.cash{background:rgba(0,186,124,.3);border-color:var(--green);
  box-shadow:0 0 18px -2px rgba(0,186,124,.65)}

.mwrap.shake{animation:mshake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes mshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
                  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

.mrow{display:flex;align-items:center;gap:12px;margin-top:13px}
.mlbl{font-size:12.5px;color:var(--tx-3);width:52px;flex:0 0 auto}

@media (max-width:560px){
  .mgrid{gap:6px}
  .mtile{border-radius:10px}
  .mmult{font-size:26px}
  .gart{width:60px;height:60px}
  .grow{gap:13px}
}
@media (prefers-reduced-motion:reduce){
  .mgrid .mtile,.mtile.pop .mface,.mtile.blow,.mtile.blow .mface,.mtile.late,
  .mwrap.shake,.mmult.bump{animation:none}
  .mtile.pop::after{display:none}
  .mtile:not(:disabled):hover{transform:none}
}

/* ================= CASES =================
   The reel is one strip translated once, not a stack of keyframes — the
   deceleration curve is the whole effect, so it lives in the transition
   JS sets, and everything here only has to hold still while it moves. */


.cswrap{max-width:760px;margin:0 auto}

/* ---- tabs ---- */
.cstabs{display:flex;gap:6px;margin-bottom:16px;padding:4px;border-radius:13px;
  background:var(--surf);border:1px solid var(--line)}
.cstabs button{flex:1;padding:9px 12px;border:0;border-radius:9px;background:transparent;
  color:var(--tx-2);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:.16s var(--sp);display:flex;align-items:center;justify-content:center;gap:7px}
.cstabs button:hover{color:var(--tx)}
.cstabs button.on{background:var(--surf-2);color:var(--tx)}

/* ---- the ticker of recent pulls ---- */
.csticker{margin-bottom:16px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.csticker-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.csticker-row::-webkit-scrollbar{display:none}
.cspull{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:7px 12px 7px 7px;
  border-radius:11px;background:var(--surf);border:1px solid var(--line);
  border-left:2px solid var(--r)}
.cspull img{width:34px;height:26px;object-fit:contain}
.cspull-t b{display:block;font-size:12px;font-weight:700;white-space:nowrap;
  max-width:150px;overflow:hidden;text-overflow:ellipsis}
.cspull-t span{font-size:11px;color:var(--tx-3);white-space:nowrap}

/* ---- the grid of cases ---- */
.csgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:13px}
.cscase{position:relative;padding:20px 15px 17px;border-radius:19px;cursor:pointer;
  background:var(--surf);border:1px solid var(--line);color:var(--tx);font:inherit;
  text-align:center;transition:.2s var(--sp);overflow:hidden}
.cscase::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 88% at 50% 0%,var(--a),transparent 62%);opacity:.15}
.cscase::after{content:"";position:absolute;inset:0;border-radius:19px;pointer-events:none;
  box-shadow:0 0 0 0 transparent inset;transition:.2s}
.cscase:hover{transform:translateY(-3px)}
.cscase:hover::after{box-shadow:0 0 42px -8px var(--a) inset}
.cscase-art{position:relative;z-index:1;height:100px;margin-bottom:11px}
.cscase-name{position:relative;z-index:1;font-size:15px;font-weight:800;letter-spacing:-.02em}
.cscase-blurb{position:relative;z-index:1;font-size:11.5px;color:var(--tx-3);margin-top:3px;
  line-height:1.45;min-height:33px}
.cscase-price{position:relative;z-index:1;margin-top:10px;font-size:15px;font-weight:800;
  color:var(--a);font-variant-numeric:tabular-nums}
.cscase-price span{font-size:11px;color:var(--tx-3);font-weight:600}

/* ---- the opening panel ---- */
.cspanel{border-radius:20px;background:var(--surf);border:1px solid var(--line);padding:15px}
.cshead{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.csback{border:0;background:transparent;color:var(--tx-3);font:inherit;font-size:13px;
  font-weight:700;cursor:pointer;padding:6px 2px;white-space:nowrap}
.csback:hover{color:var(--tx)}
.cshead-t{flex:1;min-width:0;text-align:center}
.cshead-t b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.cshead-t span{font-size:11.5px;color:var(--tx-3)}
.cshead-p{font-size:15px;font-weight:800;color:var(--a);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.cshead-p span{font-size:11px;color:var(--tx-3);font-weight:600}

.csreel{position:relative;height:132px;border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg,#08090b,#0e0f13);border:1px solid var(--line)}
.csreel-strip{display:flex;gap:10px;height:100%;align-items:center;
  will-change:transform;transform:translate3d(0,0,0)}
.csreel-fade{position:absolute;top:0;bottom:0;width:74px;z-index:3;pointer-events:none}
.csreel-fade.l{left:0;background:linear-gradient(90deg,#08090b,transparent)}
.csreel-fade.r{right:0;background:linear-gradient(270deg,#08090b,transparent)}
.csreel-mark{position:absolute;left:50%;top:0;bottom:0;width:2px;z-index:4;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  transform:translateX(-1px);box-shadow:0 0 14px var(--gold);transition:box-shadow .3s}
.csreel-mark::before,.csreel-mark::after{content:"";position:absolute;left:50%;
  border:5px solid transparent;transform:translateX(-50%)}
.csreel-mark::before{top:0;border-top-color:var(--gold)}
.csreel-mark::after{bottom:0;border-bottom-color:var(--gold)}
.csreel.spinning .csreel-mark{box-shadow:0 0 24px var(--gold)}

/* ---- one skin, wherever it appears ---- */
.cstile{position:relative;flex:0 0 auto;border-radius:12px;overflow:hidden;background:#0d0e11;
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;
  justify-content:center}
.cstile::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--r);z-index:2}
.cstile-glow{position:absolute;left:50%;bottom:-34%;width:82%;height:64%;
  transform:translateX(-50%);background:radial-gradient(closest-side,var(--r),transparent);
  opacity:.42;filter:blur(10px);pointer-events:none}
.cstile img{position:relative;z-index:1;width:86%;height:58%;object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.55))}
.cstile-meta{position:relative;z-index:1;width:100%;padding:0 8px 7px;text-align:center}
.cstile-name{display:block;font-size:10.5px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cstile-wear{font-size:9.5px;color:var(--tx-3);font-weight:700;letter-spacing:.04em}
.cstile-val{position:absolute;top:6px;right:7px;z-index:3;font-size:10.5px;font-weight:800;
  color:var(--tx);background:rgba(0,0,0,.62);border-radius:6px;padding:2px 5px;
  font-variant-numeric:tabular-nums}
.cstile-st{position:absolute;top:6px;left:7px;z-index:3;font-size:9px;font-weight:800;
  color:var(--orange);background:rgba(0,0,0,.62);border-radius:5px;padding:2px 4px;
  letter-spacing:.03em}

.csreel-strip .cstile{width:104px;height:104px}
.csreel-strip .cstile img{width:88%;height:74%}

/* ---- open button ---- */
.csactions{display:flex;align-items:center;gap:12px;margin:14px 0 4px}
.csopen{flex:1;height:46px;font-size:15px;font-weight:800;letter-spacing:-.01em}
.csopen:disabled{opacity:.55;cursor:default}
.csbal{font-size:13px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ---- odds, printed. A gambling page that hides them is hiding something. ---- */
.csodds{display:flex;flex-direction:column;gap:7px;margin:16px 0 4px}
.csodd{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:11px;font-size:12px}
.csodd-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.csodd-bar i{display:block;height:100%;background:var(--r);border-radius:3px}
.csodd-label{color:var(--tx-2);font-weight:600}
.csodd-pct{color:var(--tx-3);font-variant-numeric:tabular-nums;font-weight:700}

/* ---- contents ---- */
.cscontents{margin-top:18px}
.csinside{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:9px}
.csinside .cstile{height:112px;width:100%}

/* ---- inventory ---- */
.csinv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:14px;background:var(--surf);border:1px solid var(--line);
  margin-bottom:12px;font-size:13px;color:var(--tx-2);flex-wrap:wrap}
.csinv-bar b{color:var(--tx);font-variant-numeric:tabular-nums}
.csinv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.csslot{position:relative;border-radius:14px;padding:3px;cursor:pointer;
  border:1.5px solid transparent;transition:.15s var(--sp)}
.csslot:hover{transform:translateY(-2px)}
.csslot.on{border-color:var(--blue);background:rgba(29,155,240,.09)}
.csslot .cstile{height:118px;width:100%}

.csempty{text-align:center;padding:48px 20px;color:var(--tx-3)}
.csempty-i{opacity:.4;margin-bottom:12px}
.csempty b{display:block;font-size:15px;color:var(--tx);margin-bottom:5px}
.csempty span{font-size:13px;line-height:1.5}

.csstats{display:flex;gap:12px;margin-top:16px}
.csstats .stat{flex:1}
.csnote{font-size:11.5px;color:var(--tx-3);line-height:1.6;margin-top:12px;text-align:center}

/* ---- the reveal ---- */
.modal.csmodal{padding:0;overflow:hidden;max-width:392px;border:0;background:transparent}
.csreveal{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);
  background:var(--surf)}
.csreveal-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.26}
.csreveal-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.34),rgba(10,10,12,.94))}
.csreveal-in{position:relative;z-index:1;padding:26px 22px 20px;text-align:center;
  animation:csrise .42s cubic-bezier(.2,.9,.2,1) both}
@keyframes csrise{from{opacity:0;transform:translateY(14px) scale(.96)}}
.csreveal-rar{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--r);padding:4px 11px;border-radius:20px;
  background:rgba(0,0,0,.35);border:1px solid var(--r)}
.csreveal-img{display:block;width:76%;margin:16px auto 4px;object-fit:contain;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.75))}
.csreveal-name{font-size:18px;font-weight:800;letter-spacing:-.03em;margin:8px 0 2px}
.csreveal-wear{font-size:12px;color:var(--tx-3);font-weight:600}
.csreveal-val{margin-top:12px;font-size:25px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:center;gap:8px}
.csreveal-val span{font-size:12px;color:var(--tx-3);font-weight:700}
.csreveal-val i{font-style:normal;font-size:13px;font-weight:700}
.csreveal-val i.up{color:var(--green)}
.csreveal-val i.down{color:var(--tx-3)}
.csreveal-btns{display:flex;gap:9px;margin-top:19px}
.csreveal-btns .btn{flex:1}

@media(max-width:560px){
  .csgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cscase-art{height:82px}
  .csreel{height:112px}
  .csreel-strip .cstile{width:88px;height:88px}
  .csreel-fade{width:48px}
  .csinside{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .csinside .cstile{height:96px}
  .csinv-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .csslot .cstile{height:104px}
  .cshead-t b{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){
  .csreveal-in{animation:none}
  .cscase:hover,.csslot:hover{transform:none}
}

/* ---- the drawn crate ----
   Two SVGs with the skins sandwiched between them, so the weapons stand
   behind the lid and in front of nothing — they read as coming out of the
   box rather than sitting on it. */
.csart{position:relative;width:100%;height:100%}
.csart-back,.csart-front{position:absolute;left:0;bottom:0;width:100%;height:auto;
  overflow:visible}
.csart-back{z-index:1}
.csart-front{z-index:3;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.csart-skin{position:absolute;z-index:2;object-fit:contain;
  filter:drop-shadow(0 7px 13px rgba(0,0,0,.75));transition:.28s var(--sp)}
.csart-skin.i0{left:50%;bottom:40%;width:62%;transform:translateX(-50%) rotate(-5deg)}
.csart-skin.i1{left:-2%;bottom:31%;width:50%;transform:rotate(-25deg)}
.csart-skin.i2{right:-2%;bottom:31%;width:50%;transform:rotate(23deg)}
.cscase:hover .csart-skin.i0{transform:translateX(-50%) rotate(-5deg) translateY(-7px)}
.cscase:hover .csart-skin.i1{transform:rotate(-31deg) translate(-5px,-5px)}
.cscase:hover .csart-skin.i2{transform:rotate(29deg) translate(5px,-5px)}

.gart.cs{position:relative;background:linear-gradient(160deg,#15171c,#08090b);
  padding:0;overflow:hidden}
.gart.cs .csart{padding:6px 4px 2px}

/* ---- the skin sheet ---- */
.modal.cssheetmodal{max-width:420px}
.cssheet-top{text-align:center;margin-bottom:4px}
.cssheet-shot{position:relative;height:118px;display:grid;place-items:center;margin-bottom:10px}
.cssheet-glow{position:absolute;left:50%;top:50%;width:70%;height:78%;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--r);opacity:.3;filter:blur(26px)}
.cssheet-shot img{position:relative;max-width:82%;max-height:118px;object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.7))}
.cssheet-name{font-size:17px;font-weight:800;letter-spacing:-.03em;margin:9px 0 2px}
.cssheet-from{font-size:11.5px;color:var(--tx-3)}

.cssheet-facts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:15px 0 4px}
.cssheet-facts>div{padding:11px 12px;border-radius:13px;background:var(--surf-2);
  border:1px solid var(--line);text-align:center}
.cssheet-facts b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cssheet-facts span{font-size:11px;color:var(--tx-3)}

.cssheet-lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);margin:18px 0 9px}
.cssheet-wears{display:flex;flex-direction:column;gap:6px}
.cswear{display:grid;grid-template-columns:26px 1fr 54px 34px 62px;align-items:center;
  gap:9px;font-size:12px}
.cswear-s{font-weight:800;color:var(--r);font-size:11px}
.cswear-n{color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cswear-bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.cswear-bar i{display:block;height:100%;background:var(--r);border-radius:3px;opacity:.75}
.cswear-c{color:var(--tx-3);text-align:right;font-variant-numeric:tabular-nums;font-size:11.5px}
.cswear-v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.cssheet-note{font-size:11px;color:var(--tx-3);line-height:1.6;margin-top:14px}

.cstile.click{cursor:pointer;transition:.15s var(--sp)}
.cstile.click:hover{transform:translateY(-2px);border-color:var(--r)}

@media(max-width:560px){
  .cswear{grid-template-columns:24px 1fr 40px 32px 56px;gap:7px;font-size:11.5px}
  .cssheet-shot{height:96px}
  .cssheet-shot img{max-height:96px}
}

/* ================= PASTED PICTURES =================
   The strip sits above the message box while something is held, so it is
   obvious a picture is going to be sent and obvious how to change your mind. */
.pastebar{display:flex;align-items:center;gap:11px;padding:8px 10px;margin-bottom:8px;
  border-radius:13px;background:var(--surf-2);border:1px solid var(--line);
  animation:pasterise .18s var(--sp) both}
@keyframes pasterise{from{opacity:0;transform:translateY(5px)}}
.pastebar img{width:44px;height:44px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line-2);flex:0 0 auto}
.pastebar-t{flex:1;min-width:0}
.pastebar-t b{display:block;font-size:12.5px;font-weight:700}
.pastebar-t span{font-size:11.5px;color:var(--tx-3)}
.pastebar-x{border:0;background:transparent;color:var(--tx-3);cursor:pointer;
  font-size:14px;padding:6px 8px;border-radius:8px;line-height:1}
.pastebar-x:hover{color:var(--tx);background:rgba(255,255,255,.06)}

/* a picture in a bubble */
.msgimg{display:block;max-width:100%;width:auto;max-height:320px;border-radius:12px;
  cursor:zoom-in;object-fit:cover}
.bub.pic{padding:0;overflow:hidden;background:transparent;border:0;box-shadow:none}
.bub.pic .msgimg{border:1px solid var(--line)}
.bub.haspic{display:flex;flex-direction:column;gap:8px}
.bub.haspic .msgimg{max-height:260px}

/* the viewer */
.modal.picmodal{padding:0;background:transparent;border:0;max-width:min(92vw,900px);
  overflow:hidden}
.bigpic{display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;
  border-radius:16px}

@media(max-width:560px){
  .msgimg{max-height:240px}
  .bub.haspic .msgimg{max-height:200px}
}

/* ---- a private profile ----
   Nothing personal is sent for one, so this is the whole page rather than a
   cover over a page that is still underneath. */
.privlock{margin-top:20px;padding:26px 22px;border-radius:18px;text-align:center;
  background:var(--surf);border:1px solid var(--line)}
.privlock-i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 13px;
  border-radius:50%;background:var(--surf-2);border:1px solid var(--line-2);color:var(--tx-3)}
.privlock b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.privlock span{display:block;font-size:13px;color:var(--tx-3);line-height:1.6;max-width:340px;margin:0 auto}

/* the author of a post is a link to the author, inside an article that is a
   link to the post — contents, so neither wrapper disturbs the layout */
.tl-au{display:contents}
.tl-item .avatar{cursor:pointer}
.tl-head .uname,.tl-head .handle{cursor:pointer}
.tl-head .uname:hover{text-decoration:underline}

/* ---- Collection ---- */
.ownname{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;
  background:var(--surf);border:1px solid var(--line);margin-bottom:12px}
.ownname-t{flex:1;min-width:0}
.ownname-h{font-size:14px;color:var(--tx-3);margin-top:2px}
.ownname-d{font-size:12.5px;color:var(--tx-3);line-height:1.6;margin:0 3px 20px}
.gr.roleoff{opacity:.5}

/* ---- the cropper ---- */
.modal.cropmodal{max-width:400px}
.crop-h{margin:0 0 14px}
.crop-stage{position:relative;margin:0 auto;overflow:hidden;border-radius:14px;
  background:#000;cursor:grab;touch-action:none;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;
  will-change:transform;pointer-events:none;-webkit-user-drag:none}
.crop-mask{position:absolute;inset:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.crop-mask.round{border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,
  0 0 0 999px rgba(0,0,0,.55)}
.crop-zoom{display:flex;align-items:center;gap:11px;margin:14px 2px 0;color:var(--tx-3)}
.crop-zoom input{flex:1;accent-color:var(--blue)}
.crop-d{font-size:12px;color:var(--tx-3);line-height:1.55;margin:9px 2px 0;text-align:center}

/* ---- one post, and everything said under it ---- */
.pvwrap{padding-bottom:20px}
.pvpost{padding:16px 17px 4px;border-bottom:1px solid var(--line)}
.pvp-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.pvp-t{font-size:17px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.pvp-m{margin-top:13px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.pvp-m img{display:block;width:100%;height:auto;cursor:zoom-in}
.pvp-s{display:flex;gap:18px;padding:14px 2px;margin-top:4px;border-top:1px solid var(--line)}
.pvp-n{font-size:13.5px;color:var(--tx-3)}
.pvp-n b{color:var(--tx);font-weight:700}
.pvp-n.click{cursor:pointer}
.pvp-n.click:hover b{text-decoration:underline}
.pvp-a{display:flex;gap:6px;padding:4px 0 10px;border-top:1px solid var(--line)}
.pvp-a .act{flex:1;justify-content:center;gap:8px;font-size:13.5px}

.pvbox{padding:13px 17px;border-bottom:1px solid var(--line);background:var(--surf)}
.pvbox-to{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx-3);
  margin-bottom:9px}
.pvbox-to b{color:var(--blue)}
.pvbox-to button{margin-left:auto;border:0;background:transparent;color:var(--tx-3);
  cursor:pointer;font-size:13px;padding:2px 6px;border-radius:7px}
.pvbox-to button:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.pvbox-r{display:flex;align-items:center;gap:10px}
.pvbox-r .inp{flex:1;border-radius:999px}

.pvlist{display:flex;flex-direction:column}
.pvc{position:relative;display:flex;gap:11px;padding:13px 17px;
  border-bottom:1px solid var(--line);transition:background .18s}
/* A reply used to sit 23px further in than the comment above it and nothing
   else, which reads as the next comment rather than an answer to the last
   one. It is indented properly now and carries a line back up to whatever it
   is answering, so a thread looks like one at a glance. */
.pvc.sub{padding-left:62px;background:rgba(255,255,255,.018)}
.pvc.sub::before{content:"";position:absolute;left:33px;top:-1px;bottom:50%;
  width:2px;background:var(--line-2)}
.pvc.sub::after{content:"";position:absolute;left:33px;top:50%;width:16px;height:2px;
  background:var(--line-2);border-radius:0 2px 2px 0}
/* the last reply stops the line rather than running it into the next comment */
.pvc.sub:not(:has(+ .pvc.sub))::before{bottom:50%}
.pvc.sub:has(+ .pvc.sub)::before{bottom:0}
.pvc.on{background:rgba(29,155,240,.07)}
.pvc-b{flex:1;min-width:0}
.pvc-h{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pvc-t{font-size:14.5px;line-height:1.5;margin-top:3px;white-space:pre-wrap;word-break:break-word}
.pvc-a{display:flex;gap:14px;margin-top:7px}
.pvc-a .act{font-size:12.5px;gap:6px;padding:3px 0}
.pvc-a .act svg{width:15px;height:15px}
.pvc-a .act.del:hover{color:var(--pink)}

@media(max-width:560px){
  .pvc.sub{padding-left:54px}
  .pvc.sub::before,.pvc.sub::after{left:29px}
  .pvc.sub::after{width:14px}
  .pvp-t{font-size:16px}
}

/* ---- playlist rows in the page editor ---- */
.bxtrks{display:flex;flex-direction:column;gap:9px}
.bxtrk{display:flex;gap:10px;padding:11px;border-radius:14px;
  background:var(--surf-2);border:1px solid var(--line)}
.bxtrk-n{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:var(--line);color:var(--tx-3);font-size:11.5px;font-weight:800}
.bxtrk-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.bxtrk-r{display:flex;gap:7px;align-items:center}
.bxtrk-r .bxin{flex:1;min-width:0}
.bxtrk-r .btn{flex:0 0 auto;white-space:nowrap}
.bxtrk-art{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background-size:cover;
  background-position:center;border:1px solid var(--line-2)}
.bxtrk-x{flex:0 0 auto;align-self:flex-start;border:0;background:transparent;color:var(--tx-3);
  cursor:pointer;font-size:13px;padding:4px 6px;border-radius:8px;line-height:1}
.bxtrk-x:hover{color:var(--pink);background:rgba(255,255,255,.06)}
@media(max-width:560px){
  .bxtrk-r{flex-wrap:wrap}
  .bxtrk-r .btn{width:100%}
}

/* a link somebody wrote — visibly one, and confirmed before it opens */
.ln{color:var(--blue);cursor:pointer;text-decoration:none;word-break:break-word}
.ln:hover{text-decoration:underline}
.mention{font-weight:600;color:var(--blue);cursor:pointer}
.mention:hover{text-decoration:underline}

/* ---- notifications ---- */
.bellbtn{position:relative}
.bdot{position:absolute;top:-2px;right:-3px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--blue);color:#fff;font-size:9.5px;font-weight:800;
  display:grid;place-items:center;line-height:1}
.notes{display:flex;flex-direction:column}
.note{display:flex;align-items:flex-start;gap:12px;padding:14px 17px;
  border-bottom:1px solid var(--line);transition:background .16s}
.note.click{cursor:pointer}
.note.click:hover{background:rgba(255,255,255,.03)}
.note.new{background:rgba(29,155,240,.06)}
.note.new:hover{background:rgba(29,155,240,.1)}
.note-b{flex:1;min-width:0}
.note-t{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:14px}
.note-w{color:var(--tx-2)}
.note-p{font-size:13px;color:var(--tx-3);margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.note-i{flex:0 0 auto;color:var(--ic);margin-top:2px}

/* video in a post, and a picture in a reply */
.tl-media video,.pvp-m video{display:block;width:100%;max-height:420px;background:#000;
  border-radius:inherit}
.pvc-img{display:block;max-width:100%;max-height:280px;border-radius:12px;margin-top:7px;
  border:1px solid var(--line);cursor:zoom-in}
/* the name list belongs to whichever box is being typed in */
#mbox{position:absolute;bottom:100%;left:0;z-index:20}

/* ============================================================
   LARP mode.

   Its own proportions, not 20PM's with things switched off: a 275px rail
   of icon-and-label rows, a 600px column, a 350px sidebar, hairline
   dividers instead of cards, and one accent. Nothing below draws a
   wallet, a rank, a score or a badge, because a social network has none
   of those and the point of the mode is that it stops looking like this
   one.
   ============================================================ */
body.larpmode{
  --lblue:#1d9bf0; --lblue-2:#1a8cd8;
  --lline:#2f3336; --lmute:#71767b; --ltx:#e7e9ea;
  --lhover:rgba(231,233,234,.03); --lhover-2:rgba(231,233,234,.1);
  --lpink:#f91880; --lgreen:#00ba7c;
}
body.larpmode[data-theme="dim"]{--lline:#38444d;--lmute:#8899a6;--ltx:#f7f9f9}
body.larpmode[data-theme="navy"]{--lline:#243447;--lmute:#8899a6;--ltx:#f7f9f9}

.app.larp{display:flex;justify-content:center;height:100%;overflow:hidden;position:relative;z-index:1}
.larpmain{flex:0 1 600px;min-width:0;max-width:600px;display:flex;flex-direction:column;
  overflow:hidden;border-left:1px solid var(--lline);border-right:1px solid var(--lline)}
.app.larp .scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.lwrap{padding-bottom:120px}

/* ---- rail ---- */
.lrail{flex:0 0 275px;width:275px;display:flex;flex-direction:column;gap:2px;
  padding:6px 10px 14px;overflow-y:auto;overflow-x:hidden}
.lgrow{flex:1}
.lmark{width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--ltx);cursor:pointer;margin:2px 0 4px;flex:0 0 auto}
.lmark:hover{background:var(--lhover-2)}
.lmark svg{width:28px;height:28px}
.lnavbtn{display:flex;align-items:center;gap:17px;padding:11px 13px;border-radius:999px;
  color:var(--ltx);font-size:20px;font-weight:400;letter-spacing:-.01em;width:fit-content;
  max-width:100%;transition:background .15s}
.lnavbtn:hover{background:var(--lhover-2)}
.lnavbtn.on{font-weight:750}
.lnavbtn svg{width:26px;height:26px;flex:0 0 auto}
.lnavbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the count that sits on the bell */
.lnav-i{position:relative;display:inline-flex;flex:0 0 auto}
.lnav-n{position:absolute;top:-4px;left:12px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--lblue);color:#fff;font-size:11px;font-weight:700;
  line-height:18px;text-align:center;border:2px solid var(--bg);box-sizing:content-box}

/* bookmark and share ride together on the right, the rest spread across */
.lacts-end{display:inline-flex;align-items:center;gap:12px}
.lact.share:hover{color:var(--lblue)}
.lact.share:hover .lact-i{background:rgba(29,155,240,.12)}

/* ---- notifications ---- */
.lnote-r{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--lline);
  transition:background .12s}
.lnote-r.click{cursor:pointer}
.lnote-r.click:hover{background:var(--lhover)}
.lnote-i{flex:0 0 auto;width:32px;display:flex;justify-content:flex-end;padding-top:2px}
.lnote-i svg{width:29px;height:29px}
.lnote-i.like{color:var(--lpink)}
.lnote-i.repost{color:var(--lgreen)}
.lnote-i.follow,.lnote-i.reply{color:var(--lblue)}
.lnote-b{flex:1;min-width:0}
.lnote-av{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.lnote-av span{cursor:pointer;display:inline-flex}
.lnote-t{font-size:15px;line-height:1.35;color:var(--ltx)}
.lnote-t b{font-weight:700}
.lnote-q{font-size:15px;line-height:1.35;color:var(--lmute);margin-top:4px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.lbtn{background:var(--lblue);color:#fff;font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:10px 20px;border-radius:999px;transition:background .15s;white-space:nowrap}
.lbtn:hover{background:var(--lblue-2)}
.lbtn:disabled{opacity:.5;cursor:default}
.lbtn.ghost{background:transparent;color:var(--ltx);border:1px solid var(--lline)}
.lbtn.ghost:hover{background:rgba(244,33,46,.1);border-color:rgba(244,33,46,.4);color:#f4212e}
.lbtn.sm{padding:6px 16px;font-size:14px}
.lbtn.wide{width:100%;margin-top:14px}
.lbtn.big{padding:15px 20px;font-size:17px;margin-top:12px}

.lme{display:flex;align-items:center;gap:11px;padding:10px;border-radius:999px;cursor:pointer;
  transition:background .15s;margin-top:8px}
.lme:hover{background:var(--lhover-2)}
.lme-t{flex:1;min-width:0}
.lme-n{display:flex;align-items:center;gap:3px;font-size:15px;font-weight:700;color:var(--ltx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lme-h{font-size:14px;color:var(--lmute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The one thing that says where you are. Small, always in the same place,
   and never on a post — a person needs to know, a timeline does not. */
.lchip{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 7px;border-radius:6px;color:var(--lmute);border:1px solid var(--lline)}
.lchip.on{color:var(--lblue);border-color:rgba(29,155,240,.5)}
.lme-more{flex:0 0 auto;color:var(--lmute);display:inline-flex}
.lme-more svg{width:17px;height:17px}

/* ---- header ---- */
.lhead{flex:0 0 auto;position:sticky;top:0;z-index:8;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lline)}
.lhead-r{display:flex;align-items:center;gap:18px;padding:0 16px;min-height:53px}
.lhead-t{flex:1;min-width:0}
.lhead h1{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ltx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.lhead h1 .lcheck{width:19px;height:19px}
.lsub{font-size:13px;color:var(--lmute);margin-top:-1px}
.liconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--ltx);transition:background .15s;flex:0 0 auto}
.liconbtn:hover{background:var(--lhover-2)}
.liconbtn svg{width:20px;height:20px}
.ltabs{display:flex}
.ltabs button{flex:1;padding:0;height:53px;color:var(--lmute);font-size:15px;font-weight:500;
  transition:background .15s;display:flex;align-items:center;justify-content:center}
.ltabs button:hover{background:var(--lhover-2)}
.ltabs button span{position:relative;display:inline-flex;align-items:center;height:100%}
.ltabs button.on{color:var(--ltx);font-weight:700}
.ltabs button.on span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  border-radius:4px;background:var(--lblue)}

/* ---- a post ---- */
.lpost{display:block;padding:12px 16px 4px;border-bottom:1px solid var(--lline);
  cursor:pointer;transition:background .12s}
.lpost:hover{background:var(--lhover)}
.lpost.big{cursor:default;padding-bottom:0}
.lpost.big:hover{background:transparent}
.lpost-row{display:flex;gap:12px}
.lpost.big .lpost-row{flex-direction:column;gap:0}
.lpost-av{flex:0 0 auto;cursor:pointer}
.lpost.big .lpost-av{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lpost-main{flex:1;min-width:0}
.lav{border-radius:50%;object-fit:cover;display:inline-block;flex:0 0 auto;background:var(--surf-2)}
.lav-i{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

.lboost{display:flex;align-items:center;gap:10px;color:var(--lmute);font-size:13px;
  font-weight:700;padding:0 0 4px 34px}
.lboost svg{width:16px;height:16px}

.lpost-head{display:flex;align-items:center;gap:4px;min-width:0}
.lpost.big .lpost-head{gap:4px}
.lname{font-size:15px;font-weight:700;color:var(--ltx);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:60%;cursor:pointer}
.lname:hover{text-decoration:underline}
.lhandle,.ldot,.ltime{font-size:15px;color:var(--lmute);white-space:nowrap}
.lhandle{overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.lcheck{width:18px;height:18px;flex:0 0 auto}
.lmore{margin-left:auto;width:30px;height:30px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:50%;color:var(--lmute);flex:0 0 auto}
.lmore:hover{background:rgba(29,155,240,.12);color:var(--lblue)}
.lmore svg{width:17px;height:17px}

/* the big view puts the name on its own line, as every one of them does */
.lpost.big .lname{font-size:16px}
.lpost.big .lpost-av .lname-wrap{min-width:0}
.lreplyto{font-size:14px;color:var(--lmute);margin-top:1px}
.ltext{font-size:15px;line-height:1.35;color:var(--ltx);margin-top:2px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.lpost.big .ltext{font-size:22px;line-height:1.3;margin-top:10px}
.ltext.sm{font-size:14px;margin-top:3px}
.lref{color:var(--lblue);cursor:pointer}
.lref:hover{text-decoration:underline}
.ltext a{color:var(--lblue)}

.lmedia{margin-top:12px;border-radius:16px;overflow:hidden;border:1px solid var(--lline);
  position:relative;max-height:520px}
.lmedia img,.lmedia video{display:block;width:100%;max-height:520px;object-fit:cover;background:#000}
.lmedia.sm{border-radius:12px;max-height:260px}
.lmedia.sm img{max-height:260px}
.lmedia.edit img{max-height:300px}
.lmedia-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;font-size:14px;line-height:1}

.lquote{margin-top:12px;border:1px solid var(--lline);border-radius:16px;padding:10px 12px;
  cursor:pointer;transition:background .12s}
.lquote:hover{background:var(--lhover)}
.lquote.gone{color:var(--lmute);font-size:14px;cursor:default}
.lquote-head{display:flex;align-items:center;gap:4px;min-width:0}
.lquote-head .lav{width:20px;height:20px}
.lquote-head .lname,.lquote-head .lhandle,.lquote-head .ltime{font-size:14px}
.lquote-head .lcheck{width:15px;height:15px}

.lstamp{font-size:15px;color:var(--lmute);margin-top:14px}
.lbig-counts{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;padding:14px 0 0;
  border-top:1px solid var(--lline);font-size:14px;color:var(--lmute)}
.lbig-counts b{color:var(--ltx);font-weight:700}

.lacts{display:flex;align-items:center;justify-content:space-between;
  max-width:425px;margin-top:10px;padding-bottom:6px}
.lpost.big .lacts{max-width:none;margin-top:6px;padding:4px 0 6px;
  border-top:1px solid var(--lline);justify-content:space-around}
.lact{display:inline-flex;align-items:center;gap:4px;color:var(--lmute);font-size:13px;
  background:none;transition:color .15s}
.lact-i{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;margin:-7px;transition:background .15s}
.lact svg{width:18.5px;height:18.5px}
.lact-n{font-variant-numeric:tabular-nums;min-width:8px;padding-left:8px}
.lact.reply:hover{color:var(--lblue)}      .lact.reply:hover .lact-i{background:rgba(29,155,240,.12)}
.lact.repost:hover,.lact.repost.on{color:var(--lgreen)}
.lact.repost:hover .lact-i{background:rgba(0,186,124,.12)}
.lact.like:hover,.lact.like.on{color:var(--lpink)}
.lact.like:hover .lact-i{background:rgba(249,24,128,.12)}
.lact.mark:hover,.lact.mark.on{color:var(--lblue)}
.lact.mark:hover .lact-i{background:rgba(29,155,240,.12)}
.lact.views{cursor:default;gap:4px}
.lact.views svg{width:17px;height:17px}

/* ---- composer ---- */
.lcompose{display:flex;gap:12px;padding:12px 16px 4px;border-bottom:1px solid var(--lline)}
.lcompose-main{flex:1;min-width:0}
.lcompose textarea{width:100%;min-height:52px;max-height:340px;resize:none;background:none;
  border:none;outline:none;color:var(--ltx);font-size:20px;line-height:1.35;padding:12px 0 4px}
.lcompose textarea::placeholder{color:var(--lmute)}
.lcompose-bar{display:flex;align-items:center;gap:4px;padding:6px 0 10px;
  border-top:1px solid var(--lline);margin-top:6px}
.lcompose-bar .lbtn{margin-left:auto}
.lcompose .liconbtn{color:var(--lblue)}
.lcompose .liconbtn:hover{background:rgba(29,155,240,.12)}
.lwhen{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;
  color:var(--lblue);background:rgba(29,155,240,.1);padding:4px 10px;border-radius:999px}
.lwhen svg{width:15px;height:15px}
.lwhen button{color:var(--lblue);font-size:12px;line-height:1}

/* ---- profile ---- */
.lbanner{height:200px;background:linear-gradient(140deg,#16202a,#0b0f14);
  background-size:cover;background-position:center}
.lprof{padding:12px 16px 0;border-bottom:1px solid var(--lline)}
.lprof-top{display:flex;align-items:flex-start;justify-content:space-between;
  margin-top:-82px;margin-bottom:12px;gap:12px}
.lprof-av .lav{border:4px solid var(--bg);border-radius:50%}

.lprof-btns{display:flex;align-items:center;gap:8px;margin-top:86px}
.lround{width:36px;height:36px;border-radius:50%;border:1px solid var(--lline);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ltx);
  transition:background .15s;flex:0 0 auto}
.lround:hover{background:var(--lhover-2)}
.lround svg{width:19px;height:19px}
/* the follow pill is white and solid until it is following, then an outline
   that turns into Unfollow under the pointer — the way every one of them does */
.lbtn.solid{background:var(--ltx);color:var(--bg)}
.lbtn.solid:hover{background:#d7dbdd}
.lbtn.following .lf-un{display:none}
.lbtn.following:hover .lf-is{display:none}
.lbtn.following:hover .lf-un{display:inline}
.lbtn .lf-un{display:none}
.lprof-mutual{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--lmute);
  margin:-4px 0 14px;line-height:1.4}
.lmut-av{display:inline-flex}
.lmut-av .lav{border:2px solid var(--bg);margin-right:-8px}
.lprof-meta span{display:inline-flex;align-items:center;gap:5px}
.lprof-meta svg{width:18.5px;height:18.5px;color:var(--lmute);flex:0 0 auto}
.lprof-name{display:flex;align-items:center;gap:5px;font-size:20px;font-weight:800;
  letter-spacing:-.02em;color:var(--ltx)}
.lprof-name .lcheck{width:20px;height:20px}
.lprof-handle{font-size:15px;color:var(--lmute);margin-top:1px}
.lprof-bio{font-size:15px;line-height:1.35;color:var(--ltx);margin-top:12px;white-space:pre-wrap}
.lprof-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:15px;color:var(--lmute)}
.lprof-counts{display:flex;gap:20px;margin:12px 0 14px;font-size:14px;color:var(--lmute)}
.lprof-counts span{cursor:pointer}
.lprof-counts span:hover{text-decoration:underline}
.lprof-counts b{color:var(--ltx);font-weight:700}

/* ---- rows, cards, sidebar ---- */
.lsection{border-bottom:1px solid var(--lline);padding-bottom:8px}
.lsection h2{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ltx);padding:12px 16px 6px}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 16px;transition:background .12s}
.lrow:hover{background:var(--lhover)}
.lrow.on{background:rgba(29,155,240,.06)}
.lrow .click{cursor:pointer}
.lrow-t{flex:1;min-width:0}
.lrow-n{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:700;color:var(--ltx)}
.lrow-h,.lrow-b{font-size:14px;color:var(--lmute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow-b{margin-top:2px;white-space:normal}
.lrow-s{display:block;font-size:13px;color:var(--lmute)}
.lrow-t b{font-size:15px;font-weight:700;color:var(--ltx)}
.lworld-i{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--surf);color:var(--lmute);flex:0 0 auto}
.lworld-i svg{width:22px;height:22px}
.lsection .lbtn.wide{width:calc(100% - 32px);margin:12px 16px 4px}

.lside{flex:0 0 350px;width:350px;padding:8px 0 40px 28px;overflow-y:auto;overflow-x:hidden}
.lsearch{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:999px;
  background:var(--surf);color:var(--lmute);font-size:15px;cursor:pointer;margin-bottom:14px}
.lsearch svg{width:19px;height:19px}
.lcard{background:var(--surf);border-radius:16px;padding:12px 0;margin-bottom:16px;overflow:hidden}
.lcard h3{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ltx);padding:0 16px 8px}
.lcard-r{padding:4px 16px;font-size:14px;color:var(--lmute)}
.lcard-r b{color:var(--ltx);font-weight:700;font-size:15px}
.lcard .lrow{padding:9px 16px}
.lcard .lrow:hover{background:var(--lhover-2)}
.lcard .lrow-b{display:none}
.lmore-b{display:block;width:100%;text-align:left;padding:12px 16px 4px;color:var(--lblue);
  font-size:15px}
.lmore-b:hover{background:var(--lhover-2)}

.lempty{padding:60px 32px;text-align:center}
.lempty b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ltx);
  margin-bottom:8px}
.lempty span{font-size:15px;line-height:1.5;color:var(--lmute)}
.lnote{margin:16px;padding:16px;border-radius:16px;background:var(--surf)}
.lnote b{display:block;font-size:17px;font-weight:800;color:var(--ltx);margin-bottom:6px}
.lnote span{font-size:14px;line-height:1.5;color:var(--lmute)}

/* ---- bits used inside the editors ---- */
.lgrid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.lat{display:flex;align-items:center;gap:2px}
.lat > span{color:var(--tx-3);font-size:15px;padding-left:2px}
.lat .inp{flex:1}
.lseg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.lseg button{padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);
  font-size:13px;font-weight:600;color:var(--tx-2)}
.lseg button.on{background:rgba(29,155,240,.14);border-color:var(--lblue);color:var(--lblue)}

.ltabbar{display:none}
.lfab{position:fixed;right:18px;bottom:82px;width:56px;height:56px;border-radius:50%;
  background:var(--lblue);color:#fff;display:none;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.7);z-index:30}
.lfab svg{width:26px;height:26px}

/* ---- narrower ---- */
@media (max-width:1280px){
  .lside{flex:0 0 300px;width:300px;padding-left:20px}
}
@media (max-width:1100px){
  .lside{display:none}
  .larpmain{flex:1 1 auto;max-width:600px}
}
@media (max-width:1000px){
  .lrail{flex:0 0 72px;width:72px;padding:6px 8px 14px;align-items:center}
  .lnavbtn span,.lme-t,.lme .lchip{display:none}
  .lnavbtn{padding:12px}
  .lbtn.wide.big{width:52px;height:52px;padding:0;font-size:0;position:relative}
  .lbtn.wide.big::after{content:"+";font-size:28px;line-height:52px;font-weight:400}
  .lme{padding:6px;justify-content:center}
}
@media (max-width:700px){
  .lrail{display:none}
  .larpmain{max-width:none;border:none}
  .ltabbar{display:flex}
  .lfab{display:flex}
  .lwrap{padding-bottom:150px}
  .ltabbar .lnavbtn{flex:1;flex-direction:column;gap:2px;font-size:10px;padding:8px 0;
    border-radius:0;justify-content:center;max-width:none;width:auto}
  .ltabbar .lnavbtn span{display:block;font-size:10px}
  .ltabbar .lnavbtn svg{width:23px;height:23px}
  .lpost.big .ltext{font-size:19px}
  .lbanner{height:140px}
  .lprof-top{margin-top:-56px}
  .lprof-av .lav{width:88px!important;height:88px!important}
  .lprof-btns{margin-top:60px}
  .lacts{max-width:none}
  .only-narrow{display:inline-flex}
}
@media (min-width:701px){ .only-narrow{display:none} }

/* ---- a poll on a post ----
   Answers before you have picked, bars afterwards. The fill sits behind the
   words rather than beside them, so a long choice never squashes the number. */
.poll{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.poll-o{width:100%;padding:10px 14px;border-radius:999px;border:1px solid var(--blue);
  color:var(--blue);font-size:14px;font-weight:600;text-align:center;transition:.15s}
.poll-o:hover{background:rgba(29,155,240,.1)}
.poll-b{position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-radius:6px;overflow:hidden;background:var(--surf);font-size:14px}
.poll-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(29,155,240,.22);
  border-radius:6px;transition:width .4s var(--sp)}
.poll-b.top .poll-fill{background:rgba(29,155,240,.34)}
.poll-b.mine .poll-fill{background:rgba(0,186,124,.3)}
.poll-t{position:relative;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--tx)}
.poll-b.top .poll-t{font-weight:700}
.poll-p{position:relative;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tx)}
.poll-f{font-size:12.5px;color:var(--tx-3);padding-left:2px}

/* writing one */
.pollmake{margin-top:10px;padding:12px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surf)}
.pollmake-r{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.pollmake-r .inp{flex:1}
.pollmake-x{width:28px;height:28px;border-radius:50%;color:var(--tx-3);font-size:13px;flex:0 0 auto}
.pollmake-x:hover{background:rgba(249,24,128,.12);color:var(--pink)}
.iconbtn.on{color:var(--blue);background:rgba(29,155,240,.12)}

/* ---- the market ----
   Two piles and the number between them, because that is the whole of the
   agreement being offered. */
.tcard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);
  padding:12px 14px;margin-bottom:12px}
.tcard-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tcard-s{font-size:12px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard-b{display:flex;align-items:center;gap:10px}
.tside{flex:1;min-width:0}
.tside-l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:6px}
.trow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tarrow{flex:0 0 auto;color:var(--tx-3);font-size:19px;padding-top:14px}
.tprice{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:var(--r-sm);
  background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.3);color:var(--gold);
  font-size:14px;font-variant-numeric:tabular-nums}
.tprice.free{background:rgba(0,186,124,.1);border-color:rgba(0,186,124,.3);color:var(--green)}
.tcard-f{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line)}
.tcard-w{flex:1;font-size:12.5px;color:var(--tx-3)}
.cstile.sm{width:104px}
.cstile.sm img{height:62px}

/* the run, where the points already are */
.railstreak{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-top:6px;
  border-radius:var(--r);background:rgba(255,159,10,.09);color:var(--orange);
  font-size:14.5px;cursor:pointer;transition:.15s}
.railstreak:hover{background:rgba(255,159,10,.16)}
.railstreak.cold{background:var(--surf);color:var(--tx-3)}
.railstreak b{font-variant-numeric:tabular-nums}

/* the staked figure, typed */
.betin{width:9.5em;max-width:46vw;padding:8px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--tx);
  font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;transition:border-color .15s}
.betin:focus{border-color:var(--blue);outline:none}
.betin::placeholder{color:var(--tx-3);font-weight:400}

/* ---- reactions on a post ----
   Only drawn once somebody has reacted; an empty rail under every post is
   noise. The plus opens the tray. */
.rx{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.rx-b{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--surf);font-size:14px;line-height:1.5;
  transition:.15s}
.rx-b b{font-size:12px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.rx-b:hover{border-color:var(--line-2);background:var(--surf-2)}
.rx-b.on{background:rgba(29,155,240,.14);border-color:rgba(29,155,240,.5)}
.rx-b.on b{color:var(--blue)}
.rx-b.add{color:var(--tx-3);font-size:15px;padding:3px 11px}
.rxtray{position:fixed;z-index:400;display:flex;gap:2px;padding:6px;border-radius:999px;
  background:var(--glass-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line-2);box-shadow:var(--sh)}
.rxtray button{width:36px;height:36px;border-radius:50%;font-size:19px;line-height:1;
  transition:.12s}
.rxtray button:hover{background:var(--surf-2);transform:scale(1.18)}
.rxtray button.on{background:rgba(29,155,240,.2)}

/* ---- pinned, and the showcase ---- */
.pinlabel{display:flex;align-items:center;gap:6px;padding:10px 17px 0;font-size:12.5px;
  font-weight:700;color:var(--tx-3)}
.pinlabel svg{width:13px;height:13px}
.showcase{margin:0 17px 14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surf)}
.showcase-h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-bottom:10px}
.showcase-e{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--blue);
  text-transform:none;letter-spacing:0}
.showcase-r{display:flex;gap:8px;flex-wrap:wrap}
.showcase-n{font-size:13px;color:var(--tx-3)}
.showgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;
  max-height:52vh;overflow-y:auto;margin-top:10px}
.showslot{position:relative;border-radius:var(--r);border:2px solid transparent;padding:0}
.showslot.on{border-color:var(--blue)}
.showslot-n{position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:11px;line-height:20px;text-align:center}

.chip-x{margin-left:6px;color:var(--tx-3);font-size:11px}

/* ---- banned ----
   The whole screen, because a ban is not a toast. It says what was decided,
   why and until when, and carries nothing else. */
.gatecard.banned{border-color:rgba(249,24,128,.28)}
.banmark{width:70px;height:70px;margin:0 auto 18px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:rgba(249,24,128,.11);color:var(--pink)}
.banbox{margin:20px 0 22px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surf);overflow:hidden;text-align:left}
.banrow{display:flex;align-items:baseline;gap:14px;padding:11px 15px;
  border-bottom:1px solid var(--line);font-size:14px}
.banrow:last-child{border-bottom:none}
.banrow span{flex:0 0 74px;color:var(--tx-3);font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.banrow b{flex:1;min-width:0;font-weight:600;color:var(--tx);line-height:1.45;
  overflow-wrap:anywhere}
.btn.danger{background:var(--pink);color:#fff}
.btn.danger:hover{background:#d4136c}

/* ================= The daily wheel ================= */
.gart.wh{position:relative;padding:0}
.gart.wh .whmini{position:absolute;inset:8px;border-radius:50%;overflow:hidden;
  background:var(--surf-2);border:1px solid var(--line-2)}
.gart.wh .whmini i{position:absolute;left:50%;top:50%;width:50%;height:2px;
  transform-origin:0 50%;transform:rotate(var(--a));background:var(--c);opacity:.85}
.gcard.ready .gart.wh .whmini{box-shadow:0 0 0 2px var(--gold) inset}

.wheelwrap{position:relative;width:min(320px,78vw);aspect-ratio:1;margin:6px auto 0}
.wheel{position:absolute;inset:0;border-radius:50%;border:6px solid var(--surf-2);
  box-shadow:0 10px 34px rgba(0,0,0,.55),0 0 0 1px var(--line-2);
  transform:rotate(0deg);will-change:transform}
/* Each label is a full-size layer turned to its own segment, with the words
   pinned near the top of it. Turning a layer the size of the wheel puts the
   text out on the rim; the previous version turned a point of zero height,
   which left every label stacked in the middle under the hub where none of
   them could be read. */
.wlab{position:absolute;inset:0;pointer-events:none}
.wlab b{position:absolute;left:50%;top:5.5%;transform:translateX(-50%);
  width:74px;text-align:center;font-size:12px;font-weight:800;
  letter-spacing:-.02em;line-height:1.15;color:#07080b;
  text-shadow:0 1px 0 rgba(255,255,255,.32)}
.wheelpin{position:absolute;left:50%;top:-9px;width:0;height:0;z-index:3;
  transform:translateX(-50%);
  border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:20px solid var(--tx);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.wheelhub{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:var(--surf);border:1px solid var(--line-2);z-index:2;
  display:grid;place-items:center;color:var(--gold);
  box-shadow:0 4px 16px rgba(0,0,0,.5)}

.whfoot{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:26px}
.whnote{font-size:12.5px;color:var(--tx-3);text-align:center;max-width:340px;line-height:1.5}

.whprize{display:flex;align-items:center;gap:14px;margin:20px auto 0;max-width:420px;
  padding:15px 17px;border-radius:16px;background:var(--surf);
  border:1px solid var(--line-2);animation:whin .34s var(--sp) both}
.whprize.none{border-color:var(--line)}
.whprize .wpk{width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:grid;
  place-items:center;background:var(--surf-2);color:var(--gold)}
.whprize.none .wpk{color:var(--tx-3)}
.whprize b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.whprize span{display:block;font-size:12.5px;color:var(--tx-3);margin-top:3px;line-height:1.5}
@keyframes whin{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}

/* ================= Russian roulette ================= */
.gart.rr{grid-template-columns:repeat(3,1fr);gap:5px;padding:12px}
.gart.rr i{border-radius:50%;background:var(--line-2)}
.gart.rr i.live{background:var(--pink);box-shadow:0 0 9px var(--pink)}

.rrintro{font-size:13px;color:var(--tx-3);line-height:1.6;margin:2px 3px 16px}

.rrmine{display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:16px;
  background:var(--surf);border:1px solid var(--gold);margin-bottom:6px}
.rrmine b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em}
.rrmine span{display:block;font-size:12.5px;color:var(--tx-3);margin-top:3px;line-height:1.5}
.rrmine .btn{margin-left:auto;flex:0 0 auto}

.rrseat{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 17px;border-radius:16px;background:var(--surf);border:1px solid var(--line)}
.rrwho{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:800;
  letter-spacing:-.02em;min-width:0;flex-wrap:wrap}
.rrwho span{color:var(--tx-2);transition:.2s var(--sp)}
.rrwho span.on{color:var(--tx);text-shadow:0 0 16px rgba(233,234,238,.35)}
.rrwho .rrvs{font-size:12px;font-weight:600;color:var(--tx-3);text-transform:lowercase}
.rrstake{font-size:12.5px;color:var(--tx-3);white-space:nowrap;font-variant-numeric:tabular-nums}

.cylinder{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:22px auto;
  max-width:390px}
.cylinder i{position:relative;aspect-ratio:1;border-radius:50%;background:var(--surf-2);
  border:1px solid var(--line-2);display:grid;place-items:center;transition:.22s var(--sp)}
.cylinder i b{font-size:12px;font-weight:800;color:var(--tx-3);font-style:normal}
.cylinder i.spent{background:var(--bg-2);border-color:var(--line)}
.cylinder i.spent b{color:var(--tx-3);opacity:.5}
.cylinder i.bang{background:var(--pink);border-color:var(--pink);
  box-shadow:0 0 20px var(--pink);animation:rrbang .4s var(--sp) both}
.cylinder i.bang b{color:#fff}
@keyframes rrbang{0%{transform:scale(.7)}55%{transform:scale(1.22)}100%{transform:scale(1)}}

.rrlog{display:flex;flex-direction:column;gap:7px;max-width:390px;margin:0 auto}
.rrline{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;
  background:var(--surf);border:1px solid var(--line);font-size:13.5px;
  animation:whin .2s var(--sp) both}
.rrline span:first-child{font-weight:700}
.rrline .rrch{color:var(--tx-3);font-size:12.5px;margin-left:auto}
.rrline b{font-size:12.5px;font-weight:800;color:var(--tx-2);text-transform:uppercase;
  letter-spacing:.06em;min-width:44px;text-align:right}
.rrline.bang{border-color:var(--pink)}
.rrline.bang b{color:var(--pink)}
.rrline.waiting{color:var(--tx-3);border-style:dashed}

.rrend{margin:20px auto 0;max-width:390px;padding:18px;border-radius:16px;text-align:center;
  background:var(--surf);border:1px solid var(--line-2);animation:whin .3s var(--sp) both}
.rrend.won{border-color:var(--green)}
.rrend.lost{border-color:var(--pink)}
.rrend b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em}
.rrend.won b{color:var(--green)}
.rrend.lost b{color:var(--pink)}
.rrend span{display:block;font-size:13px;color:var(--tx-3);margin-top:5px;line-height:1.5}

/* the badge picker in the owner's grant box */
.bgpick{opacity:.4;transition:.16s var(--sp);border-radius:999px}
.bgpick.on{opacity:1;transform:scale(1.04)}

@media (max-width:560px){
  .wheelwrap{width:min(300px,84vw)}
  .cylinder{gap:7px}
  .rrmine{flex-wrap:wrap}
  .rrmine .btn{margin-left:0}
}

/* ================= movement, both games =================
   Everything below is decoration over an answer already decided. None of it
   changes a result; it only takes its time arriving at one. Anybody who has
   asked their system for less movement gets the result and none of the wait,
   which is handled here rather than in the scripts. */

/* ---- the wheel ---- */

/* Ready to be turned: a slow breath on the rim so the thing looks alive
   before it is touched, and nothing at all once it has been used. */
.wheelwrap.ready .wheel{animation:whidle 3.4s ease-in-out infinite}
@keyframes whidle{
  0%,100%{box-shadow:0 10px 34px rgba(0,0,0,.55),0 0 0 1px var(--line-2)}
  50%{box-shadow:0 10px 34px rgba(0,0,0,.55),0 0 0 1px var(--line-2),
      0 0 26px -4px var(--gold)}
}

/* The pin is hit by every face going past, so it flicks and settles. */
.wheelwrap.spinning .wheelpin{animation:whtick .09s linear infinite}
@keyframes whtick{
  0%{transform:translateX(-50%) rotate(0deg)}
  40%{transform:translateX(-50%) rotate(13deg)}
  100%{transform:translateX(-50%) rotate(0deg)}
}
.wheelwrap.landed .wheelpin{animation:whdrop .5s var(--sp) 1}
@keyframes whdrop{
  0%{transform:translateX(-50%) rotate(14deg)}
  55%{transform:translateX(-50%) rotate(-7deg)}
  100%{transform:translateX(-50%) rotate(0deg)}
}

/* The hub keeps pace with the rim, then takes the landing. */
.wheelwrap.spinning .wheelhub{animation:whhub 1.1s linear infinite}
@keyframes whhub{to{transform:rotate(360deg)}}
.wheelwrap.landed .wheelhub{animation:whpop .55s var(--sp) 1}
@keyframes whpop{
  0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}
}

/* A ring goes out from the middle the moment it stops. */
.wheelwrap.landed::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--gold);animation:whring .75s var(--sp) 1 forwards;
  pointer-events:none}
@keyframes whring{
  0%{opacity:.9;transform:scale(.6)}
  100%{opacity:0;transform:scale(1.14)}
}

/* What is on offer, under the wheel, so the faces are not the only place
   the prizes are named. */
.whlegend{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  max-width:430px;margin:16px auto 0}
.whchip{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:var(--surf);border:1px solid var(--line);font-size:12px;
  font-weight:700;color:var(--tx-2)}
.whchip i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto}
.whchip.rare{border-color:var(--line-2);color:var(--tx)}

/* ---- russian roulette ---- */

/* The cylinder is spun once before the first pull, the way it would be. */
.cylinder{transition:transform .2s var(--sp)}
.cylinder.spinning{animation:rrspin 1.15s cubic-bezier(.2,.7,.2,1) 1}
@keyframes rrspin{
  0%{transform:rotate(0deg) scale(.94);opacity:.75}
  70%{transform:rotate(340deg) scale(1.02)}
  100%{transform:rotate(360deg) scale(1);opacity:1}
}

/* The chamber under the hammer right now. */
.cylinder i.now{border-color:var(--tx-2);transform:scale(1.14);
  box-shadow:0 0 0 3px rgba(233,234,238,.12)}
.cylinder i.now.pull{animation:rrclick .3s var(--sp) 1}
@keyframes rrclick{
  0%{transform:scale(1.14)}35%{transform:scale(.9)}100%{transform:scale(1.14)}
}

/* The one that was not empty takes the whole table with it. */
.rrstage.bang{animation:rrshake .42s cubic-bezier(.36,.07,.19,.97) 1}
@keyframes rrshake{
  0%,100%{transform:translateX(0)}
  12%{transform:translateX(-9px)}28%{transform:translateX(8px)}
  46%{transform:translateX(-6px)}64%{transform:translateX(4px)}
  82%{transform:translateX(-2px)}
}
.rrflash{position:fixed;inset:0;background:var(--pink);opacity:0;z-index:60;
  pointer-events:none;animation:rrflash .34s ease-out 1 forwards}
@keyframes rrflash{0%{opacity:.42}100%{opacity:0}}

/* Whose turn it is, said by movement as well as by weight. */
.rrwho span.on{animation:rrturn 1s ease-in-out infinite}
@keyframes rrturn{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- bots ---- */
.botrow{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  background:var(--surf);border:1px solid var(--line);margin-bottom:7px;
  cursor:pointer;transition:.16s var(--sp)}
.botrow:hover{border-color:var(--line-2);transform:translateY(-1px)}
.botrow.off{opacity:.4;pointer-events:none}
.botface{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;font-size:15px;font-weight:800;color:#07080b;
  background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.botname{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.bottag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 6px;
  margin-left:6px;vertical-align:1px}
.botline{font-size:12.5px;color:var(--tx-3);margin-top:2px}

@media (prefers-reduced-motion:reduce){
  .wheelwrap.ready .wheel,.wheelwrap.spinning .wheelpin,.wheelwrap.landed .wheelpin,
  .wheelwrap.spinning .wheelhub,.wheelwrap.landed .wheelhub,.wheelwrap.landed::after,
  .cylinder.spinning,.cylinder i.now.pull,.rrstage.bang,.rrflash,.rrwho span.on{
    animation:none}
  .wheel{transition:none}
}

/* the check, standing among badges in the owner's panel */
.bdgchk{display:inline-grid;place-items:center;width:24px;height:24px;
  border-radius:999px;background:var(--surf-2);border:1px solid var(--line-2)}
.bdgchk .verified{width:15px;height:15px}
.bgpick .verified{width:22px;height:22px}