/* ============================================================
   💻 البرمجة — styles for the coding subject
   (block editor, code editor, coding questions, hub screens)
   Uses the app's tokens (style.css) so light/dark both work.
   ============================================================ */
:root {
  --cd-surface: #ffffff;
  --cd-soft: #f4f7fb;
  --cd-ink: #1b1b2f;
  --cd-code-bg: #1e2233;
  --cd-code-text: #e6e9f5;
  --bk-motion: #4c97ff;
  --bk-action: #ff8c1a;
  --bk-looks: #9966ff;
  --bk-sound: #cf63cf;
  --bk-control: #ffab19;
  --bk-var: #ff6680;
  --bk-func: #59c059;
  --bk-event: #ffbf00;
}
:root[data-theme="dark"] {
  --cd-surface: #212227;
  --cd-soft: #1b1c21;
}

/* ---------- small inline pieces used in explanations ---------- */
.kw-chip {
  display: inline-block; font-family: "Fira Code", Consolas, monospace; font-weight: 700;
  background: var(--cd-code-bg); color: #ffd479; padding: 0 8px; border-radius: 6px; font-size: .92em; direction: ltr; unicode-bidi: isolate;
}
.blk-chip {
  display: inline-block; color: #fff; font-weight: 800; font-size: .88em; padding: 2px 10px;
  border-radius: 8px; box-shadow: 0 2px 0 rgba(0,0,0,.25); margin: 1px 2px; white-space: nowrap;
}
.blk-chip.bk-motion { background: var(--bk-motion); } .blk-chip.bk-action { background: var(--bk-action); }
.blk-chip.bk-looks { background: var(--bk-looks); } .blk-chip.bk-sound { background: var(--bk-sound); }
.blk-chip.bk-control { background: var(--bk-control); } .blk-chip.bk-var { background: var(--bk-var); }
.blk-chip.bk-func { background: var(--bk-func); } .blk-chip.bk-event { background: var(--bk-event); color: var(--cd-ink); }

