:root {
  --sky:#e8f4fd; --blue:#2563eb; --blue-dark:#1d4ed8;
  --green:#16a34a; --green-light:#bbf7d0;
  --yellow:#f59e0b; --yellow-light:#fef3c7;
  --orange:#f97316;
  --red:#dc2626; --red-light:#fee2e2;
  --purple:#7c3aed; --purple-light:#ede9fe;
  --white:#ffffff;
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0;
  --gray-500:#64748b; --gray-700:#334155; --gray-900:#0f172a;
  --radius:20px;
  --shadow:0 4px 24px rgba(0,0,0,.10);
  --shadow-lg:0 8px 40px rgba(0,0,0,.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Nunito',sans-serif;background:linear-gradient(135deg,#dbeafe 0%,#ede9fe 50%,#fce7f3 100%);min-height:100vh;color:var(--gray-900);}

/* ── FLUID SCALE ──────────────────────────────────────────────
   All student-facing sizes use clamp(min, fluid, max).
   vmin = smaller of vw/vh — perfect for both orientations.
   Base reference: 1vmin ≈ 8px on a 800px screen.
───────────────────────────────────────────────────────────── */
.screen{display:none;min-height:100vh;min-height:100dvh;}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,2vmin,32px);}
#dashScreen.active,#adminScreen.active{justify-content:flex-start;padding-top:clamp(12px,2vmin,24px);}
#practiceScreen.active{padding:clamp(6px,1vmin,12px) clamp(8px,1.5vmin,16px);justify-content:flex-start;}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:clamp(20px,4vmin,48px) clamp(20px,5vmin,56px);
  width:min(96vw,560px);
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes popIn{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes excitedBounce{
  0%   { transform: scaleX(1)   scaleY(1)    translateY(0); }
  10%  { transform: scaleX(.95) scaleY(.92)  translateY(0); }
  20%  { transform: scaleX(.92) scaleY(1.08) translateY(-18%); }
  35%  { transform: scaleX(1)   scaleY(1)    translateY(-38%); }
  50%  { transform: scaleX(.96) scaleY(1.06) translateY(-20%); }
  65%  { transform: scaleX(1)   scaleY(1)    translateY(-10%); }
  75%  { transform: scaleX(1.06) scaleY(.94) translateY(0); }
  85%  { transform: scaleX(.98) scaleY(1.02) translateY(-5%); }
  95%  { transform: scaleX(1.02) scaleY(.98) translateY(0); }
  100% { transform: scaleX(1)   scaleY(1)    translateY(0); }
}
.mascot-bounce {
  animation: excitedBounce 1.1s cubic-bezier(.36,.07,.19,.97) infinite;
  animation-delay: 0.5s;
  transform-origin: bottom center;
  display: block;
}
.logo{font-family:'Baloo 2',cursive;font-size:clamp(1.8rem,5vmin,3.2rem);font-weight:800;color:var(--blue);text-align:center;margin-bottom:.3em;}
.logo span{color:var(--yellow);}
.subtitle{text-align:center;color:var(--gray-500);font-size:clamp(.85rem,2.2vmin,1.1rem);margin-bottom:clamp(16px,3vmin,32px);font-weight:600;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:none;border-radius:14px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:clamp(.9rem,2.4vmin,1.2rem);
  cursor:pointer;transition:transform .15s,box-shadow .15s;
  padding:clamp(10px,1.8vmin,18px) clamp(16px,3vmin,32px);
  width:100%;margin-top:.6em;}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--blue);color:white;}
.btn-green{background:var(--green);color:white;}
.btn-purple{background:var(--purple);color:white;}
.btn-orange{background:var(--orange);color:white;}
.btn-ghost{background:var(--gray-100);color:var(--gray-700);}
.input{width:100%;padding:clamp(10px,1.6vmin,16px);border:2.5px solid var(--gray-200);border-radius:12px;
  font-family:'Nunito',sans-serif;font-size:clamp(.85rem,2vmin,1.05rem);font-weight:700;
  margin-top:.5em;outline:none;transition:border-color .2s;background:var(--gray-50);}
