/* Feed shell on the Soft Arcade tokens in /reels/theme.css, re-pointed at the Hobbi brand tokens in
   /reels/hobbi-brand/hobbi-brand.css (mates-sdk; both linked before this file).
   Brand pass (Param P7 + P10, founder pick 2026-10-26: direction A, blue overall). Liquid Glass (--sa-glass) is only on
   the nav bar (☰, LIVE, the tabs, the balance); the social rail is bare Reels glyphs (2026-10-29). Every other surface (sheets, toasts, the loading
   preview, login, the tour) is a flat brand surface (--hb-surface-*) with the dither as texture, and never blurs.
   Money stays green (--hb-win). */
:root{font-family:var(--sa-font);color:var(--sa-text);background:var(--sa-bg);font-synthesis:none}
/* The shell's --sa-* names now read the brand. The accent is --hb-accent (blue by default); focus rings, toggles that are
   on, the primary buttons and the rails wear it; the balance pill stays plain white. Fallbacks keep the page legible if
   the brand file hasn't loaded. */
:root{--fd-accent-glow:color-mix(in srgb,var(--hb-accent,#3faff3) 42%,transparent);--fd-accent-tint:color-mix(in srgb,var(--hb-accent,#3faff3) 14%,transparent);
 --sa-font:var(--hb-font-ui);--sa-font-display:var(--hb-font-display);
 --sa-bg:var(--hb-night,#0a0c12);--sa-bg-2:var(--hb-surface-1,#0d1924);--sa-bg-gradient:radial-gradient(120% 55% at 50% 0%,color-mix(in srgb,var(--hb-accent-shade,#296b95) 45%,transparent),transparent 70%),var(--hb-night,#0a0c12);
 --sa-text:var(--hb-text,#eef1f7);--sa-text-2:var(--hb-text-2,#c3c9d6);--sa-text-3:var(--hb-text-3,#8d95a7);
 --sa-line:var(--hb-line);--sa-line-strong:var(--hb-line-strong);--sa-scrim:var(--hb-scrim);
 --sa-mint:var(--hb-accent);--sa-mint-2:var(--hb-accent-shade);--sa-mint-fill:var(--hb-accent);--sa-mint-ink:var(--hb-on-accent);--sa-mint-glow:var(--fd-accent-glow);
 /* The one glass recipe, tinted toward the brand's blue night instead of Soft Arcade's green. Nav bar only (the rail went bare, 2026-10-29). */
 --sa-glass:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 48%,rgba(255,255,255,.02) 100%),rgba(12,20,32,.34);
 --sa-glass-press:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.10) 100%),rgba(12,20,32,.30)}
/* Brand primary button: the accent fill, night ink, Baloo 2, and a dithered gloss along the top edge (the bet panel's
   recipe in mates-sdk hobbi-layers.css), so every primary in the shell matches the game's BET. */
.continue-button,.login-submit,.tour-next.primary{overflow:hidden}
.continue-button:before,.login-submit:before,.tour-next.primary:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--hb-accent-gloss);opacity:.55;-webkit-mask:var(--hb-bayer-6) 0 0/var(--hb-cell) var(--hb-cell);mask:var(--hb-bayer-6) 0 0/var(--hb-cell) var(--hb-cell);pointer-events:none}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
/* No double-tap zoom anywhere in the app (it left the iPhone zoomed into a game, 2026-10-26); no click delay. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{background:var(--sa-bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sa-mint);outline-offset:3px}
[hidden]{display:none!important}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Glass material */
.glass{background:var(--sa-glass);border:1px solid var(--sa-glass-line);-webkit-backdrop-filter:var(--sa-glass-blur);backdrop-filter:var(--sa-glass-blur);box-shadow:var(--sa-glass-rim),var(--sa-glass-shadow);color:var(--sa-text)}

/* Feed, paging track, the one live game frame and its posters */
/* clip, not hidden: a game focusing a field or calling scrollIntoView could scroll a hidden box and strand the feed half a page down */
#feed{position:relative;width:100%;height:100dvh;isolation:isolate;overflow:hidden;overflow:clip;background:var(--sa-bg-gradient);touch-action:none}
/* The track itself never clips: it carries the neighbour pages (posters, peeking frames) just outside its box, and they
   must slide in with the finger. It isn't a scroll container either, and #feed clips the page. */
