/* showdown-howto.css */
/* CLASSROOM SHOWDOWN — the How to play panel (showdown-howto.js), on the
   teacher page and the student page alike. White card, cyan rim, Fredoka
   headings; sits above the board and the phone's sheets, below image zoom. */
.ht-layer{
  position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(23,24,78,.62);backdrop-filter:blur(4px);
}
.ht-layer[hidden]{display:none}
.ht-card{
  width:min(760px,100%);max-height:min(88vh,900px);display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:4px solid var(--cyan,#50E8FF);border-radius:28px;
  box-shadow:0 0 0 6px rgba(80,232,255,.25),0 30px 70px rgba(23,24,78,.5);
}
.ht-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px 12px;border-bottom:3px solid #E3EDF7}
.ht-title{font-family:var(--display,'Fredoka',sans-serif);font-size:28px;font-weight:700;color:var(--ink,#171B55)}
.ht-tabs{display:flex;gap:6px;margin-left:6px}
.ht-tab{padding:7px 14px;border:2px solid #9DD6FF;border-radius:999px;background:#fff;color:var(--royal,#2F63D8);font-family:var(--sans,'Nunito',sans-serif);font-size:14px;font-weight:800;cursor:pointer}
.ht-tab-on{background:var(--royal,#2F63D8);border-color:var(--royal,#2F63D8);color:#fff}
.ht-close{margin-left:auto;width:40px;height:40px;border:3px solid #E3EDF7;border-radius:50%;background:#fff;color:#5F6B8A;font-size:24px;line-height:1;cursor:pointer}
.ht-body{overflow:auto;padding:14px 20px 20px;font-family:var(--sans,'Nunito',sans-serif);color:var(--ink,#171B55)}
.ht-sec{margin-bottom:14px}
.ht-h{font-family:var(--display,'Fredoka',sans-serif);font-size:20px;font-weight:700;color:var(--royal,#2F63D8);margin:8px 0 6px}
.ht-list{margin:0;padding-left:22px;display:grid;gap:6px}
.ht-list li{font-size:15.5px;font-weight:600;line-height:1.45}
/* v2.75.8 — the Powers tab: every power on its own card */
.ht-intro{margin:6px 0 12px;font-size:15px;font-weight:700;line-height:1.45;color:#5F6B8A}
.ht-powers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ht-power{padding:12px 14px;border:2px solid #DCEFFF;border-radius:16px;background:#F7FBFF}
.ht-power-n{font-family:var(--display,'Fredoka',sans-serif);font-size:19px;font-weight:700;color:var(--royal,#2F63D8);margin-bottom:4px}
.ht-power-what{margin:0 0 6px;font-size:15px;font-weight:800;line-height:1.4}
.ht-power-when{margin:0 0 4px;font-size:13.5px;font-weight:800;line-height:1.4;color:var(--ink,#171B55)}   /* v2.75.19 */
.ht-power-how{margin:0;font-size:13.5px;font-weight:600;line-height:1.4;color:#5F6B8A}
@media (max-width:560px){
  .ht-title{font-size:22px}
  .ht-list li{font-size:14.5px}
  .ht-body{padding:12px 14px 16px}
  /* v2.75.8 — three tabs fit on one row beside the title */
  .ht-head{gap:8px;padding:14px 14px 10px}
  .ht-tabs{margin-left:0;gap:5px}
  .ht-tab{padding:6px 10px;font-size:13px;white-space:nowrap}
  .ht-close{width:34px;height:34px;font-size:20px}
}