/* 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 on the
   nav bar (☰, the ? key, the tabs, the balance; founder 2026-10-30, "where's my liquid glass": back to the QA fd97173
   look after #843's solid keycaps); 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 is 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{overflow:hidden}
.continue-button:before,.login-submit: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;will-change:transform} /* its own layer, kept between drags (app/smooth-sharp) */
.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}
/* 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))}
/* Warm neighbours and the card just left (app/feed-smooth, #505): loaded, drawn and paused, and on screen as far as WebKit
   knows: visible, in the viewport at slot 0, stacked under the opaque #gameBackdrop
   (z-index -1 in the track's stacking context), so nobody sees them. visibility:hidden left a warm game unpainted and
   uncomposited until it showed, and a peek at top:+-100% (a layout move outside the clip) throttled its animation frames
   and timers: its first paint, composite and every held callback landed at the settle, the hitch on the iPhone.
   Peeking and landing move them by transform only (no layout). .behind is the frame just left during the landing, until
   it is kept as the warm card behind.
   iPhone memory (#1079 review, measured with the governor's census): a frame gets its own layer (will-change) only while
   it peeks or lands, and only the warm card ahead waits painted; any other warm frame there (.far: the card kept behind,
   with FEED_FLAGS.keepBehind on) waits hidden, so the page holds the live game's layers and one warm card's at most. */
.game-frame.warm,.game-frame.behind{z-index:-1;pointer-events:none}
.game-frame.warm.far:not(.peek-next):not(.peek-prev):not(.arriving){visibility:hidden}
.game-frame.warm.peek-next,.game-frame.warm.peek-prev,.game-frame.warm.arriving{will-change:transform}
/* During a drag a warm neighbour shows in its slot; on landing it is already in place (arriving). */
.game-frame.warm.peek-next{z-index:auto;transform:translate3d(0,100%,0)}.game-frame.warm.peek-prev{z-index:auto;transform:translate3d(0,-100%,0)}.game-frame.warm.arriving{z-index:auto;transform:none}
.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}
/* A soft night scrim behind the glass bar (founder QA 0541b43: Tall Order's own HUD read through the translucent pills, a
   stray "9" behind 1 vs 1 / Multi and a "0" behind the ?). Near-opaque behind the pills, it fades out just below them, so
   the glass keeps its blur and rim but nothing of the game reads through. */
.chrome:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(100% + 30px);pointer-events:none;background:linear-gradient(180deg,rgba(6,9,14,.98) 0,rgba(6,9,14,.96) calc(100% - 30px),rgba(6,9,14,0) 100%)}
.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}
/* The game's name over the idle game (founder QA 0541b43, 2026-10-30: since the previews and the dropped kicker no name showed).
   Just the name, bottom left, TikTok-style: just above the game's bet panel or lobby (--stage-bottom, measured by
   feed-preview.js; 20% of the card without one) and clear of the right rail. It goes when a round, a lobby hold, a sheet
   or a dialog takes the card. */