.input:focus{border-color:var(--blue);background:white;}
label{display:block;font-weight:800;font-size:clamp(.78rem,1.8vmin,.95rem);color:var(--gray-700);margin-top:1em;}

/* STUDENT GRID */
.student-grid{display:grid;width:100%;gap:clamp(8px,1.5vmin,16px);margin:clamp(8px,1.5vmin,16px) 0;}
.student-btn{background:var(--gray-50);border:2.5px solid var(--gray-200);border-radius:14px;
  padding:clamp(8px,1.5vmin,16px) clamp(4px,1vmin,10px);
  cursor:pointer;text-align:center;font-family:'Nunito',sans-serif;font-weight:800;
  font-size:clamp(.75rem,2vmin,1.1rem);color:var(--gray-700);transition:all .15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.student-btn:hover{background:var(--blue);color:white;border-color:var(--blue);transform:scale(1.04);}
.student-btn .avatar{font-size:clamp(1.4rem,4vmin,2.8rem);display:block;margin-bottom:.2em;}

/* PIN */
.pin-dots{display:flex;justify-content:center;gap:clamp(10px,2.5vmin,20px);margin:clamp(12px,2.5vmin,24px) 0;}
.pin-dot{width:clamp(14px,3vmin,24px);height:clamp(14px,3vmin,24px);border-radius:50%;background:var(--gray-200);transition:background .2s;}
.pin-dot.filled{background:var(--blue);}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.5vmin,14px);margin-top:.6em;}
.numpad-btn{background:var(--gray-100);border:none;border-radius:12px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  padding:clamp(12px,2.5vmin,22px);
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:clamp(1.1rem,3.5vmin,2rem);cursor:pointer;transition:all .15s;}
.numpad-btn:hover{background:var(--blue);color:white;transform:scale(1.05);}
.numpad-btn:focus{outline:none;background:var(--gray-100);color:var(--gray-900);}
.numpad-btn:active{background:var(--blue);color:white;transform:scale(1.05);}
.numpad-btn.del{color:var(--red);}
.numpad-btn.del:hover{background:var(--red);color:white;}
.numpad-btn.del:focus{outline:none;background:var(--gray-100);color:var(--red);}
/* Prevent sticky blue focus on touch devices */
@media(hover:none){
  .numpad-btn:hover{background:var(--gray-100);color:var(--gray-900);transform:none;}
  .numpad-btn:active{background:var(--blue);color:white;transform:scale(1.05);}
  .numpad-btn.del:hover{background:var(--gray-100);color:var(--red);}
  .numpad-btn.del:active{background:var(--red);color:white;}
}

/* OPERATION SELECT */
.ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vmin,20px);margin:.5em 0;}
.op-btn{border:3px solid var(--gray-200);border-radius:16px;
  padding:clamp(14px,3vmin,28px);
  cursor:pointer;text-align:center;font-family:'Baloo 2',cursive;font-weight:700;
  font-size:clamp(1.3rem,4vmin,2.2rem);background:var(--gray-50);transition:all .2s;}
.op-btn:hover{background:var(--blue);color:white;border-color:var(--blue);transform:scale(1.04);}
.op-btn .op-name{font-family:'Nunito',sans-serif;font-size:clamp(.7rem,1.6vmin,1rem);font-weight:800;display:block;margin-top:.2em;}