/* ---------- code blocks & syntax colours ---------- */
pre.code-block, .cq-console, .ce-hl, .ce-input {
  font-family: "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 15px; line-height: 1.55; tab-size: 4;
}
pre.code-block {
  background: var(--cd-code-bg); color: var(--cd-code-text); border-radius: 14px; padding: 12px 14px;
  margin: 8px 0; overflow-x: auto; white-space: pre; direction: ltr; text-align: left; unicode-bidi: isolate;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25);
}
.c-kw { color: #ff79c6; font-weight: 700; } .c-fn { color: #8be9fd; } .c-str { color: #f1fa8c; }
.c-num { color: #bd93f9; } .c-com { color: #7f8aa8; font-style: italic; } .c-op { color: #ffb86c; }
.c-tag { color: #ff79c6; } .c-attr { color: #50fa7b; } .c-id { color: inherit; }

/* ---------- the code editor ---------- */
.ce {
  display: flex; background: var(--cd-code-bg); border-radius: 14px; overflow: hidden; direction: ltr;
  border: 2px solid #2d3350; --ce-rows: 6; text-align: left;
}
.ce:focus-within { border-color: #5b8def; }
.ce-gutter {
  flex: none; width: 34px; padding: 10px 0; text-align: right; color: #5c6587; background: #191c2b;
  font-family: Consolas, monospace; font-size: 13px; line-height: 23.25px; overflow: hidden; user-select: none;
  max-height: calc(var(--ce-rows) * 23.25px + 20px);
}
.ce-gutter span { display: block; padding-right: 8px; }
.ce-gutter span.bad { background: #ff4b4b; color: #fff; }
.ce-area { position: relative; flex: 1; min-width: 0; }
.ce-hl, .ce-input {
  margin: 0; padding: 10px 12px; white-space: pre; overflow: auto; border: 0; outline: 0; background: transparent;
  height: calc(var(--ce-rows) * 23.25px + 20px); width: 100%; box-sizing: border-box; letter-spacing: normal;
}
.ce-hl { color: var(--cd-code-text); pointer-events: none; position: absolute; inset: 0; scrollbar-width: none; }
.ce-hl::-webkit-scrollbar { display: none; }
.ce-input { position: relative; color: transparent; caret-color: #fff; resize: none; display: block; }
.ce-input::selection { background: rgba(91,141,239,.45); color: transparent; }

/* ---------- block editor ---------- */
.bk { display: flex; gap: 10px; align-items: stretch; direction: rtl; }
.bk-palette {
  flex: 0 0 38%; max-width: 210px; display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--cd-soft); border-radius: 14px; max-height: 360px; overflow-y: auto; border: 2px solid var(--gray-border);
}
.bk-ws {
  flex: 1; min-width: 0; position: relative; background: var(--cd-surface); border: 2px dashed var(--gray-border);
  border-radius: 14px; padding: 30px 10px 12px; min-height: 180px; max-height: 360px; overflow-y: auto;
  background-image: radial-gradient(var(--gray-border) 1px, transparent 1px); background-size: 16px 16px;
}
.bk-count { position: absolute; top: 6px; left: 10px; font-size: 12px; color: var(--text-soft); font-weight: 800; }
.bk-count.warn { color: var(--wrong); right: 10px; left: 10px; text-align: center; }
.bk-hat {
  display: inline-block; background: var(--bk-event); color: var(--cd-ink); font-weight: 800; font-size: 14px;
  padding: 10px 14px 8px; border-radius: 16px 16px 6px 6px; box-shadow: 0 3px 0 #c99700;
}
.bk-hat-fn { background: var(--bk-func); color: #fff; box-shadow: 0 3px 0 #3c8f3c; margin-top: 16px; }
.bk-slot { min-height: 40px; padding: 4px 0 4px 0; border-radius: 8px; }
.bk-slot.bk-active { box-shadow: inset -4px 0 0 #58cc02; }
.bk-inner { margin-right: 18px; min-height: 36px; padding: 4px 4px 4px 0; background: rgba(0,0,0,.04); border-radius: 0 0 0 8px; }
.bk-empty { color: var(--text-soft); font-size: 13px; padding: 8px 6px; border: 2px dashed var(--gray-border); border-radius: 10px; text-align: center; }
.bk-block {
  color: #fff; font-weight: 800; font-size: 14px; border-radius: 10px; margin: 4px 0; user-select: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.22); position: relative; transition: transform .12s;
}
.bk-pal-item { padding: 9px 10px; display: flex; gap: 6px; align-items: center; cursor: grab; touch-action: none; margin: 0; }
.bk-pal-item:hover { transform: translateX(-3px); }
.bk-pal-item:focus-visible, .bk-del:focus-visible { outline: 3px solid #1cb0f6; outline-offset: 2px; }
.bk-pal-item i { font-style: normal; background: rgba(255,255,255,.25); padding: 0 6px; border-radius: 6px; }
.bk-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; cursor: grab; touch-action: none; flex-wrap: wrap; }
.bk-head select, .bk-head input {
  font: inherit; font-size: 13px; border: 0; border-radius: 8px; padding: 3px 6px; background: rgba(255,255,255,.92); color: var(--cd-ink);
  max-width: 170px; cursor: pointer;
}
.bk-head input { width: 110px; cursor: text; }
.bk-unit { font-size: 12px; opacity: .9; }
.bk-del {
  margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.18);
  color: #fff; font-weight: 900; font-size: 15px; line-height: 20px; cursor: pointer; padding: 0;
}
.bk-del:hover { background: rgba(0,0,0,.35); }
.bk-c > .bk-foot { height: 12px; border-radius: 0 0 10px 10px; }
.bk-else { padding-top: 4px; padding-bottom: 4px; font-size: 13px; cursor: default; }
.bk-motion { background: var(--bk-motion); } .bk-action { background: var(--bk-action); } .bk-looks { background: var(--bk-looks); }
.bk-sound { background: var(--bk-sound); } .bk-control { background: var(--bk-control); color: var(--cd-ink); }
.bk-var { background: var(--bk-var); } .bk-func { background: var(--bk-func); }
.bk-control .bk-del { color: var(--cd-ink); background: rgba(0,0,0,.12); }
.bk-block.bk-run { outline: 4px solid #fff; box-shadow: 0 0 0 7px #58cc02, 0 3px 0 rgba(0,0,0,.22); z-index: 2; }
.bk-block.bk-dragging { opacity: .35; }
.bk-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .92; transform: rotate(-3deg); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.bk-marker { height: 6px; border-radius: 3px; background: #58cc02; margin: 2px 0; box-shadow: 0 0 8px #58cc02; }
.bk-trash {
  display: none; position: sticky; bottom: 0; margin-top: 8px; text-align: center; padding: 8px; border-radius: 10px;
  background: var(--wrong-light); color: var(--wrong); font-weight: 800; border: 2px dashed var(--wrong);
}
.bk-is-dragging .bk-trash { display: block; }
.bk-trash-on .bk-trash, .bk-trash-on .bk-palette { background: var(--wrong); color: #fff; }
.bk-locked .bk-ws { pointer-events: none; }
.bk-locked .bk-palette { opacity: .5; pointer-events: none; }
.bk-shake { animation: bkShake .35s; }
@keyframes bkShake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.cq-showblocks .bk { display: block; }
.cq-showblocks .bk-ws { max-height: none; min-height: 0; padding-top: 10px; border-style: solid; }
.cq-showblocks .bk-count { display: none; }

/* ---------- a full puzzle: stage + tools + editor ---------- */
.bp { display: flex; flex-direction: column; gap: 10px; }
.bp-stage-wrap { position: relative; }
.bp-stage { border-radius: 16px; overflow: hidden; background: #1b4332; min-height: 120px; border: 3px solid var(--cd-ink); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.bp-stage canvas { display: block; margin: 0 auto; image-rendering: pixelated; }
.bp-loading { color: #fff; padding: 40px 16px; text-align: center; font-weight: 800; }
.bp-msg {
  position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 800;
  background: rgba(27,27,47,.92); color: #fff; opacity: 0; transform: translateY(8px); transition: .25s; pointer-events: none; font-size: 15px;
}
.bp-msg.show { opacity: 1; transform: none; }
.bp-msg.good { background: rgba(13,148,136,.95); } .bp-msg.bad { background: rgba(157,23,77,.95); } .bp-msg.hint { background: rgba(28,107,120,.95); }
.bp-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-tools .btn { padding: 10px 14px; font-size: 15px; }
.bp-run { flex: 1; min-width: 120px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; direction: ltr; }
.bp-chip {
  font-family: Consolas, monospace; font-weight: 700; font-size: 13px; border: 0; border-radius: 10px; padding: 7px 10px;
  background: var(--cd-code-bg); color: #8be9fd; cursor: pointer; box-shadow: 0 3px 0 #0e1120;
}
.bp-chip:active { transform: translateY(2px); box-shadow: none; }

/* ---------- lesson "try it" box ---------- */
.try-box { margin-top: 16px; padding: 12px; border-radius: 16px; background: var(--cd-soft); border: 2px solid var(--primary-light); }
.try-title { font-weight: 800; margin-bottom: 8px; color: var(--primary); }

/* ---------- quiz: code types ---------- */
.quiz-code { margin: 4px 0 10px; }
.choices-code .choice { text-align: left; }
.choice-codetext { font-family: "Fira Code", Consolas, monospace; white-space: pre-wrap; direction: ltr; unicode-bidi: isolate; text-align: left; flex: 1; }
.cq { display: flex; flex-direction: column; gap: 10px; }
.cq-hint { font-size: 14px; color: var(--text-soft); font-weight: 800; }
.cq-goal { background: var(--blue-light); color: #0b5d86; border-radius: 12px; padding: 10px 12px; font-weight: 800; }
:root[data-theme="dark"] .cq-goal { background: #10324a; color: #a9dcff; }
.cq-answer {
  min-height: 56px; border-radius: 14px; border: 2px dashed var(--gray-border); padding: 8px; display: flex; gap: 6px;
  flex-wrap: wrap; align-items: flex-start; background: var(--cd-surface);
}
.cq-answer.is-lines, .cq-bank.is-lines { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.cq-placeholder { color: var(--text-soft); font-size: 14px; padding: 8px; }
.cq-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.cq-piece {
  font-family: "Fira Code", Consolas, monospace; font-size: 15px; text-align: left; border: 0; cursor: pointer;
  background: var(--cd-code-bg); color: var(--cd-code-text); border-radius: 10px; padding: 9px 12px; box-shadow: 0 3px 0 #0e1120; white-space: pre;
}
.is-text .cq-piece { font-family: var(--font); text-align: right; white-space: normal; background: var(--primary-light); color: var(--primary-text); box-shadow: 0 3px 0 #a9d3d9; }
.cq-piece:disabled { opacity: .25; cursor: default; }
.cq-piece.picked { box-shadow: 0 3px 0 #0e1120, inset 4px 0 0 #58cc02; }
.cq-piece.correct { box-shadow: inset 0 0 0 3px var(--correct); } .cq-piece.wrong { box-shadow: inset 0 0 0 3px var(--wrong); }
.cq-fill-code { white-space: pre-wrap; }
.cq-blank {
  font: inherit; border: 0; border-bottom: 3px solid #ffd479; background: rgba(255,212,121,.15); color: #ffd479; border-radius: 6px;
  padding: 0 6px; min-width: 48px; cursor: pointer; margin: 0 2px;
}
.cq-blank.sel { outline: 2px solid #8be9fd; } .cq-blank.filled { color: #fff; }
.cq-blank.ok { border-color: #50fa7b; color: #50fa7b; } .cq-blank.bad { border-color: #ff5555; color: #ff5555; }
.cq-opts, .cq-fixes { display: flex; flex-wrap: wrap; gap: 8px; direction: ltr; }
.cq-opt {
  font-family: "Fira Code", Consolas, monospace; font-size: 15px; border: 2px solid var(--gray-border); border-bottom-width: 4px;
  background: var(--cd-surface); color: var(--text); border-radius: 12px; padding: 9px 14px; cursor: pointer;
}
.cq-opt.sel { border-color: var(--blue); background: var(--blue-light); color: #0b5d86; }
.cq-fix { background: var(--cd-code-bg); color: var(--cd-code-text); border-color: #2d3350; }
.cq-fix.sel { border-color: #58cc02; background: #22351f; color: #fff; }
.cq-lines { background: var(--cd-code-bg); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.cq-line {
  display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; color: var(--cd-code-text);
  font-family: "Fira Code", Consolas, monospace; font-size: 15px; padding: 6px 8px; border-radius: 8px; cursor: pointer; white-space: pre;
}
.cq-line:hover { background: rgba(255,255,255,.06); }
.cq-line.sel { background: rgba(255,212,121,.18); box-shadow: inset 4px 0 0 #ffd479; }
.cq-line.correct { background: rgba(80,250,123,.15); box-shadow: inset 4px 0 0 #50fa7b; }
.cq-line.wrong { background: rgba(255,85,85,.18); box-shadow: inset 4px 0 0 #ff5555; }
.cq-ln { color: #5c6587; min-width: 16px; font-size: 13px; }
.cq-match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cq-col { display: flex; flex-direction: column; gap: 8px; }
.cq-m {
  border: 2px solid var(--gray-border); border-bottom-width: 4px; border-radius: 12px; background: var(--cd-surface); color: var(--text);
  padding: 8px 10px; cursor: pointer; text-align: left; font-family: "Fira Code", Consolas, monospace; font-size: 14px;
  box-shadow: inset 6px 0 0 var(--mc, transparent);
}
.cq-m pre { margin: 0; white-space: pre-wrap; font: inherit; }
.cq-m.sel { border-color: var(--blue); }
.cq-m.correct { border-color: var(--correct); } .cq-m.wrong { border-color: var(--wrong); }
.cq-out { text-align: center; font-weight: 800; }
.cq-run-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cq-run-row .btn { padding: 9px 14px; font-size: 15px; }
.cq-status { font-size: 13px; color: var(--text-soft); font-weight: 800; }
.cq-inputs { font-size: 13px; color: var(--text-soft); font-weight: 700; }
.cq-inputs code { background: var(--cd-soft); padding: 2px 8px; border-radius: 6px; }
.cq-console {
  background: #0d1017; color: #b7f5c5; border-radius: 12px; padding: 10px 12px; min-height: 44px; margin: 0;
  white-space: pre-wrap; direction: ltr; text-align: left; unicode-bidi: plaintext; overflow-x: auto;
}
.cq-console:empty::before { content: '>_ المخرجات تظهر هنا'; color: #4b5563; direction: rtl; }
.cq-console.err { color: #ffb4b4; }
.cq-tip:empty { display: none; }
.cq-tip { border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 15px; background: var(--cd-soft); }
.cq-tip.bad { background: var(--wrong-light); color: var(--wrong-text); }
.cq-tip.good { background: var(--correct-light); color: var(--correct-text); }
.cq-tip.hint { background: var(--blue-light); color: #0b5d86; }
.cq-solution { border-top: 2px dashed var(--gray-border); padding-top: 8px; }
.cq-goals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 14px; }
.cq-goals li.done { color: var(--correct-text); }
.cq-tabs { display: flex; gap: 6px; direction: ltr; }
.cq-tab { border: 0; border-radius: 10px 10px 0 0; padding: 7px 14px; font-weight: 800; background: var(--cd-soft); color: var(--text-soft); cursor: pointer; font-family: Consolas, monospace; }
.cq-tab.on { background: var(--cd-code-bg); color: #ffd479; }
.cq-preview { border-radius: 14px; overflow: hidden; border: 2px solid var(--gray-border); background: #fff; }
.cq-browser { display: flex; gap: 5px; align-items: center; padding: 6px 10px; background: #e9edf2; direction: ltr; }
.cq-browser span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.cq-browser span:nth-child(2) { background: #febc2e; } .cq-browser span:nth-child(3) { background: #28c840; }
.cq-browser b { margin-left: 8px; font-size: 12px; color: #555; font-family: system-ui; }
.cq-preview iframe { width: 100%; height: 220px; border: 0; display: block; background: #fff; }

/* ---------- the coding screen ---------- */
.code-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 16px 90px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 760px) { .code-body { max-width: 760px; width: 100%; margin: 0 auto; } }
.ch-intro { color: var(--text-soft); font-weight: 700; margin: 0; }
.ch-hero {
  display: flex; gap: 14px; align-items: center; color: #fff; border-radius: 22px; padding: 18px;
  background: linear-gradient(135deg, #223c52, #1c6b78 55%, #58cc02); box-shadow: 0 6px 0 #162838;
}
.ch-rank-ico { font-size: 54px; width: 76px; height: 76px; display: grid; place-items: center; background: rgba(255,255,255,.15); border-radius: 50%; flex: none; animation: chBob 2.4s ease-in-out infinite; }
@keyframes chBob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.ch-rank-body { flex: 1; min-width: 0; }
.ch-eyebrow { font-size: 13px; opacity: .85; }
.ch-rank-name { font-size: 24px; font-weight: 900; }
.ch-rank-next { font-size: 13px; opacity: .9; margin-top: 4px; }
.ch-bar { display: block; height: 10px; background: rgba(0,0,0,.18); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.ch-bar > span { display: block; height: 100%; background: #ffc800; border-radius: 6px; transition: width .6s; }
.ch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ch-stats > div { background: var(--cd-surface); border: 2px solid var(--gray-border); border-bottom-width: 4px; border-radius: 14px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; }
.ch-stats b { font-size: 20px; color: var(--text); } .ch-stats span { font-size: 12px; color: var(--text-soft); }
.ch-continue {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; border: 0; border-radius: 18px; padding: 12px 16px; cursor: pointer;
  background: var(--green); color: #fff; box-shadow: 0 5px 0 var(--green-shade); font-family: inherit;
}
.ch-continue:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--green-shade); }
.ch-continue-ico { font-size: 30px; }
.ch-continue small { display: block; opacity: .9; font-size: 13px; } .ch-continue b { font-size: 18px; }
.ch-continue > span:nth-child(2) { flex: 1; }
.ch-go { font-size: 22px; }
.ch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .ch-grid { grid-template-columns: repeat(3, 1fr); } }
.ch-card {
  border: 2px solid var(--gray-border); border-bottom: 5px solid var(--c); background: var(--cd-surface); color: var(--text); border-radius: 18px;
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; text-align: center;
}
.ch-card:hover { transform: translateY(-2px); }
.ch-card:active { transform: translateY(3px); }
.ch-card-ico { font-size: 34px; } .ch-card b { font-size: 16px; } .ch-card small { font-size: 12px; color: var(--text-soft); }
.ch-section { font-weight: 900; color: var(--text); }
.ch-ach-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.ch-ach-strip span { background: #fff6d5; color: #8a6500; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 13px; }
.ch-stars { color: #ffc800; letter-spacing: 1px; font-size: 15px; } .ch-stars i { color: var(--gray-shade); font-style: normal; }

/* games list / level map */
.cg-card {
  display: flex; gap: 12px; align-items: flex-start; text-align: right; width: 100%; border: 2px solid var(--gray-border);
  border-bottom: 5px solid var(--c, var(--primary)); background: var(--cd-surface); color: var(--text); border-radius: 18px; padding: 12px; cursor: pointer; font-family: inherit;
}
.cg-card:hover { transform: translateY(-2px); }
.cg-ico { font-size: 38px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--cd-soft); flex: none; }
.cg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cg-body b { font-size: 17px; } .cg-body small { color: var(--text-soft); font-size: 13px; }
.cg-tags { display: flex; gap: 6px; flex-wrap: wrap; } .cg-tags i { font-style: normal; font-size: 11.5px; background: var(--cd-soft); padding: 2px 8px; border-radius: 999px; color: var(--text-soft); font-weight: 800; }
.cg-progress { display: block; height: 8px; background: var(--gray-border); border-radius: 6px; overflow: hidden; margin-top: 4px; }
.cg-progress > span { display: block; height: 100%; background: var(--c, var(--green)); }
.cg-meta { font-size: 12px; color: var(--text-soft); font-weight: 800; }
.code-games-arcade { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cg-head { display: flex; gap: 12px; align-items: center; background: var(--c); color: #fff; border-radius: 18px; padding: 14px; }
.cg-head > span { font-size: 44px; } .cg-head small { display: block; opacity: .9; }
.cg-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.cg-level {
  aspect-ratio: 1; border-radius: 18px; border: 2px solid var(--gray-border); border-bottom-width: 5px; background: var(--cd-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-family: inherit; color: var(--text);
}
.cg-level b { font-size: 24px; }
.cg-level.done { border-color: #ffc800; background: #fff9e0; }
:root[data-theme="dark"] .cg-level.done { background: #3a3218; }
.cg-level.locked { opacity: .5; cursor: not-allowed; }
.cg-play-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.cg-goal { background: var(--cd-soft); border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: 14px; border: 2px solid var(--gray-border); }
.cg-result { border-radius: 20px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 8px; animation: cgPop .4s cubic-bezier(.2,1.6,.4,1); }
.cg-result.win { background: var(--correct-light); color: var(--correct-text); }
.cg-result.lose { background: var(--blue-light); color: #0b5d86; }
.cg-result-big { font-size: 40px; } .cg-result-big .ch-stars { font-size: 40px; }
.cg-result-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
@keyframes cgPop { from { transform: scale(.7); opacity: 0; } }

/* playground */
.pg-tabs { display: flex; gap: 6px; background: var(--cd-soft); padding: 5px; border-radius: 14px; }
.pg-tab { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 9px; font-weight: 800; font-family: inherit; color: var(--text-soft); cursor: pointer; }
.pg-tab.on { background: var(--cd-surface); color: var(--primary); box-shadow: 0 2px 0 var(--gray-border); }
.pg-body { display: flex; flex-direction: column; gap: 10px; }
.pg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 800; }
.pg-row select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--gray-border); background: var(--cd-surface); color: var(--text); }
.pg-inputs { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; color: var(--text-soft); }
.pg-inputs textarea { font-family: Consolas, monospace; font-size: 14px; border-radius: 10px; border: 2px solid var(--gray-border); padding: 6px 10px; background: var(--cd-surface); color: var(--text); }

/* projects */
.pj-card.done { border-bottom-color: var(--correct); }
.pj-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pj-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--cd-soft); border: 2px solid transparent; }
.pj-steps li.cur { border-color: var(--blue); background: var(--blue-light); color: #0b5d86; }
:root[data-theme="dark"] .pj-steps li.cur { background: #10324a; color: #a9dcff; }
.pj-steps li.done { opacity: .75; }
.pj-steps small { display: block; font-weight: 700; margin-top: 2px; }
.pj-work { display: flex; flex-direction: column; gap: 10px; }

/* books */
.library-section-title { margin: 18px 0 8px; font-size: 17px; }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.cb-book { border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: center; font-family: inherit; color: var(--text); }
.cb-cover {
  aspect-ratio: 3/4; border-radius: 6px 16px 16px 6px; background: linear-gradient(135deg, var(--c), #1b1b2f 160%); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: -6px 0 0 rgba(0,0,0,.18) inset, 0 6px 0 rgba(0,0,0,.15);
  transition: transform .2s;
}
.cb-book:hover .cb-cover { transform: rotate(-2deg) translateY(-3px); }
.cb-cover .cb-ico { font-size: 46px; } .cb-grade { font-size: 12px; background: rgba(255,255,255,.2); padding: 2px 10px; border-radius: 999px; }
.cb-book b { font-size: 14px; } .cb-book small { color: var(--text-soft); font-size: 12px; }
.cb-head { display: flex; gap: 12px; align-items: center; background: var(--c); color: #fff; border-radius: 18px; padding: 14px; }
.cb-head .cb-ico { font-size: 40px; } .cb-head small { display: block; opacity: .9; }
.cb-chapter-top { display: flex; justify-content: space-between; align-items: center; color: var(--text-soft); font-weight: 800; }
.cb-chapter-top .btn { padding: 6px 12px; font-size: 14px; }
.cb-p { font-size: 17px; line-height: 1.9; margin: 0; color: var(--text); }
.cb-art { font-size: 48px; text-align: center; letter-spacing: 6px; }
.cb-tip { background: #fff6d5; color: #7a5a00; border-radius: 14px; padding: 10px 14px; font-weight: 800; }
:root[data-theme="dark"] .cb-tip { background: #3a3218; color: #ffe39a; }
.cb-code { display: flex; flex-direction: column; gap: 6px; }
.cb-code .btn { align-self: flex-start; padding: 7px 14px; font-size: 14px; }
.cb-quiz { background: var(--cd-soft); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cb-opts { display: flex; flex-direction: column; gap: 6px; }
.cb-why { font-weight: 800; color: var(--correct-text); min-height: 1em; }
.book-cover-icon { display: grid; place-items: center; font-size: 64px; background: linear-gradient(135deg, #1c6b78, #58cc02); border-radius: 10px; color: #fff; }

/* achievements */
.ch-ladder { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 6px 2px 10px; }
.ch-ladder > div { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .4; width: 74px; text-align: center; }
.ch-ladder > div span { font-size: 30px; } .ch-ladder > div small { font-size: 11px; font-weight: 800; }
.ch-ladder > div.on { opacity: 1; } .ch-ladder > div.cur span { animation: chBob 2s infinite; filter: drop-shadow(0 0 8px #ffc800); }
.ch-ladder > i { color: var(--gray-shade); font-style: normal; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ach-card { border-radius: 16px; border: 2px solid var(--gray-border); background: var(--cd-surface); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ach-card .ach-ico { font-size: 34px; filter: grayscale(1); opacity: .6; }
.ach-card.got { border-color: #ffc800; background: #fffbea; }
:root[data-theme="dark"] .ach-card.got { background: #3a3218; }
.ach-card.got .ach-ico { filter: none; opacity: 1; }
.ach-card small { color: var(--text-soft); font-size: 12px; } .ach-card em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--text-soft); }
.ach-card .ch-bar { width: 100%; background: var(--gray-border); }
.ach-toast {
  position: fixed; top: 16px; left: 50%; transform: translate(-50%, -140%); z-index: 10000; display: flex; gap: 12px; align-items: center;
  background: #1b1b2f; color: #fff; padding: 12px 20px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .4s cubic-bezier(.2,1.4,.4,1);
  border: 3px solid #ffc800; max-width: calc(100vw - 32px);
}
.ach-toast.show { transform: translate(-50%, 0); }
.ach-toast .ach-ico { font-size: 36px; }

/* bug hunter & syntax builder */
.bh, .sb { display: flex; flex-direction: column; gap: 10px; }
.bh-stage, .sb-stage { border-radius: 16px; overflow: hidden; border: 3px solid var(--cd-ink); background: #2d3436; }
.bh-stage canvas, .sb-stage canvas { display: block; margin: 0 auto; }
.sb-stage { max-width: 420px; width: 100%; margin: 0 auto; }
.bh-panel { display: flex; flex-direction: column; gap: 8px; }
.bh-title { font-weight: 900; }
.bh-actions .btn { width: 100%; }
.bh-msg { font-weight: 800; min-height: 1.2em; }
.bh-msg.good { color: var(--correct-text); } .bh-msg.bad { color: var(--wrong-text); }

/* phones */
@media (max-width: 520px) {
  .bk { flex-direction: column; }
  .bk-palette { flex: none; max-width: none; flex-direction: row; flex-wrap: wrap; max-height: 150px; }
  .bk-pal-item { flex: 1 1 auto; font-size: 13px; padding: 8px; }
  .bk-ws { max-height: 300px; }
  .ch-stats b { font-size: 17px; }
  .ch-rank-name { font-size: 20px; }
  .cq-match { grid-template-columns: 1fr 1fr; gap: 6px; }
  pre.code-block, .cq-piece, .cq-line { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-rank-ico, .ch-ladder > div.cur span { animation: none; }
  .cg-result, .ach-toast { transition: none; animation: none; }
}

/* ---------- arcade categories ---------- */
.arcade-cats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; }
.arcade-cat {
  flex: none; border: 2px solid var(--gray-border); border-bottom-width: 4px; background: var(--cd-surface); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.arcade-cat.on { background: var(--primary); border-color: var(--primary-shade); color: #fff; }

/* ---------- profile: coding rewards ---------- */
.profile-coding { width: 100%; }
.pc-card { border: 2px solid var(--gray-border); border-radius: 18px; padding: 14px; background: var(--cd-surface); display: flex; flex-direction: column; gap: 10px; text-align: right; }
.pc-head { display: flex; gap: 12px; align-items: center; }
.pc-rank { font-size: 40px; width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #1c6b78, #58cc02); }
.pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-eyebrow { font-size: 13px; color: var(--text-soft); font-weight: 800; }
.pc-body b { font-size: 18px; color: var(--text); }
.pc-body .ch-bar { background: var(--gray-border); }
.pc-body small { color: var(--text-soft); font-size: 12px; }
.pc-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-stats span { background: var(--cd-soft); border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--text); }
.pc-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.pc-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 26px; padding: 6px 2px; border-radius: 12px; background: var(--cd-soft); filter: grayscale(1); opacity: .55; }
.pc-badge small { font-size: 10.5px; text-align: center; line-height: 1.3; color: var(--text-soft); }
.pc-badge.on { filter: none; opacity: 1; background: #fff6d5; }
:root[data-theme="dark"] .pc-badge.on { background: #3a3218; }
.pc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pc-actions .btn { flex: 1; min-width: 120px; padding: 8px 10px; font-size: 14px; }

/* keep big worlds from pushing the block editor off-screen */
.bp-stage canvas { max-height: 300px; width: auto !important; height: auto !important; max-width: 100%; }
@media (max-width: 520px) { .bp-stage canvas { max-height: 240px; } }

/* ---------- laptops & desktops: use the space ---------- */
@media (min-width: 900px) {
  body.subject-coding .lesson-body, body.subject-coding .quiz-body { max-width: min(1180px, 100%); }
  body.subject-coding .quiz-prompt { font-size: 24px; }
  .code-body { max-width: min(1120px, 100%); }
  .ch-grid { grid-template-columns: repeat(3, 1fr); }
  .cg-levels { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  /* a block puzzle: world + buttons on one side, the editor on the other */
  .bp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
  .bp-stage-wrap { grid-column: 1; grid-row: 1; }
  .bp-tools { grid-column: 1; grid-row: 2; }
  .bp-editor { grid-column: 2; grid-row: 1 / span 3; }
  .bp-stage canvas { max-height: 420px; }
  .bk-ws, .bk-palette { max-height: 480px; }
  .bk-ws { min-height: 320px; }
  /* bug hunter: battle beside the code */
  .bh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  /* Python / web challenges: editor beside output */
  .cq-pycode { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .cq-pycode > .cq-goal { grid-column: 1 / -1; }
  .cq-pycode > .cq-editor, .cq-pycode > .cq-inputs, .cq-pycode > .cq-run-row { grid-column: 1; }
  .cq-pycode > .cq-console, .cq-pycode > .cq-tip, .cq-pycode > .cq-solution { grid-column: 2; }
  .cq-pycode > .cq-console { grid-row: 2 / span 2; min-height: 160px; }
  .cq-web { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  .cq-web > .cq-goals { grid-column: 1 / -1; }
  .cq-web > .cq-tabs, .cq-web > .cq-editor, .cq-web > .cq-run-row { grid-column: 1; }
  .cq-web > .cq-preview, .cq-web > .cq-console, .cq-web > .cq-solution { grid-column: 2; }
  .cq-web > .cq-preview { grid-row: 2 / span 3; }
  .cq-web .cq-preview iframe { height: 320px; }
}

/* ---------- phones: games stay inside the screen ---------- */
@media (max-width: 520px) {
  .bp-tools .btn { padding: 9px 10px; font-size: 14px; }
  .bp-msg { font-size: 13px; left: 6px; right: 6px; bottom: 6px; }
  .sb-stage { max-width: 100%; }
  .sb-stage canvas { max-height: 62vh; width: auto !important; height: auto !important; max-width: 100%; }
  .bh-stage canvas { width: 100% !important; height: auto !important; }
  .cq-line, .cq-fix { font-size: 13px; }
  .cg-card { padding: 10px; }
  .cg-ico { width: 48px; height: 48px; font-size: 30px; }
  .code-body { padding: 8px 12px 90px; }
}

/* ---------- ⚔️ 1v1: code questions + "no timer yet" ---------- */
.duel-q-code {
  direction: ltr; text-align: left; unicode-bidi: isolate; white-space: pre; overflow-x: auto;
  font-family: "Fira Code", Consolas, monospace; font-size: 16px; line-height: 1.5;
  background: #0d1017; color: #e6e9f5; border: 2px solid rgba(255,255,255,.15); border-radius: 14px; padding: 12px 14px; margin: 10px auto 0; max-width: 100%;
}
.duel-timer.is-idle .duel-timer-fill { background: linear-gradient(90deg, #55efc4, #74b9ff); opacity: .55; animation: duelIdle 2.4s ease-in-out infinite; }
@keyframes duelIdle { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .duel-timer.is-idle .duel-timer-fill { animation: none; } }