/* ═════════════════════════════════════════════════════════════════
   SWIPE NIGHT — the Content game (content-play.js)   B65 W7 · 065-021 / 086
   The approved sample (samples/b65/content-game.html) as the real thing.
   ONE markup, two hosts:
     · Content app → #snStage, a full-screen stage of violet liquid glass
       over a slow aurora (the sample);
     · Mocca       → the same stage inside Mocca's side panel (.sn-in), in
       Mocca's own tokens.
   ONE colour per action, shared by the stamp, the drag glow and the button.
   Class-only selectors near icons (the icon-font rule).
   ═════════════════════════════════════════════════════════════════ */

/* ── tokens: Mocca by default … ─────────────────────────────────── */
.sn{
  --sn-font:var(--mk-font-ui);
  --sn-ink:var(--fg-1); --sn-ink2:var(--fg-2); --sn-ink3:var(--fg-3);
  --sn-glass:color-mix(in srgb, var(--bg-2) 88%, transparent); --sn-glass2:color-mix(in srgb, var(--fg-1) 7%, transparent);
  --sn-glass3:color-mix(in srgb, var(--fg-1) 12%, transparent); --sn-edge:var(--border);
  --sn-grad:linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
  --sn-hi:var(--accent); --sn-glowc:color-mix(in srgb, var(--accent) 70%, transparent);
  --sn-on-grad:var(--accent-fg, #fff); --sn-shadow:0 24px 50px -30px rgba(0,0,0,.45);
  --a-pass:#6b7488; --a-vote:#e0357f; --a-later:#1d8fd1; --a-seen:#12906a;
  color:var(--sn-ink); font-family:var(--sn-font);
}
html[data-theme="dark"] .sn{ --a-pass:#9aa3b8; --a-vote:#ff5fa2; --a-later:#5ec8ff; --a-seen:#8bf0c5; --sn-shadow:0 30px 60px -30px rgba(0,0,0,.8); }
/* … and the Content app's violet glass (dark = the sample, light its twin) */
html[data-app="content"] .sn{
  --sn-glass:rgba(255,255,255,.66); --sn-glass2:rgba(124,58,237,.08); --sn-glass3:rgba(124,58,237,.16); --sn-edge:rgba(60,30,120,.14);
  --sn-grad:linear-gradient(135deg,#8b5cf6,#ff5fa2); --sn-hi:#ff5fa2; --sn-glowc:rgba(255,95,162,.8); --sn-on-grad:#fff;
}
html[data-app="content"][data-theme="dark"] .sn{
  --sn-glass:rgba(255,255,255,.07); --sn-glass2:rgba(255,255,255,.12); --sn-glass3:rgba(255,255,255,.18); --sn-edge:rgba(255,255,255,.16);
}
.sn *{ box-sizing:border-box; }
.sn :where(button){ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.sn button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sn button:disabled{ opacity:.45; cursor:not-allowed; }

/* ── the full-screen stage (Content app) ────────────────────────── */
.sn-full{ position:fixed; inset:0; z-index:620; background:var(--bg-1); opacity:0; transform:scale(1.02); transition:opacity .28s ease, transform .28s ease; overflow:hidden; }
.sn-full.open{ opacity:1; transform:none; }
.sn-full[hidden]{ display:none; }
html.sn-open, html.sn-open body{ overflow:hidden; }
html.sn-open .cn-ask-ov{ z-index:640; }
.sn-glow{ position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(70px); opacity:.55; }
html[data-theme="dark"] .sn-glow{ opacity:.75; }
.sn-glow i{ position:absolute; border-radius:50%; animation:snDrift 26s ease-in-out infinite alternate; }
.sn-glow i:nth-child(1){ width:50vw; height:50vw; left:0; top:5%; background:radial-gradient(circle,#6d28d9 0,transparent 65%); }
.sn-glow i:nth-child(2){ width:45vw; height:45vw; right:0; top:25%; background:radial-gradient(circle,#db2777 0,transparent 62%); animation-duration:31s; }
.sn-glow i:nth-child(3){ width:40vw; height:40vw; left:35%; bottom:0; background:radial-gradient(circle,#0ea5e9 0,transparent 60%); animation-duration:37s; }
@keyframes snDrift{ to{ transform:translate(6%,8%) scale(1.15); } }
@media (prefers-reduced-motion:reduce){ .sn-glow i{ animation:none; } }
.sn-shell{ position:relative; z-index:1; height:100dvh; display:flex; flex-direction:column; }
.sn-bar{ display:flex; align-items:center; gap:10px; padding:max(12px, env(safe-area-inset-top)) 16px 10px; }
.sn-brand{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.sn-brand > .mi{ color:#ff5fa2; font-variation-settings:'FILL' 1; align-self:center; }
.sn-brand b{ font:800 18px/1.1 var(--sn-font); letter-spacing:-.02em; white-space:nowrap; }
.sn-brand small{ font:600 12px var(--sn-font); color:var(--sn-ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sn-sp{ flex:1; }
.sn-orb{ width:42px; height:42px; border-radius:50% !important; border:1px solid var(--sn-edge) !important; background:var(--sn-glass2) !important; display:grid; place-items:center; flex:none; }
.sn-orb[hidden]{ display:none; }
.sn-orb > .mi{ font-size:21px; }
.sn-orb.ast-sub-launch{ width:auto; padding:0 14px 0 10px !important; border-radius:999px !important; display:inline-flex; align-items:center; gap:6px; font:700 13px var(--sn-font); }
.sn-orb.ast-sub-launch[hidden]{ display:none; }
.sn-full .sn-stage{ flex:1; min-height:0; overflow:auto; padding:6px 16px max(18px, env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; }
.sn-full .sn-stage > *{ margin-block:auto; }

/* ── inside Mocca's side panel ──────────────────────────────────── */
.sn-panel .ent-panel-body, .sn-panel .panel-body{ display:flex; flex-direction:column; }
.sn-in{ flex:1; display:flex; flex-direction:column; min-height:0; }
.sn-in .sn-stage{ flex:1; display:flex; flex-direction:column; align-items:center; gap:14px; }
.sn-in .sn-card{ box-shadow:none; }
.sn-stage{ container-type:inline-size; container-name:sn; width:100%; }

/* ── glass cards ────────────────────────────────────────────────── */
.sn-card{ width:min(600px,100%); border-radius:30px; padding:22px; display:flex; flex-direction:column; gap:18px;
  background:var(--sn-glass); border:1px solid var(--sn-edge); backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6); box-shadow:var(--sn-shadow); }
.sn-lab{ font:700 11px var(--sn-font); letter-spacing:.14em; text-transform:uppercase; color:var(--sn-ink3); margin-bottom:10px; display:flex; justify-content:space-between; gap:8px; }
html[lang^="ar"] .sn-lab{ letter-spacing:0; }
.sn-note{ color:var(--sn-ink3); font:500 13px/1.45 var(--sn-font); }
.sn-btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.sn-bt{ height:46px; padding:0 18px !important; border-radius:999px !important; border:1px solid var(--sn-edge) !important; background:var(--sn-glass2) !important; font:700 14px var(--sn-font) !important; display:inline-flex; align-items:center; gap:8px; }
.sn-bt > .mi{ font-size:20px; }
.sn-go{ height:56px; border-radius:999px !important; background:var(--sn-grad) !important; color:var(--sn-on-grad) !important; font:800 16px var(--sn-font) !important; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 22px !important;
  box-shadow:0 18px 40px -18px var(--sn-glowc); }
.sn-go > .mi{ font-variation-settings:'FILL' 1; }
.sn-go.sm{ height:46px; font-size:14px !important; }

/* ── setup ──────────────────────────────────────────────────────── */
.sn-setup h1{ margin:0; font:800 30px/1.05 var(--sn-font); letter-spacing:-.035em; }
.sn-setup h1 small{ display:block; font:500 13px var(--sn-font); color:var(--sn-ink3); letter-spacing:0; margin-top:6px; }
.sn-who{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sn-who .sn-who-sel{ flex:0 0 auto; min-width:0; width:auto; }
/* the avatars already say who is in — the shared multi-select is the Invite pill */
.sn-who-sel .cb-multi-trigger-tags{ display:none !important; }
.sn-who-sel > .cs-btn{ height:40px; border-radius:999px !important; padding-inline:12px 10px !important; gap:6px; background:var(--sn-glass2) !important; border:1px dashed var(--sn-edge) !important; }
.sn-who-sel > .cs-btn::before{ content:"person_add";content:"person_add" / ""; font-family:'Material Symbols Rounded'; font-size:20px; line-height:1; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; color:var(--sn-ink2); }
.sn-cap{ position:relative; display:flex; padding:5px; border-radius:999px; background:var(--sn-glass2); border:1px solid var(--sn-edge); isolation:isolate; }
.sn-cap > button{ position:relative; z-index:1; flex:1; min-width:0; height:42px; border-radius:999px !important; font:700 13px var(--sn-font) !important; color:var(--sn-ink2) !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; padding:0 8px !important; transition:color .2s; }
.sn-cap > button.on{ color:var(--sn-on-grad) !important; }
.sn-cap > button > .mi{ font-size:18px; }
.sn-cap > button > span:not(.mi){ overflow:hidden; text-overflow:ellipsis; }
.sn-th{ position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:0; border-radius:999px; background:var(--sn-grad); box-shadow:0 10px 26px -10px var(--sn-glowc);
  transition:left .35s cubic-bezier(.3,1.3,.5,1), width .35s cubic-bezier(.3,1.3,.5,1); }
.sn-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sn-chip{ height:38px; padding:0 14px !important; border-radius:999px !important; border:1px solid var(--sn-edge) !important; background:var(--sn-glass2) !important; font:600 13px var(--sn-font) !important; color:var(--sn-ink2) !important; display:inline-flex; align-items:center; gap:6px; }
.sn-chip > .mi{ font-size:16px; display:none; }
.sn-chip.on{ background:color-mix(in srgb, var(--sn-hi) 18%, transparent) !important; border-color:color-mix(in srgb, var(--sn-hi) 60%, transparent) !important; color:var(--sn-ink) !important; }
.sn-chip.on > .mi{ display:inline-block; }
.sn-svc{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:3px; margin:-3px; }
.sn-svc::-webkit-scrollbar{ display:none; }
.sn-sv{ flex:0 0 auto; height:44px; min-width:92px; padding:0 14px !important; border-radius:14px !important; border:1px solid var(--sn-edge) !important; background:#fff !important; display:grid; place-items:center; opacity:.45; filter:grayscale(1); transition:opacity .15s, filter .15s, box-shadow .15s; }
.sn-sv > img{ max-height:22px; max-width:78px; display:block; }
.sn-sv.on{ opacity:1; filter:none; box-shadow:0 0 0 2px var(--sn-hi); }
.sn-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sn-sw{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px !important; border-radius:20px !important; background:var(--sn-glass2) !important; border:1px solid var(--sn-edge) !important; font:600 13.5px var(--sn-font) !important; text-align:start; }
.sn-tog{ width:50px; height:30px; border-radius:999px; background:var(--sn-glass3); border:1px solid var(--sn-edge); position:relative; flex:0 0 auto; transition:background .2s; }
.sn-tog::after{ content:""; position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:inset-inline-start .25s cubic-bezier(.3,1.3,.5,1); }
.sn-tog.on{ background:var(--sn-grad); }
.sn-tog.on::after{ inset-inline-start:23px; }
.sn-count{ display:flex; align-items:center; gap:8px; font:600 13px var(--sn-font); color:var(--sn-ink2); min-width:0; }
.sn-count > b{ font:800 22px var(--sn-font); color:var(--sn-ink); }
.sn-count > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── avatars: ONE class everywhere ──────────────────────────────── */
.sn-avi{ --h:210; width:32px; height:32px; border-radius:50%; display:inline-grid; place-items:center; flex:0 0 auto; position:relative;
  font:700 12px/1 var(--sn-font); color:#1a0d2e; background:oklch(.82 .09 var(--h)) center/cover no-repeat; border:2px solid color-mix(in srgb, var(--sn-ink) 22%, transparent); }
.sn-avi.xs{ width:22px; height:22px; font-size:8.5px; border-width:1.5px; }
.sn-avi.sm{ width:28px; height:28px; font-size:10px; }
.sn-avi.md{ width:40px; height:40px; font-size:13px; }
.sn-avi.lg{ width:62px; height:62px; font-size:18px; font-weight:800; }
.sn-stack{ display:inline-flex; align-items:center; }
.sn-stack > .sn-avi + .sn-avi{ margin-inline-start:-8px; }

/* ── lobby + waiting ────────────────────────────────────────────── */
.sn-lobby{ width:min(460px,100%); text-align:center; align-items:center; padding:28px 22px; }
.sn-lobby .sn-lab{ justify-content:center; margin:0; }
.sn-ring{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.sn-ring > div{ display:flex; flex-direction:column; align-items:center; gap:6px; font:600 12px var(--sn-font); color:var(--sn-ink2); }
.sn-avi.in{ box-shadow:0 0 0 3px var(--a-seen); }
.sn-avi.wait{ opacity:.7; }
.sn-avi.wait::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:3px solid transparent; border-top-color:var(--a-vote); animation:snSpin 1s linear infinite; }
@keyframes snSpin{ to{ transform:rotate(360deg); } }
.sn-tube{ width:100%; height:12px; border-radius:999px; background:var(--sn-glass2); border:1px solid var(--sn-edge); overflow:hidden; }
.sn-tube > i{ display:block; height:100%; width:var(--p); border-radius:inherit; background:var(--sn-grad); transition:width .6s; }

/* ── deck ───────────────────────────────────────────────────────── */
.sn-demo{ display:flex; align-items:center; gap:8px; max-width:560px; padding:8px 14px; border-radius:14px; background:var(--sn-glass2); border:1px dashed var(--sn-edge); font:500 12px/1.4 var(--sn-font); color:var(--sn-ink2); margin-bottom:10px; }
.sn-demo > .mi{ font-size:18px; }
.sn-deckwrap{ display:grid; grid-template-columns:1fr; gap:28px; align-items:center; width:min(820px,100%); }
.sn-deckcol{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.sn-meter-sm{ width:min(340px,100%); display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.sn-meter{ display:flex; justify-content:space-between; align-items:center; font:600 12px var(--sn-font); color:var(--sn-ink3); }
.sn-meter > span{ display:inline-flex; align-items:center; gap:4px; }
.sn-meter .mi{ font-size:16px; }
.sn-meter b{ color:var(--sn-ink); font-variant-numeric:tabular-nums; }
.sn-meter-sm .sn-tube{ height:6px; }
.sn-deck{ position:relative; height:min(calc(100dvh - 330px), 560px); min-height:260px; aspect-ratio:2/3; max-width:100%; }
.sn-in .sn-deck{ height:min(calc(100dvh - 360px), 520px); }
.sn-c{ --pg:#333; position:absolute; inset:0; border-radius:30px; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; background:var(--pg); color:#fff;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75); transition:transform .35s cubic-bezier(.3,1.2,.4,1), box-shadow .2s; }
.sn-c.live{ cursor:grab; }
.sn-c.live.drag{ cursor:grabbing; transition:box-shadow .2s; }
.sn-c.back{ transform:scale(.94) translateY(30px); filter:brightness(.7); }
.sn-c.back2{ transform:scale(.88) translateY(58px); filter:brightness(.5); }
.sn-deck, .sn-win{ container-type:inline-size; }
.sn-big{ position:absolute; inset:16% 10% auto; font:800 clamp(24px, 11.5cqi, 64px)/.95 var(--sn-font); letter-spacing:-.05em; color:rgba(255,255,255,.2); text-transform:uppercase; overflow-wrap:break-word; hyphens:auto; pointer-events:none; }
.sn-ttl{ position:absolute; inset:auto 0 0 0; padding:70px 20px 20px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.78)); display:flex; flex-direction:column; gap:4px; }
.sn-ttl > b{ font:800 28px/1.02 var(--sn-font); letter-spacing:-.035em; }
.sn-ttl > span:not(.sn-pv):not(.sn-fr-start){ font:600 13px var(--sn-font); color:rgba(255,255,255,.8); }
.sn-pv{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.sn-who-voted{ position:absolute; top:14px; inset-inline-start:14px; display:flex; align-items:center; gap:4px; height:32px; padding:0 10px 0 4px; border-radius:999px; background:rgba(0,0,0,.35); backdrop-filter:blur(10px); font:600 12px var(--sn-font); }
.sn-who-voted .sn-avi + .sn-avi{ margin-inline-start:-8px; }
.sn-fr{ position:absolute; top:14px; inset-inline-end:14px; display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:999px; background:rgba(0,0,0,.4); backdrop-filter:blur(10px); font:800 13px var(--sn-font); }
.sn-fr-stack{ position:relative; width:16px; height:14px; }
.sn-fr-stack::before, .sn-fr-stack::after{ content:""; position:absolute; width:11px; height:13px; border-radius:3px; border:1.5px solid #fff; }
.sn-fr-stack::before{ left:0; top:1px; opacity:.55; }
.sn-fr-stack::after{ left:5px; top:0; background:rgba(0,0,0,.4); }
.sn-fr-start{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; font:600 12px/1.35 var(--sn-font); color:rgba(255,255,255,.88); }
.sn-fr-start > .mi{ font-size:16px; }
.sn-fr-start > i{ flex-basis:100%; font-style:normal; font-weight:500; opacity:.8; }
.sn-res .sn-fr-start{ color:var(--sn-ink2); justify-content:center; text-align:center; }
.sn-stamp{ position:absolute; top:26px; padding:6px 14px; border-radius:12px; border:3px solid var(--sc); color:var(--sc); font:800 24px var(--sn-font); letter-spacing:.06em; text-transform:uppercase; opacity:0;
  background:rgba(0,0,0,.28); backdrop-filter:blur(6px); pointer-events:none; white-space:nowrap; }
.sn-stamp.d-right{ left:22px; transform:rotate(-12deg); }
.sn-stamp.d-left{ right:22px; transform:rotate(12deg); }
.sn-stamp.d-down{ left:50%; top:auto; bottom:140px; transform:translateX(-50%); }
.sn-stamp.pass{ --sc:var(--a-pass); } .sn-stamp.vote{ --sc:var(--a-vote); } .sn-stamp.later{ --sc:var(--a-later); } .sn-stamp.seen{ --sc:var(--a-seen); }
/* dark-theme action colours on the card (the card is always dark) */
.sn-c{ --a-pass:#b9c0d0; --a-vote:#ff5fa2; --a-later:#5ec8ff; --a-seen:#8bf0c5; }
/* the drag glow takes the colour of the action you are heading for */
.sn-deck[data-hint="pass"] .sn-c.live{ box-shadow:0 0 0 3px var(--a-pass), 0 0 70px -8px var(--a-pass); }
.sn-deck[data-hint="vote"] .sn-c.live{ box-shadow:0 0 0 3px var(--a-vote), 0 0 70px -8px var(--a-vote); }
.sn-deck[data-hint="later"] .sn-c.live{ box-shadow:0 0 0 3px var(--a-later), 0 0 70px -8px var(--a-later); }
.sn-deck[data-hint="seen"] .sn-c.live{ box-shadow:0 0 0 3px var(--a-seen), 0 0 70px -8px var(--a-seen); }
.sn-ghost{ pointer-events:none; }

.sn-acts{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:34px; }
.sn-acts-top{ display:flex; gap:44px; direction:ltr; }   /* the buttons are a picture of the swipe: physical, in every language */
.sn-act{ display:flex; flex-direction:column; align-items:center; gap:6px; font:700 11px var(--sn-font); color:var(--sn-ink3); letter-spacing:.08em; text-transform:uppercase; }
html[lang^="ar"] .sn-act{ letter-spacing:0; }
.sn-ab{ --ac:var(--a-pass); width:72px; height:72px; border-radius:50% !important; border:2px solid color-mix(in srgb, var(--ac) 60%, transparent) !important; background:color-mix(in srgb, var(--ac) 14%, var(--sn-glass)) !important; color:var(--ac) !important;
  display:grid; place-items:center; backdrop-filter:blur(16px); box-shadow:0 14px 30px -14px color-mix(in srgb, var(--ac) 80%, transparent); transition:transform .15s; }
.sn-ab:hover{ transform:scale(1.06); } .sn-ab:active{ transform:scale(.94); }
.sn-ab > .mi{ font-size:34px; font-variation-settings:'FILL' 1; }
.sn-ab.pass > .mi{ font-variation-settings:'FILL' 0, 'wght' 700; }
.sn-ab.pass{ --ac:var(--a-pass); } .sn-ab.vote{ --ac:var(--a-vote); } .sn-ab.later{ --ac:var(--a-later); } .sn-ab.seen{ --ac:var(--a-seen); }
.sn-ab.sm{ width:56px; height:56px; } .sn-ab.sm > .mi{ font-size:26px; }
.sn-info{ display:none; width:auto; padding:20px; gap:12px; border-radius:28px; }
.sn-info h3{ margin:0; font:800 22px/1.1 var(--sn-font); letter-spacing:-.03em; }
.sn-info p{ margin:0; color:var(--sn-ink2); font:400 14px/1.55 var(--sn-font); }
.sn-info-pv{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.sn-pill{ height:30px; padding:0 12px; border-radius:999px; background:var(--sn-glass2); border:1px solid var(--sn-edge); font:600 12px var(--sn-font); display:inline-flex; align-items:center; }
@container sn (min-width:760px){
  .sn-deckwrap{ grid-template-columns:minmax(0,1fr) minmax(0,340px); }
  .sn-info{ display:flex; }
  .sn-meter-sm{ display:none; }
}

/* ── the empty deck ─────────────────────────────────────────────── */
.sn-empty{ width:min(420px,100%); align-items:center; text-align:center; gap:10px; }
.sn-empty > .mi{ font-size:40px; color:var(--sn-ink3); }
.sn-empty > b{ font:800 20px var(--sn-font); }
.sn-empty > span{ color:var(--sn-ink3); font:500 13px/1.45 var(--sn-font); }

/* ── tie-break ──────────────────────────────────────────────────── */
.sn-tie{ width:min(480px,100%); gap:12px; }
.sn-tie h2{ margin:0; font:800 24px var(--sn-font); letter-spacing:-.03em; }
.sn-tie p{ margin:0; color:var(--sn-ink3); font:500 13px/1.45 var(--sn-font); }
.sn-ties{ display:flex; flex-direction:column; gap:8px; }
.sn-ti, .sn-hand-row{ display:flex; align-items:center; gap:12px; padding:10px !important; border-radius:20px !important; background:var(--sn-glass2) !important; border:1px solid var(--sn-edge) !important; text-align:start; width:100%; }
.sn-ti{ cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.sn-ties.dragging .sn-ti.drag{ transition:none; background:var(--sn-glass3) !important; box-shadow:0 20px 40px -20px rgba(0,0,0,.7); z-index:2; position:relative; cursor:grabbing; }
.sn-ti > .mi{ color:var(--sn-ink3); }
.sn-ti-n{ width:30px; height:30px; border-radius:50%; background:var(--sn-grad); color:var(--sn-on-grad); display:grid; place-items:center; font:800 13px var(--sn-font); flex:none; }
.sn-ti-p{ width:44px; height:62px; border-radius:10px; background:var(--pg); flex:0 0 auto; }
.sn-ti-m{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sn-ti-m > b{ font:700 15px/1.2 var(--sn-font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-ti-m > span{ font:500 12px/1.35 var(--sn-font); color:var(--sn-ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-ti-m i{ font-style:normal; color:var(--a-vote); }

/* ── result ─────────────────────────────────────────────────────── */
.sn-res{ width:min(460px,100%); text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.sn-res > .sn-lab{ justify-content:center; margin:0; }
.sn-win{ position:relative; width:min(250px, 62vw); aspect-ratio:2/3; border-radius:28px; animation:snPop .7s cubic-bezier(.3,1.5,.5,1); }
.sn-win > .sn-c{ box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 0 80px -10px var(--a-vote), 0 40px 80px -30px #000; }
@keyframes snPop{ from{ transform:scale(.6) rotate(-6deg); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .sn-win{ animation:none; } }
.sn-res h2{ margin:0; font:800 30px/1.05 var(--sn-font); letter-spacing:-.035em; }
.sn-votes{ display:flex; gap:10px; justify-content:center; align-items:center; font:600 13px var(--sn-font); color:var(--sn-ink2); flex-wrap:wrap; }
.sn-where{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; font:600 12px var(--sn-font); color:var(--sn-ink3); }
.sn-rest{ width:100%; gap:8px; text-align:start; }
.sn-rest .sn-lab{ margin:0; }
.sn-hand{ display:flex; flex-direction:column; gap:8px; }
.sn-hand-row{ cursor:pointer; }
.sn-hand-row:hover{ background:var(--sn-glass3) !important; }
.sn-hand-row .sn-ti-p{ width:36px; height:50px; border-radius:8px; }
.sn-hand-row .sn-ti-n{ width:26px; height:26px; font-size:12px; background:var(--sn-glass3); color:var(--sn-ink); }
.sn-res-solo{ width:min(520px,100%); }
.sn-tag{ --tc:var(--a-pass); flex:none; display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 10px; border-radius:999px; font:700 11.5px var(--sn-font); color:var(--tc); background:color-mix(in srgb, var(--tc) 14%, transparent); border:1px solid color-mix(in srgb, var(--tc) 45%, transparent); }
.sn-tag > .mi{ font-size:15px; }
.sn-tag.vote{ --tc:var(--a-vote); } .sn-tag.later{ --tc:var(--a-later); } .sn-tag.seen{ --tc:var(--a-seen); }

/* ── small screens ──────────────────────────────────────────────── */
@container sn (max-width:520px){
  .sn-row2{ grid-template-columns:1fr; }
  .sn-card{ padding:18px; border-radius:26px; }
  .sn-setup h1{ font-size:26px; }
  .sn-acts-top{ gap:36px; }
  .sn-ab{ width:64px; height:64px; } .sn-ab > .mi{ font-size:30px; }
  .sn-ab.sm{ width:52px; height:52px; }
  .sn-ttl > b{ font-size:24px; }
}
/* phone landscape: the card beside its buttons, everything on one screen */
@media (max-height:520px) and (orientation:landscape){
  .sn-bar{ padding:8px 14px 4px; }
  .sn-orb{ width:38px; height:38px; }
  .sn-full .sn-stage{ padding:4px 14px 10px; }
  .sn-deckcol{ display:grid; grid-template-columns:auto auto; grid-template-rows:auto 1fr; column-gap:22px; align-items:center; }
  .sn-meter-sm{ display:flex !important; grid-column:1 / -1; width:100%; margin-bottom:6px; }
  .sn-deck{ height:calc(100dvh - 136px); min-height:0; }
  .sn-c.back{ transform:scale(.95) translateY(12px); } .sn-c.back2{ transform:scale(.9) translateY(22px); }
  .sn-ttl{ padding:40px 14px 14px; gap:2px; }
  .sn-ttl > b{ font-size:20px; }
  .sn-ttl > span:not(.sn-pv):not(.sn-fr-start){ font-size:11.5px; }
  .sn-fr-start > i{ display:none; }
  .sn-pv{ margin-top:3px; }
  .sn-stamp{ font-size:17px; top:14px; } .sn-stamp.d-down{ bottom:90px; }
  .sn-in .sn-deck{ height:calc(100dvh - 150px); }
  .sn-acts{ margin-top:0; }
  .sn-acts-top{ gap:18px; }
  .sn-ab{ width:60px; height:60px; } .sn-ab.sm{ width:50px; height:50px; }
  .sn-info{ display:none !important; }
  .sn-deckwrap{ grid-template-columns:1fr !important; width:auto; }
  .sn-win{ width:min(160px, 30vw); }
  .sn-res{ width:min(640px,100%); }
}

/* B66 W9 — invite by email or username (066-110) · "+n" services (066-100) */
.sn-byname{ display:flex; gap:8px; margin-top:-6px; }
.sn-in{ flex:1; min-width:0; height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--sn-edge); background:var(--sn-glass2); color:var(--sn-ink); font:500 13.5px var(--sn-font); outline:0; }
.sn-in:focus{ border-color:var(--sn-hi); }
.sn-byname .sn-bt{ height:40px; flex:none; }
.sn-chip > button{ display:inline-grid; place-items:center; width:20px; height:20px; margin-inline-end:-6px; border-radius:50%; background:var(--sn-glass2); }
.sn-chip > button > .mi{ font-size:14px; }
.sn-plus{ align-self:center; margin-inline-start:4px; font:800 11.5px var(--sn-font); color:var(--sn-ink2); }
.sn-pv .sn-plus{ color:#fff; }
/* Decide: the picked title leads the approved list (066-094) */
.sn-hand-row.is-pick{ border:1.5px solid var(--sn-hi) !important; background:color-mix(in srgb, var(--sn-hi) 14%, transparent) !important; }
.sn-hand-row.is-pick > .mi{ margin-inline-start:auto; color:var(--sn-hi); }