/* ================= Base ================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root{
  --red:#ef4444; --blue:#3b82f6; --green:#22c55e; --amber:#f59e0b;
  --ink:#1e293b; --muted:#64748b;
  --radius:20px;
}
html, body { margin:0; padding:0; }
body{
  font-family:"Trebuchet MS","Comic Sans MS","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -10%, #e0f2fe 0%, transparent 60%),
    linear-gradient(180deg,#bae6fd 0%, #e0f2fe 40%, #ecfdf5 100%);
  min-height:100vh;
  touch-action:manipulation;
  user-select:none;
}
button{ font-family:inherit; touch-action:manipulation; }
.card{
  background:#fff; border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(2,60,105,.12);
  border:2px solid #e0f2fe;
}

#app{ max-width:1060px; margin:0 auto; padding:14px; display:flex; flex-direction:column; gap:14px; }

/* ================= Topbar ================= */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; flex-wrap:wrap; }
.title{ display:flex; align-items:center; gap:12px; }
.title-emoji{ font-size:44px; }
.title h1{ margin:0; font-size:26px; letter-spacing:.3px; }
.subtitle{ margin:2px 0 0; color:var(--muted); font-size:14px; }
.score-box{ text-align:right; min-width:190px; }
.score{ font-size:30px; font-weight:800; color:#0f172a; }
.score small{ font-size:13px; color:var(--muted); font-weight:600; }
.hud-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.qcount{ font-size:13px; color:var(--muted); font-weight:700; }
.timer{ font-size:16px; font-weight:900; color:#0f172a; font-variant-numeric:tabular-nums; }
.timer.low{ color:#dc2626; }
.progress{ height:10px; background:#e2e8f0; border-radius:99px; overflow:hidden; margin-top:6px; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,#22c55e,#84cc16); transition:width .35s; }

/* ================= Stage ================= */
.stage{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:840px){ .stage{ grid-template-columns:1fr; } }

/* ================= Map ================= */
.map-card{ padding:14px; }
.map-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.map-tag{ font-weight:800; font-size:16px; }
.map-legend{ font-size:12.5px; color:var(--muted); font-weight:600; }
.map-wrap{ position:relative; width:100%; aspect-ratio:1/1; }
.map-grid{
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr);
  gap:6px; width:100%; height:100%;
  background:#86efac; padding:8px; border-radius:16px;
  border:3px solid #4ade80;
}
.cell{
  background:#f0fdf4; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; overflow:hidden; position:relative;
}
.cell .cell-emoji{ font-size:clamp(20px, 4.6vmin, 40px); line-height:1; }
.cell .cell-name{ font-size:clamp(7px, 1.5vmin, 11px); font-weight:800; color:#166534; }
.cell.tree{ background:#dcfce7; }
.cell.tree .cell-name{ display:none; }
.cell.is-target{ background:#fef9c3; box-shadow:inset 0 0 0 3px #facc15; }
.cell.is-target::after{
  content:"🎯"; position:absolute; top:-2px; right:0px;
  font-size:clamp(12px, 2.4vmin, 20px);
  animation:targetBounce 0.9s ease-in-out infinite alternate;
}
@keyframes targetBounce{ from{ transform:translateY(0);} to{ transform:translateY(-4px);} }

.token{
  position:absolute; width:20%; height:20%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(22px, 4.8vmin, 42px);
  transform:translate(-50%,-50%);
  transition:left .35s cubic-bezier(.5,1.6,.4,1), top .35s cubic-bezier(.5,1.6,.4,1);
  pointer-events:none; z-index:5;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.map-wrap.shake{ animation:shake .4s; }
@keyframes shake{
  0%,100%{ transform:translateX(0);}
  20%{ transform:translateX(-8px);} 40%{ transform:translateX(8px);}
  60%{ transform:translateX(-5px);} 80%{ transform:translateX(5px);}
}
.map-wrap.happy .token{ animation:hop .5s; }
@keyframes hop{ 0%,100%{ margin-top:0;} 40%{ margin-top:-14px;} }

/* ================= Play card ================= */
.play-card{ padding:16px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.instr{ width:100%; background:#f8fafc; border:2px dashed #cbd5e1; border-radius:16px; padding:12px 14px; }
.instr-go{ font-size:clamp(19px, 3.2vmin, 26px); font-weight:800; }
.instr-dir{
  margin-top:8px; display:flex; align-items:center; gap:10px;
  font-size:clamp(18px, 3vmin, 25px); font-weight:800;
}
.dir-arrow{ font-size:1.4em; }
.dir-N{ color:var(--red);} .dir-S{ color:var(--blue);} .dir-E{ color:var(--green);} .dir-W{ color:var(--amber);}

.route-chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:10px 0 4px; min-height:30px; }
.chip{
  display:inline-flex; align-items:center; gap:4px;
  border-radius:99px; padding:5px 13px;
  font-size:15px; font-weight:900;
  background:#e2e8f0; color:#64748b; border:2.5px solid transparent;
}
.chip-cur{ background:#fff; color:#0f172a; border-color:#0f172a; transform:scale(1.1); box-shadow:0 3px 0 rgba(15,23,42,.2); }
.chip-done{ opacity:.4; text-decoration:line-through; }
.chip-arrow{ font-size:18px; font-weight:900; color:#94a3b8; }
.instr-foot{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.steps{ display:flex; gap:7px; }
.step-dot{ width:20px; height:20px; border-radius:50%; background:#e2e8f0; border:2px solid #cbd5e1; }
.step-dot.done{ background:#22c55e; border-color:#16a34a; box-shadow:0 0 0 3px rgba(34,197,94,.25); }

.banner{
  width:100%; text-align:center; background:#fef9c3; border:3px solid #facc15;
  border-radius:16px; padding:14px;
  animation:pop .3s ease;
}
@keyframes pop{ from{ transform:scale(.85); opacity:0;} to{ transform:scale(1); opacity:1;} }
.banner-star{ font-size:44px; animation:spin 1.2s ease; }
@keyframes spin{ from{ transform:rotate(-180deg) scale(.3);} to{ transform:rotate(0) scale(1);} }
.banner-text{ font-size:24px; font-weight:800; color:#854d0e; margin:4px 0 10px; }

/* ================= Buttons ================= */
.btn{
  border:none; cursor:pointer; font-weight:800; font-size:16px;
  padding:12px 20px; border-radius:14px;
  background:#0284c7; color:#fff;
  box-shadow:0 4px 0 #0369a1;
  transition:transform .06s, box-shadow .06s;
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #0369a1; }
.btn:disabled{ background:#cbd5e1; box-shadow:0 4px 0 #94a3b8; cursor:not-allowed; }
.btn-small{ padding:8px 14px; font-size:14px; border-radius:11px; background:#e2e8f0; color:#334155; box-shadow:0 3px 0 #cbd5e1; }
.btn-small:active{ box-shadow:0 1px 0 #cbd5e1; }
.btn-big{ font-size:20px; padding:14px 34px; background:#16a34a; box-shadow:0 5px 0 #15803d; }
.btn-big:active{ box-shadow:0 1px 0 #15803d; }
.btn-ghost{ background:#fff; color:#475569; box-shadow:0 4px 0 #cbd5e1; }
.btn-lock{ background:#7c3aed; box-shadow:0 4px 0 #6d28d9; }
.row{ display:flex; }
.gap{ gap:10px; flex-wrap:wrap; justify-content:center; }

/* ================= Compass ================= */
.compass-wrap{
  position:relative;
  width:min(330px, 88vw); aspect-ratio:1/1;
}
.rose{
  position:absolute; top:50%; left:50%; width:46%; height:46%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.rose svg{ width:100%; height:100%; display:block; }
.rose-star{ transform-origin:50px 50px; animation:roseSway 4s ease-in-out infinite; }
@keyframes roseSway{ 0%,100%{ transform:rotate(-7deg);} 50%{ transform:rotate(7deg);} }

.cbtn{
  position:absolute; z-index:6;
  width:34%; height:29%;
  border:none; border-radius:18px;
  color:#fff; font-weight:900;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:clamp(20px, 4vmin, 30px);
  cursor:pointer;
  transition:transform .07s, box-shadow .07s, filter .15s;
}
.cbtn span{ font-size:.42em; letter-spacing:1.5px; font-weight:800; margin-top:1px; }
.cbtn:active{ transform:scale(.94); }
.cbtn-n{ top:0; left:33%; background:var(--red); box-shadow:0 6px 0 #b91c1c; }
.cbtn-s{ bottom:0; left:33%; background:var(--blue); box-shadow:0 6px 0 #1d4ed8; }
.cbtn-e{ right:0; top:35.5%; background:var(--green); box-shadow:0 6px 0 #15803d; }
.cbtn-w{ left:0; top:35.5%; background:var(--amber); box-shadow:0 6px 0 #b45309; }
.cbtn-n:active{ transform:translateY(4px) scale(.97); box-shadow:0 2px 0 #b91c1c; }
.cbtn-s:active{ transform:translateY(4px) scale(.97); box-shadow:0 2px 0 #1d4ed8; }
.cbtn-e:active{ transform:translateX(4px) scale(.97); box-shadow:0 2px 0 #15803d; }
.cbtn-w:active{ transform:translateX(-4px) scale(.97); box-shadow:0 2px 0 #b45309; }

.float-pop{
  position:absolute; left:50%; top:42%;
  transform:translateX(-50%);
  font-size:34px; font-weight:900; pointer-events:none; z-index:9;
  animation:floatUp .9s ease forwards;
}
.float-pop.good{ color:#16a34a; text-shadow:0 2px 0 #fff; }
.float-pop.bad{ color:#dc2626; text-shadow:0 2px 0 #fff; }
@keyframes floatUp{
  0%{ opacity:0; transform:translate(-50%, 10px) scale(.6);}
  25%{ opacity:1; transform:translate(-50%, 0) scale(1.15);}
  100%{ opacity:0; transform:translate(-50%, -46px) scale(1);}
}

.hint{ margin:0; font-size:13.5px; color:var(--muted); font-weight:600; text-align:center; }

/* ================= Toolbar ================= */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:12px; }

/* ================= Overlay / Modal ================= */
.overlay[hidden], .modal[hidden]{ display:none !important; }
.overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(15,23,42,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.overlay-card{ text-align:center; padding:30px 34px; max-width:430px; width:100%; }
.trophy{ font-size:64px; animation:spin 1s ease; }
.overlay-card h2{ margin:8px 0 2px; font-size:28px; }
.end-score{ font-size:40px; font-weight:900; color:#0284c7; margin:8px 0; }
.end-stats{ font-weight:800; color:var(--muted); margin:0 0 6px; font-size:14.5px; }

/* ---- Start screen ---- */
.start-sub{ color:var(--muted); font-weight:700; margin:4px 0 6px; line-height:1.45; }
.start-label{ font-weight:900; font-size:15.5px; margin:14px 0 7px; text-align:center; }
.start-label small{ font-weight:700; color:var(--muted); font-size:12px; }
.lvl-row,.time-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.lvl-btn,.time-btn{
  border:none; border-radius:13px; cursor:pointer;
  background:#e2e8f0; color:#334155;
  font-family:inherit; font-weight:900;
  box-shadow:0 4px 0 #cbd5e1;
  transition:transform .07s, box-shadow .07s;
}
.lvl-btn{ width:52px; padding:8px 0 6px; font-size:21px; }
.lvl-btn small{ display:block; font-size:9.5px; letter-spacing:.5px; margin-top:1px; }
.time-btn{ padding:10px 16px; font-size:16px; }
.lvl-btn:active,.time-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #cbd5e1; }
.lvl-btn.sel,.time-btn.sel{ background:#0284c7; color:#fff; box-shadow:0 4px 0 #0369a1; }
.lvl-btn.sel:active,.time-btn.sel:active{ box-shadow:0 1px 0 #0369a1; }
#startBtn{ margin-top:20px; width:100%; }
.stars{ font-size:34px; letter-spacing:6px; margin:4px 0; }
.star-dim{ filter:grayscale(1); opacity:.35; }
.end-msg{ color:var(--muted); font-weight:700; margin:6px 0 16px; }

.modal{ position:fixed; inset:0; z-index:60; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-card{ max-width:560px; width:100%; padding:22px; }
.modal-card h3{ margin:0 0 8px; font-size:20px; }
.modal-card p{ color:var(--muted); font-weight:600; }
.code-input{
  width:100%; font-size:30px; text-align:center; letter-spacing:12px;
  padding:12px; border-radius:14px; border:3px solid #c4b5fd; background:#f5f3ff;
  margin:12px 0; font-weight:900;
}
.code-input:focus{ outline:none; border-color:#7c3aed; }
.err{ color:#dc2626; font-weight:800; margin:10px 0 0; }
.key-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 18px;
  margin:12px 0; font-weight:700; font-size:14.5px;
}
.key-item{ display:flex; justify-content:space-between; gap:8px; background:#f8fafc; border-radius:10px; padding:6px 10px; }
.key-item b{ color:#0284c7; white-space:nowrap; }
.key-note{ font-size:12.5px; color:var(--muted); }
.modal.shake{ animation:shake .4s; }

/* ================= Sheets (A4 print) ================= */
.sheet{ display:none; color:#111; }
@page { size:A4 portrait; margin:12mm; }

@media print {
  html, body { background:#fff !important; }
  #app, #endOverlay, #keyModal, .toolbar { display:none !important; }
  .sheet { display:block !important; }
  body.print-key #printSheet { display:none !important; }
  #keySheet { display:none !important; }
  body.print-key #keySheet { display:block !important; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* --- Worksheet layout: exactly 2 A4 pages --- */
.ws-page{ page-break-inside:avoid; }
.ws-page2{ page-break-before:always; }

/* Page 1 header */
.ws-head{ border-bottom:3px solid #0f172a; padding-bottom:2.5mm; margin-bottom:4mm; }
.ws-head h1{ font-size:19pt; margin:0 0 1.5mm; }
.ws-meta{ display:flex; gap:8mm; font-size:10.5pt; flex-wrap:wrap; }
.ws-instr{
  margin:2.5mm 0 0; font-size:10pt; font-weight:600;
  background:#fef9c3; border:1pt solid #facc15; border-radius:2mm; padding:1.5mm 3mm;
}

/* Page 1 upper half: map + key + compass */
.ws-top{ display:flex; gap:6mm; margin-bottom:5mm; align-items:stretch; }
.ws-map-col{ flex:none; }
.ws-map-title{ font-weight:800; font-size:11pt; margin-bottom:1.5mm; }
.ws-map{
  display:grid; grid-template-columns:repeat(5,1fr);
  width:88mm; border:1.2pt solid #166534; background:#dcfce7;
  border-radius:2mm; overflow:hidden;
}
.ws-cell{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:.4pt solid #86efac; background:#f0fdf4; gap:.3mm;
}
.ws-cell .e{ font-size:12.5pt; line-height:1; }
.ws-cell .n{ font-size:6.5pt; font-weight:800; color:#166534; }
.ws-cell.tree{ background:#d1fae5; }
.ws-cell.tree .n{ display:none; }

.ws-side{ flex:1; display:flex; flex-direction:column; gap:4mm; font-size:9.5pt; }
.ws-box-title{ font-weight:800; font-size:10.5pt; margin-bottom:1.5mm; }
.ws-key-box{
  border:1pt solid #94a3b8; border-radius:2mm; padding:2.5mm 3mm;
}
.ws-key-row{ display:flex; align-items:center; gap:2mm; margin:1.2mm 0; }
.ws-key-row span{ font-size:12pt; width:7.5mm; flex:none; text-align:center; }
.ws-compass-box{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ws-compass-svg{ width:44mm; height:44mm; }
.cletter{ text-anchor:middle; font-size:13px; font-weight:700; font-family:"Trebuchet MS",sans-serif; }
.cletter-n{ fill:#b91c1c; } .cletter-e{ fill:#15803d; }
.cletter-s{ fill:#1d4ed8; } .cletter-w{ fill:#b45309; }
.ws-compass-words{ font-size:8.5pt; font-weight:700; color:#475569; margin-top:1mm; text-align:center; line-height:1.5; }

/* Questions (both pages) */
.ws-qs{ display:grid; grid-template-columns:1fr 1fr; column-gap:8mm; row-gap:4.5mm; }
.wsq{ break-inside:avoid; }
.wsq-text{ font-size:10.5pt; font-weight:700; margin-bottom:1.2mm; }
.wsq-opts{ display:flex; gap:2mm; }
/* Answer options: square X-block + letter + word */
.opt{
  flex:1; display:flex; align-items:center; gap:1.2mm;
  border:none; min-height:8.5mm; padding:0; font-size:9pt; font-weight:700;
}
.xbox{
  width:7mm; height:7mm; flex:none;
  border:1.2pt solid #334155; border-radius:1mm; background:#fff;
}
.opt b{ font-size:10pt; width:auto; height:auto; }

/* Page 2: bigger questions + bonus drawing box */
.ws-head2{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:2.5pt solid #0f172a; padding-bottom:2mm; margin-bottom:5mm;
}
.ws-head2 h2{ font-size:14pt; margin:0; }
.ws-name2{ font-size:10pt; }
.ws-qs-big .wsq-text{ font-size:11.5pt; }
.ws-qs-big .opt{ min-height:10mm; font-size:10pt; }
.ws-qs-big .xbox{ width:8mm; height:8mm; }
.ws-qs-big .opt b{ font-size:11pt; }
.ws-bonus{ margin-top:7mm; }
.ws-bonus-title{ font-size:11pt; font-weight:800; margin-bottom:2mm; }
.ws-bonus-box{ border:1.5pt dashed #94a3b8; border-radius:3mm; height:96mm; }

/* --- Answer key sheet --- */
.key-table{ width:100%; border-collapse:collapse; font-size:10pt; margin-top:4mm; }
.key-table th{
  text-align:left; border-bottom:1.5pt solid #0f172a; padding:1.5mm 2mm; font-size:9.5pt;
}
.key-table td{ border-bottom:.5pt solid #cbd5e1; padding:1.8mm 2mm; }
.key-table td.ans{ font-weight:900; color:#0284c7; white-space:nowrap; }
.key-print-note{ margin-top:6mm; font-size:9.5pt; color:#475569; font-weight:600; }