.feed-name{position:absolute;z-index:3;left:var(--sa-safe-left);right:calc(var(--sa-safe-right) + 64px);bottom:calc(var(--stage-bottom,20%) + 14px);margin:0;pointer-events:none;color:#fff;font-family:var(--hb-font-display);font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 14px rgba(0,0,0,.6);transition:opacity var(--sa-medium) var(--sa-ease),visibility 0s}
/* Until the card's bet panel is measured (a PvP stake panel mounts after its page loads), the name waits, so it is never
   drawn over the panel's labels ("Stake each", Ridge Rider, iOS QA 2026-10-31). */
#feed.stage-pending .feed-name{visibility:hidden}
#feed.focus .feed-name,#feed.playing .feed-name,#feed.pvp-hold .feed-name,#feed.game-sheet .feed-name,#feed.dialog-open .feed-name{opacity:0;visibility:hidden;transition:opacity var(--sa-medium) var(--sa-ease),visibility 0s linear var(--sa-medium)}

/* 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)}
#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)}
.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 with a keycap in the bar (☰ · Clips · tabs · wallet since Harsh 2026-11-01 swapped the ? and Clips: the ?
   is in the rail now; the app's / route may still serve a three-item bar). */
.chrome:has(.bar-key){grid-template-columns:auto auto minmax(0,1fr) auto}
/* The bar's keycap (.bar-key): Clips since 2026-11-01 (Harsh: swap the ? and the Livestream button); the ?
   held it from 2026-10-30 (Sai: the ? keycap took the Clips pill's slot). A solid blue primary keycap, not another grey
   pill (Oct 27 spec 1.8 / 2.3): a 44 px face and a 4 px lip, like the bar's solid pills; it sinks 4 px in 70 ms and springs back.
   Clips opens the clips sheet (openStreams) and wears a still red live dot. */
.bar-key{position:relative;pointer-events:auto;align-self:center;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:2px 0 0;border:1px solid var(--sa-glass-line);border-radius:50%;background:var(--sa-glass);-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(--hb-accent,#3faff3);text-shadow:0 1px 2px rgba(0,0,0,.4);font:800 24px/1 var(--hb-font-display,"Baloo 2"),system-ui,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--sa-fast) var(--sa-spring),background var(--sa-fast) var(--sa-ease)}
.bar-key:active{transform:scale(.94);background:var(--sa-glass-press)}
.bar-key:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bar-key svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.clips-key .live-dot{position:absolute;top:6px;right:6px}
@media(prefers-reduced-motion:reduce){.bar-key{transition:none}}
/* The bar's key hides during a round, a PvP match hold or a game's own sheet, as the ? there did. */
.bar-key{transition:transform var(--sa-fast) var(--sa-spring),background var(--sa-fast) var(--sa-ease),opacity var(--sa-medium) var(--sa-ease)}
#feed.playing .bar-key,#feed.pvp-hold .bar-key,#feed.game-sheet .bar-key{opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.bar-key{transition:none}}
/* The Clips button's live dot (the LIVE pill moved from the top bar into the rail, Sai 2026-10-30, and back to the bar's
   keycap slot, Harsh 2026-11-01): always on and still (it pulsed while the app recorded; the record button went, Rushil
   2026-11-01). */
.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)}
/* Top bar at phone widths: ☰, ?, Solo/PvP/Multiplayer and the balance 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}}
@media(max-width:370px){.tab-long{display:none}}
@media(max-width:380px){.sections button{padding:0 5px;font-size:12px}.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-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)}}
/* 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, and ✕ (no record button since 2026-11-01, Rushil). */
.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-badge.hobbi{background:var(--hb-accent,#3faff3);color:var(--hb-on-accent,#0a0c12)}
.reel-close{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-close: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}.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: the daily gift
   (feed-retention.js), Like, Comment, Share, Save and Clips (the LIVE pill's reel, Sai 2026-10-30).
   Bare white Lucide glyphs (ISC), 28 px with a soft shadow and no circle behind them, as on QA fd97173 (the founder's
   rail rule, AGENTS.md "Feed UI", 2026-10-29; #843's solid keycap circles were taken back on 2026-10-30). Every button
   is the same box: a 42 px slot, then (Like, Comment, the gift) a 13 px label; 4 px apart, so six fit. A like fills the
   heart red and pops; a save fills the bookmark white. The Day-1 gift steps out while the rail is lifted over a PvP or room
   lobby (railClear: #feed.rail-lobby), where it reached Fleet Strike's "THEIR TURN" banner; Solo cards keep it.
   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:4px;transition:opacity var(--sa-medium) var(--sa-ease),transform var(--sa-medium) var(--sa-ease)}
.rail-button,#socialRail .rt-pill{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;min-width:48px;min-height:46px;padding:0;border:0;background:none;color:#fff;font:600 13px/16px var(--hb-font-ui);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rail-button:before{content:"";position:absolute;inset:-2px 0}
.rail-icon,#socialRail .rt-pill .rail-icon{position:relative;box-sizing:border-box;flex:none;display:grid;place-items:center;width:42px;height:42px;margin:0 0 4px;border:0;border-radius:50%;background:none;color:#fff;transition:transform var(--sa-fast) var(--sa-spring)}
.rail-icon svg,#socialRail .rt-pill .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}
#socialRail .rt-pill .rail-icon svg{stroke:var(--hb-accent,#3faff3)}
.rail-button:active .rail-icon,#socialRail .rt-pill: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}
#feed.rail-lobby #socialRail .rt-pill{display:none}
@media(prefers-reduced-motion:reduce){#railLike.pop .rail-icon{animation:none}.rail-icon{transition:none}}
/* The nav bar's pills (☰, the tabs, the balance) are the shared .glass recipe, and the selected tab its glass lens
   (founder 2026-10-30: #843's solid keycap override is gone, so they read as they did on QA fd97173). */
#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-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}
/* Moderation: Report on other players' comments (a second tap confirms); your own comment waiting for review is marked. */
.comment-report{margin-left:auto;padding:0 2px;border:0;background:none;color:var(--sa-text-2);font:inherit;font-size:12px;font-weight:600;opacity:.7}
.comment-report[data-confirm]{color:#ff9f8f;opacity:1}
.comment-report:disabled{opacity:.4}
.comment-held{font-size:11px;font-weight:600;color:#ffd9a0;letter-spacing:.02em}
.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 .14s 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 brand night instead of black bars. Plain night, no dither and no blue glow (founder 2026-10-30:
   the band showed between games mid-swipe; the feed pages game to game like Reels). 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:var(--pv-night);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,.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.settings{background:var(--hb-grey)}
/* Record leads the menu, the Leaderboard follows it (Harsh, 2026-10-31). */
.menu-icon.results{background:var(--hb-blue)}.menu-icon.results svg{stroke:#fff}
.menu-icon.leaderboard{background:var(--hb-orange)}.menu-icon.leaderboard svg{stroke:#fff}
#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); 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-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{position:relative;overflow:hidden}
.account-refill:after,.d-playalong .d-join:after,.recovery .d-errbuttons button:after,.login-submit: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)}
/* Desktop and tablets (2026-10-31, Harsh's 1800 px desktop screenshot of Tall Order): the feed is built for a phone, and
   a wide window stretched it into one giant game. Wider than a phone, the page is a phone-width column, centred and full
   height, on a quiet brand backdrop. <body> is the column, and contain: layout makes it the containing block for every
   fixed element inside it (top bar, rails, the game frame and its bet panel, the tour, toasts, the login screen), so
   all of them, and the game's own viewport, are the column. Modal dialogs live in the top layer, which ignores that, so
   they are held to the column here too. JS that needs the feed's width reads the column (social-feed.js columnBox,
   onboarding/coach.js), never the window. Phones (portrait, at most 500 px wide) and a phone turned sideways (the
   turn-back card) match neither query and are untouched. Media queries can't read custom properties: the breakpoints
   are the two numbers in the @media line. */
:root{--feed-column-width:460px;--feed-column-edge:color-mix(in srgb,var(--hb-accent,#3faff3) 16%,transparent);
 --feed-column-shadow:0 0 0 1px var(--feed-column-edge),0 30px 90px rgba(0,0,0,.6);
 --feed-column-backdrop:radial-gradient(70% 60% at 50% 110%,color-mix(in srgb,var(--hb-accent-shade,#296b95) 32%,transparent),transparent 70%),radial-gradient(60% 50% at 50% -10%,color-mix(in srgb,var(--hb-accent-shade,#296b95) 22%,transparent),transparent 70%),var(--hb-night-shade,#06070a)}
@media (min-width:501px) and (min-height:541px),(min-width:501px) and (pointer:fine){
 :root{background:var(--feed-column-backdrop)}
 body{position:relative;width:min(100%,var(--feed-column-width));margin-inline:auto;contain:layout;box-shadow:var(--feed-column-shadow)}
 :root:root dialog:modal{max-width:min(100%,var(--feed-column-width));margin-inline:auto;inset-inline:0}
}
/* The how-to clip's ▶ when it didn't start by itself (reels/feed-howto-play.js): a big keycap over the clip; a tap plays it. */
.hw-player{position:relative}
.hw-tap-play{position:absolute;left:50%;top:42%;z-index:2;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;padding:0;border:3px solid var(--hw-edge,#0a0c12);border-radius:50%;background:var(--hw-accent,#3faff3);color:var(--hw-ink,#0a0c12);box-shadow:inset 0 -5px 0 var(--hw-accent-lip,#1f86c6),0 6px 0 var(--hw-deep,#05060a),0 14px 28px rgba(0,0,0,.45);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hw-tap-play svg{width:36px;height:36px;margin-left:5px;fill:currentColor;stroke:none}
.hw-tap-play:active{transform:translateY(4px);box-shadow:inset 0 -2px 0 var(--hw-accent-lip,#1f86c6),0 2px 0 var(--hw-deep,#05060a)}
.hw-tap-play:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Copy fallback (copy-text.js): when the browser refuses the clipboard, the text shows selected under its row. */
.copy-fallback{display:block;width:100%;margin:6px 0 2px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.25);color:var(--d-ink,#fff);font:600 15px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-user-select:text;user-select:text}
.copy-fallback[hidden]{display:none}
#settingsVersionText{font-variant-numeric:tabular-nums}
/* Help and legal rows in Settings are links to the site (mates-core#712). */
a.settings-row{text-decoration:none}