/* Question Explorer (games/question-explorer.html and DC/explorer.html): README, "Question Explorer" */
  :root{ --navy:#002060; --red:#C8102E; --green:#1E7A3C; --light:#EFF3F9; --muted:#5a6478; --line:#dfe5f0; --gold:#B7791F; }
  *{ box-sizing:border-box; }
  [hidden]{ display:none !important; }
  body{ margin:0; font-family:"Segoe UI", Aptos, Calibri, Arial, sans-serif; background:var(--light); color:#1a1a1a; }
  body.qx-on{ overflow:hidden; }
  header{ background:var(--navy); color:#fff; padding:10px 20px; }
  header h1{ margin:0; font-size:1.3rem; }
  header p{ margin:3px 0 0; color:#c7d3ea; font-size:.9rem; }
  body.qx-on header p{ display:none; }

  /* ── set-up: choose a worksheet, then a level ── */
  .wrap{ max-width:1100px; margin:0 auto; padding:16px 16px 0; }
  .panel{ background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(0,32,96,.08); padding:16px 18px; margin-bottom:16px; }
  .panel h2{ margin:0 0 10px; color:var(--navy); font-size:1.15rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
  .panel h2 small{ font-size:.9rem; color:var(--muted); font-weight:600; }
  .muted{ color:var(--muted); }
  .how{ margin:0 0 12px; color:var(--muted); font-size:.95rem; line-height:1.45; }
  .search{ width:100%; font:inherit; font-size:1.05rem; height:44px; padding:0 14px; border:2px solid #cfd8e8; border-radius:10px; color:var(--navy); }
  .search:focus{ outline:none; border-color:var(--navy); }
  .wslist{ margin-top:12px; }
  .wslist details{ border-top:1px solid var(--line); }
  .wslist summary{ cursor:pointer; padding:9px 2px; font-weight:800; color:var(--navy); }
  .wslist summary small{ color:var(--muted); font-weight:600; margin-left:6px; }
  .wsbtns{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px; padding:2px 0 12px; }
  .wsbtn{ text-align:left; font:600 .95rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); background:#fff; border:1.5px solid #cfd8e8; border-radius:9px; padding:8px 11px; cursor:pointer; }
  .wsbtn:hover{ border-color:var(--navy); background:#f6f8fc; }
  .wsbtn small{ display:block; color:var(--muted); font-weight:500; font-size:.78rem; margin-top:1px; }
  .lvgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:8px; }
  .lvbtn{ display:flex; align-items:center; gap:6px; text-align:left; font:700 1rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); background:#fff; border:2px solid #cfd8e8; border-radius:10px; padding:11px 13px; cursor:pointer; }
  .lvbtn:hover{ border-color:var(--navy); background:#f6f8fc; }
  .lvbtn .lvl-name{ flex:1; }
  .back{ font:700 .9rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); background:#fff; border:1.5px solid #cfd8e8; border-radius:8px; padding:5px 11px; cursor:pointer; }
  .msg{ color:var(--red); font-weight:600; }
  /* saved question sets */
  .sv-h{ margin:12px 0 6px; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:var(--navy); }
  .sv-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:8px 0; border-top:1px solid var(--line); }
  .sv-name{ flex:1 1 260px; min-width:0; font:600 1rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); border:1.5px solid transparent; border-radius:8px; padding:6px 8px; background:#f6f8fc; }
  .sv-name:hover, .sv-name:focus{ border-color:#cfd8e8; background:#fff; outline:none; }
  .sv-nm{ flex:1 1 260px; font-weight:600; color:var(--navy); }
  .sv-info{ flex:1 1 260px; color:var(--muted); font-size:.85rem; }
  .sv-btns{ display:flex; gap:6px; }
  .sv-btns button, .sv-undo{ font:700 .88rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); background:#fff; border:1.5px solid #cfd8e8; border-radius:8px; padding:6px 12px; cursor:pointer; }
  .sv-btns .sv-open{ background:var(--navy); border-color:var(--navy); color:#fff; }
  .sv-btns .sv-del.again{ background:var(--red); border-color:var(--red); color:#fff; }
  .sv-msg{ min-height:1.4em; margin:8px 0 0; font-weight:600; color:var(--navy); }
  .sv-bin summary{ cursor:pointer; color:var(--muted); font-weight:700; margin-top:6px; }

  /* ── the whiteboard, split in half ── */
  #qx{ position:relative; display:flex; flex-direction:column; background:#dfe6f2; font-family:"Segoe UI", Aptos, Calibri, Arial, sans-serif; overflow:hidden; }
  #qx.idle{ display:none; }
  #qx:fullscreen{ width:100vw !important; height:100vh !important; }
  .qx-idle{ display:none; }
  .qx-top{ flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:6px 10px; background:var(--navy); color:#fff; min-height:50px; }
  .qx-title{ font-weight:800; font-size:1.02rem; margin:0 8px 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; }
  .qx-gap{ flex:1 1 auto; }
  .qx-top button{ font:700 .9rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); background:#fff; border:2px solid #fff; border-radius:9px; height:36px; padding:0 11px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
  .qx-top button.on{ box-shadow:0 0 0 3px #FFD34D; }
  .qx-pen i{ display:block; width:20px; height:20px; border-radius:50%; }
  .qx-sep{ width:1px; align-self:stretch; background:rgba(255,255,255,.3); margin:0 4px; }
  .qx-halves{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px; }
  .qx-half{ position:relative; display:flex; flex-direction:column; background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,32,96,.1); min-height:0; overflow:hidden; }
  .qx-hd{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; border-bottom:2px solid var(--line); background:#f7f9fd; position:relative; z-index:3; }
  .qx-hd h2{ margin:0 6px 0 2px; font-size:1.1rem; color:var(--navy); white-space:nowrap; }
  .qx-right .qx-hd h2{ color:var(--green); }
  .qx-hd button, .qx-start button{ font:700 .88rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); background:#fff; border:1.5px solid #c5d0e3; border-radius:8px; height:34px; padding:0 10px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
  .qx-hd button.qx-hide{ min-width:66px; justify-content:center; }
  .qx-curtain{ position:absolute; inset:0; z-index:5; background:repeating-linear-gradient(135deg, #eef2f9 0 22px, #e4eaf5 22px 44px); display:flex; align-items:center; justify-content:center; }
  .qx-curtain > div{ display:flex; flex-direction:column; align-items:center; gap:14px; background:#fff; border-radius:14px; padding:22px 30px; box-shadow:0 6px 24px rgba(0,32,96,.15); }
  .qx-curtain b{ font-size:1.3rem; color:var(--navy); }
  .qx-curtain button{ font:700 1.2rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; height:52px; padding:0 26px; border-radius:12px; border:0; background:var(--navy); color:#fff; cursor:pointer; }
  .qx-hd button.on, .qx-start button.on{ background:var(--navy); border-color:var(--navy); color:#fff; }
  .qx-hd button.qx-lv{ max-width:100%; overflow:hidden; font-weight:700; }
  .qx-lv .lvl-name{ overflow:hidden; text-overflow:ellipsis; }
  .qx-n{ display:inline-flex; align-items:center; gap:0; }
  .qx-n button{ width:32px; padding:0; justify-content:center; }
  .qx-n b{ min-width:26px; text-align:center; color:var(--navy); }
  .qx-body{ position:relative; flex:1 1 auto; min-height:0; }
  .qx-ink{ position:absolute; inset:0; width:100%; height:100%; z-index:2; touch-action:none; cursor:crosshair; }
  .qx-ink.erase{ cursor:cell; }
  /* the example: the question at the top, room for the working below */
  .qx-ex{ position:absolute; left:14px; right:14px; top:12px; height:46%; overflow:hidden; }
  .qx-cell .qx-in{ position:absolute; left:0; top:0; transform-origin:top left; }
  /* the students' questions */
  .qx-grid{ position:absolute; inset:10px; display:grid; gap:10px; }
  .qx-card{ position:relative; border:2px solid var(--line); border-radius:10px; min-height:0; min-width:0; }
  .qx-card.up{ border-color:#E8C27A; background:#FFFCF3; }
  .qx-card .qx-cell{ position:absolute; left:40px; right:46px; top:8px; bottom:8px; overflow:hidden; }
  .qx-card.sol .qx-cell{ bottom:40px; }
  .qx-num{ position:absolute; left:6px; top:7px; width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:center; }
  .qx-card.up .qx-num{ background:var(--gold); }
  .qx-tag{ position:absolute; left:4px; top:38px; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.7rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--gold); }
  .qx-re{ position:absolute; right:6px; top:6px; z-index:3; width:34px; height:34px; border-radius:8px; border:1.5px solid #c5d0e3; background:#fff; color:var(--navy); font:700 1.05rem/1 "Segoe UI", Arial, sans-serif; cursor:pointer; opacity:.75; }
  .qx-re:hover{ opacity:1; }
  .qx-sol-btn{ position:absolute; right:6px; bottom:6px; z-index:3; height:30px; border-radius:8px; border:1.5px solid #9fd0ad; background:#fff; color:var(--green); font:700 .8rem "Segoe UI", Arial, sans-serif; padding:0 9px; cursor:pointer; }
  .qx-ans{ margin-top:10px; padding:6px 10px; border-radius:8px; background:#E9F6EE; border:1.5px solid #9fd0ad; color:#14532d; display:inline-block; }
  .qx-ans b{ font-family:"Segoe UI", Arial, sans-serif; margin-right:6px; }
  .qx-wait{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; text-align:center; padding:12px; }
  .qx-wait.err{ color:var(--red); }
  /* before the students' questions are shown */
  .qx-start{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; text-align:center; }
  .qx-start p{ margin:0; color:var(--muted); font-weight:600; }
  .qx-start .row{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; align-items:center; }
  .qx-start .row button{ min-width:40px; justify-content:center; }
  .qx-start .go{ height:58px; font-size:1.25rem; padding:0 26px; background:var(--green); border-color:var(--green); color:#fff; border-radius:12px; }
  .qx-start .lbl{ font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--navy); }
  /* level menu and worked solutions, over the board */
  .qx-over{ position:absolute; inset:0; z-index:10; background:rgba(0,18,55,.45); display:flex; align-items:flex-start; justify-content:center; padding:4vh 3vw; }
  .qx-box{ position:relative; background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.35); max-width:min(1000px, 100%); width:100%; max-height:100%; overflow:auto; padding:16px 18px; }
  .qx-box h3{ margin:0 50px 12px 0; color:var(--navy); font-size:1.15rem; }
  .qx-x{ position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:50%; border:0; background:var(--navy); color:#fff; font:700 22px/1 system-ui, sans-serif; cursor:pointer; }
  .qx-lvs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px; }
  .qx-lvs button{ text-align:left; font:700 1rem "Segoe UI", Aptos, Calibri, Arial, sans-serif; color:var(--navy); background:#fff; border:2px solid #cfd8e8; border-radius:10px; padding:10px 12px; cursor:pointer; }
  .qx-lvs button.on{ border-color:var(--navy); background:#E8EEF9; }
  .qx-solq{ padding:10px 12px; background:#f7f9fd; border-radius:10px; margin-bottom:12px; }
  .qx-msg{ position:absolute; left:50%; top:58px; transform:translateX(-50%); z-index:12; background:#FFF4D6; color:#7a4b00; border:1.5px solid #E8C27A; border-radius:10px; padding:6px 14px; font-weight:700; font-size:.9rem; pointer-events:none; }

  /* worksheet cards inside the board: only the question */
  .qz{ background:transparent !important; padding:0 !important; margin:0 !important; min-height:0 !important; display:block !important; box-shadow:none !important; }
  .qx-ans .qz{ display:inline !important; }
  .qz .qcard{ box-shadow:none !important; border:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; width:auto !important; max-width:none !important; min-height:0 !important; cursor:default; }

  /* the Present display: the board at the main screen's size, zoomed to fit */
  body.mwm-display #qx{ position:relative !important; width:var(--qw, 1600px) !important; height:var(--qh, 860px) !important; }
  body.mwm-display #qx.idle{ display:flex; align-items:center; justify-content:center; }
  body.mwm-display #qx.idle .qx-idle{ display:block; font-size:1.6rem; font-weight:700; color:var(--navy); }
  body.mwm-display .mwm-present-go{ display:none !important; }
  body.mwm-display, body.mwm-display html{ touch-action:none; }

  @media (max-width:900px){
    .qx-halves{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
    .qx-title{ display:none; }
  }