/* Gamitop rooms · creator flow (/new, creator.js).
   Structure = Clastop Shop (Minimal UI) through brand.css tokens and primitives; colour = Gamitop brand plus the chosen
   party (--pc) and look (--ps), both set on #s0 from the contract and the party list. No literal colours here. */

/* the old two-card creator stays in the DOM for its engines, never on screen */
#s0>.cstep{display:none!important}
#s0{--pc:var(--pc-raw,var(--g-magenta));overflow:clip}
#s0[data-light]{--pc:color-mix(in srgb,var(--pc-raw) 62%,var(--g-ink))}

.cr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--g-paper);color:var(--g-ink);font:var(--g-body);overflow:clip;direction:rtl;-webkit-font-smoothing:antialiased}
.cr *{box-sizing:border-box}
.cr button{font-family:var(--g-font)}
.cr-park{display:none!important}

/* top: segmented progress + step title */
.cr-top{padding:calc(16px + env(safe-area-inset-top,0px)) 16px 8px;display:flex;flex-direction:column;gap:10px;flex:none}
.cr-dots{display:flex;gap:4px}
.cr-dots i{flex:1;height:4px;border-radius:var(--g-r-pill);background:var(--g-grey2);transition:background .3s var(--g-ease-luxe)}
.cr-dots i.on{background:var(--pc)}
.cr-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cr-title b{font:800 19px/1.2 var(--g-font-display);outline:none}
.cr-title small{font:600 12px var(--g-font-mono);color:var(--g-ink2);direction:ltr}

/* body */
.cr-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 16px 168px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain;animation:crIn .32s var(--g-ease-luxe)}
.cr[data-step] .cr-body{animation-name:crIn}
@keyframes crIn{from{opacity:.001;transform:translateY(6px)}}
.cr-h{margin:0;font:var(--g-h1);letter-spacing:-.01em;text-wrap:balance}
.cr-hint{margin:0;font:var(--g-small);color:var(--g-ink2)}
.cr-c{text-align:center}
.cr-err{font:700 13px var(--g-font);color:var(--g-err-ink)}
.cr-field{display:flex;flex-direction:column;gap:6px;font:700 14px var(--g-font)}
.cr-field>label{font:700 14px var(--g-font)}
.cr .g-input{width:100%}
.cr .g-btn.sm{min-height:40px;padding:0 16px;font-size:13.5px}

