/* CRISP-DM Case Clinic — Regal Glass, pitched for a projector and a phone. */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap");

:root{
  color-scheme: dark;
  --navy:#072f6b; --navy-deep:#001b46; --navy-2:#0c3a7e; --navy-soft:#254581;
  --slate:#89a0b8; --slate-deep:#4a6176; --slate-light:#b2c9e2;
  --ivory:#fffff0; --on-dark:#fff; --on-dark-soft:#c7d4e3;
  --good:#4fbf8b; --miss:#d98a8a;
  --glass:rgba(255,255,255,.08); --glass-2:rgba(255,255,255,.13);
  --edge:rgba(255,255,255,.16);
  --shadow:0 24px 60px rgba(0,12,35,.45);
  --ff:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--ff); color:var(--on-dark);
  background:
    radial-gradient(1100px 700px at 82% 6%, rgba(37,69,129,.55), transparent 60%),
    radial-gradient(900px 800px at 4% 96%, rgba(0,20,54,.6), transparent 58%),
    linear-gradient(135deg,#001b46 0%,#072f6b 55%,#0c3a7e 120%);
  background-attachment:fixed;
}
#app{height:100%; display:flex; flex-direction:column; padding:0 clamp(16px,2.2vw,40px)}
main{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  gap:clamp(10px,1.5vh,18px); padding-bottom:clamp(12px,2vh,22px)}

.eyebrow{font-size:clamp(9px,.78vw,11.5px); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate-light)}
h1{margin:0; font-size:clamp(26px,3.6vw,52px); font-weight:800; letter-spacing:-.025em;
  line-height:1.05; text-wrap:balance}
h2{margin:0; font-size:clamp(19px,2.35vw,33px); font-weight:700; letter-spacing:-.018em;
  line-height:1.18; text-wrap:balance}
p{margin:0; line-height:1.5}
.lede{font-size:clamp(14px,1.35vw,19px); color:var(--on-dark-soft); max-width:62ch}
.muted{color:var(--on-dark-soft)}
.pane{background:var(--glass); border:1px solid var(--edge); border-radius:20px;
  box-shadow:var(--shadow); padding:clamp(16px,2vw,30px)}
.scroll{overflow-y:auto; min-height:0}
.center{flex:1 1 auto; min-height:0; display:grid; place-items:center}
.stack{display:flex; flex-direction:column; gap:clamp(12px,2vh,22px); width:min(760px,100%)}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* ---------------- header ---------------- */
header{display:flex; align-items:center; gap:clamp(10px,1.4vw,22px);
  padding-block:clamp(10px,1.4vh,18px); flex-wrap:wrap; flex:0 0 auto}
.mark{display:flex; flex-direction:column; gap:2px; margin-right:auto}
.mark b{font-size:clamp(13px,1.15vw,17px); font-weight:800; letter-spacing:-.01em}
.pos{font-size:clamp(10px,.85vw,12.5px); color:var(--on-dark-soft); font-weight:600;
  font-variant-numeric:tabular-nums}
.chip{display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px;
  background:var(--glass); border:1px solid var(--edge); font-weight:700;
  font-size:clamp(11px,1vw,14px); white-space:nowrap}
.chip .s{font-variant-numeric:tabular-nums; color:var(--slate-light)}
.chip.lead{background:var(--ivory); color:var(--navy); border-color:var(--ivory)}
.chip.lead .s{color:var(--navy-soft)}

/* ---------------- controls ---------------- */
button{font-family:var(--ff); cursor:pointer; border:none; border-radius:999px;
  font-weight:700; transition:transform .12s ease, background .16s ease}
button:focus-visible{outline:3px solid var(--ivory); outline-offset:3px}
.btn{background:var(--ivory); color:var(--navy); padding:13px 26px;
  font-size:clamp(13px,1.15vw,16px)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--glass-2); color:var(--on-dark); border:1px solid var(--edge)}
.btn.big{padding:17px 34px; font-size:clamp(15px,1.4vw,19px)}
.btn[disabled]{opacity:.4; cursor:not-allowed; transform:none}
input{font-family:var(--ff); font-weight:700; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.09); border:1px solid var(--edge); color:var(--on-dark);
  font-size:clamp(14px,1.2vw,17px); min-width:0; width:100%}
