/* ═══════════════════════════════════════════════════════════
   EYE OF HORUS DEMO PAGE — mission-tutorial page-specific layer
   ═══════════════════════════════════════════════════════════ */

/* ── hero training panel ── */
.train-panel{margin-top:.9rem;background:linear-gradient(168deg,#16386F,#0E2450);
  border:2px solid var(--gold-dk);border-radius:14px;padding:clamp(14px,1.8vw,20px);
  box-shadow:0 8px 22px rgba(18,44,92,.28)}
.train-k{font-family:var(--orn);font-weight:700;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:#C8D8F0}
.train-step{font-weight:800;font-size:.95rem;color:#FFE89A;margin:.25rem 0 .7rem;line-height:1.35}
.train-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:.9rem}
.train-fill{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#FFDD68,#E9A81C);transition:width .3s ease-out}

/* ── training progress panel ── */
.prog-panel{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,22px)}
.prog-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:.6rem;list-style:none}
.prog-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .85rem;border-radius:999px;
  background:#FBF1D6;border:1.5px solid var(--line);font-weight:700;font-size:.82rem;color:var(--ink-2)}
.prog-chk{width:18px;height:18px;border-radius:50%;border:2px solid var(--stone-dk);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:transparent;
  transition:background .2s,border-color .2s,color .2s}
.prog-item.done{background:var(--turq-lt);border-color:var(--turq-dk)}
.prog-item.done .prog-chk{background:var(--turq-dk);border-color:#08474B;color:#FFF6D8}
.prog-item.done .prog-chk::after{content:'\2713'}
.prog-count{margin-top:.8rem;font-weight:800;color:var(--ink);font-size:.92rem}

/* ── task lists / your-read choices (reuse .sbtn, just layout) ── */
.task-list{display:flex;flex-wrap:wrap;gap:8px;margin:.8rem 0}

/* ── reveal panels (Show Me Why / What Happened) ── */
.reveal{margin-top:.8rem;padding:.8rem .95rem;border-radius:11px;background:#FBF1D6;
  border:1.5px solid var(--line)}
.reveal p{margin:0 0 .4rem;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.reveal p:last-child{margin-bottom:0}
.reveal-k{font-family:var(--orn);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--turq-dk);margin-bottom:.4rem}

/* ── mission complete banner ── */
.mission-done{margin-top:1.1rem;padding:.75rem 1rem;border-radius:10px;background:#E8F8F8;
  border:2px solid var(--turq-dk);color:var(--ink-2);font-weight:700;font-size:.9rem;line-height:1.5}

/* ── broken payline variant ── */
.pl-layer.broken path{stroke-linecap:round}

/* ── substitution highlight (Mission 4) ── */
.tile.sub-hl{box-shadow:0 0 0 3px var(--turq-dk) inset,0 0 10px rgba(23,162,168,.6)}

/* ── stake / multiplier calculator ── */
.calc-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:1rem}
.calc-group{display:flex;flex-wrap:wrap;gap:6px}

/* ── silent spin demo ── */
.sound-demo{text-align:center}
.sound-row{display:flex;justify-content:center;gap:6px;margin-bottom:.7rem}
.sound-row .tile{width:52px;height:52px;flex:0 0 auto;padding:5px}
#soundBtn svg{width:15px;height:15px;fill:currentColor;vertical-align:-2px;margin-right:.3em}
.snd-off[hidden]{display:none}
.snd-on[hidden]{display:none}

/* ── bonus tracker ── */
.bonus-tracker{margin-top:1.2rem;padding-top:1.1rem;border-top:1px dashed var(--line)}
.bt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:.6rem 0}
.bt-item{padding:.55rem .7rem;border-radius:10px;background:#FBF1D6;border:1.5px solid var(--line);
  text-align:center}
.bt-k{display:block;font-weight:700;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  color:#8A6B34}
.bt-v{display:block;font-family:var(--dsp);font-weight:900;font-size:1.15rem;color:var(--ink);margin-top:.15rem}

/* ── practice-mode form ── */
.practice-form{display:grid;gap:.6rem}
.pf-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  padding:.5rem .1rem;border-bottom:1px dashed #E3D3AB}
.pf-l{font-weight:700;font-size:.88rem;color:var(--ink-2)}
.pf-v{font-family:var(--dsp);font-weight:900;font-size:1.05rem;color:var(--ink)}
.pf-select{font:inherit;font-weight:700;font-size:.85rem;color:var(--ink-2);
  background:#FBF1D6;border:1.5px solid var(--line);border-radius:8px;padding:.35rem .6rem;
  min-height:40px}
.pf-toggle{display:flex;gap:6px}
.practice-form .gold-btn{margin-top:.6rem;justify-self:start}
.session-result{font-family:var(--dsp);font-weight:900;font-size:1.5rem;color:var(--red);
  text-align:center;padding:.7rem 0;margin:.6rem 0}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:760px){
  .calc-row{flex-direction:column;gap:10px}
  .bt-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .prog-list{gap:7px}
  .prog-item{font-size:.76rem;padding:.4rem .65rem}
  .pf-row{flex-direction:column;align-items:flex-start;gap:.35rem}
}