/* learn.css - extra styles for tens.html, garden.html and train.html.
   Loaded after style.css; reuses its colours, buttons, keypad and feedback. */

/* ---------- mode tabs + level ---------- */
.mode-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0 10px}
.mode-btn{
  font:inherit;font-size:1.05rem;font-weight:bold;
  min-height:58px;padding:10px 22px;
  border:3px solid var(--line);border-radius:16px;
  background:#fff;color:var(--muted);cursor:pointer
}
.mode-btn:hover{border-color:var(--purple-2);color:var(--purple)}
.mode-btn.active{background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff;border-color:transparent}

.level-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.level-btn{
  font:inherit;font-size:.9rem;font-weight:bold;
  min-height:48px;padding:6px 16px;
  border:2px solid var(--line);border-radius:12px;
  background:#fff;color:var(--muted);cursor:pointer
}
.level-btn.active{background:#fff4e6;border-color:var(--orange);color:#b35900}
.level-desc{font-size:.9rem;color:var(--muted);font-weight:bold;flex-basis:100%;text-align:center}

.mode-panel{display:flex;flex-direction:column;align-items:center;gap:8px;animation:fadeInUp .35s ease}
.mode-panel.gone{display:none}
.mode-panel .controls{width:100%}

/* ---------- learn ---------- */
.step-count{font-size:.9rem;font-weight:bold;color:var(--purple-2);margin-top:6px}
.step-text{
  font-size:1.25rem;font-weight:bold;line-height:1.45;text-align:center;color:var(--ink);
  max-width:720px;min-height:3.2em;padding:14px 20px;
  background:#f7f6ff;border-radius:18px;border:3px solid #e6e1ff
}
.learn-done{font-size:1.05rem;font-weight:bold;color:var(--green);text-align:center}
.viz{width:100%;display:flex;justify-content:center;min-height:120px}
.btn:disabled{opacity:.4;cursor:default;transform:none}

/* ---------- practice extras ---------- */
.hint-box{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;max-width:720px;padding:12px 16px;
  background:#fff8ee;border:3px dashed var(--yellow);border-radius:18px
}
.hint-box .hint-line{text-align:center;font-size:1.05rem;color:#b35900}
.solution{
  width:100%;max-width:720px;padding:14px 18px;
  background:#f0fbf7;border:3px solid #b8efdd;border-radius:18px
}
.solution-title{font-weight:bold;color:#00795f;margin-bottom:6px}
.solution-list{padding-left:1.4em;display:flex;flex-direction:column;gap:6px;font-size:1.02rem;line-height:1.4}
.solution .subprompt{margin-top:8px;min-height:0;font-weight:bold}

/* ---------- worksheet ---------- */
.sheet{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;width:100%;max-width:760px;margin-top:6px}
.sheet-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:16px;border:3px solid #f0f0f0;background:#fcfcfd
}
.sheet-row.ok{border-color:var(--green);background:#e6fbf3}
.sheet-row.try{border-color:#ffc9bf;background:#fff3f0}
.sheet-num{font-size:.85rem;font-weight:bold;color:var(--muted);min-width:1.8em}
.sheet-expr{font-size:1.45rem;font-weight:bold;color:var(--purple);white-space:nowrap}
.sheet-input{
  font:inherit;font-size:1.45rem;font-weight:bold;text-align:center;
  width:96px;min-height:54px;border:3px solid var(--line);border-radius:14px;outline:none;color:var(--ink)
}
.sheet-input:focus{border-color:#74b9ff;box-shadow:0 0 0 4px rgba(116,185,255,.2)}
.sheet-mark{font-size:1.2rem;font-weight:bold;min-width:2.4em}
.sheet-row.ok .sheet-mark{color:var(--green)}
.sheet-row.try .sheet-mark{color:var(--red)}

/* ---------- tens and ones ---------- */
.tb-wrap{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:center;width:100%}
.tb-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.tb-sign{font-size:2rem;font-weight:bold;color:var(--muted)}
.tb-group{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 12px;border-radius:16px;border:3px solid transparent;background:#fafbfc
}
.tb-blocks{display:flex;gap:10px;align-items:flex-end;min-height:130px}
.tb-tens{display:flex;gap:5px;align-items:flex-end}
.tb-ones{display:flex;flex-wrap:wrap;gap:4px;max-width:110px;align-content:flex-end}
.tb-rod{
  position:relative;width:18px;height:130px;border-radius:5px;
  background:repeating-linear-gradient(to bottom,#ffb26b 0 11px,#e1873a 11px 13px);
  box-shadow:0 3px 8px rgba(0,0,0,.15);transition:opacity .2s
}
.tb-cube{
  position:relative;width:18px;height:18px;border-radius:5px;
  background:linear-gradient(135deg,#74b9ff,#0984e3);
  box-shadow:0 3px 8px rgba(0,0,0,.15);transition:opacity .2s
}
.tb-group.ghost{border:3px dashed #b2bec3;background:#fff}
.tb-group.ghost .tb-rod,.tb-group.ghost .tb-cube{opacity:.55}
.tb-zero{font-size:1.4rem;font-weight:bold;color:var(--muted);align-self:center}
.tb-cap{font-size:1.4rem;font-weight:bold;color:var(--ink)}
.tb-sub{font-size:.8rem;font-weight:bold;color:var(--muted);text-align:center;max-width:180px}
.tb-group.hl-ones .tb-cube{box-shadow:0 0 0 3px var(--yellow),0 3px 8px rgba(0,0,0,.15)}
.tb-group.hl-tens .tb-rod{box-shadow:0 0 0 3px var(--yellow),0 3px 8px rgba(0,0,0,.15)}
.tb-rod.new,.tb-cube.new{outline:3px solid var(--green);outline-offset:1px}
.tb-rod.x,.tb-cube.x{opacity:.28}
.tb-rod.x::after,.tb-cube.x::after{
  content:'';position:absolute;left:50%;top:-4px;bottom:-4px;width:3px;
  background:var(--red);transform:translateX(-50%) rotate(35deg);border-radius:2px
}
.tb-rod.x::after{transform:translateX(-50%) rotate(12deg)}
.tap .tb-rod,.tap .tb-cube{cursor:pointer}
.tb-rod.counted,.tb-cube.counted{opacity:.35}
.tb-rod.counted::before,.tb-cube.counted::before{
  content:'✓';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:.7rem;font-weight:bold;color:var(--ink)
}

.col-table{border-collapse:collapse;font-size:1.7rem;font-weight:bold;font-family:ui-monospace,Consolas,monospace}
.col-table td,.col-table th{width:1.6em;height:1.4em;text-align:center;padding:0 2px}
.col-table th{font-size:.9rem;color:#fff}
.col-table th.ct{background:var(--orange);border-radius:10px 0 0 0}
.col-table th.cu{background:var(--blue);border-radius:0 10px 0 0}
.col-table td.ct{background:#fff4e6}
.col-table td.cu{background:#eaf4fd}
.col-table .col-mark td{font-size:.95rem;height:1.3em;color:var(--green)}
.col-table .col-mark td.borrow{color:var(--red)}
.col-table .struck{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px;color:var(--muted)}
.col-table .col-res td{border-top:4px solid var(--ink);color:var(--purple)}
.col-table .col-sign{color:var(--muted)}

/* ---------- flower garden ---------- */
.garden{
  display:flex;flex-direction:column;gap:6px;padding:12px 14px;
  border-radius:18px;background:linear-gradient(#e9f8e1,#d7f0c8);border:3px solid #bfe3a8
}
.g-row{
  display:flex;align-items:center;gap:10px;min-height:38px;padding:3px 8px;
  border-radius:12px;background:#b98a5e22;border:2px dashed #c9a27a
}
.garden.tap .g-row:not(.planted){cursor:pointer}
.garden.tap .g-row:not(.planted):hover{background:#b98a5e44}
.g-row.planted{border-style:solid;border-color:#9fd08a;background:#ffffff88}
.g-num{font-size:.75rem;font-weight:bold;color:#7a5a3a;min-width:1.4em;text-align:right}
.g-bed{display:flex;gap:5px}
.flower{
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle,#fdcb6e 0 26%,#fd79a8 28% 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.15)
}
.flower.c1{background:radial-gradient(circle,#fdcb6e 0 26%,#a29bfe 28% 100%)}
.flower.c2{background:radial-gradient(circle,#fff 0 26%,#ff9f43 28% 100%)}
.flower.c3{background:radial-gradient(circle,#fdcb6e 0 26%,#74b9ff 28% 100%)}
.flower.pop{animation:popIn .3s ease both}
.flower.empty{background:#c9a27a;transform:scale(.35);box-shadow:none}
.g-total{font-size:1rem;font-weight:bold;color:var(--green);min-width:2.6em}

/* ---------- little train ---------- */
.train-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.train{display:flex;flex-wrap:wrap;gap:18px 6px;align-items:flex-end;justify-content:center}
/* engine and carriages share the same column layout: body, wheels, count line,
   so every body sits on the same rail */
.wagon{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.wagon:not(.loco-car)::before{
  content:'';position:absolute;left:-7px;bottom:56px;width:8px;height:5px;border-radius:2px;background:#636e72
}
.loco{
  position:relative;width:92px;height:86px;margin-top:18px;
  border-radius:12px 22px 8px 8px;
  background:linear-gradient(135deg,#ff7675,#d63031);box-shadow:0 4px 10px rgba(0,0,0,.18)
}
.loco::before{content:'';position:absolute;left:12px;top:-18px;width:16px;height:20px;border-radius:4px 4px 0 0;background:#2d3436}
.loco::after{content:'';position:absolute;right:10px;top:10px;width:30px;height:24px;border-radius:5px;background:#dff3ff;border:3px solid #b71c1c}
.wagon-body{
  width:126px;min-height:86px;padding:6px;border-radius:10px;
  background:#dff3ff;border:5px solid #0984e3;box-shadow:0 4px 10px rgba(0,0,0,.18);
  display:grid;grid-template-columns:repeat(5,19px);gap:3px 3px;justify-content:center;align-content:end
}
.wheels{display:flex;gap:40px}
.wheels span{width:16px;height:16px;border-radius:50%;background:#2d3436;border:3px solid #636e72}
.wagon-count{font-size:1.1rem;font-weight:bold;color:var(--blue);min-height:1.3em}

/* a little person: round head + shirt */
.pax{position:relative;width:19px;height:30px}
.wagon-body .pax{width:19px}
.pax::before{
  content:'';position:absolute;left:50%;top:0;width:62%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:#ffd6a5;border:1.5px solid #c98b52;box-sizing:border-box;z-index:1
}
.pax::after{
  content:'';position:absolute;left:4%;right:4%;bottom:0;height:58%;
  border-radius:8px 8px 3px 3px;background:var(--shirt,#e84393)
}
.pax:nth-child(5n+1){--shirt:#e84393}
.pax:nth-child(5n+2){--shirt:#00b894}
.pax:nth-child(5n+3){--shirt:#6c5ce7}
.pax:nth-child(5n+4){--shirt:#ff9f43}
.pax:nth-child(5n){--shirt:#0984e3}
.pax.pop{animation:popIn .3s ease both}
.platform{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;max-width:560px;padding:10px 14px 14px;border-radius:18px;
  background:#f1f2f6;border:3px dashed #b2bec3
}
.platform.tap{cursor:pointer}
.platform.tap:hover{background:#e8eaf0}
.platform-lab{font-size:.85rem;font-weight:bold;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pax-pool{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:22px}
.pax-pool{gap:8px;min-height:34px}
.pax-pool .pax{width:22px;height:34px}
.train-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-small{font:inherit;font-size:.95rem;font-weight:bold;min-height:52px;padding:8px 18px;border-radius:14px;border:none;cursor:pointer}
.btn-small.go{background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff}
.btn-small.ghost{background:#dfe6e9;color:var(--muted)}

/* ---------- hub colours ---------- */
.b-tens{border-left-color:var(--blue)}
.b-garden{border-left-color:#fd79a8}
.b-train{border-left-color:#d63031}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .sheet{grid-template-columns:1fr}
  .step-text{font-size:1.1rem;padding:12px 14px}
  .mode-btn{padding:8px 14px;font-size:.95rem}
  .flower{width:21px;height:21px}
  .g-bed{gap:4px}
  .tb-rod{width:15px;height:110px;background:repeating-linear-gradient(to bottom,#ffb26b 0 9px,#e1873a 9px 11px)}
  .tb-cube{width:15px;height:15px}
  .tb-blocks{min-height:110px}
  .tb-ones{max-width:95px}
  .wagon-body{width:112px;min-height:80px;grid-template-columns:repeat(5,17px);gap:3px}
  .wagon-body .pax{width:17px;height:27px}
  .loco{width:74px;height:80px}
}
@media (max-width:420px){
  .flower{width:18px;height:18px}
  .g-bed{gap:3px}
  .g-row{gap:6px;padding:3px 5px}
  .garden{padding:10px 8px}
}