*{box-sizing:border-box;margin:0;padding:0;}
html,body{overflow-x:hidden;max-width:100%;}

:root{
  --cream:#f2ead8;
  --cream-dark:#e2d4b4;
  --deep-red:#7a2331;
  --deep-red-dark:#54171f;
  --copper:#b8733a;
  --copper-light:#d99a5c;
  --steel:#5b6770;
  --steel-dark:#3f484f;
  --sage:#5f7d58;
  --sage-dark:#455e40;
  --slate-blue:#4d6b8a;
  --slate-blue-dark:#365070;
  --text:#2b2420;
  --text-light:#5c5248;
  --locked:#9a9187;
  --shadow:rgba(43,36,32,0.18);
}

body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--cream);
  min-height:100vh;
  color:var(--text);
}

body.zoom-large{zoom:1.15;}
body.zoom-xlarge{zoom:1.3;}

/* ---- ALL SCREENS HIDDEN BY DEFAULT ---- */
#splash-screen,#save-screen,#world-map-screen,#zone-lines-screen,#question-screen,#line-results-screen,#test-intro-screen,#test-screen,#test-results-screen,#test-review-screen{
  display:none;
}
.screen-active{display:flex !important;}
#world-map-screen.screen-active{display:flex;}

/* ---- SPLASH SCREEN ---- */
.splash-screen{
  min-height:calc(100vh - 45px);
  width:100%;
  align-items:flex-end;justify-content:center;
  position:relative;
  background:url('images/first-page.jpg') center center/cover no-repeat;
  cursor:pointer;
}
.splash-bottom-fade{
  position:absolute;left:0;right:0;bottom:0;height:200px;
  background:linear-gradient(180deg, rgba(20,14,10,0) 0%, rgba(20,14,10,0.72) 100%);
  pointer-events:none;
}
.splash-content{
  position:relative;z-index:1;padding-bottom:40px;width:100%;
  display:flex;justify-content:center;
}
.splash-enter-btn{
  display:inline-block;
  width:auto;
  padding:16px 44px;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.5px;
  color:#fff;
  background:var(--copper);
  border:none;
  border-radius:50px;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,0.45);
  transition:background 0.2s;
}
.splash-enter-btn:hover{background:var(--copper-light);}
@media(max-width:600px){
  .splash-screen{background-color:#2b2420;}
}

/* ---- GLOBAL TOOLBAR ---- */
#global-toolbar{
  position:sticky;top:0;z-index:400;
  background:rgba(43,36,32,0.92);
  padding:6px 14px;
  display:flex;justify-content:flex-end;align-items:center;gap:8px;
  border-bottom:1px solid rgba(184,115,58,0.35);
}
#global-toolbar .toolbar-title{
  flex:1;font-size:12px;color:rgba(255,255,255,0.5);font-style:italic;
}
.toolbar-btn{
  height:32px;padding:0 10px;border-radius:16px;
  border:1px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.12);color:#fff;
  font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;white-space:nowrap;
}
.toolbar-btn:hover{background:rgba(255,255,255,0.22);border-color:var(--copper-light);}
.toolbar-btn.tb-active{background:var(--copper-light);color:var(--text)!important;border-color:var(--copper-light);}
.toolbar-btn.tb-muted{background:rgba(90,40,40,0.85);}

/* ---- SHARED CARD ---- */
.chef-card{
  background:#fff;
  border-radius:20px;
  padding:36px 30px;
  max-width:440px;
  width:100%;
  text-align:center;
  box-shadow:0 8px 32px var(--shadow);
  border:2px solid var(--cream-dark);
}
.chef-card h1,.chef-card h2{
  font-size:24px;font-weight:800;color:var(--deep-red);margin-bottom:8px;
}
.chef-card p{
  font-size:14px;color:var(--text-light);line-height:1.7;margin-bottom:22px;
}

/* ---- BUTTONS ---- */
.btn-primary{
  width:100%;padding:14px;background:var(--deep-red);color:#fff;
  border:none;border-radius:12px;font-size:15px;font-weight:700;
  cursor:pointer;transition:background 0.2s;
}
.btn-primary:hover{background:var(--deep-red-dark);}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;}

.btn-secondary{
  width:100%;padding:13px;background:#fff;color:var(--text-light);
  border:2px solid var(--steel);border-radius:12px;font-size:14px;
  font-weight:600;cursor:pointer;margin-top:10px;transition:background 0.2s;
}
.btn-secondary:hover{background:var(--cream);}

.btn-copper{
  width:100%;padding:14px;background:var(--copper);color:#fff;
  border:none;border-radius:12px;font-size:15px;font-weight:700;
  cursor:pointer;margin-top:10px;transition:background 0.2s;
}
.btn-copper:hover{background:var(--copper-light);}

