:root {
  --bg: #efeff4;
  --card: #ffffff;
  --text: #111;
  --muted: #8a8a8e;
  --line: #e5e5ea;
  --blue: #1d8cf8;
  --blue-soft: #e3f1ff;
  --green: #2fbf4a;
  --red: #f04b4b;
  --star-bg: #fff4d6;
  --star: #e8a400;
  --chip: #f2f2f7;
  --shadow: 0 6px 24px rgba(0, 0, 0, .08);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html.dark {
  --bg: #0f0f12;
  --card: #1c1c1f;
  --text: #f2f2f2;
  --muted: #8d8d93;
  --line: #2c2c30;
  --blue-soft: #15304a;
  --star-bg: #3a3017;
  --chip: #2a2a2e;
  --shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif; }
body { padding: 64px 14px calc(110px + var(--safe-b)); min-height: 100vh; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: var(--text); }
img { display: block; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: opacity .3s; }
.loader.hide { opacity: 0; pointer-events: none; }
.loader-emoji { animation: bob 1.4s ease-in-out infinite; }
.loader-title { font-weight: 600; font-size: 18px; margin-top: 8px; }
.loader-sub { color: var(--muted); font-size: 13px; }
.loader-bar { width: 280px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 14px; }
.loader-bar i { display: block; height: 100%; width: 40%; background: var(--blue); border-radius: 3px; animation: load 1.2s ease-in-out infinite; }
@keyframes load { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* top bar */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; padding: 12px 14px; background: linear-gradient(var(--bg) 70%, transparent); }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border-radius: 18px; padding: 7px 12px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow); }
.pill .arrow, .pill .plus { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chip); font-size: 14px; }
.pill b { font-weight: 600; }

/* bottom bar */
.bottombar { position: fixed; left: 14px; right: 14px; bottom: calc(12px + var(--safe-b)); z-index: 30; display: flex; gap: 10px; align-items: center; }
.tabs { flex: 1; display: flex; background: var(--card); border-radius: 30px; padding: 6px; box-shadow: var(--shadow); }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; padding: 6px 0; border-radius: 24px; color: var(--text); }

.tabs button.active { background: var(--blue-soft); color: var(--blue); }

.avatar-btn { width: 62px; height: 62px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); padding: 6px; flex: none; }
.avatar-btn.active { outline: 2px solid var(--blue); }