/* PRACTICE LAYOUT — fills full viewport */
.progress-bar-wrap{width:100%;height:clamp(6px,0.9vmin,12px);background:rgba(255,255,255,.5);border-radius:99px;overflow:hidden;margin-bottom:clamp(4px,0.8vmin,10px);}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),#4ade80);border-radius:99px;}
.timer-ring{position:relative;width:clamp(44px,7vmin,80px);height:clamp(44px,7vmin,80px);margin:0 auto clamp(4px,0.8vmin,8px);}
.timer-ring svg{transform:rotate(-90deg);width:100%;height:100%;}
.timer-ring circle{fill:none;stroke-width:7;}
.timer-track{stroke:rgba(255,255,255,.3);}
.timer-fill{stroke:var(--yellow);stroke-linecap:round;transition:stroke-dashoffset .9s linear;}
.timer-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',cursive;font-size:clamp(.9rem,2.2vmin,1.6rem);font-weight:700;color:var(--gray-700);}
.equation-card{background:white;border-radius:clamp(12px,2vmin,24px);box-shadow:var(--shadow-lg);
  padding:clamp(12px,2vmin,24px);
  text-align:center;width:100%;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.equation-display{font-family:'Baloo 2',cursive;
  font-size:clamp(3rem,14vmin,10rem);
  font-weight:800;color:var(--gray-900);letter-spacing:.05em;
  margin-bottom:.2em;display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2vmin,24px);flex-wrap:wrap;}
