/* The how-to overlay and card (reels/onboarding/howto.js, mates-core#675). Every colour has a fallback: the app's host page
   (mobile/modules/hobbi-native/src/hostPage.ts) links this file without the Hobbi brand sheet. The overlay (.howto-*) is the app's;
   the card (.hw-*, at the end) is the web feed's. */
.howto-veil{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
 padding:max(16px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
 background:rgba(6,7,10,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
 color:#fff;font-family:var(--hb-font-body,"Geist",-apple-system,system-ui,sans-serif);-webkit-tap-highlight-color:transparent;
 touch-action:none;user-select:none;-webkit-user-select:none;animation:howto-in .2s ease-out both}
.howto-veil.leaving{opacity:0;transition:opacity .16s ease-in}
.howto-card{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(360px,100%);max-height:100%}
.howto-head{text-align:center}
.howto-kicker{margin:0;font:800 12px/1 var(--hb-font-body,-apple-system,system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--hb-blue,#3faff3)}
.howto-name{margin:6px 0 0;font:800 26px/1.05 var(--hb-font-display,"Baloo 2",-apple-system,system-ui,sans-serif);letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.howto-clip{position:relative;flex:0 1 auto;height:min(44vh,380px);min-height:150px;aspect-ratio:390/844;border-radius:22px;overflow:hidden;
 background:#11141c;border:2px solid rgba(255,255,255,.2);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.howto-clip video,.howto-clip img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.howto-clip.empty{display:none}
.howto-lines{display:flex;flex-direction:column;gap:10px;width:100%;margin:0;padding:14px 16px;list-style:none;border-radius:20px;
 background:rgba(18,22,32,.86);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.howto-lines li{display:flex;align-items:center;gap:12px;min-height:36px}
.howto-icon{flex:0 0 36px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(63,175,243,.18);color:var(--hb-blue-gloss,#c9e9fc)}
.howto-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.howto-text{font:700 17px/1.2 var(--hb-font-body,-apple-system,system-ui,sans-serif);letter-spacing:-.005em}
.howto-start{width:100%;height:62px;border:0;border-radius:31px;background:var(--hb-green,#4fd57f);color:#08210f;
 box-shadow:inset 0 -5px 0 var(--hb-green-shade,#328151),0 8px 20px rgba(0,0,0,.35);
 font:800 25px/1 var(--hb-font-display,"Baloo 2",-apple-system,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;
 touch-action:manipulation;cursor:pointer}
.howto-start:active{transform:translateY(2px) scale(.99);box-shadow:inset 0 -2px 0 var(--hb-green-shade,#328151),0 4px 12px rgba(0,0,0,.35)}
.howto-start:focus{outline:none}
.howto-hint{margin:-4px 0 0;font:600 13px/1 var(--hb-font-body,-apple-system,system-ui,sans-serif);color:rgba(255,255,255,.62)}
@media (max-height:700px){.howto-clip{height:min(36vh,300px)}.howto-name{font-size:22px}.howto-card{gap:10px}.howto-text{font-size:16px}}
@keyframes howto-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.howto-veil{animation:none}.howto-veil.leaving{transition:none}.howto-start:active{transform:none}}
.howto-veil.still{animation:none}

/* The web feed's how-to card (createHowTo({look:'card'}); Sai 2026-10-30, Direction D as the SDK bet panel draws it:
   Oct 27 spec 1.2 surfaces, 1.5 type, 1.8 lips, 1.10 dither, 2.3 keycaps). Solid, chunky, tactile; no glass (glass is
   gone from the feed). A paper card with a 2 px border and an 8 px lip, low on a quiet dim scrim with no blur:
   - the header band: the game's colour (--hw-band, from its poster), Bayer-dithered on a canvas, the mono kicker, the
     title in Baloo 800 with a night drop, the ✕ face keycap;
   - the rows as face keycap tiles (4 px lip), each with a coloured keycap well: blue play, green win, red risk;
   - "▶ Watch how" (face keycap) and "Got it" (blue primary keycap); both sink and spring back.
   8 px grid, text 13 px and up; the card stays clear of the top bar (safe top + 60) and of the home indicator
   (--sa-safe-bottom), and scrolls rather than slide under either on a short screen (Q25/Q26). */
dialog.hw-sheet{--hw-paper:#151924;--hw-face:#222839;--hw-edge:#2f3648;--hw-lip:#07080d;--hw-deep:#04050a;--hw-well:#0f121b;--hw-accent:var(--hb-accent,#3faff3);--hw-ink:#06121c;--hw-accent-lip:#296a94;--hw-gloss:var(--hb-accent-gloss,#c9e9fc);--hw-text:var(--hb-text,#eef1f7);--hw-soft:#a3abbd;
 position:fixed;inset:0;z-index:2147483000;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;max-width:none;max-height:none;margin:0;
 padding:calc(var(--sa-safe-top,max(14px,env(safe-area-inset-top))) + 60px) 16px calc(var(--sa-safe-bottom,max(20px,calc(env(safe-area-inset-bottom) + 12px))) + 8px);
 overflow-y:auto;overscroll-behavior:contain;border:0;background:rgba(4,5,8,.64);color:var(--hw-text);font-family:var(--hb-font-ui,"Geist",-apple-system,system-ui,sans-serif);
 -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;animation:hw-fade .18s ease-out both}
dialog.hw-sheet:not([open]){display:none}
dialog.hw-sheet::backdrop{background:transparent}
dialog.hw-sheet.leaving{opacity:0;transition:opacity .16s ease-in}
/* On close the dialog shuts at once, so the page is neither inert nor covered; this copy fades out on top of it and
   lets every touch through (howto.js close). */
.hw-ghost{position:fixed;inset:0;z-index:2147483000;pointer-events:none;animation:hw-out .16s ease-in both}
/* The copy holds still where the card was: its own entrance (hw-rise, hw-fade) would replay from 16 px low (2026-10-30). */
.hw-ghost dialog.hw-sheet,.hw-ghost .hw-card,.hw-ghost .hw-theater{animation:none}
.hw-ghost dialog.hw-sheet{display:flex;position:absolute;animation:none;pointer-events:none}
@keyframes hw-out{from{opacity:1}to{opacity:0}}
.hw-card{--hw-band:#3faff3;position:relative;box-sizing:border-box;flex:none;width:min(360px,100%);margin:auto 0 8px;overflow:hidden;border:2px solid var(--hw-edge);border-radius:28px;background:var(--hw-paper);box-shadow:0 8px 0 var(--hw-deep),0 22px 36px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09);animation:hw-rise .28s cubic-bezier(.34,1.56,.64,1) both}
/* The band: its colour deepened under the dither, a 2 px night rule where it meets the paper. */
.hw-band{position:relative;min-height:104px;padding:20px 72px 16px 20px;box-sizing:border-box;background:color-mix(in srgb,var(--hw-band) 26%,#151924);border-bottom:2px solid var(--hw-deep)}
.hw-dither{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.hw-kicker{position:relative;margin:0;font:600 13px/16px var(--hb-font-mono,"Geist Mono",ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fff;-webkit-text-stroke:3px #0a0c12;paint-order:stroke fill;text-shadow:0 2px 0 #0a0c12}
.hw-title{position:relative;margin:8px 0 0;padding-top:3px;font:800 30px/1 var(--hb-font-display,"Baloo 2",system-ui,sans-serif);letter-spacing:-.01em;color:#fff;-webkit-text-stroke:5px #0a0c12;paint-order:stroke fill;text-shadow:0 4px 0 #0a0c12;overflow-wrap:anywhere}
/* Face keycaps (the bet panel's chips): face, 2 px edge, lip, top gloss; they sink and spring back. */
.hw-x,.hw-watch,.hw-back{border:2px solid var(--hw-edge);background:var(--hw-face);color:var(--hw-text);box-shadow:0 4px 0 var(--hw-lip),inset 0 1px 0 rgba(255,255,255,.09);-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;transition:transform 260ms cubic-bezier(.34,1.56,.64,1),box-shadow 260ms cubic-bezier(.34,1.56,.64,1)}
.hw-x{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%}
.hw-x svg,.hw-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hw-x:active,.hw-back:active{transform:translateY(4px);box-shadow:0 0 0 var(--hw-lip);transition-duration:70ms}
.hw-body{padding:16px 16px 20px}
/* Rows: keycap tiles, a coloured keycap well each (play blue, win green, risk red; the bet panel's lips and gloss). */
.hw-rows{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.hw-row{--well:var(--hw-accent);--well-lip:#296a94;--well-hi:#c9e9fc;--well-ink:#06121c;display:flex;align-items:center;gap:12px;min-height:64px;box-sizing:border-box;padding:8px 12px 8px 8px;border:2px solid var(--hw-edge);border-radius:18px;background:var(--hw-face);box-shadow:0 4px 0 var(--hw-lip),inset 0 1px 0 rgba(255,255,255,.07)}
.hw-row[data-kind=win]{--well:#4fd57f;--well-lip:#1d5a35;--well-hi:#d4f7e0;--well-ink:#06210f}
.hw-row[data-kind=risk]{--well:#fc5855;--well-lip:#963839;--well-hi:#fed0cf;--well-ink:#2a0707}
.hw-well{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-bottom:3px;border-radius:14px;background:var(--well);color:var(--well-ink);box-shadow:0 3px 0 var(--well-lip),inset 0 2px 0 var(--well-hi)}
.hw-well svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hw-words{display:flex;flex-direction:column;gap:2px;min-width:0}
.hw-head{font:700 16px/1.25 var(--hb-font-ui,"Geist",-apple-system,system-ui,sans-serif);color:var(--hw-text)}
.hw-row[data-kind=risk] .hw-head{color:#ff7a77}
.hw-sub{font:500 13px/1.35 var(--hb-font-ui,"Geist",-apple-system,system-ui,sans-serif);color:var(--hw-soft)}
/* Watch how (a face keycap with a blue ▶ dot) and Got it (the blue primary keycap), side by side. */
.hw-actions{display:flex;gap:12px;margin-top:20px}
.hw-watch{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;height:56px;margin-bottom:6px;padding:3px 12px 0 8px;border-radius:999px;box-shadow:0 6px 0 var(--hw-lip),inset 0 1px 0 rgba(255,255,255,.09);font:800 18px/1 var(--hb-font-display,"Baloo 2",system-ui,sans-serif)}
.hw-watch-dot{display:grid;place-items:center;width:28px;height:28px;margin-top:-3px;border-radius:50%;background:var(--hw-accent);color:var(--hw-ink);box-shadow:inset 0 -2px 0 var(--hw-accent-lip)}
.hw-watch-dot svg{width:14px;height:14px;margin-left:2px;fill:currentColor;stroke:none}
.hw-watch:active{transform:translateY(6px) scale(.98);box-shadow:0 0 0 var(--hw-lip);transition-duration:70ms}
.hw-ok{flex:1.25 1 0;display:block;width:100%;height:56px;margin:0 0 6px;padding:3px 0 0;border:0;border-radius:999px;background:var(--hw-accent);box-shadow:0 6px 0 var(--hw-accent-lip),inset 0 2px 0 var(--hw-gloss);color:var(--hw-ink);font:800 22px/1 var(--hb-font-display,"Baloo 2",system-ui,sans-serif);-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;transition:transform 260ms cubic-bezier(.34,1.56,.64,1),box-shadow 260ms cubic-bezier(.34,1.56,.64,1)}
.hw-ok:active{transform:translateY(6px) scale(.98);box-shadow:0 0 0 var(--hw-accent-lip),inset 0 2px 0 var(--hw-gloss);transition-duration:70ms}
.hw-ok:focus,.hw-watch:focus,.hw-x:focus,.hw-back:focus{outline:none}
.hw-ok:focus-visible,.hw-watch:focus-visible,.hw-x:focus-visible,.hw-back:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Watch how: the clip as big as the screen allows (portrait, like the game) below the top bar (safe top + its 44 px
   and lip), framed like a card, over a deep scrim; Back returns to the card. The card hides meanwhile. */
dialog.hw-sheet.watching .hw-card{display:none}
.hw-theater{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;box-sizing:border-box;padding:calc(var(--sa-safe-top,max(14px,env(safe-area-inset-top))) + 56px) 16px calc(var(--sa-safe-bottom,max(20px,calc(env(safe-area-inset-bottom) + 12px))) + 8px);background:rgba(4,5,8,.92);animation:hw-fade .18s ease-out both}
.hw-theater-top{display:flex;align-items:center;gap:12px;min-height:48px}
.hw-back{display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 16px 0 10px;border-radius:999px;font:700 16px/1 var(--hb-font-ui,"Geist",-apple-system,system-ui,sans-serif)}
.hw-theater-title{margin:0;padding-top:3px;font:800 22px/1 var(--hb-font-display,"Baloo 2",system-ui,sans-serif);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-player{flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding-bottom:8px}
.hw-player video,.hw-player img{display:block;height:100%;max-width:100%;width:auto;aspect-ratio:288/624;object-fit:cover;box-sizing:border-box;border:3px solid var(--hw-edge);border-radius:24px;background:#0a0c12;box-shadow:0 8px 0 var(--hw-deep),0 22px 36px rgba(0,0,0,.5);pointer-events:none}
.hw-player.empty{display:none}
@keyframes hw-fade{from{opacity:0}to{opacity:1}}
@keyframes hw-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
dialog.hw-sheet.still,dialog.hw-sheet.still .hw-card,dialog.hw-sheet.still .hw-theater{animation:none}
@media (prefers-reduced-motion:reduce){dialog.hw-sheet,.hw-card,.hw-theater{animation:none}dialog.hw-sheet.leaving{transition:none}.hw-ok,.hw-x,.hw-watch,.hw-back{transition:none}.hw-ok:active,.hw-watch:active{transform:translateY(6px)}}

/* The game guide's card (game-guide.js; Harsh, 2026-10-31): the game's one line, 1–3 big numbered steps with a gesture
   picture each (a tap pulses, a swipe or drag slides, a hold glows, a flick lifts), then how you win (green) and how you
   lose (red). Same card for every game; still under Reduce Motion. */
.hw-line{margin:0 0 16px;font:600 16px/1.35 var(--hb-font-ui,"Geist",-apple-system,system-ui,sans-serif);color:var(--hw-text)}
.hw-steps{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.hw-step{display:flex;align-items:center;gap:14px;min-height:76px;box-sizing:border-box;padding:8px 14px 8px 8px;border:2px solid var(--hw-edge);border-radius:20px;background:var(--hw-face);box-shadow:0 4px 0 var(--hw-lip),inset 0 1px 0 rgba(255,255,255,.07)}
.hw-gesture{position:relative;flex:none;display:grid;place-items:center;width:60px;height:60px;margin-bottom:3px;border-radius:16px;background:var(--hw-accent);color:var(--hw-ink);box-shadow:0 3px 0 var(--hw-accent-lip),inset 0 2px 0 var(--hw-gloss);overflow:visible}
.hw-gesture svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hw-num{position:absolute;top:-8px;left:-8px;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--hw-deep);border-radius:50%;background:#fff;color:#0a0c12;font:800 13px/1 var(--hb-font-ui,"Geist",-apple-system,system-ui,sans-serif)}
.hw-step-text{font:800 20px/1.2 var(--hb-font-display,"Baloo 2",system-ui,sans-serif);color:var(--hw-text);padding-top:3px}
.hw-outcomes{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.hw-out{--out:#4fd57f;display:flex;align-items:flex-start;gap:10px;font:600 15px/1.35 var(--hb-font-ui,"Geist",-apple-system,system-ui,sans-serif);color:var(--hw-text)}
.hw-out[data-kind=lose]{--out:#fc5855}
.hw-out-icon{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--out);color:#0a0c12}
.hw-out-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hw-out-text{padding-top:4px}
.hw-out[data-kind=lose] .hw-out-text{color:#ff9b98}
.hw-gesture[data-icon=tap] svg{animation:hw-tap 1.2s ease-in-out infinite}
.hw-gesture[data-icon=swipe] svg,.hw-gesture[data-icon=slide] svg,.hw-gesture[data-icon=drag] svg{animation:hw-slide 1.6s ease-in-out infinite}
.hw-gesture[data-icon=hold]{animation:hw-hold 1.6s ease-in-out infinite}
.hw-gesture[data-icon=flick] svg{animation:hw-flick 1.3s ease-out infinite}
@keyframes hw-tap{0%,60%,100%{transform:none}30%{transform:translateY(3px) scale(.86)}}
@keyframes hw-slide{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes hw-hold{0%,100%{box-shadow:0 3px 0 var(--hw-accent-lip),inset 0 2px 0 var(--hw-gloss),0 0 0 0 rgba(63,175,243,.6)}50%{box-shadow:0 3px 0 var(--hw-accent-lip),inset 0 2px 0 var(--hw-gloss),0 0 0 8px rgba(63,175,243,0)}}
@keyframes hw-flick{0%{transform:translateY(6px);opacity:1}70%{transform:translateY(-8px);opacity:.3}100%{transform:translateY(6px);opacity:1}}
@media (max-height:700px){.hw-step{min-height:64px}.hw-gesture{width:50px;height:50px}.hw-gesture svg{width:28px;height:28px}.hw-step-text{font-size:18px}.hw-line{margin-bottom:12px}}
dialog.hw-sheet.still .hw-gesture,dialog.hw-sheet.still .hw-gesture svg{animation:none}
@media (prefers-reduced-motion:reduce){.hw-gesture,.hw-gesture svg{animation:none}}