:root{
    --navy:#0a1f33; --navy2:#12294d;
    --green:#2f9e44; --green-d:#1e6b2e; --green-l:#e8f5e9;
    --bg:#f3f6f1; --card:#ffffff; --text:#1c2733; --muted:#5d6b7a;
    --border:#dfe7de; --radius:16px;
    --amber:#fff6dd; --amber-b:#e8c95a;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.5;}
  .site-header{background:var(--navy); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10;}
  .site-header a.back{color:#fff; text-decoration:none; font-weight:600; font-size:15px;}
  .site-header a.back:hover{text-decoration:underline;}
  .brand{font-weight:800; letter-spacing:.3px;}
  .wrap{max-width:680px; margin:0 auto; padding:16px 16px 32px;}
  .hero{background:linear-gradient(135deg,var(--green-d),var(--green)); color:#fff; border-radius:var(--radius); padding:26px 22px; margin-bottom:16px; text-align:center;}
  .hero h1{margin:0 0 6px; font-size:30px;}
  .hero p{margin:0; opacity:.94; font-size:15.5px;}
  .card{background:var(--card); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:0 2px 10px rgba(10,31,51,.06); border:1px solid var(--border);}
  .card h2{margin:0 0 12px; font-size:20px; color:var(--navy);}
  .steps4{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  @media(max-width:520px){.steps4{grid-template-columns:1fr}}
  .step4{background:var(--green-l); border:1px solid var(--border); border-radius:12px; padding:12px 14px;}
  .step4 .n{display:inline-block; background:var(--green-d); color:#fff; font-weight:800; border-radius:50%; width:26px; height:26px; line-height:26px; text-align:center; margin-right:8px; font-size:15px;}
  .step4 b{color:var(--navy); font-size:16px;}
  .step4 p{margin:6px 0 0; font-size:14px; color:var(--text);}
  .pickTitle{font-size:20px; color:var(--navy); margin:4px 0 12px;}
  #diffFilter{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px;}
  .fbtn{background:#fff; border:2px solid var(--border); color:var(--navy); font-weight:800; font-size:14px; padding:8px 14px; border-radius:999px; cursor:pointer; font-family:inherit;}
  .fbtn.on{background:var(--green); border-color:var(--green); color:#fff;}
  .pzCard{display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px; cursor:pointer; box-shadow:0 2px 10px rgba(10,31,51,.06); font-family:inherit;}
  .pzCard:hover{border-color:var(--green);}
  .pzCard h3{margin:0 0 4px; font-size:18px; color:var(--navy);}
  .pzCard p{margin:0; font-size:14px; color:var(--muted);}
  .pzCard .meta{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
  .diff{color:#e8a100; font-size:16px; letter-spacing:2px;}
  .diffLabel{font-size:12px; color:var(--muted); letter-spacing:0;}
  .earned{font-size:14px; color:var(--green-d); font-weight:800;}
  .earned .dim{color:#cfd8cf;}
  .playBtn{display:inline-block; background:var(--green); color:#fff; font-weight:800; font-size:14px; padding:8px 16px; border-radius:999px;}
  .backLink{background:none; border:0; color:var(--green-d); font-weight:800; font-size:15px; cursor:pointer; padding:6px 0; font-family:inherit;}
  .missionCard h2{margin-bottom:4px;}
  .missionCard p{margin:0; font-size:15px;}
  .stepDots{text-align:center; font-size:15px; letter-spacing:6px; color:var(--green-d); margin-top:10px;}
  .stepDots .off{color:#cfd8cf;}
  .courtCard{padding:12px;}
  #court{width:100%; max-width:430px; display:block; margin:0 auto;}
  #banner{text-align:center; font-weight:800; font-size:19px; color:var(--green-d); min-height:28px; margin-top:6px;}
  #situation{font-size:16px; margin:0 0 6px;}
  #prompt{font-size:17px; font-weight:800; color:var(--navy); margin:0 0 12px;}
  .choice{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:2px solid var(--border); border-radius:14px; padding:13px 14px; margin-bottom:10px; cursor:pointer; font-family:inherit; min-height:60px;}
  .choice:hover{border-color:var(--green);}
  .choice:disabled{opacity:.55; cursor:default;}
  .choice .num{flex:0 0 auto; background:var(--navy); color:#fff; font-weight:800; border-radius:50%; width:30px; height:30px; line-height:30px; text-align:center; font-size:16px;}
  .choice .shot{display:block; font-size:17px; font-weight:800; color:var(--navy);}
  .choice .tgt{display:block; font-size:14px; color:var(--muted);}
  #feedback{border-radius:12px; padding:14px 16px; font-size:15.5px; margin:4px 0 12px;}
  #feedback.good{background:var(--green-l); border:1px solid var(--green);}
  #feedback.warn{background:var(--amber); border:1px solid var(--amber-b);}
  #feedback b{display:block; margin-bottom:4px;}
  .bigBtn{display:block; width:100%; background:var(--green); color:#fff; border:0; border-radius:12px; padding:14px; font-size:16.5px; font-weight:800; cursor:pointer; font-family:inherit; margin-bottom:10px; min-height:54px;}
  .bigBtn.navy{background:var(--navy);}
  .bigBtn.ghost{background:#fff; color:var(--green-d); border:2px solid var(--green);}
  .bigBtn:disabled{opacity:.55;}
  .btnRow{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  @media(max-width:520px){.btnRow{grid-template-columns:1fr}}
  #endStars{font-size:42px; text-align:center; letter-spacing:8px; color:#e8a100; margin:4px 0;}
  #endStars .dim{color:#e3e8e3;}
  #endPanel h3{text-align:center; color:var(--navy); font-size:22px; margin:0 0 8px;}
  #endPanel p{text-align:center; font-size:15.5px;}
  #endLesson{background:var(--green-l); border-radius:12px; padding:12px 14px;}
  #solText{font-size:16.5px; min-height:54px;}
  #solText b{color:var(--navy);}
  .foot{text-align:center; color:var(--muted); font-size:13px; margin-top:20px;}
  .foot a{color:var(--green-d); font-weight:700;}
  .tiny{font-size:13px; color:var(--muted); margin:10px 0 0;}