/* CODED Juniors Academy — Placement Quest shared styles
   Palette from the Juniors Academy brand book; body face matches the CODED deck maker (IBM Plex Sans). */
:root{
  --red:#FE3D3E; --red-deep:#C42021; --red-tint:#FFE3E3;
  --blue:#0E6FFE; --blue-deep:#0A52C2; --blue-light:#5591FF; --blue-tint:#E3EDFF;
  --green:#30CB67; --green-deep:#167A3B; --green-tint:#DDF6E6;
  --amber:#F5A623; --amber-tint:#FFF1D6;
  --navy:#283042; --ink:#000F3A; --ink-2:#4A5370; --ink-3:#6B7390;
  --ground:#F4F5F8; --paper:#FFFFFF; --line:#DDE1EA; --line-2:#C5CAD8;
  --track:var(--blue); --track-deep:var(--blue-deep); --track-tint:var(--blue-tint); --track-fill:var(--blue-deep);
  --font-display:"Montserrat","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-ar:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shadow:0 8px 24px rgba(0,15,58,.08);
}
*{box-sizing:border-box}
.screen{width:1366px;height:768px;position:relative;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:20px;line-height:1.4;
  background-image:linear-gradient(rgba(40,48,66,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(40,48,66,.06) 1px,transparent 1px);background-size:96px 96px;background-position:-1px -1px}
.screen.red{--track:var(--red);--track-deep:var(--red-deep);--track-tint:var(--red-tint);--track-fill:#C42021}
.screen[dir=rtl]{font-family:var(--font-ar)}
.screen[dir=rtl] .display{font-family:var(--font-ar);font-weight:700;letter-spacing:0}
.display{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1;color:var(--navy);margin:0}
.h1{font-size:72px}.h2{font-size:44px}.h3{font-size:30px}
.screen[dir=rtl] .display{text-transform:none}
.muted{color:var(--ink-2)}
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:var(--red);color:#fff;border-radius:8px;padding:6px 14px 5px;font-family:var(--font-display);font-weight:800;line-height:1;text-decoration:none}
.logo b{font-size:18px;letter-spacing:.04em}.logo small{font-size:9px;letter-spacing:.18em}

/* Buttons — child screens: min 56px tall, 20px+ text */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:var(--r-pill);border:2px solid transparent;font:inherit;font-weight:600;font-size:20px;cursor:pointer;text-decoration:none;color:var(--navy);background:var(--paper);box-shadow:var(--shadow)}
.btn.primary{background:var(--track-fill);color:#fff;border-color:var(--track-fill)}
.btn.primary:hover{filter:brightness(.88)}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--line-2)}
.btn.ghost:hover{background:var(--paper)}
.btn.xl{min-height:88px;font-size:28px;padding:0 44px;border-radius:var(--r-lg)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:4px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 3px #fff}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Question chrome */
.chrome{height:88px;display:flex;align-items:center;gap:24px;padding:0 32px;background:var(--paper);border-bottom:1px solid var(--line)}
.chrome .map{display:flex;align-items:center;gap:0;flex:1;justify-content:center}
.stamp{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r-pill);border:2px solid var(--line-2);font-size:18px;font-weight:600;color:var(--ink-3);background:var(--paper);white-space:nowrap}
.stamp .dot{width:14px;height:14px;border-radius:50%;background:var(--line-2)}
.stamp.done{border-color:var(--green);color:var(--green-deep);background:var(--green-tint)}
.stamp.done .dot{background:var(--green)}
.stamp.now{border-color:var(--track-fill);color:#fff;background:var(--track-fill)}
.stamp.now .dot{background:#fff}
.stamp.bonus{border-style:dashed}
.stamp.bonus.now{border-style:solid;background:var(--amber);border-color:var(--amber);color:var(--navy)}
.link{width:36px;height:4px;background:var(--line-2);border-radius:2px}
.link.done{background:var(--green)}
.timer{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:var(--r-pill);background:var(--navy);color:#fff;font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums;min-width:124px;justify-content:center}
.timer.warn{background:var(--red);animation:pulse 1s ease-in-out infinite}
.timer.paused{background:var(--paper);color:var(--ink-3);border:2px dashed var(--line-2)}
.timer.bonus{background:var(--amber);color:var(--navy)}
@keyframes pulse{50%{transform:scale(1.05)}}
.tools{display:flex;align-items:center;gap:12px}
.tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;min-width:48px;padding:0 14px;border-radius:var(--r-pill);border:2px solid var(--line-2);background:var(--paper);font:inherit;font-size:18px;font-weight:600;color:var(--navy);cursor:pointer}
.tool:hover{border-color:var(--navy)}
.tool.lang span{color:var(--ink-3);font-weight:500}
.tool.skip{border-color:transparent;background:transparent;color:var(--ink-2)}
.tool.skip:hover{background:var(--ground)}
.tool svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Question body */
.qbody{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;padding:32px 48px 104px}
.qbody.one{grid-template-columns:minmax(0,1fr)}
.qtag{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-pill);background:var(--track-tint);color:var(--track-deep);font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0}
.screen.red .qtag{color:#B51F20}
.screen[dir=rtl] .qtag{letter-spacing:0}
.qtag.bonus{background:var(--amber-tint);color:#8A5A00}
.qtag.fun{background:var(--green-tint);color:var(--green-deep)}
.q{font-size:30px;font-weight:600;line-height:1.3;color:var(--navy);margin:14px 0 0}
.panel{background:var(--paper);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);padding:24px;position:relative}
.opts{display:grid;gap:16px;margin-top:24px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{display:flex;align-items:center;gap:16px;min-height:72px;padding:14px 20px;border-radius:var(--r-md);border:3px solid var(--line);background:var(--paper);font:inherit;font-size:22px;font-weight:600;color:var(--navy);text-align:start;cursor:pointer;box-shadow:var(--shadow)}
.opt .key{width:40px;height:40px;border-radius:10px;background:var(--ground);display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink-2);flex:none;font-family:var(--font-display)}
.opt:hover{border-color:var(--track);transform:translateY(-2px)}
.opt.selected{border-color:var(--track);background:var(--track-tint)}
.opt.selected .key{background:var(--track-fill);color:#fff}
.opt[disabled]{opacity:.5;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px;border-radius:var(--r-pill);border:3px solid var(--line);background:var(--paper);font:inherit;font-size:20px;font-weight:600;color:var(--navy);cursor:grab;box-shadow:var(--shadow)}
button.chip,button.sc,button.bc,button.task{font:inherit;text-align:start}
.chip.dragging{opacity:.9;transform:rotate(-3deg) scale(1.05);box-shadow:0 16px 32px rgba(0,15,58,.2);cursor:grabbing;border-color:var(--track)}
.chip.placed{border-color:var(--green);background:var(--green-tint)}
.dropzone{border:3px dashed var(--line-2);border-radius:var(--r-md);background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:18px;font-weight:600;min-height:64px}
.dropzone.over{border-color:var(--track);background:var(--track-tint);color:var(--navy);border-style:solid}
.dropzone.filled{border-style:solid;border-color:var(--green);background:var(--green-tint);color:var(--green-deep)}
.block{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:10px;border:0;font:inherit;color:#fff;font-weight:600;font-size:19px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);cursor:grab;white-space:nowrap}
.block.hat{background:#F2B233;color:var(--navy);border-radius:22px 22px 10px 10px}
.block.move{background:var(--blue-deep)}.block.turn{background:var(--blue-deep)}.block.ctrl{background:#F28B2E;color:var(--navy)}.block.sense{background:#2CB8B8;color:var(--navy)}.block.wait{background:#7C3FC9}
.block .n{background:#fff;color:var(--navy);border-radius:6px;padding:2px 8px;font-size:18px}
.block.selected{outline:4px solid var(--track);outline-offset:3px}
.grid-board{display:grid;grid-template-columns:repeat(6,56px);grid-template-rows:repeat(6,56px);gap:4px;background:var(--line);padding:4px;border-radius:12px}
.cell{background:var(--paper);border-radius:6px;position:relative;border:0;padding:0;font:inherit}
.cell:hover{background:var(--track-tint)}
.cell.selected{background:var(--track);box-shadow:inset 0 0 0 4px #fff}
.bot{position:absolute;inset:8px;border-radius:8px;background:var(--navy)}
.card{background:var(--paper);border:3px solid var(--line);border-radius:var(--r-md);padding:16px 18px;font:inherit;font-size:20px;font-weight:600;color:var(--navy);text-align:start;box-shadow:var(--shadow);cursor:grab;display:flex;align-items:center;gap:14px}
.card .num{width:36px;height:36px;border-radius:50%;background:var(--track-fill);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-family:var(--font-display);flex:none}
.footer{position:absolute;left:0;right:0;bottom:0;height:88px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 48px}
.toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:32px 56px;font-family:var(--font-display);font-size:48px;font-weight:800;box-shadow:0 24px 64px rgba(0,15,58,.3);display:flex;align-items:center;gap:20px}
.toast .ok{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center}
.toast .ok svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* Brand shapes */
.shape{position:absolute;pointer-events:none}
.shape.circle{border-radius:50%;background:var(--red)}
.shape.blob{background:var(--green);border-radius:46% 54% 60% 40%/50% 42% 58% 50%}
.shape.hex{background:var(--blue);clip-path:polygon(25% 4%,75% 4%,98% 50%,75% 96%,25% 96%,2% 50%)}
.shape.star{background:var(--red);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.face{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:40%;height:18%;display:flex;justify-content:space-between}
.face i{display:block;width:38%;height:100%;border:4px solid rgba(0,0,0,.7);border-top:0;border-radius:0 0 100px 100px;border-left:0;border-right:0;}

/* Staff */
.staff{font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--ground);min-height:100%}
.staff .top{height:64px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:24px;padding:0 32px}
.staff h1{font-family:var(--font-display);font-weight:800;font-size:24px;margin:0;text-transform:uppercase}
.staff h2{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.staff .sec{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.kv dt{color:var(--ink-3)}.kv dd{margin:0;font-weight:600}
.flag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.flag.red{background:var(--red-tint);color:var(--red-deep)}.flag.amber{background:var(--amber-tint);color:#8A5A00}.flag.green{background:var(--green-tint);color:#15733A}.flag.blue{background:var(--blue-tint);color:var(--blue-deep)}
.bar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}.bar i{display:block;height:100%;border-radius:5px}
.seg{display:inline-flex;border:2px solid var(--line-2);border-radius:999px;overflow:hidden}
.seg button{font:inherit;font-weight:600;height:40px;min-width:48px;padding:0 14px;border:0;background:var(--paper);color:var(--ink-2);cursor:pointer}
.seg button+button{border-left:2px solid var(--line-2)}
.seg button.on{background:var(--navy);color:#fff}
.seg button:hover{background:var(--ground)}
.seg button.on:hover{background:var(--ink)}
.sbtn{font:inherit;font-weight:700;height:44px;padding:0 22px;border-radius:999px;border:2px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer}
.sbtn.ghost{background:transparent;color:var(--navy)}
.sbtn[disabled]{opacity:.4;cursor:not-allowed}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:2px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:var(--blue-tint)}
.tbl tr.open td{background:#FFF8E6}
.profile{background:var(--navy);color:#fff;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px}
.profile .line{font-family:var(--font-display);font-weight:800;font-size:28px;text-transform:uppercase;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.profile .line .sep{opacity:.5}
.profile .bars{display:grid;gap:8px}
.profile .bars .row{display:grid;grid-template-columns:120px 1fr 52px;align-items:center;gap:12px;font-size:14px}
.profile .bar{background:rgba(255,255,255,.18)}
input.text,textarea.text,select.text{font:inherit;font-size:15px;padding:10px 12px;border:2px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--ink);width:100%}
input.text:focus,textarea.text:focus{outline:none;border-color:var(--blue)}
label.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.note{font-size:13px;color:var(--ink-2)}
.screen:not(.sheet) .note{font-size:18px}
.screen:not(.sheet) .lbl{font-size:18px}
.screen:not(.sheet) .muted{font-size:18px}