.avatar { border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #7ab8ff, #3d7cf5); color: #fff; display: grid; place-items: center; font-weight: 600; overflow: hidden; width: 100%; height: 100%; }

/* cards & grids */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gcard { position: relative; background: var(--card); border-radius: 18px; padding: 10px 8px 10px; display: flex; flex-direction: column; align-items: center; overflow: hidden; min-width: 0; }
.gcard .art { width: 100%; aspect-ratio: 1; }
.gcard .gname { font-size: 12px; font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gcard .gsub { font-size: 11px; color: var(--muted); }
.gcard.up { padding: 0; background: transparent; }
.gcard.up .art { border-radius: 18px; }
.gcard.up .price { position: absolute; bottom: 8px; background: rgba(0, 0, 0, .35); color: #fff; }
.gcard.dim { opacity: .55; }
.price { display: inline-flex; align-items: center; gap: 4px; background: var(--star-bg); border-radius: 14px; padding: 4px 12px; font-weight: 600; font-size: 14px; margin-top: 6px; white-space: nowrap; }
.price.small { font-size: 12px; padding: 3px 8px; }
.ribbon { position: absolute; top: 14px; right: -30px; width: 110px; transform: rotate(45deg); text-align: center; font-size: 10.5px; font-weight: 600; color: #fff; padding: 3px 0; background: #2ea6ff; z-index: 2; }
.ribbon.red { background: var(--red); }
.ribbon.green { background: #16b84a; }

/* gift art */
.art { position: relative; display: grid; place-items: center; overflow: hidden; }
.art > img.model { width: 78%; height: 78%; object-fit: contain; position: relative; z-index: 1; }
.art.plain > img.model { width: 86%; height: 86%; }
.art .pat { position: absolute; width: 11%; height: 11%; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transform: translate(-50%, -50%); }

.section-title { font-size: 20px; font-weight: 600; margin: 18px 4px 10px; }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.skeleton { background: linear-gradient(90deg, var(--chip), var(--card), var(--chip)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 14px; aspect-ratio: 1; }
@keyframes sk { to { background-position: -200% 0; } }

/* lists */
.box { background: var(--card); border-radius: 22px; padding: 6px 16px; margin-bottom: 14px; }
.box h3 { margin: 12px 0 6px; font-size: 19px; font-weight: 600; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .li-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 17px; flex: none; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-size: 15.5px; }
.list-item .li-sub { font-size: 12.5px; color: var(--star); font-weight: 600; }
.list-item .li-sub.muted { color: var(--muted); font-weight: 400; }
.list-item .chev { color: var(--muted); font-size: 20px; }
.list-item.disabled { opacity: .45; pointer-events: none; }
.task-group { background: var(--card); border-radius: 22px; padding: 4px 14px; }
.task-group .inner { background: var(--chip); border-radius: 16px; padding: 0 12px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--blue); color: #fff; border-radius: 20px; padding: 7px 16px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn.green { background: var(--green); }
.btn.gray { background: var(--chip); color: var(--muted); }
.btn.red { background: var(--red); }
.btn.block { display: flex; width: 100%; padding: 15px; border-radius: 26px; font-size: 17px; }
.btn:disabled { opacity: .6; pointer-events: none; }
.btn.light { background: var(--blue-soft); color: var(--blue); }

/* profile */
.profile-card { background: var(--card); border-radius: 26px; padding: 28px 16px 22px; text-align: center; margin-bottom: 14px; }
.profile-card .pa { width: 92px; height: 92px; margin: 0 auto 10px; }
.profile-card .pname { font-size: 26px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.profile-card .psub { color: var(--muted); margin-top: 4px; }
.seg-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.seg { flex: 1; display: flex; background: var(--card); border-radius: 22px; padding: 4px; }
.seg button { flex: 1; padding: 9px 0; border-radius: 18px; font-size: 14px; font-weight: 500; }
.seg button.active { background: var(--blue-soft); color: var(--blue); }
.round-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 18px; flex: none; }
.badge-tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 11px; vertical-align: middle; }

/* market filters */
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters select { appearance: none; -webkit-appearance: none; background: var(--card); border: 0; border-radius: 16px; padding: 8px 14px; font-size: 13px; font-weight: 500; flex: none; max-width: 170px; }
.filters select.on { background: var(--blue-soft); color: var(--blue); }

/* sheets */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; animation: fade .2s; }
.sheet { width: 100%; max-height: 92vh; overflow-y: auto; background: var(--bg); border-radius: 28px 28px 0 0; padding: 0 0 calc(18px + var(--safe-b)); animation: up .25s cubic-bezier(.2, .8, .2, 1); position: relative; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(128, 128, 128, .45); position: absolute; top: 8px; left: 50%; margin-left: -20px; z-index: 6; }
.sheet > .grab + .pad { padding-top: 26px; }
.sheet:has(> .grab + .hero) > .grab { background: rgba(255,255,255,.55); }
.sheet .pad { padding: 14px 18px 0; }
.sheet h2 { margin: 8px 0 2px; font-size: 24px; font-weight: 600; }
.sheet .sub { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.sheet-wrap.closing { animation: fade .2s reverse forwards; }
.sheet-wrap.closing .sheet { animation: up .2s reverse forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }

.hero { position: relative; padding: 25px 18px 18px; color: #fff; text-align: center; overflow: hidden; }
.hero .art.bg { position: absolute; inset: 0; z-index: 0; }
.hero .art.bg .pat { width: 34px; height: 34px; }
.hero .hero-in { position: relative; z-index: 1; }
.hero .hero-model { width: 140px; height: 140px; margin: 6px auto 0; object-fit: contain; }
.hero .hname { font-size: 22px; font-weight: 700; margin-top: 8px; }
.hero .hname span { opacity: .7; font-weight: 500; }
.hero .hsub { opacity: .75; font-size: 14px; }
.hero .hpill { display: inline-block; background: rgba(255, 255, 255, .2); border-radius: 12px; padding: 2px 10px; font-size: 13px; margin-top: 4px; }
.hero-close, .hero-more { position: absolute; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-size: 22px; z-index: 3; display: grid; place-items: center; }
.hero-close { left: 16px; }
.hero-more { right: 16px; }
.hero-actions { display: flex; gap: 10px; margin-top: 16px; }
.hero-actions button { flex: 1; background: rgba(255, 255, 255, .2); border-radius: 16px; padding: 10px 4px; color: #fff; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-actions button .i { font-size: 20px; }
.hero-actions button:disabled { opacity: .45; }
.hero.green { background: linear-gradient(160deg, #c4e17f, #4fb36a); }
.hero.plainbg { background: linear-gradient(160deg, #6fb6ff, #3f7cf0); }

.table { background: var(--card); border-radius: 16px; border: 1px solid var(--line); overflow: hidden; margin: 14px 0 6px; }
.table .tr { display: flex; border-bottom: 1px solid var(--line); min-height: 44px; }
.table .tr:last-child { border-bottom: 0; }
.table .th { width: 36%; background: var(--chip); padding: 11px 12px; color: var(--text); opacity: .85; }
.table .td { flex: 1; padding: 11px 12px; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.table .td .val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table .td .val.spin { animation: spin-val .09s linear; }
@keyframes spin-val { from { transform: translateY(-60%); opacity: .2; } }
.rar { background: var(--blue-soft); color: var(--blue); border-radius: 10px; padding: 1px 7px; font-size: 12px; font-weight: 600; }
.link { color: var(--blue); }
.note { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0 14px; }

.field { background: var(--card); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; min-width: 0; }
.input-glass { width: 100%; border: 0; outline: 0; border-radius: 20px; padding: 13px 18px; background: rgba(255, 255, 255, .45); color: #fff; font-size: 16px; }
.input-glass::placeholder { color: rgba(255, 255, 255, .8); }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; border-radius: 15px; background: var(--line); transition: .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: .2s; }
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { left: 25px; }

.progress { position: relative; height: 34px; border-radius: 17px; background: var(--line); overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-weight: 500; font-size: 14px; margin: 14px 0 6px; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #0aa6ff, #19b5ff); border-radius: 17px; }
.progress span { position: relative; z-index: 1; }
.progress span:first-of-type { color: #fff; }

.preview-card { width: 210px; margin: 10px auto 0; background: rgba(0, 0, 0, .15); border-radius: 22px; padding: 18px 12px 16px; position: relative; overflow: hidden; }
.preview-card img { width: 96px; height: 96px; margin: 0 auto; object-fit: contain; }
.preview-card .t { font-weight: 700; margin-top: 8px; }
.preview-card .s { font-size: 13px; opacity: .9; }

.feature { display: flex; gap: 14px; margin: 16px 0; }
.feature .fi { font-size: 22px; color: var(--blue); width: 28px; flex: none; text-align: center; }
.feature b { display: block; margin-bottom: 2px; }
.feature span { color: var(--muted); font-size: 14px; }

.pack { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pack:last-child { border-bottom: 0; }
.pack b { flex: 1; font-weight: 500; }
.pack .cost { color: var(--muted); }

.exch { background: var(--card); border-radius: 22px; padding: 14px 16px; position: relative; }
.exch .row { display: flex; align-items: center; justify-content: space-between; }
.exch label { color: var(--muted); font-size: 14px; }
.exch input { border: 0; outline: 0; background: transparent; font-size: 28px; font-weight: 600; width: 60%; }
.exch .big { font-size: 28px; font-weight: 600; }
.exch .tag { border: 1px solid var(--line); border-radius: 16px; padding: 5px 10px; font-size: 14px; }
.exch .arrow { display: grid; place-items: center; width: 40px; height: 40px; margin: 6px auto; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }

.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: 0; }
.lb-row .rank { width: 30px; text-align: center; font-weight: 600; color: var(--muted); }
.lb-row .av { width: 40px; height: 40px; flex: none; }
.lb-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row.me { background: var(--blue-soft); border-radius: 14px; padding: 10px; border: 0; margin-bottom: 8px; }

.reflink { display: flex; gap: 8px; align-items: center; background: var(--chip); border-radius: 14px; padding: 10px 12px; font-size: 13px; word-break: break-all; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats div { background: var(--card); border-radius: 16px; padding: 14px; }
.stats b { display: block; font-size: 22px; }
.stats span { color: var(--muted); font-size: 13px; }

.toast { position: fixed; left: 50%; top: 70px; transform: translate(-50%, -20px); background: rgba(30, 30, 30, .92); color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 14px; z-index: 200; opacity: 0; pointer-events: none; transition: .25s; max-width: 88vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: rgba(200, 40, 40, .95); }

.menu { background: var(--card); border-radius: 18px; overflow: hidden; }
.menu button { display: flex; width: 100%; padding: 15px 18px; border-bottom: 1px solid var(--line); gap: 12px; font-size: 16px; }
.menu button:last-child { border-bottom: 0; }
.menu button.danger { color: var(--red); }

.upgrading .hero .art.bg, .upgrading .hero img { transition: none; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 120; }

/* icons (line icons + gold star) */
.ic { width: 1.2em; height: 1.2em; vertical-align: -0.24em; display: inline-block; flex: none; }
.ic.star { width: 1.15em; height: 1.15em; vertical-align: -0.2em; filter: drop-shadow(0 1px 1px rgba(200, 120, 0, .25)); }
.ic.medal { width: 28px; height: 28px; vertical-align: middle; }
[data-ic] { display: inline-flex; align-items: center; font-style: normal; }
.gold { color: #f5a400; }
.svg { width: 1em; height: 1em; vertical-align: -0.14em; display: inline-block; }
.pill .arrow .svg, .pill .plus .svg { width: 14px; height: 14px; }
.pill .ic { width: 18px; height: 18px; }
.hero-close .svg, .hero-more .svg { width: 20px; height: 20px; }
.round-btn .svg { width: 20px; height: 20px; }
.exch .arrow .svg { width: 18px; height: 18px; }
.svg.sel { color: var(--blue); width: 18px; height: 18px; margin-right: 4px; }
.badge-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -3px; background: none !important; }
.badge-tick .svg { width: 100%; height: 100%; }
.badge-tick.big { width: 32px; height: 32px; }
.li-ico { color: #fff; }
.li-ico .ic { width: 20px; height: 20px; }
.hero-actions button .i .ic { width: 22px; height: 22px; }
.feature .fi .ic { width: 26px; height: 26px; }
.price .ic.star { width: 17px; height: 17px; vertical-align: -3px; }
.price.small .ic.star { width: 14px; height: 14px; }
.gcard.up .price .ic.star { filter: none; }
.menu button .ic { width: 22px; height: 22px; color: var(--blue); }
.menu button.danger .ic { color: var(--red); }
.btn .ic.star { width: 18px; height: 18px; }
.tabs button .ico { width: 26px; height: 26px; color: var(--text); opacity: .85; }
.tabs button .ico .ic { width: 26px; height: 26px; vertical-align: 0; }
.tabs button.active .ico { color: var(--blue); opacity: 1; }
.loader-emoji { color: var(--blue); }
.loader-emoji .ic { width: 84px; height: 84px; }

/* Lottie animations: the PNG stays as a poster until the animation is ready */
.lot { position: absolute; z-index: 2; pointer-events: none; }
.art > .lot { width: 78%; height: 78%; left: 11%; top: 11%; }
.art.plain > .lot { width: 86%; height: 86%; left: 7%; top: 7%; }
.anim-on > img { opacity: 0; }
.hero-anim { position: relative; width: 140px; height: 140px; margin: 6px auto 0; }
.hero-anim > img.hero-model { margin: 0; }
.hero-anim > .lot { inset: 0; }
.preview-card .hero-anim { width: 96px; height: 96px; }
.preview-card .hero-anim img { width: 96px; height: 96px; object-fit: contain; display: block; }
.lot svg { width: 100% !important; height: 100% !important; }

/* upgrade reel */
.bg-holder { position: absolute; inset: 0; z-index: 0; }
.bg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.bg-layer.in { opacity: 1; }
.bg-layer .art.bg { position: absolute; inset: 0; }
.reel { position: relative; height: 150px; margin: 2px -18px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.reel-track { position: absolute; left: 0; top: 0; height: 150px; will-change: transform; }
.reel-item { position: absolute; top: 0; width: 150px; height: 150px; display: grid; place-items: center; will-change: transform, opacity; }
.reel-item img { width: 136px; height: 136px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.hero .hsub, .hero .hname span { transition: opacity .15s; }

/* prerendered pattern layer */
.patlayer { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 0; }
.patlayer.on { opacity: 1; }
.art > img.model { z-index: 1; }

.reel-item > .lot { inset: 7px; }
.reel.done .reel-item:not(.final) { opacity: 0 !important; transition: opacity .35s; }
.reel.done .reel-item.final { transform: none; }
.reel-item.final img { transition: opacity .2s; }

/* profile header with pinned + worn gifts */
.profile-card { position: relative; overflow: hidden; }
.profile-card.worn { color: #fff; }
.profile-card.worn .psub { color: rgba(255,255,255,.75); }
.profile-card > .pa, .profile-card > .pname, .profile-card > .psub { position: relative; z-index: 2; }
.pfloats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pfloat { position: absolute; width: 38px; height: 38px; transform: translate(-50%, -50%); pointer-events: auto; animation: pfloat 3.2s ease-in-out infinite; will-change: transform; }
.pfloat::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 70%, transparent) 0%, transparent 70%); opacity: .8; }
.pfloat img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.pfloat > .lot { inset: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.worn-box { position: relative; display: inline-flex; flex: none; margin-left: 4px; }
.worn-box > .worn-ic { margin-left: 0; }
.worn-box > .lot { inset: 0; }
@keyframes pfloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } }
.worn-ic { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; margin-left: 4px; }
.worn-ic.sm { width: 20px; height: 20px; margin-left: 2px; flex: none; }
.pin-mark { position: absolute; top: 8px; left: 8px; z-index: 3; color: #fff; width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.gcard:not(.up) .pin-mark { color: var(--muted); filter: none; }
.pin-mark .ic { width: 18px; height: 18px; transform: rotate(35deg); }
.ribbon.num { filter: brightness(.72); font-weight: 700; }

.gate-ic { width: 64px; height: 64px; }

/* verification marks */
.badge-img { width: 22px; height: 22px; object-fit: contain; vertical-align: -4px; flex: none; }
.badge-img.big, .badge-tick.big { width: 32px; height: 32px; }
.badge-img.sm, .badge-tick.sm { width: 18px; height: 18px; }
.pname { display: inline-flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pname .badge-tick, .pname .badge-img { width: 26px; height: 26px; }
.profile-card.worn .badge-tick { filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.verified-note { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 13.5px; margin: -6px 6px 14px; line-height: 1.35; }
.verified-note .badge-tick, .verified-note .badge-img { margin-top: 1px; filter: grayscale(.3); opacity: .85; }
.lb-row .nm { display: flex; align-items: center; gap: 5px; }
.gcard.up .pin-mark .ic { color: #fff; }

/* collections */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--card); border-radius: 18px; padding: 7px 14px; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
.chip img { width: 22px; height: 22px; object-fit: contain; }
.chip.active { background: var(--blue-soft); color: var(--blue); }
.chip.add { color: var(--blue); }
.chip.icon { padding: 7px 10px; }
.chip .svg { width: 16px; height: 16px; }
.col-fab-wrap { position: fixed; left: 0; right: 0; bottom: calc(96px + var(--safe-b)); display: flex; justify-content: center; z-index: 25; pointer-events: none; }
.col-fab { pointer-events: auto; padding: 12px 22px; border-radius: 24px; box-shadow: 0 6px 20px rgba(29, 140, 248, .35); }
.col-fab .svg { width: 18px; height: 18px; }
.pick-grid .gcard { transition: transform .12s; }
.pick-grid .gcard.picked { outline: 3px solid var(--blue); outline-offset: -3px; transform: scale(.96); }
.pick-num { position: absolute; top: 8px; right: 8px; z-index: 4; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.pick-grid .gcard.picked .ribbon { opacity: .25; }
.pick-bar { position: sticky; bottom: 0; padding: 12px 18px calc(12px + var(--safe-b)); background: linear-gradient(transparent, var(--bg) 30%); }

/* craft */
.sheet.craft-sheet { background: linear-gradient(180deg, #2a3446, #1c2433); color: #fff; }
.sheet.craft-sheet.craft-fail { background: linear-gradient(180deg, #4a2320, #2a1513); }
#cr { padding: 12px 18px 6px; text-align: center; }
.cr-head { display: flex; align-items: center; justify-content: space-between; height: 44px; position: relative; }
.cr-head b { font-size: 17px; }
.cr-head .hero-close { position: static; }
.cr-help { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; font-weight: 600; }
.cr-stage { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px 0 14px; }
.cr-col { display: flex; flex-direction: column; gap: 18px; }
.cr-slot { position: relative; width: 78px; height: 78px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; }
.cr-slot.add { background: rgba(255,255,255,.1); color: #fff; }
.cr-slot.add .svg { width: 30px; height: 30px; background: #fff; color: #2a3446; border-radius: 50%; padding: 6px; box-sizing: content-box; }
.cr-slot img { width: 70%; height: 70%; object-fit: contain; position: relative; z-index: 1; }
.cr-pct { position: absolute; top: 4px; left: 5px; z-index: 2; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.35); border-radius: 8px; padding: 1px 5px; }
.cr-plus { position: absolute; top: 8px; left: 8px; z-index: 3; color: #fff; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.3); border-radius: 8px; padding: 1px 6px; }
.cr-badge { display: inline-block; margin-top: 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 4px 12px; font-size: 13px; }
.cr-x { position: absolute; top: 3px; right: 3px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; }
.cr-x .svg { width: 11px; height: 11px; }
.cr-core { position: relative; width: 120px; height: 120px; border-radius: 28px; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.cr-core.fail { margin: 26px auto 14px; color: #fff; background: rgba(255,255,255,.08); }
.cr-core.fail .craft-ic { width: 54px; height: 54px; }
.cr-ring { position: absolute; inset: 6px; transform: rotate(-90deg); }
.cr-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.cr-ring .bg { stroke: rgba(255,255,255,.12); }
.cr-ring .fg { stroke: #fff; transition: stroke-dashoffset .4s; }
.cr-anvil .ic { width: 44px; height: 44px; margin-top: -14px; }
.cr-chance { position: absolute; bottom: 22px; left: 0; right: 0; font-size: 20px; font-weight: 700; }
.cr-text { font-size: 15px; line-height: 1.45; margin: 4px 0; }
.cr-text.dim { color: rgba(255,255,255,.65); font-size: 14px; }
.cr-mini { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; }
.cr-attrs { display: flex; justify-content: center; gap: 16px; margin: 14px 0 0; flex-wrap: wrap; }
.cr-attr { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cr-attr .dot { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.cr-attr .sym { width: 40px; height: 40px; background: #fff; -webkit-mask-size: 70%; mask-size: 70%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; border-radius: 50%; box-shadow: inset 0 0 0 40px rgba(255,255,255,0); }
.cr-attr small { font-size: 11px; color: rgba(255,255,255,.75); }
.cr-all { margin: 16px auto 0; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.1); color: #fff; border-radius: 16px; padding: 6px 12px; font-size: 13px; }
.cr-all img { width: 20px; height: 20px; object-fit: contain; }
.cr-go { margin-top: 18px; flex-direction: column; gap: 0; line-height: 1.2; }
.cr-go small { font-size: 12px; font-weight: 500; opacity: .85; }
.cr-tier { display: flex; align-items: center; gap: 8px; margin: 14px 2px 8px; }
.cr-tier small { color: var(--muted); }
.rar.tier { text-transform: capitalize; }
.craft-ic { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
.cr-anvil .craft-ic { width: 54px; height: 54px; margin-top: -16px; color: #fff; }
.craft-ic.menu-ic { width: 22px; height: 22px; color: var(--blue); }
.craft-ic.broken { opacity: .85; transform: rotate(-8deg); }
/* 3D craft stage: slots around a cube; gifts land on its faces */
.cr3d { position: relative; height: 270px; margin-top: 4px; perspective: 800px; perspective-origin: 50% 50%; }
.cr3-slot { position: absolute !important; left: 50%; top: 50%; margin: -39px 0 0 -39px; transform: translate(calc(var(--sx) * 128px), calc(var(--sy) * 52px)); }
.cube-wrap, .fly3 { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; transform-style: preserve-3d; }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.cube-wrap.hit { animation: cubehit .32s ease-out; }
@keyframes cubehit { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.cf { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cf.front { transform: translateZ(60px); }
.cf.right { transform: rotateY(90deg) translateZ(60px); }
.cf.back { transform: rotateY(180deg) translateZ(60px); }
.cf.left { transform: rotateY(270deg) translateZ(60px); }
.cf.top { transform: rotateX(90deg) translateZ(60px); }
.cf.bottom { transform: rotateX(-90deg) translateZ(60px); }
.cf .face, .fly3 .face { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(145deg, #4a5a74, #36435a); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.cf .face .craft-ic { width: 54px; height: 54px; color: #fff; }
.cf .face.gift img, .fly3 .face.gift img { width: 84%; height: 84%; object-fit: contain; }
.fly3 { z-index: 5; pointer-events: none; will-change: transform; backface-visibility: hidden; }
.fly3 .face { box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.cr3d .flash { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 35%, rgba(255,255,255,0) 70%); opacity: 0; pointer-events: none; z-index: 6; }
.cr3d.ok .cube-wrap { animation: cubehit .4s ease-out; }
.cr3d.ok .flash { animation: flash .65s ease-out forwards; }
.cr3d.fail .cube-wrap { animation: cubeshake .6s ease-in-out; }
@keyframes cubeshake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }

@keyframes cubewin { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes flash { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes cubefail { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-10px); } 30% { transform: translateX(10px); } 45% { transform: translateX(-7px); } 60% { transform: translateX(7px); } 85% { transform: scale(.9); opacity: .55; } 100% { transform: scale(.9); opacity: .55; } }
.cr-title { font-size: 22px; font-weight: 700; margin: 6px 0 4px; }
.cr-title.red { color: #ff6b62; }
.cr-lost { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0; }
.cr-lost .gcard { border-radius: 14px; }
.cr-lost .ribbon { font-size: 9px; }
.cr-again { background: rgba(255,255,255,.12); margin-bottom: 4px; }

.cr-target { display: inline-flex; align-items: center; gap: 5px; }

.sheet.craft-sheet { transition: background .5s; }
.cf .face.result { box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.35); }
.cf .face.result .patlayer { border-radius: 22px; }
.cf .face.result img { position: relative; z-index: 1; }
.cf .face.failed { background: linear-gradient(145deg, #8a3a33, #5a211d); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.cf .face.failed .craft-ic { width: 46px; height: 46px; }
.cf .face.failed b { font-size: 20px; }

.sheet-wrap.instant, .sheet-wrap.instant .sheet { animation: none !important; }
.craft-ghost { position: fixed; z-index: 300; border-radius: 22px; display: grid; place-items: center; pointer-events: none; will-change: transform; transform-origin: center; overflow: hidden; }
.craft-ghost img { width: 84%; height: 84%; object-fit: contain; }
/* faces stay glued to the cube */
.cube, .cube-wrap { -webkit-transform-style: preserve-3d; }
.cf { -webkit-transform-style: flat; }
.cf .face { transform: translateZ(0.1px); }

/* broken gift (failed craft) */
.broken-gift { width: 54px; height: 54px; color: #fff; overflow: visible; display: inline-block; }
.broken-gift .half { transform-box: view-box; }
.broken-gift .half.l { transform-origin: 23px 43px; }
.broken-gift .half.r { transform-origin: 25px 43px; }
.broken-gift.split .half.l { animation: halfL .7s cubic-bezier(.3,1.5,.5,1) .15s forwards; }
.broken-gift.split .half.r { animation: halfR .7s cubic-bezier(.3,1.5,.5,1) .15s forwards; }
.cr3d.fail .broken-gift .half.l { animation: halfL .6s cubic-bezier(.3,1.5,.5,1) forwards; }
.cr3d.fail .broken-gift .half.r { animation: halfR .6s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes halfL { to { transform: translateX(-1.6px) rotate(-7deg); } }
@keyframes halfR { to { transform: translateX(1.6px) rotate(7deg); } }
.cr-core.fail .cr-anvil .broken-gift { width: 56px; height: 56px; margin-top: -14px; }
.cf .face.failed .broken-gift { width: 48px; height: 48px; }

/* plain (non-unique) gift view, Telegram style */
.saved-gift { text-align: center; padding: 30px 18px 0; position: relative; }
.saved-gift .hero-close, .saved-gift .hero-more { background: var(--chip); color: var(--text); }
.saved-gift .hero-anim { width: 150px; height: 150px; margin: 0 auto; }
.saved-gift .hero-anim img { width: 150px; height: 150px; object-fit: contain; }
.saved-gift h2 { margin: 6px 0 4px; font-size: 24px; font-weight: 700; }
.saved-gift .sg-sub { color: var(--text); opacity: .8; font-size: 15px; line-height: 1.35; max-width: 320px; margin: 0 auto; }
.pill-btn { display: inline-flex; align-items: center; background: var(--blue-soft); color: var(--blue); border-radius: 12px; padding: 2px 9px; font-size: 13px; font-weight: 500; margin-left: 8px; white-space: nowrap; }

/* rounded top corners for every sheet, including colored headers (some Android webviews ignore radius on scrolling boxes) */
.sheet { clip-path: inset(0 round 28px 28px 0 0); -webkit-clip-path: inset(0 round 28px 28px 0 0); isolation: isolate; }
/* only the sheet itself is rounded; a second rounded edge on the header leaves a light hairline in the corners */
.sheet > .hero, .sheet > .grab + .hero, .sheet > div > .hero:first-child { border-radius: 0 !important; margin-top: -1px; }
.sheet:has(> .grab + .hero) { background: linear-gradient(var(--bg), var(--bg)) 0 120px / 100% 100% no-repeat; }

/* upgraded gift cards: the backdrop fills the whole card, no light card color can show at the rounded edges */
.gcard.up { background: transparent !important; box-shadow: none; isolation: isolate; }
.gcard.up > .art { border-radius: inherit !important; position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.gcard.up { aspect-ratio: 1; }
.gcard.up > .art > .patlayer { border-radius: inherit; }
.cr-lost .gcard, .cr-lost .gcard > .art { border-radius: 14px !important; }
.cr-slot.filled { background-clip: padding-box; }

/* rounded clipping that also works in old Android/iOS webviews (no light hairline at the edge) */
.gcard, .gcard .art, .cr-slot, .cf .face, .profile-card, .preview-card, .hero-actions button { -webkit-mask-image: -webkit-radial-gradient(white, black); }
.gcard.up { background: transparent !important; border: 0 !important; outline: 0; }
.gcard.up .art { background-clip: border-box; }
.sheet { -webkit-mask-image: none; }
/* cheaper painting */
.pfloat { animation-duration: 4s; }
.gcard img.model { will-change: auto; }
@media (prefers-reduced-motion: reduce) { .pfloat, .loader-emoji { animation: none; } }

/* images can't be long-pressed, dragged or opened by link */
img, svg, .art, .gcard, .hero-anim, .lot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
img { pointer-events: none; }
body { -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---------- chat ---------- */
.tb-right { display: flex; gap: 8px; align-items: center; }
.chat-pill { position: relative; padding: 7px 10px; }
.chat-pill .ic { width: 20px; height: 20px; color: var(--blue); }
.cbadge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.cbadge[hidden] { display: none; }
.g-social { display: flex; gap: 10px; margin-bottom: 10px; }
.g-social .btn { flex: 1; padding: 13px 10px; border-radius: 22px; font-size: 15px; }
.g-social .btn .ic { width: 18px; height: 18px; }
.btn .ic { width: 18px; height: 18px; }

.chat-list { padding: 4px 0; }
.chat-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; text-align: left; }
.chat-row + .chat-row .cr-main { border-top: 1px solid var(--line); }
.chat-row .av { width: 50px; height: 50px; flex: none; }
.cr-main { flex: 1; min-width: 0; padding: 4px 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.cr-top, .cr-bot { display: flex; align-items: center; gap: 8px; }
.cr-top b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font-weight: 600; }
.cr-top b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-time { color: var(--muted); font-size: 12.5px; flex: none; }
.cr-last { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-last i { font-style: normal; color: var(--text); }
.cnt { font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 22px; text-align: center; flex: none; }
.badge-img, .badge-tick { flex: none; }

.sheet.chat-sheet { height: min(92vh, calc(var(--tg-viewport-height, 100vh) - 24px)); max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: var(--bg); }
.chat-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 20px 14px 10px; background: var(--card); }
.ch-close { width: 36px; height: 36px; border-radius: 50%; background: var(--chip); display: grid; place-items: center; flex: none; }
.ch-close .svg { width: 18px; height: 18px; }
.ch-peer { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-align: left; }
.ch-peer .av { width: 40px; height: 40px; flex: none; }
.ch-name { display: flex; flex-direction: column; min-width: 0; }
.ch-name b { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 16px; }
.ch-name b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-name > span { color: var(--muted); font-size: 13px; }
.chat-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; -webkit-overflow-scrolling: touch; }
.chat-msgs > :first-child { margin-top: auto; }
.chat-empty { text-align: center; color: var(--muted); padding: 30px 10px; margin: auto 0; }
.msg-more { height: 30px; }
.msg-day, .msg-sys { text-align: center; margin: 8px 0; }
.msg-day span, .msg-sys span { display: inline-block; padding: 4px 11px; border-radius: 12px; background: rgba(0, 0, 0, .22); color: #fff; font-size: 13px; font-weight: 500; }
html.dark .msg-day span, html.dark .msg-sys span { background: rgba(255, 255, 255, .12); }
.msg { display: flex; }
.msg.out { justify-content: flex-end; }
.bub { position: relative; max-width: 80%; padding: 7px 11px 6px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); overflow: hidden; min-width: 70px; }
.msg.in .bub { border-bottom-left-radius: 6px; }
.msg.out .bub { background: #e2f7cb; border-bottom-right-radius: 6px; }
html.dark .msg.out .bub { background: #2b5278; }
.m-text { white-space: pre-wrap; word-break: break-word; font-size: 15.5px; line-height: 1.33; padding-right: 54px; -webkit-user-select: text; user-select: text; }
.m-meta { position: absolute; right: 10px; bottom: 5px; display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.msg.out .m-meta { color: #4fae4e; }
html.dark .msg.out .m-meta { color: #8cb6e0; }
.ticks { width: 17px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ticks .t2 { display: none; }
.tick.read .ticks .t2 { display: inline; }
.tick { display: inline-flex; }
.msg.media .bub, .msg.t-offer .bub { padding: 0; }
.msg.t-image .bub, .msg.t-video .bub { padding: 3px; }
.msg.t-image .m-text, .msg.t-video .m-text { padding: 6px 62px 4px 8px; }
.msg.media .m-meta { background: rgba(0, 0, 0, .4); color: #fff; padding: 2px 7px; border-radius: 10px; bottom: 8px; right: 8px; }
.m-imgw { display: block; border-radius: 15px; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.m-img { display: block; max-width: 100%; width: 260px; max-height: 340px; object-fit: cover; }
.m-vid { display: block; width: 260px; max-width: 100%; max-height: 340px; border-radius: 15px; background: #000; }
.m-file, .m-up { display: flex; align-items: center; gap: 10px; text-align: left; padding: 3px 54px 14px 0; min-width: 0; }
.mf-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.mf-ic .ic { width: 22px; height: 22px; }
.mf-main { display: flex; flex-direction: column; min-width: 0; }
.mf-main b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.mf-main > span { color: var(--muted); font-size: 13px; }
.m-prog { display: block; width: 150px; height: 4px; border-radius: 2px; background: var(--chip); margin-top: 7px; overflow: hidden; }
.m-prog i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.msg.uploading .bub { opacity: .85; }

.offer { padding: 12px 12px 30px; width: 230px; max-width: 100%; text-align: center; }
.of-title { font-size: 13px; font-weight: 600; color: var(--blue); display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 9px; }
.of-title .ic { width: 16px; height: 16px; }
.of-card { display: block; width: 150px; aspect-ratio: 1; margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--chip); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.of-card .art { width: 100%; height: 100%; }
.of-card .art.plain { background: transparent; }
.of-name { font-weight: 600; margin-top: 8px; font-size: 15px; }
.of-name span { color: var(--muted); font-weight: 500; }
.of-price { font-size: 20px; font-weight: 700; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.of-price .ic.star { width: 20px; height: 20px; }
.of-st { font-size: 13px; color: var(--muted); margin-top: 3px; }
.of-st.accepted { color: var(--green); font-weight: 600; }
.of-st.declined, .of-st.expired { color: var(--red); }
.of-act { display: flex; gap: 8px; margin-top: 10px; }
.of-act .btn { flex: 1; padding: 10px; border-radius: 16px; }

.chat-input { position: relative; flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px calc(8px + var(--safe-b)); background: var(--card); }
/* custom emoji in the input: the textarea's text turns invisible and the mirror over it shows the text with pictures */
.chat-input textarea.ce-on { color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text); }
.chat-input textarea.ce-on::placeholder { color: transparent; }
.ci-mirror { position: absolute; z-index: 1; margin: 0; overflow: hidden; pointer-events: none; border-style: solid; border-color: transparent; background: none; white-space: pre-wrap; overflow-wrap: break-word; }
.ci-mirror[hidden] { display: none; }
.ci-ce { position: relative; color: transparent; }
.ci-cep { position: absolute; left: 50%; top: 50%; width: 1.3em; height: 1.3em; transform: translate(-50%, -50%); display: grid; place-items: center; }
.ci-cep > img, .ci-cep > video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ci-cep > .lot { inset: 0; }
.ci-cep .stk-e { font-size: 1em; color: var(--text); }
.chat-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: var(--chip); border-radius: 20px; padding: 10px 14px; font-size: 16px; line-height: 20px; max-height: 120px; }
.ci-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; }
.ci-btn .ic { width: 24px; height: 24px; }
.ci-btn.send { color: var(--muted); transition: color .15s, background .15s; }
.ci-btn.send.on { background: var(--blue); color: #fff; }
.ci-btn.send .ic { width: 20px; height: 20px; margin-left: -2px; }

.img-view { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .92); display: grid; place-items: center; animation: fade .2s; }
.img-view img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-view .hero-close { top: calc(14px + env(safe-area-inset-top, 0px)); }
/* photo/video without caption: no bubble rim around the picture */
.msg.media .bub { padding: 0; background: transparent !important; box-shadow: none; border-radius: 15px; }
.chat-msgs { scrollbar-width: none; }
.chat-msgs::-webkit-scrollbar { display: none; }

/* ---------- page headers (Buy a gift / Market) ---------- */
.page-head { background: var(--card); border-radius: 26px; padding: 22px 20px 20px; text-align: center; margin-bottom: 0; }
.page-head .ph-ic { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 6px; display: grid; place-items: center; color: var(--blue); }
.page-head .ph-ic .ic { width: 48px; height: 48px; }
.page-head h2 { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.page-head p { margin: 0 auto; max-width: 300px; font-size: 15px; line-height: 1.35; }
.ph-link { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; color: var(--muted); font-size: 13.5px; padding: 10px 0 14px; }
.ph-link .svg { width: 14px; height: 14px; color: var(--blue); }
.mk-mine { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.mk-mine .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border-radius: 16px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.mk-mine .chip .ic { width: 15px; height: 15px; color: var(--blue); }
.mk-title { font-size: 20px; font-weight: 700; margin: 2px 2px 10px; }

/* category tiles: original gift picture, green "Market" ribbon, cheapest price */
.gcard.mk-cat { padding: 12px 8px 12px; }
.gcard.mk-cat .art { width: 86%; }
.gcard.mk-cat .art > img.model { width: 92%; height: 92%; }
.ribbon.green { background: #2fc552; }

/* listings inside a category */
.fchips { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
.fchips::-webkit-scrollbar { display: none; }
.fchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--card); color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.fchip.on-w { color: var(--text); }
.fchip.on { background: var(--blue-soft); color: var(--blue); }
.fchip .ud { display: inline-grid; place-items: center; }
.fchip .ud .svg { width: 15px; height: 15px; }
.fchip.on .ud .svg { width: 12px; height: 12px; }
.fchip .price-ic { width: 20px; height: 20px; }
.svg.flip { transform: scaleX(-1); width: 16px; height: 16px; }
.gcard.mk-item .art > img.model { width: 74%; height: 74%; margin-bottom: 18%; }
.gcard.mk-item .price { bottom: 9px; background: rgba(0, 0, 0, .28); padding: 4px 10px; font-size: 13px; border-radius: 13px; }
.gcard.mk-item .price .ic.star { width: 14px; height: 14px; filter: none; }
.ribbon.num.dark { filter: none; background: rgba(0, 0, 0, .3) !important; font-size: 10px; }

/* filter picker */
.pf-list button { align-items: center; padding: 11px 16px; }
.pf-list button.sel { background: var(--blue-soft); }
.pf-img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.pf-dot { width: 36px; height: 36px; border-radius: 50%; flex: none; margin: 2px; }
.pf-pat { width: 34px; height: 34px; flex: none; margin: 3px; background: var(--text); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.pf-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pf-name i { font-style: normal; color: var(--muted); font-size: 13px; font-weight: 400; }
.pf-r { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.pf-r b { font-size: 14px; display: inline-flex; align-items: center; gap: 3px; }
.pf-r b .ic.star { width: 15px; height: 15px; }
.pf-r > span { font-size: 12px; color: var(--muted); }

/* star: a soft glow, and twinkling sparkles on store prices */
.ic.star { filter: drop-shadow(0 1px 1.5px rgba(230, 140, 0, .35)); }
.ic.star.w { filter: none; }
.price.spark { position: relative; }
.price.spark::before, .price.spark::after { content: ''; position: absolute; width: 7px; height: 7px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0C5.4 3.4 6.6 4.6 10 5 6.6 5.4 5.4 6.6 5 10 4.6 6.6 3.4 5.4 0 5 3.4 4.6 4.6 3.4 5 0z' fill='%23ffc414'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: twinkle 2.4s ease-in-out infinite; opacity: 0; }
.price.spark::before { left: 7px; top: -2px; }
.price.spark::after { left: 24px; bottom: -1px; width: 5px; height: 5px; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .price.spark::before, .price.spark::after { animation: none; opacity: 0; } }
.grid .gcard.up.mk-item { aspect-ratio: .8; }
.gcard.mk-item .art > img.model { width: 80%; height: auto; aspect-ratio: 1; margin-bottom: 22%; }
.fchips { margin: 0 -14px; padding: 0 14px 12px; scroll-padding: 0 14px; }

/* ---------- bottom bar with Chats + chats page ---------- */
.tabs { padding: 5px; min-width: 0; }
.tabs button { position: relative; font-size: 11px; min-width: 0; white-space: nowrap; letter-spacing: -.1px; }
.tabs button .ico, .tabs button .ico .ic { width: 24px; height: 24px; }
.tabs .cbadge { position: absolute; top: 1px; left: calc(50% + 5px); right: auto; }
@media (max-width: 370px) { .tabs button { font-size: 10px; } .avatar-btn { width: 56px; height: 56px; } }
.chats-page { min-height: 50vh; }
.srch { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 18px; padding: 0 8px 0 14px; height: 44px; margin-bottom: 12px; }
.srch .si { color: var(--muted); display: grid; place-items: center; }
.srch .si .svg { width: 18px; height: 18px; }
.srch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; -webkit-appearance: none; appearance: none; }
.srch input::-webkit-search-cancel-button { display: none; }
.srch .clr { width: 26px; height: 26px; border-radius: 50%; background: var(--chip); color: var(--muted); display: grid; place-items: center; }
.srch .clr .svg { width: 12px; height: 12px; }
.srch .clr[hidden], .srch-res[hidden], #cl[hidden], #sh-list[hidden] { display: none; }
.srch-h { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin: 4px 4px 8px; }
.spam-bar { display: flex; gap: 8px; align-items: flex-start; background: color-mix(in srgb, var(--red) 12%, var(--card)); color: var(--red); border-radius: 16px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 12px; }
.spam-bar .ic { flex: none; margin-top: 1px; }

/* chat header menu + locked input */
.chat-head #ch-more { margin-left: auto; }
.chat-head #ch-more .svg { width: 18px; height: 18px; }
.chat-lock { flex: none; background: var(--card); padding: 8px 12px calc(10px + var(--safe-b)); text-align: center; }
.chat-lock[hidden], .chat-input[hidden] { display: none; }
.lock-btn { width: 100%; padding: 12px; font-size: 16px; font-weight: 600; color: var(--blue); border-radius: 14px; }
.lock-txt { color: var(--red); font-size: 13.5px; line-height: 1.4; padding: 6px 4px; }
.lock-txt .ic { width: 15px; height: 15px; }

/* shared gift bubble */
.msg.t-gift .bub { padding: 0; }
.offer.shared { padding-bottom: 28px; }
.offer.shared .of-st .ic.star { width: 14px; height: 14px; }

/* share sheet */
.share-acts { display: flex; gap: 10px; margin-bottom: 16px; }
.share-acts button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--card); border-radius: 18px; padding: 14px 6px; font-size: 13.5px; font-weight: 500; }
.sa-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.sa-ic.tg { background: #2ea6ff; color: #fff; }
.sa-ic .ic { width: 22px; height: 22px; }
.chat-row.sent { opacity: .7; }
.sent-ok { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size: 13px; font-weight: 600; flex: none; }
.sent-ok .svg { width: 14px; height: 14px; }

/* gift links inside chats */
.nftl, .xlink { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; word-break: break-all; }
.msg.out .nftl, .msg.out .xlink { color: #168acd; }
html.dark .msg.out .nftl, html.dark .msg.out .xlink { color: #8cc8ff; }
.of-link { display: block; margin: 6px auto 0; font-size: 13px; text-decoration: none; }
.lprev { display: flex; gap: 10px; align-items: center; width: 100%; margin: 6px 0 16px; padding: 6px 8px 6px 10px; border-left: 3px solid var(--blue); border-radius: 6px 12px 12px 6px; background: color-mix(in srgb, var(--blue) 9%, transparent); text-align: left; }
.lp-art { width: 48px; height: 48px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--chip); overflow: hidden; }
.lp-art img { width: 80%; height: 80%; object-fit: contain; }
.lp-main { display: flex; flex-direction: column; min-width: 0; }
.lp-main b { font-size: 14px; color: var(--blue); }
.lp-main span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- sell: market / auction switch ---------- */
.seg { display: flex; background: var(--chip); border-radius: 14px; padding: 3px; margin: 8px 0 12px; }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 11px; font-weight: 600; font-size: 14.5px; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.seg .ic { width: 17px; height: 17px; }
.sheet .chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.sheet .chips .chip { background: var(--card); border-radius: 14px; padding: 7px 12px; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.sheet .chips .chip.active { background: var(--blue-soft); color: var(--blue); }
.sheet .chips .chip .ic.star { width: 14px; height: 14px; }
.field input[type="datetime-local"] { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; min-width: 0; color: var(--text); }
#s-auc[hidden] { display: none; }

/* ---------- auction box in the gift view ---------- */
.auc-box { background: var(--card); border-radius: 20px; padding: 14px 16px 10px; margin: 2px 0 12px; }
.auc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.auc-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #e8590c; font-size: 14px; }
.auc-left { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--muted); }
.auc-left b { color: var(--text); font-variant-numeric: tabular-nums; }
.auc-tag .ic, .auc-left .ic { width: 16px; height: 16px; }
.auc-row { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 8px; }
.auc-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auc-row span { font-size: 12.5px; color: var(--muted); }
.auc-row b { font-size: 17px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-row b .ic.star { width: 17px; height: 17px; }
.auc-lead { font-size: 15px !important; }
.auc-note { font-size: 13.5px; margin-top: 8px; font-weight: 600; }
.auc-note.ok { color: var(--green); }
.auc-hist { display: block; margin: 8px 0 2px; color: var(--blue); font-size: 14px; }
.btn.red-t { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.btn .ic { width: 18px; height: 18px; }
.tag-lead { font-size: 11px; font-weight: 600; color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.auc-pin { position: absolute; top: 8px; left: 8px; z-index: 3; background: rgba(0, 0, 0, .35); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 9px; font-variant-numeric: tabular-nums; }
.mk-mine { gap: 8px; }
.mk-title .ic { width: 20px; height: 20px; vertical-align: -3px; }

/* ---------- contests ---------- */
.ct-row { width: 100%; text-align: left; }
.ct-prize { display: grid; place-items: center; margin: 6px 0 4px; }
.ct-prize img { width: 110px; height: 110px; object-fit: contain; }
.ct-star .ic.star { width: 90px; height: 90px; }
.ct-ends { text-align: center; color: var(--muted); margin: -6px 0 14px; font-size: 14px; }
.ct-ends b { color: var(--text); font-variant-numeric: tabular-nums; }
.ct-ok { width: 26px; height: 26px; border-radius: 50%; background: var(--chip); color: var(--muted); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.ct-ok.y { background: var(--green); color: #fff; }
.ct-ok .svg { width: 15px; height: 15px; }
.btn.sm-btn { padding: 6px 14px; }

/* live auction */
.auc-box.flash { animation: aucflash .9s ease-out; }
@keyframes aucflash { 0% { box-shadow: 0 0 0 3px rgba(232, 89, 12, .55); } 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); } }
.auc-note.bad { color: var(--red); }
.auc-note .ic.star { width: 14px; height: 14px; }
.auc-last { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.auc-last > div { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; color: var(--muted); }
.auc-last > div.top { color: var(--text); }
.auc-last .av { width: 24px; height: 24px; flex: none; font-size: 11px; }
.auc-last .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auc-last b { display: inline-flex; align-items: center; gap: 3px; }
.auc-last .ic.star { width: 14px; height: 14px; }
.auc-rule { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* contests */
.ct-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 4px 8px; }
.ct-head h3 { margin: 0; font-size: 19px; }
.ct-head .btn .ic { width: 16px; height: 16px; }
.ct-gifts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 300px; }
.ct-g { width: 80px; height: 80px; border-radius: 18px; background: var(--card); display: grid; place-items: center; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.ct-g img { width: 80%; height: 80%; object-fit: contain; }
.ct-gifts:has(.ct-g:only-child) .ct-g { width: 120px; height: 120px; border-radius: 26px; }
.ct-more { align-self: center; color: var(--muted); font-weight: 600; }
.ct-by { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; color: var(--muted); font-size: 14px; margin: -2px 0 6px; }
.ct-by b { color: var(--blue); font-weight: 600; }
.ct-text { background: var(--card); border-radius: 16px; padding: 12px 14px; margin: 4px 0 12px; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.nc-h { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin: 12px 4px 8px; }
.nc .field textarea { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; resize: none; min-width: 0; }
.nc .field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; min-width: 0; }
.nc .field .ic { width: 18px; height: 18px; color: var(--muted); }
.nc .field .ic.star { color: initial; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-chk { font-size: 14px; gap: 8px; color: var(--text); }
.nc-chk input { width: 18px; height: 18px; flex: none !important; }
.nc-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nc-pg { width: 46px; height: 46px; border-radius: 12px; background: var(--card); display: grid; place-items: center; overflow: hidden; }
.nc-pg img { width: 80%; height: 80%; object-fit: contain; }
#nc-gifts[hidden], #nc-stars[hidden] { display: none; }
.row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.row-2 > .field { min-width: 0; }
.row-2 > .field input { width: 100%; min-width: 0; }
.sheet .pad.nc { overflow-x: hidden; }

/* admin's checkmark: right of the name, after the worn gift */
.name-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; vertical-align: -4px; margin-left: 4px; }
.name-tick .svg { width: 100%; height: 100%; }
.name-tick.sm { width: 17px; height: 17px; margin-left: 3px; vertical-align: -3px; }
.pname .name-tick { width: 26px; height: 26px; margin-left: 6px; }
.profile-card.worn .name-tick { filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.verified-note .name-tick { margin: 1px 0 0; }
.pname .name-tick { margin-left: 0; }
.offer.shared.sent .of-title { color: #e8590c; }
.msg.t-gift_sent .bub { padding: 0; }
.msg.t-gift_sent .m-text, .msg.t-gift .m-text { padding: 0 64px 12px 14px; margin-top: -18px; }
/* long @channel names wrap inside the card instead of sticking out of it */
.list-item .li-main, .ct-cond .li-main, .ct-text, .sub, .of-name, .cr-last, .lock-txt { overflow-wrap: anywhere; word-break: break-word; }
.ct-cond .list-item .btn { flex: none; }

/* verification sheet: checkmark card */
.tick-card { padding: 16px; }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.tc-name { display: flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 700; min-width: 0; }
.tc-name .name-tick { width: 22px; height: 22px; }
.tc-tag { font-size: 12px; font-weight: 600; color: #2ea6ff; background: color-mix(in srgb, #2ea6ff 14%, transparent); padding: 3px 8px; border-radius: 8px; flex: none; }
.perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.perks li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.35; }
.perks li .svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 1px; }
.v-h { font-size: 15px; font-weight: 700; margin: 4px 4px 8px; }
.v-h span { font-weight: 400; color: var(--muted); font-size: 13px; }

/* ---------- levels & rating ---------- */
.psub { display: flex; align-items: center; justify-content: center; gap: 6px; }
.lvl-pill { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 7px 0 4px; border-radius: 11px; background: rgba(46, 166, 255, .16); color: #2ea6ff; font-size: 12.5px; font-weight: 700; }
.profile-card.worn .lvl-pill { background: rgba(255, 255, 255, .22); color: #fff; }
.lvl-ic { width: 15px; height: 15px; flex: none; }
.lvl-pill b { font-weight: 700; }
.rt { padding-top: 34px !important; }
.rt-bar-wrap { position: relative; padding-top: 52px; }
.rt-pill { position: absolute; top: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; background: #2ea6ff; color: #fff; border-radius: 22px; padding: 8px 16px; font-size: 21px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px rgba(46, 166, 255, .35); }
.rt-pill::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #2ea6ff; }
.rt-pill span { font-size: 15px; font-weight: 600; opacity: .8; }
.rt-pill .crown { width: 22px; height: 22px; }
.rt-bar { position: relative; height: 38px; border-radius: 12px; background: var(--chip); overflow: hidden; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; }
.rt-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #2ea6ff; border-radius: 12px 0 0 12px; }
.rt-bar span { position: relative; padding: 0 14px; }
.rt-bar .l { color: #fff; }
.rt-note { text-align: center; color: var(--muted); font-size: 13.5px; margin: 10px 0 4px; }
.rt-list { display: flex; flex-direction: column; gap: 16px; margin: 6px 4px 22px; }
.rt-item { display: flex; gap: 14px; align-items: flex-start; }
.rt-ic { width: 28px; flex: none; color: var(--text); padding-top: 2px; }
.rt-ic .ic { width: 26px; height: 26px; }
.rt-item b { font-size: 16px; }
.rt-item p { margin: 3px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.rt-item .tag { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; border-radius: 5px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
.rt-item .tag.add { background: #2ea6ff; }
.rt-item .tag.sub { background: #8e8e93; }
/* leaderboard: three sort orders, all numbers on every row */
.lb-seg { margin: 0 0 12px; }
.lb-seg button { font-size: 13.5px; padding: 8px 4px; }
.lb-row .nm { flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
.lb-row .nm1 { display: flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; white-space: nowrap; }
.lb-row .nm1 > span { overflow: hidden; text-overflow: ellipsis; }
.lb-row .nm2 { display: flex; gap: 10px; color: var(--muted); font-size: 12.5px; }
.lb-st { display: inline-flex; align-items: center; gap: 3px; }
.lb-st .ic { width: 13px; height: 13px; }
.lb-st .lvl-ic { width: 12px; height: 12px; color: #2ea6ff; }
.lb-row > b { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; }
.lb-lv { display: inline-flex; align-items: center; gap: 3px; color: #2ea6ff; }
.lb-lv .lvl-ic { width: 16px; height: 16px; }
/* level badges (shapes like Telegram) */
.lvl { width: 26px; height: 26px; flex: none; display: inline-block; vertical-align: middle; overflow: visible; }
.lvl.xs { width: 17px; height: 17px; }
.lvl.sm { width: 22px; height: 22px; }
.lvl.lg { width: 30px; height: 30px; }
.lvl-btn { display: inline-grid; place-items: center; padding: 0; line-height: 0; }
.psub .lvl { width: 24px; height: 24px; }
.rt-bar span { display: inline-flex; align-items: center; gap: 6px; }
.lb-st .lvl.xs { margin-top: -1px; }

/* ---------- hold a gift: menu ---------- */
.ctx-wrap { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .18s; }
.ctx-wrap.on { opacity: 1; }
.ctx-in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 20px 16px calc(20px + var(--safe-b)); gap: 12px; overflow-y: auto; }
.ctx-card { position: relative; border-radius: 22px; background: var(--card); padding: 22px 16px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; transform: scale(.94); transition: transform .2s cubic-bezier(.2, .8, .2, 1); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.ctx-wrap.on .ctx-card { transform: scale(1); }
.ctx-card .patlayer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .3s; }
.ctx-card .patlayer.on { opacity: 1; }
.ctx-card img { width: 112px; height: 112px; object-fit: contain; position: relative; z-index: 1; }
.ctx-card b { font-size: 19px; margin-top: 8px; position: relative; z-index: 1; }
.ctx-card > span { font-size: 13.5px; color: var(--muted); position: relative; z-index: 1; }
.ctx-card.up b, .ctx-card.up > span { color: #fff; }
.ctx-card.up > span { opacity: .75; }
.ctx-card .ribbon { z-index: 2; }
.ctx-pin { position: absolute; top: 10px; left: 12px; color: #fff; z-index: 2; }
.ctx-pin .ic { width: 16px; height: 16px; }
.ctx-menu { align-self: flex-end; width: min(290px, 100%); background: var(--card); border-radius: 16px; overflow: hidden; transform: translateY(8px); opacity: 0; transition: transform .2s, opacity .2s; }
.ctx-wrap.on .ctx-menu { transform: none; opacity: 1; }
.ctx-menu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; font-size: 16px; text-align: left; }
.ctx-menu button + button { border-top: 1px solid var(--line); }
.ctx-menu button .ic { width: 22px; height: 22px; color: var(--muted); }
.ctx-sep { height: 6px; background: var(--bg); }
.ctx-sep + button { border-top: 0 !important; }
.menu .mc-cover { width: 22px; height: 22px; object-fit: contain; }

/* ---------- reorder mode ---------- */
.ro-bar { position: sticky; top: 58px; z-index: 15; display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 18px; padding: 10px 10px 10px 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.ro-bar > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ro-bar b { font-size: 16px; }
.ro-bar span { font-size: 12.5px; color: var(--muted); }
.ro-bar span .ic { width: 13px; height: 13px; }
.ro-grid .gcard { touch-action: pan-y; }
.ro-grid .ro-pinned { touch-action: none; cursor: grab; animation: jiggle .32s ease-in-out infinite alternate; }
.ro-grid .ro-pinned:nth-child(2n) { animation-delay: -.16s; }
@keyframes jiggle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.ro-grid .ro-off { opacity: .45; }
.ro-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .42); color: #fff; display: grid; place-items: center; z-index: 3; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ro-pin .ic { width: 22px; height: 22px; }
.ro-unpin { z-index: 3; }
.ro-hole { opacity: .25; animation: none !important; }
.ro-ghost { position: fixed; z-index: 130; pointer-events: none; transform: scale(1.06); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); border-radius: 18px; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ro-grid .ro-pinned { animation: none; } }

/* ---------- pinned gifts around the avatar: never on the name row, backdrop glow clearly visible ---------- */
.profile-card .pfloats { inset: auto 0 auto 0; top: 74px; height: 0; }
.pfloat { width: 36px; height: 36px; }
.pfloat::before { inset: -15px; opacity: 1; background: radial-gradient(circle, var(--g1, rgba(255, 255, 255, .9)) 0%, var(--g2, rgba(255, 255, 255, .45)) 42%, transparent 70%); }
.pseen { font-size: 13.5px; color: var(--muted); margin-top: 3px; position: relative; z-index: 2; }
.pseen.on { color: #2ea6ff; }
.profile-card.worn .pseen { color: rgba(255, 255, 255, .75); }
.profile-card.worn .pseen.on { color: #fff; }

/* ---------- online status ---------- */
.chat-row .av { position: relative; }
.on-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2.5px var(--card); }
.ch-st { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-st.on { color: #2ea6ff !important; }

/* ---------- send a gift (like Telegram) ---------- */
.send-pill { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 48px); height: 46px; padding: 0 20px; border-radius: 23px; background: var(--blue); color: #fff; font-size: 15.5px; font-weight: 600; box-shadow: 0 6px 20px rgba(29, 140, 248, .38); pointer-events: auto; }
.send-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.send-pill b { font-weight: 700; }
.send-pill .ic { width: 20px; height: 20px; flex: none; }
.send-pill-wrap { position: sticky; bottom: calc(10px + var(--safe-b)); display: flex; justify-content: center; margin-top: 12px; z-index: 5; pointer-events: none; }
.send-fab-wrap { position: fixed; left: 0; right: 0; bottom: calc(92px + var(--safe-b)); display: flex; justify-content: center; z-index: 25; pointer-events: none; }
.pp-row { display: flex; gap: 10px; }
.pp-row .btn { flex: 1; }
.sg-head { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sg-head .av { width: 38px; height: 38px; flex: none; }
.sg-head h2 { margin: 0 !important; font-size: 21px !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-sub { margin-top: 6px; }
.sg-sub .link { color: var(--blue); }
.sg-tabs { margin: 0 0 12px; }
.sg-tabs button { font-size: 14px; padding: 8px 4px; }
.sg-note { text-align: left; margin: 0 2px 10px; }
.sg-card .price.sg-tr { font-weight: 600; padding: 4px 12px; }
.sg-to .av { width: 30px; height: 30px; flex: none; }

/* ---------- gift messages in chats: centered service line + card (like Telegram) ---------- */
.msg-gift { display: flex; flex-direction: column; align-items: center; margin: 4px 0 10px; }
.msg-gift .msg-sys { margin: 4px 0 8px; }
.msg-sys .ic.star { width: 14px; height: 14px; vertical-align: -2px; filter: none; }
.gcm { position: relative; width: min(290px, 86%); border-radius: 22px; overflow: hidden; text-align: center; padding: 14px 16px 16px; cursor: pointer; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.gcm.plain { background: var(--card); box-shadow: 0 2px 14px rgba(0, 0, 0, .07); }
.gcm-img { display: block; width: 124px; height: 124px; object-fit: contain; margin: 0 auto 8px; position: relative; z-index: 1; }
.gcm-top { position: relative; margin: -14px -16px 0; padding: 18px 0 2px; }
.gcm-top .patlayer { background-size: cover; background-position: center; }
.gcm-t { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; font-size: 15.5px; position: relative; z-index: 1; overflow-wrap: anywhere; }
.gcm-t b { font-weight: 700; }
.gcm-t .av { width: 20px; height: 20px; flex: none; font-size: 10px; }
.gcm-t .badge-tick, .gcm-t .badge-img { width: 18px; height: 18px; }
.gcm-d { color: var(--muted); font-size: 14px; line-height: 1.38; margin: 6px 2px 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.gcm-d.note { color: var(--text); font-size: 15px; }
.gcm-btn { display: inline-block; padding: 8px 24px; border-radius: 18px; background: var(--blue-soft); color: var(--blue); font-weight: 600; font-size: 15px; position: relative; z-index: 1; }
.gcm.up { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .16); }
.gcm-s { font-size: 14px; color: rgba(255, 255, 255, .75); margin-top: 2px; position: relative; z-index: 1; }
.gcm-tab { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 3px; margin: 10px 0 14px; font-size: 14px; position: relative; z-index: 1; }
.gcm-tab span { color: rgba(255, 255, 255, .68); text-align: right; }
.gcm-tab b { text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.gcm.up .gcm-btn { background: rgba(0, 0, 0, .22); color: #fff; text-shadow: none; }
.gcm-rib { position: absolute; top: 0; right: 0; width: 76px; height: 76px; overflow: hidden; z-index: 2; pointer-events: none; }
.gcm-rib span { position: absolute; top: 14px; right: -26px; width: 104px; transform: rotate(45deg); text-align: center; background: rgba(0, 0, 0, .22); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 0; text-shadow: none; }
.gcm.gone { cursor: default; }
.gcm.gone .gcm-img { opacity: .55; }
.gcm-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 8px; border-radius: 50%; background: var(--chip); color: var(--muted); }
.gcm-ic .ic { width: 30px; height: 30px; }

/* Verification sheet: perks of each badge */
.perks-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.perk { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: #1d8cf8; background: var(--blue-soft); border-radius: 7px; padding: 2px 6px; }
.perk .ic { width: 12px; height: 12px; }
.perk.none { color: var(--muted); background: var(--chip); }

/* ================= games ================= */
.gm-pill { padding: 7px 9px; }
.gm-pill .ic { width: 21px; height: 21px; color: #7c5cff; }
.lb-top { display: flex; align-items: center; gap: 7px; margin: 8px 0 2px; padding: 8px 12px; border-radius: 14px; background: var(--star-bg); font-size: 13.5px; font-weight: 500; }
.lb-top .badge-img, .lb-top .badge-tick { width: 20px; height: 20px; flex: none; }
/* banner on the More Stars page */
.gm-banner { width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 14px; border-radius: 22px; color: #fff; text-align: left; background: linear-gradient(135deg, #4b5bff 0%, #8b3ff2 60%, #ff4f8b 130%); box-shadow: 0 10px 26px rgba(91, 79, 255, .3); }
.gm-banner .xo-art { width: 58px; height: 58px; gap: 3px; padding: 5px; border-radius: 15px; }
.gb-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gb-t b { font-size: 18px; font-weight: 800; }
.gb-t span { font-size: 13.5px; opacity: .9; display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-t .gb-p { font-weight: 700; opacity: 1; }
.gb-t .gb-p .ic { width: 15px; height: 15px; flex: none; }
.gb-t .gb-s { display: block; font-size: 12.5px; opacity: .82; }
.gb-t .gb-s em { font-style: normal; font-weight: 700; color: #b8ffd6; }
.gb-go { padding: 8px 16px; border-radius: 16px; background: #fff; color: #5b3df0; font-weight: 800; font-size: 14px; }

.sheet.games-sheet, .sheet.game-sheet { color: #fff; background: radial-gradient(120% 55% at 50% 0%, #4a2fc4 0%, #251656 52%, #130c2b 100%); }
.sheet.game-sheet { min-height: min(86vh, 640px); }
.sheet.games-sheet .grab, .sheet.game-sheet .grab { background: rgba(255, 255, 255, .28); }
.gm-hub, .gm-lobby, .gm-room { padding: 4px 16px 6px; }
.gm-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-bottom: 4px; }
.gm-top > b { font-size: 17px; font-weight: 700; }
.gm-top > span { width: 36px; }
.gm-x { width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: #fff; }
.gm-x .svg { width: 16px; height: 16px; }
.gm-title { text-align: center; margin: 0 0 16px; }
.gm-logo { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 26px; display: grid; place-items: center; background: linear-gradient(135deg, #7c5cff, #ff5fa2); box-shadow: 0 12px 30px rgba(124, 92, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gm-logo .ic { width: 42px; height: 42px; color: #fff; stroke-width: 1.8; }
.gm-title h2 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.gm-title p { margin: 6px 0 0; color: rgba(255, 255, 255, .78); font-size: 15px; }
.gm-title p b { color: #ffd84d; display: inline-flex; align-items: center; gap: 3px; }
.gm-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 12px; border-radius: 24px; text-align: left; color: #fff; position: relative; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); transition: transform .15s; }
.gm-card:active { transform: scale(.98); }
.gm-card.xo { background: linear-gradient(135deg, #3a5bff 0%, #7b3ff2 100%); box-shadow: 0 12px 30px rgba(58, 91, 255, .35); }
.gm-card.rps { background: linear-gradient(135deg, #ff7a45 0%, #ff3d7f 100%); box-shadow: 0 12px 30px rgba(255, 61, 127, .3); }
.gm-card::after { content: ""; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
.gm-card > .svg { width: 18px; height: 18px; opacity: .85; flex: none; position: relative; z-index: 1; }
.gm-ct { flex: 1; min-width: 0; display: grid; gap: 3px; position: relative; z-index: 1; }
.gm-ct b { font-size: 19px; font-weight: 800; }
.gm-ct > span { font-size: 13.5px; opacity: .88; }
.gm-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.gm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 20px; background: rgba(0, 0, 0, .22); font-size: 12px; font-weight: 700; }
.gm-chip .ic { width: 14px; height: 14px; }
.gm-chip.live i { width: 7px; height: 7px; border-radius: 50%; background: #3dff8f; box-shadow: 0 0 0 3px rgba(61, 255, 143, .25); }
.xo-art { width: 76px; height: 76px; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; border-radius: 19px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.xo-art i { border-radius: 6px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; min-width: 0; min-height: 0; }
.xo-art .mk { width: 100%; height: 100%; }
.xo-art .mk path { stroke: #fff; stroke-width: 15; }
.xo-art .mk circle { stroke: #ffd84d; stroke-width: 15; }
.rps-art { width: 76px; height: 76px; flex: none; position: relative; }
.rps-art span { position: absolute; font-size: 33px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.rps-art span:nth-child(1) { left: 0; top: 6px; transform: rotate(-16deg); }
.rps-art span:nth-child(2) { right: 0; top: 0; transform: rotate(14deg); }
.rps-art span:nth-child(3) { left: 21px; bottom: 0; }
.gm-resume { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: 18px; background: rgba(61, 255, 143, .14); color: #c6ffe0; font-weight: 600; text-align: left; font-size: 14.5px; }
.gm-resume .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #3dff8f; animation: gmpulse 1.4s infinite; }
.gm-resume > span:nth-child(2) { flex: 1; min-width: 0; }
.gm-resume b { display: inline-flex; align-items: center; gap: 4px; color: #fff; }
.gm-resume b .svg { width: 13px; height: 13px; }
@keyframes gmpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 255, 143, .5); } 50% { box-shadow: 0 0 0 6px rgba(61, 255, 143, 0); } }
.gm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.gm-stats div { background: rgba(255, 255, 255, .08); border-radius: 16px; padding: 10px 6px; text-align: center; display: grid; gap: 2px; }
.gm-stats b { font-size: 18px; display: inline-flex; justify-content: center; align-items: center; gap: 3px; }
.gm-stats span { font-size: 12px; color: rgba(255, 255, 255, .6); }
.gm-note { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .6); text-align: center; padding: 4px 6px 10px; }
.gm-empty { text-align: center; padding: 22px 10px; border-radius: 18px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .68); font-size: 14px; line-height: 1.45; }
.gm-empty div { font-size: 28px; margin-bottom: 6px; letter-spacing: 2px; }
/* lobby */
.gm-lhead { text-align: center; margin: 2px 0 16px; display: grid; justify-items: center; gap: 12px; }
.gm-lhead .xo-art { width: 104px; height: 104px; gap: 5px; padding: 8px; border-radius: 26px; background: linear-gradient(135deg, #3a5bff, #7b3ff2); box-shadow: 0 14px 30px rgba(58, 91, 255, .4); }
.gm-lhead .rps-art { width: 112px; height: 96px; }
.gm-lhead .rps-art span { font-size: 46px; }
.gm-lhead .rps-art span:nth-child(3) { left: 33px; }
.gm-lhead p { margin: 0; color: rgba(255, 255, 255, .74); font-size: 14.5px; max-width: 290px; }
.gm-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.gm-btn { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px; border-radius: 18px; font-weight: 700; font-size: 15.5px; color: #fff; transition: transform .12s; }
.gm-btn:active { transform: scale(.97); }
.gm-btn .ic { width: 20px; height: 20px; }
.gm-btn.new { background: linear-gradient(135deg, #2fd38a, #12a96b); box-shadow: 0 8px 22px rgba(18, 169, 107, .35); }
.gm-btn.bot { background: linear-gradient(135deg, #5b7bff, #8a4dff); box-shadow: 0 8px 22px rgba(91, 123, 255, .35); }
.gm-btn.share { background: rgba(255, 255, 255, .14); }
.gm-btn.ghost { background: rgba(255, 255, 255, .1); }
.gm-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 4px 8px; }
.gm-sec b { font-size: 17px; }
.gm-sec span { font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.gm-lots { display: grid; gap: 8px; margin-bottom: 10px; }
.gm-lot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.gm-lot.mine { background: rgba(61, 255, 143, .12); }
.gm-lot .av { width: 44px; height: 44px; flex: none; }
.gm-lt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.gm-lt .nm1 { display: flex; align-items: center; gap: 4px; font-weight: 600; overflow: hidden; white-space: nowrap; max-width: 100%; }
.gm-lt .nm1 > span { overflow: hidden; text-overflow: ellipsis; }
.gm-lt .nm1 > :not(span) { flex: none; }
.gm-lt .nm2 { font-size: 12.5px; color: rgba(255, 255, 255, .58); display: flex; align-items: center; gap: 6px; }
.gm-lot .btn { background: #fff; color: #4a2fc4; padding: 8px 18px; }
.gm-lot .btn.light { background: rgba(255, 255, 255, .16); color: #fff; }
/* room */
.gm-room { display: flex; flex-direction: column; min-height: min(80vh, 600px); }
.gp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin: 6px 0 12px; }
.gp { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 6px; opacity: .62; transition: opacity .25s; }
.gp.turn { opacity: 1; }
.gp-av { position: relative; width: 64px; height: 64px; }
.gp-ring { position: absolute; left: -6px; top: -6px; width: 76px; height: 76px; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.gp-ring circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3.5; }
.gp-ring .t { stroke: #3dff8f; stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; transition: stroke-dashoffset .25s linear, stroke .3s; }
.gp-ring .t.low { stroke: #ff5a6a; }
.gp.turn .gp-av { filter: drop-shadow(0 0 12px rgba(61, 255, 143, .45)); }
.gp-nm { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.gp-nm > span { overflow: hidden; text-overflow: ellipsis; }
.gp-nm > :not(span) { flex: none; }
.gp-mk { min-height: 26px; display: grid; place-items: center; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.gp-mk .mk { width: 26px; height: 26px; }
.gp-mk .mk path, .gp-mk .mk circle { stroke-width: 13; }
.gp-vs { align-self: center; margin-top: -30px; font-weight: 900; font-size: 17px; letter-spacing: 1px; color: rgba(255, 255, 255, .32); }
.gp-bot { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5b7bff, #8a4dff); }
.gp-bot .ic { width: 34px; height: 34px; color: #fff; }
.gp.vacant .gp-av { border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .25); display: grid; place-items: center; }
.gp-wait { display: flex; gap: 4px; }
.gp-wait i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); animation: gpdot 1.2s infinite; }
.gp-wait i:nth-child(2) { animation-delay: .2s; }
.gp-wait i:nth-child(3) { animation-delay: .4s; }
@keyframes gpdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.gp-ok, .gp-th { display: inline-flex; align-items: center; gap: 4px; }
.gp-ok .ball, .gp-ok .ic { width: 15px; height: 15px; flex: none; }
.gr-status { text-align: center; margin: 0 0 14px; min-height: 46px; }
.gr-status b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.2px; }
.gr-status span { font-size: 13.5px; color: rgba(255, 255, 255, .65); }
.gr-status i { font-style: normal; font-variant-numeric: tabular-nums; }
.gr-status em { font-style: normal; }
.gr-status em:not(:empty) + i:not(:empty)::before { content: " · "; }
.gr-status.mine b { color: #3dff8f; }
.xo-board { position: relative; width: min(100%, 330px); aspect-ratio: 1; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 12px; border-radius: 30px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 20px 40px rgba(0, 0, 0, .25); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.xo-cell { position: relative; min-width: 0; min-height: 0; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); display: grid; place-items: center; -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: transform .12s, background .25s; }
.xo-board.my .xo-cell:empty { background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); }
.xo-board.my .xo-cell:empty:active { transform: scale(.93); }
.xo-cell .mk { width: 76%; height: 76%; }
.xo-cell.win { background: linear-gradient(160deg, rgba(61, 255, 143, .38), rgba(61, 255, 143, .12)); }
.mk path, .mk circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.mk.x path { stroke: url(#gmX); }
.mk.o circle { stroke: url(#gmO); }
.xo-cell.new .mk { animation: mkpop .32s ease-out; }
.xo-cell.new .mk.x path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: mkdraw .2s ease-out forwards; }
.xo-cell.new .mk.x path + path { animation-delay: .13s; }
.xo-cell.new .mk.o circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: mkdraw .36s ease-out forwards; }
@keyframes mkdraw { to { stroke-dashoffset: 0; } }
@keyframes mkpop { 0% { transform: scale(.55); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.xo-line { position: absolute; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 24px); pointer-events: none; overflow: visible; }
.xo-line line { stroke: #fff; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .85)); }
.xo-line.anim line { stroke-dasharray: 400; stroke-dashoffset: 400; animation: mkdraw .45s .12s ease-out forwards; }
.rps-stage { display: grid; gap: 14px; }
.rps-duel { position: relative; height: 150px; border-radius: 26px; background: rgba(255, 255, 255, .07); display: flex; align-items: center; justify-content: space-around; padding-bottom: 14px; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.rps-duel .vs { font-weight: 900; font-size: 17px; color: rgba(255, 255, 255, .32); }
.rps-hand { font-size: 62px; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); transition: opacity .25s; }
.rps-hand.l { transform: rotate(90deg); }
.rps-hand.r { transform: scaleX(-1) rotate(90deg); }
.rps-hand.win { filter: drop-shadow(0 0 18px rgba(61, 255, 143, .95)); }
.rps-hand.lose { opacity: .4; }
.rps-duel.shake .rps-hand.l { animation: rpsL .32s ease-in-out 3; }
.rps-duel.shake .rps-hand.r { animation: rpsR .32s ease-in-out 3; }
@keyframes rpsL { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(-18px); } }
@keyframes rpsR { 0%, 100% { transform: scaleX(-1) rotate(90deg) translateX(0); } 50% { transform: scaleX(-1) rotate(90deg) translateX(-18px); } }
.rps-res { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-weight: 800; font-size: 14px; color: rgba(255, 255, 255, .85); }
.rps-res.win { color: #3dff8f; }
.rps-res.lose { color: #ff8a95; }
.rps-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rps-pick { display: grid; justify-items: center; gap: 6px; padding: 14px 4px 11px; border-radius: 22px; color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); -webkit-user-select: none; user-select: none; touch-action: manipulation; transition: transform .15s, opacity .2s, box-shadow .2s; }
.rps-pick span { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.rps-pick b { font-size: 13px; }
.rps-pick:active { transform: scale(.94); }
.rps-pick.sel { background: linear-gradient(160deg, rgba(61, 255, 143, .45), rgba(61, 255, 143, .14)); box-shadow: 0 0 0 2px #3dff8f, 0 10px 24px rgba(61, 255, 143, .22); }
.rps-picks.done .rps-pick:not(.sel) { opacity: .32; }
.rps-picks.off { pointer-events: none; }
.rps-hist { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 26px; }
.rps-hist span { padding: 4px 10px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: 13px; }
.gw { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 6px 0; }
.gw-radar { position: relative; width: 180px; height: 180px; display: grid; place-items: center; margin-bottom: 4px; }
.gw-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(140, 110, 255, .75); opacity: 0; animation: radar 2.4s ease-out infinite; }
.gw-radar span:nth-child(2) { animation-delay: .8s; }
.gw-radar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes radar { 0% { transform: scale(.42); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.gw-av { position: relative; z-index: 1; width: 78px; height: 78px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 0 30px rgba(124, 92, 255, .6); }
.gw b { font-size: 19px; }
.gw p { margin: 0; color: rgba(255, 255, 255, .66); font-size: 14px; max-width: 290px; }
.gw-prize { margin-top: 8px; padding: 7px 14px; font-size: 13.5px; background: rgba(255, 200, 40, .14); color: #ffd84d; }
.gr-foot { margin-top: auto; padding-top: 16px; display: grid; gap: 8px; }
.gr-leave { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: rgba(255, 255, 255, .58); font-size: 14px; font-weight: 600; }
.gr-leave .ic { width: 17px; height: 17px; }
/* result */
.gr-res .gr-card { padding: 22px 18px 6px; text-align: center; }
.gr-emo { width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 30px; display: grid; place-items: center; background: linear-gradient(135deg, #6d7bff, #9b5cff); box-shadow: 0 14px 34px rgba(109, 123, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .35); animation: popin .45s cubic-bezier(.2, .9, .3, 1.3); }
.gr-emo .ic { width: 50px; height: 50px; color: #fff; stroke-width: 1.8; }
.gr-card.win .gr-emo { background: linear-gradient(135deg, #ffd84d, #ff9f1a); box-shadow: 0 14px 34px rgba(255, 170, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
.gr-card.lose .gr-emo { background: linear-gradient(135deg, #ff6b8b, #b23cff); box-shadow: 0 14px 34px rgba(255, 90, 140, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gr-card.draw .gr-emo { background: linear-gradient(135deg, #3dd6ff, #3b7cff); box-shadow: 0 14px 34px rgba(60, 160, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gr-card.closed .gr-emo { background: linear-gradient(135deg, #8b8fa8, #555a72); box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.gr-card h3 { margin: 0; font-size: 27px; font-weight: 900; color: #fff; }
.gr-card.win h3 { background: linear-gradient(90deg, #ffe773, #ffb800); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gr-card p { margin: 8px auto 0; max-width: 300px; color: rgba(255, 255, 255, .72); font-size: 14.5px; }
.gr-card p.gr-np { color: #ffd84d; }
.gr-prize { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 9px 18px; border-radius: 22px; background: rgba(255, 200, 40, .16); color: #ffd84d; font-weight: 900; font-size: 22px; }
.gr-prize .ic { width: 22px; height: 22px; }
.gr-btns { display: grid; gap: 8px; margin-top: 18px; }
@keyframes popin { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gw-radar span, .gm-resume .dot, .gp-wait i { animation: none; } .gw-radar span:first-child { opacity: .5; transform: scale(.8); } }
.gm-room.waiting .gp-row, .gm-room.waiting .gr-status { display: none; }
.gm-room.waiting .gr-stage { margin-top: 28px; }
.gm-empty .ic { width: 30px; height: 30px; opacity: .8; }
.gm-note .ic { width: 14px; height: 14px; vertical-align: -2px; }
.hand-ic { stroke-width: 1.7; }
.rps-hand .hand-ic { width: 64px; height: 64px; color: #fff; }
.rps-pick .hand-ic { width: 44px; height: 44px; color: #fff; }
.rps-art.ics span { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.rps-art.ics .hand-ic { width: 24px; height: 24px; color: #fff; }
.gm-lhead .rps-art.ics span { width: 54px; height: 54px; border-radius: 17px; }
.gm-lhead .rps-art.ics .hand-ic { width: 32px; height: 32px; }
.rps-hist .hand-ic { width: 15px; height: 15px; vertical-align: -3px; }
.gp-mk .ic { width: 15px; height: 15px; }

/* ---------- channels & groups (like Telegram) ---------- */
.fab { position: fixed; right: 18px; bottom: calc(96px + var(--safe-b)); z-index: 25; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(29, 140, 248, .4); transition: transform .15s; }
.fab:active { transform: scale(.92); }
.fab .ic { width: 24px; height: 24px; }
.rk-ic { display: inline-grid; place-items: center; flex: none; color: var(--text); opacity: .75; }
.rk-ic .ic { width: 15px; height: 15px; }
.mute-ic { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.mute-ic .ic { width: 14px; height: 14px; }
.cnt.mut { background: #b4b4b9; }
html.dark .cnt.mut { background: #4a4a50; }
/* Telegram's avatar colors for channels and groups without a photo */
.avatar.rc0 { background: linear-gradient(135deg, #ff885e, #ff516a); }
.avatar.rc1 { background: linear-gradient(135deg, #ffcd6a, #ffa85c); }
.avatar.rc2 { background: linear-gradient(135deg, #82b1ff, #665fff); }
.avatar.rc3 { background: linear-gradient(135deg, #a0de7e, #54cb68); }
.avatar.rc4 { background: linear-gradient(135deg, #53edd6, #28c9b7); }
.avatar.rc5 { background: linear-gradient(135deg, #72d5fd, #2a9ef1); }
.avatar.rc6 { background: linear-gradient(135deg, #e0a2f3, #d669ed); }

/* room: pinned bar, bubbles, reactions, reply/edit bar */
.rm-pin { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 7px 14px; background: var(--card); border-top: 1px solid var(--line); text-align: left; }
.rm-pin[hidden] { display: none; }
.rp-line { width: 3px; align-self: stretch; border-radius: 2px; background: var(--blue); flex: none; }
.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rp-main b { color: var(--blue); font-size: 13.5px; font-weight: 600; }
.rp-main span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-x, .rp-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; }
.rp-x .svg { width: 14px; height: 14px; }
.rp-ic .ic { width: 18px; height: 18px; }
.room-sheet .m-text { padding-right: 0; }
.room-sheet .m-meta { gap: 4px; }
.room-sheet .m-meta .ic, .m-ghost .ic { width: 13px; height: 13px; }
.m-ghost { display: inline-flex; align-items: center; gap: 4px; visibility: hidden; font-size: 11.5px; margin-left: 10px; white-space: nowrap; pointer-events: none; }
.m-views { display: inline-flex; align-items: center; gap: 2px; }
.m-views b { font-weight: 400; }
.m-auth { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.post .bub { max-width: 88%; min-width: 120px; border-bottom-left-radius: 18px; }
.msg.grp { align-items: flex-end; gap: 6px; }
.m-av { width: 34px; height: 34px; flex: none; }
.m-av button { width: 34px; height: 34px; display: block; }
.m-from { display: flex; align-items: baseline; gap: 10px; width: 100%; min-width: 0; font-weight: 600; font-size: 14px; margin-bottom: 1px; text-align: left; }
.m-from span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-from i { margin-left: auto; font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); flex: none; }
.m-reply { display: flex; flex-direction: column; width: 100%; min-width: 0; margin: 2px 0 5px; padding: 4px 9px; border-left: 3px solid var(--rc); border-radius: 5px 10px 10px 5px; background: color-mix(in srgb, var(--rc) 13%, transparent); text-align: left; }
.m-reply b { color: var(--rc); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-reply span { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.msg.t-image .m-reply, .msg.t-video .m-reply, .msg.t-image .m-from, .msg.t-video .m-from { margin-left: 6px; margin-right: 6px; width: auto; }
.msg.t-image .m-from, .msg.t-video .m-from { margin-top: 4px; }
.m-reacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.msg.t-image .m-reacts, .msg.t-video .m-reacts { padding: 0 6px 4px; }
.rx { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 7px; border-radius: 14px; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); font-size: 13px; font-weight: 600; }
.rx span { font-size: 16px; line-height: 1; }
.rx.me { background: var(--blue); color: #fff; }
.msg.out .rx { background: rgba(79, 174, 78, .17); color: #3a8c39; }
.msg.out .rx.me { background: #4fae4e; color: #fff; }
html.dark .msg.out .rx { background: rgba(255, 255, 255, .12); color: #d3e6f8; }
html.dark .msg.out .rx.me { background: #5aa0e0; color: #fff; }
.msg.hl .bub { animation: rm-hl 1.6s ease; }
@keyframes rm-hl { 0%, 45% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 50%, transparent); } }
.rm-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 2px 14px; background: var(--card); border-top: 1px solid var(--line); }
.rm-bar[hidden] { display: none; }
.rb-ic { color: var(--blue); display: grid; place-items: center; flex: none; }
.rb-ic .ic { width: 20px; height: 20px; }
.rb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; border-left: 2px solid var(--blue); padding-left: 9px; }
.rb-main b { color: var(--blue); font-size: 13.5px; font-weight: 600; }
.rb-main span { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; }
.rb-x .svg { width: 14px; height: 14px; }
.lock-txt.muted { color: var(--muted); }
.ci-btn[hidden] { display: none; }
.rx-bar { display: flex; justify-content: space-between; gap: 2px; background: var(--card); border-radius: 28px; padding: 6px; margin-bottom: 10px; }
.rx-bar button { flex: 1; max-width: 46px; aspect-ratio: 1; border-radius: 50%; font-size: 25px; display: grid; place-items: center; transition: transform .12s; }
.rx-bar button:active { transform: scale(1.3); }
.rx-bar button.on { background: var(--blue-soft); }

/* channel / group page */
.rinfo .profile-card { margin-bottom: 12px; }
.ri-acts { display: flex; gap: 8px; margin-bottom: 12px; }
.ri-acts button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card); border-radius: 16px; padding: 10px 2px 9px; font-size: 12.5px; font-weight: 500; color: var(--blue); }
.ri-acts button span { display: grid; place-items: center; }
.ri-acts .ic { width: 22px; height: 22px; }
.ri-acts button.pri { background: var(--blue); color: #fff; }
.ri-box { padding: 2px 16px; }
.ri-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--line); }
.ri-row:last-child, .ri-nav:last-child { border-bottom: 0; }
.ri-t { font-size: 15.5px; white-space: pre-wrap; word-break: break-word; -webkit-user-select: text; user-select: text; }
.ri-t.lnk { color: var(--blue); word-break: break-all; }
.ri-l { font-size: 13px; color: var(--muted); margin-top: 1px; }
.ri-nav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 16px; }
.ri-nav .ic { width: 22px; height: 22px; color: var(--blue); flex: none; }
.ri-nav span { flex: 1; min-width: 0; }
.ri-nav i { font-style: normal; color: var(--muted); font-size: 14px; }
.ri-tabs { margin: 2px 0 12px; }
.ri-foot { margin-top: 14px; }
.role-tag { flex: none; font-size: 12.5px; color: var(--muted); }
.cr-last.on { color: #2ea6ff; }
.add-av { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.add-av .ic { width: 23px; height: 23px; }
.add-row .cr-top b span { color: var(--blue); }
.rlist[hidden], #rm-list[hidden] { display: none; }
.rlink { word-break: break-all; -webkit-user-select: text; user-select: text; }

/* create / edit forms */
.rf-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rf-av { position: relative; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--blue); color: #fff; overflow: hidden; }
.rf-av > .ic { width: 28px; height: 28px; }
.rf-av img { width: 100%; height: 100%; object-fit: cover; }
.rf-cam { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .28); }
.rf-cam .ic { width: 24px; height: 24px; }
.rf-fields { flex: 1; min-width: 0; }
.rf-fields .field { margin: 0; }
.rf-link .rf-pre { color: var(--muted); font-size: 16px; }
.rf-st { text-align: left; margin: -2px 6px 12px; }
.rf-st[hidden], #rf-pub[hidden], #re-pub[hidden] { display: none; }
.rf-st.ok { color: var(--green); }
.rf-st.bad { color: var(--red); }
.rform .seg { margin-top: 0; }
.rights { padding: 2px 16px; }
.rt-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; cursor: pointer; }
.rt-row:last-child { border-bottom: 0; }
.rt-row > span:first-child { flex: 1; display: flex; flex-direction: column; }
.rt-row small { color: var(--muted); font-size: 13px; }
.rt-row.off { opacity: .45; }
.seg.slow button { padding: 8px 0; font-size: 13px; }
.chat-list.pick .chat-row, .room-form .srch-res .chat-row { position: relative; }
.room-form .chat-row.on .av::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--card);
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.rjoin { text-align: center; }
.rj-av { width: 96px; height: 96px; margin: 10px auto 8px; }
.rjoin h2 { display: inline-flex; align-items: center; gap: 6px; }
.rjoin .btn { margin-top: 6px; }
.rx-ic { display: inline-grid; place-items: center; font-style: normal; }
.rx .rx-ic .ic { width: 15px; height: 15px; }
.rx-bar.ics button { color: var(--blue); }
.rx-bar .rx-ic .ic { width: 24px; height: 24px; }

/* ---------- private chats: reactions, edited, the time after the last line (like Telegram) ---------- */
.m-text.g { padding-right: 0; }
.msg.t-image .m-text.g, .msg.t-video .m-text.g { padding: 6px 8px 4px; }
.m-meta .m-ed { margin-right: 1px; }
.rx-avs { display: inline-flex; align-items: center; }
.rx-avs > i { display: block; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--card); }
.rx-avs > i + i { margin-left: -5px; }
.rx-avs .avatar { font-size: 9px; }
.rx.me .rx-avs > i { box-shadow: 0 0 0 1.5px var(--blue); }
.msg.out .rx .rx-avs > i { box-shadow: 0 0 0 1.5px #e2f7cb; }
.msg.out .rx.me .rx-avs > i { box-shadow: 0 0 0 1.5px #4fae4e; }
html.dark .msg.out .rx .rx-avs > i { box-shadow: 0 0 0 1.5px #2b5278; }
html.dark .msg.out .rx.me .rx-avs > i { box-shadow: 0 0 0 1.5px #5aa0e0; }
.msg.t-offer .m-reacts, .msg.t-gift .m-reacts { padding: 0 12px 10px; margin-top: -18px; }
.msg.t-file .m-reacts { margin-top: -6px; }
.msg-gift .m-reacts { justify-content: center; margin-top: 7px; }
.msg-gift .rx { background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.msg-gift .rx.me { background: var(--blue); }
.chat-msgs img { -webkit-touch-callout: none; }

/* ---------- the app's notifications chat ("DE Upgrade") ---------- */
.avatar.svc-av { background: linear-gradient(135deg, #5ac8fa, #1d8cf8 55%, #6b5cf6); color: #fff; }
.avatar.svc-av .ic { width: 52%; height: 52%; }
.svc-sheet .msg.svc .bub { max-width: 86%; }
.nt-l { color: var(--blue); font-weight: 600; cursor: pointer; }
.svc-sheet .lprev { margin-bottom: 18px; }
.svc-sheet .m-text b { font-weight: 600; }
.svc-sheet .m-text .ic.star { width: 15px; height: 15px; vertical-align: -2px; }
.svc-sheet .ch-peer { cursor: default; }

/* ---------- More Stars: ended contests ---------- */
.ct-ended { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; font-size: 15.5px; }
.ct-ended .li-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #8e8e93; color: #fff; flex: none; }
.ct-ended .li-ico .ic { width: 20px; height: 20px; }
.ct-ended .ce-t { flex: 1; }
.ct-ended b { color: var(--muted); font-weight: 500; }
.ct-ended .chev { color: var(--muted); font-size: 20px; }

/* ---------- referrals: who already bought a gift (the bonus came) ---------- */
.ref-rule { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; line-height: 1.35; }
.ref-row { width: 100%; text-align: left; }
.ref-row .nm { display: flex; flex-direction: column; }
.ref-row .nm b { display: flex; align-items: center; gap: 4px; font-weight: 600; min-width: 0; }
.ref-row .nm b { max-width: 100%; }
.ref-row .nm b > * { flex: none; }
.ref-row .nm b > .rn { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-row .nm > span { color: var(--muted); font-size: 12.5px; }
.ref-st { flex: none; font-size: 13px; color: var(--muted); background: var(--chip); border-radius: 10px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 3px; }
.ref-st.ok { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); font-weight: 600; }
.ref-st .ic.star { width: 13px; height: 13px; }
.ref-st .svg { width: 12px; height: 12px; }
.stats > div { min-width: 0; }
.stats.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.s3 > div { padding: 12px; }
.stats.s3 b { font-size: 20px; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.stats.s3 b .ic.star { width: 18px; height: 18px; flex: none; }

/* ---------- channel comments (discussion group) ---------- */
/* the bar at the bottom of a post: "Leave a comment" / faces + "N comments"; the time stays above it */
.bub.cm { padding-bottom: 0; }
.bub.cm .m-meta { bottom: 47px; }
.m-cm { display: flex; align-items: center; gap: 8px; width: calc(100% + 22px); height: 40px; box-sizing: border-box; margin: 8px -11px 0; padding: 0 10px 0 12px;
  border-top: 1px solid var(--line); color: var(--blue); font-size: 14.5px; font-weight: 500; text-align: left; }
.m-cm:active { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.m-cm .mc-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-cm .mc-ic { display: grid; place-items: center; flex: none; }
.m-cm .mc-ic .ic { width: 20px; height: 20px; }
.m-cm .mc-go { display: grid; place-items: center; flex: none; color: var(--muted); }
.m-cm .mc-go .ic { width: 18px; height: 18px; }
.mc-avs { display: inline-flex; flex: none; }
.mc-avs i { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 2px var(--card); font-style: normal; }
.mc-avs i + i { margin-left: -8px; }
.mc-avs .avatar { width: 100%; height: 100%; font-size: 11px; border-radius: 50%; }
/* the comments sheet: the post on top, then the comments like a group */
.cmt-head { cursor: default; }
.cmt-sp { visibility: hidden; }
.cmt-post .msg.post .bub { max-width: 100%; }
.cmt-start { margin: 12px 0; }
.msg.fwd .m-from i { text-transform: lowercase; }

/* ---------- voice messages and round video messages ---------- */
.ci-btn.rec { color: var(--muted); }
.ci-btn.rec .svg, .ci-btn.rec .ic { width: 24px; height: 24px; }
.msg.t-voice .bub { min-width: 236px; padding-bottom: 7px; }
.m-voice { display: flex; align-items: center; gap: 10px; padding: 2px 0 0; cursor: pointer; }
.vo-btn { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--blue); color: #fff; }
.msg.out .vo-btn { background: #4fae4e; }
html.dark .msg.out .vo-btn { background: #6ab3f3; }
.vo-btn .svg { width: 20px; height: 20px; }
.vo-btn .i-play .svg { margin-left: 2px; }
.m-voice .i-pause, .m-voice.playing .i-play { display: none; }
.m-voice.playing .i-pause { display: inline; }
.vo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 52px; }
.vo-wave { display: flex; align-items: center; gap: 2px; height: 24px; color: var(--blue); }
.msg.out .vo-wave { color: #4fae4e; }
html.dark .msg.out .vo-wave { color: #8cb6e0; }
.vo-wave i { flex: 1; max-width: 3px; min-height: 3px; border-radius: 2px; background: currentColor; opacity: .32; }
.vo-wave i.on { opacity: 1; }
.vo-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.msg.out .vo-time { color: #4fae4e; }
html.dark .msg.out .vo-time { color: #8cb6e0; }
/* round video: a circle without a bubble, the time in a pill */
.msg.t-round .bub { background: none; box-shadow: none; padding: 0; overflow: visible; min-width: 0; }
.msg.t-round .m-meta { bottom: 8px; right: 8px; background: rgba(0, 0, 0, .42); color: #fff; padding: 1px 7px; border-radius: 10px; }
.msg.t-round .m-meta .tick { color: #fff; }
.msg.t-round .m-reply { background: var(--card); margin-bottom: 6px; }
.msg.t-round .m-reacts { margin-top: 6px; }
.m-round { position: relative; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: #1c1c1e; cursor: pointer; transition: width .2s, height .2s; }
.m-round.playing { width: 260px; height: 260px; }
.m-round video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rd-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.rd-ring circle { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2.6; stroke-linecap: round; }
.rd-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 0, 0, .42); color: #fff; display: grid; place-items: center; pointer-events: none; }
.rd-play .svg { width: 24px; height: 24px; margin-left: 3px; }
.m-round.playing .rd-play { opacity: 0; }
.rd-time { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(0, 0, 0, .42); color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 10px; font-variant-numeric: tabular-nums; pointer-events: none; }
.msg.t-round .rd-time { left: 16px; transform: none; }
/* recording */
.rec-ov { position: fixed; z-index: 400; }
.rec-ov.rec-voice { left: 0; right: 0; bottom: 0; }
.rec-bar { display: flex; align-items: center; gap: 10px; background: var(--card); padding: 10px 10px calc(10px + var(--safe-b)); box-shadow: 0 -1px 0 var(--line); }
.rec-x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--muted); flex: none; }
.rec-x .svg { width: 16px; height: 16px; }
.rec-send { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; flex: none; }
.rec-send .ic { width: 22px; height: 22px; margin-left: -2px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; flex: none; animation: recblink 1s ease-in-out infinite; }
@keyframes recblink { 50% { opacity: .25; } }
.rec-t { font-variant-numeric: tabular-nums; font-size: 16px; }
.rec-hint { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ov.rec-round { inset: 0; background: rgba(0, 0, 0, .78); display: grid; place-items: center; }
.rec-box { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; }
.rec-circle { position: relative; width: min(72vw, 300px); height: min(72vw, 300px); border-radius: 50%; overflow: hidden; background: #000; }
.rec-circle video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.rec-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rec-ring circle { fill: none; stroke: #ff3b30; stroke-width: 2.4; stroke-linecap: round; }
.rec-row { display: flex; align-items: center; gap: 8px; }
.rec-round .rec-hint { color: rgba(255, 255, 255, .6); flex: none; }
.rec-acts { display: flex; gap: 40px; }
.rec-round .rec-x { background: rgba(255, 255, 255, .16); color: #fff; width: 56px; height: 56px; }
.rec-round .rec-send { width: 56px; height: 56px; }

/* ---------- games v2: checkers, chess, penalty, table tennis, bot levels ---------- */
.gm-card.checkers { background: linear-gradient(135deg, #2e9d6a 0%, #146b52 100%); box-shadow: 0 12px 30px rgba(20, 107, 82, .35); }
.gm-card.chess { background: linear-gradient(135deg, #5a5f73 0%, #23263a 100%); box-shadow: 0 12px 30px rgba(35, 38, 58, .4); }
.gm-card.penalty { background: linear-gradient(135deg, #3fbf4f 0%, #138a6b 100%); box-shadow: 0 12px 30px rgba(19, 138, 107, .35); }
.gm-card.pingpong { background: linear-gradient(135deg, #ff9f2e 0%, #e2453c 100%); box-shadow: 0 12px 30px rgba(226, 69, 60, .35); }
.ck-art, .ch-art, .pen-art, .pp-art { width: 76px; height: 76px; flex: none; border-radius: 20px; position: relative; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.ck-art { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); place-items: stretch; padding: 8px; gap: 0; overflow: hidden; }
.ck-art i { display: grid; place-items: center; min-width: 0; min-height: 0; background: rgba(255, 255, 255, .85); }
.ck-art i:nth-child(1) { border-top-left-radius: 8px; } .ck-art i:nth-child(4) { border-top-right-radius: 8px; }
.ck-art i:nth-child(13) { border-bottom-left-radius: 8px; } .ck-art i:nth-child(16) { border-bottom-right-radius: 8px; }
.ck-art i.d { background: rgba(0, 0, 0, .28); }
.ck-art b { width: 78%; height: 78%; border-radius: 50%; display: block; }
.ck-art b.w { background: radial-gradient(circle at 35% 30%, #fff, #e8dcc2); box-shadow: 0 2px 0 #b9a77f; }
.ck-art b.b { background: radial-gradient(circle at 35% 30%, #5b5b66, #1c1c22); box-shadow: 0 2px 0 #000; }
.ck-art b.k { box-shadow: 0 2px 0 #000, inset 0 0 0 3px #ffd84d; }
.ch-art span { position: absolute; display: block; line-height: 0; }
.ch-art span .pcs { width: 100%; height: 100%; }
.ch-art span.w { left: 4%; bottom: 5%; width: 62%; height: 62%; z-index: 1; }
.ch-art span.b { right: 4%; top: 5%; width: 50%; height: 50%; }
.pen-art > svg { width: 62px; position: absolute; top: 12px; }
.pen-art span { position: absolute; bottom: 7px; width: 24px; height: 24px; line-height: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.pen-art span .ball, .pp-art span .paddle { width: 100%; height: 100%; }
.pp-art span { width: 52px; height: 52px; line-height: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.gm-lhead .ck-art, .gm-lhead .ch-art, .gm-lhead .pen-art, .gm-lhead .pp-art { width: 104px; height: 104px; border-radius: 28px; background: rgba(255, 255, 255, .12); }
.gm-lhead .pen-art > svg { width: 86px; top: 16px; }
.gm-lhead .pen-art span { width: 32px; height: 32px; bottom: 9px; }
.gm-lhead .pp-art span { width: 72px; height: 72px; }
.gm-lhead p { max-width: 330px; font-size: 13.5px; line-height: 1.45; }
.gm-sec b .ic { width: 17px; height: 17px; vertical-align: -3px; margin-right: 2px; }
.gm-sec span .ic { width: 13px; height: 13px; vertical-align: -2px; }
.gm-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.gm-lv { display: grid; justify-items: center; gap: 4px; padding: 13px 6px; border-radius: 18px; color: #fff; font: inherit; transition: transform .15s; }
.gm-lv:active { transform: scale(.95); }
.gm-lv b { font-size: 16px; font-weight: 800; }
.gm-lv span { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: #ffe36e; }
.gm-lv span .ic { width: 14px; height: 14px; }
.gm-lv.easy { background: linear-gradient(160deg, #35c97a, #16955a); }
.gm-lv.medium { background: linear-gradient(160deg, #4f7bff, #3a3fd0); }
.gm-lv.hard { background: linear-gradient(160deg, #ff5c7a, #b4225b); }
.gm-hint { font-size: 12.5px; color: rgba(255, 255, 255, .62); text-align: center; margin: 0 4px 14px; }
.gm-lvchip { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 700; }
.gm-lvchip.easy { background: #1d9d5c; }
.gm-lvchip.medium { background: #3a55e0; }
.gm-lvchip.hard { background: #c7275a; }
.gp-col { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.gp-col.w { background: #f4ecdb; }
.gp-col.b { background: #1b1b22; }
.gp-mk b { color: #fff; }
.gm-room.k-chess .gp-av, .gm-room.k-checkers .gp-av { width: 52px; height: 52px; }
.gm-room.k-chess .gp-ring, .gm-room.k-checkers .gp-ring { left: -6px; top: -6px; width: 64px; height: 64px; }
.gm-room.k-chess .gr-status, .gm-room.k-checkers .gr-status { margin-bottom: 8px; min-height: 40px; }
.gm-room.k-chess .gr-status b, .gm-room.k-checkers .gr-status b { font-size: 18px; }
/* chess and checkers boards */
.ch-wrap, .ck-wrap { width: min(100%, 380px); margin: 0 auto; display: grid; gap: 6px; position: relative; }
.ch-board, .ck-board { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ch-board .sq, .ck-board .sq { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.ch-board .sq.l { background: #f0d9b5; }
.ch-board .sq.d { background: #b58863; }
.ch-board .sq.last { box-shadow: inset 0 0 0 100px rgba(255, 221, 0, .38); }
.ch-board .sq.sel { box-shadow: inset 0 0 0 100px rgba(40, 200, 120, .55); }
.ch-board .sq.chk { background: radial-gradient(circle, #ff4d4d 0%, #e01e1e 45%, rgba(224, 30, 30, 0) 75%), #b58863; }
.ch-board .sq.dot::after, .ck-board .sq.dot::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 30, 40, .32); pointer-events: none; }
.ch-board .sq.cap::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 4px solid rgba(20, 30, 40, .32); pointer-events: none; }
.pcs { display: block; width: 88%; height: 88%; overflow: visible; position: relative; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
.pcs .o { fill: var(--pf); stroke: var(--ps); stroke-width: 1.5; stroke-linejoin: round; }
.pcs .l { fill: none; stroke: var(--pd); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pcs .e { fill: var(--pd); }
.pcs.w { --pf: #fff; --ps: #1d1d24; --pd: #1d1d24; }
.pcs.b { --pf: #26262e; --ps: #0b0b0f; --pd: #e9e9ef; }
.ch-board .rk, .ch-board .fl, .ck-board .rk, .ck-board .fl { position: absolute; font-style: normal; font-size: 9.5px; font-weight: 700; opacity: .7; pointer-events: none; }
.ch-board .rk, .ck-board .rk { left: 2px; top: 1px; }
.ch-board .fl, .ck-board .fl { right: 2px; bottom: 0; }
.ch-board .sq.l .rk, .ch-board .sq.l .fl { color: #b58863; }
.ch-board .sq.d .rk, .ch-board .sq.d .fl { color: #f0d9b5; }
.ch-cap { min-height: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.ch-cap .pcs { width: 19px; height: 19px; margin-right: -4px; filter: none; }
.ch-cap b { margin-left: 8px; font-size: 13px; color: rgba(255, 255, 255, .75); }
.ch-moves { display: flex; gap: 10px; overflow-x: auto; white-space: nowrap; font-size: 13px; color: rgba(255, 255, 255, .8); padding: 6px 4px 2px; scrollbar-width: none; }
.ch-moves::-webkit-scrollbar { display: none; }
.ch-moves i { font-style: normal; color: rgba(255, 255, 255, .45); margin-right: 4px; }
.ch-promo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 8, 30, .55); border-radius: 18px; z-index: 5; }
.ch-promo[hidden] { display: none; }
.ch-pbox { background: #2a1f6e; border-radius: 22px; padding: 16px; display: grid; gap: 12px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.ch-pbox > div { display: flex; gap: 8px; }
.ch-pbox > div button { width: 62px; height: 62px; border-radius: 16px; background: #f0d9b5; display: grid; place-items: center; }
.ch-pbox .pcs { width: 50px; height: 50px; }
.ck-board .sq.l { background: #f3e3c4; }
.ck-board .sq.d { background: #6f4e37; }
.ck-board .sq.last { box-shadow: inset 0 0 0 100px rgba(255, 221, 0, .25); }
.ck-board .sq.sel { box-shadow: inset 0 0 0 100px rgba(40, 200, 120, .45); }
.ck-board .sq.can { box-shadow: inset 0 0 0 3px rgba(61, 255, 143, .75); }
.ck-board .sq.gone::before { content: ""; position: absolute; width: 60%; height: 60%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .45); }
.ck-board .sq.dot::after { background: rgba(61, 255, 143, .8); width: 26%; height: 26%; }
.ck { width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; pointer-events: none; }
.ck.w { background: radial-gradient(circle at 35% 30%, #fffdf6, #e6d6b3); box-shadow: 0 3px 0 #a99266, 0 5px 8px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(169, 146, 102, .35); }
.ck.b { background: radial-gradient(circle at 35% 30%, #63636f, #18181e); box-shadow: 0 3px 0 #000, 0 5px 8px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 255, 255, .08); }
.ck .ic { width: 58%; height: 58%; stroke-width: 2.2; }
.ck.w .ic { color: #b07a0e; }
.ck.b .ic { color: #ffd84d; }
/* penalty */
.pen { display: grid; gap: 10px; }
.pen-score { display: grid; gap: 6px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, .07); position: relative; }
.pen-score > div { display: flex; align-items: center; gap: 10px; }
.pen-score > div > span { width: 64px; flex: none; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen-score .pd { display: flex; gap: 6px; flex-wrap: wrap; }
.pen-score .pd i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); }
.pen-score .pd i.g { background: #3dff8f; border-color: #3dff8f; }
.pen-score .pd i.x { background: #ff5a6a; border-color: #ff5a6a; }
.pen-score em { position: absolute; right: 12px; top: 10px; font-style: normal; font-size: 11.5px; font-weight: 800; color: #ffd84d; text-transform: uppercase; }
.pen-pitch { position: relative; width: 100%; aspect-ratio: 1.45; border-radius: 22px; overflow: hidden; background: repeating-linear-gradient(90deg, #2f9e4b 0 12.5%, #2a9045 12.5% 25%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.pen-pitch::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: rgba(255, 255, 255, .8); }
.pen-goal { position: absolute; left: 9%; width: 82%; top: 8%; height: 50%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); border: 5px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 10px), rgba(0, 0, 0, .12); }
.pen-z { position: relative; z-index: 2; border: 1px dashed rgba(255, 255, 255, .25); background: transparent; transition: background .15s; }
.pen-z:not(.off):active, .pen-z:not(.off):hover { background: rgba(255, 255, 255, .18); }
.pen-z.off { pointer-events: none; }
.pen-z.pick { background: rgba(61, 255, 143, .35); }
.pen-keeper { position: absolute; left: 50%; top: 72%; z-index: 3; transform: translate(-50%, -50%); width: 25%; max-width: 64px; line-height: 0; transition: left .45s cubic-bezier(.2, .8, .3, 1), top .45s cubic-bezier(.2, .8, .3, 1), transform .45s; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.pen-keeper .keeper { width: 100%; height: auto; display: block; }
.pen-keeper.dive.l { transform: translate(-50%, -50%) rotate(-55deg); }
.pen-keeper.dive.r { transform: translate(-50%, -50%) rotate(55deg); }
.pen-ball { position: absolute; left: 50%; top: 86%; z-index: 4; width: 28px; height: 28px; line-height: 0; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .35)); }
.pen-ball .ball { width: 100%; height: 100%; display: block; }
.pen-ball.fly { transition: left .5s cubic-bezier(.3, .7, .4, 1), top .5s cubic-bezier(.3, .7, .4, 1), width .5s, height .5s; width: 19px; height: 19px; }
.pen-out { position: absolute; left: 0; right: 0; top: 60%; z-index: 6; text-align: center; font-size: 28px; font-weight: 900; letter-spacing: .5px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s; pointer-events: none; text-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.pen-out.show { opacity: 1; transform: none; }
.pen-out.good { color: #3dff8f; }
.pen-out.bad { color: #ff8a95; }
.pen-help { text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .7); min-height: 18px; }
/* table tennis: the canvas scene (pingpongGame) */
.pp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd9a8); }
.pp2 { position: relative; width: 100%; height: clamp(360px, 58vh, 600px); border-radius: 22px; overflow: hidden; background: #070a16; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pp2-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.pp2-score { position: absolute; left: 8px; top: 8px; display: grid; gap: 3px; padding: 6px 8px 5px 7px; border-radius: 11px; background: rgba(6, 10, 26, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 12px; pointer-events: none; }
.pp2-score:empty { display: none; }
.pp2-score > div { display: flex; align-items: center; gap: 6px; }
.pp2-score .kit { width: 4px; height: 14px; border-radius: 2px; flex: none; }
.pp2-score .me .kit { background: #1f6fff; }
.pp2-score .op .kit { background: #e8333c; }
.pp2-score .nm { width: 58px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp2-score .srv .nm::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: #ffd9a8; vertical-align: 1px; }
.pp2-score i { min-width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, .14); }
.pp2-score b { min-width: 18px; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.pp2-score em { font-style: normal; font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, .55); text-transform: uppercase; letter-spacing: .4px; }
.pp2-help { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, .7); pointer-events: none; }
.pp2-help:empty { display: none; }
.pp2-help .svg { width: 16px; height: 16px; transform: rotate(-90deg); animation: penup 1.1s ease-in-out infinite; }
.pp2-help .ic { width: 16px; height: 16px; }
/* More Stars: games promo with open lots */
.gm-promo { margin-bottom: 14px; }
.gm-promo .gm-banner { margin-bottom: 8px; }
.gpr-kinds { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.gpr-kinds::-webkit-scrollbar { display: none; }
.gpr-k { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 16px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); }
.gpr-k b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #2fbf4a; color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.gpr-lots { background: var(--card); border-radius: 20px; padding: 8px 10px; box-shadow: var(--shadow); margin-top: 4px; }
.gpr-lh { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 4px 6px; }
.gpr-lh i { width: 8px; height: 8px; border-radius: 50%; background: #2fbf4a; box-shadow: 0 0 0 3px rgba(47, 191, 74, .22); animation: gmpulse 1.6s infinite; }
.gpr-lot { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--line); }
.gpr-lot .av { width: 38px; height: 38px; flex: none; }
.gpr-lot .av .avatar { width: 38px; height: 38px; }
.gpr-lt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gpr-lt b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpr-lt span { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.gpr-lt span .ic { width: 13px; height: 13px; }
.gi { display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none; line-height: 0; font-size: 14px; }
.gi > svg, .gi .ic, .gi .pcs, .gi .ball, .gi .paddle { width: 100%; height: 100%; filter: none; }
.gi .mk path { stroke-width: 15; }
.gi .gi-ck { width: 82%; height: 82%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #63636f, #18181e); box-shadow: 0 1.5px 0 #000; }
.gpr-lt .gi { width: 14px; height: 14px; margin-right: 2px; }
.gpr-none { font-size: 13px; color: var(--muted); text-align: center; padding: 6px 8px 2px; }
@media (prefers-reduced-motion: reduce) { .pen-keeper, .pen-ball.fly { transition: none; } .pp2-help .svg, .pen2-help .svg { animation: none; } .gpr-lh i { animation: none; } }

/* ---------- chats: "Unread messages", the ↓ and @ buttons, @mention picker (Telegram) ---------- */
.cm-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cm-wrap > .chat-msgs { flex: 1; min-height: 0; overflow-anchor: none; }
.msg-unread { margin: 10px -10px 6px; padding: 5px 0; text-align: center; background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--muted); font-size: 13.5px; font-weight: 500; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.cm-fabs { position: absolute; right: 10px; bottom: 12px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.cm-fab { pointer-events: auto; position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--muted); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); animation: cmfab .18s ease; }
.cm-fab[hidden] { display: none; }
.cm-fab:active { transform: scale(.92); }
.cm-fab .svg { width: 22px; height: 22px; }
.cm-fab b { font-size: 21px; font-weight: 700; line-height: 1; margin-top: -3px; color: var(--blue); }
.cm-fab i { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--blue); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; line-height: 21px; text-align: center; white-space: nowrap; box-shadow: 0 0 0 2px var(--bg); }
.cm-fab i:empty { display: none; }
@keyframes cmfab { from { opacity: 0; transform: scale(.6); } }
.cnt.at { width: 22px; min-width: 22px; padding: 0; font-weight: 700; }
.mn-list { flex: none; max-height: 232px; overflow-y: auto; background: var(--card); border-top: 1px solid var(--line); overscroll-behavior: contain; }
.mn-list[hidden] { display: none; }
.mn-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; text-align: left; }
.mn-row + .mn-row { border-top: 1px solid var(--line); }
.mn-row .av { width: 34px; height: 34px; flex: none; }
.mn-t { display: flex; flex-direction: column; min-width: 0; }
.mn-t b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-t span { color: var(--muted); font-size: 13px; }
/* a captured piece fading out under the mover (boardSlide) */
.pc-ghost { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.ch-board .sq, .ck-board .sq { isolation: auto; }

/* ---------- penalty: the 3D scene (eFootball-like) ---------- */
.gm-room.k-penalty .gp-av { width: 46px; height: 46px; }
.gm-room.k-penalty .gp-ring { left: -6px; top: -6px; width: 58px; height: 58px; }
.gm-room.k-penalty .gp-row { margin: 0 0 6px; }
.gm-room.k-penalty .gr-status { margin-bottom: 8px; min-height: 40px; }
.gm-room.k-penalty .gr-status b { font-size: 19px; }
.pen2 { position: relative; width: 100%; height: clamp(340px, 54vh, 540px); border-radius: 22px; overflow: hidden; background: #0b1630; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); touch-action: none; -webkit-user-select: none; user-select: none; }
.pen2-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.pen2-score { position: absolute; left: 8px; top: 8px; display: grid; gap: 3px; padding: 6px 9px 6px 7px; border-radius: 11px; background: rgba(6, 10, 26, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 12px; pointer-events: none; }
.pen2-score > div { display: flex; align-items: center; gap: 6px; }
.pen2-score .kit { width: 4px; height: 14px; border-radius: 2px; flex: none; }
.pen2-score .home .kit { background: #1f6fff; }
.pen2-score .away .kit { background: #e8333c; }
.pen2-score .nm { width: 54px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen2-score b { min-width: 14px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pen2-score .pd { display: flex; gap: 3px; flex-wrap: wrap; max-width: 120px; }
.pen2-score .pd i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); }
.pen2-score .pd i.g { background: #3dff8f; border-color: #3dff8f; }
.pen2-score .pd i.x { background: #ff5a6a; border-color: #ff5a6a; }
.pen2-score em { font-style: normal; font-size: 10px; font-weight: 800; color: #ffd84d; text-transform: uppercase; letter-spacing: .4px; }
.pen2-help { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, .7); pointer-events: none; }
.pen2-help:empty { display: none; }
.pen2-help .svg { width: 16px; height: 16px; transform: rotate(-90deg); animation: penup 1.1s ease-in-out infinite; }
.pen2-help .ic { width: 16px; height: 16px; }
.pen2-help.off .svg { animation: none; opacity: .5; }
@keyframes penup { 50% { transform: rotate(-90deg) translateX(5px); } }

/* ---------- Telegram stickers and custom emoji ---------- */
.m-stk { position: relative; display: grid; place-items: center; width: 160px; height: 160px; cursor: pointer; }
.m-stk > img, .m-stk > video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.m-stk > .lot { inset: 0; }
.m-stk.gone { width: 120px; height: 120px; border-radius: 18px; background: var(--chip); font-size: 54px; opacity: .7; }
.stk-e { font-style: normal; font-size: 80px; line-height: 1; }
.msg.stk .bub { background: transparent !important; box-shadow: none; padding: 0; overflow: visible; min-width: 0; }
.msg.stk .m-meta { position: static; width: max-content; margin: 2px 0 0 auto; background: rgba(0, 0, 0, .35); color: #fff !important; padding: 2px 7px; border-radius: 10px; }
.msg.stk .m-from, .msg.stk .m-reply { background: var(--card); border-radius: 12px; padding: 4px 9px; margin-bottom: 4px; width: auto; max-width: 220px; }
.msg.stk .m-reacts { margin-top: 4px; }
.ce { position: relative; display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.28em; cursor: pointer; }
.ce > img, .ce > video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.ce > .lot { inset: 0; }
.ce .stk-e { font-size: 1em; }
.ce.gone { width: auto; height: auto; vertical-align: baseline; }
.msg.emo .m-text { padding-right: 0; font-size: 15.5px; }
.msg.emo .ce { width: 72px; height: 72px; vertical-align: middle; margin: 0 1px; }
.msg.emo .ce .stk-e { font-size: 60px; }
.msg.emo .m-ghost { display: none; }
.ci-btn.emo.on { color: var(--blue); }
.stk-panel { flex: none; height: min(320px, 42vh); display: flex; flex-direction: column; background: var(--card); border-top: 1px solid rgba(128, 128, 128, .15); padding-bottom: var(--safe-b); }
.stk-panel[hidden] { display: none; }
.sheet.stk-open .chat-input { padding-bottom: 8px; }
.stk-tabs { display: flex; justify-content: center; gap: 4px; padding: 6px 8px 2px; }
.stk-tabs button { padding: 5px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.stk-tabs button.on { background: var(--chip); color: var(--text); }
.stk-sets { display: flex; gap: 4px; overflow-x: auto; padding: 4px 8px; scrollbar-width: none; flex: none; }
.stk-sets::-webkit-scrollbar { display: none; }
.stk-sets button { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.stk-sets button.on { background: var(--chip); color: var(--blue); }
.stk-sets button .ic { width: 20px; height: 20px; }
.stk-sets .add { border: 1.5px dashed rgba(128, 128, 128, .45); }
.stk-cov { width: 30px; height: 30px; display: block; position: relative; }
.stk-cov > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stk-body { flex: 1; overflow-y: auto; padding: 0 6px 6px; overscroll-behavior: contain; }
.stk-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 4px; font-size: 13px; color: var(--muted); }
.stk-h b { font-weight: 600; }
.stk-h button { color: var(--blue); font-size: 13px; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 2px; }
.stk-grid.emo { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.stk-it { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; padding: 4px; }
.stk-it:active { background: var(--chip); transform: scale(.94); }
.stk-pic { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.stk-pic > img, .stk-pic > video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.stk-pic > .lot { inset: 0; }
.stk-pic .stk-e { font-size: 36px; }
.stk-grid.emo .stk-pic .stk-e { font-size: 26px; }
.stk-grid.big { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); max-height: 52vh; overflow-y: auto; margin-top: 12px; }
.stk-grid.big.emo { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.stk-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.stk-empty b { color: var(--text); font-size: 15px; }
.stk-empty .ic { width: 16px; height: 16px; vertical-align: -3px; }
.stk-load { display: grid; place-items: center; padding: 28px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(128, 128, 128, .25); border-top-color: var(--blue); animation: stk-spin .8s linear infinite; display: block; }
@keyframes stk-spin { to { transform: rotate(360deg); } }

/* ---------- Recent actions (channel / group owner) ---------- */
.ri-log { margin: 10px 0 0; }
.ri-log button { justify-content: flex-start; }
.ri-log .chev { margin-left: auto; color: var(--muted); }
.rl-chips { margin: 10px 0 12px; }
.rl-chips .chip .ic { width: 14px; height: 14px; vertical-align: -2px; }
.rl-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(128, 128, 128, .14); }
.rl-av { width: 36px; height: 36px; flex: none; }
.rl-av .avatar { width: 36px; height: 36px; font-size: 15px; }
.rl-main { flex: 1; min-width: 0; }
.rl-top { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.35; }
.rl-top span { flex: 1; min-width: 0; }
.rl-top time { flex: none; font-size: 12px; color: var(--muted); }
.rl-lbl { font-size: 12px; color: var(--muted); margin: 8px 0 3px; text-transform: uppercase; letter-spacing: .3px; }
.rl-msg { position: relative; margin-top: 6px; padding: 8px 10px; border-radius: 14px; background: var(--chip); border-left: 3px solid var(--blue); }
.rl-msg.del { border-left-color: #e5484d; }
.rl-msg.old { border-left-color: #f2a33a; }
.rl-lbl + .rl-msg { margin-top: 0; }
.rl-text { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.35; }
.rl-msg .m-img, .rl-msg .m-vid { width: 220px; max-height: 260px; margin-bottom: 4px; }
.rl-msg .rl-round { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.rl-msg .m-file { padding: 2px 0 6px; }
.rl-media { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.rl-media .ic { width: 16px; height: 16px; }
.rl-audio { width: 100%; height: 36px; }
.rl-stk .m-stk { width: 120px; height: 120px; }
.rl-at { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }

/* ===== Wall Rush / Blocade: dark, restrained, precise ===== */
.sheet.game-sheet.gk-wallrush { background: radial-gradient(120% 60% at 50% 0%, #1c1e24 0%, #0d0e11 55%, #060607 100%); }
.sheet.game-sheet.gk-blocade { background: radial-gradient(120% 60% at 50% 0%, #0f1a2e 0%, #070c16 55%, #03050a 100%); }
.gk-wallrush .gr-status.mine b { color: #8fe6c0; }
.gk-blocade .gr-status.mine b { color: #7fdcff; }
.gk-wallrush .gm-lvchip, .gk-blocade .gm-lvchip { filter: saturate(.7); }
.gm-room.k-wallrush .gp-av, .gm-room.k-blocade .gp-av { width: 46px; height: 46px; }
.gm-room.k-wallrush .gp-ring, .gm-room.k-blocade .gp-ring { left: -6px; top: -6px; width: 58px; height: 58px; }
.gm-room.k-wallrush .gp-row, .gm-room.k-blocade .gp-row { margin: 2px 0 6px; }
.gm-room.k-wallrush .gr-status, .gm-room.k-blocade .gr-status { margin-bottom: 8px; min-height: 40px; }
.gm-room.k-wallrush .gr-status b, .gm-room.k-blocade .gr-status b { font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.gm-room.k-wallrush .gr-status span, .gm-room.k-blocade .gr-status span { color: rgba(220, 228, 240, .55); letter-spacing: .2px; }

.wl { display: grid; gap: 10px; justify-items: center; }
.wl-seats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.wl-seat { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px 9px; border-radius: 12px; background: rgba(255, 255, 255, .028); border: 1px solid rgba(255, 255, 255, .06); transition: border-color .3s, background .3s; }
.wl-seat::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--h); opacity: 0; transform: scaleX(.2); transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.wl-seat.on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, rgba(255, 255, 255, .02)); }
.wl-seat.on::after { opacity: .9; transform: scaleX(1); }
.wl-seat.won { border-color: rgba(224, 183, 90, .7); }
.wl-mini { width: 24px; height: 24px; flex: none; }
.wl-seat div { min-width: 0; display: grid; line-height: 1.15; }
.wl-seat b { font-size: 12.5px; font-weight: 600; color: #eef1f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-seat span { font-size: 10.5px; color: rgba(210, 218, 230, .5); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-wb { display: flex; gap: 2px; margin-top: 4px; font-style: normal; }
.wl-wb em { width: 5px; height: 3px; border-radius: 1px; background: rgba(255, 255, 255, .1); }
.wl-wb em.f { background: var(--c); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--h) 60%, transparent) inset; }
.wl-blocade .wl-wb em { width: 4px; }

.wl-board { width: min(100%, 440px); aspect-ratio: 1; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .04) inset; }
.wl-blocade .wl-board { box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(53, 214, 255, .07); }
.wl-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.wl-pawn { transition: transform .4s cubic-bezier(.22, .9, .24, 1); }
.wl-hop.go { animation: wl-hop .4s cubic-bezier(.3, .7, .3, 1); }
@keyframes wl-hop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.wl-pawn.turn .wl-hop { animation: wl-breathe 2.4s ease-in-out infinite; }
@keyframes wl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.wl-pawn.won .wl-hop { animation: wl-won 1.6s ease-in-out infinite; }
@keyframes wl-won { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.1); filter: brightness(1.25); } }
.wl-wall.wl-new { transform-box: fill-box; transform-origin: center; animation: wl-drop .34s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes wl-drop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
.wl-tg { animation: wl-fade .3s ease-out; }
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
.wl-crown { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }

.wl-bar { width: min(100%, 440px); display: flex; gap: 8px; transition: opacity .25s; }
.wl-bar.off { opacity: .45; }
.wl-seg { flex: 1; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 13px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.wl-seg button { height: 38px; border-radius: 10px; color: rgba(230, 236, 245, .72); font-size: 13.5px; font-weight: 600; letter-spacing: .2px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, color .2s; }
.wl-seg button.on { background: rgba(255, 255, 255, .09); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 4px 10px rgba(0, 0, 0, .3); }
.wl-seg button:disabled { opacity: .5; }
.wl-seg button b { font-variant-numeric: tabular-nums; }
.wl-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-wic { width: 16px; height: 4px; border-radius: 2px; background: currentColor; display: inline-block; transition: transform .2s; }
.wl-wic.v { transform: rotate(90deg); }
.wl-wctl { display: none; gap: 6px; }
.wl-bar.walling .wl-wctl { display: flex; }
.wl-rot { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #e8edf5; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.wl-rot .wl-ic { width: 19px; height: 19px; }
.wl-place { height: 44px; padding: 0 16px; border-radius: 13px; font-weight: 700; font-size: 13.5px; color: #0b0c10; background: linear-gradient(180deg, #f1f4f8, #c9d0da); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transition: opacity .2s; }
.wl-place:disabled { opacity: .35; }
.wl-blocade .wl-place { background: linear-gradient(180deg, #8fe8ff, #35b9e0); color: #04121c; }
.wl-help { min-height: 17px; font-size: 12.5px; color: rgba(214, 222, 234, .5); text-align: center; letter-spacing: .2px; }

/* hub cards and lobby art */
.gm-card.wallrush { background: linear-gradient(135deg, #2a2c33 0%, #121317 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(224, 183, 90, .18) inset; }
.gm-card.blocade { background: linear-gradient(135deg, #16284a 0%, #0a1222 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(53, 214, 255, .2) inset; }
.wr-art, .bl-art { width: 76px; height: 76px; flex: none; border-radius: 20px; display: grid; place-items: center; background: #0d0e12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.bl-art { background: #070c16; }
.wr-art svg, .bl-art svg { width: 88%; height: 88%; }
.gm-lhead .wr-art, .gm-lhead .bl-art { width: 112px; height: 112px; border-radius: 28px; box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.gi-wl { width: 100%; height: 100%; }
.gm-card.wallrush::after, .gm-card.blocade::after { display: none; }