/* Hide browser spinner arrows on number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
.answer-input{width:clamp(100px,22vmin,240px);height:clamp(70px,16vmin,160px);
  border:clamp(3px,0.5vmin,6px) solid var(--blue);border-radius:clamp(10px,2vmin,20px);
  text-align:center;font-family:'Baloo 2',cursive;
  font-size:clamp(2.2rem,11vmin,8rem);font-weight:800;color:var(--blue);
  outline:none;background:var(--sky);transition:border-color .2s,background .2s;}
.answer-input:focus{border-color:var(--purple);}
.answer-input.correct{border-color:var(--green);background:var(--green-light);color:var(--green);}
.answer-input.wrong{border-color:var(--red);background:var(--red-light);color:var(--red);animation:shake .4s;}
.answer-input.timeout{border-color:var(--orange);background:#fff7ed;color:var(--orange);}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.feedback-emoji{font-size:clamp(2rem,5vmin,4rem);position:absolute;top:clamp(8px,1.5vmin,18px);right:clamp(10px,2vmin,22px);}
.stat-row{display:flex;justify-content:center;gap:clamp(10px,2vmin,24px);margin:clamp(4px,0.8vmin,10px) 0 0;}
.stat-pill{background:rgba(255,255,255,.8);border-radius:99px;
  padding:clamp(4px,1vmin,8px) clamp(10px,2vmin,20px);
  font-weight:800;font-size:clamp(.8rem,2vmin,1.1rem);color:var(--gray-700);display:flex;align-items:center;gap:.4em;}

/* ═══════════════════════════════
   TEN FRAME OVERLAY — full-screen
═══════════════════════════════ */
.tf-overlay{
  display:none;
  position:fixed;inset:0;
  background:linear-gradient(160deg,#fffbeb 0%,#fef3c7 100%);
  flex-direction:column;align-items:center;justify-content:flex-start;
  gap:clamp(3px,0.6vmin,8px);z-index:200;
  padding:clamp(6px,1vmin,14px) clamp(10px,1.5vmin,20px);
  overflow-y:auto;
  box-sizing:border-box;
}
.tf-overlay.visible{display:flex;}

.tf-stage-badge{
  font-family:'Baloo 2',cursive;
  font-size:clamp(.75rem,1.8vmin,1.2rem);font-weight:700;
  color:white;background:var(--orange);
  border-radius:99px;padding:clamp(3px,0.5vmin,6px) clamp(10px,2vmin,22px);
}
.tf-title{
  font-family:'Baloo 2',cursive;
  font-size:clamp(1.6rem,4.5vmin,3.2rem);
  font-weight:800;color:var(--gray-700);text-align:center;line-height:1.1;max-width:95vw;
}
.tf-hint{
  font-size:clamp(.85rem,1.8vmin,1.3rem);
  font-weight:700;color:var(--gray-500);text-align:center;max-width:90vw;
}
.tf-hint.good{color:var(--green);}
.tf-hint.warn{color:var(--orange);}
.tf-hint.error{color:var(--red);animation:shake .35s;}

/* Ten frame grid */
.tf-frames-row{display:flex;gap:clamp(6px,1.5vmin,18px);align-items:flex-start;justify-content:center;flex-wrap:wrap;margin:clamp(2px,0.5vmin,6px) 0;}
.ten-frame{
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);
  gap:clamp(3px,0.6vmin,7px);padding:clamp(5px,1vmin,12px);
  border:clamp(2px,0.4vmin,4px) solid var(--gray-700);border-radius:clamp(8px,1.2vmin,14px);
  background:white;
  box-shadow:0 4px 24px rgba(0,0,0,.10);
}
.tf-cell{
  width:clamp(32px,5.5vmin,60px);height:clamp(32px,5.5vmin,60px);
  border-radius:50%;
  border:clamp(2px,0.3vmin,3px) solid var(--gray-200);
  background:white;
  transition:background .25s,border-color .25s,transform .2s;
  cursor:default;
  display:flex;align-items:center;justify-content:center;
}
/* Stage colours */
.tf-cell.filled-a{background:#3b82f6;border-color:#1d4ed8;}
.tf-cell.filled-b{background:#f97316;border-color:#ea580c;}
.tf-cell.filled-sum{background:#16a34a;border-color:#14532d;}
.tf-cell.tappable{cursor:pointer;border-color:#94a3b8;background:#f8fafc;}
.tf-cell.tappable:hover{background:#e0f2fe;border-color:#38bdf8;transform:scale(1.12);}
.tf-cell.tapped{background:#f97316;border-color:#ea580c;cursor:pointer;}
.tf-cell.tapped:hover{background:#fb923c;}
.tf-cell.pop{animation:cellPop .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes cellPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes tfShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* Inline answer input on the overlay */
.tf-answer-row{
  display:flex;align-items:center;gap:clamp(6px,1.2vmin,14px);margin-top:clamp(4px,0.8vmin,8px);
  background:white;border-radius:clamp(10px,1.8vmin,18px);
  padding:clamp(6px,1.2vmin,14px) clamp(10px,2vmin,20px);
  box-shadow:0 4px 24px rgba(0,0,0,.12);
}
.tf-answer-input{
  width:clamp(60px,10vmin,110px);height:clamp(50px,9vmin,90px);
  border:clamp(2px,0.4vmin,4px) solid var(--blue);border-radius:clamp(8px,1.5vmin,14px);
  text-align:center;
  font-family:'Baloo 2',cursive;font-size:clamp(1.6rem,5vmin,4rem);font-weight:800;color:var(--blue);
  outline:none;background:var(--sky);
  transition:border-color .2s,background .2s;
}
.tf-answer-input:focus{border-color:var(--purple);}
.tf-answer-input.correct{border-color:var(--green);background:var(--green-light);color:var(--green);}
.tf-answer-input.wrong{border-color:var(--red);background:var(--red-light);color:var(--red);animation:shake .35s;}
.tf-submit-btn{
  width:clamp(44px,8vmin,72px);height:clamp(44px,8vmin,72px);
  border-radius:clamp(10px,1.5vmin,16px);border:none;
  background:var(--green);color:white;
  font-size:clamp(1.2rem,3.5vmin,2.4rem);cursor:pointer;
  transition:transform .15s,box-shadow .15s;font-weight:800;
}
.tf-submit-btn:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(22,163,74,.4);}
.tf-answer-feedback{
  font-family:'Baloo 2',cursive;
  font-size:clamp(.9rem,2vmin,1.4rem);font-weight:700;
  text-align:center;
}

/* Auto-advance bar */
.auto-bar-wrap{width:min(90vw,500px);height:clamp(6px,1vmin,12px);background:var(--gray-200);border-radius:99px;overflow:hidden;display:none;}
.auto-bar-fill{height:100%;width:100%;background:var(--orange);border-radius:99px;transition:width linear;}

.tf-next-btn{
  padding:clamp(12px,2.2vmin,20px) clamp(32px,6vmin,60px);
  background:var(--orange);color:white;
  border:none;border-radius:clamp(14px,2.5vmin,22px);
  font-family:'Nunito',sans-serif;font-weight:800;
  font-size:clamp(1.2rem,3vmin,2rem);cursor:pointer;margin-top:4px;
  transition:transform .15s,box-shadow .15s;display:none;
}
.tf-next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.4);}

/* RESULTS */
.trophy-area{text-align:center;margin-bottom:12px;}
.trophy-big{font-size:5rem;}
.stars-row{font-size:2rem;letter-spacing:4px;}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;}
.result-tile{border-radius:14px;padding:14px;text-align:center;}
.result-tile .num{font-family:'Baloo 2',cursive;font-size:2rem;font-weight:700;}
.result-tile .lbl{font-size:.78rem;font-weight:800;color:var(--gray-500);}
.tile-green{background:var(--green-light);}
.tile-red{background:var(--red-light);}
.tile-yellow{background:var(--yellow-light);}
.tile-purple{background:var(--purple-light);}

/* DASHBOARD */
.dash-wrap{width:100%;max-width:800px;margin:0 auto;}
.dash-header{background:white;border-radius:var(--radius);padding:20px 28px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);}
.dash-title{font-family:'Baloo 2',cursive;font-size:1.5rem;color:var(--blue);font-weight:800;}
.tab-bar{display:flex;gap:8px;margin-bottom:16px;}
.tab-btn{flex:1;padding:10px;border:none;border-radius:12px;background:rgba(255,255,255,.5);font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;cursor:pointer;transition:all .2s;color:var(--gray-700);}
.tab-btn.active{background:var(--blue);color:white;}
.tab-content{display:none;}
.tab-content.active{display:block;}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.dash-stat{background:white;border-radius:16px;padding:18px;text-align:center;box-shadow:var(--shadow);}
.dash-stat .big{font-family:'Baloo 2',cursive;font-size:2rem;font-weight:700;color:var(--blue);}
.dash-stat .lbl{font-size:.78rem;font-weight:800;color:var(--gray-500);}
.student-table-wrap{background:white;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:.8rem;font-weight:800;color:var(--gray-500);padding:8px 12px;border-bottom:2px solid var(--gray-200);}
td{padding:10px 12px;border-bottom:1px solid var(--gray-100);font-weight:700;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:800;}
.badge-green{background:var(--green-light);color:var(--green);}
.badge-yellow{background:var(--yellow-light);color:#92400e;}
.badge-red{background:var(--red-light);color:var(--red);}
.badge-mastery{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:2px solid #f59e0b;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.mini-bar-wrap{background:var(--gray-100);border-radius:99px;height:8px;width:70px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:6px;}
.mini-bar{height:100%;border-radius:99px;}
.student-list-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--gray-50);border-radius:12px;margin-top:8px;}
.student-list-item .name-info{display:flex;align-items:center;gap:10px;font-weight:700;}
.del-btn{background:none;border:none;cursor:pointer;color:var(--red);font-size:1.2rem;padding:4px;}
.range-label{display:flex;justify-content:space-between;align-items:center;}
input[type=range]{width:100%;margin-top:8px;accent-color:var(--blue);}
.divider{height:1px;background:var(--gray-200);margin:20px 0;}
.center{text-align:center;}
.text-sm{font-size:.85rem;color:var(--gray-500);font-weight:600;}

/* STAGE LEGEND in dashboard */
.stage-legend{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:14px;background:var(--yellow-light);border-radius:12px;border-left:4px solid var(--yellow);}
.stage-legend-row{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--gray-700);}
.stage-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}

/* PRINT */
@media print{body>*{display:none!important;}#printReport{display:block!important;}}
#printReport{display:none;font-family:'Nunito',sans-serif;padding:32px;max-width:800px;margin:0 auto;}
.print-header{text-align:center;border-bottom:3px solid #2563eb;padding-bottom:16px;margin-bottom:24px;}
.print-title{font-family:'Baloo 2',cursive;font-size:2rem;font-weight:800;color:#2563eb;}
.print-subtitle{color:#64748b;font-size:.9rem;font-weight:700;margin-top:4px;}
.print-student{page-break-inside:avoid;margin-bottom:28px;border:2px solid #e2e8f0;border-radius:12px;padding:16px 20px;}
.print-student-name{font-size:1.15rem;font-weight:800;margin-bottom:12px;color:#1d4ed8;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.print-ops-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.print-op-box{border:2px solid #e2e8f0;border-radius:10px;padding:12px;text-align:center;}
.print-op-title{font-weight:800;font-size:.82rem;color:#64748b;margin-bottom:6px;}
.print-op-stat{font-family:'Baloo 2',cursive;font-size:1.5rem;font-weight:700;color:#0f172a;}
.print-op-sub{font-size:.72rem;color:#64748b;font-weight:700;}
.print-bar-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.print-bar-bg{flex:1;height:10px;background:#f1f5f9;border-radius:99px;overflow:hidden;}
.print-bar-fill{height:100%;border-radius:99px;}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--gray-900);color:white;padding:12px 24px;border-radius:99px;font-weight:800;font-size:.95rem;transition:transform .35s cubic-bezier(.34,1.56,.64,1);z-index:999;white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* PLACEMENT TEST */
.placement-op-row{display:flex;gap:10px;margin:6px 0;align-items:center;}
.placement-op-label{font-weight:800;font-size:.9rem;width:110px;color:var(--gray-700);}
.placement-op-bar-bg{flex:1;height:12px;background:var(--gray-100);border-radius:99px;overflow:hidden;}
.placement-op-bar-fill{height:100%;border-radius:99px;transition:width .6s ease;}
.placement-op-pct{font-weight:800;font-size:.82rem;color:var(--gray-500);width:36px;text-align:right;}
.placement-mastered-badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:800;background:var(--green-light);color:var(--green);margin-left:6px;}
.placement-needs-badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:800;background:var(--yellow-light);color:#92400e;margin-left:6px;}

@media(max-width:520px){.card{padding:24px 20px;}.equation-display{font-size:2.4rem;}.dash-grid{grid-template-columns:1fr 1fr;}.ten-frame{gap:6px;padding:8px;}.tf-cell{width:48px;height:48px;}.tf-title{font-size:2.4rem;}.tf-hint{font-size:1.1rem;}.tf-answer-input{width:100px;height:72px;font-size:2.5rem;}.tf-submit-btn{width:68px;height:68px;font-size:2rem;}}

/* ── HOME SCREEN MASCOT ─────────────────────────────────────── */
.home-mascot{
  position:fixed;
  bottom:0;left:0;
  width:clamp(280px,42vmin,560px);
  height:auto;
  pointer-events:none;
  z-index:10;
  animation:mascotFloat 3s ease-in-out infinite;
}
@keyframes mascotFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-18px);}
}

/* ── INLINE NUMPAD (replaces iOS keyboard) ───────────────────── */
.inline-numpad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(4px,0.8vmin,8px);
  width:min(100%,300px);
  margin:clamp(4px,0.8vmin,8px) auto 0;
}
/* Smaller numpad inside the ten-frame overlay */
.tf-overlay .inline-numpad{
  width:min(100%,240px);
  gap:clamp(3px,0.6vmin,6px);
}
.tf-overlay .numpad-btn{
  padding:clamp(8px,1.5vmin,14px);
  font-size:clamp(1rem,2.8vmin,1.6rem);
}
/* answer-input as display div (no longer a real input) */
div.answer-input{
  display:flex;align-items:center;justify-content:center;
  cursor:default;
  user-select:none;
}
div.answer-input.correct{border-color:var(--green);background:var(--green-light);color:var(--green);}
div.answer-input.wrong{border-color:var(--red);background:var(--red-light);color:var(--red);animation:shake .4s;}
div.answer-input.timeout{border-color:var(--orange);background:#fff7ed;color:var(--orange);}
div.tf-answer-input{
  display:flex;align-items:center;justify-content:center;
  cursor:default;user-select:none;
}
div.tf-answer-input.correct{border-color:var(--green);background:var(--green-light);color:var(--green);}
div.tf-answer-input.wrong{border-color:var(--red);background:var(--red-light);color:var(--red);animation:shake .35s;}