/* ===== Citadel Sports Learning Road Map =====
   Dark, athletic, high-contrast — matches the Sports Ladder games shell
   it is embedded into, so it doesn't read as a foreign page in an iframe. */

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#0a0a0a;color:#eee;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:26px 18px 60px}

/* ---------- header ---------- */
.hd{margin-bottom:22px}
.hd-badge{display:inline-block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  font-weight:800;color:#06d6a0;background:#06d6a015;border:1px solid #06d6a044;
  padding:5px 12px;border-radius:20px;margin-bottom:12px}
.hd h1{font-family:'Anton',sans-serif;font-size:clamp(30px,6vw,52px);line-height:1;
  letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}
.hd-sub{font-size:14px;color:#aaa;max-width:64ch}
.hd-sub b{color:#eee}

.prog-wrap{margin-top:20px}
.prog-track{height:8px;background:#1c1c1c;border-radius:5px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,#06d6a0,#3fd0ff);
  border-radius:5px;width:0;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.prog-meta{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:8px;font-size:11.5px;color:#888;flex-wrap:wrap}
.reset-btn{font-size:11px;color:#666;border-bottom:1px solid #333}
.reset-btn:hover{color:#ff6b6b;border-color:#ff6b6b}

/* ---------- order rule ---------- */
.rule-card{display:flex;gap:14px;align-items:flex-start;background:#1a1206;
  border:1px solid #f5a52455;border-left:3px solid #f5a524;border-radius:10px;
  padding:15px 17px;margin-bottom:26px}
.rule-icon{width:24px;height:24px;border-radius:50%;background:#f5a524;color:#0a0a0a;
  display:grid;place-items:center;font-weight:900;font-size:14px;flex-shrink:0}
.rule-card b{display:block;font-size:12.5px;letter-spacing:.4px;color:#f5a524;margin-bottom:4px}
.rule-card span{font-size:12px;color:#bbb;line-height:1.6}

/* ---------- sections ---------- */
.sec-h{font-family:'Anton',sans-serif;font-size:22px;text-transform:uppercase;
  letter-spacing:1px;margin-bottom:6px}
.sec-sub{font-size:12.5px;color:#888;margin-bottom:16px;max-width:70ch}
section{margin-bottom:34px}

/* ---------- week split ---------- */
.split-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.split-card{background:#111;border:1px solid #262626;border-top:3px solid var(--c);
  border-radius:9px;padding:12px 10px;cursor:pointer;transition:transform .12s,border-color .12s}
.split-card:hover{transform:translateY(-2px);border-color:var(--c)}
.split-card.is-rest{opacity:.62;cursor:default}
.split-card.is-rest:hover{transform:none}
.split-day{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#777;
  font-weight:800;margin-bottom:5px}
.split-focus{font-size:12px;font-weight:700;line-height:1.3}
.split-note{margin-top:12px;font-size:12px;color:#999}
.split-note b{color:#06d6a0}

/* ---------- levels ---------- */
.lvl{background:#0f0f0f;border:1px solid #232323;border-radius:12px;
  margin-bottom:10px;overflow:hidden}
.lvl.is-complete{border-color:#06d6a066}
.lvl-head{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;text-align:left}
.lvl-head:hover{background:#141414}
.lvl-num{width:34px;height:34px;border-radius:9px;background:var(--c);color:#0a0a0a;
  display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:17px;flex-shrink:0}
.lvl-main{flex:1;min-width:0}
.lvl-title{display:block;font-size:14.5px;font-weight:800}
.lvl-day{display:block;font-size:11px;color:#777;margin-top:2px}
.lvl-count{font-size:11.5px;color:#888;font-weight:700;flex-shrink:0}
.lvl-chev{color:#555;font-size:12px;transition:transform .18s;flex-shrink:0}
.lvl.open .lvl-chev{transform:rotate(180deg)}
.lvl-body{display:none;padding:0 18px 18px;border-top:1px solid #1e1e1e}
.lvl-why,.lvl-key,.lvl-safety{font-size:12.5px;color:#bbb;line-height:1.65;
  padding:13px 15px;border-radius:9px;margin-top:14px}
.lvl-why{background:#0d1a18;border-left:3px solid #06d6a0}
.lvl-key{background:#0d1620;border-left:3px solid #3fd0ff}
.lvl-safety{background:#1a0d0d;border-left:3px solid #ff6b6b}
.lvl-why b,.lvl-key b,.lvl-safety b{color:#fff}
.lvl-practice{font-size:12px;color:#999;font-style:italic;margin:14px 0 4px;line-height:1.65}

/* ---------- items ---------- */
.items{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:#141414;border:1px solid #242424;border-radius:8px;padding:11px 13px;
  font-size:12.5px;transition:border-color .12s,background .12s}
.item:hover{background:#1a1a1a;border-color:var(--c)}
.item.is-learned{background:#0d1a15;border-color:#06d6a055}
.item-check{width:19px;height:19px;border-radius:5px;border:1.5px solid #383838;
  display:grid;place-items:center;font-size:11px;font-weight:900;color:#0a0a0a;flex-shrink:0}
.item.is-learned .item-check{background:#06d6a0;border-color:#06d6a0}
.item-label{flex:1;min-width:0}
.item.is-learned .item-label{color:#8fe8cd}
.item-rest{font-size:10px;color:#f5a524;background:#f5a52415;border:1px solid #f5a52433;
  border-radius:20px;padding:3px 9px;flex-shrink:0;font-weight:700}

/* ---------- equipment ---------- */
.equip-grid{display:flex;flex-wrap:wrap;gap:7px}
.equip{font-size:11.5px;background:#141414;border:1px solid #262626;
  border-radius:20px;padding:7px 14px;color:#bbb}

/* ---------- safety ---------- */
.safety{background:#1a0d0d;border:1px solid #ff6b6b44;border-left:3px solid #ff6b6b;
  border-radius:10px;padding:15px 18px;font-size:12px;color:#ccc;line-height:1.7}
.safety b{color:#ff8a8a}

.ft{margin-top:32px;padding-top:20px;border-top:1px solid #1e1e1e;
  font-size:11.5px;color:#666;line-height:1.8}
.ft b{color:#999}

/* ---------- modal ---------- */
.modal-bd{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px}
.modal-bd.open{display:flex}
.modal{background:#101010;border:1px solid #2a2a2a;border-radius:14px;
  width:100%;max-width:580px;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.m-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 22px 16px;border-bottom:1px solid #1e1e1e;flex-shrink:0}
.m-level{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:800;margin-bottom:5px}
.m-head h3{font-size:17px;font-weight:800;line-height:1.3}
.m-close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:#888;flex-shrink:0}
.m-close:hover{background:#1c1c1c;color:#fff}
.m-body{padding:18px 22px;overflow-y:auto;flex:1}
.m-sec{margin-bottom:16px}
.m-sec:last-child{margin-bottom:0}
.m-sec-h{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:800;color:#777;margin-bottom:6px}
.m-sec p{font-size:13px;color:#ccc;line-height:1.7}
.m-why{background:#0d1a18;border-left:3px solid #06d6a0;border-radius:0 9px 9px 0;padding:13px 15px}
.m-why .m-sec-h{color:#06d6a0}
.m-mistake{background:#1a0d0d;border-left:3px solid #ff6b6b;border-radius:0 9px 9px 0;padding:13px 15px}
.m-mistake .m-sec-h{color:#ff8a8a}
.m-rest{background:#1a1206;border-left:3px solid #f5a524;border-radius:0 9px 9px 0;padding:13px 15px}
.m-rest .m-sec-h{color:#f5a524}
.m-record{background:#0d1620;border-left:3px solid #3fd0ff;border-radius:0 9px 9px 0;padding:13px 15px}
.m-record .m-sec-h{color:#3fd0ff}
.m-foot{display:flex;gap:9px;padding:16px 22px;border-top:1px solid #1e1e1e;flex-shrink:0}
.btn{padding:11px 18px;border-radius:8px;font-size:12.5px;font-weight:700}
.btn-ghost{background:#1a1a1a;border:1px solid #2a2a2a;color:#bbb}
.btn-ghost:hover{background:#222;color:#fff}
.btn-primary{background:#06d6a0;color:#062;flex:1}
.btn-primary:hover{background:#05c391}
.btn-primary.is-on{background:#1a3a30;color:#8fe8cd;border:1px solid #06d6a055}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .split-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:520px){
  .split-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lvl-head{gap:10px;padding:14px}
  .m-foot{flex-direction:column-reverse}
  .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}