/* ---- INPUT ---- */
.chef-input{
  width:100%;padding:13px 16px;font-size:16px;
  border:2px solid var(--steel);border-radius:12px;margin-bottom:14px;
  text-align:center;color:var(--text);outline:none;background:var(--cream);
  transition:border-color 0.2s;
}
.chef-input:focus{border-color:var(--copper);}
.chef-input.error{border-color:var(--deep-red);}
.show-pin-label{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--text-light);margin:-8px 0 14px;cursor:pointer;
}
.show-pin-label input{width:14px;height:14px;cursor:pointer;margin:0;}

/* ---- SAVE / RESTORE SCREEN ---- */
#save-screen{
  min-height:calc(100vh - 45px);
  align-items:center;justify-content:center;flex-direction:column;
  padding:24px;
  background:linear-gradient(160deg,#e2d4b4 0%,#f2ead8 100%);
}

/* ---- WORLD MAP SCREEN ---- */
#world-map-screen{
  flex-direction:column;min-height:calc(100vh - 45px);
  background:url('images/world-map-bg.jpg') center top/cover no-repeat;
  position:relative;
}
#world-map-screen::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(20,14,10,0.78);
  pointer-events:none;
  z-index:0;
}
#world-map-screen > *{position:relative;z-index:1;}
.map-header{padding:16px 20px 12px;text-align:center;flex-shrink:0;}
.map-header h1{
  font-size:22px;font-weight:800;color:var(--copper-light);
  letter-spacing:1px;text-transform:uppercase;
}
.map-header p{font-size:13px;color:rgba(255,255,255,0.6);margin-top:4px;}

.map-scroll{flex:1;overflow-y:auto;padding:16px 20px 24px;}

.zone-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  max-width:760px;margin:0 auto;width:100%;
}
@media(max-width:560px){.zone-grid{grid-template-columns:1fr;}}

.zone-card{
  width:100%;max-width:360px;
  background:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.15);
  border-radius:16px;padding:14px 16px;cursor:pointer;
  display:flex;align-items:flex-start;gap:12px;
  transition:all 0.2s;text-align:left;
}
.zone-card:hover{background:rgba(255,255,255,0.16);border-color:var(--copper-light);transform:translateX(4px);}

.zone-card-icon{
  font-size:22px;flex-shrink:0;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:2px solid rgba(255,255,255,0.25);
}
.zone-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.zone-card-num{font-size:10px;color:rgba(255,255,255,0.45);letter-spacing:0.5px;}
.zone-card-rank{font-size:14px;font-weight:700;color:#fff;line-height:1.3;}
.zone-card-rankdesc{font-size:11px;color:rgba(255,255,255,0.55);font-style:italic;margin-top:1px;}
.zone-card-lesson{font-size:11px;color:rgba(255,255,255,0.5);margin-top:4px;}
.zone-card-status{
  display:inline-block;margin-top:4px;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:20px;letter-spacing:0.3px;
  align-self:flex-start;
}
.status-unlocked{background:rgba(184,115,58,0.25);color:var(--copper-light);}
.status-locked{background:rgba(255,255,255,0.08);color:var(--locked);}

.tutorial-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;}
.tutorial-card{
  max-width:220px;justify-content:center;gap:10px;
  background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.15);
  border-radius:16px;padding:14px 18px;cursor:pointer;
  display:flex;align-items:center;color:#fff;font-size:14px;font-weight:700;
  transition:all 0.2s;
}
.tutorial-card:hover{transform:translateY(-2px);border-color:var(--copper-light);}

/* Deliberately understated — this isn't a game action, so it shouldn't
   visually compete with Tutorial or the zone cards. */
.teacher-only-btn{
  background:none;border:none;color:rgba(255,255,255,0.45);
  font-size:11px;font-weight:600;cursor:pointer;padding:6px 10px;
  letter-spacing:0.3px;
}
.teacher-only-btn:hover{color:rgba(255,255,255,0.75);}

.intro-icon{font-size:48px;margin-bottom:10px;display:block;}

/* ---- ZONE LINES SCREEN ---- */
#zone-lines-screen{
  flex-direction:column;min-height:calc(100vh - 45px);
  background:var(--cream);
}
/* Per-zone background image (Ch.9/11 manual). Zone 1 is the template —
   a light cream wash keeps the white header/cards legible against a
   bright photo without the heavy dark scrim the Map screen uses, so the
   photo's airy feel comes through instead of getting muddied. */