.feed-track{position:absolute;inset:0}
.game-mount,.game-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.game-frame{background:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Warm neighbours: loaded, paused and invisible until a swipe promotes them. */
/* Studio (creator) games are sandboxed on play.*: the feed can't hand them its safe-top, and they don't know the feed's
   chrome, so their frame starts under the top bar instead of behind it (mates-core#596). */
.game-frame.studio-frame{top:var(--sa-chrome-clearance);height:calc(100% - var(--sa-chrome-clearance))}
.game-frame.warm{visibility:hidden;pointer-events:none}
/* During a drag a warm neighbour shows in its slot; on landing it is already in place (arriving). */
.game-frame.warm.peek-next{visibility:visible;top:100%;bottom:auto}.game-frame.warm.peek-prev{visibility:visible;top:-100%;bottom:auto}.game-frame.warm.arriving{visibility:visible}
.game-shield{position:absolute;inset:0;z-index:1;touch-action:none;background:transparent}
/* Studio cards (mates-core#595): feed-owned swipe strips over the sandboxed creator frame, which can't page the feed.
   Thin, so the game keeps its touch area: one above the home indicator, one under the top bar. */
.studio-swipe{display:none;position:absolute;z-index:2;left:0;right:0;touch-action:none;background:transparent;cursor:ns-resize}
#feed.studio-card .studio-swipe{display:block}
.studio-swipe.bottom{bottom:env(safe-area-inset-bottom);height:26px}
.studio-swipe.top{top:var(--sa-chrome-clearance);height:18px}
.studio-swipe.bottom>i{position:absolute;left:50%;bottom:9px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#fff;opacity:.28;pointer-events:none;transition:opacity var(--sa-medium) var(--sa-ease)}
.studio-swipe.bottom>span{position:absolute;left:50%;bottom:22px;transform:translate(-50%,6px);white-space:nowrap;padding:6px 12px;border-radius:var(--sa-radius-pill);background:rgba(10,12,18,.9);color:#fff;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-medium) var(--sa-ease)}
#feed.studio-teach .studio-swipe.bottom>span{opacity:1;transform:translate(-50%,0)}
#feed.studio-teach .studio-swipe.bottom>i{opacity:.85;animation:studio-grab 1.1s var(--sa-ease) 3}
@keyframes studio-grab{50%{transform:translateY(-6px)}}
#feed.focus .studio-swipe>*{opacity:0}
@media (prefers-reduced-motion:reduce){#feed.studio-teach .studio-swipe.bottom>i{animation:none}}
.feed-poster{position:absolute;left:0;right:0;height:100%;background:var(--hb-night) center/cover no-repeat;pointer-events:none}
.feed-poster.prev{top:-100%}.feed-poster.next{top:100%}.feed-poster.cover{top:0;z-index:1}
/* Sideways: the next tab's first game, beside the page (left is set to 100% or -100% by the drag's direction). */
/* At rest it waits off the page: with no left it sat at 0, an opaque full-screen box over the game frame, and every game
   showed black under the chrome (rc-11, 2026-10-26). paintSide sets left to 100% or -100% for each sideways drag. */
.feed-poster.side{top:0;right:auto;left:100%;width:100%}
.load-bar{position:absolute;z-index:4;left:0;right:0;bottom:0;height:2px;background:var(--hb-accent);transform-origin:left center;transform:scaleX(0);box-shadow:0 0 10px var(--sa-mint-glow);pointer-events:none}

/* Top bar: ☰ on the left, the tabs filling the middle, the $ balance on the right. */
.chrome{position:absolute;top:0;left:0;right:0;z-index:5;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sa-space-2);padding:var(--sa-safe-top) var(--sa-safe-right) 0 var(--sa-safe-left);pointer-events:none}
.game-switch,.wallet{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-height:var(--sa-control);border-radius:var(--sa-radius-pill);transition:transform var(--sa-fast) var(--sa-spring),background var(--sa-fast) var(--sa-ease)}
.game-switch{justify-self:start;width:var(--sa-control);padding:0}
.game-switch .menu-mark{width:20px;height:20px;stroke-width:1.9;color:var(--sa-text)}
.game-switch:active,.wallet-pill:active{transform:scale(.94);background:var(--sa-glass-press)}
#gameTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Solo | PvP | Multiplayer: a glass capsule with a sliding lens under the selected tab. Each tab is as wide as its
   label (plus an even share of what's left), so every mode fits on a phone; the feed places the lens (placeLens). */
.sections{position:relative;justify-self:center;width:100%;max-width:360px;pointer-events:auto;display:flex;align-items:center;padding:3px;min-height:var(--sa-control);border-radius:var(--sa-radius-pill);container-type:inline-size}
/* "Multiplayer" only while all three labels fit at full padding (Solo + PvP + Multiplayer is about 121 px of 13 px Geist,
   plus 6 x 10 px). At 431-445 px (iPhone Pro Max is 440) or with a long balance the pill is narrower and the "r" ran past it. */
@container (width < 181px){.tab-long{display:none}}
.tab-lens{position:absolute;top:3px;bottom:3px;left:0;width:var(--lens-w,0);transform:translateX(var(--lens-x,0));border-radius:var(--sa-radius-pill);background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.10),0 2px 8px rgba(0,0,0,.18);transition:transform var(--sa-medium) var(--sa-spring),width var(--sa-medium) var(--sa-spring);pointer-events:none}
/* While a finger drags the tabs the lens tracks it exactly; the spring is only for taps and releases. */
.sections.dragging .tab-lens{transition:none}
.sections button[hidden]{display:none}
.sections button{position:relative;z-index:1;flex:1 1 auto;min-width:0;min-height:36px;padding:0 10px;white-space:nowrap;border:0;border-radius:var(--sa-radius-pill);background:none;color:rgba(255,255,255,.66);font-family:var(--hb-font-ui);font-size:13px;font-weight:var(--sa-weight-strong);letter-spacing:-.01em;transition:color var(--sa-fast) var(--sa-ease)}
.sections button[aria-selected="true"]{color:#fff}
.sections button:focus-visible{outline:2px solid var(--sa-mint);outline-offset:-2px}

/* Balance pill: one wallet, the amount in dollars (opens the account sheet; "Refill" when empty). No coin badge. */
.wallet-pill{--coin:#fff;--coin-ink:#05070a;justify-self:end;pointer-events:auto;display:inline-flex;align-items:stretch;min-height:var(--sa-control);border-radius:var(--sa-radius-pill);border-color:color-mix(in srgb,var(--coin) 40%,var(--sa-glass-line));transition:transform var(--sa-fast) var(--sa-spring),border-color var(--sa-fast) var(--sa-ease)}
.wallet-pill .wallet{min-width:0;min-height:0;padding:0 12px;border:0;border-radius:var(--sa-radius-pill);background:none;color:var(--coin);font-size:15px;font-weight:var(--sa-weight-strong);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.wallet-pill .wallet.empty{background:var(--coin);color:var(--coin-ink)}

/* The caption duplicated each game's own copy, so it stays hidden (element kept for status/a11y). */
.game-caption{display:none}.eyebrow{font-size:var(--sa-fs-micro);letter-spacing:var(--sa-tracking-caps);font-weight:var(--sa-weight-medium);color:var(--sa-text-3);margin:0 0 6px}

/* Desktop-only previous/next buttons. Coarse pointers and narrow screens use swipes. */
.action-rail{position:absolute;z-index:3;right:max(56px,calc(env(safe-area-inset-right) + 52px));top:50%;transform:translateY(-50%);opacity:.7;transition:opacity var(--sa-medium) var(--sa-ease)}
.action-rail:hover,.action-rail:focus-within{opacity:1}
.navigation{display:flex;flex-direction:column;align-items:center;padding:2px 0;border:1px solid var(--sa-glass-line);border-radius:var(--sa-radius-pill);background:var(--sa-glass);-webkit-backdrop-filter:var(--sa-glass-blur);backdrop-filter:var(--sa-glass-blur);box-shadow:var(--sa-glass-rim)}
.navigation button{display:grid;place-items:center;width:var(--sa-control);height:var(--sa-control);padding:0;border:0;background:none;color:var(--sa-text)}
.navigation span{font-size:var(--sa-fs-micro);letter-spacing:.06em;color:var(--sa-text-2);padding:2px 0;font-variant-numeric:tabular-nums}
@media(pointer:coarse),(max-width:699px){.action-rail{display:none}}

@media (pointer:coarse){.edge-rail,.bottom-rail{display:none!important}}
/* Scroll indicator on the right edge, for mouse/pen. On phones each game forwards a vertical swipe from anywhere
   between rounds (reels/feed-swipe.js), and the feed takes the swipe itself while a game is opening. */
.edge-rail{position:absolute;z-index:4;right:env(safe-area-inset-right);top:calc(var(--sa-chrome-clearance) + 8px);bottom:max(150px,calc(env(safe-area-inset-bottom) + 140px));width:var(--sa-control);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:ns-resize}
.edge-rail>span{position:relative;display:block;width:3px;height:44px;border-radius:3px;background:var(--sa-mint);opacity:.5;box-shadow:0 0 10px var(--sa-mint-glow)}
.edge-rail>span:before,.edge-rail>span:after{content:"";position:absolute;left:-2px;width:5px;height:5px;border:solid var(--sa-mint);border-width:1.5px 1.5px 0 0}
.edge-rail>span:before{top:-13px;transform:rotate(-45deg)}.edge-rail>span:after{bottom:-13px;transform:rotate(135deg)}
.edge-rail:hover>span{opacity:.85}
.bottom-rail{position:absolute;z-index:4;left:env(safe-area-inset-left);bottom:env(safe-area-inset-bottom);width:var(--sa-control);height:var(--sa-control);touch-action:none;cursor:ns-resize}
.bottom-rail:after{content:"";position:absolute;left:12px;right:12px;bottom:12px;height:2px;border-radius:2px;background:var(--sa-line-strong);pointer-events:none}
@media(pointer:coarse){.edge-rail{width:28px;pointer-events:none}.edge-rail>span:before,.edge-rail>span:after{left:-1px}.bottom-rail{pointer-events:none}.bottom-rail:after{display:none}}
@media(max-width:359px){.bottom-rail{display:none}}

/* Loading: a glass pill with a spinner over the game's poster; after 10 s it offers Try again / Next game. */
.loading{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;max-width:calc(100% - 48px);padding:10px 16px 10px 14px;border-radius:var(--sa-radius-pill);font-size:14px;font-weight:var(--sa-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.loading:before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--fd-accent-tint);border-top-color:var(--sa-mint);animation:sa-spin .8s linear infinite}
.loading.glass,.recovery .glass{background:var(--hb-surface-2);border-color:var(--hb-line-strong);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 24px rgba(0,0,0,.35)}
@keyframes sa-spin{to{transform:rotate(360deg)}}
/* No loading screen (founder): the game's own poster covers a normal open, and the pill only fades in once a load
   has taken 1.2 s. Its hidden flag still tracks the load, so the 10 s recovery logic is unchanged. */
.loading:not([hidden]){animation:sa-fade .2s 1.2s both}
.recovery{position:absolute;z-index:4;top:calc(50% + 36px);left:0;right:0;display:flex;justify-content:center;gap:var(--sa-space-3);animation:sa-fade var(--sa-medium) var(--sa-ease)}
.recovery button{min-height:var(--sa-control);padding:0 var(--sa-space-5);border-radius:var(--sa-radius-pill);font-size:15px;font-weight:var(--sa-weight-strong)}
.recovery button:first-child{background:var(--hb-accent);border-color:transparent;color:var(--hb-on-accent)}
.recovery button:active{transform:scale(.96)}

/* TikTok caption: it greets each game, then fades so it never sits on gameplay. There is no side rail (founder,
   mates-core#26): rules, odds and sound live in the ☰ sheet. */
.tt-caption{position:absolute;z-index:3;transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-medium) var(--sa-ease)}
.tt-caption{left:var(--sa-safe-left);right:var(--sa-safe-right);bottom:calc(var(--sa-safe-bottom) + var(--sa-primary) + 20px);pointer-events:none;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.tt-caption p,.tt-caption h2{margin:0}
.tt-handle{font-size:15px;font-weight:var(--sa-weight-strong);letter-spacing:-.01em}
.tt-caption h2{margin-top:2px;font-family:var(--hb-font-display);font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
#ttDetail{margin-top:4px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-tags{margin-top:6px;font-size:13px;font-weight:var(--sa-weight-strong);color:var(--sa-mint)}
#feed.caption-faded .tt-caption{opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-medium) var(--sa-ease),visibility 0s linear var(--sa-medium)}
#feed.playing .tt-caption{opacity:0;transform:translateY(10px);visibility:hidden}
#feed.game-sheet .tt-caption{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none}
#feed.pvp-game .tt-caption{display:none}

/* Sheets: glass bottom sheets with a grabber, edge to edge, above the home indicator. */
.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:520px;max-height:min(82dvh,680px);margin:0 auto;overflow:auto;padding:10px var(--sa-safe-right) calc(var(--sa-safe-bottom) + 4px) var(--sa-safe-left);border:0;border-top:1px solid var(--hb-line-strong);border-radius:28px 28px 0 0;background:var(--hb-surface-1);box-shadow:0 -12px 40px rgba(0,0,0,.45);color:var(--sa-text);overscroll-behavior:contain;touch-action:pan-y;isolation:isolate}
.sheet:before{content:"";display:block;width:36px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--hb-line-strong)}
/* The brand texture: a band of accent dither along the sheet's top edge, fading out (a static mask, no per-frame work). */
.sheet:after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:64px;background:var(--hb-accent);opacity:.32;pointer-events:none;-webkit-mask:var(--hb-bayer-2) 0 0/8px 8px,linear-gradient(#000,transparent);-webkit-mask-composite:source-in;mask:var(--hb-bayer-2) 0 0/8px 8px,linear-gradient(#000,transparent);mask-composite:intersect}
.sheet[open]{animation:sa-sheet-up .34s var(--sa-ease-out)}
.sheet::backdrop{background:var(--hb-scrim);animation:sa-fade .3s var(--sa-ease)}
@keyframes sa-sheet-up{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes sa-fade{from{opacity:0}to{opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sa-space-3);margin-bottom:var(--sa-space-3)}
.sheet-head .eyebrow{display:none}
.sheet h2{margin:0;font-family:var(--hb-font-display);font-size:26px;font-weight:800;letter-spacing:var(--hb-tracking-display);line-height:1.1}
.sheet h2[tabindex]{outline:none}
.close{display:grid;place-items:center;flex:none;width:var(--sa-control);height:var(--sa-control);padding:0;border:1px solid var(--hb-line);border-radius:50%;background:var(--hb-surface-3);font-size:22px;line-height:1;color:var(--sa-text)}
.close:active{transform:scale(.92)}
.sheet-actions{display:flex;align-items:center;gap:var(--sa-space-2)}
.glass-button{display:grid;place-items:center;flex:none;width:var(--sa-control);height:var(--sa-control);padding:0;border:1px solid var(--hb-line);border-radius:50%;background:var(--hb-surface-3);color:var(--sa-text);transition:transform var(--sa-fast) var(--sa-spring)}
.glass-button:active{transform:scale(.92)}
.glass-button[aria-pressed=true]{color:var(--sa-mint)}
.glass-button .rec-dot{fill:#ff4d55;stroke:none}
#haptics .buzz{transition:opacity var(--sa-fast) var(--sa-ease)}#haptics[aria-pressed=false] .buzz{opacity:0}
.sheet-note{margin:var(--sa-space-4) 0 0;font-size:var(--sa-fs-fine);line-height:1.5;color:var(--sa-text-2)}

/* ☰ menu: Social, the Game builder, then Log out. */
.menu-row{display:flex;align-items:center;gap:var(--sa-space-3);width:100%;min-height:72px;padding:var(--sa-space-3) var(--sa-space-4) var(--sa-space-3) var(--sa-space-3);text-align:left;border:1px solid var(--hb-line);border-radius:18px;background:var(--hb-surface-2);transition:transform var(--sa-fast) var(--sa-spring),background var(--sa-fast) var(--sa-ease)}
.menu-row:active{transform:scale(.98);background:var(--fd-accent-tint)}
.menu-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--hb-surface-3);box-shadow:inset 0 0 0 1px var(--hb-line)}
.menu-icon svg{width:24px;height:24px;stroke:var(--hb-text);stroke-width:1.8;fill:none}
.menu-row+.menu-row{margin-top:var(--sa-space-2)}
.menu-icon.social{background:linear-gradient(180deg,#8fdcff,#5ec8ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 18px rgba(94,200,255,.32)}
.menu-icon.social svg{stroke:#04263a;fill:none}
.menu-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:var(--sa-space-4);border:1px solid color-mix(in srgb,var(--hb-red) 30%,transparent);border-radius:var(--sa-radius-pill);background:color-mix(in srgb,var(--hb-red) 10%,transparent);color:var(--hb-red);font-size:15px;font-weight:600;transition:transform var(--sa-fast) var(--sa-spring)}
.menu-logout:active{transform:scale(.98)}
.menu-logout svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-text strong{font-family:var(--hb-font-ui);font-size:16px;font-weight:600;letter-spacing:-.01em}
.menu-text small{font-size:13px;color:var(--sa-text-2)}
.menu-row .arrow{margin-left:auto;font-size:26px;line-height:1;color:var(--sa-text-2)}

/* Rules and odds: the disclosure is real body text (12 px+ in --sa-text-2 or brighter, docs/design §4.5). */
.info-how{white-space:pre-line;margin:0 0 var(--sa-space-3);font-size:16px;font-weight:var(--sa-weight-medium);line-height:1.4;color:var(--sa-text)}
.info-odds{margin:0;font-size:15px;line-height:1.55;color:var(--sa-text-2)}
.info-coins,.account-coins{margin:var(--sa-space-3) 0 0;font-size:13px;line-height:1.4;font-weight:var(--sa-weight-strong);color:var(--sa-text-2)}
.wallet-pill .wallet{position:relative}

/* Account */
.account-balance{display:block;margin:var(--sa-space-3) 0 var(--sa-space-2);font-family:var(--hb-font-mono);font-size:44px;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.account-sheet>p{font-size:14px;line-height:1.6;color:var(--sa-text-2)}
.account-id{display:flex;justify-content:space-between;align-items:center;gap:var(--sa-space-3);width:100%;min-height:var(--sa-control);padding:var(--sa-space-3);border:1px solid var(--hb-line);border-radius:var(--sa-radius-m);background:var(--hb-surface-2);color:var(--sa-text-2);font-size:var(--sa-fs-label)}
.account-id>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.account-id>span:last-child{white-space:nowrap;color:var(--sa-mint)}

/* Toasts sit under the top chrome so they never cover a game's primary action. */
#toast{position:fixed;z-index:10;left:50%;top:var(--sa-chrome-clearance);max-width:min(340px,calc(100% - 32px));transform:translate(-50%,-8px);opacity:0;pointer-events:none;padding:10px 18px;border:1px solid var(--hb-line-strong);border-radius:var(--sa-radius-pill);background:var(--hb-surface-2);box-shadow:0 8px 24px rgba(0,0,0,.35);color:var(--sa-text);font-size:13px;font-weight:var(--sa-weight-medium);line-height:1.45;text-align:center;transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-medium) var(--sa-ease)}
#toast.visible{opacity:1;transform:translate(-50%,0)}

@media(orientation:landscape) and (max-height:500px){.sheet{max-height:calc(100dvh - var(--sa-safe-top) - var(--sa-safe-bottom));padding:var(--sa-space-4)}.account-balance{font-size:36px;margin:var(--sa-space-3) 0}.edge-rail{bottom:max(40px,env(safe-area-inset-bottom))}}
@media(min-width:700px){#gameTitle{position:static;width:auto;height:auto;clip:auto;margin-left:var(--sa-space-2);font-size:15px;font-weight:var(--sa-weight-medium)}.game-switch{width:auto;padding:0 var(--sa-space-4) 0 var(--sa-space-3)}}

/* No splash (founder 2026-10-29: "delete the loading screen, go straight from opening the app to onboarding"). Until the
   login gate answers (onboarding.js, usually one quick /accounts/me) the page is the plain night ground, the same colour
   as the iPhone app's launch cover, so a logged-out open never flashes the feed's chrome before the login form. The feed
   shows the moment the gate opens (social-feed.js startFeed adds .gate-open); nothing animates or waits on a timer. */
html:not(.gate-open) #feed{visibility:hidden}
@media(prefers-reduced-motion:reduce){.sheet[open],.sheet::backdrop,.recovery{animation:none}.loading:before{animation:none}.tab-lens{transition:none}}
.game-art.bow:before{width:14px;height:24px;border:3px solid #c99a63;border-left:0;border-radius:0 14px 14px 0;box-shadow:-3px 0 0 -1px #eef4ef}
.game-art.penalty:before{width:28px;height:14px;border:3px solid #eef4ef;border-bottom:0;border-radius:2px 2px 0 0;background:repeating-linear-gradient(90deg,#ffffff22 0 1px,transparent 1px 5px);box-shadow:8px 12px 0 -4px #f6f8f6}
/* Lite mode (lower-end phones, set by social-feed.js from measured frame rate): no backdrop blur, more opaque glass. */
html.lite{--sa-glass-blur:none;--sa-glass-blur-strong:none;--sa-glass:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,.02) 100%),rgba(12,20,32,.78);--sa-glass-strong:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 30%),rgba(12,20,32,.94)}
html.lite .swipe-hint-card{-webkit-backdrop-filter:none;backdrop-filter:none}
/* ☰ menu account row: who this phone is signed in as, Sign out / Sign in. */
.menu-account{display:flex;flex-direction:column;gap:10px;margin:0 0 var(--sa-space-3);padding:14px 16px;border-radius:20px}
.menu-account-who{margin:0;font-size:15px;color:var(--sa-text-2)}.menu-account-who strong{color:var(--sa-text);font-weight:var(--sa-weight-medium,600)}
.menu-account-action{min-height:44px;padding:0 16px;border-radius:var(--sa-radius-pill);border:1px solid var(--sa-glass-line);background:rgba(255,255,255,.14);color:var(--sa-text);font:inherit;font-size:15px;font-weight:600}
.menu-account-action.quiet{background:transparent}.menu-account-action:active{transform:scale(.98)}
.menu-account-form{display:flex;flex-direction:column;gap:8px}.menu-account-form[hidden]{display:none}
.menu-account-form input{min-height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--sa-glass-line);background:rgba(0,0,0,.28);color:var(--sa-text);font:inherit;font-size:16px}
.menu-account-buttons{display:flex;gap:8px}.menu-account-buttons>*{flex:1}
.menu-account-error{margin:0;min-height:1em;font-size:13px;color:var(--sa-text-2)}
/* Four columns once the LIVE pill is in the bar (the app's / route may still serve the older three-item bar). */
.chrome:has(.live-pill){grid-template-columns:auto auto minmax(0,1fr) auto}
/* LIVE pill (founders 2026-10-26, "the Twitch thing"): between ☰ and the tabs; opens the Streams sheet. Red dot pulses
   while the iPhone app records. */
.live-pill{position:relative;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:var(--sa-control);height:var(--sa-control);padding:0 11px 0 10px;border-radius:var(--sa-radius-pill);color:var(--sa-text);transition:transform var(--sa-fast) var(--sa-spring),background var(--sa-fast) var(--sa-ease)}
.live-pill:active{transform:scale(.94);background:var(--sa-glass-press)}
.live-pill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.live-pill svg circle{fill:currentColor;stroke:none}
.live-dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#ff3b4a;box-shadow:0 0 0 2px rgba(255,59,74,.22),0 0 8px rgba(255,59,74,.7)}
.live-pill.on{border-color:rgba(255,80,90,.65)}
.live-pill.on .live-dot{animation:hb-live 1s ease-in-out infinite}
@keyframes hb-live{50%{opacity:.35;transform:scale(.8)}}
/* Top bar at phone widths: ☰, LIVE, Solo/PvP/Multiplayer and $ fit on one line down to 360 px. */
@media(max-width:430px){.chrome{gap:6px}.sections{padding:2px}.sections button{padding:0 7px;font-size:12.5px;letter-spacing:-.02em}.wallet-pill .wallet{padding:0 10px;font-size:14px}.live-pill{padding:0 9px 0 8px;gap:4px}}
@media(max-width:370px){.tab-long{display:none}}
@media(max-width:380px){.sections button{padding:0 5px;font-size:12px}.live-pill svg{width:18px;height:18px}.wallet-pill .wallet{padding:0 8px}}

/* ☰ menu: grouped glass lists under the account row and Game builder. */
.menu-sheet .menu-row{margin-bottom:var(--sa-space-3)}
.menu-group{display:flex;flex-direction:column;margin:0 0 var(--sa-space-3);border:1px solid var(--hb-line);border-radius:18px;overflow:hidden;background:var(--hb-surface-2)}
.menu-section{margin:var(--sa-space-4) 4px var(--sa-space-2);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sa-text-2)}
.menu-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 14px;border:0;background:none;color:var(--sa-text);font:inherit;font-size:16px;text-align:left;transition:background var(--sa-fast) var(--sa-ease)}
.menu-item+.menu-item:before{content:"";position:absolute;top:0;left:48px;right:0;height:1px;background:rgba(255,255,255,.10)}
.menu-item:active{background:rgba(255,255,255,.08)}
.menu-glyph{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--sa-text-2)}
.menu-glyph .rec-dot{fill:#ff4d55;stroke:none}.live-glyph circle{fill:currentColor;stroke:none}
.menu-label-text{flex:1 1 auto;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-item small{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--sa-text-2)}
.menu-item .arrow{flex:none;font-size:22px;line-height:1;color:var(--sa-text-2)}
.menu-soon{padding:3px 8px;border-radius:var(--sa-radius-pill);background:rgba(255,255,255,.08)}
.menu-item.nudge .menu-soon{animation:hb-nudge .4s var(--sa-ease)}
@keyframes hb-nudge{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.menu-item[aria-pressed=true] .rec-dot{animation:hb-live 1s ease-in-out infinite}
#menuRecord.unavailable .menu-label-text{color:var(--sa-text-2)}
/* Sound / Haptics switches. */
.menu-item .switch{flex:none;position:relative;width:46px;height:28px;border-radius:14px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background var(--sa-fast) var(--sa-ease)}
.menu-item .switch:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform var(--sa-fast) var(--sa-spring)}
.menu-item.toggle[aria-pressed=true] .switch{background:var(--hb-accent)}
.menu-item.toggle[aria-pressed=true] .switch:after{transform:translateX(18px)}
.menu-item.toggle[aria-pressed=true] .menu-glyph{color:var(--sa-text)}

/* Streams reel: full screen, one clip at a time, vertical swipe snaps (TikTok-style). Minimal overlay: platform badge,
   streamer, game; a small round record button and ✕. */
.reel-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#000;color:#fff;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
.reel-viewer::backdrop{background:#000}
.reel-viewer[open]{animation:sa-fade .2s var(--sa-ease)}
.reel-track{position:absolute;inset:0;will-change:transform;outline:none}
.reel-viewer button:focus:not(:focus-visible){outline:none}
.reel-track.snapping{transition:transform var(--reel-snap,.28s) cubic-bezier(.2,.85,.25,1)}
.reel-slide{position:relative;width:100%;height:100%;overflow:hidden;background:#000 center/contain no-repeat}
.reel-slide{contain:strict}
/* The whole clip is always on screen (Michael 2026-10-26: "zoomed in, we can't see the whole video"). The 9:16 clip and
   its poster (the slide's background, visible until the video has a decoded frame, so a swipe never shows black) are
   contained; the bars a taller or wider screen leaves show the poster blurred and dimmed (::before, masked to the
   bars), TikTok-style. */
.reel-slide{container-type:size}
.reel-slide::before{content:"";position:absolute;inset:0;background:inherit;background-size:cover;filter:blur(24px) brightness(.5);pointer-events:none;
 -webkit-mask:linear-gradient(#000 calc(50% - 88.89cqw),transparent 0 calc(50% + 88.89cqw),#000 0),linear-gradient(90deg,#000 calc(50% - 28.13cqh),transparent 0 calc(50% + 28.13cqh),#000 0);
 mask:linear-gradient(#000 calc(50% - 88.89cqw),transparent 0 calc(50% + 88.89cqw),#000 0),linear-gradient(90deg,#000 calc(50% - 28.13cqh),transparent 0 calc(50% + 28.13cqh),#000 0)}
.reel-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;opacity:0}
.reel-slide.ready video{opacity:1}
/* Tap to pause: a play mark while the clip is paused by a tap. */
.reel-slide.paused::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-28px 0 0 -18px;border-style:solid;border-width:28px 0 28px 46px;border-color:transparent transparent transparent rgba(255,255,255,.8);filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));pointer-events:none}
.reel-meta{position:absolute;left:16px;right:72px;bottom:calc(env(safe-area-inset-bottom) + 22px);margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.reel-meta strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.reel-meta small{font-size:14px;color:rgba(255,255,255,.82)}
.reel-badge{padding:2px 8px;border-radius:var(--sa-radius-pill);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(0,0,0,.5);text-shadow:none}
.reel-badge.youtube{background:#e8212b}.reel-badge.twitch{background:#9146ff}.reel-badge.kick{background:#53fc18;color:#06200a}
.reel-close,.reel-rec{position:absolute;z-index:2;top:calc(max(14px,env(safe-area-inset-top)) + 4px);display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
.reel-close{right:14px;font-size:24px;line-height:1}
.reel-rec{left:14px}
.reel-rec span{width:14px;height:14px;border-radius:50%;background:#ff3b4a;transition:border-radius .15s,transform .15s}
.reel-rec[aria-pressed=true]{border-color:rgba(255,80,90,.8)}
.reel-rec[aria-pressed=true] span{border-radius:3px;transform:scale(.85);animation:hb-live 1s ease-in-out infinite}
.reel-rec.unavailable span{background:rgba(255,255,255,.45)}
.reel-close:active,.reel-rec:active{transform:scale(.92)}
.reel-sound{position:absolute;z-index:2;left:50%;top:calc(max(14px,env(safe-area-inset-top)) + 12px);transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:var(--sa-radius-pill);background:rgba(0,0,0,.5);font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s}
.reel-viewer.sound-blocked .reel-sound{opacity:1}
.reel-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;font-size:15px;color:rgba(255,255,255,.75)}
@media(prefers-reduced-motion:reduce){.reel-track.snapping{transition:none}.reel-rec[aria-pressed=true] span,.live-pill.on .live-dot,.menu-item[aria-pressed=true] .rec-dot,.menu-item.nudge .menu-soon{animation:none}}
/* No right-side rail (founder's standing ask, 2026-10-26): the desktop ▲/▼ counter, the right-edge scroll strip and the
   bottom swipe strip are gone on every screen. Swipes, the wheel/trackpad and the arrow keys still change games. */
.action-rail,.edge-rail,.bottom-rail{display:none!important}
/* Full-screen play (mates-core#120, reels/play-focus.js): while a round is live or waiting on Continue the game owns
   the screen. The ☰ menu, tabs, wallet, caption and rails leave; the only thing the feed draws is the Continue
   button after a win or cash-out (lime, the one primary action). */
#feed .chrome{transition:opacity var(--sa-medium) var(--sa-ease),visibility 0s}
#feed.focus .chrome,#feed.focus .tt-caption,#feed.focus .action-rail,#feed.focus .edge-rail,#feed.focus .bottom-rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--sa-medium) var(--sa-ease),visibility 0s linear var(--sa-medium)}
.continue-button{position:absolute;z-index:6;left:50%;bottom:var(--sa-safe-bottom);transform:translateX(-50%);width:var(--sa-primary-width);min-height:56px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 24px;border:0;border-radius:var(--hb-radius-m);background:var(--hb-accent);color:var(--hb-on-accent);font:800 19px/1 var(--hb-font-display);letter-spacing:-.01em;box-shadow:0 8px 24px var(--fd-accent-glow);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:sa-fade var(--sa-medium) var(--sa-ease)}
.continue-button[hidden]{display:none}
.continue-button:active{transform:translateX(-50%) scale(.97)}
.continue-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.continue-button{animation:none}}

/* Social rail (mates-core#121), laid out like Instagram Reels (founder 2026-10-29: "copy Instagram's placement, our
   brains are used to it"): a column on the right edge, bottom-aligned above the bottom area, Like, Comment, Share, Save.
   Bare white outline glyphs (~28 px, Lucide, ISC) with a soft shadow, no glass circles; counts under Like and Comment;
   44 px+ tap targets. The heart fills red and pops on a like; a saved bookmark fills white. Hidden while a round is in
   play (#feed.playing; #feed.focus is mates-core#120's play focus), while a game's own sheet is up, and on the PvP pages,
   whose lobby uses the whole screen. */
.tt-caption{right:calc(var(--sa-safe-right) + 56px)}
.social-rail{position:absolute;z-index:4;right:calc(var(--sa-safe-right) - 12px);bottom:calc(var(--sa-safe-bottom) + var(--sa-primary) + 16px);display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-medium) var(--sa-ease)}
.rail-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:48px;min-height:44px;padding:4px 0;border:0;background:none;color:#fff;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rail-icon{display:grid;place-items:center;width:28px;height:28px;transition:transform var(--sa-fast) var(--sa-spring)}
.rail-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(0,0,0,.18));transition:fill .12s ease,stroke .12s ease}
.rail-button:active .rail-icon{transform:scale(.86)}
.rail-count{font-size:13px;font-weight:600;line-height:16px;letter-spacing:.01em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.55)}
#railLike[aria-pressed=true] svg{fill:#ff3040;stroke:#ff3040}
#railLike.pop .rail-icon{animation:rail-pop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes rail-pop{0%{transform:scale(1)}30%{transform:scale(1.32)}60%{transform:scale(.9)}100%{transform:scale(1)}}
#railSave[aria-pressed=true] svg{fill:#fff}
@media(prefers-reduced-motion:reduce){#railLike.pop .rail-icon{animation:none}}
#feed.playing .social-rail,#feed.game-sheet .social-rail,#feed.pvp-hold .social-rail{opacity:0;transform:translateX(12px);visibility:hidden;pointer-events:none}
#feed.focus .social-rail{display:none}
/* The rail can't clear what the game's layers cover at the bottom (the result card and its squad banner): it fades out
   until they go (social-feed.js railClear, ui.occupied). */
#feed.rail-tucked .social-rail{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s .2s}
.social-rail[hidden]{display:none!important}
/* The rail shows on every card, Solo, PvP and Multiplayer, whenever no round is in play (founder round 4). It never shows
   through a sheet (menu, Settings, Comments): it hides while any dialog is open. */
#feed.dialog-open .social-rail{opacity:0;visibility:hidden;pointer-events:none}
/* The rail sits above the bet controls; the game keeps the full screen (founder's pick, 2026-10-26; the 80/20 rule: the
   rail's 56 px strip leaves the game 85% of a 390 px screen). Games keep their bet bars clear of it through --rail-gutter
   (social-feed.js railGutter), and --rail-lift raises it over a taller panel (ui.occupied). */
#feed.rail-slim .social-rail{bottom:calc(var(--sa-safe-bottom) + 196px + var(--rail-lift,0px))}

/* The menu rows (mates-core#122): one compact list so all six fit on a phone. */
.menu-list{display:flex;flex-direction:column;gap:var(--sa-space-2)}
.menu-list .menu-row{min-height:64px;margin:0}
.menu-list .menu-icon{width:40px;height:40px;border-radius:12px}
.menu-list .menu-icon svg{width:20px;height:20px}
.menu-icon.saved{background:var(--hb-accent);box-shadow:none}
.menu-icon.saved svg{stroke:var(--hb-on-accent)}
/* Game Builder wears Game Studio's face: the dithered party mark on night (the kit: dithered at 48 px and up). */
.menu-list .menu-icon.builder{width:48px;height:48px;overflow:hidden;background:var(--hb-night);border-radius:14px}
.menu-icon.builder img{width:48px;height:48px}
#openBuilder{border-color:var(--hb-line-strong);background:var(--hb-surface-3)}
#openBuilder strong{font-family:var(--hb-font-display);font-size:18px;font-weight:800;letter-spacing:-.02em}
/* Likes, Saved Videos, Comments, Clips and Settings: line icons on a raised brand tile (the base .menu-icon). */
.menu-count{margin-left:auto;min-width:24px;text-align:right;font-size:14px;font-weight:600;color:var(--sa-text-2);font-variant-numeric:tabular-nums}
.menu-count:not(:empty){min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--hb-accent);color:var(--hb-on-accent);font:600 12px/22px var(--hb-font-mono);text-align:center}
.menu-count+.arrow{margin-left:8px}
.sheet-count{font-size:15px;font-weight:600;color:var(--sa-text-2);font-family:var(--sa-font)}
.list-sheet .sheet-head h2,.settings-sheet .sheet-head h2{flex:1;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Settings: sound, this game's own menu, rules, account and Log out. */
.settings-label{margin:var(--sa-space-4) 8px var(--sa-space-2);font:500 11px/1.2 var(--hb-font-mono);letter-spacing:var(--hb-tracking-label);text-transform:uppercase;color:var(--hb-text-3)}
.settings-sheet .sheet-head+.settings-label{margin-top:0}
.settings-group{display:flex;flex-direction:column;border:1px solid var(--hb-line);border-radius:18px;background:var(--hb-surface-2);overflow:hidden}
.settings-row{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:8px 16px;border:0;border-radius:0;background:none;color:var(--sa-text);text-align:left}
.settings-row+.settings-row{border-top:1px solid var(--hb-line)}
.settings-row:not(.static):active{background:var(--fd-accent-tint)}
.settings-row>svg{flex:none;width:20px;height:20px}
.settings-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.settings-text strong{font-size:16px;font-weight:600}
.settings-text small{font-size:13px;color:var(--sa-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-row .arrow{font-size:24px;line-height:1;color:var(--sa-text-2)}
.settings-action{font-size:14px;font-weight:700;color:var(--sa-mint)}
.switch{position:relative;flex:none;width:51px;height:31px;border-radius:999px;background:rgba(255,255,255,.18);transition:background var(--sa-fast) var(--sa-ease)}
.switch:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform var(--sa-fast) var(--sa-spring)}
.toggle[aria-pressed=true] .switch{background:var(--hb-accent)}
.toggle[aria-pressed=true] .switch:after{transform:translateX(20px)}
.settings-row .rec-dot{fill:#ff4d55;stroke:none}
.settings-sheet .menu-logout{margin-top:var(--sa-space-4)}

/* Saved Games, Likes, Comments, Saved Videos */
.list-body{display:flex;flex-direction:column;gap:10px}
.list-row{display:flex;align-items:center;gap:14px;width:100%;padding:12px;border:1px solid var(--hb-line);border-radius:18px;background:var(--hb-surface-2);color:var(--sa-text);text-align:left}
.list-row:active{background:var(--fd-accent-tint)}
.list-poster{flex:none;width:52px;height:68px;border-radius:12px;background:var(--hb-surface-3) center/cover no-repeat;border:1px solid rgba(255,255,255,.12)}
.list-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.list-text small{font:500 11px/1.2 var(--hb-font-mono);letter-spacing:var(--hb-tracking-label);text-transform:uppercase;color:var(--hb-accent)}
.list-text strong{font-size:16px;font-weight:700}
.list-detail{font-size:13px;color:var(--sa-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-play{flex:none;padding:10px 16px;border-radius:999px;background:var(--hb-accent);color:var(--hb-on-accent);font-size:14px;font-weight:700}
.list-empty{margin:var(--sa-space-3) 4px;font-size:15px;line-height:1.5;color:var(--sa-text-2)}

/* Comments: everyone's, newest first, with the composer pinned to the bottom of the sheet. */
.comments-sheet[open]{display:flex;flex-direction:column;height:min(72dvh,600px)}
.comments-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:4px 4px 12px;-webkit-user-select:text;user-select:text}
.comment{display:flex;gap:12px;align-items:flex-start}
.comment-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--fd-accent-tint);color:var(--hb-accent);font-size:14px;font-weight:700}
.comment-avatar{background:hsl(var(--avatar-hue,84) 70% 80% / .2);color:hsl(var(--avatar-hue,84) 80% 76%)}
.comment-like{display:flex;flex:none;flex-direction:column;align-items:center;gap:2px;min-width:32px;padding:2px 0 0;border:0;background:none;color:var(--sa-text-2);font:inherit;font-size:11px;font-weight:600}
.comment-like svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.comment-like[aria-pressed="true"]{color:#ff4d6d}
.comment-like[aria-pressed="true"] svg{fill:currentColor}
.comment-new{animation:comment-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes comment-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.comment-typing{align-items:center;opacity:.75}
.comment-typing .comment-body{display:flex;align-items:center;gap:8px}
.typing-label{font-size:13px;color:var(--sa-text-2)}
.typing-dots{display:inline-flex;gap:4px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--sa-text-2);animation:typing-dot 1.1s infinite ease-in-out}
.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.comment-new{animation:none}.typing-dots i{animation:none}}
.comment-body{flex:1;min-width:0}
.comment-head{display:flex;gap:8px;align-items:baseline;margin:0 0 2px}
.comment-head strong{font-size:14px}
.comment-head span{font-size:12px;color:var(--sa-text-2)}
.comment-edit,.comment-delete{margin-left:auto;padding:0 2px;border:0;background:none;color:var(--sa-text-2);font:inherit;font-size:12px;font-weight:600}
.comment-edit+.comment-delete{margin-left:10px}
.comment-delete:disabled{opacity:.4}
.comment-edit-form{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.comment-edit-form input{width:100%;height:40px;padding:0 14px;border:1px solid var(--hb-line);border-radius:999px;background:var(--hb-night);color:var(--sa-text);font:inherit;font-size:16px;-webkit-user-select:text;user-select:text}
.comment-edit-form input:focus{outline:none;border-color:var(--hb-accent)}
.comment-edit-actions{display:flex;justify-content:flex-end;gap:8px}
.comment-edit-actions button{height:32px;padding:0 14px;border:1px solid var(--hb-line);border-radius:999px;background:var(--hb-surface-3);color:var(--sa-text);font:inherit;font-size:13px;font-weight:600}
.comment-edit-actions .comment-save{border-color:transparent;background:var(--hb-accent);color:var(--hb-on-accent)}
.comment-edit-actions .comment-save:disabled{opacity:.4}
.comment-text{margin:0;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.comments-more{align-self:center;margin-bottom:8px;padding:8px 14px;border:1px solid var(--hb-line);border-radius:999px;background:none;color:var(--sa-text-2);font-size:13px}
.comment-form{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--hb-line)}
.comment-form input{flex:1;min-width:0;height:48px;padding:0 72px 0 16px;border:1px solid var(--hb-line);border-radius:999px;background:var(--hb-night);color:var(--sa-text);font:inherit;font-size:16px;-webkit-user-select:text;user-select:text}
.comment-form input:focus{outline:none;border-color:color-mix(in srgb,var(--hb-accent) 50%,transparent)}
.comment-count{flex:none;width:64px;margin-left:-84px;text-align:right;font-size:12px;font-weight:600;color:var(--sa-text-2);pointer-events:none}
.comment-form button{display:grid;place-items:center;flex:none;width:48px;height:48px;margin-left:10px;border:0;border-radius:50%;background:var(--hb-accent);color:var(--hb-on-accent)}
.comment-form button svg{width:20px;height:20px;stroke-width:2.4}

/* ☰ menu over a game (QA mates-core#154): WebKit doesn't blur a game iframe behind a dialog, so the translucent sheet
   let the game's bet panel text ("Bet amount", "$2 $5 $10", RECONNECT) read through the menu rows. The menu sheet is
   near-solid glass, and the game behind it is dimmed. */
dialog.sheet.menu-sheet{background:var(--hb-surface-1)}
dialog.sheet.menu-sheet::backdrop{background:color-mix(in srgb,var(--hb-night) 70%,transparent)}
/* Payout pops under the wallet (arcade:payout-pop, Michael 2026-10-26): "+$X.XX" on a dark chip rises a little and fades
   over 1 s, each in its own slot (up to 4). Transform and opacity only, absolutely placed, so nothing reflows. */
.wallet-pill{position:relative}
.wallet-pops{position:absolute;top:calc(100% + 5px);right:2px;width:0;height:0;pointer-events:none;contain:layout style}
.wallet-pop{position:absolute;top:0;right:0;transition:opacity 150ms linear}
.wallet-pop>span{display:block;padding:2px 8px;border-radius:var(--sa-radius-pill);background:color-mix(in srgb,var(--hb-night) 70%,transparent);white-space:nowrap;color:var(--sa-text);font-size:15px;line-height:20px;font-weight:var(--sa-weight-strong);letter-spacing:-.01em;font-variant-numeric:tabular-nums;animation:wallet-pop 1s var(--sa-ease-out) both;will-change:transform,opacity}
.wallet-pop.win>span{color:var(--hb-win)}
.wallet-pop.out{opacity:0}
@keyframes wallet-pop{0%{opacity:0;transform:translate3d(0,8px,0) scale(.8)}14%{opacity:1;transform:translate3d(0,0,0) scale(1.08)}26%{transform:translate3d(0,0,0) scale(1)}72%{opacity:1}100%{opacity:0;transform:translate3d(0,-5px,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.wallet-pop>span{animation-name:wallet-pop-fade}@keyframes wallet-pop-fade{0%,72%{opacity:1}100%{opacity:0}}}

/* Branded loading preview (Param P5) and backdrop (P8), brand direction A (blue). Tokens and the dither helper come from
   mates-sdk's hobbi-brand layer (reels/hobbi-brand/, pinned in games.lock). Glass stays on the nav bar;
   these surfaces are flat brand colour.
   A page that hasn't drawn yet shows its poster full-bleed until the game says it is ready; then it cross-fades into
   the game. No loading screen (founder 2026-10-29): no Hobbi mark, card, bar or spinner on it, however slow. The dither fields are
   one static image each (HobbiBrand.ditherField, drawn once at start-up and on resize, set on <html> so login and the
   tour use them too), never per frame. */
#feed{--pv-blue:var(--hb-accent);--pv-blue-shade:var(--hb-accent-shade);--pv-night:var(--hb-night);--pv-night-gloss:var(--hb-night-gloss);--pv-surface-1:var(--hb-surface-1);--pv-surface-3:var(--hb-surface-3);--pv-line-strong:var(--hb-line-strong);--pv-text:var(--hb-text);--pv-display:var(--hb-font-display);--pv-mono:var(--hb-font-mono)}
.feed-poster{background-color:var(--pv-night)}
/* The poster shows full-bleed as it is (no loading screen, founder 2026-10-29); only a light shade at the top and bottom
   keeps the top bar and the caption readable over it. */
.feed-poster:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,18,.42) 0%,rgba(10,12,18,0) 22%,rgba(10,12,18,0) 64%,rgba(10,12,18,.55) 100%)}
.feed-poster .pv-field{display:none}
.pv-field{position:absolute;inset:0;background:var(--pv-rise,linear-gradient(0deg,color-mix(in srgb,var(--hb-accent-shade) 60%,transparent),transparent 45%)) center bottom/100% 100% no-repeat;image-rendering:pixelated}
.pv-mark{position:absolute;left:50%;top:40%;width:152px;height:152px;margin:-76px 0 0 -76px;image-rendering:pixelated}
.feed-poster.cover:not([hidden]) .pv-mark{animation:pv-bob 2.4s cubic-bezier(.2,.8,.2,1) infinite alternate}
@keyframes pv-bob{to{transform:translateY(-8px)}}
.pv-card{position:absolute;left:16px;right:16px;bottom:calc(var(--sa-safe-bottom,0px) + 32px);padding:18px 20px 20px;border-radius:24px;background:color-mix(in srgb,var(--pv-surface-1) 94%,transparent);box-shadow:inset 0 0 0 1px var(--pv-line-strong),0 20px 50px rgba(0,0,0,.5);color:var(--pv-text)}
.pv-label{display:block;font:500 11px/1.2 var(--pv-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pv-blue)}
.pv-title{display:block;margin:8px 0 14px;font:800 30px/1 var(--pv-display);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-bar{position:relative;display:block;height:6px;border-radius:3px;background:var(--pv-surface-3);overflow:hidden}
.pv-bar>i{position:absolute;inset:0;background:var(--pv-blue);transform-origin:left center;transform:scaleX(.12)}
/* The live cover's bar is #loadBar (Unity progress drives it; other games step it at load and ready). */
.pv-bar>.load-bar,.pv-bar>.load-bar[hidden]{display:block!important;z-index:auto;height:auto;box-shadow:none;transition:transform .3s ease-out}
.feed-poster.cover{transition:opacity .2s ease-out}.feed-poster.cover.lifting{opacity:0}
/* While the preview is up its card is the loading line: no spinner pill, no caption (the 10 s "Still opening" pill stays). */
#feed.previewing .tt-caption{visibility:hidden}
.feed-poster .pv-mark,.feed-poster .pv-card{display:none}
#feed.previewing #loading:has(+#recovery[hidden]){display:none}
/* Backdrop (P8): behind the live frame, one page above and below it too (a peeking neighbour), so a game that doesn't fill
   the screen sits on the dithered brand field instead of black bars. Only pages the feed found letterboxed are made
   see-through (social-feed.js fitBackdrop); every other game covers it completely. */
.game-backdrop{position:absolute;left:0;right:0;top:-100%;height:300%;background-color:var(--pv-night);background-image:var(--pv-edges,none),radial-gradient(120% 20% at 50% 33.4%,color-mix(in srgb,var(--hb-accent-shade) 55%,transparent),transparent 70%),radial-gradient(120% 20% at 50% 66.6%,color-mix(in srgb,var(--hb-accent-shade) 55%,transparent),transparent 70%);background-size:100% 33.3334%,100% 100%,100% 100%;background-repeat:repeat-y,no-repeat,no-repeat;image-rendering:pixelated;pointer-events:none}
@media(prefers-reduced-motion:reduce){.feed-poster.cover .pv-mark{animation:none!important}.feed-poster.cover{transition:none}}

/* Direction D (founder's pick, 2026-10-27; orchestrator/brand/hobbi-design-package-2026-10-27/hobbi-directions): paper
   keycaps on night. One set of tokens and three shared parts, so a change lands on every sheet at once:
   - paper: the sheet / card surface (--d-paper) with a dark lip under it;
   - keycap: a raised face (--d-face) with a 4-6 px lip (rows, close/back, toggles, secondary buttons);
   - primary keycap: the accent face, night ink, Baloo 2, an accent-shade lip and a gloss line on top.
   Glass stays on the nav bar only. Blue overall; green only for wins. */
:root{--d-paper:#151924;--d-lip:#04050a;--d-face:#222839;--d-face-lip:#07080d;--d-well:#0f121b;--d-well-lip:#05060a;--d-soft:#a3abbd;--d-ink:#eef1f7;--d-muted:#8189a0;--d-key-ink:#06121c}

/* Top bar: the flat blue star beside the balance; an empty wallet turns into a blue Refill keycap. Tabs read Solo / PvP / Multi. */
.wallet-pill .wallet:not(.empty){display:inline-flex;align-items:center;gap:6px;padding:0 13px 0 9px;color:#fff}
.wallet-pill .wallet:not(.empty):before{content:"";flex:none;width:22px;height:22px;background:url(/reels/hobbi-brand/assets/hobbi-flat-blue.svg) center/contain no-repeat}
.wallet-pill:has(.wallet.empty){border-color:rgba(255,255,255,.4);box-shadow:0 0 0 3px color-mix(in srgb,var(--hb-accent) 35%,transparent),0 0 22px color-mix(in srgb,var(--hb-accent) 60%,transparent)}
.wallet-pill .wallet.empty{background:linear-gradient(180deg,var(--hb-accent),var(--hb-accent-shade));color:var(--d-key-ink);font:800 17px/1 var(--hb-font-display);padding:3px 14px 0}
@media(max-width:430px){.tab-long{display:none}}

/* Paper sheets: flat paper, a lit top edge, no glass and no dither band. */
.sheet{background:var(--d-paper);border-top:1px solid rgba(255,255,255,.1);border-radius:34px 34px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 -20px 40px rgba(0,0,0,.4);color:var(--d-ink)}
dialog.sheet.menu-sheet{background:var(--d-paper)}
.sheet:before{width:44px;height:5px;margin-bottom:10px;border-radius:9px;background:#2a3042}
.sheet:after{content:none}
.sheet h2{font-size:30px;line-height:1;padding-top:4px;letter-spacing:-.01em}
.sheet .sheet-count{font:600 16px var(--hb-font-ui);color:var(--d-soft)}
.sheet-note{color:var(--d-soft);font-size:13px}

/* Keycaps: one face, one lip. */
.close,.sheet .glass-button.back,.menu-list .menu-row,.settings-row,.list-row,.menu-logout,.account-id,.tour-step,.tour-mute,.reel-rec-key,.d-key{border:1px solid rgba(255,255,255,.05);background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);color:var(--d-ink)}
.close,.sheet .glass-button.back{width:42px;height:42px;font:700 20px/1 var(--hb-font-ui);color:#d0d6e3}
.close:active,.sheet .glass-button.back:active,.menu-list .menu-row:active,.settings-row:not(.static):active,.list-row:active,.menu-logout:active,.d-key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);background:var(--d-face)}
/* Primary keycap: the accent face. */
.list-play,.comment-form button,.d-primary,.recovery #retryGame,.d-playalong .d-join,.account-refill{border:0;background:var(--hb-accent);color:var(--d-key-ink);font-family:var(--hb-font-display);font-weight:800;box-shadow:0 5px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.d-primary:active,.recovery #retryGame:active,.d-playalong .d-join:active,.account-refill:active,.comment-form button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}

/* ☰ menu: keycap rows, one pastel tile per row. */
.menu-list{gap:10px}
.menu-list .menu-row{min-height:64px;padding:10px 14px 10px 10px;border-radius:18px;margin-bottom:4px}
.menu-list .menu-icon{width:42px;height:42px;border-radius:13px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.menu-list .menu-icon svg{width:22px;height:22px;stroke:#fff;stroke-width:2.2}
.menu-list .menu-icon.builder{width:42px;height:42px;border-radius:13px;background:var(--hb-purple)}
.menu-icon.builder img{width:42px;height:42px}
.menu-icon.saved{background:var(--hb-blue)}.menu-icon.saved svg{stroke:#fff}
.menu-icon.likes{background:var(--hb-pink)}.menu-icon.likes svg{fill:#fff;stroke:#fff}
.menu-icon.videos{background:var(--hb-orange)}
.menu-icon.comments{background:var(--hb-green)}
.menu-icon.streams{background:var(--hb-red)}.menu-icon.streams svg circle{fill:#fff}
.menu-icon.settings{background:var(--hb-grey)}
.menu-icon.squads{background:var(--hb-purple)}
#openBuilder{border-color:rgba(255,255,255,.05);background:var(--d-face)}
#openBuilder strong{font:600 16px var(--hb-font-ui);letter-spacing:-.01em}
.menu-text strong{font-weight:700}
.menu-text small{color:var(--d-soft)}
.menu-count:not(:empty){height:24px;min-width:28px;padding:3px 10px 0;border-radius:99px;background:var(--d-well);color:#d0d6e3;font:800 15px/21px var(--hb-font-display)}
.menu-row .arrow,.settings-row .arrow{color:var(--d-muted);font-size:20px}

/* Settings: every row its own keycap; keycap toggles (accent when on); mono group labels; a red Log out keycap. */
.settings-label{margin:10px 4px 6px;font:600 12px/1.2 var(--hb-font-mono);letter-spacing:.14em;color:var(--d-soft)}
.settings-group{gap:8px;border:0;border-radius:0;background:none;overflow:visible}
.settings-row{min-height:56px;padding:10px 14px;border-radius:18px}
.settings-row+.settings-row{border-top:1px solid rgba(255,255,255,.05)}
.settings-row>svg{color:#d0d6e3}
.settings-text small{color:var(--d-soft)}
.settings-action{font:800 16px/1 var(--hb-font-display);color:var(--hb-accent);padding-top:3px}
.switch{width:52px;height:32px;background:#2a3042;box-shadow:inset 0 -3px 0 #151925}
.switch:after{top:3px;left:3px;width:26px;height:26px;background:var(--d-face);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.toggle[aria-pressed=true] .switch{background:var(--hb-accent);box-shadow:inset 0 -3px 0 var(--hb-accent-shade)}
.toggle[aria-pressed=true] .switch:after{transform:translateX(20px)}
.menu-logout{height:54px;margin-top:12px;border-radius:99px;color:var(--hb-red);font:800 19px/1 var(--hb-font-display);padding-top:3px}

/* Balance: YOUR ACCOUNT over Balance, the star beside a big Baloo figure, the ID as a keycap, Refill only when it applies. */
.account-sheet .sheet-head .eyebrow{display:block;margin-bottom:4px;font:600 12px var(--hb-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-soft)}
.account-balance{display:flex;align-items:center;gap:12px;margin:6px 0 2px;font:800 64px/1 var(--hb-font-display);letter-spacing:-.03em;color:var(--d-ink);font-variant-numeric:tabular-nums}
.account-balance:before{content:"";flex:none;width:60px;height:60px;background:url(/reels/hobbi-brand/assets/hobbi-mark-blue-transparent.svg) center/contain no-repeat;image-rendering:pixelated}
.account-sheet>p{margin:6px 4px;color:var(--d-soft);font-size:13px}
.account-id{min-height:48px;padding:12px 14px;border-radius:16px;font:500 13px var(--hb-font-mono);color:var(--d-soft)}
.account-id>span:last-child{font:800 16px/1 var(--hb-font-display);color:var(--hb-accent);padding-top:3px}
.account-refill{display:grid;place-items:center;width:100%;height:60px;margin:14px 0 4px;border-radius:99px;font-size:22px;padding-top:3px}

/* Lists (Saved Games, Likes, Saved Videos, your comments): keycap rows, a square poster, the title, then where it's from. */
.list-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:12px;padding:8px 12px 8px 8px;border-radius:18px}
.list-poster{width:58px;height:58px;border:0;border-radius:14px}
.list-text strong{order:1;font:800 18px/1 var(--hb-font-display);padding-top:3px}
.list-text small{order:2;font:500 12.5px var(--hb-font-ui);letter-spacing:0;text-transform:none;color:var(--d-soft)}
.list-detail{order:3;font-size:12.5px;color:var(--d-soft)}
.list-play{height:40px;padding:3px 14px 0;border-radius:99px;font-size:16px;line-height:37px;box-shadow:0 3px 0 var(--hb-accent-shade)}
.list-sheet .sheet-note,.list-empty{text-align:center}

/* Comments: a flat star per commenter (their own colour), likes on the right, a sunken input with the accent send key. */
.comment-avatar{position:relative;font-size:0;background:var(--d-well)}
.comment-avatar:before{content:"";position:absolute;inset:6px;background:hsl(var(--avatar-hue,200) 85% 70%);-webkit-mask:url(/reels/hobbi-brand/assets/hobbi-flat-blue.svg) center/contain no-repeat;mask:url(/reels/hobbi-brand/assets/hobbi-flat-blue.svg) center/contain no-repeat}
.comment-head strong{font-size:14px;font-weight:700}
.comment-head span{color:var(--d-soft)}
.comment-text{color:#d5dbe7}
.comment-like{color:var(--d-soft)}
.comment-form{border-top:0;padding-top:8px}
.comment-form input{height:54px;border:0;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);padding-right:120px}
.comment-count{margin-left:-136px;width:72px;font:500 12px var(--hb-font-mono);color:var(--d-muted)}
.comment-form button{width:42px;height:42px;margin-left:16px;border-radius:50%}
.comment-form button:disabled{opacity:.55}

/* Loading (C6, C12): the stale poster never shows raw. It is re-drawn as an ordered dither in the blue ramp (social-feed.js
   ditherPoster), the mascot bobs over it, and a paper keycap card says what is loading. */
.pv-card{left:16px;right:16px;padding:18px 20px 20px;border:1px solid rgba(255,255,255,.06);border-radius:28px;background:var(--d-paper);box-shadow:0 7px 0 var(--d-lip),0 20px 34px rgba(0,0,0,.45)}
.pv-label{font:600 12px/1.2 var(--hb-font-mono);letter-spacing:.14em;color:var(--d-soft)}
.pv-title{margin:8px 0 12px;font-size:34px;padding-top:3px;letter-spacing:-.01em}
.pv-bar{height:14px;border-radius:99px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip)}
.pv-bar>i{border-radius:99px;background:var(--hb-accent) repeating-linear-gradient(-45deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}

/* Load failure (D · states): a paper card with the mascot, what happened, that the balance is safe, Next game / Try again. */
.recovery{top:0;bottom:0;left:0;right:0;z-index:6;display:grid;place-items:center;padding:0 22px;background:rgba(10,12,18,.55)}
.d-errcard{position:relative;display:grid;justify-items:center;gap:12px;width:100%;max-width:360px;margin-top:40px;padding:22px;border:1px solid rgba(255,255,255,.08);border-radius:28px;background:var(--d-paper);text-align:center;box-shadow:0 7px 0 var(--d-lip),0 20px 34px rgba(0,0,0,.5)}
.d-errcard img{position:absolute;top:-78px;left:50%;width:90px;height:90px;margin-left:-45px;image-rendering:pixelated}
.d-errcard h3{margin:0;font:800 28px/1 var(--hb-font-display);padding-top:4px;color:var(--d-ink)}
.d-errcard p{margin:0;font:500 15px/1.45 var(--hb-font-ui);color:var(--d-soft)}
.d-safe{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--hb-win) 12%,transparent);color:var(--hb-win);font:600 13px var(--hb-font-ui)}
.d-safe[hidden]{display:none}
.d-errbuttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:4px}
.recovery .d-errbuttons button{height:56px;min-height:56px;padding:3px 0 0;border-radius:99px;font:800 20px/1 var(--hb-font-display)}
.recovery #skipGame{border:1px solid rgba(255,255,255,.05);background:var(--d-face);box-shadow:0 5px 0 var(--d-face-lip);color:var(--d-ink)}
#feed:has(#recovery:not([hidden])) #loading{display:none}

/* Clips: the letterbox bars are the brand's dither field instead of a blurred copy of the clip (C10); Record is a labelled
   glass pill; Play along takes you from watching the clip to playing that game. */
.reel-slide::before{background:var(--pv-edges,var(--hb-night)) center/100% 100% no-repeat;image-rendering:pixelated;filter:none}
.reel-slide{background-color:var(--hb-night)}
.reel-rec{width:auto;gap:8px;padding:0 16px 0 12px;font:600 14px var(--hb-font-ui);color:#fff}
.reel-rec:after{content:"Record"}
.reel-rec[aria-pressed=true]:after{content:"Stop"}
.reel-meta strong{font:800 26px/1 var(--hb-font-display);padding-top:3px}
.reel-meta{bottom:calc(env(safe-area-inset-bottom) + 112px)}
.d-playalong{position:absolute;z-index:3;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 22px);display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:26px;background:var(--d-paper);color:var(--d-ink);box-shadow:0 6px 0 var(--d-lip)}
.d-playalong[hidden]{display:none}
.d-playalong i{width:52px;height:52px;border-radius:15px;background:var(--d-face) center/cover no-repeat}
.d-playalong b{display:block;font:800 19px/1 var(--hb-font-display);padding-top:3px}
.d-playalong small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px var(--hb-font-ui);color:var(--d-soft)}
.d-playalong .d-join{height:50px;padding:3px 20px 0;border-radius:99px;font-size:19px}
/* Dither lip (D · dither details, "Buttons"): primary keycaps get a dot-matrix shade on their lower edge (a static mask). */
.account-refill,.d-playalong .d-join,.recovery .d-errbuttons button,.login-submit,.tour-next.primary{position:relative;overflow:hidden}
.account-refill:after,.d-playalong .d-join:after,.recovery .d-errbuttons button:after,.login-submit:after,.tour-next.primary:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background-image:radial-gradient(rgba(6,18,28,.5) 1.3px,transparent 1.6px);background-size:4px 4px;-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000);pointer-events:none}
.recovery #skipGame:after{background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.5px)}
#feed:has(#recovery:not([hidden])) .feed-poster.cover .pv-card,#feed:has(#recovery:not([hidden])) .social-rail{visibility:hidden}

/* Balance stat card (D31, reels/balance-chart.js): Today, the balance, the change since the first move of the day in green
   when up, and a dithered blue sparkline along the card's foot. Tap switches today / last 7 days. */
.d-stat{position:relative;display:grid;justify-items:start;gap:4px;width:100%;margin:6px 0 14px;padding:16px 16px 0;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);color:var(--d-ink);text-align:left;overflow:hidden;font:inherit;cursor:pointer}
.d-stat:active{transform:none}
.d-stat-label{font:600 14px var(--hb-font-ui);color:var(--d-soft)}
.d-stat .account-balance{margin:2px 0 0;font-size:46px}
.d-stat .account-balance:before{content:none}
.d-delta{min-height:17px;font:600 13px/1.3 var(--hb-font-mono);color:var(--d-soft)}
.d-delta[data-dir=up]{color:var(--hb-win)}
.d-spark{display:block;width:calc(100% + 32px);height:76px;margin:8px -16px 0;image-rendering:pixelated}
.d-stat.no-history .d-spark{opacity:.35}
/* Sideways (founder 2026-10-27): the feed is portrait-only. A phone turned on its side gets this branded cover over
   everything, and social-feed.js pauses the game's input (paused() → syncLifecycle) until it turns back. The query matches
   phones only (short landscape, touch), so a desktop browser window never sees it. Same query as SIDEWAYS in the JS. */
.turn-back{display:none}
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){.turn-back{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(60% 70% at 50% 45%,color-mix(in srgb,var(--hb-accent-shade,#296b95) 40%,transparent),transparent 70%),var(--hb-night,#0a0c12);pointer-events:auto;touch-action:none}}
.turn-back-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.turn-back .hb-mark{width:84px;height:84px}
.turn-back-phone{width:40px;height:40px;fill:none;stroke:var(--hb-accent,#3faff3);stroke-width:1.8;stroke-linecap:round;animation:turn-back 1.8s var(--sa-ease-out,cubic-bezier(.22,1,.36,1)) infinite}
.turn-back-title{font:800 28px/1.1 var(--hb-font-display);color:#fff}
@keyframes turn-back{0%,25%{transform:rotate(-90deg)}65%,100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.turn-back-phone{animation:none}}
/* Saved Videos: Share to Instagram row (hobbi-clip.js) */
.list-ig .list-ig-icon{display:grid;place-items:center;background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);color:#fff}
.list-ig .list-ig-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.list-ig .list-ig-icon svg circle:last-child{fill:currentColor;stroke:none}
/* Live update (reels/app-update.js): a 1 s "Updating…" pill with the blue mark before the feed reloads on a new build. */
.app-updating{position:fixed;z-index:60;top:50%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:var(--sa-radius-pill);font-size:14px;font-weight:var(--sa-weight-medium);white-space:nowrap;color:var(--hb-ink,#fff);pointer-events:none}
.app-updating:before{content:"";flex:none;width:22px;height:22px;background:url(/reels/hobbi-brand/assets/hobbi-mark-blue-transparent.svg) center/contain no-repeat}
.app-updating.glass{background:var(--hb-surface-2);border:1px solid var(--hb-line-strong);box-shadow:0 8px 24px rgba(0,0,0,.35)}