:root{--navy:#08263d;--blue:#dff3fb;--sky:#eef9fd;--green:#43b649;--green2:#6bd252;--ink:#0b2237;--muted:#637483;--line:#d3e5ed;--danger:#d83b45;--card:rgba(255,255,255,.94)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:#d8edf4;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}.bite-body{min-height:100vh}.bite-app{min-height:100dvh;max-width:540px;margin:auto;background:linear-gradient(180deg,#eaf8fd 0,#f9fdff 100%);position:relative;overflow:hidden;box-shadow:0 0 45px rgba(8,38,61,.12)}
.screen{display:none;min-height:100dvh;position:relative;padding:env(safe-area-inset-top) 18px calc(24px + env(safe-area-inset-bottom))}.screen.is-active{display:flex;flex-direction:column;animation:fade .24s ease}@keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-media{min-height:60dvh;margin:-0px -18px 0;border-radius:0 0 38px 38px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(212,242,253,.15),rgba(3,35,56,.12)),url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=85') center/cover}.hero-media:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(0,47,72,.82))}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(236,249,255,.16),rgba(0,0,0,.04))}.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:24px 24px}.brand-mark{font-size:36px;filter:grayscale(1);transform:rotate(-8deg)}.icon-btn,.back{border:0;background:rgba(255,255,255,.7);backdrop-filter:blur(12px);width:42px;height:42px;border-radius:14px;font-size:22px;color:var(--ink)}
.hero-copy{position:absolute;z-index:3;left:24px;right:24px;bottom:34px;color:white}.brand{font-size:44px;font-weight:900;letter-spacing:.14em}.subtitle{font-size:13px;font-weight:800;letter-spacing:.22em;margin-bottom:18px}.hero-copy h1{font-size:38px;line-height:.98;margin:0 0 10px;text-transform:uppercase}.hero-copy p{margin:0;opacity:.9}.panel{padding:22px 4px}.primary,.secondary{width:100%;min-height:58px;border-radius:18px;border:0;font-weight:900;letter-spacing:.04em;font-size:16px}.primary{background:linear-gradient(135deg,var(--green2),#2da93a);color:white;box-shadow:0 12px 24px rgba(50,160,55,.2)}.primary span{float:right;font-size:26px;line-height:16px}.secondary{background:white;color:var(--ink);border:1px solid var(--line);margin-top:10px}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;text-align:center}.feature-row div{padding:12px 6px}.feature-row b{display:block;font-size:24px;margin-bottom:6px}.feature-row span{font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.05em}.quote{text-align:center;font-style:italic;color:#607b8b;margin:18px 0 0}
.screen-head{display:flex;align-items:center;gap:12px;padding:14px 2px 20px;font-size:13px;text-transform:uppercase;font-weight:800;letter-spacing:.14em}.content-card{background:var(--card);border:1px solid rgba(255,255,255,.9);border-radius:30px;padding:26px 22px;box-shadow:0 18px 50px rgba(16,66,91,.12)}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:900;color:#2c9e45;margin:0 0 8px}.content-card h2,.wait-copy h2,.bite-screen h2{font-size:34px;line-height:1.03;margin:0 0 12px}.muted{color:var(--muted);line-height:1.55}.time-grid{display:grid;gap:12px;margin:22px 0}.time-grid button{padding:18px;border-radius:18px;border:1px solid var(--line);background:#f7fcfe;font-size:16px;font-weight:800;color:var(--ink)}.time-grid button.selected{background:linear-gradient(135deg,#2f7945,#44b449);color:white;border-color:transparent;box-shadow:0 7px 20px rgba(51,147,66,.25)}.custom-time{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:12px 14px;border-radius:16px;margin-bottom:14px;font-weight:700}.custom-time input{width:110px;padding:12px;border:0;border-radius:12px;background:#edf7fb;font-size:16px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid #e8f1f5}.toggle-row span{display:flex;flex-direction:column}.toggle-row small{color:var(--muted);margin-top:3px}.toggle-row input{width:22px;height:22px}.tip{margin-top:14px;background:#edf7fb;padding:14px;border-radius:16px;color:#476575;font-size:13px}
.wait-screen{background:linear-gradient(180deg,#dff5ff 0,#eefaff 45%,#cdeaf2 100%);overflow:hidden}.wait-visual{height:37vh;margin:0 -18px;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(8,66,88,.12)),url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1200&q=85') center/cover;border-radius:0 0 38px 38px}.water-ring{position:absolute;width:150px;height:45px;border:2px solid rgba(255,255,255,.8);border-radius:50%;left:50%;bottom:25%;transform:translateX(-50%);box-shadow:0 0 0 18px rgba(255,255,255,.14),0 0 0 34px rgba(255,255,255,.08)}.rod{position:absolute;right:18px;bottom:-14px;font-size:90px;transform:rotate(-22deg)}.wait-copy{text-align:center;padding:30px 0 18px}.wait-copy p{color:var(--muted)}.pulse-dot{width:20px;height:20px;border:3px solid #69b57b;border-top-color:transparent;border-radius:50%;margin:22px auto;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.strike-zone{margin-top:auto;border:1px dashed #9bbdc9;background:rgba(255,255,255,.4);border-radius:28px;min-height:86px;font-size:18px;font-weight:900;color:#55717e}.strike-zone small,.strike-main small{display:block;font-size:10px;letter-spacing:.09em;margin-top:4px;font-weight:700}
.bite-screen{align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 30%,#f8ffff,#d7f5ff 42%,#a9dce7 100%)}.bite-ripple{width:240px;height:240px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.95) 0 22%,rgba(255,255,255,.52) 23% 45%,rgba(255,255,255,.15) 46% 60%,transparent 61%);animation:ripple .55s ease-out}.bite-ripple span{font-size:44px;font-weight:1000;font-style:italic;transform:rotate(-5deg)}@keyframes ripple{from{transform:scale(.65);opacity:.4}to{transform:scale(1);opacity:1}}.strike-main{margin-top:24px;width:220px;height:220px;border-radius:50%;border:10px solid rgba(84,184,71,.18);outline:2px solid #3ea649;background:linear-gradient(145deg,#79da59,#228f3a);color:white;font-size:32px;font-weight:1000;box-shadow:0 18px 50px rgba(32,126,56,.25)}
.result-card{text-align:center}.reaction-time{font-size:72px;font-weight:1000;line-height:1;margin:18px 0}.reaction-time small{font-size:30px;margin-left:5px}.rating{display:inline-block;padding:12px 20px;border:1px solid #9ccf70;border-radius:99px;color:#337335;font-weight:900;background:#f7fff0}.stats-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d8e8ef;border-radius:18px;overflow:hidden;margin:24px 0}.stats-mini div{background:#f7fcfe;padding:14px 8px}.stats-mini b,.stats-mini span{display:block}.stats-mini span{font-size:10px;color:var(--muted);margin-top:4px}.center{text-align:center}.false-screen{background:linear-gradient(180deg,#fff6f3,#f2f8fb)}.false-icon{width:84px;height:84px;border-radius:50%;margin:12px auto;background:var(--danger);display:grid;place-items:center;color:white;font-size:54px;font-weight:300}.false-screen h2{color:var(--danger)}.stat-list{display:grid;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:20px 0}.stat-list > div{display:flex;justify-content:space-between;padding:15px;background:#fbfeff;border-bottom:1px solid var(--line)}.stat-list > div:last-child{border-bottom:0}.spark-wrap{padding:12px;background:#f6fbfd;border-radius:18px;margin-bottom:18px}.spark-wrap canvas{width:100%;height:160px}.about-list{display:grid;gap:12px;margin:22px 0}.about-list div{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:#f3fafc}
@media(min-width:541px){body{padding:22px}.bite-app{border-radius:34px;min-height:calc(100dvh - 44px)}.screen{min-height:calc(100dvh - 44px)}}


/* BITE v1.1 mobile UX refinements */
.custom-choice{grid-column:1/-1}.custom-time[hidden]{display:none!important}.custom-time{animation:fade .18s ease}.custom-time input.input-error{outline:2px solid var(--danger);background:#fff1f1}
.strike-hint{text-align:center;margin:10px 0 12px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(115,166,185,.28);box-shadow:0 8px 24px rgba(21,92,118,.08)}.strike-hint-label{display:block;font-size:10px;font-weight:900;letter-spacing:.18em;color:#2d9341;margin-bottom:4px}.strike-hint strong{display:block;font-size:14px}.strike-hint small{display:block;color:var(--muted);margin-top:3px;font-size:11px}.strike-zone{position:relative;overflow:hidden;min-height:112px;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(222,248,234,.95));border:2px solid #62b876;color:#1f7134;box-shadow:inset 0 0 0 5px rgba(90,183,109,.10),0 12px 26px rgba(49,130,72,.13);font-size:22px;letter-spacing:.06em}.strike-zone:before{content:"";position:absolute;inset:9px;border:1px dashed rgba(49,130,72,.4);border-radius:20px;pointer-events:none}.strike-zone span,.strike-zone small{position:relative;z-index:1}.strike-zone small{color:#698074;margin-top:6px}.wait-screen{touch-action:manipulation}.wait-screen .screen-head{position:relative;z-index:5}

/* Keep the complete home navigation visible on common phone heights */
[data-screen="home"].screen{height:100dvh;min-height:100dvh;overflow:hidden;padding-bottom:max(10px,env(safe-area-inset-bottom))}.hero-media{min-height:50dvh;height:50dvh}.home-panel{height:50dvh;display:flex;flex-direction:column;justify-content:flex-start;padding:14px 4px 8px}.home-panel .primary{min-height:52px}.home-panel .feature-row{margin-top:10px;gap:4px}.home-panel .feature-row div{padding:7px 3px}.home-panel .feature-row b{font-size:20px;margin-bottom:3px}.home-panel .feature-row span{font-size:9px}.home-panel .quote{margin:8px 0 0;font-size:12px}.hero-copy{bottom:20px}.hero-copy .brand{font-size:36px}.hero-copy .subtitle{margin-bottom:10px}.hero-copy h1{font-size:31px}.hero-copy p{font-size:13px}.topbar{padding:16px 20px}
@media(max-height:720px){.hero-media{min-height:46dvh;height:46dvh}.home-panel{height:54dvh;padding-top:10px}.hero-copy{bottom:14px}.hero-copy .brand{font-size:31px}.hero-copy h1{font-size:26px;margin-bottom:6px}.hero-copy p{font-size:12px}.brand-mark{font-size:30px}.icon-btn{width:38px;height:38px}.home-panel .primary{min-height:48px}.home-panel .feature-row{margin-top:6px}.home-panel .feature-row div{padding:4px 2px}.home-panel .quote{margin-top:4px;font-size:11px}}
@media(max-height:640px){.hero-media{min-height:43dvh;height:43dvh}.home-panel{height:57dvh}.hero-copy .brand{font-size:28px}.hero-copy .subtitle{font-size:10px}.hero-copy h1{font-size:23px}.feature-row b{font-size:17px!important}.feature-row span{font-size:8px!important}.home-panel .quote{display:none}}

/* BITE v1.2 — one-screen trainer + fixed strike position */
html,body{height:100%;overscroll-behavior:none}.bite-app{height:100dvh;min-height:100dvh}.screen{height:100dvh;min-height:100dvh;overflow:hidden}.screen.is-active{display:flex}

/* Training setup must fit on one phone screen */
.time-screen{padding-bottom:max(10px,env(safe-area-inset-bottom))}.time-screen .screen-head{flex:0 0 auto;padding:8px 2px 10px}.time-screen .content-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 18px;border-radius:24px;overflow:hidden}.time-screen .eyebrow{margin-bottom:3px;font-size:10px}.time-screen .content-card h2{font-size:clamp(25px,4.2vh,33px);margin-bottom:5px}.time-screen .muted{font-size:13px;line-height:1.3;margin:0}.time-screen .time-grid{gap:7px;margin:10px 0}.time-screen .time-grid button{padding:10px 12px;min-height:44px;border-radius:15px;font-size:15px}.time-screen .custom-time{padding:7px 10px;margin:0 0 7px;border-radius:14px;font-size:13px;min-height:44px}.time-screen .custom-time input{padding:8px;width:94px;font-size:15px}.time-screen .toggle-row{padding:7px 0;min-height:40px}.time-screen .toggle-row strong{font-size:13px}.time-screen .toggle-row small{font-size:10px;margin-top:1px}.time-screen .toggle-row input{width:20px;height:20px}.time-screen .primary{min-height:46px;margin-top:auto}.time-screen .tip{margin-top:6px;padding:7px 10px;border-radius:12px;font-size:10px;line-height:1.2}

/* The whole waiting/bite interaction is one fixed screen. */
.wait-screen{padding-bottom:max(12px,env(safe-area-inset-bottom));display:none;grid-template-rows:auto minmax(112px,25vh) 1fr auto;gap:8px;background:linear-gradient(180deg,#dff5ff 0,#eefaff 58%,#d9f0f4 100%)}.wait-screen.is-active{display:grid}.wait-screen .game-head{padding:6px 2px 8px}.wait-screen .wait-visual{height:auto;min-height:0;margin:0 -18px;border-radius:0 0 28px 28px}.wait-screen .wait-copy{min-height:0;padding:8px 0 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.wait-screen .wait-copy .eyebrow{font-size:10px;margin-bottom:4px}.wait-screen .wait-copy h2{font-size:clamp(27px,4.5vh,36px);margin:0 0 6px}.wait-screen .wait-copy p{font-size:14px;margin:0;color:var(--muted)}.wait-screen .pulse-dot{width:17px;height:17px;margin:12px auto 0}.wait-screen .strike-zone{margin:0;width:100%;height:clamp(108px,17vh,142px);min-height:108px;border-radius:30px;font-size:clamp(20px,3.4vh,29px);transition:background .12s ease,border-color .12s ease,box-shadow .12s ease,transform .08s ease}.wait-screen .strike-zone small{font-size:11px}.wait-screen .strike-zone:active{transform:scale(.985)}
.wait-screen.is-bite .strike-zone{background:linear-gradient(145deg,#72d958,#23983a);border-color:#2d9b43;color:white;box-shadow:inset 0 0 0 6px rgba(255,255,255,.14),0 14px 34px rgba(35,130,57,.3)}.wait-screen.is-bite .strike-zone:before{border-color:rgba(255,255,255,.58)}.wait-screen.is-bite .strike-zone small{color:rgba(255,255,255,.9)}.wait-screen.is-bite .pulse-dot{display:none}.wait-screen.is-bite .eyebrow{color:#1e8b3b}.tok-flash{display:none;font-size:clamp(42px,8vh,68px);font-weight:1000;font-style:italic;line-height:1;transform:rotate(-5deg);margin:2px 0 4px;color:var(--ink)}.wait-screen.is-bite .tok-flash{display:block;animation:tokPop .18s ease-out}.wait-screen.is-bite #waitTitle{font-size:clamp(24px,4vh,32px);margin-top:1px}.wait-screen.is-bite #waitMessage{font-weight:700;color:var(--ink)}@keyframes tokPop{from{transform:rotate(-5deg) scale(.7);opacity:.1}to{transform:rotate(-5deg) scale(1);opacity:1}}

@media(max-height:740px){.time-screen .content-card{padding:12px 16px}.time-screen .time-grid{gap:5px;margin:7px 0}.time-screen .time-grid button{min-height:39px;padding:7px 10px}.time-screen .content-card h2{font-size:25px}.time-screen .tip{display:none}.wait-screen{grid-template-rows:auto minmax(95px,22vh) 1fr auto;gap:5px}.wait-screen .strike-zone{height:108px}.wait-screen .wait-copy h2{font-size:27px}.wait-screen .wait-copy p{font-size:13px}}
@media(max-height:650px){.time-screen .screen-head{padding-top:3px;padding-bottom:5px}.time-screen .content-card{padding:9px 14px}.time-screen .eyebrow{display:none}.time-screen .muted{font-size:11px}.time-screen .time-grid{grid-template-columns:1fr 1fr;gap:5px;margin:6px 0}.time-screen .time-grid .custom-choice{grid-column:1/-1}.time-screen .time-grid button{min-height:36px;font-size:13px}.time-screen .toggle-row{min-height:34px;padding:4px 0}.time-screen .primary{min-height:42px}.wait-screen{grid-template-rows:auto minmax(82px,18vh) 1fr auto}.wait-screen .rod{font-size:58px}.wait-screen .strike-zone{height:96px;min-height:96px;border-radius:24px}.wait-screen .wait-copy h2{font-size:24px}.tok-flash{font-size:40px}}

/* BITE v1.5 — responsive centering + iPhone Safari visible-area fixes */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.bite-body{min-height:100svh;min-height:100dvh}
.bite-app{width:100%;max-width:540px;margin-inline:auto;height:100svh;min-height:100svh;overflow:hidden}
.screen{width:100%;height:100svh;min-height:100svh;max-height:100svh;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(18px,env(safe-area-inset-bottom));overflow:hidden}

/* Home: remove the apparent left shift and keep the entire composition centered. */
[data-screen="home"].screen{height:100svh;min-height:100svh;max-height:100svh;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(14px,env(safe-area-inset-bottom));align-items:stretch}
[data-screen="home"] .hero-media{width:calc(100% + 36px);margin-left:-18px;margin-right:-18px;flex:0 0 49svh;min-height:0;height:auto}
[data-screen="home"] .hero-copy{left:38px;right:38px;bottom:20px;text-align:center;display:flex;flex-direction:column;align-items:center}
[data-screen="home"] .hero-copy .brand,[data-screen="home"] .hero-copy .subtitle,[data-screen="home"] .hero-copy h1,[data-screen="home"] .hero-copy p{width:100%;text-align:center}
[data-screen="home"] .hero-copy .brand{padding-left:.14em}
[data-screen="home"] .home-panel{width:100%;height:auto;flex:1;min-height:0;padding:12px 0 6px;align-items:center}
[data-screen="home"] .home-panel .primary{width:100%;flex:0 0 auto}
[data-screen="home"] .feature-row{width:100%;margin-inline:auto}
[data-screen="home"] .quote{width:100%;text-align:center}

/* Shared subpage geometry: content always stays inside the actually visible Safari viewport. */
.screen:not([data-screen="home"]):not([data-screen="wait"]){padding-top:env(safe-area-inset-top);display:none}
.screen:not([data-screen="home"]):not([data-screen="wait"]).is-active{display:flex;flex-direction:column}
.screen-head{width:100%;flex:0 0 auto}
.content-card{width:100%;max-width:100%;margin-inline:auto;min-width:0}
.primary,.secondary{flex-shrink:0}

/* Setup remains one-screen, but uses the smaller Safari viewport rather than the expanding dvh viewport. */
.time-screen{height:100svh;min-height:100svh;max-height:100svh}
.time-screen .content-card{max-height:100%;min-height:0}

/* Game screen: exact same visible-area rule, preserving the v1.4 TOK/audio logic untouched. */
.wait-screen{height:100svh;min-height:100svh;max-height:100svh;padding-bottom:max(18px,env(safe-area-inset-bottom))}

/* Result screen fits without the CTA disappearing behind Safari chrome. */
[data-screen="result"] .content-card{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:20px 20px}
[data-screen="result"] .reaction-time{font-size:clamp(50px,9svh,72px);margin:10px 0}
[data-screen="result"] .stats-mini{margin:14px 0}
[data-screen="result"] .primary{margin-top:auto}

/* False-strike screen remains fully visible on short phones. */
.false-screen .content-card{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:18px 20px}
.false-screen .false-icon{width:72px;height:72px;font-size:46px;margin:6px auto 10px}
.false-screen .quote{margin:12px 0}
.false-screen .primary{margin-top:auto}

/* Statistics: compact vertically so KEEP TRAINING sits above the iOS bottom browser bar. */
[data-screen="stats"] .content-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 18px 18px;overflow:hidden}
[data-screen="stats"] .eyebrow{margin-bottom:3px}
[data-screen="stats"] .content-card h2{font-size:clamp(28px,4.7svh,34px);margin-bottom:6px}
[data-screen="stats"] .stat-list{flex:0 0 auto;margin:8px 0 10px}
[data-screen="stats"] .stat-list > div{padding:clamp(8px,1.35svh,12px) 14px;font-size:clamp(13px,2svh,16px)}
[data-screen="stats"] .spark-wrap{flex:1 1 auto;min-height:92px;max-height:150px;margin:0 0 10px;padding:8px;display:flex;align-items:center}
[data-screen="stats"] .spark-wrap canvas{height:100%!important;min-height:80px;max-height:134px}
[data-screen="stats"] .primary{min-height:48px;margin-top:auto}

/* About screen gets the same fixed visible-height treatment. */
[data-screen="about"] .content-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:18px 20px}
[data-screen="about"] .about-list{gap:7px;margin:12px 0}
[data-screen="about"] .about-list div{padding:8px 10px}
[data-screen="about"] .quote{margin:10px 0}
[data-screen="about"] .primary{margin-top:auto;min-height:48px}

/* Extra compression for devices where Safari leaves especially little vertical space. */
@media(max-height:740px){
  [data-screen="home"] .hero-media{flex-basis:47svh}
  [data-screen="home"] .hero-copy{bottom:14px;left:34px;right:34px}
  [data-screen="home"] .hero-copy .brand{font-size:30px}
  [data-screen="home"] .hero-copy h1{font-size:25px}
  [data-screen="home"] .hero-copy p{font-size:12px}
  [data-screen="home"] .home-panel{padding-top:9px}
  .screen-head{padding-top:7px;padding-bottom:9px}
  [data-screen="stats"] .content-card{padding:12px 15px 14px}
  [data-screen="stats"] .content-card h2{font-size:27px;margin-bottom:3px}
  [data-screen="stats"] .stat-list{margin:5px 0 7px}
  [data-screen="stats"] .stat-list > div{padding:7px 12px}
  [data-screen="stats"] .spark-wrap{min-height:76px;max-height:112px;margin-bottom:7px}
  [data-screen="stats"] .primary{min-height:44px}
  [data-screen="result"] .content-card,[data-screen="about"] .content-card,.false-screen .content-card{padding-top:13px;padding-bottom:13px}
}

@media(max-height:650px){
  [data-screen="home"] .hero-media{flex-basis:44svh}
  [data-screen="home"] .hero-copy .subtitle{margin-bottom:5px}
  [data-screen="home"] .hero-copy h1{font-size:22px}
  [data-screen="home"] .feature-row{margin-top:5px}
  [data-screen="home"] .quote{display:none}
  [data-screen="stats"] .eyebrow{display:none}
  [data-screen="stats"] .content-card h2{font-size:24px}
  [data-screen="stats"] .stat-list > div{padding:5px 10px;font-size:12px}
  [data-screen="stats"] .spark-wrap{min-height:62px;max-height:88px}
}

/* BITE v1.6 — true visual viewport sizing for mobile Safari */
:root{
  --bite-vvh:100dvh;
  --bite-safe-bottom:max(16px, env(safe-area-inset-bottom));
}
html,body{
  width:100%;
  max-width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
.bite-body{
  min-height:0;
  height:var(--bite-vvh);
  overflow:hidden;
}
.bite-app{
  width:100%;
  max-width:540px;
  height:var(--bite-vvh);
  min-height:var(--bite-vvh);
  max-height:var(--bite-vvh);
  margin:0 auto;
  overflow:hidden;
}
.screen,
[data-screen="home"].screen,
.time-screen,
.wait-screen{
  height:var(--bite-vvh);
  min-height:var(--bite-vvh);
  max-height:var(--bite-vvh);
}
.screen{
  padding-bottom:var(--bite-safe-bottom);
}

/* HOME: panel takes only the room it needs; image automatically fills all remaining space. */
[data-screen="home"].screen{
  display:none;
  flex-direction:column;
  padding-top:0;
  padding-bottom:var(--bite-safe-bottom);
}
[data-screen="home"].screen.is-active{display:flex}
[data-screen="home"] .hero-media{
  flex:1 1 0;
  width:calc(100% + 36px);
  height:auto;
  min-height:0;
  margin:0 -18px;
  border-radius:0 0 34px 34px;
}
[data-screen="home"] .home-panel{
  flex:0 0 auto;
  width:100%;
  min-height:0;
  padding:12px 0 4px;
  display:flex;
  flex-direction:column;
}
[data-screen="home"] .feature-row{
  margin-top:10px;
  gap:6px;
}
[data-screen="home"] .feature-row div{padding:7px 3px}
[data-screen="home"] .feature-row b{font-size:22px;margin-bottom:4px}
[data-screen="home"] .feature-row span{font-size:9px;line-height:1.35}
[data-screen="home"] .quote{
  margin:7px 0 0;
  font-size:12px;
  line-height:1.3;
}
[data-screen="home"] .primary{min-height:54px}

/* Never let a CTA sit flush with the visual bottom edge. */
[data-screen="result"] .content-card,
.false-screen .content-card,
[data-screen="stats"] .content-card,
[data-screen="about"] .content-card{
  margin-bottom:2px;
}
[data-screen="result"] .primary:last-of-type,
.false-screen .secondary:last-child,
[data-screen="stats"] .primary,
[data-screen="about"] .primary{
  margin-bottom:2px;
}

/* Stats use the available card height instead of overflowing below Safari chrome. */
[data-screen="stats"] .content-card{
  height:auto;
  max-height:calc(var(--bite-vvh) - 74px - var(--bite-safe-bottom));
}
[data-screen="stats"] .spark-wrap{
  min-height:70px;
  max-height:132px;
}

/* Setup screen also obeys the measured visual viewport. */
.time-screen .content-card{
  flex:1 1 auto;
  overflow:hidden;
}

/* Short landscape/compact Safari viewport handling. */
@media(max-height:760px){
  [data-screen="home"] .hero-copy{bottom:14px}
  [data-screen="home"] .hero-copy .brand{font-size:30px}
  [data-screen="home"] .hero-copy .subtitle{margin-bottom:6px}
  [data-screen="home"] .hero-copy h1{font-size:25px}
  [data-screen="home"] .hero-copy p{font-size:12px}
  [data-screen="home"] .home-panel{padding-top:8px}
  [data-screen="home"] .feature-row{margin-top:5px}
  [data-screen="home"] .feature-row div{padding:4px 2px}
  [data-screen="home"] .quote{margin-top:3px;font-size:11px}
}
@media(max-height:660px){
  [data-screen="home"] .quote{display:none}
  [data-screen="home"] .primary{min-height:48px}
  [data-screen="home"] .feature-row span{font-size:8px}
}

/* BITE v1.8 — hard horizontal centering / Safari input-pan reset */
html,
body{
  position:relative;
  left:0;
  right:0;
  margin-left:0!important;
  margin-right:0!important;
  overflow-x:hidden!important;
  touch-action:pan-y;
}
body.bite-body{
  width:100%!important;
  max-width:100%!important;
}
.bite-app{
  position:relative;
  left:auto!important;
  right:auto!important;
  width:min(100%,540px)!important;
  max-width:540px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transform:none!important;
  translate:none!important;
  overflow-x:hidden!important;
}
.screen,
.screen.is-active{
  left:0!important;
  right:auto!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none;
  overflow-x:hidden!important;
}
.screen.is-active{
  animation:biteFadeOnly .20s ease;
}
@keyframes biteFadeOnly{from{opacity:.25}to{opacity:1}}
.content-card,
.screen-head,
.wait-copy,
.strike-zone{
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
}
/* Keep inputs large enough that iOS does not zoom/pan to focus them. */
.custom-time input,
input,
select,
textarea{
  font-size:16px!important;
}

/* BITE v1.9 — partner advertising layout */
.bite-site-layout{width:100%;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,540px) minmax(0,1fr);align-items:start;gap:clamp(18px,2.2vw,38px);padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));overflow-x:hidden}
.bite-site-layout>.bite-app{grid-column:2;width:100%;min-width:0}
.bite-side-ad{position:sticky;top:22px;display:flex;align-items:flex-start;min-width:0;padding-top:22px;z-index:1}
.bite-side-ad-left{grid-column:1;justify-content:flex-end}.bite-side-ad-right{grid-column:3;justify-content:flex-start}
.bite-ad-slot{position:relative}.desktop-ad{width:min(300px,100%);max-height:600px}.desktop-ad a,.mobile-ad a{display:block;color:inherit;text-decoration:none}.desktop-ad img{display:block;width:100%;height:auto;max-height:600px;object-fit:contain;border-radius:18px;box-shadow:0 14px 35px rgba(8,38,61,.12)}
.bite-ad-caption{display:block;font-size:9px;line-height:1;letter-spacing:.12em;font-weight:800;color:#71828d;text-align:center;margin:0 0 7px}
.bite-mobile-ad-wrap{display:none}.mobile-ad{width:100%;max-width:360px;margin:18px auto 0}.mobile-ad img{display:block;width:100%;height:auto;max-height:110px;object-fit:contain;border-radius:14px;box-shadow:0 10px 28px rgba(8,38,61,.10)}

/* Side ads require enough horizontal room; never squeeze the app. */
@media(max-width:1199px){.bite-site-layout{display:block;padding:0}.bite-side-ad{display:none}.bite-site-layout>.bite-app{width:min(100%,540px);margin-inline:auto}}
@media(max-width:540px){
  .bite-mobile-ad-wrap{display:block}
  .bite-mobile-ad-wrap:empty{display:none}
  .home-panel:has(.bite-mobile-ad-wrap .bite-ad-slot){padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .mobile-ad{max-width:320px}
}
@media(min-width:541px) and (max-width:1199px){.bite-mobile-ad-wrap{display:none}}
@media(min-width:1200px){
  body{padding:22px 0}
  .bite-site-layout{min-height:calc(100dvh - 44px)}
  .bite-site-layout>.bite-app{margin:0;border-radius:34px;min-height:calc(100dvh - 44px)}
}


/* BITE v2.0 — non-clickable sponsor image placements */
.hero-media.has-sponsor-image,
.wait-visual.has-sponsor-image{background-image:none!important;background-color:#dfeff5}
.sponsor-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;pointer-events:none;user-select:none;-webkit-user-drag:none}
.hero-media .sponsor-art-home{z-index:0}
.hero-media.has-sponsor-image .hero-overlay{z-index:1}
.hero-media.has-sponsor-image:after{z-index:1}
.hero-media.has-sponsor-image .topbar,.hero-media.has-sponsor-image .hero-copy{z-index:3}
.wait-visual .sponsor-art-game{z-index:0}
.wait-visual.has-sponsor-image .water-ring,.wait-visual.has-sponsor-image .rod{display:none}
@media(max-width:540px){.sponsor-art-home{object-position:center center}.sponsor-art-game{object-position:center center}}

/* BITE v2.1 — non-clickable result sponsor + day/night mode. Game JS untouched. */
.top-actions{display:flex;align-items:center;gap:8px}
.theme-toggle{font-size:19px;display:grid;place-items:center;line-height:1;cursor:pointer}
.theme-toggle-icon{display:block;transform:translateY(-1px)}

.result-sponsor{width:100%;height:clamp(150px,22svh,215px);border-radius:22px;overflow:hidden;margin:4px 0 14px;flex:0 1 auto;min-height:120px;position:relative;background:linear-gradient(135deg,#e8f5f8,#d7ebf1);border:1px solid var(--line);display:grid;place-items:center}
.result-sponsor img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.result-sponsor.is-placeholder span{font-size:11px;font-weight:900;letter-spacing:.18em;color:#78909c}
[data-screen="result"] .content-card{justify-content:flex-start}
[data-screen="result"] .content-card>.primary{margin-top:auto}
@media(max-height:760px){.result-sponsor{height:clamp(110px,17svh,145px);margin-bottom:10px}.reaction-time{margin:6px 0!important}.stats-mini{margin:9px 0!important}}
@media(max-height:650px){.result-sponsor{height:94px;min-height:94px;border-radius:17px}.result-card .muted{margin:5px 0}.rating{padding:8px 14px}.secondary{min-height:48px}}

html[data-bite-theme="dark"],html[data-bite-theme="dark"] body{background:#07131d;color:#eaf5f8}
html[data-bite-theme="dark"] body.bite-body{background:#07131d}
html[data-bite-theme="dark"] .bite-app{background:linear-gradient(180deg,#0a1b27 0,#07131d 100%);box-shadow:0 0 55px rgba(0,0,0,.5)}
html[data-bite-theme="dark"] .screen:not([data-screen="home"]){background:linear-gradient(180deg,#0c202d,#08161f)}
html[data-bite-theme="dark"] .wait-screen{background:linear-gradient(180deg,#0d2430 0,#0a1b25 58%,#07151d 100%)}
html[data-bite-theme="dark"] .false-screen{background:linear-gradient(180deg,#261518,#0c1820)}
html[data-bite-theme="dark"] .content-card{background:rgba(12,29,40,.96);border-color:rgba(255,255,255,.06);box-shadow:0 18px 50px rgba(0,0,0,.32)}
html[data-bite-theme="dark"] .screen-head,html[data-bite-theme="dark"] .content-card h2,html[data-bite-theme="dark"] .wait-copy h2,html[data-bite-theme="dark"] .reaction-time,html[data-bite-theme="dark"] .stats-mini b{color:#f1f8fb}
html[data-bite-theme="dark"] .muted,html[data-bite-theme="dark"] .wait-copy p,html[data-bite-theme="dark"] .quote,html[data-bite-theme="dark"] .stats-mini span,html[data-bite-theme="dark"] .toggle-row small{color:#9db1bd}
html[data-bite-theme="dark"] .back,html[data-bite-theme="dark"] .icon-btn{background:rgba(10,27,38,.76);color:#f2f9fc;border:1px solid rgba(255,255,255,.09)}
html[data-bite-theme="dark"] .time-grid button,html[data-bite-theme="dark"] .secondary,html[data-bite-theme="dark"] .stat-list > div,html[data-bite-theme="dark"] .stats-mini div,html[data-bite-theme="dark"] .about-list div{background:#102734;color:#edf8fb;border-color:#25404d}
html[data-bite-theme="dark"] .time-grid button.selected{background:linear-gradient(135deg,#27643b,#38a748);border-color:transparent}
html[data-bite-theme="dark"] .custom-time{border-color:#294451;background:#0f2531}
html[data-bite-theme="dark"] .custom-time input,html[data-bite-theme="dark"] .tip,html[data-bite-theme="dark"] .spark-wrap{background:#102a38;color:#f3f9fb}
html[data-bite-theme="dark"] .toggle-row{border-top-color:#213944}
html[data-bite-theme="dark"] .stat-list{border-color:#294451}
html[data-bite-theme="dark"] .stat-list > div{border-bottom-color:#294451}
html[data-bite-theme="dark"] .stats-mini{background:#294451}
html[data-bite-theme="dark"] .rating{background:#122b1d;color:#7ed786;border-color:#3e7547}
html[data-bite-theme="dark"] .strike-zone{background:linear-gradient(145deg,#102a24,#153a2c);color:#78d489;border-color:#3b8e52;box-shadow:inset 0 0 0 5px rgba(90,183,109,.08),0 12px 26px rgba(0,0,0,.22)}
html[data-bite-theme="dark"] .strike-zone small{color:#9bb9a4}
html[data-bite-theme="dark"] .tok-flash{color:#f5fbfd}
html[data-bite-theme="dark"] .result-sponsor{background:linear-gradient(135deg,#102734,#0b1d28);border-color:#28424e}
html[data-bite-theme="dark"] .result-sponsor.is-placeholder span{color:#6f8d9a}
html[data-bite-theme="dark"] .bite-ad-caption{color:#7f98a5}
html[data-bite-theme="dark"] .home-panel{color:#eaf5f8}
html[data-bite-theme="dark"] .home-panel .quote{color:#a6bac4}
html[data-bite-theme="dark"] .feature-row span{color:#e6f2f6}

/* v2.2 — permanent non-clickable sponsor placement on the stats screen */
.stats-sponsor{width:100%;height:clamp(120px,20svh,190px);border-radius:20px;overflow:hidden;margin:0 0 12px;flex:0 0 auto;position:relative;background:linear-gradient(135deg,#e8f5f8,#d7ebf1);border:1px solid var(--line);display:grid;place-items:center}
.stats-sponsor img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.stats-sponsor.is-placeholder span{font-size:11px;font-weight:900;letter-spacing:.18em;color:#78909c}
[data-screen="stats"] .spark-wrap{flex:0 1 auto;height:clamp(90px,15svh,145px)}
[data-screen="stats"] .primary{margin-top:auto}
@media(max-height:760px){.stats-sponsor{height:clamp(95px,15svh,125px);margin-bottom:9px}.stats-sponsor.is-placeholder span{font-size:10px}[data-screen="stats"] .spark-wrap{height:clamp(72px,12svh,105px)}}
@media(max-height:650px){.stats-sponsor{height:78px;min-height:78px;border-radius:16px;margin-bottom:7px}[data-screen="stats"] .spark-wrap{height:65px;min-height:65px}.stat-list{margin:8px 0!important}.stat-list > div{padding:8px 10px!important}}
html[data-bite-theme="dark"] .stats-sponsor{background:linear-gradient(135deg,#102734,#0b1d28);border-color:#28424e}
html[data-bite-theme="dark"] .stats-sponsor.is-placeholder span{color:#6f8d9a}


/* BITE v2.4 — sponsor areas fill the entire available gap; direct Stats entry on Home. Gameplay JS untouched. */
.result-sponsor,
.stats-sponsor{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  padding:0;
  background:transparent;
}
.result-sponsor.has-image,
.stats-sponsor.has-image{
  flex:1 1 0;
  min-height:112px;
  margin-top:4px;
  margin-bottom:12px;
}
.result-sponsor.has-image img,
.stats-sponsor.has-image img{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}
/* Don't reserve a large empty sponsor area when no image is configured. */
.result-sponsor.is-placeholder,
.stats-sponsor.is-placeholder{
  flex:0 0 72px;
  min-height:72px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#e8f5f8,#d7ebf1);
}
[data-screen="result"] .result-card{justify-content:flex-start}
[data-screen="result"] .primary{margin-top:0}
[data-screen="stats"] .stats-sponsor.has-image{flex:1 1 0;min-height:105px}
[data-screen="stats"] .primary{margin-top:0}

.feature-row .home-feature{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  margin:0;
  font:inherit;
  min-width:0;
  cursor:pointer;
}
.feature-row .home-feature b,
.feature-row .home-feature span{display:block}
.feature-row .home-feature:focus-visible{outline:2px solid #39aa46;outline-offset:4px;border-radius:10px}
html[data-bite-theme="dark"] .result-sponsor.is-placeholder,
html[data-bite-theme="dark"] .stats-sponsor.is-placeholder{background:linear-gradient(135deg,#102734,#0b1d28)}

@media(max-height:760px){
  .result-sponsor.has-image{min-height:90px;margin-bottom:9px}
  [data-screen="stats"] .stats-sponsor.has-image{min-height:82px;margin-bottom:8px}
}
@media(max-height:650px){
  .result-sponsor.has-image{min-height:72px}
  [data-screen="stats"] .stats-sponsor.has-image{min-height:68px}
}


/* BITE v2.5 — lightweight language selector. Gameplay layout/logic untouched. */
.language-picker{height:42px;display:flex;align-items:center;gap:4px;padding:0 8px;border-radius:14px;background:rgba(255,255,255,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);font-weight:800}
.language-picker span{font-size:15px;line-height:1}.language-picker select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;font-size:12px;padding:0 2px;outline:0;cursor:pointer}.language-picker select option{color:#0b2237;background:#fff}
html[data-bite-theme="dark"] .language-picker{background:rgba(10,27,38,.76);color:#f2f9fc;border:1px solid rgba(255,255,255,.09)}
@media(max-width:380px){.top-actions{gap:5px}.language-picker{height:38px;padding:0 6px}.language-picker span{display:none}.language-picker select{font-size:11px}}

/* BITE v2.6 — iOS custom-time stability. Gameplay JS remains untouched. */
#customSeconds{-webkit-user-select:text;user-select:text;touch-action:manipulation}
#customSeconds:focus{outline:2px solid rgba(67,182,73,.22);outline-offset:1px}

/* BITE v2.9 — approved best-reaction detail card.
   Stats presentation only; game timing / TOK / strike behavior is unchanged. */
.stat-best-row{cursor:pointer;align-items:center}
.stat-best-row .stat-info{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border:1.5px solid #36c95a;border-radius:50%;color:#36c95a;font-size:11px;font-weight:900;vertical-align:2px}
.stat-chevron{display:inline-block;color:#42cf70;font-size:18px;line-height:1;transition:transform .18s ease}
.stat-best-row[aria-expanded="true"] .stat-chevron{transform:rotate(180deg)}
.best-detail[hidden]{display:none!important}

/* Prevent the normal stat-row flex/background rule from leaking into the nested timeline. */
.stat-list > .best-detail{
  display:block!important;
  padding:17px 18px 15px!important;
  color:#102a34;
  background:linear-gradient(145deg,#eefaf4 0%,#e4f6ef 100%)!important;
  border-top:1px solid rgba(45,164,97,.35);
  border-bottom:1px solid rgba(45,164,97,.35)!important;
  font-family:inherit;
}
.best-detail-head{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:start;
  gap:11px;
  margin:0;
}
.best-trophy{font-size:29px;line-height:1.1;filter:saturate(1.15)}
.best-detail-head p{margin:0;min-width:0}
.best-detail-head strong{display:block;font-size:15px;line-height:1.25;font-weight:850;letter-spacing:0;color:inherit}
.best-detail-head em{color:#21b94f;font-style:normal;font-weight:900}
.best-detail-head small{display:block;margin-top:3px;color:#5e737b;font-size:12px;line-height:1.25;font-weight:500}
.best-detail-copy{margin:7px 0 23px 49px;color:#61767e;font-size:12px;line-height:1.45;font-weight:500}

.best-timeline{position:relative;height:103px;margin:0 2px 0}
.timeline-track{position:absolute;left:7px;right:7px;top:25px;height:7px;border-radius:99px;background:#9db0b7}
.timeline-progress{position:absolute;top:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#1bc85d,#52d947)}
.timeline-dot{position:absolute;top:50%;width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:#24ce69;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 0 1px rgba(16,56,65,.12)}
.start-dot{left:0}.end-dot{left:100%;background:#65777e}.tok-dot{left:55%}.reaction-dot{left:62%;background:#16464d}
.reaction-bracket{position:absolute;top:-25px;height:17px;border-top:1px dashed #28ce53;border-left:1px dashed #28ce53;border-right:1px dashed #28ce53}
.reaction-bracket b{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#25b94b;font-size:11px;line-height:1;font-weight:900}
.timeline-label{position:absolute;top:42px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0!important;background:transparent!important;border:0!important;text-align:center;font-size:10px;line-height:1.1;white-space:nowrap;color:#18313a}
.timeline-label b{font:inherit;font-weight:750;color:inherit}
.timeline-label span{font:inherit;color:#677b82}
.start-label{left:7px;transform:translateX(-14%)}
.end-label{right:7px;transform:translateX(12%)}
.tok-label,.reaction-label{transform:translateX(-50%)}

/* Dark mode mirrors the approved mock-up instead of retaining light nested blocks. */
html[data-bite-theme="dark"] .stat-list > .best-detail{
  color:#edf7f8;
  background:linear-gradient(145deg,#103e3b 0%,#073239 100%)!important;
  border-color:#1c7456!important;
}
html[data-bite-theme="dark"] .best-detail-head small,
html[data-bite-theme="dark"] .best-detail-copy{color:#b7cbd0}
html[data-bite-theme="dark"] .timeline-track{background:#3b5962}
html[data-bite-theme="dark"] .timeline-label{color:#eff8f9}
html[data-bite-theme="dark"] .timeline-label span{color:#c1d2d6}
html[data-bite-theme="dark"] .timeline-dot{box-shadow:none}
html[data-bite-theme="dark"] .reaction-dot{background:#123c43}

/* Keep typography and spacing consistent with the rest of the approved Stats card. */
[data-screen="stats"] .stat-list > div{font-family:inherit;font-weight:500}
[data-screen="stats"] .stat-list > div > b{font-family:inherit;font-weight:850}

@media(max-width:390px){
  .stat-list > .best-detail{padding:15px 12px 13px!important}
  .best-detail-head{grid-template-columns:32px minmax(0,1fr);gap:8px}
  .best-trophy{font-size:25px}
  .best-detail-head strong{font-size:14px}
  .best-detail-head small,.best-detail-copy{font-size:11px}
  .best-detail-copy{margin-left:40px;margin-bottom:21px}
  .best-timeline{margin:0;height:100px}
  .timeline-track{left:5px;right:5px}
  .timeline-label{font-size:9px}
  .start-label{left:5px}.end-label{right:5px}
}

/* Expanded Stats detail needs extra vertical room on real Safari viewports.
   Only the Stats card may scroll; gameplay screens remain fixed as before. */
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])){
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden]))::-webkit-scrollbar{display:none}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .spark-wrap{flex:0 0 105px;min-height:105px}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{flex:0 0 120px;min-height:120px}

/* BITE v3.0 — compact approved Stats detail layout.
   Presentation only. Gameplay / TOK / strike timing is untouched. */
.stat-list > .best-detail{
  padding:12px 14px 10px!important;
  min-height:0!important;
}
.best-detail-head{
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:center;
}
.best-trophy{font-size:24px;line-height:1}
.best-detail-head strong{font-size:15px;line-height:1.15}
.best-detail-head small{margin-top:2px;font-size:11px;line-height:1.15}
/* The long explanatory sentence is deliberately hidden to keep the approved compact card. */
.best-detail-copy{display:none!important}
.best-timeline{
  height:78px;
  margin:8px 0 0;
}
.timeline-track{
  left:8px;
  right:8px;
  top:24px;
  height:6px;
}
.timeline-dot{width:14px;height:14px}
.reaction-bracket{top:-22px;height:15px}
.reaction-bracket b{bottom:15px;font-size:10px}
.timeline-label{
  top:38px;
  gap:2px;
  font-size:9px;
  line-height:1.05;
}
.timeline-label b{font-weight:800}
.timeline-label span{font-size:9px}
.start-label{left:8px;transform:translateX(-10%)}
.end-label{right:8px;transform:translateX(10%)}
/* Short labels prevent TOK/reaction/end overlap even on narrow iPhones. */
.tok-label,.reaction-label{min-width:44px}

/* Keep all important Stats content visible without introducing a nested scroll area. */
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])){
  overflow:hidden!important;
  max-height:calc(var(--bite-vvh) - 74px - var(--bite-safe-bottom));
}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .spark-wrap{
  flex:0 0 86px;
  min-height:86px;
  max-height:86px;
  margin-top:10px;
}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
  flex:0 0 102px;
  min-height:102px;
  max-height:102px;
  margin-top:10px;
  margin-bottom:8px;
}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .primary{
  min-height:52px;
}

@media(max-width:390px){
  .stat-list > .best-detail{padding:10px 10px 8px!important}
  .best-detail-head{grid-template-columns:27px minmax(0,1fr);gap:7px}
  .best-trophy{font-size:22px}
  .best-detail-head strong{font-size:13px}
  .best-detail-head small{font-size:10px}
  .best-timeline{height:72px;margin-top:7px}
  .timeline-track{left:6px;right:6px;top:22px}
  .timeline-label{top:36px;font-size:8.5px}
  .timeline-label span{font-size:8.5px}
  .start-label{left:6px}.end-label{right:6px}
  [data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .spark-wrap{
    flex-basis:78px;min-height:78px;max-height:78px;
  }
  [data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
    flex-basis:92px;min-height:92px;max-height:92px;
  }
}

/* BITE v3.1 — larger Stats sponsor, strictly contained inside the Stats card.
   Presentation only. No gameplay / TOK / reaction logic changes. */
[data-screen="stats"] .stats-sponsor,
[data-screen="stats"] .stats-sponsor.has-image{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  align-self:stretch!important;
  overflow:hidden!important;
  border-radius:18px!important;
  margin-left:0!important;
  margin-right:0!important;
  position:relative!important;
  z-index:0!important;
}
[data-screen="stats"] .stats-sponsor.has-image img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  transform:none!important;
}
/* Expanded best-reaction view: spend the available lower space on the banner,
   but keep it as its own row so the button can never overlap it. */
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
  flex:0 0 clamp(112px,14svh,138px)!important;
  min-height:112px!important;
  max-height:138px!important;
  margin-top:10px!important;
  margin-bottom:9px!important;
}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .primary{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  min-height:52px!important;
}
@media(max-width:390px){
  [data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
    flex-basis:clamp(102px,13svh,124px)!important;
    min-height:102px!important;
    max-height:124px!important;
    margin-top:8px!important;
    margin-bottom:8px!important;
    border-radius:16px!important;
  }
}
@media(max-height:720px){
  [data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
    flex-basis:104px!important;
    min-height:104px!important;
    max-height:104px!important;
  }
}

/* BITE v3.2 — use the previously unused lower Stats space for a taller sponsor image.
   Presentation only: all existing Stats elements keep their size and gameplay is untouched. */
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])){
  max-height:calc(var(--bite-vvh) - 26px - var(--bite-safe-bottom))!important;
}
[data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
  flex:0 0 clamp(165px,20svh,195px)!important;
  min-height:165px!important;
  max-height:195px!important;
  margin-top:10px!important;
  margin-bottom:9px!important;
}
@media(max-width:390px){
  [data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
    flex-basis:clamp(145px,18svh,175px)!important;
    min-height:145px!important;
    max-height:175px!important;
  }
}
@media(max-height:720px){
  [data-screen="stats"] .content-card:has(.best-detail:not([hidden])){
    max-height:calc(var(--bite-vvh) - 24px - var(--bite-safe-bottom))!important;
  }
  [data-screen="stats"] .content-card:has(.best-detail:not([hidden])) .stats-sponsor.has-image{
    flex-basis:132px!important;
    min-height:132px!important;
    max-height:132px!important;
  }
}

/* BITE v3.3 — readable Best Reaction timeline on narrow phones.
   Display only: measured values and gameplay remain untouched. */
[data-screen="stats"] .best-timeline .timeline-label{
  width:72px;
  max-width:72px;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
[data-screen="stats"] .best-timeline .tok-label,
[data-screen="stats"] .best-timeline .reaction-label{
  transform:translateX(-50%);
}
[data-screen="stats"] .best-timeline .start-label{
  width:58px;
  left:8px;
  transform:translateX(-8%);
  text-align:left;
}
[data-screen="stats"] .best-timeline .end-label{
  width:58px;
  right:8px;
  transform:translateX(8%);
  text-align:right;
}
/* Green TOK lightning from the approved mock-up. Text-presentation selector
   keeps the symbol theme-colored rather than platform emoji-colored. */
[data-screen="stats"] .best-timeline .tok-dot::before{
  content:"⚡︎";
  position:absolute;
  left:50%;
  bottom:17px;
  transform:translateX(-50%);
  color:#2bd35f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:900;
  line-height:1;
  text-shadow:0 0 8px rgba(43,211,95,.22);
  pointer-events:none;
}
@media(max-width:390px){
  [data-screen="stats"] .best-timeline .timeline-label{
    width:64px;
    max-width:64px;
    font-size:8.5px;
  }
  [data-screen="stats"] .best-timeline .timeline-label span{font-size:8.5px}
  [data-screen="stats"] .best-timeline .start-label,
  [data-screen="stats"] .best-timeline .end-label{width:52px}
  [data-screen="stats"] .best-timeline .tok-dot::before{font-size:18px;bottom:16px}
}

/* BITE v3.5 — deterministic readable Best Reaction timeline.
   iOS Safari can paint the proportional marker positions before the stats panel
   has its final width. Keep the four display markers in stable readable zones;
   the exact measured TOK/reaction values remain printed underneath unchanged. */
[data-screen="stats"] .best-timeline #timelineTokDot,
[data-screen="stats"] .best-timeline #timelineTokLabel{
  left:52%!important;
}
[data-screen="stats"] .best-timeline #timelineReactionDot,
[data-screen="stats"] .best-timeline #timelineReactionLabel{
  left:72%!important;
}
[data-screen="stats"] .best-timeline #timelineProgress{
  left:52%!important;
  width:20%!important;
}
[data-screen="stats"] .best-timeline #reactionBracket{
  left:52%!important;
  width:20%!important;
}
[data-screen="stats"] .best-timeline .start-label{
  left:8px!important;
}
[data-screen="stats"] .best-timeline .end-label{
  right:8px!important;
}
@media(max-width:390px){
  [data-screen="stats"] .best-timeline #timelineTokDot,
  [data-screen="stats"] .best-timeline #timelineTokLabel{left:50%!important}
  [data-screen="stats"] .best-timeline #timelineReactionDot,
  [data-screen="stats"] .best-timeline #timelineReactionLabel{left:72%!important}
  [data-screen="stats"] .best-timeline #timelineProgress{
    left:50%!important;
    width:22%!important;
  }
  [data-screen="stats"] .best-timeline #reactionBracket{
    left:50%!important;
    width:22%!important;
  }
}

/* BITE v3.7 — centered transparent PNG STRIKE visual only.
   The sponsor/banner above and all gameplay timing/audio/measurement logic stay untouched. */
.bite-predator-visual{display:none}

.wait-screen.is-bite{
  grid-template-rows:auto minmax(112px,25vh) minmax(0,1fr) auto;
  gap:0;
}
.wait-screen.is-bite .wait-copy{
  position:relative;
  min-height:0;
  margin:0 -18px;
  padding:0;
  overflow:hidden;
  background:#071820;
  display:block;
}
.wait-screen.is-bite .wait-copy > :not(.bite-predator-visual){display:none!important}
.wait-screen.is-bite .bite-predator-visual{
  display:block;
  position:absolute;
  inset:0;
}
.wait-screen.is-bite .bite-predator-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:50% 50%;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.wait-screen.is-bite .strike-zone{
  flex:0 0 auto;
  width:100%;
  height:clamp(150px,22vh,192px);
  min-height:150px;
  margin:10px 0 0;
  border-radius:34px;
  border:3px solid #35bc4e;
  background:linear-gradient(145deg,#6ee05a 0%,#21a33b 60%,#148b31 100%);
  color:#fff;
  font-size:clamp(44px,7.2vh,68px);
  font-weight:1000;
  font-style:italic;
  letter-spacing:.01em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.13),0 0 30px rgba(42,221,78,.30),0 14px 30px rgba(0,0,0,.25);
}
.wait-screen.is-bite .strike-zone:before{
  inset:12px;
  border:2px dashed rgba(255,255,255,.58);
  border-radius:25px;
}
.wait-screen.is-bite .strike-zone small{display:none!important}
.wait-screen.is-bite .strike-zone span{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  text-shadow:0 2px 0 rgba(0,0,0,.12);
}

@media(max-height:740px){
  .wait-screen.is-bite{grid-template-rows:auto minmax(95px,22vh) minmax(0,1fr) auto}
  .wait-screen.is-bite .strike-zone{height:clamp(132px,20vh,160px);min-height:132px;margin-top:7px;font-size:clamp(38px,6.6vh,56px)}
}
@media(max-height:650px){
  .wait-screen.is-bite{grid-template-rows:auto minmax(82px,18vh) minmax(0,1fr) auto}
  .wait-screen.is-bite .strike-zone{height:118px;min-height:118px;margin-top:5px;border-radius:27px;font-size:40px}
  .wait-screen.is-bite .strike-zone:before{inset:9px;border-radius:20px}
}

/* BITE v3.8 — integrated centered STRIKE scene (no transparent PNG cutout).
   Visual-only override: sponsor banner and gameplay mechanics remain untouched. */
.wait-screen.is-bite .wait-copy{
  background:#061820 url('../images/strike-scene.webp') 50% 50% / cover no-repeat;
}
.wait-screen.is-bite .bite-predator-visual{
  display:none!important;
}
.wait-screen.is-bite .strike-zone{
  margin-top:0;
}

/* BITE v4.0 — stable, centered TOK presentation.
   Visual/layout-only: gameplay timing, audio, false-strike and reaction logic are untouched. */

/* Keep the waiting indicator on the original lightweight CSS animation path. */
.wait-screen:not(.is-bite) .pulse-dot{
  display:block;
  animation:biteWaitSpin .82s linear infinite!important;
  will-change:transform;
  transform:translateZ(0);
}
@keyframes biteWaitSpin{
  from{transform:translateZ(0) rotate(0deg)}
  to{transform:translateZ(0) rotate(360deg)}
}

/* TOK state: three deliberate zones — backend banner, centered scene, centered button. */
.wait-screen.is-bite{
  grid-template-rows:auto minmax(112px,25vh) minmax(0,1fr) auto!important;
  gap:8px!important;
}
.wait-screen.is-bite .wait-copy{
  position:relative;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border-radius:24px;
  overflow:hidden;
  background-color:#061820;
  background-image:url('../images/strike-scene.webp');
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
  contain:paint;
}
.wait-screen.is-bite .wait-copy > *{display:none!important}
.wait-screen.is-bite .bite-predator-visual{display:none!important}
.wait-screen.is-bite .strike-zone{
  box-sizing:border-box;
  width:100%!important;
  max-width:100%!important;
  height:clamp(126px,18vh,156px)!important;
  min-height:126px!important;
  margin:0!important;
  flex:0 0 auto;
  border-radius:28px!important;
  font-size:clamp(38px,6.2vh,58px)!important;
  line-height:1!important;
}
.wait-screen.is-bite .strike-zone small{display:none!important}
.wait-screen.is-bite .strike-zone span{white-space:nowrap}

/* Compact phones: preserve all three areas without pushing controls under Safari chrome. */
@media(max-height:740px){
  .wait-screen.is-bite{grid-template-rows:auto minmax(95px,22vh) minmax(0,1fr) auto!important;gap:6px!important}
  .wait-screen.is-bite .wait-copy{border-radius:20px}
  .wait-screen.is-bite .strike-zone{height:126px!important;min-height:126px!important;font-size:42px!important;border-radius:25px!important}
}
@media(max-height:650px){
  .wait-screen.is-bite{grid-template-rows:auto minmax(82px,18vh) minmax(0,1fr) auto!important;gap:5px!important}
  .wait-screen.is-bite .strike-zone{height:108px!important;min-height:108px!important;font-size:38px!important}
}


/* BITE v4.5 — true two-layer spinning-reel silhouette loader. UI only. */
.wait-screen:not(.is-bite) .bite-reel-loader{
  position:relative!important;display:block!important;width:124px!important;height:93px!important;
  margin:10px auto 0!important;background:transparent!important;border:0!important;border-radius:0!important;
  animation:none!important;transform:none!important;overflow:visible!important;
}
.bite-reel-loader .reel-png-body,.bite-reel-loader .reel-png-crank{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  pointer-events:none;user-select:none;-webkit-user-drag:none;background:transparent!important;
}
.bite-reel-loader .reel-png-body{transform:none!important;animation:none!important}
.bite-reel-loader .reel-png-crank{
  transform-origin:65.50% 56.00%;
  animation:biteReelHandleV45 2.18s linear infinite!important;will-change:transform;
}
@keyframes biteReelHandleV45{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.wait-screen.is-bite .bite-reel-loader{display:none!important}
@media(max-height:740px){.wait-screen:not(.is-bite) .bite-reel-loader{width:108px!important;height:81px!important;margin-top:5px!important}}

/* BITE v4.6 — Safari-safe reel crank animation.
   Presentation only. The game engine/app.js is untouched. */

/* The small eyebrow is intentionally hidden in the waiting state. */
.wait-screen:not(.is-bite) #waitEyebrow{
  display:none!important;
}

/* Neutralise every older spinner animation on the OUTER loader.
   The reel body must never rotate. */
.wait-screen:not(.is-bite) #waitSpinner.bite-reel-loader{
  position:relative!important;
  display:block!important;
  width:124px!important;
  height:93px!important;
  margin:10px auto 0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  animation:none!important;
  transform:none!important;
  overflow:visible!important;
  contain:layout paint;
}

#waitSpinner .reel-png-body{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  transform:none!important;
  animation:none!important;
  background:transparent!important;
  pointer-events:none!important;
}

/* Dedicated crank layer. It occupies the same transparent canvas as the body.
   Its origin matches the mechanical axle in both PNG files. */
#waitSpinner .reel-crank-rotor{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  transform-origin:65.5% 56%!important;
  -webkit-transform-origin:65.5% 56%!important;
  animation:biteCrankV46 2.18s linear infinite!important;
  -webkit-animation:biteCrankV46 2.18s linear infinite!important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:none!important;
}

#waitSpinner .reel-png-crank{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  transform:none!important;
  animation:none!important;
  background:transparent!important;
  pointer-events:none!important;
}

@keyframes biteCrankV46{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@-webkit-keyframes biteCrankV46{
  from{-webkit-transform:rotate(0deg)}
  to{-webkit-transform:rotate(-360deg)}
}

.wait-screen.is-bite #waitSpinner{
  display:none!important;
}

@media(max-height:740px){
  .wait-screen:not(.is-bite) #waitSpinner.bite-reel-loader{
    width:108px!important;
    height:81px!important;
    margin-top:5px!important;
  }
}

/* BITE v4.7 — fishing-reel wait indicator.
   Visual-only change: the game engine remains untouched. */
.wait-screen:not(.is-bite) #waitSpinner.bite-reel-v47{
  position:relative!important;
  display:block!important;
  width:132px!important;
  height:90px!important;
  margin:10px auto 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  animation:none!important;
  -webkit-animation:none!important;
  transform:none!important;
  overflow:visible!important;
}

#waitSpinner.bite-reel-v47 .bite-reel-svg{
  width:100%!important;
  height:100%!important;
  display:block!important;
  overflow:visible!important;
  filter:drop-shadow(0 0 5px rgba(75,235,130,.18));
}

#waitSpinner.bite-reel-v47 .reel-fixed,
#waitSpinner.bite-reel-v47 .reel-crank{
  fill:none;
  stroke:#58e883;
  stroke-width:5.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

#waitSpinner.bite-reel-v47 .reel-hub{
  fill:#d8ffe3;
  stroke:#58e883;
}

/* ONLY the real handle rotates. The reel itself stays completely still.
   2.18 s keeps the previously requested slower speed.
   Negative rotation follows the user's marked direction: up on the right side. */
#waitSpinner.bite-reel-v47 .reel-crank{
  transform-box:view-box;
  transform-origin:132px 91px;
  -webkit-transform-origin:132px 91px;
  animation:biteReelHandleV47 2.18s linear infinite!important;
  -webkit-animation:biteReelHandleV47 2.18s linear infinite!important;
  will-change:transform;
}

@keyframes biteReelHandleV47{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@-webkit-keyframes biteReelHandleV47{
  from{-webkit-transform:rotate(0deg)}
  to{-webkit-transform:rotate(-360deg)}
}

.wait-screen.is-bite #waitSpinner.bite-reel-v47{
  display:none!important;
}

@media(max-height:740px){
  .wait-screen:not(.is-bite) #waitSpinner.bite-reel-v47{
    width:116px!important;
    height:79px!important;
    margin-top:5px!important;
  }
}

/* BITE v4.8 — detailed spinning reel based on the approved visual concept.
   UI only: gameplay JavaScript is untouched. */
.wait-screen:not(.is-bite) #waitSpinner.bite-reel-v48{
  display:block!important;
  position:relative!important;
  width:154px!important;
  height:105px!important;
  margin:8px auto 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  animation:none!important;
  -webkit-animation:none!important;
  transform:none!important;
  overflow:visible!important;
}

#waitSpinner.bite-reel-v48 .bite-reel-svg-v48{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:url(#reelGlow48);
}

#waitSpinner.bite-reel-v48 .reel48-body,
#waitSpinner.bite-reel-v48 .reel48-crank{
  stroke:#58e883;
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  vector-effect:non-scaling-stroke;
}

#waitSpinner.bite-reel-v48 .reel48-bodyfill,
#waitSpinner.bite-reel-v48 .reel48-spoolfill{
  fill:rgba(15,55,45,.78);
}

#waitSpinner.bite-reel-v48 .reel48-thread{
  stroke-width:1.6;
  opacity:.58;
}

#waitSpinner.bite-reel-v48 .reel48-hub{
  fill:#dffff0;
  stroke:#58e883;
}

#waitSpinner.bite-reel-v48 .reel48-arm{
  stroke-width:7;
}

#waitSpinner.bite-reel-v48 .reel48-knob{
  fill:rgba(9,32,31,.94);
  stroke-width:4.5;
}

/* Complete physical crank rotates around the mechanical axle.
   Same deliberately slow speed: 2.18 seconds/revolution.
   Direction: right side travels upward, matching the approved red-arrow direction. */
#waitSpinner.bite-reel-v48 .reel48-crank{
  transform-box:view-box;
  transform-origin:202px 113px;
  -webkit-transform-origin:202px 113px;
  animation:biteReelCrank48 2.18s linear infinite!important;
  -webkit-animation:biteReelCrank48 2.18s linear infinite!important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

@keyframes biteReelCrank48{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@-webkit-keyframes biteReelCrank48{
  from{-webkit-transform:rotate(0deg)}
  to{-webkit-transform:rotate(-360deg)}
}

.wait-screen.is-bite #waitSpinner.bite-reel-v48{
  display:none!important;
}

@media(max-height:740px){
  .wait-screen:not(.is-bite) #waitSpinner.bite-reel-v48{
    width:138px!important;
    height:94px!important;
    margin-top:4px!important;
  }
}

/* BITE v4.9 — simplified reel symbol from the approved reference.
   No gameplay timing/audio/stat logic changed. */
.wait-screen:not(.is-bite) #waitSpinner.bite-reel-v49{
  display:block!important; width:118px!important; height:86px!important;
  margin:7px auto 0!important; padding:0!important; border:0!important;
  border-radius:0!important; background:transparent!important;
  animation:none!important; -webkit-animation:none!important;
  transform:none!important; overflow:visible!important;
}
#waitSpinner.bite-reel-v49 .bite-reel-svg-v49{
  display:block; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 0 5px rgba(88,232,131,.35));
}
#waitSpinner.bite-reel-v49 .reel49-body,
#waitSpinner.bite-reel-v49 .reel49-handle{
  fill:none; stroke:#58e883; stroke-width:8;
  stroke-linecap:round; stroke-linejoin:round;
}
#waitSpinner.bite-reel-v49 .reel49-body rect,
#waitSpinner.bite-reel-v49 .reel49-handle rect{
  fill:#58e883; stroke:#58e883;
}
#waitSpinner.bite-reel-v49 .reel49-handle{
  transform-box:view-box;
  transform-origin:89px 86px;
  -webkit-transform-origin:89px 86px;
  animation:biteReelHandle49 2.18s linear infinite!important;
  -webkit-animation:biteReelHandle49 2.18s linear infinite!important;
  will-change:transform;
}
/* Arrow reference: on the right side the handle travels upward. */
@keyframes biteReelHandle49{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@-webkit-keyframes biteReelHandle49{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(-360deg)}}
.wait-screen.is-bite #waitSpinner.bite-reel-v49{display:none!important}

/* Restart safeguard: when the waiting screen is shown again, a fresh CSS animation
   is attached to the currently visible handle, including repeated rounds on iOS Safari. */
.wait-screen:not(.is-bite)[aria-hidden="false"] #waitSpinner.bite-reel-v49 .reel49-handle,
.wait-screen:not(.is-bite):not([aria-hidden="true"]) #waitSpinner.bite-reel-v49 .reel49-handle{
  animation-name:biteReelHandle49!important;
  -webkit-animation-name:biteReelHandle49!important;
}

/* BITE v5.0 — Safari crank fixes.
   A larger SVG viewport prevents the handle from being clipped around ~7 o'clock.
   reel-animation.js restarts ONLY this visual animation on every WAIT-screen entry. */
#waitSpinner.bite-reel-v49,
#waitSpinner.bite-reel-v49 .bite-reel-svg-v49 {
  overflow: visible !important;
}

#waitSpinner.bite-reel-v49 .reel49-handle {
  animation: none !important;
  -webkit-animation: none !important;
  transform-box: view-box;
  transform-origin: 89px 86px;
  -webkit-transform-origin: 89px 86px;
}

/* v5.3 — false-strike header: suppress legacy oversized duplicate home label */
[data-screen="false"] .back-btn .back-label,
[data-screen="false"] .back-btn .home-label,
[data-screen="false"] .back-btn .false-home-label {
  display: none !important;
}

/* v5.7 result actions: 2/3 retry + 1/3 share */
.result-action-row{width:100%;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;flex:0 0 auto;margin:0}
.result-action-row .primary{width:100%;margin:0!important;min-width:0}
.result-action-row .result-share{padding-left:7px;padding-right:7px;font-size:clamp(11px,2.8vw,15px);letter-spacing:.01em;white-space:nowrap}
[data-screen="result"] .result-sponsor.has-image{flex:1 1 150px}
@media(max-height:760px){[data-screen="result"] .result-sponsor.has-image{flex:1 1 110px}.result-action-row{gap:8px}}