#zone-lines-screen.has-zone-bg{
  position:relative;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
}
#zone-lines-screen.has-zone-bg::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(242,234,216,0.55) 0%, rgba(242,234,216,0.8) 100%);
}
#zone-lines-screen.has-zone-bg > *{position:relative;z-index:1;}
.zl-header{
  padding:16px 20px;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-bottom:2px solid var(--cream-dark);flex-wrap:wrap;gap:8px;
}
.zl-header-title{font-size:16px;font-weight:800;color:var(--deep-red);}
.zl-header-sub{font-size:12px;color:var(--text-light);margin-top:2px;}
.zl-back-btn{
  padding:8px 14px;border-radius:10px;border:2px solid var(--steel);
  background:#fff;color:var(--text-light);font-size:12px;font-weight:700;cursor:pointer;
}
.zl-back-btn:hover{background:var(--cream);}
.zl-body{flex:1;padding:20px;max-width:640px;margin:0 auto;width:100%;}
.zl-line-card{
  background:#fff;border-radius:14px;padding:18px 20px;margin-bottom:14px;
  border:2px solid var(--cream-dark);border-left-width:5px;
  display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:border-color 0.2s;
}
.zl-line-card:hover{border-color:var(--copper);}
.zl-line-card.locked{cursor:default;}
.zl-line-card.locked:hover{border-color:var(--cream-dark);}
#zl-line-test{cursor:default;}
#zl-line-test:hover{border-color:var(--cream-dark);}
.zl-line-card.locked{opacity:0.6;}
.zl-line-title{font-size:15px;font-weight:800;color:var(--text);}
.zl-line-subtitle{font-size:12px;font-weight:600;color:var(--text-light);}
.zl-line-meta{font-size:12px;color:var(--text-light);margin-top:2px;}
.zl-line-tag{
  margin-left:auto;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;
  background:rgba(184,115,58,0.15);color:var(--copper);white-space:nowrap;
}
.zl-line-tag.tag-locked{background:rgba(154,145,135,0.2);color:var(--locked);}

/* ---- Line-type accent colors ---- */
.zl-card-vocab{border-left-color:var(--copper);}
.zl-card-vocab .zl-line-tag{background:rgba(184,115,58,0.15);color:var(--copper);}

.zl-card-words{border-left-color:var(--sage);}
.zl-card-words .zl-line-tag{background:rgba(95,125,88,0.15);color:var(--sage);}

.zl-card-test{
  border-left-color:var(--deep-red);
  background:linear-gradient(90deg,rgba(122,35,49,0.07),#fff 55%);
}
.zl-card-test .zl-line-title{color:var(--deep-red);}
.zl-card-test .zl-line-tag{background:var(--deep-red);color:#fff;}
.zl-card-test .zl-line-tag.tag-locked{background:rgba(154,145,135,0.2);color:var(--locked);}

.zl-card-mock{border-left-color:var(--slate-blue);}
.zl-card-mock .zl-line-title{color:var(--slate-blue-dark);}
.zl-card-mock .zl-line-tag{background:rgba(77,107,138,0.15);color:var(--slate-blue);}
.zl-card-mock .zl-line-tag.tag-locked{background:rgba(154,145,135,0.2);color:var(--locked);}

/* ---- TUTORIAL MODAL ---- */
.modal-bg{
  display:none;position:fixed;inset:0;background:rgba(20,14,10,0.75);
  z-index:900;align-items:center;justify-content:center;padding:16px;
}
.modal-bg.modal-open{display:flex;}
.tutorial-modal-inner{
  background:#fff;border-radius:18px;max-width:520px;width:100%;
  max-height:85vh;display:flex;flex-direction:column;overflow:hidden;
}
.tutorial-top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--deep-red);flex-shrink:0;
}
.tutorial-lang-toggle{display:flex;gap:4px;}
.tutorial-lang-btn{
  padding:5px 12px;border-radius:14px;border:none;font-size:12px;font-weight:700;
  cursor:pointer;background:rgba(255,255,255,0.18);color:#fff;
}
.tutorial-lang-btn.active{background:#fff;color:var(--deep-red);}
.tutorial-close-btn{
  background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;
}
.tutorial-scroll-card{padding:22px 24px;overflow-y:auto;}
.tutorial-scroll-text h2{font-size:19px;color:var(--deep-red);margin-bottom:10px;font-weight:800;}
.tutorial-scroll-text h3{font-size:14px;font-weight:700;color:var(--deep-red);margin:14px 0 6px;}
.tutorial-scroll-text p{font-size:13px;line-height:1.5;margin-bottom:8px;}
.tutorial-scroll-text ul{padding-left:18px;margin-bottom:8px;}
.tutorial-scroll-text li{font-size:13px;line-height:1.5;margin-bottom:8px;}
.tutorial-goodluck{font-weight:800;text-align:center;font-size:14px;margin-top:14px!important;}

@media(max-width:500px){
  .toolbar-btn{font-size:11px;padding:0 6px;height:28px;}
}

/* ---- QUESTION RUNNER (Phase 2) ---- */
#question-screen{
  min-height:calc(100vh - 45px);
  background:var(--cream);
  align-items:flex-start;justify-content:center;
  padding:20px;
}
/* Faint per-line color wash — reinforces which practice line you're in,
   matching the Station screen's card accent colors (Ch.4/11 manual).
   Deliberately NOT applied to the Test/Mock screens: a red backdrop on a
   timed, one-attempt exam reads as alarming rather than on-brand, so the
   Test keeps red as a functional accent (timer, topbar) only. */
