@font-face{
  font-family:"VazirLike";
  src:url("../fonts/NotoSansArabicUI-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"VazirLike";
  src:url("../fonts/NotoSansArabicUI-Bold.ttf") format("truetype");
  font-weight:700 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#f5f7ff;
  --ink:#172033;
  --muted:#667085;
  --primary:#356bff;
  --primary-dark:#234de0;
  --accent:#ff9f1c;
  --green:#13b981;
  --pink:#ff6b9d;
  --card:#ffffffcc;
  --border:#dbe4ff;
  --shadow:0 24px 70px rgba(28,44,89,.15);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"VazirLike","Vazirmatn",Tahoma,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(135deg,#f7fbff 0%,#fff8ef 48%,#f1fff8 100%);
  min-height:100vh;
  overflow-x:hidden;
}
button,input{font-family:inherit}
input[type="number"]{direction:ltr}
.stage-bg{position:fixed;inset:0;overflow:hidden;z-index:-1}
.blob{position:absolute;border-radius:999px;filter:blur(8px);opacity:.45;animation:float 9s ease-in-out infinite alternate}
.b1{width:260px;height:260px;background:#b8d7ff;top:8%;right:4%}
.b2{width:320px;height:320px;background:#ffd7a8;bottom:6%;left:1%;animation-delay:1s}
.b3{width:190px;height:190px;background:#b7f1d4;top:45%;left:22%;animation-delay:2s}
@keyframes float{to{transform:translate3d(18px,-26px,0) scale(1.07)}}
.app-header{max-width:1220px;margin:22px auto 12px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:14px}
.brand-icon{width:70px;height:70px;border-radius:22px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow);animation:bounce 2.4s infinite;overflow:hidden;padding:8px}
.brand-icon img{width:100%;height:100%;object-fit:contain}
.blend-img{mix-blend-mode:multiply;background:transparent}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.brand h1{margin:0;font-size:clamp(25px,4vw,40px);font-weight:900;letter-spacing:-.5px}
.brand p{margin:2px 0 0;color:var(--muted);font-weight:700}
.header-badge{background:#fff;border:1px solid var(--border);padding:12px 16px;border-radius:999px;font-weight:800;color:#3150a5;box-shadow:0 12px 35px rgba(40,75,160,.09);white-space:nowrap}
.app-shell{max-width:1220px;margin:0 auto;padding:12px 18px 18px;display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
.steps-panel{position:sticky;top:18px;background:#ffffffb8;border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);backdrop-filter:blur(12px);display:grid;gap:10px}
.step-tab{border:0;background:#f4f7ff;color:#34405a;border-radius:18px;padding:13px 12px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;cursor:pointer;transition:.25s ease;text-align:right}
.step-tab span{width:30px;height:30px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--primary);box-shadow:0 6px 18px rgba(65,85,130,.08)}
.step-tab:hover{transform:translateX(-3px);background:#eaf0ff}
.step-tab.active{background:linear-gradient(135deg,var(--primary),#6c8cff);color:#fff;box-shadow:0 14px 30px rgba(53,107,255,.25)}
.step-tab.active span{color:var(--primary-dark)}
.slides{min-height:620px;background:var(--card);border:1px solid rgba(219,228,255,.8);box-shadow:var(--shadow);border-radius:34px;overflow:hidden;position:relative;backdrop-filter:blur(14px)}
.slide{display:none;padding:clamp(22px,4vw,42px);min-height:620px;animation:slideIn .55s cubic-bezier(.2,.8,.2,1)}
.slide.active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.eyebrow{display:inline-flex;padding:8px 13px;border-radius:999px;background:#fff3df;color:#a05c00;font-weight:900;margin-bottom:12px}
h2{font-size:clamp(26px,4.2vw,46px);line-height:1.35;margin:0 0 12px;font-weight:900;letter-spacing:-.5px}
.lead,.hero-copy p{font-size:clamp(16px,2vw,20px);line-height:2;color:#4a556c;margin:0 0 20px;font-weight:600}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;min-height:530px}
.question-box{background:#fff;border:2px dashed #a9bfff;color:#234184;padding:18px 20px;border-radius:22px;font-size:clamp(18px,2vw,24px);font-weight:900;margin:24px 0}
.pulse-soft{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(53,107,255,0)}50%{box-shadow:0 0 0 10px rgba(53,107,255,.07)}}
.primary,.secondary{border:0;border-radius:18px;padding:14px 22px;font-size:17px;font-weight:900;cursor:pointer;transition:.25s ease}
.primary{background:linear-gradient(135deg,var(--primary),#6a8cff);color:#fff;box-shadow:0 14px 28px rgba(53,107,255,.28)}
.primary:hover,.secondary:hover{transform:translateY(-3px)}
.secondary{background:#edf2ff;color:#3150a5}
.actions{margin-top:24px;display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}
.card-visual{background:linear-gradient(180deg,#fff,#eef5ff);border:1px solid var(--border);border-radius:32px;min-height:390px;display:grid;place-items:center;box-shadow:0 18px 45px rgba(45,64,120,.12);overflow:hidden}
.road-demo{position:relative;width:min(440px,90%);height:270px;border-radius:26px;background:#dff3ff;padding:28px;overflow:hidden}
.road{height:74px;border-radius:22px;margin:22px 0;display:flex;align-items:center;justify-content:flex-end;padding:0 20px;font-weight:900;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.smooth{background:linear-gradient(90deg,#75a7ff,#3d75ed)}
.rough{background:repeating-linear-gradient(90deg,#9b7653 0 14px,#7d5c3f 14px 28px)}
.animated-car{position:absolute;width:96px;top:70px;right:18px;animation:drive 3.3s ease-in-out infinite}
@keyframes drive{0%{right:20px;transform:rotate(0)}45%{right:300px;transform:rotate(-2deg)}55%{right:300px}100%{right:20px}}
.surface-grid,.result-grid,.quiz-grid{display:grid;gap:14px;margin-top:22px}
.surface-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.surface-card{background:#fff;border:2px solid #e5ebff;border-radius:26px;padding:16px;min-height:210px;cursor:pointer;transition:.25s ease;text-align:center;color:var(--ink);box-shadow:0 12px 28px rgba(38,54,95,.08)}
.surface-card:hover,.surface-card.selected{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 18px 36px rgba(53,107,255,.18)}
.surface-card strong{display:block;font-size:20px;margin:12px 0 4px}
.surface-card small{color:var(--muted);font-weight:700}
.surface-art{display:block;height:95px;border-radius:22px;position:relative;overflow:hidden;border:1px solid #edf1ff;background-size:56px;background-repeat:no-repeat;background-position:14px center}
.surface-art::after{content:'';position:absolute;inset:auto 18px 22px auto;width:54px;height:54px;background:url('../images/car.webp') center/contain no-repeat;animation:miniDrive 2.8s infinite ease-in-out}
@keyframes miniDrive{50%{transform:translateX(-140px)}}
.smooth-art{background:linear-gradient(135deg,#cfe5ff,#7aabff)}
.cloth-art{background:repeating-linear-gradient(45deg,#ffd6e6 0 12px,#ffbdd6 12px 24px)}
.carpet-art{background:radial-gradient(circle,#fff3 1px,transparent 2px),linear-gradient(135deg,#7ccfaa,#389b72);background-size:12px 12px,100% 100%}
.sand-art{background:radial-gradient(circle,#8f6a42 1px,transparent 2px),#d0a46d;background-size:10px 10px}
.feedback,.insight,.quiz-feedback,.finish-card{margin-top:18px;background:linear-gradient(135deg,#f9fbff,#f2f7ff);border:1px solid var(--border);border-radius:22px;padding:16px 18px;font-weight:800;color:#34405a;line-height:1.9;box-shadow:0 10px 26px rgba(65,85,130,.06)}
.feedback strong,.insight strong{color:#234de0}
.quiz-feedback{position:relative;padding:20px 22px 18px}
.quiz-feedback::before{content:"";position:absolute;right:0;top:0;bottom:0;width:7px;border-radius:22px 0 0 22px;background:#c8d4ff}
.quiz-feedback .title{display:block;font-size:18px;font-weight:900;margin-bottom:8px;color:#31456a}
.quiz-feedback .answer-badge{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:6px 12px;border-radius:999px;font-weight:900;color:#fff;margin-right:6px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.quiz-feedback .answer-badge.high{background:linear-gradient(135deg,#14b86a,#0d9f5a)}
.quiz-feedback .answer-badge.low{background:linear-gradient(135deg,#3c7cff,#5f95ff)}
.quiz-feedback .reason{display:block;margin-top:8px;font-size:17px;line-height:1.9}
.quiz-feedback.low{background:linear-gradient(135deg,#f5f9ff,#eef5ff)}
.quiz-feedback.high{background:linear-gradient(135deg,#effcf5,#e5f8ef)}
.quiz-feedback.high::before{background:#18b76a}
.quiz-feedback.low::before{background:#4b7cff}
.quiz-feedback.neutral{background:linear-gradient(135deg,#f9fbff,#f2f7ff)}
.quiz-feedback.neutral::before{background:#c8d4ff}
.experiment-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:stretch;margin-top:16px}
.instruction-card{background:#fff;border:1px solid var(--border);border-radius:28px;padding:24px;box-shadow:0 14px 35px rgba(45,64,120,.09)}
ol{line-height:2.2;font-size:18px;font-weight:700;color:#34405a;padding-right:24px}
.timer{font-size:clamp(44px,7vw,76px);font-weight:900;color:var(--primary);margin-top:16px;text-align:center;direction:ltr}
.timer.running{animation:beat 1s infinite}
@keyframes beat{50%{transform:scale(1.05)}}
.lab-illustration{position:relative;min-height:360px;background:linear-gradient(180deg,#eaf7ff,#fff);border:1px solid var(--border);border-radius:28px;overflow:hidden}
.ramp{position:absolute;width:360px;height:36px;background:linear-gradient(90deg,#92b6ff,#4d77e6);border-radius:20px;right:90px;top:100px;transform:rotate(-15deg);box-shadow:0 10px 18px rgba(45,64,120,.18)}
.mini-car{position:absolute;width:116px;right:135px;top:40px;animation:roll 3s ease-in-out infinite}
@keyframes roll{45%{right:390px;top:150px;transform:rotate(-8deg)}100%{right:135px;top:40px}}
.measure-line{position:absolute;right:80px;left:80px;bottom:84px;border-top:5px dashed #ff9f1c;text-align:center;color:#a05c00;font-weight:900}.measure-line span{background:#fff;padding:6px 12px;border-radius:999px;position:relative;top:-18px}
.result-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.result-grid label{display:grid;gap:8px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:14px;font-weight:900;min-width:0}
.result-grid input{width:100%;border:2px solid #e2e9ff;border-radius:14px;padding:12px;font-size:20px;font-weight:900;text-align:center;outline:none}
.result-grid input:focus{border-color:var(--primary)}
.chart-wrap{display:grid;gap:10px;margin-top:18px}.bar-row{display:grid;grid-template-columns:115px 1fr 95px;gap:10px;align-items:center}.bar-label{font-weight:900}.bar-track{height:32px;background:#eef3ff;border-radius:999px;overflow:hidden}.bar-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#6c8cff,#13b981);transition:width .8s cubic-bezier(.2,.8,.2,1)}.bar-value{font-weight:900;color:var(--primary);font-size:15px}
.reveal-card{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start;background:#fff;border:1px solid var(--border);border-radius:30px;padding:22px;box-shadow:0 18px 42px rgba(45,64,120,.1);margin-top:15px}.reveal-card h3{font-size:clamp(24px,3vw,36px);color:var(--primary);margin:0 0 12px;font-weight:900}.reveal-card p{font-size:18px;line-height:2;color:#34405a;font-weight:700}.book-note{background:#fff8e9;border-right:5px solid var(--accent);padding:10px 14px;border-radius:12px}.book-shot{margin:0}.book-shot img{width:100%;border-radius:18px;border:1px solid #e5ebff;box-shadow:0 12px 30px rgba(0,0,0,.08)}.book-shot figcaption{text-align:center;color:var(--muted);font-weight:800;margin-top:8px}
.quiz-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.quiz-card{border:2px solid #e5ebff;background:#fff;border-radius:26px;min-height:210px;padding:18px;cursor:pointer;display:grid;place-items:center;gap:10px;font-size:18px;font-weight:900;transition:.25s ease;text-align:center}
.quiz-card img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.08));transform-origin:center center}
.quiz-card strong{display:block;line-height:1.7}
.quiz-card:hover{transform:translateY(-5px);border-color:var(--primary);box-shadow:0 18px 36px rgba(53,107,255,.12)}.quiz-card.revealed{border-color:var(--green);box-shadow:0 18px 36px rgba(19,185,129,.16)}
.site-footer{max-width:1220px;margin:4px auto 24px;padding:12px 18px;text-align:center;color:#536079;font-weight:800;line-height:1.8;font-size:14px}
@media (max-width:980px){.app-shell{grid-template-columns:1fr}.steps-panel{position:static;grid-template-columns:repeat(3,1fr)}.hero-grid,.experiment-layout,.reveal-card{grid-template-columns:1fr}.slides,.slide{min-height:auto}.header-badge{display:none}}
@media (max-width:620px){.app-header{align-items:flex-start}.brand-icon{width:54px;height:54px}.steps-panel{grid-template-columns:repeat(2,1fr);padding:10px}.step-tab{font-size:13px;padding:10px}.slide{padding:20px}.road-demo{height:240px}.animated-car{width:78px}.app-header{margin-top:12px}.site-footer{font-size:12px}.bar-row{grid-template-columns:80px 1fr 80px}.measure-line{right:30px;left:30px}.ramp{right:35px;width:280px}.mini-car{width:92px;right:90px}.quiz-card img{width:90px;height:90px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.anim-shoe{animation:shoeHop 2.1s ease-in-out infinite}
.anim-brake{animation:brakeRock 2.4s ease-in-out infinite}
.anim-suitcase{animation:suitcaseRoll 2.8s ease-in-out infinite}
.anim-skier{animation:skierGlide 2.6s ease-in-out infinite}
.car-bob{animation:carBob 2.6s ease-in-out infinite}
@keyframes shoeHop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-8px) rotate(-5deg)}70%{transform:translateY(-2px) rotate(4deg)}}
@keyframes brakeRock{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(8deg)}}
@keyframes suitcaseRoll{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}}
@keyframes skierGlide{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(-10px) rotate(-4deg)}}
@keyframes carBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* v7 refinements */
.brand p{font-weight:800}
.surface-card{min-height:250px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.surface-card img{width:100%;height:140px;object-fit:contain;border-radius:20px;background:linear-gradient(135deg,#f8fbff,#eef5ff);padding:4px;filter:drop-shadow(0 12px 18px rgba(30,45,85,.10));transition:.25s ease}
.surface-card:hover img,.surface-card.selected img{transform:scale(1.04)}
.surface-art{display:none!important}
.worksheet-callout{margin:14px 0 18px;background:linear-gradient(135deg,#fff8e9,#edf7ff);border:1px solid #dbe4ff;border-right:6px solid #ff9f1c;border-radius:20px;padding:13px 16px;font-weight:900;color:#34405a;line-height:1.8;box-shadow:0 10px 28px rgba(65,85,130,.07)}
.worksheet-callout strong{color:#234de0}
.chart-wrap{margin-top:22px}
.bar-row{grid-template-columns:120px 1fr 105px;background:#fff;border:1px solid #edf1ff;border-radius:18px;padding:10px;box-shadow:0 10px 24px rgba(65,85,130,.06)}
.bar-track{height:34px}
.result-summary{display:grid;gap:12px;background:transparent;border:0;box-shadow:none;padding:0;margin-top:18px}
.result-card{border-radius:22px;padding:16px 18px;font-weight:900;line-height:1.9;border:1px solid transparent;box-shadow:0 14px 30px rgba(65,85,130,.08)}
.result-card strong{font-size:1.08em}
.result-card.max{background:linear-gradient(135deg,#e9fff4,#f6fffb);border-color:#b9efd3;color:#0c7a46}
.result-card.max strong{color:#078448}
.result-card.min{background:linear-gradient(135deg,#fff4df,#fffaf1);border-color:#ffd99a;color:#a45a00}
.result-card.min strong{color:#bd5d00}
.teacher-layout{grid-template-columns:minmax(360px,.95fr) 1.05fr;align-items:center}
.teacher-shot{margin:0;border-radius:26px;overflow:hidden;border:1px solid #e5ebff;box-shadow:0 18px 40px rgba(45,64,120,.14);background:#fff}
.teacher-shot img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.science-text h3{font-size:clamp(23px,3vw,34px);color:var(--primary);margin:0 0 12px;font-weight:900}
.science-text p{font-size:17px;line-height:2;color:#34405a;font-weight:750;margin:0 0 12px}.science-text strong{color:#234de0}.effect-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.effect-pills span{background:linear-gradient(135deg,#eef5ff,#fff);border:1px solid var(--border);color:#3150a5;border-radius:999px;padding:9px 14px;font-weight:900}.inner-actions{margin-top:16px}.modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:24px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(12,18,34,.55);backdrop-filter:blur(6px)}.modal-card{position:relative;z-index:1;background:#fff;border-radius:28px;padding:22px;max-width:min(850px,94vw);max-height:90vh;overflow:auto;box-shadow:0 28px 90px rgba(0,0,0,.28);border:1px solid #e5ebff}.modal-card h3{margin:0 0 14px;font-size:24px;color:#172033}.modal-card img{width:100%;border-radius:18px;border:1px solid #e5ebff}.modal-close{position:absolute;top:12px;left:12px;border:0;background:#edf2ff;color:#234de0;border-radius:14px;width:40px;height:40px;font-size:28px;line-height:1;cursor:pointer;font-weight:900}.animated-car,.mini-car,.brand-icon img{mix-blend-mode:normal!important}.road-demo .animated-car{filter:drop-shadow(0 12px 16px rgba(0,0,0,.20))}.mini-car{filter:drop-shadow(0 12px 16px rgba(0,0,0,.18))}
@media (max-width:980px){.teacher-layout{grid-template-columns:1fr}.surface-card img{height:150px}}
@media (max-width:620px){.surface-card{min-height:220px}.surface-card img{height:125px}.bar-row{grid-template-columns:78px 1fr 82px}.teacher-shot img{aspect-ratio:16/10}.modal{padding:12px}.modal-card{padding:18px}.modal-close{top:8px;left:8px}}


/* v8 additions */
.steps-panel{grid-auto-rows:minmax(58px,auto)}
.step-tab{min-height:56px}

.number-board{
  display:grid;
  grid-template-columns:repeat(6,minmax(80px,1fr));
  gap:14px;
  margin:22px 0;
}
.number-card{
  border:0;
  min-height:96px;
  border-radius:28px;
  background:linear-gradient(135deg,#fff,#edf4ff);
  color:#234de0;
  font-size:42px;
  font-weight:900;
  box-shadow:0 14px 35px rgba(53,107,255,.14);
  cursor:pointer;
  transition:.25s ease;
  border:2px solid #dbe4ff;
}
.number-card:hover{transform:translateY(-5px);border-color:#356bff}
.number-card.done{
  opacity:.45;
  text-decoration:line-through;
  filter:grayscale(.5);
  cursor:not-allowed;
}
.initial-display{
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:18px;
  min-height:310px;
  box-shadow:0 16px 40px rgba(45,64,120,.08);
}
.initial-empty{height:270px;display:grid;place-items:center;text-align:center;color:#536079;font-weight:900}
.initial-empty span{display:block;font-size:16px;margin-top:8px;color:#6b7280}
.initial-card{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:20px;
  align-items:center;
}
.initial-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:24px;
  border:1px solid #e5ebff;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.initial-question{
  background:linear-gradient(135deg,#f7fbff,#f0fff8);
  border:2px dashed #9fc0ff;
  border-radius:24px;
  padding:20px;
}
.initial-question h3{font-size:30px;margin:0 0 12px;color:#234184}
.initial-question p{font-size:22px;line-height:2;font-weight:900;color:#34405a;margin:0 0 18px}
.initial-answer-btn{margin-top:10px}

.compact-experiment{margin-top:26px}

.concept-map{
  position:relative;
  min-height:520px;
  background:linear-gradient(135deg,#ffffff,#f2f7ff);
  border:1px solid var(--border);
  border-radius:34px;
  padding:28px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(45,64,120,.1);
}
.concept-node{
  background:#fff;
  border:2px solid #dbe4ff;
  border-radius:22px;
  padding:14px 18px;
  font-weight:900;
  color:#172033;
  box-shadow:0 12px 28px rgba(28,44,89,.09);
  text-align:center;
}
.concept-node.main{
  width:min(360px,90%);
  margin:165px auto 0;
  font-size:36px;
  color:#fff;
  background:linear-gradient(135deg,#6c34d8,#3b168f);
  border:0;
  box-shadow:0 18px 36px rgba(76,37,166,.28);
}
.concept-branch.top{
  position:absolute;top:28px;right:24px;left:24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.concept-branch.left{position:absolute;right:28px;top:215px;width:250px;display:grid;gap:10px}
.concept-branch.right{position:absolute;left:28px;top:205px;width:310px;display:grid;gap:10px}
.concept-branch.bottom{position:absolute;right:28px;left:28px;bottom:24px;display:grid;gap:10px}
.concept-node.blue{background:#e9fbff;border-color:#42bed0;color:#08606d}
.concept-node.green{background:#eefcf4;border-color:#23b574;color:#08733e}
.concept-node.purple{background:#f6efff;border-color:#8f59e8;color:#5b28a2}
.concept-node.small{font-size:15px}
.mini-nodes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mini-nodes span,.mini-list span{
  background:#fff;border:1px solid #e5ebff;border-radius:16px;
  padding:9px 12px;font-weight:900;color:#34405a;
}
.mini-list{display:grid;gap:8px}

.video-placeholder{
  margin:14px 0 20px;
  min-height:150px;
  border-radius:30px;
  border:2px dashed #a9bfff;
  background:linear-gradient(135deg,#f7fbff,#fff8ef);
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px;
  color:#34405a;
  font-weight:900;
  box-shadow:0 14px 34px rgba(45,64,120,.08);
}
.video-placeholder span{color:#667085;font-size:15px}
.video-icon{
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#356bff,#6c8cff);
  color:#fff;display:grid;place-items:center;font-size:26px;
  box-shadow:0 12px 28px rgba(53,107,255,.25);
}

.mission-road{
  position:relative;
  min-height:450px;
  border-radius:34px;
  background:
    radial-gradient(circle at 15% 20%,#bff0d4 0 7%,transparent 8%),
    radial-gradient(circle at 85% 75%,#c8e8ff 0 8%,transparent 9%),
    linear-gradient(135deg,#f7fff8,#eef7ff 55%,#fff8ee);
  border:1px solid var(--border);
  overflow:hidden;
  margin:18px 0;
  box-shadow:0 18px 45px rgba(45,64,120,.1);
}
.road-path{
  position:absolute;inset:65px 90px 70px 90px;
  border:42px solid #303947;
  border-left-color:transparent;
  border-bottom-color:#303947;
  border-radius:45% 52% 48% 45%;
  transform:rotate(-10deg);
  box-shadow:inset 0 0 0 6px #fff4,0 12px 30px rgba(0,0,0,.12);
}
.road-path::after{
  content:"";
  position:absolute;inset:-24px;
  border:4px dashed rgba(255,255,255,.9);
  border-left-color:transparent;
  border-radius:45% 52% 48% 45%;
}
.mission-car{
  position:absolute;right:110px;top:130px;width:105px;animation:missionCar 4s ease-in-out infinite;
}
@keyframes missionCar{50%{transform:translate(-45px,70px) rotate(-8deg)}}
.mission-stop{
  position:absolute;
  background:#fff;
  border:2px solid #dbe4ff;
  border-radius:22px;
  padding:10px 12px;
  width:190px;
  min-height:88px;
  box-shadow:0 14px 32px rgba(45,64,120,.12);
  z-index:2;
}
.mission-stop span{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:12px;
  background:#356bff;color:#fff;font-weight:900;margin-left:6px;
}
.mission-stop strong{display:block;margin-top:5px;font-size:15px}
.mission-stop small{display:block;margin-top:4px;color:#667085;font-weight:800}
.mission-stop.s0{right:30px;top:25px;border-color:#13b981}
.mission-stop.s1{left:40px;top:28px;border-color:#5ca8ff}
.mission-stop.s2{right:52px;top:220px;border-color:#a7783d}
.mission-stop.s3{left:58px;top:215px;border-color:#ff9f1c}
.mission-stop.s4{right:310px;bottom:28px;border-color:#45b97a}
.mission-stop.send{left:40px;bottom:28px;border-color:#13b981}
.mission-stop.send span{background:#13b981}

.mission-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:28px;
  padding:18px;
  box-shadow:0 14px 35px rgba(45,64,120,.08);
}
.score-tools{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:end;
  margin-bottom:14px;
}
.score-tools label{
  display:grid;gap:8px;font-weight:900;color:#34405a;
}
.score-tools input,.score-input{
  border:2px solid #e2e9ff;border-radius:14px;
  padding:11px 12px;font-size:16px;font-weight:900;outline:none;
}
.mission-score-table{display:grid;gap:10px}
.team-row{
  display:grid;
  grid-template-columns:1fr auto auto auto auto auto;
  gap:8px;
  align-items:center;
  background:#f8fbff;
  border:1px solid #e5ebff;
  border-radius:20px;
  padding:10px;
}
.team-name{font-weight:900;color:#172033}
.team-time{font-weight:900;color:#234de0;direction:ltr}
.team-total{
  background:#eefcf4;color:#08733e;border-radius:14px;
  padding:9px 12px;font-weight:900;text-align:center;
}
.timer-btn{padding:10px 12px;border-radius:13px;font-size:14px}
.rank-banner{
  margin-top:12px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg,#fff8df,#effcf4);
  border:1px solid #ffe5a7;
  font-weight:900;
  color:#7a4b00;
}

@media (max-width:980px){
  .number-board{grid-template-columns:repeat(3,1fr)}
  .initial-card{grid-template-columns:1fr}
  .concept-map{min-height:auto;display:grid;gap:12px}
  .concept-node.main{margin:0 auto;order:-1}
  .concept-branch.top,.concept-branch.left,.concept-branch.right,.concept-branch.bottom{position:static;width:auto;display:grid;grid-template-columns:1fr;gap:10px}
  .score-tools{grid-template-columns:1fr}
  .team-row{grid-template-columns:1fr 1fr;gap:10px}
  .mission-road{min-height:660px}
  .road-path{display:none}
  .mission-stop{position:static;width:auto;margin:12px}
  .mission-car{display:none}
}
@media (max-width:620px){
  .number-board{grid-template-columns:repeat(2,1fr)}
  .number-card{min-height:74px;font-size:32px}
}


/* v9 refinements */
.intro-visual{background:linear-gradient(135deg,#ffffff,#eef7ff);padding:22px}
.intro-scene{
  width:min(480px,94%);
  min-height:360px;
  background:linear-gradient(180deg,#f7fbff,#ffffff);
  border:1px solid #dbe4ff;
  border-radius:30px;
  padding:22px;
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(45,64,120,.09);
}
.intro-title{
  text-align:center;
  font-size:22px;
  font-weight:900;
  color:#234184;
  margin-bottom:18px;
}
.intro-surfaces{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:24px;
}
.intro-surfaces .tile{
  height:64px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#172033;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 10px 24px rgba(45,64,120,.08);
}
.smooth-tile{background:linear-gradient(135deg,#eaf6ff,#bcdcff)}
.cloth-tile{background:repeating-linear-gradient(45deg,#ffd8e7 0 12px,#ffc3dc 12px 24px)}
.carpet-tile{background:radial-gradient(circle,#fff6 1px,transparent 2px),linear-gradient(135deg,#92d6b2,#4ca579);background-size:10px 10px,100% 100%}
.towel-tile{background:radial-gradient(circle,#fff 1px,transparent 3px),#f0efe8;background-size:12px 12px}
.intro-track{
  position:relative;
  height:140px;
  background:linear-gradient(180deg,#eef2f7,#fff);
  border-radius:24px;
  border:1px dashed #b9c8ff;
  overflow:hidden;
}
.track-line{
  position:absolute;
  right:30px;left:30px;top:74px;
  height:12px;border-radius:999px;
  background:linear-gradient(90deg,#ccd6ea,#9cb2df);
}
.track-line::after{
  content:"";
  position:absolute;inset:4px 18px;
  border-top:3px dashed #fff;
}
.intro-car{
  position:absolute;
  width:120px;
  top:30px;
  right:35px;
  animation:introDrive 4s ease-in-out infinite;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.13));
}
@keyframes introDrive{
  0%,100%{transform:translateX(0) rotate(0)}
  48%{transform:translateX(-250px) rotate(-2deg)}
  55%{transform:translateX(-250px) rotate(-2deg)}
}

.ramp-lab{
  background:linear-gradient(180deg,#fff9ef,#f7fbff);
  display:block;
  padding:18px;
}
.wood-ramp{
  position:relative;
  height:270px;
  margin:8px auto 0;
  max-width:520px;
}
.ramp-base{
  position:absolute;
  right:40px;
  left:40px;
  bottom:12px;
  height:26px;
  border-radius:10px;
  background:linear-gradient(90deg,#9b7653,#c79b68);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.ramp-support{
  position:absolute;
  right:190px;
  bottom:34px;
  width:28px;
  height:125px;
  background:linear-gradient(180deg,#b98b55,#815f3d);
  border-radius:8px;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.ramp-board{
  position:absolute;
  right:80px;
  bottom:112px;
  width:380px;
  height:92px;
  border-radius:16px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.15),transparent),
    repeating-linear-gradient(90deg,#d6ad78 0 22px,#c99a5d 22px 24px);
  transform:rotate(-18deg);
  transform-origin:right center;
  box-shadow:0 16px 35px rgba(0,0,0,.17);
  border:3px solid #a87840;
}
.ramp-board::before,.ramp-board::after{
  content:"";
  position:absolute;top:-12px;bottom:-12px;width:14px;border-radius:8px;
  background:#8a623a;
}
.ramp-board::before{right:8px}.ramp-board::after{left:8px}
.start-line{
  position:absolute;
  right:70px;
  top:0;bottom:0;
  display:grid;place-items:center;
  border-right:4px dashed #234de0;
  padding-right:12px;
  font-weight:900;
  color:#234de0;
  transform:rotate(18deg);
}
.ramp-car{
  position:absolute;
  width:88px;
  right:54px;
  top:18px;
  transform:rotate(18deg);
  animation:rampCarMove 3.3s ease-in-out infinite;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.16));
}
@keyframes rampCarMove{
  0%,100%{right:54px}
  50%{right:245px}
}
.distance-zone{
  position:absolute;
  right:58px;left:58px;bottom:45px;
  text-align:center;
  color:#a05c00;
  font-weight:900;
}
.distance-zone .dash-line{
  display:block;
  border-top:5px dashed #ff9f1c;
  margin-bottom:8px;
}
.distance-zone strong{
  background:#fff;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #ffe3b0;
}

.concept-map-image-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius:34px;
  padding:12px;
  box-shadow:0 18px 45px rgba(45,64,120,.1);
}
.concept-map-image-wrap img{
  width:100%;
  display:block;
  border-radius:24px;
}

.mission-route{
  background:linear-gradient(135deg,#f7fff8,#eef7ff 55%,#fff8ee);
  border:1px solid var(--border);
  border-radius:34px;
  padding:18px;
  margin:18px 0;
  box-shadow:0 18px 45px rgba(45,64,120,.1);
}
.route-start,.route-end{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#fff;
  border:2px solid #13b981;
  border-radius:24px;
  padding:14px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(45,64,120,.08);
}
.route-start img{width:86px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.12))}
.route-start span,.route-end span{
  background:#13b981;
  color:#fff;
  border-radius:14px;
  padding:8px 12px;
}
.route-cards{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:18px 0;
}
.route-cards::before{
  content:"";
  position:absolute;
  top:50%;
  right:4%;
  left:4%;
  height:14px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,#303947 0 38px,#475467 38px 76px);
  transform:translateY(-50%);
  z-index:0;
}
.route-card{
  position:relative;
  z-index:1;
  min-height:164px;
  background:#fff;
  border:2px solid #dbe4ff;
  border-radius:26px;
  padding:18px 14px;
  text-align:center;
  display:grid;
  align-content:center;
  gap:8px;
  box-shadow:0 16px 34px rgba(45,64,120,.12);
}
.route-card span{
  width:44px;height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#356bff;
  font-size:22px;
  font-weight:900;
  margin:0 auto;
}
.route-card strong{font-size:17px}
.route-card small{color:#667085;font-weight:900}
.route-card.snow{border-color:#6bb9ff;background:linear-gradient(180deg,#fff,#eef8ff)}
.route-card.rocky{border-color:#b88955;background:linear-gradient(180deg,#fff,#fff6eb)}
.route-card.parking{border-color:#ffb02e;background:linear-gradient(180deg,#fff,#fff8e8)}
.route-card.home{border-color:#22b573;background:linear-gradient(180deg,#fff,#f0fff7)}

@media (max-width:980px){
  .intro-car{animation:none}
  .ramp-car{animation:none}
  .route-cards{grid-template-columns:1fr 1fr}
  .route-cards::before{display:none}
}
@media (max-width:620px){
  .intro-surfaces{grid-template-columns:1fr}
  .route-cards{grid-template-columns:1fr}
  .ramp-board{width:300px;right:28px}
  .ramp-car{width:70px}
}


/* v8 additions */
.steps-panel{grid-auto-rows:minmax(58px,auto)}
.step-tab{min-height:56px}

.number-board{
  display:grid;
  grid-template-columns:repeat(6,minmax(80px,1fr));
  gap:14px;
  margin:22px 0;
}
.number-card{
  border:0;
  min-height:96px;
  border-radius:28px;
  background:linear-gradient(135deg,#fff,#edf4ff);
  color:#234de0;
  font-size:42px;
  font-weight:900;
  box-shadow:0 14px 35px rgba(53,107,255,.14);
  cursor:pointer;
  transition:.25s ease;
  border:2px solid #dbe4ff;
}
.number-card:hover{transform:translateY(-5px);border-color:#356bff}
.number-card.done{
  opacity:.45;
  text-decoration:line-through;
  filter:grayscale(.5);
  cursor:not-allowed;
}
.initial-display{
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:18px;
  min-height:310px;
  box-shadow:0 16px 40px rgba(45,64,120,.08);
}
.initial-empty{height:270px;display:grid;place-items:center;text-align:center;color:#536079;font-weight:900}
.initial-empty span{display:block;font-size:16px;margin-top:8px;color:#6b7280}
.initial-card{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:20px;
  align-items:center;
}
.initial-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:24px;
  border:1px solid #e5ebff;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}
.initial-question{
  background:linear-gradient(135deg,#f7fbff,#f0fff8);
  border:2px dashed #9fc0ff;
  border-radius:24px;
  padding:20px;
}
.initial-question h3{font-size:30px;margin:0 0 12px;color:#234184}
.initial-question p{font-size:22px;line-height:2;font-weight:900;color:#34405a;margin:0 0 18px}
.initial-answer-btn{margin-top:10px}

.compact-experiment{margin-top:26px}

.concept-map{
  position:relative;
  min-height:520px;
  background:linear-gradient(135deg,#ffffff,#f2f7ff);
  border:1px solid var(--border);
  border-radius:34px;
  padding:28px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(45,64,120,.1);
}
.concept-node{
  background:#fff;
  border:2px solid #dbe4ff;
  border-radius:22px;
  padding:14px 18px;
  font-weight:900;
  color:#172033;
  box-shadow:0 12px 28px rgba(28,44,89,.09);
  text-align:center;
}
.concept-node.main{
  width:min(360px,90%);
  margin:165px auto 0;
  font-size:36px;
  color:#fff;
  background:linear-gradient(135deg,#6c34d8,#3b168f);
  border:0;
  box-shadow:0 18px 36px rgba(76,37,166,.28);
}
.concept-branch.top{
  position:absolute;top:28px;right:24px;left:24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.concept-branch.left{position:absolute;right:28px;top:215px;width:250px;display:grid;gap:10px}
.concept-branch.right{position:absolute;left:28px;top:205px;width:310px;display:grid;gap:10px}
.concept-branch.bottom{position:absolute;right:28px;left:28px;bottom:24px;display:grid;gap:10px}
.concept-node.blue{background:#e9fbff;border-color:#42bed0;color:#08606d}
.concept-node.green{background:#eefcf4;border-color:#23b574;color:#08733e}
.concept-node.purple{background:#f6efff;border-color:#8f59e8;color:#5b28a2}
.concept-node.small{font-size:15px}
.mini-nodes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mini-nodes span,.mini-list span{
  background:#fff;border:1px solid #e5ebff;border-radius:16px;
  padding:9px 12px;font-weight:900;color:#34405a;
}
.mini-list{display:grid;gap:8px}

.video-placeholder{
  margin:14px 0 20px;
  min-height:150px;
  border-radius:30px;
  border:2px dashed #a9bfff;
  background:linear-gradient(135deg,#f7fbff,#fff8ef);
  display:grid;
  place-items:center;
  text-align:center;
  padding:20px;
  color:#34405a;
  font-weight:900;
  box-shadow:0 14px 34px rgba(45,64,120,.08);
}
.video-placeholder span{color:#667085;font-size:15px}
.video-icon{
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#356bff,#6c8cff);
  color:#fff;display:grid;place-items:center;font-size:26px;
  box-shadow:0 12px 28px rgba(53,107,255,.25);
}

.mission-road{
  position:relative;
  min-height:450px;
  border-radius:34px;
  background:
    radial-gradient(circle at 15% 20%,#bff0d4 0 7%,transparent 8%),
    radial-gradient(circle at 85% 75%,#c8e8ff 0 8%,transparent 9%),
    linear-gradient(135deg,#f7fff8,#eef7ff 55%,#fff8ee);
  border:1px solid var(--border);
  overflow:hidden;
  margin:18px 0;
  box-shadow:0 18px 45px rgba(45,64,120,.1);
}
.road-path{
  position:absolute;inset:65px 90px 70px 90px;
  border:42px solid #303947;
  border-left-color:transparent;
  border-bottom-color:#303947;
  border-radius:45% 52% 48% 45%;
  transform:rotate(-10deg);
  box-shadow:inset 0 0 0 6px #fff4,0 12px 30px rgba(0,0,0,.12);
}
.road-path::after{
  content:"";
  position:absolute;inset:-24px;
  border:4px dashed rgba(255,255,255,.9);
  border-left-color:transparent;
  border-radius:45% 52% 48% 45%;
}
.mission-car{
  position:absolute;right:110px;top:130px;width:105px;animation:missionCar 4s ease-in-out infinite;
}
@keyframes missionCar{50%{transform:translate(-45px,70px) rotate(-8deg)}}
.mission-stop{
  position:absolute;
  background:#fff;
  border:2px solid #dbe4ff;
  border-radius:22px;
  padding:10px 12px;
  width:190px;
  min-height:88px;
  box-shadow:0 14px 32px rgba(45,64,120,.12);
  z-index:2;
}
.mission-stop span{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:12px;
  background:#356bff;color:#fff;font-weight:900;margin-left:6px;
}
.mission-stop strong{display:block;margin-top:5px;font-size:15px}
.mission-stop small{display:block;margin-top:4px;color:#667085;font-weight:800}
.mission-stop.s0{right:30px;top:25px;border-color:#13b981}
.mission-stop.s1{left:40px;top:28px;border-color:#5ca8ff}
.mission-stop.s2{right:52px;top:220px;border-color:#a7783d}
.mission-stop.s3{left:58px;top:215px;border-color:#ff9f1c}
.mission-stop.s4{right:310px;bottom:28px;border-color:#45b97a}
.mission-stop.send{left:40px;bottom:28px;border-color:#13b981}
.mission-stop.send span{background:#13b981}

.mission-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:28px;
  padding:18px;
  box-shadow:0 14px 35px rgba(45,64,120,.08);
}
.score-tools{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:end;
  margin-bottom:14px;
}
.score-tools label{
  display:grid;gap:8px;font-weight:900;color:#34405a;
}
.score-tools input,.score-input{
  border:2px solid #e2e9ff;border-radius:14px;
  padding:11px 12px;font-size:16px;font-weight:900;outline:none;
}
.mission-score-table{display:grid;gap:10px}
.team-row{
  display:grid;
  grid-template-columns:1fr auto auto auto auto auto;
  gap:8px;
  align-items:center;
  background:#f8fbff;
  border:1px solid #e5ebff;
  border-radius:20px;
  padding:10px;
}
.team-name{font-weight:900;color:#172033}
.team-time{font-weight:900;color:#234de0;direction:ltr}
.team-total{
  background:#eefcf4;color:#08733e;border-radius:14px;
  padding:9px 12px;font-weight:900;text-align:center;
}
.timer-btn{padding:10px 12px;border-radius:13px;font-size:14px}
.rank-banner{
  margin-top:12px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg,#fff8df,#effcf4);
  border:1px solid #ffe5a7;
  font-weight:900;
  color:#7a4b00;
}

@media (max-width:980px){
  .number-board{grid-template-columns:repeat(3,1fr)}
  .initial-card{grid-template-columns:1fr}
  .concept-map{min-height:auto;display:grid;gap:12px}
  .concept-node.main{margin:0 auto;order:-1}
  .concept-branch.top,.concept-branch.left,.concept-branch.right,.concept-branch.bottom{position:static;width:auto;display:grid;grid-template-columns:1fr;gap:10px}
  .score-tools{grid-template-columns:1fr}
  .team-row{grid-template-columns:1fr 1fr;gap:10px}
  .mission-road{min-height:660px}
  .road-path{display:none}
  .mission-stop{position:static;width:auto;margin:12px}
  .mission-car{display:none}
}
@media (max-width:620px){
  .number-board{grid-template-columns:repeat(2,1fr)}
  .number-card{min-height:74px;font-size:32px}
}


/* v10 refinements */
.ramp-photo-card{
  min-height:360px;
  background:linear-gradient(180deg,#fff,#eef7ff);
  padding:16px;
  display:grid;
  grid-template-rows:1fr auto;
  gap:12px;
}
.ramp-photo-card img{
  width:100%;
  height:300px;
  object-fit:cover;
  border-radius:24px;
  border:1px solid #e5ebff;
  box-shadow:0 16px 34px rgba(45,64,120,.12);
}
.ramp-photo-caption{
  background:#fff;
  border:1px solid #dbe4ff;
  border-radius:22px;
  padding:12px 14px;
  display:grid;
  gap:4px;
  text-align:center;
}
.ramp-photo-caption strong{
  color:#234de0;
  font-size:18px;
  font-weight:900;
}
.ramp-photo-caption span{
  color:#667085;
  font-weight:800;
  line-height:1.8;
}
.intro-title{
  font-size:20px;
  line-height:1.8;
}


/* v11 refinements */
.ramp-photo-card img{
  height:320px;
  object-fit:cover;
  object-position:center;
}
.score-tools.mission-tools{
  grid-template-columns:1fr auto auto auto;
}
.start-all-btn{
  background:linear-gradient(135deg,#13b981,#34d399);
}
.start-all-btn:disabled{
  opacity:.8;
  cursor:not-allowed;
  transform:none;
}
.team-row{
  grid-template-columns:minmax(130px,1fr) 190px auto 120px 120px 120px;
  align-items:center;
}
.team-time-box{
  min-width:190px;
  border-radius:20px;
  padding:10px 12px;
  display:grid;
  gap:4px;
  text-align:center;
  border:2px solid #dbe4ff;
  box-shadow:0 10px 24px rgba(45,64,120,.08);
}
.team-time-box .time-label{
  font-size:13px;
  font-weight:900;
  line-height:1.3;
  white-space:nowrap;
}
.team-time-box .team-time{
  display:block;
  direction:ltr;
  font-family:"VazirLike",Tahoma,Arial,sans-serif;
  font-size:30px;
  line-height:1;
  min-width:92px;
  min-height:34px;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums;
}
.team-time-box.ready{
  background:linear-gradient(135deg,#f8fbff,#eef3ff);
  color:#34405a;
}
.team-time-box.running{
  background:linear-gradient(135deg,#eaf2ff,#dbe9ff);
  border-color:#356bff;
  color:#234de0;
}
.team-time-box.stopped{
  background:linear-gradient(135deg,#ecfff5,#d9fbe8);
  border-color:#13b981;
  color:#08733e;
}
.timer-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}
.score-label{
  display:grid;
  gap:6px;
  font-size:13px;
  font-weight:900;
  color:#34405a;
}
.score-label .score-input{
  width:100%;
  text-align:center;
}
.team-total{
  min-width:118px;
  min-height:54px;
  display:grid;
  place-items:center;
  white-space:nowrap;
}
.team-name{
  min-width:120px;
}
@media (max-width:1100px){
  .score-tools.mission-tools{grid-template-columns:1fr 1fr}
  .team-row{grid-template-columns:1fr 1fr}
  .team-time-box{min-width:0}
}
@media (max-width:620px){
  .score-tools.mission-tools{grid-template-columns:1fr}
  .team-row{grid-template-columns:1fr}
  .team-time-box .team-time{font-size:26px}
}


/* v12 motivation image and deep look */
.motivation-grid{
  min-height:530px;
}
.motivation-visual{
  background:linear-gradient(135deg,#ffffff,#eef7ff);
  border:1px solid var(--border);
  border-radius:32px;
  min-height:410px;
  padding:16px;
  display:grid;
  place-items:center;
  box-shadow:0 18px 45px rgba(45,64,120,.12);
  overflow:hidden;
}
.motivation-visual img{
  width:100%;
  max-height:390px;
  object-fit:contain;
  border-radius:24px;
  filter:drop-shadow(0 16px 22px rgba(45,64,120,.12));
}
.deep-look{
  margin-top:16px;
  background:linear-gradient(135deg,#fff8e9,#f0fff7);
  border:1px solid #ffe2a7;
  border-right:6px solid #ff9f1c;
  border-radius:24px;
  padding:16px 18px;
  color:#34405a;
  font-weight:800;
  line-height:2;
  box-shadow:0 12px 28px rgba(45,64,120,.07);
}
.deep-look strong{
  color:#a05c00;
  font-weight:900;
}
@media (max-width:980px){
  .motivation-visual{min-height:auto}
}


/* v13 guided questions + final video */
.guided-questions{
  display:grid;
  gap:10px;
  margin:14px 0;
}
.guided-questions div{
  display:flex;
  gap:10px;
  align-items:center;
  background:linear-gradient(135deg,#f8fbff,#ffffff);
  border:1px solid #dbe4ff;
  border-radius:18px;
  padding:11px 12px;
  color:#34405a;
  font-weight:900;
  line-height:1.8;
  box-shadow:0 8px 18px rgba(45,64,120,.06);
}
.guided-questions span{
  min-width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#356bff;
  color:#fff;
  font-weight:900;
}
.reveal-concept-btn{
  margin:12px 0 8px;
}
.reveal-concept-btn:disabled{
  opacity:.75;
  cursor:not-allowed;
}
.concept-answer{
  display:none;
  margin-top:10px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(135deg,#fff8ec,#f0fff7);
  border:1px solid #ffe1a3;
}
.concept-answer.show{
  display:block;
  animation:fadeUp .35s ease both;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.mission-video-card{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:16px;
  align-items:center;
  margin:14px 0 20px;
  padding:16px;
  border-radius:30px;
  background:linear-gradient(135deg,#f7fbff,#fff8ef);
  border:1px solid #dbe4ff;
  box-shadow:0 14px 34px rgba(45,64,120,.08);
}
.mission-video-card video{
  width:100%;
  max-height:360px;
  border-radius:24px;
  background:#111827;
  box-shadow:0 16px 34px rgba(0,0,0,.14);
}
.mission-video-text{
  display:grid;
  gap:10px;
  padding:16px;
  border-radius:24px;
  background:#fff;
  border:1px solid #e5ebff;
}
.mission-video-text strong{
  color:#234184;
  font-size:24px;
  font-weight:900;
}
.mission-video-text span{
  color:#667085;
  font-weight:800;
  line-height:2;
}
@media (max-width:980px){
  .mission-video-card{grid-template-columns:1fr}
}


/* v14 attendance slide */
.attendance-hero{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:24px;
  align-items:center;
}
.attendance-copy{
  display:grid;
  gap:16px;
}
.attendance-copy h2{
  margin:0;
}
.attendance-copy p{
  margin:0;
  line-height:2;
  color:#55627d;
  font-weight:800;
}
.attendance-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.attendance-badges span{
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#eef4ff,#ffffff);
  border:1px solid #dbe4ff;
  color:#2c4d92;
  font-weight:900;
  box-shadow:0 8px 18px rgba(38,72,155,.08);
}
.attendance-visual{
  background:linear-gradient(135deg,#f7fbff,#fff7ef);
  border:1px solid #e3ebff;
  border-radius:32px;
  padding:16px;
  box-shadow:0 18px 36px rgba(36,60,120,.10);
}
.attendance-visual img{
  width:100%;
  display:block;
  border-radius:24px;
}
@media (max-width: 980px){
  .attendance-hero{grid-template-columns:1fr;}
}


/* v15 attendance slide refinements */
.attendance-hero-top{
  grid-template-columns:1fr !important;
  gap:18px;
}
.attendance-visual-large{
  max-width:980px;
  margin:0 auto;
  width:100%;
  padding:12px;
}
.attendance-visual-large img{
  max-height:520px;
  object-fit:contain;
  margin:0 auto;
}
.attendance-copy-center{
  text-align:center;
  max-width:960px;
  margin:0 auto;
}
.attendance-copy-center .attendance-badges{
  justify-content:center;
}
.attendance-copy-center .primary{
  justify-self:center;
}


/* v16 judge intro + appendices */
.judge-modal,.appendix-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.judge-modal.open,.appendix-modal.open{display:flex}
.judge-backdrop,.appendix-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,20,45,.58);
  backdrop-filter:blur(10px);
}
.judge-card{
  position:relative;
  z-index:1;
  width:min(920px,96vw);
  border-radius:36px;
  padding:32px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(244,250,255,.94)),
    radial-gradient(circle at 12% 8%,rgba(255,159,28,.28),transparent 30%),
    radial-gradient(circle at 90% 80%,rgba(53,107,255,.18),transparent 32%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 32px 90px rgba(0,0,0,.25);
  animation:judgeIn .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes judgeIn{
  from{opacity:0;transform:translateY(20px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.judge-glow{
  position:absolute;
  width:240px;height:240px;
  left:-60px;top:-60px;
  background:radial-gradient(circle,rgba(255,159,28,.32),transparent 68%);
}
.judge-close{
  position:absolute;
  top:16px;
  left:16px;
  width:42px;
  height:42px;
  border:0;
  border-radius:15px;
  background:#fff;
  color:#34405a;
  font-size:28px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(45,64,120,.12);
}
.judge-badge{
  display:inline-flex;
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff3df,#fff);
  color:#9a5b00;
  border:1px solid #ffdfa3;
  font-weight:900;
  margin-bottom:12px;
}
.judge-card h2{
  margin:0 0 14px;
  font-size:clamp(28px,4.4vw,48px);
  color:#17346f;
}
.judge-card p{
  color:#34405a;
  font-weight:800;
  line-height:2.1;
  font-size:18px;
}
.judge-note{
  padding:14px 16px;
  border-radius:22px;
  background:#fff8e9;
  border-right:6px solid #ff9f1c;
}
.judge-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}
.judge-actions .primary,.judge-actions .secondary{min-width:190px}
.appendix-card{
  position:relative;
  z-index:1;
  width:min(1050px,96vw);
  max-height:88vh;
  overflow:auto;
  border-radius:34px;
  padding:26px;
  background:#fff;
  border:1px solid #e5ebff;
  box-shadow:0 32px 90px rgba(0,0,0,.25);
}
.appendix-card h3{
  margin:0 0 8px;
  font-size:32px;
  color:#17346f;
}
.appendix-card p{
  margin:0 0 18px;
  color:#667085;
  font-weight:800;
}
.appendix-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}
.appendix-item,.appendix-thumb{
  text-decoration:none;
  color:#172033;
  border:1px solid #dbe4ff;
  border-radius:24px;
  padding:14px;
  background:linear-gradient(135deg,#f8fbff,#fff);
  display:grid;
  gap:8px;
  transition:.25s ease;
  min-height:150px;
}
.appendix-item:hover,.appendix-thumb:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(45,64,120,.12);
  border-color:#356bff;
}
.appendix-item span{
  width:56px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#356bff;
  color:#fff;
  font-weight:900;
}
.appendix-item strong,.appendix-thumb strong{
  font-weight:900;
  color:#17346f;
}
.appendix-item small{
  color:#667085;
  font-weight:800;
  line-height:1.7;
}
.appendix-thumb img{
  width:100%;
  height:142px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid #eef2ff;
}
@media (max-width:620px){
  .judge-card{padding:22px}
  .judge-actions .primary,.judge-actions .secondary{width:100%}
  .appendix-card{padding:20px}
}


/* v17 appendices refinements */
.floating-appendix-btn{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:850;
  border:0;
  border-radius:18px;
  padding:12px 16px;
  font-family:inherit;
  font-weight:900;
  background:linear-gradient(135deg,#17346f,#356bff);
  color:#fff;
  box-shadow:0 14px 30px rgba(23,52,111,.28);
  cursor:pointer;
  transition:.25s ease;
}
.floating-appendix-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(23,52,111,.34);
}
.appendix-video{
  text-decoration:none;
  color:#172033;
  border:1px solid #dbe4ff;
  border-radius:24px;
  padding:14px;
  background:linear-gradient(135deg,#f8fbff,#fff);
  display:grid;
  gap:8px;
  transition:.25s ease;
  min-height:150px;
}
.appendix-video:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(45,64,120,.12);
  border-color:#356bff;
}
.appendix-video video{
  width:100%;
  height:142px;
  object-fit:cover;
  border-radius:18px;
  background:#111827;
}
.appendix-video strong{
  font-weight:900;
  color:#17346f;
}
.appendix-video small,.appendix-thumb small{
  color:#667085;
  font-weight:800;
  line-height:1.7;
}
@media (max-width:620px){
  .floating-appendix-btn{
    left:12px;
    bottom:12px;
    padding:10px 13px;
    border-radius:15px;
  }
}


/* v21 mobile responsiveness for judge + appendices dialogs */
.judge-modal,
.appendix-modal{
  overscroll-behavior: contain;
}

.judge-card,
.appendix-card{
  box-sizing: border-box;
}

@media (max-width: 760px){
  .judge-modal,
  .appendix-modal{
    align-items: flex-start;
    padding: 10px;
    overflow-y: auto;
  }

  .judge-card{
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    border-radius: 24px;
    padding: 18px 16px 18px;
    margin: 0 auto;
  }

  .judge-close{
    position: sticky;
    top: 0;
    margin-right: auto;
    margin-bottom: 6px;
    width: 40px;
    height: 40px;
    z-index: 3;
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid #dbe4ff;
    box-shadow: 0 8px 18px rgba(45,64,120,.16);
  }

  .judge-badge{
    font-size: 13px;
    padding: 8px 12px;
    margin-bottom: 8px;
  }

  .judge-card h2{
    font-size: 24px;
    line-height: 1.55;
    margin-bottom: 10px;
  }

  .judge-card p{
    font-size: 14px;
    line-height: 1.9;
    margin: 8px 0;
  }

  .judge-note{
    padding: 10px 12px;
    border-radius: 18px;
    border-right-width: 4px;
  }

  .judge-actions{
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 12px;
    margin-top: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 25%, #fff);
    z-index: 2;
  }

  .judge-actions .primary,
  .judge-actions .secondary{
    width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 15px;
  }

  .appendix-card{
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    border-radius: 24px;
    padding: 18px 14px 20px;
  }

  .appendix-card .modal-close{
    position: sticky;
    top: 0;
    margin-right: auto;
    margin-bottom: 8px;
    z-index: 3;
    background: #fff;
    border: 1px solid #dbe4ff;
    box-shadow: 0 8px 18px rgba(45,64,120,.16);
  }

  .appendix-card h3{
    font-size: 24px;
    line-height: 1.6;
  }

  .appendix-card p{
    font-size: 14px;
    line-height: 1.8;
  }

  .appendix-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .appendix-thumb img,
  .appendix-video video{
    height: 170px;
  }

  .floating-appendix-btn{
    left: 10px;
    bottom: 10px;
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 14px;
  }
}

@media (max-width: 420px){
  .judge-card{
    padding: 14px 12px 16px;
    border-radius: 20px;
  }

  .judge-card h2{
    font-size: 21px;
  }

  .judge-card p{
    font-size: 13px;
  }

  .judge-actions .primary,
  .judge-actions .secondary{
    min-height: 46px;
  }
}