/* =========================================================
   Focus Buddy — Football Edition
   Built landscape-first for a Full HD (1920x1080) TV WebView.
   ========================================================= */
:root{
  --pitch:#1e8f4e;
  --pitch-dark:#136b39;
  --pitch-line: rgba(255,255,255,.16);
  --ink:#0c1f14;
  --paper:#ffffff;
  --paper-soft:#f4fff8;
  --gold:#ffc22e;
  --gold-deep:#e2a100;
  --red-card:#e6392f;
  --sky-blue:#2ea9ff;
  --navy:#12224a;
  --focus:#ffe45e;
  --radius:24px;
  --font-display:'Baloo 2', 'Fredoka', sans-serif;
  --font-body:'Fredoka', sans-serif;
  --font-read:'Atkinson Hyperlegible', sans-serif;
}
html, body{ margin:0; padding:0; overscroll-behavior:none; }
*{box-sizing:border-box;}

.fb-app-wrapper{
  position:relative;
  margin:0 auto; padding:0; width:100%;
  height:var(--fb-vh-px, var(--fb-height, 100vh));
  background:
    radial-gradient(ellipse at 15% -10%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(ellipse at 85% 110%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, var(--pitch) 0%, var(--pitch-dark) 100%);
  font-family:var(--font-body);
  color:var(--ink);
  overflow:hidden;
  border-radius:var(--fb-radius, 26px);
  box-shadow:0 10px 40px rgba(0,0,0,.28);
  transition:filter .2s ease;
  box-sizing:border-box;
  --topbar-h: clamp(48px, 8vh, 64px);
}
.fb-app-wrapper.fb-fullbleed{ border-radius:0; box-shadow:none; }
.fb-app-wrapper *{box-sizing:border-box;}
h1,h2,h3,.display{font-family:var(--font-display);}
.fb-app-wrapper #app{position:absolute; inset:0; width:100%; height:100%;}

/* ---- Stadium pitch backdrop: center circle + halfway line + corner glow ---- */
.stadium-bg{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.stadium-bg::before{ /* halfway line */
  content:''; position:absolute; top:0; bottom:0; left:50%; width:2px;
  background:var(--pitch-line); transform:translateX(-50%);
}
.stadium-bg::after{ /* center circle */
  content:''; position:absolute; top:50%; left:50%; width:min(46vh,26vw); height:min(46vh,26vw);
  border:2px solid var(--pitch-line); border-radius:50%; transform:translate(-50%,-50%);
}
.stadium-bg .flood{
  position:absolute; width:60vh; height:60vh; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
  filter:blur(2px);
}
.stadium-bg .flood.tl{ top:-30vh; left:-20vh; }
.stadium-bg .flood.br{ bottom:-30vh; right:-20vh; }
.stadium-bg .stripe{ position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 6vw, transparent 6vw 12vw); }

/* ---- Screens ---- */
.screen{
  position:absolute; inset:0; display:none;
  z-index:1;
  padding:clamp(14px, 3vh, 40px) clamp(20px, 4vw, 64px);
  overflow-y:auto; overflow-x:hidden;
  -ms-overflow-style:none; scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none; width:0; height:0;}
.screen.active{display:flex; flex-direction:column; align-items:center; justify-content:center;}
.screen.white{background:var(--paper-soft);}

/* Landscape-first two-panel layout: text/context on the left,
   choices/interaction on the right — built for a 16:9 TV, not a
   phone-style vertical stack. Falls back to a stacked column on
   narrow/portrait screens (see media query below). */
.screen-inner{
  width:100%; height:100%; margin:0 auto; max-width:1760px;
  display:flex; flex-direction:row; align-items:center;
  gap:clamp(20px, 4vw, 64px);
}
.panel-info{
  flex:0 1 40%; text-align:left; min-width:260px;
}
.panel-main{
  flex:1 1 58%; display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px, 2vh, 20px);
}
.panel-main.stack-left{ align-items:flex-start; text-align:left; }
.profile-hero{
  flex:0 0 clamp(180px, 22vw, 320px);
  height:min(78vh, 520px);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.profile-hero img{
  width:100%; height:100%; object-fit:contain; object-position:center bottom;
  opacity:0; transition:opacity .5s ease;
}
.profile-hero img.show{opacity:1;}
.profile-hero[hidden]{display:none;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:clamp(13px, 1.5vw, 20px); letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:6px;
  background:rgba(0,0,0,.18); padding:5px 16px; border-radius:30px;
}
h1.title{
  font-size:clamp(24px, 3.6vw, 56px); margin:0 0 10px; color:#fff; line-height:1.08;
  text-shadow:0 3px 0 rgba(0,0,0,.18);
}
.screen.white h1.title, .screen.white .eyebrow{ color:var(--ink); text-shadow:none; }
.screen.white .eyebrow{ background:rgba(30,143,78,.12); color:var(--pitch-dark); }
p.subtitle{ font-size:clamp(13px, 1.5vw, 22px); color:rgba(255,255,255,.92); max-width:620px; margin:0 0 clamp(10px, 2vh, 22px); }
.screen.white p.subtitle{ color:#334; }
.quote-box{
  background:var(--paper); border-radius:var(--radius);
  padding:clamp(10px, 1.8vh, 20px) clamp(18px, 2.6vw, 32px); font-size:clamp(13px, 1.4vw, 20px); max-width:560px; margin-bottom:clamp(12px, 2vh, 22px);
  box-shadow:0 8px 24px rgba(0,0,0,.18); border:3px dashed var(--gold);
  font-family:var(--font-body); color:var(--pitch-dark); font-weight:600;
}
.row{display:flex; gap:clamp(14px, 2vw, 26px); flex-wrap:wrap; justify-content:center;}
.panel-main .row{justify-content:flex-start;}
.exercise-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px, 1.4vw, 18px); width:100%; max-width:900px;}
.col{display:flex; flex-direction:column; gap:clamp(12px, 1.8vw, 22px); align-items:stretch;}