input:focus{outline:2px solid var(--slate-light); outline-offset:1px}
.label{font-size:clamp(10px,.82vw,12px); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate-light); margin-bottom:8px; display:block}
.field{display:flex; flex-direction:column}
.seg{display:flex; gap:8px; flex-wrap:wrap}
.seg button{background:var(--glass); color:var(--on-dark); border:1px solid var(--edge);
  padding:11px 22px; font-size:clamp(13px,1.1vw,15px)}
.seg button[aria-pressed="true"]{background:var(--ivory); color:var(--navy); border-color:var(--ivory)}
.err{color:var(--miss); font-weight:700; font-size:clamp(12px,1.05vw,15px); min-height:1.3em}

/* ---------------- case brief ---------------- */
.quote{font-size:clamp(15px,1.7vw,24px); line-height:1.42; color:var(--ivory);
  font-style:italic; border-left:3px solid var(--slate); padding-left:clamp(12px,1.2vw,20px)}
.facts{display:flex; gap:clamp(14px,2vw,34px); flex-wrap:wrap}
.fact{display:flex; flex-direction:column; gap:3px}
.fact b{font-size:clamp(17px,1.9vw,27px); font-weight:800; font-variant-numeric:tabular-nums}
.fact span{font-size:clamp(10px,.85vw,12.5px); color:var(--on-dark-soft)}

/* ---------------- question ---------------- */
.qhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex:0 0 auto}
.tag{padding:5px 12px; border-radius:999px; background:var(--glass-2);
  border:1px solid var(--edge); font-size:clamp(9.5px,.8vw,11.5px); font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate-light)}
.caseref{font-size:clamp(10.5px,.9vw,13px); color:var(--on-dark-soft); font-weight:600}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.2vh,14px);
  flex:1 1 auto; min-height:0; align-content:center;
  grid-auto-rows:minmax(min-content,max-content)}
.opt{display:flex; align-items:flex-start; gap:clamp(10px,1vw,16px); text-align:left;
  background:var(--glass); border:1px solid var(--edge); border-radius:18px;
  padding:clamp(12px,1.5vw,22px); color:var(--on-dark); font-weight:400;
  font-size:clamp(13px,1.35vw,20px); line-height:1.36;
  min-width:0; min-height:0; overflow-wrap:anywhere}
.opt:hover{background:var(--glass-2)}
.opt .k{flex:0 0 auto; width:clamp(26px,2.1vw,34px); height:clamp(26px,2.1vw,34px);
  border-radius:50%; background:var(--ivory); color:var(--navy); font-weight:800;
  display:grid; place-items:center; font-size:clamp(12px,1.05vw,15px)}
.opt.right{background:rgba(79,191,139,.2); border-color:var(--good)}
.opt.right .k{background:var(--good); color:#04240f}
.opt.wrong{opacity:.42}
.opt.picked{outline:2px solid var(--slate-light); outline-offset:2px}
.opt.picked.wrong{opacity:.8; background:rgba(217,138,138,.16); border-color:var(--miss)}
.revealed .opt{cursor:default; font-size:clamp(12px,1.15vw,17px); padding:clamp(10px,1.1vw,16px)}
.tallybar{height:7px; border-radius:999px; background:rgba(255,255,255,.14);
  overflow:hidden; margin-top:9px; width:100%}
.tallybar i{display:block; height:100%; background:var(--slate-light); border-radius:999px}
.opt.right .tallybar i{background:var(--good)}
.optwrap{display:flex; flex-direction:column; flex:1 1 auto; min-width:0}
.tallyn{font-size:clamp(10px,.85vw,12px); color:var(--on-dark-soft); font-weight:700;
  margin-top:5px; font-variant-numeric:tabular-nums}

/* ---------------- teaching panel ---------------- */
.teach{display:flex; flex-direction:column; gap:clamp(8px,1.1vh,13px); flex:0 1 auto; min-height:0}
.teach .tr{display:flex; gap:clamp(10px,1.2vw,18px); align-items:flex-start}
.badge{flex:0 0 auto; padding:6px 13px; border-radius:999px; background:var(--ivory);
  color:var(--navy); font-weight:800; font-size:clamp(11px,1vw,14px); white-space:nowrap}
.badge.warn{background:var(--glass-2); color:var(--slate-light); border:1px solid var(--edge)}
.teach p{font-size:clamp(12.5px,1.18vw,17px)}

/* ---------------- lobby / QR ---------------- */
.lobby{display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,46px);
  align-items:center; flex:1 1 auto; min-height:0}