/* footer: back + next, rides above the drawer handle */
.cr-foot{position:absolute;inset:auto 0 52px 0;padding:22px 16px 0;display:flex;gap:10px;z-index:6;background:linear-gradient(to bottom,color-mix(in srgb,var(--g-paper) 0%,transparent),var(--g-paper) 38%);transition:bottom .38s var(--g-ease-luxe)}
.cr[data-drawer="1"] .cr-foot{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.cr-foot .g-btn{flex:1}
.cr-foot #crBack{flex:0 0 90px}

/* drawer: what friends will see */
.cr-drw{position:absolute;inset:auto 0 0 0;height:calc(52px + env(safe-area-inset-bottom,0px));background:var(--g-paper);border-top:1px solid var(--g-line);border-radius:var(--g-r-xl) var(--g-r-xl) 0 0;box-shadow:var(--g-sh-pop);transition:height .38s var(--g-ease-luxe);display:flex;flex-direction:column;z-index:5}
.cr-drw[data-open="1"]{height:80%}
.cr-drw-h{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 10px;font:700 13.5px var(--g-font);color:var(--g-ink);flex:none}
.cr-drw-h .grip{width:36px;height:4px;border-radius:var(--g-r-pill);background:var(--g-grey2)}
.cr-drw-h:focus-visible{outline:2px solid var(--g-ink);outline-offset:-2px}
.cr-drw-b{flex:1;min-height:0;overflow:auto;padding:0 14px 92px;display:flex;flex-direction:column;gap:10px;align-items:center}
.cr-drw[data-open="0"] .cr-drw-b{visibility:hidden}

/* who: persona banners */
.persL{display:flex;flex-direction:column;gap:12px}
.pban{all:unset;box-sizing:border-box;cursor:pointer;position:relative;height:132px;border-radius:var(--g-r-lg);overflow:hidden;color:var(--g-paper);display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px;gap:2px;background:linear-gradient(150deg,var(--from),var(--to));transition:transform .25s var(--g-ease-snap),box-shadow .25s}
.pban .ph{position:absolute;inset:0 auto 0 0;width:58%;background:center 22%/cover no-repeat}
.pban .ov{position:absolute;inset:0;background:linear-gradient(270deg,var(--from) 38%,color-mix(in srgb,var(--from) 0%,transparent) 92%)}
.pban .tag,.pban b,.pban small{position:relative}
.pban .tag{align-self:flex-start;font:800 10.5px/1 var(--g-font);letter-spacing:.06em;background:color-mix(in srgb,var(--g-paper) 22%,transparent);backdrop-filter:blur(6px);padding:5px 8px;border-radius:var(--g-r-xs);margin-bottom:auto}
.pban b{font:800 22px/1.1 var(--g-font-display);max-width:62%}
.pban small{font:600 12.5px/1.35 var(--g-font);opacity:.92;max-width:52%}
.pban .go{position:absolute;bottom:14px;left:14px;background:var(--g-paper);color:var(--g-ink);font:700 12px var(--g-font);padding:7px 12px;border-radius:var(--g-r-pill)}
.pban[aria-pressed="true"]{box-shadow:0 0 0 3px var(--g-paper),0 0 0 5px var(--g-ink);transform:translateY(-2px)}
.pban[aria-pressed="true"] .go{background:var(--g-ink);color:var(--g-paper)}
.pban:focus-visible{outline:3px solid var(--g-ink);outline-offset:2px}
.pban:active{transform:scale(.98)}

/* party: search + category tiles */
.msearch{display:flex;align-items:center;gap:8px;border:1px solid var(--g-line2);border-radius:var(--g-r-sm);padding:0 12px;color:var(--g-ink3);background:var(--g-paper)}
.msearch:focus-within{outline:2px solid var(--pc);outline-offset:1px}
.msearch input{all:unset;flex:1;padding:12px 0;font:500 15px var(--g-font);color:var(--g-ink)}
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cr-empty{grid-column:1/-1;text-align:center;padding:18px 0}
.ctile{all:unset;box-sizing:border-box;cursor:pointer;background:var(--g-paper);border:1px solid var(--g-line);border-radius:var(--g-r-lg);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;transition:box-shadow .2s,border-color .2s;box-shadow:var(--g-sh-1)}
.ctile .cc{width:66px;height:66px;border-radius:50%;background:var(--g-grey) center 18%/150% no-repeat;display:grid;place-items:center;font:800 20px var(--g-font-display);color:var(--sel)}
.ctile .cc.ini{background:color-mix(in srgb,var(--sel) 13%,var(--g-paper))}
.ctile span{font:700 11.5px/1.2 var(--g-font);text-align:center;min-height:2.4em;display:grid;place-items:center}
.ctile[aria-pressed="true"]{border-color:var(--sel);box-shadow:0 0 0 1.5px var(--sel)}
.ctile[aria-pressed="true"]::after{content:"✓";position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;background:var(--sel);color:var(--g-paper);font:700 11px/18px var(--g-font);text-align:center}
.ctile:focus-visible{outline:2px solid var(--g-ink)}

/* details */
.photo{display:flex;gap:14px;align-items:center}
.photo .av{width:96px;height:96px;border-radius:50%;background:var(--g-grey) center 25%/cover;box-shadow:0 0 0 3px var(--g-paper),0 0 0 4px var(--pc);flex:none;position:relative}
.photo .av::after{content:"";position:absolute;inset:18% 22% 26%;border:1.5px dashed color-mix(in srgb,var(--g-paper) 85%,transparent);border-radius:50%}
.photo .cr-field{flex:1;min-width:0;align-items:flex-start}
.cr-file{position:relative;overflow:hidden}
.cr-file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.cr-range{width:100%;accent-color:var(--pc)}

/* topics bubbles */
.bub{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:6px 0}
.bub button{all:unset;box-sizing:border-box;cursor:pointer;width:var(--sz);height:var(--sz);border-radius:50%;background:var(--g-grey);display:grid;place-items:center;text-align:center;font:700 12px/1.15 var(--g-font);padding:4px;transition:transform .3s var(--g-ease-spring),background .2s,color .2s}
.bub button[aria-pressed="true"]{background:var(--pc);color:var(--g-paper);transform:scale(1.14)}
.bub button:focus-visible{outline:2px solid var(--g-ink)}

/* look */
.kits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kit{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px var(--g-font);color:var(--g-ink2)}
.kit i{width:64px;height:50px;border-radius:var(--g-r);border:2px solid var(--g-paper);background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 0 1px var(--g-line)}
.kit[aria-pressed="true"]{color:var(--g-ink)}
.kit[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--g-ink)}
.kit:focus-visible{outline:2px solid var(--g-ink);outline-offset:2px;border-radius:var(--g-r-sm)}