#question-screen.line-vocab{background:linear-gradient(160deg,#e8cea6 0%,var(--cream) 100%);}
#question-screen.line-words{background:linear-gradient(160deg,#c9dbc0 0%,var(--cream) 100%);}
.q-wrap{max-width:560px;width:100%;}
.q-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.q-topbar span{font-size:13px;font-weight:700;color:var(--text-light);}
.q-exit-row{margin-top:16px;}
.q-exit-btn{
  background:#fff;color:var(--text-light);font-size:14px;font-weight:700;
  border:2px solid var(--cream-dark);border-radius:22px;
  padding:10px 20px;cursor:pointer;box-shadow:0 2px 8px var(--shadow);
}
.q-exit-btn:hover{color:var(--deep-red);border-color:var(--deep-red);}
.q-card{
  background:#fff;border-radius:18px;padding:28px 26px;
  border:2px solid var(--cream-dark);box-shadow:0 6px 24px var(--shadow);
}
.q-prompt{font-size:17px;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:16px;}
.q-image{width:100%;max-width:360px;border-radius:12px;display:block;margin:0 auto 18px;}
.q-image-placeholder{
  width:100%;max-width:360px;height:180px;border-radius:12px;margin:0 auto 18px;
  background:var(--cream-dark);border:2px dashed var(--steel);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-light);font-size:14px;font-weight:600;text-align:center;
}
.q-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px;}
@media(max-width:460px){.q-options{grid-template-columns:1fr;}}
.q-option-btn{
  padding:13px 14px;border-radius:12px;border:2px solid var(--steel);
  background:var(--cream);color:var(--text);font-size:14px;font-weight:600;
  cursor:pointer;transition:all 0.15s;text-align:center;
}
.q-option-btn:hover:not(:disabled){border-color:var(--copper);background:#fff;}
.q-option-btn:disabled{cursor:default;}
.q-option-btn.q-correct{background:#dcefdc;border-color:#4a8f4a;color:#2c5e2c;}
.q-option-btn.q-wrong{background:#f5dcdc;border-color:var(--deep-red);color:var(--deep-red-dark);}
.q-fill-area{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}

/* -- build (unscramble) -- */
.q-build-area{display:flex;flex-direction:column;gap:14px;margin-bottom:6px;}
.q-build-assembled{
  min-height:52px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;
  border:2px dashed var(--steel);border-radius:10px;padding:8px;
}
.q-build-letter{
  background:var(--copper);color:#fff;border:none;border-radius:8px;
  width:36px;height:36px;font-weight:700;font-size:15px;cursor:pointer;
}
.q-build-tiles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.q-build-tile{
  background:var(--cream);border:2px solid var(--steel);border-radius:8px;
  width:36px;height:36px;font-weight:700;font-size:15px;cursor:pointer;color:var(--text);
}
.q-build-tile:disabled{opacity:0.3;cursor:default;}
.q-build-btns{display:flex;gap:10px;}
.q-build-btns .btn-secondary,.q-build-btns .btn-copper{width:auto;flex:1;margin-top:0;padding:11px;}

/* -- matching -- */
.q-matching-area{display:flex;gap:16px;margin-bottom:6px;}
.q-match-col{flex:1;display:flex;flex-direction:column;gap:8px;}
.q-match-item{
  padding:12px 10px;border-radius:10px;border:2px solid var(--steel);
  background:var(--cream);cursor:pointer;font-size:13px;font-weight:600;
  text-align:center;transition:all 0.15s;
}
.q-match-item.selected{border-color:var(--copper);background:#fff;}
.q-match-item.matched{background:#dcefdc;border-color:#4a8f4a;color:#2c5e2c;cursor:default;}
.q-match-item.mismatch{background:#f5dcdc;border-color:var(--deep-red);}

/* -- sequence -- */
.q-sequence-area{display:flex;flex-direction:column;gap:14px;margin-bottom:6px;}
.q-seq-list{display:flex;flex-direction:column;gap:8px;}
.q-seq-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:2px solid var(--steel);background:var(--cream);font-size:13px;font-weight:600;
}
.q-seq-item-text{flex:1;}
.q-seq-arrows{display:flex;flex-direction:column;gap:2px;}
.q-seq-arrow-btn{
  background:#fff;border:1px solid var(--steel);border-radius:6px;
  width:26px;height:20px;font-size:11px;cursor:pointer;line-height:1;
}
.q-seq-arrow-btn:disabled{opacity:0.3;cursor:default;}
.q-seq-item.q-correct{background:#dcefdc;border-color:#4a8f4a;}
.q-seq-item.q-wrong{background:#f5dcdc;border-color:var(--deep-red);}

/* -- sort -- */
.q-sort-area{display:flex;flex-direction:column;gap:14px;margin-bottom:6px;}
.q-sort-list{display:flex;flex-direction:column;gap:10px;}
.q-sort-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:10px;border:2px solid var(--cream-dark);flex-wrap:wrap;
}
.q-sort-label{font-size:13px;font-weight:600;}
.q-sort-choices{display:flex;gap:6px;}
.q-sort-choice-btn{
  padding:6px 12px;border-radius:16px;border:2px solid var(--steel);
  background:var(--cream);font-size:11px;font-weight:700;cursor:pointer;
}
.q-sort-choice-btn.selected{background:var(--copper);color:#fff;border-color:var(--copper);}
.q-sort-row.q-correct{border-color:#4a8f4a;background:#f4faf4;}
.q-sort-row.q-wrong{border-color:var(--deep-red);background:#fbf4f4;}

/* -- hotspot -- */
.q-hotspot-area{margin-bottom:6px;}
.q-hotspot-frame{position:relative;width:100%;max-width:360px;margin:0 auto;}
.q-hotspot-frame img{width:100%;border-radius:12px;display:block;}
.q-hotspot-frame .q-image-placeholder{margin:0;}
.q-hotspot-dot{
  position:absolute;width:15%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,0.35);border:2px solid rgba(255,255,255,0.85);
  transform:translate(-50%,-50%);cursor:pointer;
}
.q-hotspot-dot.q-correct{background:rgba(74,143,74,0.8);border-color:#2c5e2c;}
.q-hotspot-dot.q-wrong{background:rgba(122,35,49,0.8);border-color:var(--deep-red-dark);}
.q-feedback{
  margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14px;font-weight:600;
white-space:pre-line;}
.q-feedback-correct{background:#dcefdc;color:#2c5e2c;}
.q-feedback-wrong{background:#f5dcdc;color:var(--deep-red-dark);}
#q-next-btn{margin-top:18px;}

/* ---- LINE RESULTS (Phase 2) ---- */
#line-results-screen{
  min-height:calc(100vh - 45px);align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(160deg,#e2d4b4 0%,#f2ead8 100%);
}
#line-results-screen.line-vocab{background:linear-gradient(160deg,#e8cea6 0%,#f2ead8 100%);}
#line-results-screen.line-words{background:linear-gradient(160deg,#c9dbc0 0%,#f2ead8 100%);}
.results-counts{display:flex;justify-content:center;gap:28px;margin-bottom:26px;}
.results-count-correct,.results-count-wrong{text-align:center;}
.results-count-correct span,.results-count-wrong span{
  display:block;font-size:38px;font-weight:800;line-height:1;
}
.results-count-correct span{color:#2c8a2c;}
.results-count-wrong span{color:var(--deep-red);}
.results-count-correct div,.results-count-wrong div{
  font-size:12px;color:var(--text-light);margin-top:4px;font-weight:600;letter-spacing:0.3px;
}

/* ==================== TEST ENGINE (Phase 3) ==================== */

/* ---- TEST INTRO SCREEN ---- */
#test-intro-screen{
  min-height:calc(100vh - 45px);align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(160deg,#e2d4b4 0%,#f2ead8 100%);
}
/* Per-mode background wash across the whole Test flow (intro, runner,
   results) — Real Test reads red, Mock Test reads blue, deliberately
   toned down (not the bold saturation used for Vocab/Kitchen Language
   Focus) since the real Test is timed and one-attempt-only; a loud red
   room adds pressure rather than just branding. See Ch.3/11 manual. */
#test-intro-screen.mode-real,#test-screen.mode-real,#test-results-screen.mode-real{
  background:linear-gradient(160deg,#e0c3c8 0%,#f2ead8 100%);
}
#test-intro-screen.mode-mock,#test-screen.mode-mock,#test-results-screen.mode-mock{
  background:linear-gradient(160deg,#c3d4e3 0%,#f2ead8 100%);
}

/* ---- TEST RUNNER SCREEN ---- */
#test-screen{
  min-height:calc(100vh - 45px);
  background:var(--cream);
  align-items:flex-start;justify-content:center;
  padding:20px;
}

/* -- shared: neutral "this is your current answer" state, distinct from
   the green/red correct/wrong colors used in Lines 1/2 practice, since
   the Test never reveals correctness until final submission -- */
.t-option-btn{
  padding:13px 14px;border-radius:12px;border:2px solid var(--steel);
  background:var(--cream);color:var(--text);font-size:14px;font-weight:600;
  cursor:pointer;transition:all 0.15s;text-align:center;
}
.t-option-btn:hover{border-color:var(--copper);background:#fff;}
.t-option-btn.t-selected{border-color:var(--copper);background:#fff2e2;color:var(--deep-red-dark);}

.t-prompt-sentence{font-size:15px;font-weight:600;color:var(--text);margin:-8px 0 14px;}

/* -- build -- */
.t-build-letter{
  background:var(--copper);color:#fff;border:none;border-radius:8px;
  width:36px;height:36px;font-weight:700;font-size:15px;cursor:pointer;
}
.t-build-tile{
  background:var(--cream);border:2px solid var(--steel);border-radius:8px;
  width:36px;height:36px;font-weight:700;font-size:15px;cursor:pointer;color:var(--text);
}
.t-build-tile:disabled{opacity:0.3;cursor:default;}

/* -- matching -- */
.t-match-item{
  padding:12px 10px;border-radius:10px;border:2px solid var(--steel);
  background:var(--cream);cursor:pointer;font-size:13px;font-weight:600;
  text-align:center;transition:all 0.15s;
}
.t-match-item.t-selected{border-color:var(--copper);background:#fff2e2;}
.t-match-item.t-matched{background:#eef1f3;border-color:var(--steel-dark);color:var(--steel-dark);}

/* -- sequence -- */
.t-seq-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  border:2px solid var(--steel);background:var(--cream);font-size:13px;font-weight:600;
}
.t-seq-item-text{flex:1;}
.t-seq-arrows{display:flex;flex-direction:column;gap:2px;}
.t-seq-arrow-btn{
  background:#fff;border:1px solid var(--steel);border-radius:6px;
  width:26px;height:20px;font-size:11px;cursor:pointer;line-height:1;
}
.t-seq-arrow-btn:disabled{opacity:0.3;cursor:default;}

/* -- sort -- */
.t-sort-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:10px;border:2px solid var(--cream-dark);flex-wrap:wrap;
}
.t-sort-label{font-size:13px;font-weight:600;}
.t-sort-choices{display:flex;gap:6px;}
.t-sort-choice-btn{
  padding:6px 12px;border-radius:16px;border:2px solid var(--steel);
  background:var(--cream);font-size:11px;font-weight:700;cursor:pointer;
}
.t-sort-choice-btn.t-selected{background:var(--copper);color:#fff;border-color:var(--copper);}

/* -- hotspot: reuses .q-hotspot-dot, just needs a neutral selected state -- */
.q-hotspot-dot.t-selected{background:rgba(184,115,58,0.85);border-color:var(--copper);}

/* -- test runner chrome -- */
.t-wrap{max-width:560px;width:100%;}
.t-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
.t-topbar span{font-size:13px;font-weight:700;color:var(--text-light);}
.t-timer{
  font-size:16px;font-weight:800;color:var(--deep-red);font-variant-numeric:tabular-nums;
  background:#fff;border:2px solid var(--deep-red);border-radius:10px;padding:4px 12px;
}
.t-timer.t-timer-warn{background:var(--deep-red);color:#fff;animation:t-pulse 1s infinite;}
@keyframes t-pulse{0%,100%{opacity:1;}50%{opacity:0.55;}}
.t-nav-grid{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;padding:10px;
  background:rgba(255,255,255,0.5);border-radius:12px;border:2px solid var(--cream-dark);
}
.t-nav-btn{
  width:30px;height:30px;border-radius:8px;border:2px solid var(--steel);
  background:var(--cream);font-size:12px;font-weight:700;cursor:pointer;color:var(--text);
}
.t-nav-btn.t-nav-answered{background:var(--copper-light);border-color:var(--copper);color:#fff;}
.t-nav-btn.t-nav-current{border-color:var(--deep-red);box-shadow:0 0 0 2px var(--deep-red);}
.t-footer-nav{display:flex;gap:10px;margin-top:16px;}
.t-footer-nav .btn-secondary,.t-footer-nav .btn-primary{width:auto;flex:1;margin-top:0;padding:12px;}
#t-submit-btn{background:var(--deep-red);}
#t-submit-btn:hover{background:var(--deep-red-dark);}

/* -- test results -- */
#test-results-screen{
  min-height:calc(100vh - 45px);align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(160deg,#e2d4b4 0%,#f2ead8 100%);
}
.test-results-score{font-size:44px;font-weight:800;color:var(--text);margin:8px 0;}
.test-results-passfail{font-size:15px;font-weight:700;padding:8px 14px;border-radius:10px;display:inline-block;margin-bottom:16px;}
.test-results-passfail.test-pass{background:#dcefdc;color:#2c5e2c;}
.test-results-passfail.test-fail{background:#f5dcdc;color:var(--deep-red-dark);}
.test-results-save-msg{
  font-size:13px;font-weight:600;color:#2c5e2c;background:#dcefdc;
  border-radius:10px;padding:10px 14px;margin-bottom:18px;
}
.test-results-save-msg.test-results-save-error{
  color:var(--deep-red-dark);background:#f5dcdc;
}
.test-results-check-label{
  display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:14px;font-weight:600;margin:16px 0;cursor:pointer;
}
.test-results-check-label input{width:18px;height:18px;cursor:pointer;}

/* ---- Spelling box (type-the-name questions) ---- */
.sp-word{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:44px;cursor:text;}
.sp-letter{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:40px;border-radius:6px;
  font-size:22px;font-weight:700;text-transform:lowercase;
  border:2px solid transparent;background:#fff;
}
.sp-ok{color:#2c7a3a;border-color:#8fc79a;background:#eaf6ec;}
.sp-help{color:#2f5fae;border-color:#9bb8e6;background:#e9f0fb;}
.sp-wrong{color:#b3261e;border-color:#e59a95;background:#fbe9e8;animation:sp-shake .3s;}
.sp-blank{border:2px dashed var(--cream-dark);background:transparent;}
@keyframes sp-shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}
.sp-rule{font-size:13px;color:var(--text-light);text-align:center;line-height:1.4;}
.sp-g{color:#2c7a3a;font-weight:700;}
.sp-r{color:#b3261e;font-weight:700;}
.sp-info{font-size:13px;color:var(--text);text-align:center;}
.sp-hint{color:var(--text-light);}
.sp-note{font-size:13px;border-radius:6px;padding:8px 10px;text-align:center;display:none;}
.sp-note-wrong{background:#f5dcdc;color:var(--deep-red-dark);}
.sp-note-ok{background:#dcefdc;color:#2c5e2c;}
.sp-input-live{text-align:center;}
.sp-input-black{color:#000;text-align:center;font-weight:600;}
.sp-help-btn{width:auto;margin-top:0;}

/* ---- Matching board (chef-matching.js): rows line up, neutral until the end ---- */
.mb-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.mb-item{margin:0;height:100%;}
.mb-item.mb-paired{background:#eef1f3;border-color:var(--steel);color:var(--text);}
.mb-item.mb-right{background:#dcefdc;border-color:#4a8f4a;color:#2c5e2c;}
.mb-item.mb-wrong{background:#f5dcdc;border-color:var(--deep-red);color:var(--deep-red-dark);}
.mb-item:disabled{opacity:1;cursor:default;}

/* ---- Save screen: remembered student ---- */
.save-remembered{text-align:center;margin:4px 0 12px;}
.save-remembered-name{font-weight:700;color:var(--text);margin-bottom:4px;}
.save-not-you{background:none;border:0;padding:4px;color:var(--copper);text-decoration:underline;cursor:pointer;font-size:13px;width:auto;}

/* ---- Start page: Practice / Test buttons ---- */
.splash-btn-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.splash-test-btn{background:var(--deep-red);}
.splash-test-btn:hover{background:var(--deep-red-dark);}
.splash-screen{cursor:default;}

/* ---- Map: Take the Test (Practice mode) ---- */
.take-test-btn{
  background:var(--deep-red);color:#fff;border:none;border-radius:50px;
  padding:12px 26px;font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
}
.take-test-btn:hover{background:var(--deep-red-dark);}

/* ---- Info pop-up (classroom note, locked Test, Test not open) ---- */
.info-card p{text-align:left;}
.info-card p strong{color:var(--text);}
#save-year{appearance:auto;background:#fff;}

/* ---- Test login: Zone 1's Station photo behind the card, with the same
   light cream wash as the Station screens so the card stays easy to read ---- */
#save-screen{
  position:relative;
  background:url('images/zone-bg-z1.jpg') center center/cover no-repeat;
}
#save-screen::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg, rgba(242,234,216,0.55) 0%, rgba(242,234,216,0.8) 100%);
}
#save-screen > *{position:relative;z-index:1;}

/* ---- Test review (after a Test / Mock Test) ---- */
#test-review-screen{min-height:calc(100vh - 45px);flex-direction:column;align-items:center;padding:20px 14px 40px;background:var(--cream);}
.rv-wrap{max-width:640px;width:100%;}
.rv-head{text-align:center;margin-bottom:14px;}
.rv-head h2{font-size:22px;font-weight:800;color:var(--deep-red);margin-bottom:4px;}
.rv-summary{font-size:14px;color:var(--text-light);}
.rv-card{background:#fff;border-radius:14px;padding:14px 16px;margin-bottom:10px;border:2px solid var(--cream-dark);border-left-width:6px;}
.rv-card.rv-ok{border-left-color:#4a8f4a;}
.rv-card.rv-no{border-left-color:var(--deep-red);}
.rv-num{font-size:11px;font-weight:700;color:var(--text-light);margin-bottom:4px;}
.rv-mark{font-weight:800;margin-right:6px;}
.rv-ok .rv-mark{color:#2c7a3a;}
.rv-no .rv-mark{color:var(--deep-red);}
.rv-q{font-weight:700;font-size:14px;color:var(--text);margin-bottom:8px;}
.rv-img{max-width:140px;max-height:120px;border-radius:8px;display:block;margin-bottom:8px;}
.rv-line{font-size:13px;line-height:1.5;color:var(--text);}
.rv-line b{color:var(--text-light);font-weight:600;}
.rv-correct{color:#2c5e2c;}
.rv-back{margin-top:10px;}

/* ---- My results pop-up ---- */
.mr-table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;margin-top:4px;}
.mr-table td{padding:7px 4px;border-top:1px solid var(--cream-dark);vertical-align:top;}
.mr-score{font-weight:800;white-space:nowrap;}
.mr-pass{color:#2c7a3a;font-weight:700;}
.mr-fail{color:var(--deep-red);font-weight:700;}
.mr-none{color:var(--text-light);}

/* ===================== PICTURE TYPES (Sept 20) — chef-pictures.js ===================== */
/* -- numbered picture (numpic) -- */
.np-area,.wp-area{margin-bottom:6px;}
.np-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:520px;margin:0 auto 8px;}
.np-board.np-board-3{grid-template-columns:repeat(3,1fr);max-width:420px;}
@media(max-width:460px){.np-board{grid-template-columns:repeat(3,1fr);}}
.np-cell{position:relative;padding:0;border:2px solid var(--cream-dark);border-radius:10px;overflow:hidden;
  background:#fff;cursor:zoom-in;aspect-ratio:1/1;}
.np-cell img{width:100%;height:100%;object-fit:cover;display:block;}
.np-cell.np-missing{background:var(--cream-dark);}
.np-cell.np-missing img{visibility:hidden;}
.np-num{position:absolute;top:4px;left:4px;min-width:24px;height:24px;padding:0 5px;border-radius:12px;
  background:var(--steel-dark);color:#fff;font-size:13px;font-weight:700;line-height:24px;text-align:center;
  box-shadow:0 1px 3px var(--shadow);}
.np-hint{font-size:12px;color:var(--text-light);text-align:center;margin:0 0 8px;}
.np-boxes{display:flex;flex-direction:column;gap:8px;max-width:360px;margin:0 auto 10px;}
.np-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px 6px 12px;border-radius:10px;background:var(--cream);border:1px solid var(--cream-dark);}
.np-label{font-size:14px;font-weight:600;}
.np-box{width:52px;height:40px;border-radius:9px;border:2px dashed var(--steel);background:#fff;
  font-size:17px;font-weight:700;color:var(--text-light);cursor:pointer;flex-shrink:0;}
.np-box.selected{border-style:solid;border-color:var(--copper);}
.np-box.np-filled{border-style:solid;background:#eef1f3;color:var(--text);}
.np-box.np-right{border-style:solid;background:#dcefdc;border-color:#4a8f4a;color:#2c5e2c;}
.np-box.np-wrong{border-style:solid;background:#f5dcdc;border-color:var(--deep-red);color:var(--deep-red-dark);}
.np-box:disabled{cursor:default;opacity:1;}
.np-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.np-chip{width:46px;height:40px;border-radius:9px;border:2px solid var(--steel);background:var(--cream);
  font-size:17px;font-weight:700;color:var(--text);cursor:pointer;}
.np-chip.selected{border-color:var(--copper);background:#fff;box-shadow:0 0 0 2px var(--copper-light);}
.np-chip:disabled{opacity:0.3;cursor:default;}
/* -- word to picture (wordpic) -- */
.wp-word{text-align:center;font-size:22px;font-weight:700;color:var(--deep-red);margin:2px 0 10px;}
.wp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin:0 auto;}
.wp-option{padding:0;border:3px solid var(--cream-dark);border-radius:12px;overflow:hidden;background:#fff;
  cursor:pointer;aspect-ratio:1/1;transition:border-color 0.15s;}
.wp-option img{width:100%;height:100%;object-fit:cover;display:block;}
.wp-option:hover:not(:disabled){border-color:var(--copper);}
.wp-option:disabled{cursor:default;}
.wp-option.t-selected{border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-light);}
.wp-option.wp-right{border-color:#4a8f4a;box-shadow:0 0 0 3px #9fcb9f;}
.wp-option.wp-wrong{border-color:var(--deep-red);opacity:0.75;}
.wp-option.wp-missing{background:var(--cream-dark);}
/* -- tap-to-enlarge -- */
.pic-zoom{position:fixed;inset:0;z-index:9999;background:rgba(20,16,14,0.85);display:none;
  align-items:center;justify-content:center;padding:16px;cursor:zoom-out;}
.pic-zoom-inner{text-align:center;max-width:92vw;}
.pic-zoom img{max-width:92vw;max-height:78vh;border-radius:12px;display:block;margin:0 auto;}
.pic-zoom-cap{color:#fff;font-size:20px;font-weight:700;margin-top:10px;}
.pic-zoom-hint{color:#d8cfc2;font-size:13px;margin-top:4px;}
/* -- review cards -- */
.rv-board{margin:8px 0;}
.rv-board .np-board{max-width:360px;margin:0;}
.rv-wp-imgs{display:flex;gap:6px;margin:8px 0;}
.rv-wp-imgs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid var(--cream-dark);}
.rv-wp-imgs img.rv-wp-right{border-color:#4a8f4a;}
.rv-wp-imgs img.rv-wp-mine{border-color:var(--copper);}