/* Castle Trading — focused chart-reading drills */
.drill-page {
  --drill-ink: #f3efe5;
  --drill-muted: #a4a193;
  --drill-dim: #777568;
  --drill-gold: #c9a84c;
  --drill-gold-light: #f5e6a3;
  --drill-line: rgba(201, 168, 76, .19);
  --drill-panel: #11120f;
  --drill-panel-soft: #171812;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(201, 168, 76, .12), transparent 42rem),
    #080908;
  color: var(--drill-ink);
  font-family: 'DM Sans', sans-serif;
}

.drill-page * { box-sizing: border-box; }
.drill-page button { font: inherit; }
.drill-page [hidden] { display: none !important; }

.drill-nav {
  min-height: 66px;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(8, 9, 8, .92);
  border-bottom: 1px solid var(--drill-line);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(14px);
}
.drill-nav a {
  color: var(--drill-gold-light);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .035em;
}
.drill-nav a:hover { color: #fff4c5; }
.drill-brand {
  color: var(--drill-ink);
  font-family: 'Playfair Display', serif;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
.drill-brand span { color: var(--drill-gold); }
.drill-nav-tools { display:flex; align-items:center; gap:.75rem; }
.drill-tag {
  color: var(--drill-gold-light);
  border: 1px solid rgba(201,168,76,.25);
  background: rgba(201,168,76,.08);
  border-radius: 999px;
  padding: .38rem .72rem;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
.drill-links {
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-left:.25rem;
  padding-left:.85rem;
  border-left:1px solid rgba(255,255,255,.11);
}
.drill-links a { color:var(--drill-muted); font-size:.69rem; }
.drill-links a[aria-current="page"] { color:var(--drill-gold-light); }

.drill-shell { width:min(100% - 2rem, 960px); margin:0 auto; padding:2.4rem 0 4rem; }
.drill-start {
  min-height:calc(100dvh - 66px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:3rem 0 5rem;
}
.drill-kicker {
  color:var(--drill-gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.68rem;
  font-weight:800;
  margin-bottom:1rem;
}
.drill-title {
  max-width:800px;
  margin:0;
  color:var(--drill-ink);
  font-family:'Playfair Display',serif;
  font-size:clamp(2.7rem, 8vw, 5.9rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:900;
}
.drill-title em { color:var(--drill-gold-light); font-style:normal; }
.drill-subtitle {
  max-width:620px;
  color:var(--drill-muted);
  margin:1.1rem auto 0;
  font-size:clamp(.95rem, 2vw, 1.08rem);
  line-height:1.65;
}
.drill-note {
  max-width:550px;
  margin:1rem auto 1.8rem;
  padding:.75rem 1rem;
  color:#b8b4a8;
  background:rgba(201,168,76,.045);
  border:1px solid rgba(201,168,76,.13);
  border-radius:10px;
  font-size:.76rem;
  line-height:1.55;
}
.drill-note strong { color:var(--drill-gold-light); }
.mode-toggle {
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:5px;
  margin:0 0 1.25rem;
  border:1px solid var(--drill-line);
  border-radius:14px;
  background:#0d0e0b;
}
.mode-btn {
  min-width:145px;
  border:0;
  border-radius:10px;
  padding:.68rem 1rem;
  background:transparent;
  color:#969386;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.16rem;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.mode-btn:hover { color:var(--drill-ink); }
.mode-btn:active { transform:scale(.98); }
.mode-btn.active {
  color:#17150e;
  background:linear-gradient(135deg, var(--drill-gold), var(--drill-gold-light));
}
.mode-title { font-size:.86rem; font-weight:800; }
.mode-sub { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; opacity:.72; }
.drill-start-btn, .drill-primary {
  appearance:none;
  border:1px solid rgba(245,230,163,.6);
  border-radius:11px;
  padding:.9rem 2rem;
  background:linear-gradient(135deg, #b99438, #f1df91);
  color:#17150e;
  font-weight:800;
  letter-spacing:.015em;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(201,168,76,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.drill-start-btn:hover, .drill-primary:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(201,168,76,.2); }
.drill-start-btn:focus-visible, .drill-page button:focus-visible, .drill-page a:focus-visible {
  outline:2px solid var(--drill-gold-light);
  outline-offset:3px;
}
.drill-start-meta { margin-top:1.25rem; color:var(--drill-dim); font-size:.71rem; letter-spacing:.04em; }

.drill-game { padding-top:1.4rem; }
.drill-hud {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}
.hud-metric { display:flex; flex-direction:column; gap:.2rem; }
.hud-metric:last-child { align-items:flex-end; }
.hud-label { color:var(--drill-dim); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; font-weight:800; }
.hud-value { color:var(--drill-gold-light); font-family:'Playfair Display',serif; font-size:1.9rem; line-height:1; font-weight:700; }
.hud-center {
  min-width:90px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18rem;
  color:var(--drill-muted);
  font-size:.72rem;
}
.hud-timer { color:var(--drill-ink); font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; }
.drill-progress { display:flex; gap:5px; justify-content:center; margin:.2rem 0 1rem; }
.drill-progress span { width:100%; height:3px; border-radius:5px; background:rgba(255,255,255,.09); }
.drill-progress span.done { background:var(--drill-gold); }
.drill-progress span.current { background:var(--drill-gold-light); }
.chart-frame {
  position:relative;
  overflow:hidden;
  background:#0b0d0b;
  border:1px solid rgba(201,168,76,.2);
  border-radius:15px;
  padding:.65rem;
  box-shadow:0 20px 65px rgba(0,0,0,.24);
}
.chart-frame::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(201,168,76,.035),transparent 40%);
}
#chart { display:block; width:100%; height:clamp(210px, 42vw, 330px); position:relative; }
.chart-caption {
  padding:.52rem .3rem .1rem;
  color:#8f9086;
  font-size:.68rem;
  line-height:1.4;
  text-align:left;
}
.drill-question {
  margin:1.25rem 0 .8rem;
  text-align:center;
}
.drill-question h2 { margin:0; color:var(--drill-ink); font-size:clamp(1.15rem, 3vw, 1.55rem); letter-spacing:-.025em; }
.drill-question p { color:var(--drill-muted); font-size:.8rem; margin:.34rem 0 0; }
.drill-answers {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.65rem;
  margin:.95rem 0;
}
.drill-answer {
  min-height:60px;
  padding:.85rem 1rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  text-align:left;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:linear-gradient(120deg,#171914,#11130f);
  color:var(--drill-ink);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.drill-answer:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(201,168,76,.45); background:#1c1d16; }
.drill-answer:disabled { cursor:default; }
.answer-key {
  flex:0 0 27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,168,76,.27);
  border-radius:7px;
  color:var(--drill-gold-light);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.72rem;
  font-weight:700;
}
.answer-label { font-size:.88rem; font-weight:700; line-height:1.35; }
.drill-answer.correct { border-color:rgba(91,185,143,.65); background:rgba(30,93,66,.27); }
.drill-answer.correct .answer-key { color:#8be0b4; border-color:rgba(91,185,143,.6); }
.drill-answer.wrong { border-color:rgba(214,102,86,.55); background:rgba(115,44,38,.22); opacity:.7; }
.drill-feedback {
  min-height:1.3rem;
  margin:.25rem 0 .65rem;
  color:var(--drill-gold-light);
  text-align:center;
  font-size:.81rem;
  line-height:1.5;
}
.drill-page .edu-panel { text-align:left; }
.drill-page .next-btn {
  width:100%;
  margin-top:.15rem;
  padding:.88rem 1.2rem;
  border:1px solid rgba(201,168,76,.45);
  border-radius:10px;
  background:rgba(201,168,76,.1);
  color:var(--drill-gold-light);
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.drill-page .next-btn:hover { background:rgba(201,168,76,.18); transform:translateY(-1px); }

.drill-end { max-width:650px; margin:0 auto; padding:5rem 0; text-align:center; }
.end-eyebrow { color:var(--drill-gold); font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; font-weight:800; }
.end-title { margin:.65rem 0 .5rem; font-family:'Playfair Display',serif; font-size:clamp(2.3rem,8vw,4.2rem); color:var(--drill-ink); }
.end-summary { margin:0 auto 1.5rem; color:var(--drill-muted); line-height:1.6; }
.end-actions { display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.drill-secondary {
  border:1px solid rgba(201,168,76,.35);
  background:transparent;
  color:var(--drill-gold-light);
  text-decoration:none;
  border-radius:10px;
  padding:.82rem 1.3rem;
  font-weight:700;
  font-size:.86rem;
}

@media (max-width:760px) {
  .drill-nav { flex-wrap:wrap; min-height:60px; }
  .drill-nav-tools { gap:.45rem; }
  .drill-links { gap:.55rem; padding-left:.55rem; }
  .drill-links a { font-size:.63rem; }
  .drill-tag { display:none; }
}
@media (max-width:520px) {
  .drill-nav { padding:.65rem .8rem; }
  .drill-nav > a { font-size:.68rem; }
  .drill-brand { font-size:.78rem; }
  .drill-links { display:none; }
  .drill-shell { width:min(100% - 1.1rem, 960px); padding-top:1.3rem; }
  .drill-start { min-height:calc(100dvh - 60px); padding:2rem 0 3rem; }
  .drill-title { font-size:clamp(2.7rem, 14vw, 4.2rem); }
  .mode-btn { min-width:0; width:clamp(130px, 42vw, 175px); }
  .drill-hud { grid-template-columns:1fr auto 1fr; gap:.4rem; }
  .hud-value { font-size:1.6rem; }
  .hud-label { font-size:.55rem; }
  .hud-center { min-width:70px; }
  .drill-answers { grid-template-columns:1fr; gap:.5rem; }
  .drill-answer { min-height:52px; padding:.65rem .8rem; }
  #chart { height:230px; }
}
@media (prefers-reduced-motion:reduce) {
  .drill-page *, .drill-page *::before, .drill-page *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}