/* toggles */
.cr-sw{all:unset;cursor:pointer;width:46px;height:28px;border-radius:var(--g-r-pill);background:var(--g-grey2);position:relative;flex:none;transition:background .2s}
.cr-sw::after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--g-paper);box-shadow:var(--g-sh-1);transition:right .2s var(--g-ease-snap)}
.cr-sw[aria-checked="true"]{background:var(--pc)}
.cr-sw[aria-checked="true"]::after{right:21px}
.cr-sw:focus-visible{outline:2px solid var(--g-ink);outline-offset:2px}
.tog{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--g-line);font:700 14.5px var(--g-font)}
.tog small{display:block;font-weight:400;color:var(--g-ink2);font-size:12.5px}
.lrows{display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--g-line);border-radius:var(--g-r)}
.lrow .ic{width:40px;height:40px;border-radius:var(--g-r-sm);background:color-mix(in srgb,var(--pc) 10%,var(--g-paper));color:var(--pc);display:grid;place-items:center;flex:none}
.lrow .tx{flex:1;min-width:0;font:700 14px var(--g-font)}
.lrow .tx small{display:block;font-weight:400;color:var(--g-ink2);font-size:12px}
.lrow .tx em{font:800 10px var(--g-font);font-style:normal;color:var(--g-warn-ink);background:var(--g-warn-soft);border-radius:4px;padding:1px 5px;margin-inline-start:6px}

/* record */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modes button{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--g-line2);border-radius:var(--g-r);padding:10px 12px;display:flex;flex-direction:column;gap:2px;font:700 14px var(--g-font)}
.modes button small{font:400 12px/1.35 var(--g-font);color:var(--g-ink2)}
.modes button[aria-checked="true"]{border-color:var(--pc);box-shadow:0 0 0 1px var(--pc);background:color-mix(in srgb,var(--pc) 6%,var(--g-paper))}
.modes button:focus-visible{outline:2px solid var(--g-ink)}
.cards{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;flex:none}
.cards .g-chip{flex:0 0 auto;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;padding:8px 12px;border-radius:var(--g-r-sm)}
.cr-pr{display:flex;flex-direction:column;gap:10px}
.cam{border-radius:var(--g-r-xl);aspect-ratio:9/12;max-height:52vh;background:linear-gradient(170deg,var(--g-grey),var(--g-grey2)) center/cover no-repeat;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none}
.cam[data-m="done"]{background-size:cover}
.cam .face{width:46%;aspect-ratio:3/4;border:2px dashed color-mix(in srgb,var(--g-paper) 95%,transparent);border-radius:50%}
.cam[data-m="done"] .face{border-style:solid;border-color:var(--g-ok)}
.cam .tp{position:absolute;inset:12px 12px auto;background:color-mix(in srgb,var(--g-ink) 75%,transparent);color:var(--g-paper);border-radius:var(--g-r);padding:10px 12px;font:600 14px/1.4 var(--g-font);max-height:5.6em;overflow:hidden}
.cam .tm{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);font:600 13px var(--g-font);color:var(--g-paper);background:color-mix(in srgb,var(--g-ink) 45%,transparent);padding:4px 12px;border-radius:var(--g-r-pill);white-space:nowrap}
.cr .cam #camB{all:unset;box-sizing:border-box;position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:68px;height:68px;border-radius:50%;border:4px solid var(--g-paper);display:grid;place-items:center;cursor:pointer;font-size:0;box-shadow:var(--g-sh-pop)}
.cr .cam #camB .rdot{display:block;width:46px;height:46px;border-radius:50%;background:var(--g-err);box-shadow:none;transition:transform .2s var(--g-ease-snap)}
.cr .cam #camB:active .rdot{transform:scale(.9)}
.cr .cam #camB:focus-visible{outline:2px solid var(--g-ink);outline-offset:3px}
.cr #galB{all:unset;cursor:pointer;align-self:center;font:700 14px var(--g-font);color:var(--g-ink2);text-decoration:underline;text-underline-offset:3px;padding:6px;text-align:center}
.cr #galB:focus-visible{outline:2px solid var(--g-ink)}
#crRetake{align-self:center}