.qrbox{background:#fff; padding:clamp(10px,1.2vw,18px); border-radius:22px;
  display:grid; place-items:center}
.qrbox img,.qrbox canvas{display:block; width:clamp(180px,22vw,300px); height:auto}
.code{font-size:clamp(54px,11vw,150px); font-weight:800; letter-spacing:.08em;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--ivory)}
.joinurl{font-size:clamp(14px,1.5vw,22px); font-weight:700; color:var(--slate-light);
  word-break:break-all}
.pills{display:flex; gap:8px; flex-wrap:wrap; max-height:28vh; overflow-y:auto}
.pill{padding:8px 15px; border-radius:999px; background:var(--glass-2);
  border:1px solid var(--edge); font-weight:700; font-size:clamp(12px,1.05vw,15px)}

/* ---------------- leaderboard ---------------- */
.board{display:flex; flex-direction:column; gap:8px}
.lrow{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(10px,1.4vw,20px);
  align-items:center; background:var(--glass); border:1px solid var(--edge);
  border-radius:16px; padding:clamp(10px,1.2vw,16px) clamp(13px,1.5vw,22px)}
.lrow.top{background:var(--ivory); color:var(--navy); border-color:var(--ivory)}
.lrow .rk{font-weight:800; font-variant-numeric:tabular-nums; opacity:.65;
  font-size:clamp(13px,1.2vw,18px); min-width:1.6em}
.lrow .nm{font-weight:700; font-size:clamp(14px,1.4vw,21px)}
.lrow .sc{font-weight:800; font-variant-numeric:tabular-nums; font-size:clamp(16px,1.7vw,26px)}
.bars{display:flex; flex-direction:column; gap:9px}
.bar{display:grid; grid-template-columns:minmax(110px,1.3fr) 3fr auto;
  gap:clamp(8px,1.2vw,16px); align-items:center; font-size:clamp(11px,1vw,14.5px)}
.bar .nm{font-weight:700}
.bar .track{height:11px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden}
.bar .fill{height:100%; border-radius:999px; background:var(--slate-light)}
.bar .fill.hi{background:var(--good)}
.bar .v{font-variant-numeric:tabular-nums; color:var(--on-dark-soft); font-weight:700}

/* ---------------- player (phone) ---------------- */
.pbig{display:grid; grid-template-columns:1fr 1fr; gap:12px; flex:1 1 auto;
  align-content:center; min-height:0}
.pbtn{border-radius:20px; padding:clamp(18px,5vw,30px) 14px; color:var(--ivory);
  font-size:clamp(15px,4vw,20px); font-weight:700; text-align:left;
  display:flex; gap:12px; align-items:flex-start; line-height:1.3; border:1px solid var(--edge)}
.pbtn:disabled{opacity:.45}
.pbtn .k{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.28);
  display:grid; place-items:center; font-weight:800; font-size:15px}
.pA{background:#254581} .pB{background:#0c3a7e} .pC{background:#4a6176} .pD{background:#5a7391}
.verdict{font-size:clamp(28px,9vw,52px); font-weight:800; line-height:1.05}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--miss)}

footer{flex:0 0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-block:clamp(9px,1.3vh,16px); border-top:1px solid rgba(255,255,255,.1)}
.keys{margin-right:auto; font-size:clamp(9.5px,.82vw,12px); color:var(--slate);
  display:flex; gap:clamp(8px,1vw,16px); flex-wrap:wrap}
.keys kbd{font-family:var(--ff); background:var(--glass-2); border:1px solid var(--edge);
  border-radius:6px; padding:2px 7px; font-weight:700; color:var(--on-dark-soft)}

@media (max-width:860px){
  .lobby{grid-template-columns:1fr; gap:16px; align-content:start; overflow-y:auto}
  .opts{grid-template-columns:1fr}
  .revealed .opts{max-height:36vh; overflow-y:auto}
  .keys{display:none}
  .bar{grid-template-columns:1fr auto; }
  .bar .track{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}