/* ---- Buttons: modern flat pill style (soft elevation, not chunky 3D) ---- */
button.focusable, .focusable{
  font-family:var(--font-display);
  font-size:clamp(12px, 1.05vw, 16px); font-weight:700; color:var(--ink);
  background:var(--paper); border:2px solid rgba(12,31,20,.08);
  border-radius:14px; padding:clamp(8px, 1.1vh, 13px) clamp(12px, 1.5vw, 20px); cursor:pointer;
  min-width:clamp(90px, 9vw, 150px); box-shadow:0 2px 6px rgba(12,31,20,.14);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
button.focusable:hover{transform:translateY(-1px); box-shadow:0 4px 10px rgba(12,31,20,.18);}
button.focusable.focused{
  border-color:var(--gold); transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(12,31,20,.2), 0 0 0 3px rgba(255,194,46,.35);
  outline:none;
}
button.primary{background:linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#3a2500; border-color:transparent;}
button.eye-left{background:linear-gradient(180deg,#dff1ff,#bfe4ff); border-color:transparent;}
button.eye-right{background:linear-gradient(180deg,#ffe1e6,#ffc7d0); border-color:transparent;}
button.eye-both{background:linear-gradient(180deg,#e3ffe6,#bdf5c8); border-color:transparent;}
button.small{font-size:clamp(10px, 0.95vw, 14px); padding:clamp(6px, 1vh, 10px) clamp(10px, 1.4vw, 16px); min-width:clamp(70px, 7vw, 110px);}
.icon{font-size:clamp(18px, 2.2vw, 32px); display:block; margin-bottom:5px;}

/* ---- Big tile buttons for Home hub ---- */
.tile-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(12px, 1.8vw, 24px); width:100%; max-width:760px;}
.tile-btn{
  font-family:var(--font-display); font-weight:700; font-size:clamp(12px, 1.05vw, 16px);
  background:var(--paper); border-radius:16px; border:2px solid rgba(12,31,20,.08);
  padding:clamp(12px, 2vh, 22px) clamp(8px, 1.2vw, 14px); cursor:pointer; color:var(--ink);
  box-shadow:0 2px 8px rgba(12,31,20,.14); display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile-btn:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(12,31,20,.18);}
.tile-btn.focused{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 6px 16px rgba(12,31,20,.2), 0 0 0 3px rgba(255,194,46,.35); outline:none; }
.tile-btn .icon{font-size:clamp(22px,2.8vw,36px); margin-bottom:2px;}

/* ---- Global back / exit button — on every screen ---- */
.global-back-btn{
  position:absolute; bottom:clamp(10px, 2vh, 20px); left:clamp(10px, 2vw, 20px);
  top:auto;
  z-index:1000;
  font-size:clamp(11px, 1.05vw, 15px);
  padding:clamp(7px, 1vh, 11px) clamp(12px, 1.5vw, 18px);
  min-width:0;
  background:rgba(12,31,20,.85); color:#fff; border:2px solid rgba(255,255,255,.12);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  border-radius:12px;
}
.global-back-btn.focused{ border-color:var(--gold); box-shadow:0 2px 10px rgba(0,0,0,.28), 0 0 0 3px rgba(255,194,46,.4); }

/* ---- Current player badge — visible everywhere EXCEPT during an
   active test/exercise, where it's hidden to avoid distracting the
   child (see .fb-in-test below). ---- */
.current-player-badge{
  position:absolute; top:clamp(10px, 2vh, 20px); right:clamp(10px, 2vw, 20px);
  z-index:999;
  font-family:var(--font-display); font-weight:700; font-size:clamp(11px, 1.05vw, 15px);
  background:rgba(12,31,20,.7); color:#fff; border-radius:20px;
  padding:clamp(6px, 1vh, 10px) clamp(12px, 1.6vw, 18px);
  display:flex; align-items:center; gap:6px;
}
.current-player-badge .icon{font-size:1.1em; margin:0;}
.fb-app-wrapper.fb-in-test #currentPlayerBadge{display:none !important;}
.fb-app-wrapper.fb-in-test .stadium-bg{display:none;}

/* ---- Mascot ball (buddy) ---- */
.buddy-ball{
  width:clamp(70px, 9vw, 120px); height:clamp(70px, 9vw, 120px); border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ffffff, #f4f7fa 55%, #e2e8ef 100%);
  position:relative; box-shadow:0 10px 22px rgba(0,0,0,.25), inset 0 -10px 16px rgba(12,31,20,.06);
  display:flex; align-items:center; justify-content:center;
  animation:bob 1.8s ease-in-out infinite;
}
.buddy-cheek{position:absolute; top:52%; width:16%; height:10%; border-radius:50%; background:#ffb3bd; opacity:.55;}
.buddy-cheek.l{left:14%;} .buddy-cheek.r{right:14%;}
.buddy-eyes{position:absolute; top:32%; left:0; right:0; display:flex; justify-content:center; gap:20%;}
.buddy-eye{width:13%; height:13%; border-radius:50%; background:var(--ink); position:relative;}
.buddy-eye::after{content:''; position:absolute; top:14%; left:52%; width:38%; height:38%; border-radius:50%; background:#fff;}
.buddy-smile{position:absolute; bottom:27%; width:30%; height:14%; border-bottom:5px solid var(--ink); border-radius:0 0 50% 50%;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-12px) rotate(4deg);}}
.fb-app-wrapper.calm .buddy-ball{animation:none;}

/* ---- Eye diagram (patch reminder) ---- */
.eye-diagram{display:flex; gap:clamp(20px, 4vw, 50px); margin:clamp(8px,1.6vh,16px) 0; flex-wrap:wrap;}
.eye-shape{
  width:clamp(70px, 10vw, 104px); height:clamp(48px, 7vw, 70px); border-radius:50%; background:#fff;
  border:5px solid var(--ink); position:relative; display:flex; align-items:center; justify-content:center;
}
.eye-shape .pupil{width:32%; height:32%; border-radius:50%; background:var(--pitch-dark);}
.eye-shape.patched::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:repeating-linear-gradient(45deg,#333,#333 6px,#555 6px,#555 12px);
}
.eye-label{font-family:var(--font-display); font-weight:700; margin-top:8px; font-size:clamp(11px,1.1vw,15px); color:#fff;}
.screen.white .eye-label{color:var(--ink);}

/* ---- Progress banner during exercise ---- */
.top-bar{
  position:absolute; top:0; left:0; right:0; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px, 3vw, 30px);
  background:rgba(18,34,74,.92); z-index:10;
  font-family:var(--font-display); font-size:clamp(12px, 1.3vw, 18px);
}
.timer-track{flex:1; height:14px; background:rgba(255,255,255,.25); border-radius:10px; margin:0 clamp(10px, 2vw, 24px); overflow:hidden;}
.timer-fill{height:100%; background:var(--gold); width:100%; transition:width 1s linear;}
.patch-badge{
  background:var(--red-card); color:#fff; padding:6px 16px; border-radius:30px; font-size:clamp(10px, 1vw, 15px); white-space:nowrap;
}
#ballTimeLabel, #readTimeLabel, #crowdTimeLabel, #memoryTimeLabel, #silhouetteTimeLabel{color:#fff;}

/* ---- Ball canvas ---- */
#ballCanvas{position:absolute; inset:0; top:var(--topbar-h); width:100%; height:calc(100% - var(--topbar-h));
  background:#ffffff;
}
.exit-hint{
  position:absolute; bottom:clamp(8px, 2vh, 16px); left:50%; transform:translateX(-50%);
  font-size:clamp(10px, 1vw, 14px); color:#9aa5b8; font-family:var(--font-body); text-align:center; max-width:90%;
}
.ball-controls{
  position:absolute; bottom:clamp(10px, 2vh, 20px); left:50%; transform:translateX(-50%);
  z-index:20;
}

/* ---- Reading practice ---- */
.reading-body{
  margin-top:var(--topbar-h); width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:calc(100% - var(--topbar-h)); padding:0 12px;
}
.reading-word-box{
  height:min(40vh, 300px);
  width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.reading-word{
  font-family:var(--font-read); font-weight:700; color:var(--ink);
  line-height:1.2; text-align:center; width:96vw; max-width:100%;
}

/* ---- Mini-game shared score chip ---- */
.crowd-body .subtitle, .memory-body .subtitle, .silhouette-body .subtitle{
  font-size:clamp(22px, 3vw, 34px); color:#334; margin-bottom:clamp(16px, 2.6vh, 26px); font-weight:700;
}
.mini-score{
  font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.2vw,28px);
  color:var(--pitch-dark); margin-top:clamp(14px, 2.2vh, 24px);
}

/* ---- Crowding Challenge ---- */
.crowd-body{
  margin-top:var(--topbar-h); width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:calc(100% - var(--topbar-h)); padding:12px;
}
.crowd-target{
  font-family:'Arial', sans-serif; font-weight:800; font-size:clamp(90px, 16vh, 170px);
  color:var(--pitch-dark); background:#f4fff8; border:4px solid var(--gold); border-radius:28px;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; padding:clamp(16px, 3vh, 30px) clamp(50px, 6vw, 80px);
  margin-bottom:clamp(22px, 3.6vh, 36px);
}
.crowd-field{
  display:flex; flex-wrap:wrap; justify-content:center; align-content:center;
  gap:clamp(16px, 2.2vw, 30px) clamp(16px, 2.2vw, 30px); max-width:min(820px, 92vw); line-height:1.3;
}
.crowd-char{
  font-family:'Arial', sans-serif; font-weight:800; font-size:clamp(34px, 6vh, 60px);
  color:#222; cursor:pointer; padding:4px 6px; user-select:none;
}
.crowd-char.correct-flash{color:#1e8f4e;}
.crowd-char.wrong-flash{color:#e6392f;}
.crowd-char.focusable{
  /* .focusable is also used generically for buttons — reset those
     properties here so the letters stay plain inline text, not cards. */
  background:none; border:none; box-shadow:none; padding:2px 4px;
  min-width:0; border-radius:8px; font-size:inherit; cursor:pointer;
  transition:none; width:auto; display:inline;
}
.crowd-char.focusable:hover{ transform:none; box-shadow:none; }
.crowd-char.focused{
  outline:none; background:rgba(255,194,46,.35); border-radius:8px;
  box-shadow:0 0 0 3px var(--gold);
}

/* ---- Memory Match ---- */
.memory-body{
  margin-top:var(--topbar-h); width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:calc(100% - var(--topbar-h)); padding:12px;
}
.memory-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px, 1.6vw, 20px);
  width:100%; max-width:560px;
}
.memory-card{
  aspect-ratio:1/1; border-radius:16px; background:linear-gradient(180deg,var(--pitch),var(--pitch-dark));
  display:flex; align-items:center; justify-content:center; font-size:clamp(30px, 5vw, 54px);
  cursor:pointer; box-shadow:0 4px 10px rgba(12,31,20,.24); border:4px solid transparent;
  transition:transform .15s ease;
}
.memory-card.focusable{
  /* .focusable is also used generically for buttons — reset those
     properties here (higher specificity than .focusable alone, so this
     always wins regardless of stylesheet order). */
  padding:0; min-width:0; width:auto;
}
.memory-card.flipped{ background:#fff; border-color:var(--gold); }
.memory-card.matched{ background:#e3ffe6; border-color:#1e8f4e; opacity:.75; cursor:default; }
.memory-card.focused{ outline:none; border-color:var(--sky-blue); transform:translateY(-2px); box-shadow:0 4px 10px rgba(12,31,20,.24); }

/* ---- Silhouette Guess ---- */
.silhouette-body{
  margin-top:var(--topbar-h); width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:calc(100% - var(--topbar-h)); padding:12px;
}
.silhouette-stage{
  font-size:clamp(120px, 30vh, 300px); line-height:1; margin-bottom:clamp(20px, 3vh, 32px);
  filter:blur(18px) brightness(0.2); transition:filter linear;
}
.silhouette-stage.correct-flash{ filter:blur(0) brightness(1) drop-shadow(0 0 12px rgba(30,143,78,.6)); }
.silhouette-stage.wrong-flash{ filter:blur(0) brightness(1) drop-shadow(0 0 12px rgba(230,57,47,.6)); }
#silhouetteOptions{
  gap:clamp(24px, 3.6vw, 46px);
  justify-content:center;
  width:100%;
}
.silhouette-option{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:clamp(20px, 2.2vw, 28px);
  padding:clamp(18px, 2.6vh, 30px) clamp(20px, 2.8vw, 36px);
  min-width:clamp(120px, 12vw, 170px);
}
.silhouette-option .icon{ margin-bottom:0; font-size:clamp(40px, 5vw, 64px); }
.dots{display:flex; gap:10px; margin-top:8px;}
.dot{width:11px; height:11px; border-radius:50%; background:#dfe6ef;}
.dot.on{background:var(--sky-blue);}

/* ---- Stars & reward ---- */
.stars{font-size:clamp(28px, 5vw, 48px); margin:10px 0;}
.star{opacity:.25; transition:opacity .3s, transform .3s;}
.star.won{opacity:1; transform:scale(1.15);}
.confetti{position:absolute; top:-20px; width:12px; height:18px; border-radius:3px; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(400deg); opacity:.2;}}
.badge-chip{
  background:rgba(255,255,255,.9); border-radius:16px; padding:8px 16px; font-family:var(--font-display);
  font-size:clamp(11px,1.1vw,15px); margin:3px; color:var(--pitch-dark); font-weight:700;
}
.streak-line{font-family:var(--font-display); font-size:clamp(13px,1.5vw,20px); color:var(--gold); margin-bottom:8px; font-weight:700;}
.screen.white .streak-line, .screen.white .badge-chip{color:var(--pitch-dark);}

/* ---- Settings controls ---- */
.slider-row{display:flex; align-items:center; gap:16px; font-size:clamp(13px, 1.4vw, 18px); font-family:var(--font-body); width:min(480px, 82vw); margin-bottom:clamp(10px, 1.6vh, 18px); color:#fff;}
input[type=range]{flex:1; height:10px; accent-color:var(--gold);}
input[type=range]:focus{outline:3px solid var(--gold);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:clamp(13px, 1.4vw, 18px); font-family:var(--font-body); width:min(480px, 82vw); margin-bottom:clamp(8px, 1.3vh, 14px); background:rgba(255,255,255,.94); padding:clamp(8px, 1.3vh, 12px) clamp(12px, 1.8vw, 20px); border-radius:14px; color:var(--ink);}
.toggle-switch{position:relative; width:58px; height:30px; border-radius:20px; background:#dfe6ef; cursor:pointer; border:none; flex-shrink:0; transition:background .2s ease;}
.toggle-switch.on{background:var(--pitch);}
.toggle-switch::after{content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .2s ease; box-shadow:0 2px 4px rgba(0,0,0,.2);}
.toggle-switch.on::after{transform:translateX(28px);}
.toggle-switch:focus-visible{outline:3px solid var(--gold);}

/* ---- Ball Collection (locker) ---- */
.locker-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(8px, 1.2vw, 16px); width:100%; max-width:100%;}
.locker-item{
  background:#fff; border-radius:14px; padding:clamp(8px,1.4vh,14px) 8px; display:flex; flex-direction:column; align-items:center; gap:5px;
  border:2px solid rgba(12,31,20,.08); cursor:pointer; box-shadow:0 2px 8px rgba(12,31,20,.12); font-family:var(--font-display); font-size:clamp(10px,1vw,13px);
  min-width:0; transition:transform .12s ease, box-shadow .12s ease;
}
.locker-item:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(12,31,20,.16);}
.locker-item.selected{border-color:var(--gold); box-shadow:0 4px 12px rgba(255,194,46,.3);}
.locker-item.focused{border-color:var(--sky-blue); transform:translateY(-2px);}
.locker-item.locked{opacity:.42; cursor:not-allowed;}
.locker-item canvas{width:clamp(40px,4.6vw,60px); height:clamp(40px,4.6vw,60px);}
.locker-lock{font-size:clamp(16px,2vw,24px);}
.locker-req{font-size:clamp(9px,0.9vw,11px); color:#8a97ab;}
.locker-hero-image{
  width:100%; max-height:min(70vh, 420px); object-fit:contain; object-position:left bottom;
  margin-bottom:14px; border-radius:16px;
}
#lockerInfoPanel{display:flex; flex-direction:column;}

/* ---- Achievements ---- */
.achv-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(10px, 1.6vw, 20px); width:100%; max-width:820px;}
.achv-badge{
  background:#fff; border-radius:16px; padding:clamp(12px, 1.8vh, 18px) 8px; text-align:center;
  border:2px solid rgba(12,31,20,.08); box-shadow:0 2px 8px rgba(12,31,20,.12);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.achv-badge .achv-icon{font-size:clamp(26px, 3vw, 38px);}
.achv-badge .achv-label{font-family:var(--font-display); font-weight:700; font-size:clamp(10px, 1vw, 13px); color:var(--ink);}
.achv-badge.locked{opacity:.35;}
.achv-badge.earned{border-color:var(--gold); box-shadow:0 4px 12px rgba(255,194,46,.3);}

/* ---- Weekly report ---- */
.report-chart{display:flex; align-items:flex-end; gap:clamp(6px, 1.2vw, 16px); height:clamp(90px, 22vh, 180px); margin:6px 0; padding:0 4px; width:100%;}
.report-bar-wrap{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; flex:1; min-width:0;}
.report-bar{width:70%; max-width:34px; background:linear-gradient(180deg,var(--sky-blue),#1c7fd0); border-radius:10px 10px 4px 4px; min-height:4px; transition:height .5s ease;}
.report-bar.today{background:linear-gradient(180deg,var(--gold),var(--gold-deep));}
.report-day-label{font-family:var(--font-display); font-size:clamp(10px,1vw,13px); color:#fff;}
.report-min-label{font-family:var(--font-display); font-size:clamp(9px,0.9vw,12px); color:rgba(255,255,255,.7);}
.report-stats{display:flex; gap:clamp(8px,1.6vw,20px); margin-top:10px; font-family:var(--font-display); flex-wrap:wrap;}
.report-stat{background:#fff; border-radius:14px; padding:clamp(8px,1.4vh,12px) clamp(12px,1.8vw,20px); box-shadow:0 4px 12px rgba(0,0,0,.18);}
.report-stat b{display:block; font-size:clamp(18px,2.2vw,26px); color:var(--pitch-dark);}
.report-stat span{font-size:clamp(9px,0.9vw,12px); color:#8a97ab;}

/* ---- Onboarding ---- */
.onb-steps{display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px, 1.4vw, 16px); width:100%; text-align:left;}
.onb-step{background:#fff; border-radius:14px; padding:clamp(8px, 1.4vh, 16px) clamp(12px, 1.8vw, 20px); display:flex; gap:14px; align-items:flex-start; box-shadow:0 4px 12px rgba(0,0,0,.12);}
.onb-num{
  font-family:var(--font-display); font-weight:700; background:var(--pitch); color:#fff; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px;
}
.onb-step p{margin:0; font-size:clamp(11px, 1.2vw, 15px); color:#334;}

/* ---- Eye Test (Snellen-style vision chart, one line at a time) ---- */
.screen.pure-white{background:#ffffff;}
.eyetest-body{
  margin-top:var(--topbar-h); width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:calc(100% - var(--topbar-h)); padding:clamp(6px,1.4vh,14px) 12px; width:100%;
}
.eyetest-body .subtitle{color:#556; text-align:center; margin-bottom:clamp(6px,1.2vh,12px);}
.eyetest-progress{
  font-family:var(--font-body); font-weight:600; font-size:clamp(10px,1vw,13px);
  color:#9aa5b8; margin-bottom:clamp(8px,1.6vh,16px);
}
/* Fixed-height stage for the line — its height never changes no matter
   how small or large the text gets, so the buttons below never shift. */
.eyetest-line-box{
  height:min(46vh, 340px);
  width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.eyetest-line{
  font-family:'Arial', sans-serif; font-weight:800; letter-spacing:.32em;
  color:#0c1f14; text-align:center; line-height:1; white-space:nowrap;
  width:96vw; max-width:100%;
}
.eyetest-controls{margin:clamp(14px, 2.4vh, 22px) 0 clamp(10px, 1.8vh, 16px);}
.unlock-toast{
  background:linear-gradient(90deg,#fff8e6,#fff); border:3px solid var(--gold); border-radius:16px;
  padding:10px 22px; font-family:var(--font-display); font-size:clamp(11px,1.2vw,16px); margin-bottom:14px; display:none;
}
.unlock-toast.show{display:block;}
.exit-toast{
  position:absolute; bottom:clamp(14px, 4vh, 40px); left:50%; transform:translateX(-50%);
  background:rgba(12,31,20,.94); color:#fff; font-family:var(--font-display); font-size:clamp(13px, 1.4vw, 18px);
  padding:12px 26px; border-radius:16px; z-index:1200; max-width:90%; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.exit-toast.show{opacity:1;}

/* ---- Mode hint on exercise screens ---- */
.mode-hint{
  position:absolute; top:calc(var(--topbar-h) + 10px); left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.94); padding:7px 20px; border-radius:30px; font-family:var(--font-display); font-size:clamp(11px, 1.1vw, 15px);
  color:var(--pitch-dark); z-index:9; max-width:88%; text-align:center;
}
.anaglyph-note{color:var(--red-card); font-weight:700;}

.fb-app-wrapper .watermark{
  position:absolute; bottom:12px; right:20px; font-size:12px;
  color:rgba(255,255,255,.55); font-family:var(--font-body); letter-spacing:.5px;
  z-index:2; pointer-events:none;
}
.screen.white ~ .watermark, .screen-white .watermark{color:#8a97ab;}

/* ---- Calm mode ---- */
.fb-app-wrapper.calm .mascot, .fb-app-wrapper.calm .buddy-ball{animation:none;}
.fb-app-wrapper.calm .mascot-celebrate{animation:none;}
.fb-app-wrapper.calm .confetti{animation-duration:4.5s !important;}
@keyframes spinCelebrate{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
.mascot-celebrate{animation:spinCelebrate 1.4s ease-in-out;}

/* =========================================================
   Portrait / narrow fallback (phones, small tablets) — stack
   the two panels vertically instead of side-by-side.
   ========================================================= */
@media (max-width: 900px), (max-aspect-ratio: 4/5){
  .screen-inner{flex-direction:column; justify-content:center; text-align:center;}
  .panel-info{flex:none; text-align:center; width:100%;}
  .panel-main{flex:none; width:100%;}
  .panel-main.stack-left{align-items:center; text-align:center;}
  .tile-grid{max-width:420px; grid-template-columns:repeat(2, 1fr);}
  .profile-hero{display:none;}
  .locker-grid{grid-template-columns:repeat(3, 1fr);}
  .exercise-grid{grid-template-columns:repeat(2, 1fr);}
  .onb-steps{grid-template-columns:1fr;}
}
@media (max-height: 560px){
  .eyebrow{display:none;}
  h1.title{font-size:clamp(18px, 3.6vw, 30px); margin-bottom:4px;}
  p.subtitle{font-size:clamp(11px, 1.4vw, 15px); margin-bottom:8px;}
  .screen{padding:8px 16px;}
}