/* edit: the real editor, embedded and restyled */
.cr-body .ed{position:relative;inset:auto;z-index:auto;background:none;display:flex;flex-direction:column;gap:12px;flex:none}
.cr-body .ed .edv{flex:none;height:min(48vh,400px);margin:0;border-radius:var(--g-r-lg);background:var(--g-grey);box-shadow:var(--g-sh-card)}
.cr-body .ed .edp{margin:0;padding:0;background:none;max-height:none;overflow:visible;border-radius:0;gap:12px}
.cr-body .ed .edh{font:700 15px var(--g-font)}
.cr-body .ed #edOk{display:none}
.cr .ed .fl button{font:600 11.5px var(--g-font);color:var(--g-ink2)}
.cr .ed .fl i{border-radius:var(--g-r);border-width:2px}
.cr .ed .fl button.on i{border-color:var(--pc)}
.cr .ed .fl button.on{color:var(--g-ink)}
.cr .ed .adv{font:700 14px var(--g-font);color:var(--pc)}
.cr .ed .tr2 input::-webkit-slider-thumb{background:var(--pc);border-radius:var(--g-r-xs)}
.cr .ed .tr2 input::-moz-range-thumb{background:var(--pc);border-radius:var(--g-r-xs)}
.cr .ed .tr2::before{background:var(--g-grey2)}
.cr .ed .cf{font:600 13px var(--g-font);color:var(--g-ink2)}
.cr .ed .cf input{font:500 16px var(--g-font);border:1px solid var(--g-line2);border-radius:var(--g-r-sm);padding:12px 14px;background:var(--g-paper);color:var(--g-ink)}
.cr .ed .cf input:focus{border-color:var(--pc)}
.cr .ed .pos button{border:1px solid var(--g-line2);border-radius:var(--g-r-sm);font:700 13px var(--g-font);background:var(--g-paper);color:var(--g-ink)}
.cr .ed .pos button.on{border-color:var(--pc);box-shadow:0 0 0 1px var(--pc)}
.cr .ed .sw{font:600 14px var(--g-font)}
.cr .ed .sw input{accent-color:var(--pc)}
.cr .ed .edtime{background:color-mix(in srgb,var(--g-ink) 55%,transparent);font:700 12px var(--g-font)}
.cr .cbtn{border-radius:var(--g-r);font:700 15px var(--g-font);min-height:48px;padding:0 20px;background:var(--pc);color:var(--g-paper);box-shadow:var(--g-sh-btn)}
.cr .cbtn.ghost{background:var(--g-grey);color:var(--g-ink);box-shadow:none}
.cr-ready{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px}
.cr-ready video{width:min(62%,220px);aspect-ratio:9/16;object-fit:cover;border-radius:var(--g-r);background:var(--g-grey)}
.cr-ready b{font:var(--g-h3)}

/* render + approve overlays (moved from the editor so they cover the whole flow) */
.cr>.rd{z-index:20;background:color-mix(in srgb,var(--g-paper) 97%,transparent)!important}
.cr>.rd .rdbox b{font:800 19px var(--g-font-display)!important;color:var(--g-ink)}
.cr>.rd .rdbox span{font:var(--g-small)!important;color:var(--g-ink2)!important}
.cr>.rd .rdn{font:300 44px/1 var(--g-font)!important}
.cr>.ap{z-index:21;background:var(--g-paper)}
.cr>.ap .apv video{border-radius:var(--g-r-lg);box-shadow:var(--g-sh-card);background:var(--g-grey)}
.cr>.ap .edp{background:var(--g-paper);border-radius:var(--g-r-xl) var(--g-r-xl) 0 0;box-shadow:var(--g-sh-pop);padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));gap:10px}
.cr>.ap .edh{font:var(--g-h3)}
.cr>.ap .apm{font:var(--g-small);color:var(--g-ink2)}
.cr>.ap .edbtns .cbtn{flex:1}

/* gallery ownership sheet (index.html engine), restyled */
#s0 .own{background:color-mix(in srgb,var(--g-ink) 55%,transparent)}
#s0 .ownc{background:var(--g-paper);color:var(--g-ink);border-radius:var(--g-r-xl) var(--g-r-xl) 0 0;font-family:var(--g-font);box-shadow:var(--g-sh-pop)}
#s0 .ownc b{font:var(--g-h2)}
#s0 .ownc p{font:var(--g-body);color:var(--g-ink2)}
#s0 .ownck{border-radius:var(--g-r);box-shadow:0 0 0 1px var(--g-line2);background:var(--g-paper);font:600 14.5px/1.45 var(--g-font)}
#s0 .ownck input{accent-color:var(--pc)}
#s0 .ownc .cbtn{border:0;border-radius:var(--g-r);font:700 15px var(--g-font);min-height:48px;background:var(--pc);color:var(--g-paper);box-shadow:var(--g-sh-btn);display:flex;align-items:center;justify-content:center}
#s0 .ownc .cbtn.ghost{background:var(--g-grey);color:var(--g-ink);box-shadow:none}
#s0 .ownc .cbtn[disabled]{background:var(--g-grey2);color:var(--g-ink3);box-shadow:none;opacity:1}
#s0 .ownx{font:700 14px var(--g-font);color:var(--g-ink2)}

/* game */
.cr-game{border-radius:var(--g-r-lg);overflow:hidden;min-height:420px;position:relative;display:flex;flex-direction:column}
.cr-soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 16px}
.cr-soon b{font:var(--g-h3)}

/* publish */
.cr-mark{display:grid;place-items:center;padding:18px 0;overflow:clip}
.cr-mark .gmh{width:150px}
.cr-go{width:100%}
.cr-done{display:flex;flex-direction:column;gap:12px}
.cr .keyb{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;box-shadow:none;background:var(--g-grey);border-radius:var(--g-r);padding:14px}
.cr .keyb span{font:600 13px var(--g-font);color:var(--g-ink2)}
.cr .keyb code{font:600 16px var(--g-font-mono);letter-spacing:.04em;text-align:left;color:var(--g-ink);word-break:break-all}
.cr-share{display:flex;flex-direction:column;gap:8px}
.pbar{width:100%;height:8px;border-radius:var(--g-r-pill);background:var(--g-grey);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--pc);border-radius:var(--g-r-pill)}
.cr-founder:empty{display:none}

/* human check sheet */
.cr-sheet{position:absolute;inset:0;z-index:30;background:color-mix(in srgb,var(--g-ink) 55%,transparent);display:flex;align-items:flex-end}
.cr-sheet-c{width:100%;max-height:94%;overflow:auto;background:var(--g-paper);border-radius:var(--g-r-xl) var(--g-r-xl) 0 0;box-shadow:var(--g-sh-pop);padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;animation:crUp .38s var(--g-ease-luxe)}
.cr-sheet-c .grip{align-self:center;width:36px;height:4px;border-radius:var(--g-r-pill);background:var(--g-grey2)}
@keyframes crUp{from{transform:translateY(100%)}}

/* friend-side preview: Minimal profile card */
.mpro{width:268px;max-width:100%;border-radius:var(--g-r-lg);background:var(--g-paper);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--g-line);flex:none}
.mpro .cv{height:92px;background:linear-gradient(135deg,var(--pc),var(--ps));position:relative}
.mpro .cv::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 60px at 80% 20%,color-mix(in srgb,var(--g-paper) 35%,transparent),color-mix(in srgb,var(--g-paper) 0%,transparent) 70%)}
.mpro .live{position:absolute;top:10px;right:10px;z-index:1;display:flex;gap:5px;align-items:center}
.mpro .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g-paper);animation:crBlink 1.2s infinite}
@keyframes crBlink{50%{opacity:.25}}
.mpro .idn{display:flex;align-items:flex-end;gap:10px;padding:0 12px;margin-top:-30px;position:relative}
.mpro .idn i{width:64px;height:64px;border-radius:50%;background:var(--g-grey) center 25%/cover;box-shadow:0 0 0 3px var(--g-paper);flex:none}
.mpro .idn b{display:block;font:800 15px/1.2 var(--g-font-display)}
.mpro .idn small{font:600 11px var(--g-font);color:var(--g-ink2)}
.mpro .bdg{display:inline-block;margin-top:3px;white-space:nowrap}
.mpro .chips{display:flex;gap:4px;flex-wrap:wrap;padding:6px 12px 0}
.mpro .chips span{font:700 10.5px var(--g-font);color:var(--pc);background:color-mix(in srgb,var(--pc) 9%,var(--g-paper));border-radius:var(--g-r-xs);padding:3px 7px}
.mpro .st{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:10px 6px 6px}
.mpro .st b{display:block;font:800 15px var(--g-font-display)}
.mpro .st span{font-size:10.5px;color:var(--g-ink2)}
.mpro .tabs{display:flex;justify-content:center;gap:16px;border-top:1px solid var(--g-line);font:700 12px var(--g-font);color:var(--g-ink2);padding:8px 0 0}
.mpro .tabs span{padding-bottom:7px}
.mpro .tabs span.on{color:var(--g-ink);box-shadow:inset 0 -2px 0 var(--g-ink)}
.mpro .lstrip{display:flex;gap:6px;overflow-x:auto;padding:10px 10px 0;scrollbar-width:none}
.lw{flex:0 0 auto;min-width:104px;border-radius:var(--g-r);background:var(--g-grey);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.lw small{font:700 10px var(--g-font);color:var(--g-ink2)}
.lw b{font:800 16px var(--g-font-display)}
.mpro .post{margin:10px;border-radius:var(--g-r);background:var(--g-grey);overflow:hidden}
.mpro .vid2{height:150px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 30%,var(--g-paper)),color-mix(in srgb,var(--ps) 40%,var(--g-paper))) center/cover no-repeat;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:10px}
.mpro .vid2 .play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--g-paper) 92%,transparent);display:grid;place-items:center}
.mpro .vid2 .play::after{content:"";border-inline-start:14px solid var(--g-ink);border-block:9px solid transparent;margin-inline-start:4px;transform:scaleX(-1)}
.mpro .vid2 .cap{position:relative;font:700 11.5px var(--g-font);background:color-mix(in srgb,var(--g-ink) 78%,transparent);color:var(--g-paper);border-radius:var(--g-r-xs);padding:4px 8px;text-align:center}
.mpro .act{display:flex;gap:12px;align-items:center;padding:8px 10px;font:700 12px var(--g-font);color:var(--g-ink2)}
.mpro .act .sl{margin-inline-start:auto;width:30px;height:45px;background:var(--g-paper) center/contain no-repeat;border-radius:3px}
.mpro .xtra{display:flex;flex-direction:column;gap:4px;align-items:center;padding:0 10px 10px;font-size:11.5px;color:var(--g-ink2)}
.mpro .cta{margin:0 10px 10px;text-align:center;font:700 12.5px var(--g-font);background:var(--g-ink);color:var(--g-paper);border-radius:var(--g-r-sm);padding:10px}
/* shared-link preview in a chat */
.wa{width:260px;max-width:100%;background:var(--g-grey);border-radius:var(--g-r-lg);padding:12px;display:flex;flex-direction:column;gap:6px}
.wa .bub2{background:color-mix(in srgb,var(--g-ok) 16%,var(--g-paper));border-radius:10px 10px 2px 10px;padding:6px;align-self:flex-start;max-width:230px;font:400 13px/1.4 var(--g-font);color:var(--g-ink)}
.wa .og{border-radius:var(--g-r-sm);overflow:hidden;background:var(--g-paper);margin-bottom:6px}
.wa .og .im{height:120px;background:linear-gradient(165deg,var(--pc),var(--ps));display:flex;align-items:center;justify-content:center;gap:10px}
.wa .og .im i{width:70px;height:70px;border-radius:50%;background:var(--g-paper) center 25%/cover;box-shadow:0 0 0 3px var(--g-paper)}
.wa .og .im b{width:44px;height:66px;background:var(--g-paper) center/contain no-repeat;border-radius:3px}
.wa .og .tx{padding:6px 8px;font:700 12.5px var(--g-font)}
.wa .og .tx small{display:block;font-weight:400;color:var(--g-ink2)}

@media (prefers-reduced-motion:reduce){.cr-body,.cr-drw,.cr-foot,.pban,.bub button,.cr-sheet-c{animation:none!important;transition:none!important}.mpro .live::before{animation:none}}

/* ballot screen (#s1): public live strip, chosen by the chair in the creator (GET /api/rooms/:code/live) */
.cr-lstrip{display:flex;gap:6px;overflow-x:auto;padding:8px 16px 0;scrollbar-width:none;font-family:var(--g-font);flex:none}
.cr-lstrip .lw{background:var(--g-grey);border-radius:var(--g-r);color:var(--g-ink)}
.cr-lstrip .lw.now small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--g-err);margin-inline-end:5px;vertical-align:1px;animation:crBlink 1.2s infinite}
@media (prefers-reduced-motion:reduce){.cr-lstrip .lw.now small::before{animation:none}}