:root {
  --game-bg: #06091a;
  --game-panel: rgba(13, 16, 46, .9);
  --game-panel-2: rgba(24, 20, 66, .92);
  --game-line: rgba(144, 126, 255, .25);
  --game-purple: #8b4dff;
  --game-violet: #ba79ff;
  --game-blue: #4d74ff;
  --game-green: #62e668;
  --game-text: #f7f6ff;
  --game-muted: #a8a4c8;
}

body.beginner-game-page,
body.beginner-room-page {
  margin: 0;
  min-height: 100vh;
  color: var(--game-text);
  background:
    radial-gradient(circle at 48% 26%, rgba(90, 74, 255, .24), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(36, 86, 220, .22), transparent 30%),
    linear-gradient(135deg, #06091a, #0a0b24 48%, #0d1231);
  font-family: Inter, system-ui, sans-serif;
}

.beginner-game-page::before,
.beginner-room-page::before {
  content: none;
}

.beginner-game-page *, .beginner-room-page * {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #8a55e8 #101432;
}
.beginner-game-page *::-webkit-scrollbar, .beginner-room-page *::-webkit-scrollbar { width: 9px; height: 9px; }
.beginner-game-page *::-webkit-scrollbar-track, .beginner-room-page *::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #101432;
  box-shadow: inset 0 0 0 1px rgba(128, 112, 213, .12);
}
.beginner-game-page *::-webkit-scrollbar-thumb, .beginner-room-page *::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid #101432;
  border-radius: 999px;
  background: linear-gradient(180deg, #b16cff, #7040d8 55%, #4369d8);
  box-shadow: 0 0 10px rgba(139, 77, 255, .38);
}
.beginner-game-page *::-webkit-scrollbar-thumb:hover, .beginner-room-page *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c58bff, #8954ef 55%, #557cff);
}
.beginner-game-page button, .beginner-room-page button { font: inherit; }
.game-shell { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1; }

.game-sidebar {
  position: sticky; top: 0; height: 100vh; padding: 22px 13px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(18, 20, 58, .98), rgba(9, 12, 35, .96));
  border-right: 1px solid var(--game-line);
  box-shadow: 18px 0 60px rgba(4, 5, 20, .28);
}
.game-brand { min-width: 0; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: .025em; }
.game-brand img { flex: 0 0 auto; width: 36px; height: 36px; object-fit: contain; border-radius: 10px; box-shadow: 0 0 18px rgba(148, 79, 255, .48); }
.game-brand strong { font-family: Sora, sans-serif; font-size: 15px; line-height: 1; white-space: nowrap; }
.game-sidebar nav { display: grid; gap: 8px; margin-top: 42px; }
.game-sidebar a, .game-sidebar button {
  border: 0; color: #d8d6ee; background: transparent; text-decoration: none;
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 7px;
  font-size: 12px; cursor: pointer; text-align: left;
}
.game-sidebar nav a.active { color: white; background: linear-gradient(90deg, #6e35d8, #774ce1); box-shadow: 0 10px 24px rgba(83, 35, 190, .3); }
.game-sidebar-bottom a span, .game-sidebar-bottom button span { color: #bbb5da; width: 15px; text-align: center; }
.game-sidebar nav a > span:not(.nav-glyph) { width: auto; color: inherit; text-align: left; }
.nav-glyph { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(150, 119, 255, .26); border-radius: 10px; background: linear-gradient(145deg, rgba(132, 70, 240, .28), rgba(63, 82, 188, .18)); box-shadow: inset 0 0 14px rgba(164, 111, 255, .1); }
.nav-glyph svg { width: 18px; height: 18px; fill: none; stroke: #cab1ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.game-sidebar nav a.active .nav-glyph { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.14); box-shadow: 0 0 18px rgba(201, 157, 255, .28); }
.game-sidebar nav a.active .nav-glyph svg { stroke: white; }
.game-sidebar-bottom { margin-top: auto; display: grid; gap: 5px; }
.game-sidebar-bottom strong { color: #74f0d2; margin-left: auto; font-size: 9px; }

.game-dashboard { min-width: 0; padding: 22px clamp(20px, 3vw, 48px) 46px; }
.game-topbar { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: auto; }
.game-topbar small, .journey-stage article > small, .room-topbar small, .mission-brief > small, .focus-skills > small {
  color: #bf80ff; font-weight: 800; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.game-topbar h1 { max-width: 580px; margin: 6px 0 0; font: 800 clamp(25px, 3vw, 42px)/.98 Sora, sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.game-currency { display: flex; gap: 12px; align-items: center; }
.game-currency > span, .game-currency > button {
  min-width: 108px; height: 48px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px;
  padding: 6px 14px; border: 1px solid var(--game-line); border-radius: 12px; color: #fff; background: rgba(9, 12, 37, .72);
}
.game-currency > button { cursor: pointer; }
.game-currency > button[aria-pressed="true"] { border-color: rgba(103, 238, 203, .46); color: #8af5d9; box-shadow: inset 0 0 18px rgba(80, 229, 190, .08); }
.game-currency > span strong { font-size: 16px; }
.game-currency > span small { grid-column: 2; color: var(--game-muted); font-size: 8px; }
.game-currency a img { width: 50px; height: 50px; object-fit: contain; border: 2px solid #b678ff; border-radius: 50%; background: #281950; }

.journey-stage {
  width: 100%; min-height: 590px; margin: 18px auto 0; position: relative;
  display: grid; grid-template-columns: 260px minmax(350px, 1fr) 330px 260px; align-items: center; gap: 16px;
  border: 1px solid var(--game-line); border-radius: 18px; overflow: hidden; padding: 24px;
  background:
    linear-gradient(90deg, rgba(11, 14, 44, .95), rgba(28, 22, 77, .72) 48%, rgba(8, 12, 39, .96)),
    radial-gradient(circle at 50% 75%, #5641aa, transparent 45%);
  box-shadow: inset 0 0 100px rgba(36, 64, 181, .12), 0 30px 80px rgba(0, 0, 0, .28);
}
.journey-stage::after {
  content: ""; position: absolute; inset: auto 0 0; height: 32%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(28, 21, 74, .72)), radial-gradient(ellipse at center, rgba(134, 92, 255, .22), transparent 65%);
}
.journey-stage article { position: relative; z-index: 2; border: 1px solid var(--game-line); background: var(--game-panel); border-radius: 14px; padding: 20px; backdrop-filter: blur(14px); }
.progress-console { align-self: stretch; }
.huge-progress { display: block; color: #bd87ff; font: 800 38px/1 Sora, sans-serif; margin: 12px 0; }
.game-meter { height: 8px; border-radius: 20px; background: rgba(143, 139, 204, .2); overflow: hidden; }
.game-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #783cff, #bc83ff); box-shadow: 0 0 16px #904eff; transition: width .5s ease; }
.game-meter.green i { background: linear-gradient(90deg, #4cbf62, #66ea79); box-shadow: 0 0 16px rgba(94, 235, 111, .4); }
.progress-console > p { display: flex; justify-content: space-between; padding: 12px 0; margin: 0; border-bottom: 1px solid rgba(153, 144, 221, .13); color: var(--game-muted); font-size: 10px; }
.progress-console > p b { color: #eceaff; }
.skill-stack { display: grid; gap: 10px; margin-top: 18px; max-height: 275px; overflow: auto; padding-right: 5px; }
.skill-stack > div { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: 9px; }
.skill-stack b { color: #c8c3df; }
.skill-stack i, .focus-skills i { height: 4px; grid-column: 1 / -1; background: rgba(153, 144, 221, .17); border-radius: 5px; overflow: hidden; }
.skill-stack em, .focus-skills em { display: block; height: 100%; background: linear-gradient(90deg, #8553ff, #cb82ff); }

.dyshi-stage { min-height: 500px; position: relative; z-index: 2; display: grid; place-items: center; align-self: stretch; }
.dyshi-stage > img { width: min(100%, 430px); max-height: 470px; object-fit: contain; z-index: 2; filter: drop-shadow(0 24px 35px rgba(0,0,0,.4)); animation: dyshiFloat 4s ease-in-out infinite; }
.dyshi-aura { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(172, 115, 255, .35), transparent 63%); border: 1px solid rgba(186, 133, 255, .35); box-shadow: 0 0 45px rgba(129, 82, 255, .24), inset 0 0 34px rgba(255, 174, 89, .14); }
.dyshi-aura::before, .dyshi-aura::after { content: ""; position: absolute; inset: 7%; border: 1px dashed rgba(126, 164, 255, .24); border-radius: 50%; animation: rotateAura 18s linear infinite; }
.dyshi-aura::after { inset: 18%; animation-direction: reverse; }
.keep-coding { position: absolute; top: 20%; right: 3%; transform: rotate(2deg); z-index: 3; padding: 10px 13px; color: #dfb4ff; background: #552991; clip-path: polygon(0 0,100% 8%,88% 100%,4% 90%); font: 800 11px Sora; }
.active-level-orb { position: absolute; left: 50%; bottom: 8px; z-index: 4; width: 74px; height: 74px; display: grid; place-items: center; border: 4px solid #c985ff; border-radius: 22px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, #a143ff, #5125ae); box-shadow: 0 0 22px #b462ff, 0 0 0 8px rgba(172, 95, 255, .12); }
.active-level-orb span { display: grid; place-items: center; width: 100%; height: 100%; transform: rotate(-45deg); color: white; font: 800 27px/1 Sora, sans-serif; text-shadow: 0 2px 8px rgba(33, 15, 87, .7); }

.current-level-card h2 { margin: 7px 0 16px; font: 800 23px/1.1 Sora; }
.level-progress-row, .mission-reward { display: flex; justify-content: space-between; margin: 12px 0 7px; color: var(--game-muted); font-size: 10px; }
.level-progress-row b, .mission-reward b { color: #67e86e; }
.mission-story { min-height: 55px; color: #c8c5dd; font-size: 11px; line-height: 1.6; }
.mission-focus { display: grid; gap: 7px; padding: 14px 0; color: #ddd9f2; font-size: 10px; }
.mission-focus span::first-letter { color: #9e71ff; }
.game-primary { min-height: 48px; padding: 10px 15px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-radius: 9px; color: white; text-decoration: none; background: linear-gradient(100deg, #6324d5, #9446f3); box-shadow: 0 9px 25px rgba(118, 47, 232, .3); font-weight: 800; font-size: 11px; cursor: pointer; }
.game-primary:hover { transform: translateY(-1px); filter: brightness(1.12); }
.adaptive-note { display: block; margin-top: 13px; color: #8d89ac !important; line-height: 1.5; text-align: center; letter-spacing: 0 !important; text-transform: none !important; }
.career-card { align-self: stretch; }
.career-card h3 { font: 800 18px Sora; margin: 7px 0; }
.career-card > p { color: var(--game-muted); font-size: 9px; line-height: 1.5; margin-bottom: 18px; }
.career-step { min-height: 56px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 9px; border: 1px solid rgba(131, 120, 198, .18); border-radius: 11px; background: linear-gradient(100deg, rgba(34, 31, 76, .58), rgba(15, 18, 48, .35)); }
.career-step > b { color: #ad77ff; font: 800 15px Sora, sans-serif; }
.career-step span { font-size: 9px; font-weight: 700; }
.career-step span small { display: block; color: #85819e; margin-top: 4px; font-weight: 400; }
.career-step.locked { opacity: .66; }
.career-step.active { border-color: rgba(101, 233, 113, .35); background: rgba(64, 193, 96, .07); }
.career-step em { padding: 4px 6px; border-radius: 5px; color: #74edc7; background: rgba(72, 213, 173, .1); font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.level-lock { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(142, 112, 225, .28); border-radius: 9px; color: #a886ff; background: linear-gradient(145deg, rgba(119, 70, 219, .16), rgba(49, 55, 126, .14)); box-shadow: inset 0 0 12px rgba(149, 102, 255, .07); }
.level-lock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.mission-track {
  width: 100%; margin: 18px auto 0; min-height: 155px; padding: 23px 26px;
  display: grid; grid-template-columns: repeat(7, minmax(88px, 1fr)) minmax(180px, 1.5fr); gap: 10px; position: relative;
  border: 1px solid var(--game-line); border-radius: 16px; background: rgba(9, 12, 38, .9); overflow-x: auto;
}
.track-line { position: absolute; top: 54px; left: 50px; right: 16%; height: 2px; background: #25294e; }
.track-line i { display: block; height: 100%; background: linear-gradient(90deg, #8e4eff, #65e8c9); box-shadow: 0 0 9px #7b69ff; }
.mission-node { min-width: 70px; position: relative; z-index: 1; color: #9692b3; text-decoration: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mission-node > span {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(130, 138, 211, .48); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(130, 146, 255, .2), transparent 32%), linear-gradient(145deg, #1b2148, #0d122d);
  color: #a6acd6; font: 800 12px/1 Sora, sans-serif;
  box-shadow: inset 0 0 0 4px rgba(8, 12, 34, .46), 0 7px 18px rgba(2, 4, 18, .35);
}
.mission-node small { color: #75718e; font-size: 7px; }
.mission-node strong { max-width: 86px; color: inherit; font-size: 8px; line-height: 1.25; }
.mission-node.complete > span {
  border-color: #67edd9;
  background: radial-gradient(circle at 35% 28%, #78f4df, #24a797 72%);
  color: #071f26;
  box-shadow: inset 0 0 0 4px rgba(10, 66, 74, .22), 0 0 18px rgba(71, 226, 207, .34);
}
.mission-node.current > span {
  border-color: #d896ff;
  background: radial-gradient(circle at 35% 28%, #c47bff, #6a32d4 72%);
  box-shadow: inset 0 0 0 4px rgba(60, 25, 123, .2), 0 0 0 5px rgba(144, 77, 255, .11), 0 0 23px #7951ef;
  color: white;
}
.mission-node.current strong { color: #fff; }
.mission-node.locked { pointer-events: none; opacity: .45; }
.mission-node.future { opacity: .35; pointer-events: none; }
.mission-node.future > span { border-style: dashed; background: rgba(13, 18, 45, .75); box-shadow: none; }
.exam-node { min-width: 160px; padding-left: 12px; border-left: 1px solid var(--game-line); display: grid; grid-template-columns: 38px 1fr; align-content: center; gap: 4px 9px; }
.exam-node > span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #645b8c; border-radius: 12px; }
.exam-node strong { font-size: 10px; }
.exam-node small { color: #8883a2; font-size: 7px; line-height: 1.3; }
.exam-node.ready > span { border-color: #68e875; color: #68e875; box-shadow: 0 0 15px rgba(104, 232, 117, .3); }

/* Coding room */
.beginner-room-page { width: 100%; height: 100vh; overflow: hidden; }
.room-game-shell { width: 100%; height: 100vh; margin: auto; padding: 14px; position: relative; z-index: 1; overflow: hidden; }
.room-topbar { min-height: 64px; padding: 8px 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border: 1px solid var(--game-line); border-radius: 14px 14px 0 0; background: rgba(9, 12, 37, .94); }
.room-topbar > div:nth-child(2) { text-align: center; display: grid; gap: 2px; }
.room-controls { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.room-topbar .game-currency { justify-self: end; }
.room-topbar .game-currency > span, .room-topbar .game-currency > button { min-width: auto; height: 34px; display: flex; background: transparent; font-size: 11px; }
.room-topbar button { border: 1px solid var(--game-line); color: white; cursor: pointer; }

.coding-room {
  height: calc(100vh - 92px); min-height: 0; display: grid; grid-template-columns: 270px minmax(450px, 1fr) 340px;
  border: 1px solid var(--game-line); border-top: 0; background: rgba(7, 10, 30, .92);
}
.mission-brief { min-height: 0; overflow-y: auto; padding: 25px 20px; border-right: 1px solid var(--game-line); background: linear-gradient(180deg, rgba(21, 20, 64, .98), rgba(11, 14, 42, .96)); scrollbar-width: thin; scrollbar-color: #6f45c8 transparent; }
.mission-brief h1 { margin: 7px 0 15px; font: 800 26px/1.08 Sora; }
.mission-brief > p { color: #aaa6c6; font-size: 11px; line-height: 1.6; }
.task-mode { margin: 14px 0 -7px; padding: 10px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; border: 1px solid rgba(102, 219, 255, .22); border-radius: 9px; background: rgba(55, 128, 175, .09); }
.task-mode > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #8ee8ff; background: rgba(58, 176, 219, .14); font-size: 15px; }
.task-mode strong, .task-mode small { display: block; }
.task-mode strong { color: #dff9ff; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.task-mode small { margin-top: 3px; color: #8d9eb2; font-size: 7px; line-height: 1.35; }
.task-mode.is-debug { border-color: rgba(255, 173, 86, .25); background: rgba(172, 95, 37, .09); }
.task-mode.is-debug > span { color: #ffc17f; background: rgba(220, 118, 53, .15); }
.task-card, .hint-card { padding: 14px; margin: 18px 0; border: 1px solid rgba(142, 100, 255, .28); border-radius: 10px; background: rgba(84, 48, 158, .13); }
.task-card span, .hint-card span { display: block; color: #be83ff; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.task-card strong { display: block; margin-top: 7px; color: #f0eefc; font-size: 11px; line-height: 1.5; }
.mission-brief h2 { margin: 20px 0 8px; font: 700 10px Sora; color: #c5c0db; text-transform: uppercase; letter-spacing: .1em; }
.mission-brief ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.mission-brief li { color: #c9c6dd; font-size: 10px; display: flex; gap: 8px; line-height: 1.4; }
.mission-brief li i { color: #61e46d; font-style: normal; }
.hint-card p { margin: 8px 0 0; color: #aaa7c4; font-size: 10px; line-height: 1.5; }
.reward-strip { display: flex; gap: 9px; }
.reward-strip span { flex: 1; padding: 10px; border-radius: 8px; color: #d4d1e7; background: rgba(92, 70, 161, .18); font-size: 9px; text-align: center; }
.room-back { display: inline-block; margin-top: 20px; color: #aaa5c6; font-size: 10px; text-decoration: none; }

.code-station { min-width: 0; min-height: 0; display: grid; grid-template-rows: 53px minmax(0, 1fr) 69px; background: #0a101d; overflow: hidden; }
.station-tabs { padding: 0 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #232b43; background: #11162a; }
.station-tabs button { height: 100%; min-width: 80px; border: 0; color: #9390a7; background: transparent; font-size: 10px; }
.station-tabs button b { width: 18px; height: 18px; margin-right: 4px; display: inline-grid; place-items: center; border: 1px solid #3e4560; border-radius: 50%; color: #777d98; font-size: 8px; }
.station-tabs button.active { color: white; border-bottom: 2px solid #a15cff; }
.station-tabs button.active b { border-color: #a15cff; color: white; background: #7134cf; }
.station-tabs span { margin-left: 10px; color: #686d85; font: 10px ui-monospace, monospace; }
.station-tabs .mission-kind-label { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(153, 101, 255, .25); border-radius: 6px; color: #bba0e8; font: 700 7px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.station-tabs button:last-child { min-width: 35px; height: 30px; border: 1px solid #343c58; border-radius: 7px; }
.editor-shell { min-height: 0; display: grid; grid-template-columns: 48px 1fr; overflow: hidden; }
.line-numbers { padding-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 0; border-right: 1px solid #20273a; color: #555d72; background: #0b101d; font: 14px/23px ui-monospace, SFMono-Regular, Consolas, monospace; user-select: none; }
#codeEditor { width: 100%; height: 100%; resize: none; border: 0; outline: 0; padding: 18px; color: #dce8ff; caret-color: #ba78ff; background:
  linear-gradient(90deg, transparent 78ch, rgba(99, 109, 151, .12) 78ch),
  #0d1422; font: 14px/23px ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 4; }
#codeEditor::selection { background: #6542a9; }
.station-actions { padding: 11px 14px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; border-top: 1px solid #242b3e; background: #111629; }
.station-action-buttons { display: flex; gap: 10px; flex: 0 0 auto; }
.code-station.has-runtime-input { grid-template-rows: 53px minmax(0, 1fr) 86px; }
.runtime-input { min-width: 180px; max-width: 350px; margin-right: auto; display: grid; grid-template-columns: auto minmax(100px, 1fr); align-items: center; gap: 3px 9px; color: #c9c5dc; font-size: 9px; font-weight: 800; }
.runtime-input textarea { min-width: 100px; height: 35px; padding: 8px 10px; resize: none; border: 1px solid #5d4a91; border-radius: 7px; outline: 0; color: #f5f2ff; background: #090e20; font: 11px/1.5 ui-monospace, monospace; }
.runtime-input textarea:focus { border-color: #9b67ff; box-shadow: 0 0 0 3px rgba(144, 85, 255, .16); }
.runtime-input small { grid-column: 1 / -1; color: #77768d; font-size: 7px; font-weight: 500; }
.station-actions button { min-height: 44px; padding: 0 18px; border: 1px solid #363e5c; border-radius: 8px; color: #b4b1c5; background: #171d34; cursor: pointer; font-size: 10px; font-weight: 700; }
.station-actions button:disabled { opacity: .5; cursor: wait; }
.station-actions .run-action { border-color: #4bb969; color: white; background: linear-gradient(180deg, #4dc96a, #269942); }
.station-actions .submit-action { border: 0; color: white; background: linear-gradient(100deg, #7130dc, #983cee); box-shadow: 0 8px 20px rgba(116, 43, 224, .3); }

.room-side { min-height: 0; overflow-y: auto; padding: 12px; display: grid; grid-template-rows: 190px 155px auto auto auto; align-content: start; gap: 10px; border-left: 1px solid var(--game-line); background: linear-gradient(180deg, #111638, #0c102d); scrollbar-width: thin; scrollbar-color: #6f45c8 transparent; }
.room-side section { min-width: 0; border: 1px solid rgba(126, 117, 187, .2); border-radius: 10px; background: rgba(8, 11, 30, .7); overflow: hidden; }
.output-console header { min-height: 36px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(126, 117, 187, .18); color: #c7c3dc; font-size: 9px; font-weight: 800; }
.output-console header i { color: #55d8b6; font-size: 7px; font-style: normal; }
#pythonOutput { height: 170px; overflow: auto; margin: 0; padding: 13px; color: #c6cfdf; white-space: pre-wrap; font: 11px/1.65 ui-monospace, monospace; }
#pythonOutput[data-state="error"] { color: #ff9aa9; }
#pythonOutput[data-state="success"] { color: #8df5bb; }
.dyshi-coach { padding: 12px 8px 0 13px; display: grid; grid-template-columns: 1fr 120px; align-items: end; background: radial-gradient(circle at 85% 100%, rgba(137, 78, 255, .35), transparent 60%), rgba(17, 17, 49, .85) !important; }
.dyshi-coach div { align-self: stretch; padding-top: 6px; }
.dyshi-coach small { color: #b679ff; font-size: 8px; font-weight: 800; }
.dyshi-coach p { color: #d3cfe2; font-size: 9px; line-height: 1.5; }
.dyshi-coach button { width: 28px; height: 28px; border: 1px solid #4c4c79; border-radius: 50%; color: white; background: #25254b; cursor: pointer; }
.mini-coding-room { position: relative; width: 124px; height: 142px; align-self: end; overflow: hidden; border-radius: 9px 9px 0 0; }
.mini-coding-room img { width: 230px; height: 145px; max-height: none; object-fit: cover; object-position: 69% center; transform: translateX(-98px) scale(1.05); filter: saturate(1.08); }
.mini-coding-room i { position: absolute; right: 5px; top: 38px; width: 50px; height: 45px; background: rgba(70, 88, 255, .2); filter: blur(10px); animation: monitorGlow 1.3s ease-in-out infinite alternate; }
.dyshi-coach.needs-work { animation: roomShake .35s ease; border-color: #cb5d78; }
.attempt-feedback { min-height: 155px; max-height: 245px; padding: 13px; overflow-y: auto !important; overscroll-behavior: contain; border-color: rgba(255, 167, 103, .45) !important; background: linear-gradient(145deg, rgba(83, 38, 64, .72), rgba(22, 18, 55, .94)) !important; scrollbar-width: thin; scrollbar-color: #ae6cff rgba(255,255,255,.05); }
.attempt-feedback[hidden] { display: none; }
.attempt-feedback header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #ffb47e; font: 800 8px Sora, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.attempt-feedback header i { display: flex; gap: 5px; }
.attempt-feedback header b { width: 18px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.12); }
.attempt-feedback header b.active { background: #ff9b73; box-shadow: 0 0 9px rgba(255, 124, 102, .55); }
.attempt-feedback h3 { margin: 9px 0 6px; color: #fff; font: 800 13px/1.2 Sora, sans-serif; }
.attempt-feedback p { margin: 0; color: #ede7f1; font-size: 9px; line-height: 1.65; overflow-wrap: anywhere; }
.attempt-feedback > small { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); color: #ffcfaa; font-size: 8px; line-height: 1.5; }
.attempt-feedback[data-stage="3"] { border-color: rgba(112, 236, 200, .5) !important; background: linear-gradient(145deg, rgba(16, 69, 70, .72), rgba(27, 19, 65, .95)) !important; }
.attempt-feedback[data-stage="3"] header, .attempt-feedback[data-stage="3"] > small { color: #73edce; }
.attempt-feedback[data-stage="3"] header b.active { background: #63e8c8; box-shadow: 0 0 9px rgba(83, 233, 196, .55); }
.room-progress { padding: 12px; max-height: 290px; }
.room-progress header { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 9px; color: #bbb7cd; }
.room-progress ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; max-height: 215px; overflow: auto; }
.room-progress li { min-height: 25px; padding: 4px 6px; display: flex; align-items: center; gap: 7px; border-radius: 6px; color: #777590; font-size: 8px; }
.room-progress li span { width: 16px; color: #716c8e; text-align: center; }
.room-progress li.complete { color: #aca9bd; }
.room-progress li.complete span { color: #63df71; }
.room-progress li.active { color: white; background: linear-gradient(90deg, #6130c9, #8241db); box-shadow: 0 0 15px rgba(128, 59, 229, .22); }
.focus-skills { padding: 12px; }
.focus-skills > div { display: grid; grid-template-columns: 1fr 80px 28px; gap: 7px; align-items: center; margin-top: 9px; color: #aaa6be; font-size: 8px; }
.focus-skills i { grid-column: 2; }
.focus-skills b { text-align: right; }
.reinforcement-tasks { display: grid; gap: 8px; }
.reinforcement-tasks article { padding: 10px; display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; border: 1px solid rgba(114, 220, 204, .25); border-radius: 9px; background: linear-gradient(135deg, rgba(51, 179, 159, .08), rgba(104, 64, 183, .11)); }
.reinforcement-tasks article > b { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #67dfc2; border-radius: 8px; color: #72edcf; font-size: 10px; background: rgba(55, 209, 178, .09); }
.reinforcement-tasks article div { display: grid; gap: 3px; }
.reinforcement-tasks article span { color: #77e8ce; font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.reinforcement-tasks article strong { color: #e9e5f4; font-size: 9px; line-height: 1.45; }

/* Theory before practice */
.theory-workbench { min-height: 0; overflow-y: auto; display: block; background: radial-gradient(circle at 50% 5%, rgba(91, 54, 174, .13), transparent 34%), #090e1c; scrollbar-width: thin; scrollbar-color: #6f45c8 transparent; }
.code-station.is-theory .editor-shell,
.code-station.is-theory .station-actions { display: none; }
.code-station.is-theory { grid-template-rows: 53px minmax(0, 1fr); }
.code-station.is-practice .theory-workbench { display: none; }
.theory-lesson { width: min(960px, 100%); margin: 0 auto; padding: clamp(28px, 4vw, 58px); }
.theory-lesson > small { color: #b979ff; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.theory-lesson h2 { margin: 9px 0 13px; font: 800 clamp(24px, 2.4vw, 38px)/1.05 Sora, sans-serif; }
.theory-lesson > p { color: #b9b6cb; font-size: 12px; line-height: 1.7; }
.theory-lesson p code, .theory-lesson li code { padding: 2px 5px; border-radius: 4px; color: #8ef0d0; background: rgba(75, 225, 185, .09); font-family: ui-monospace, monospace; }
.theory-lesson pre { margin: 20px 0; padding: 18px; border: 1px solid rgba(129, 101, 232, .3); border-radius: 10px; color: #d9efff; background: #0c1322; overflow-x: auto; font: 12px/1.7 ui-monospace, monospace; box-shadow: inset 3px 0 #8f50ff; }
.theory-example-output { margin: -8px 0 24px; overflow: hidden; border: 1px solid rgba(83, 232, 196, .32); border-radius: 12px; background: linear-gradient(145deg, rgba(8, 31, 39, .88), rgba(10, 17, 38, .94)); box-shadow: 0 16px 36px rgba(2, 8, 22, .22), inset 0 1px rgba(255,255,255,.025); }
.theory-example-output > header { padding: 12px 15px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgba(83, 232, 196, .16); background: linear-gradient(90deg, rgba(56, 209, 177, .1), transparent); }
.theory-example-output > header > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border: 1px solid rgba(99, 235, 205, .38); border-radius: 9px; color: #6fe9cc; background: rgba(54, 203, 172, .08); font: 800 11px ui-monospace, monospace; }
.theory-example-output header div { min-width: 0; }
.theory-example-output header small { display: block; color: #70e9cc; font: 800 8px Sora, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.theory-example-output header p { margin: 4px 0 0; color: #a9b9c3; font-size: 9px; line-height: 1.5; }
.theory-lesson .theory-example-output pre { margin: 0; min-height: 58px; padding: 14px 18px; border: 0; border-radius: 0; color: #a7f3d0; background: rgba(3, 12, 22, .54); box-shadow: inset 3px 0 #54dbba; white-space: pre-wrap; }
.theory-lesson h3 { margin: 18px 0 9px; color: #ddd9ed; font: 800 9px Sora; letter-spacing: .12em; text-transform: uppercase; }
.syntax-breakdown { display: grid; gap: 10px; margin-bottom: 26px; }
.syntax-breakdown article { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(300px, 1.2fr); border: 1px solid rgba(133, 105, 226, .23); border-radius: 10px; overflow: hidden; background: rgba(12, 18, 35, .78); }
.syntax-breakdown article > code { min-height: 68px; padding: 15px; display: flex; align-items: flex-start; gap: 12px; color: #dcecff; background: #0b1221; font: 12px/1.65 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.syntax-breakdown article > code b { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #cda4ff; background: rgba(132, 75, 221, .2); font-size: 9px; }
.syntax-breakdown article > p { margin: 0; padding: 14px 16px; color: #bbb8cc; font-size: 10px; line-height: 1.65; }
.syntax-deep-dive { margin: 26px 0; padding: clamp(17px, 2.5vw, 26px); border: 1px solid rgba(115, 232, 204, .3); border-radius: 16px; background: radial-gradient(circle at 100% 0, rgba(98, 68, 202, .2), transparent 32%), linear-gradient(145deg, rgba(10, 35, 48, .9), rgba(17, 13, 43, .94)); box-shadow: 0 22px 55px rgba(2, 7, 18, .28); }
.syntax-deep-dive > header small { color: #73e8cc; font: 800 8px Sora, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.syntax-deep-dive > header h3 { margin: 7px 0 9px; color: #fff; font-size: clamp(17px, 2vw, 23px); letter-spacing: -.025em; text-transform: none; }
.syntax-deep-dive > header p { margin: 0; max-width: 760px; color: #c2c0d4; font-size: 10px; line-height: 1.7; }
.syntax-deep-dive h4 { margin: 18px 0 9px; color: #ddd8ee; font: 800 9px Sora, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.deep-dive-current { margin: 18px 0; padding: 13px 15px; display: grid; gap: 8px; border: 1px solid rgba(151, 93, 245, .3); border-radius: 10px; background: #0a1222; }
.deep-dive-current span { color: #ae7eff; font: 800 8px Sora, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.deep-dive-current code { color: #d9efff; font: 11px/1.65 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.deep-dive-anatomy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.deep-dive-anatomy article, .deep-dive-extras article { padding: 12px; display: grid; grid-template-columns: minmax(72px, auto) 1fr; align-items: start; gap: 11px; border: 1px solid rgba(108, 116, 181, .22); border-radius: 9px; background: rgba(6, 13, 28, .58); }
.deep-dive-anatomy code, .deep-dive-extras code { color: #7fe8cf; font: 700 9px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.deep-dive-anatomy p, .deep-dive-extras p { margin: 0; color: #aaa9bd; font-size: 9px; line-height: 1.55; }
.deep-dive-process { margin: 15px 0; padding: 12px 14px; border-left: 3px solid #8f50ff; border-radius: 0 9px 9px 0; background: rgba(99, 55, 178, .1); }
.deep-dive-process h4 { margin-top: 0; }
.syntax-deep-dive .deep-dive-process ol { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deep-dive-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deep-dive-examples > article { min-width: 0; padding: 14px; border: 1px solid rgba(111, 98, 184, .23); border-radius: 10px; background: rgba(7, 13, 29, .65); }
.deep-dive-examples h4 { margin-top: 0; }
.syntax-deep-dive .deep-dive-examples pre { margin: 8px 0 10px; padding: 12px; font-size: 9px; box-shadow: inset 2px 0 #6de2c5; }
.deep-dive-examples p { margin: 0; color: #a9a6bb; font-size: 9px; line-height: 1.6; }
.deep-dive-examples p strong { margin-right: 8px; color: #73e8cc; font-size: 8px; text-transform: uppercase; }
.deep-dive-examples p code { color: #e6efff; font-family: ui-monospace, monospace; }
.deep-dive-extras { display: grid; gap: 7px; }
.syntax-deep-dive > aside { margin-top: 16px; padding: 13px 15px; border: 1px solid rgba(255, 165, 98, .22); border-radius: 10px; background: rgba(141, 71, 34, .1); }
.syntax-deep-dive > aside h4 { margin-top: 0; color: #ffbc7d; }
.syntax-deep-dive > aside ul { margin: 0; padding-left: 17px; color: #bbb2af; font-size: 9px; line-height: 1.65; }
.syntax-deep-dive > aside li + li { margin-top: 4px; }
.theory-lesson ol { margin: 0 0 22px; padding: 0; list-style: none; counter-reset: theory-step; display: grid; gap: 8px; }
.theory-lesson li { counter-increment: theory-step; display: grid; grid-template-columns: 24px 1fr; gap: 9px; color: #aaa7bd; font-size: 10px; line-height: 1.55; }
.theory-lesson li::before { content: counter(theory-step); width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #7e55d1; border-radius: 50%; color: #cda4ff; font-size: 8px; }
.lesson-cheatsheet { margin: 30px 0 24px; padding: clamp(16px, 2.5vw, 26px); border: 1px solid rgba(129, 91, 230, .34); border-radius: 16px; background: linear-gradient(145deg, rgba(33, 23, 75, .78), rgba(8, 16, 34, .94)); box-shadow: 0 22px 60px rgba(3, 5, 22, .32), inset 0 1px rgba(255,255,255,.035); }
.lesson-cheatsheet > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.lesson-cheatsheet > header small { color: #69e8cb; font: 800 8px Sora, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.lesson-cheatsheet > header h3 { margin: 5px 0 0; color: #fff; font-size: 17px; letter-spacing: -.02em; text-transform: none; }
.cheatsheet-index { margin: 16px 0 18px; display: flex; gap: 7px; flex-wrap: wrap; }
.cheatsheet-index a { padding: 7px 10px; border: 1px solid rgba(128, 91, 220, .34); border-radius: 999px; color: #d5c4f6; background: rgba(112, 61, 199, .11); font: 700 8px Sora, sans-serif; text-decoration: none; }
.cheatsheet-index a:hover { border-color: #a768ff; color: #fff; background: rgba(142, 73, 242, .22); }
.cheatsheet-topics { display: grid; gap: 15px; }
.cheatsheet-topic { scroll-margin-top: 20px; border: 1px solid rgba(119, 104, 190, .25); border-radius: 12px; overflow: hidden; background: rgba(7, 13, 30, .72); }
.cheatsheet-topic > header { padding: 15px 16px 12px; border-bottom: 1px solid rgba(119, 104, 190, .2); background: linear-gradient(90deg, rgba(105, 62, 190, .13), transparent); }
.cheatsheet-topic > header h4 { margin: 0 0 5px; color: #f4efff; font: 800 13px Sora, sans-serif; }
.cheatsheet-topic > header p { margin: 0; color: #aaa9c2; font-size: 9px; line-height: 1.55; }
.cheatsheet-table { width: 100%; }
.cheatsheet-table-head, .cheatsheet-row { display: grid; grid-template-columns: minmax(135px, .65fr) minmax(260px, 1.35fr) minmax(170px, .8fr); }
.cheatsheet-table-head { color: #797d9b; background: rgba(5, 10, 24, .65); font: 800 7px Sora, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.cheatsheet-table-head span { padding: 9px 12px; }
.cheatsheet-row { border-top: 1px solid rgba(107, 105, 164, .13); transition: background .18s ease; }
.cheatsheet-row:hover { background: rgba(91, 66, 165, .1); }
.cheatsheet-row > code { margin: 0; padding: 13px 12px; display: flex; align-items: center; color: #8aefd4; background: rgba(7, 13, 26, .52); font: 700 9px/1.5 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.cheatsheet-row > code:last-child { color: #b8c7ff; background: transparent; }
.cheatsheet-row > p { margin: 0; padding: 11px 13px; display: grid; gap: 4px; border-inline: 1px solid rgba(107, 105, 164, .13); }
.cheatsheet-row > p strong { color: #eeeafd; font-size: 9px; }
.cheatsheet-row > p span { color: #a8a7bc; font-size: 9px; line-height: 1.55; }
.cheatsheet-pitfall { margin: 12px; padding: 11px 13px; display: grid; grid-template-columns: max-content 1fr; gap: 10px; border: 1px solid rgba(255, 173, 82, .22); border-radius: 8px; color: #c1b6ad; background: rgba(135, 74, 29, .1); font-size: 8px; line-height: 1.55; }
.cheatsheet-pitfall strong { color: #ffbd78; text-transform: uppercase; letter-spacing: .08em; }
.mental-model { margin: 18px 0 22px; padding: 14px; border: 1px solid rgba(86, 220, 190, .2); border-radius: 10px; background: linear-gradient(135deg, rgba(52, 173, 151, .08), rgba(91, 62, 181, .08)); }
.mental-model h3 { margin-top: 0; color: #79e6ca; }
.mental-model p { margin: 8px 0 0; display: grid; grid-template-columns: 25px 1fr; gap: 8px; color: #b7b3c8; font-size: 9px; line-height: 1.45; }
.mental-model b { color: #79e6ca; font: 700 9px ui-monospace, monospace; }
.theory-lesson .game-primary { width: 100%; }

/* Language selector belongs to the game HUD, never to the page corner. */
.language-host { min-width: 112px; }
.language-host .language-switcher { position: relative; inset: auto; z-index: 50; width: 100%; font-family: Inter, sans-serif; }
.language-host .language-trigger { width: 100%; min-height: 48px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--game-line); border-radius: 12px; color: #f1effa; background: rgba(9, 12, 37, .8); cursor: pointer; font-size: 10px; font-weight: 700; }
.language-host .language-globe { color: #72dfff; font-size: 13px; }
.language-host .language-chevron { width: 6px; height: 6px; border-right: 1px solid #a9a4bd; border-bottom: 1px solid #a9a4bd; transform: rotate(45deg) translateY(-2px); }
.language-host .language-menu { position: absolute; top: calc(100% + 7px); right: 0; width: 145px; padding: 6px; border: 1px solid rgba(143, 111, 229, .4); border-radius: 10px; background: rgba(12, 13, 39, .98); box-shadow: 0 18px 45px rgba(0,0,0,.45); }
.language-host .language-menu[hidden] { display: none; }
.language-host .language-menu button { width: 100%; padding: 9px 10px; display: flex; justify-content: space-between; border: 0; border-radius: 7px; color: #bdb9cf; background: transparent; cursor: pointer; font-size: 10px; text-align: left; }
.language-host .language-menu button:hover, .language-host .language-menu button.active { color: white; background: rgba(117, 63, 216, .34); }
.language-host .language-check { color: #67e8c8; }

.mission-brief::-webkit-scrollbar, .room-side::-webkit-scrollbar, .theory-workbench::-webkit-scrollbar, .room-progress ol::-webkit-scrollbar { width: 8px; height: 8px; }

.mission-win { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(4, 5, 20, .84); backdrop-filter: blur(12px); }
.mission-win[hidden] { display: none; }
.mission-win article { position: relative; width: min(530px, 100%); padding: 28px 36px 34px; border: 1px solid #9a66ff; border-radius: 24px; text-align: center; background: radial-gradient(circle at 50% 15%, rgba(154, 89, 255, .35), transparent 45%), linear-gradient(160deg, #17144a, #0b0e2a); box-shadow: 0 0 90px rgba(122, 65, 255, .35); animation: victoryEnter .5s cubic-bezier(.2,.9,.2,1.1); }
.mission-win article > img { width: 220px; height: 190px; object-fit: contain; margin-top: -90px; animation: celebrate 1s ease-in-out infinite alternate; filter: drop-shadow(0 15px 20px rgba(0,0,0,.4)); }
.mission-win article > small { display: block; color: #6af4ba; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.mission-win h2 { margin: 9px 0; font: 800 31px/1 Sora; }
.mission-win p { color: #b9b4cf; font-size: 11px; }
.victory-rewards { margin: 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.victory-rewards span { padding: 12px 6px; border: 1px solid rgba(150, 121, 244, .24); border-radius: 10px; background: rgba(110, 69, 211, .11); }
.victory-rewards b { display: block; margin: 4px 0; color: white; font-size: 17px; }
.victory-rewards small { color: #918ca9; font-size: 7px; text-transform: uppercase; }
.victory-burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.victory-burst i { position: absolute; width: 180px; height: 180px; border: 1px solid rgba(185, 116, 255, .5); border-radius: 50%; animation: victoryWave 1.7s ease-out infinite; }
.victory-burst i:nth-child(2) { animation-delay: .45s; }
.victory-burst i:nth-child(3) { animation-delay: .9s; }
.remediation-gate { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 54px 20px 24px; overflow-y: auto; background: rgba(3, 5, 19, .9); backdrop-filter: blur(14px); }
.remediation-gate[hidden] { display: none; }
.remediation-gate article { width: min(820px, 100%); margin: auto; padding: 30px; border: 1px solid rgba(106, 235, 204, .55); border-radius: 22px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(66, 212, 181, .18), transparent 42%), linear-gradient(155deg, #12163e, #0a0d27); box-shadow: 0 28px 100px rgba(0,0,0,.55), 0 0 60px rgba(92, 218, 190, .13); animation: victoryEnter .42s cubic-bezier(.2,.9,.2,1.1); }
.remediation-icon { width: 62px; height: 62px; margin: -63px auto 20px; display: grid; place-items: center; border: 1px solid #70e7cc; border-radius: 18px; color: #83f3d8; background: linear-gradient(145deg, #1c4260, #38206d); box-shadow: 0 0 30px rgba(82, 232, 196, .32); font: 800 20px Sora, sans-serif; transform: rotate(45deg); }
.remediation-icon span { transform: rotate(-45deg); }
.remediation-gate article > small { color: #70e7cc; font: 800 9px Sora, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.remediation-gate h2 { margin: 8px 0 12px; font: 800 28px/1.08 Sora, sans-serif; }
.remediation-gate article > p { color: #b9b5ca; font-size: 10px; line-height: 1.65; }
.full-hint { margin: 18px 0; padding: 16px; border: 1px solid rgba(150, 107, 236, .3); border-radius: 12px; text-align: left; background: rgba(8, 12, 31, .72); }
.full-hint strong { color: #cfa8ff; font-size: 11px; }
.full-hint p { margin: 7px 0 0; color: #d0ccdc; font-size: 10px; line-height: 1.65; }
.solution-walkthrough { margin: 18px 0; text-align: left; }
.solution-walkthrough h3 { margin: 14px 0 8px; color: #76efd1; font: 800 11px Sora, sans-serif; letter-spacing: .04em; }
.solution-walkthrough > pre { max-height: 300px; margin: 0; padding: 17px; overflow: auto; border: 1px solid rgba(144, 102, 238, .42); border-radius: 13px; color: #f4f0ff; background: #070b1d; font: 12px/1.65 "JetBrains Mono", monospace; white-space: pre-wrap; }
.solution-walkthrough > div { display: grid; gap: 7px; }
.solution-walkthrough article { display: grid; grid-template-columns: minmax(210px, .75fr) 1.25fr; gap: 16px; width: 100%; padding: 11px 13px; border: 1px solid rgba(142, 112, 211, .22); border-radius: 10px; text-align: left; background: rgba(6, 10, 28, .64); box-shadow: none; animation: none; }
.solution-walkthrough article code { display: flex; gap: 9px; color: #fff; font: 10px/1.5 "JetBrains Mono", monospace; white-space: pre-wrap; }
.solution-walkthrough article code b { color: #a66bff; }
.solution-walkthrough article p { margin: 0; color: #c9c5d7; font-size: 10px; line-height: 1.55; }
@media (max-width: 640px) { .solution-walkthrough article { grid-template-columns: 1fr; } }
.remediation-gate .game-primary { width: 100%; margin-top: 13px; }

@keyframes dyshiFloat { 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes rotateAura { to { transform: rotate(360deg); } }
@keyframes roomShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes victoryEnter { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes celebrate { to { transform: translateY(-8px) rotate(2deg); } }
@keyframes victoryWave { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(2.6); } }
@keyframes codeTyping { 0%, 15% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(1); } }
@keyframes caretBlink { 50% { opacity: .15; } }
@keyframes typingDots { from { width: 0; } to { width: 12px; } }
@keyframes monitorGlow { to { opacity: .35; transform: scale(1.18); } }
@keyframes keyPress { 0%,17% { opacity:1; transform:translateY(2px) scale(.8); } 18%,100% { opacity:0; transform:none; } }

@media (max-width: 1300px) {
  .journey-stage { grid-template-columns: 230px minmax(280px, 1fr) 300px; }
  .career-card { display: none; }
  .coding-room { grid-template-columns: 240px minmax(400px, 1fr) 310px; }
}
@media (max-width: 980px) {
  .game-shell { display: block; }
  .game-sidebar { position: static; width: 100%; height: auto; padding: 10px 16px; flex-direction: row; align-items: center; }
  .game-sidebar nav { margin: 0 0 0 auto; display: flex; }
  .game-sidebar-bottom { margin: 0 0 0 8px; }
  .game-sidebar-bottom a { display: none; }
  .journey-stage { grid-template-columns: 1fr 1fr; }
  .progress-console { order: 2; }
  .dyshi-stage { grid-row: span 2; min-height: 430px; }
  .current-level-card { order: 3; }
  .coding-room { grid-template-columns: 220px 1fr; }
  .room-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; border-left: 0; border-top: 1px solid var(--game-line); }
}
@media (max-width: 680px) {
  .beginner-room-page { height: auto; overflow: auto; }
  .room-game-shell { height: auto; overflow: visible; }
  .game-sidebar nav a:not(.active) { display: none; }
  .game-dashboard { padding: 16px 10px 30px; }
  .game-topbar { display: block; }
  .game-currency { width:100%; margin-top:15px; flex-wrap:wrap; gap:6px; }
  .game-currency > span,.game-currency > button { min-width:82px; flex:1 1 82px; }
  .game-currency .language-host { flex:1 1 112px; }
  .game-currency>a { display:none; }
  .game-sidebar { flex-wrap:wrap; gap:6px; }
  .game-sidebar .game-brand strong { display:none; }
  .game-topbar h1 { font-size: 28px; }
  .journey-stage { display: flex; flex-direction: column; padding: 12px; }
  .journey-stage > * { width: 100%; }
  .dyshi-stage { min-height: 370px; order: 1; }
  .progress-console { order: 3; }
  .current-level-card { order: 2; }
  .mission-track { width:100%; max-width:100%; grid-template-columns: repeat(12, 72px) 160px; }
  .room-game-shell { padding: 0; }
  .room-topbar { grid-template-columns: 1fr auto; border-radius: 0; }
  .room-topbar > div:nth-child(2) { display: none; }
  .room-topbar .game-currency > span:first-child { display: none; }
  .coding-room { height: auto; display: flex; flex-direction: column; }
  .mission-brief { border-right: 0; border-bottom: 1px solid var(--game-line); }
  .code-station { min-height: 670px; }
  .syntax-breakdown article { grid-template-columns: 1fr; }
  .deep-dive-anatomy, .deep-dive-examples { grid-template-columns: 1fr; }
  .syntax-deep-dive .deep-dive-process ol { grid-template-columns: 1fr; }
  .deep-dive-anatomy article, .deep-dive-extras article { grid-template-columns: 1fr; }
  .lesson-cheatsheet { padding: 13px; }
  .lesson-cheatsheet > header { display: block; }
  .cheatsheet-table-head { display: none; }
  .cheatsheet-row { display: grid; grid-template-columns: 1fr; padding: 10px; }
  .cheatsheet-row > code, .cheatsheet-row > p { padding: 8px; border: 0; }
  .cheatsheet-row > code:first-child { border-radius: 7px; }
  .cheatsheet-row > code:last-child::before { content: "→"; margin-right: 7px; color: #8f50ff; }
  .cheatsheet-pitfall { grid-template-columns: 1fr; }
  .room-side { display: grid; grid-template-columns: 1fr; }
  .station-actions { flex-wrap: wrap; }
  .runtime-input { width: 100%; max-width: none; }
  .station-action-buttons { width: 100%; }
  .station-actions button { flex: 1; padding: 0 9px; }
}

.portfolio-studio {
  margin-top:18px;
  padding:30px;
  border:1px solid rgba(129,140,248,.24);
  border-radius:28px;
  background:
    radial-gradient(circle at 90% 0,rgba(99,102,241,.18),transparent 32%),
    linear-gradient(145deg,rgba(12,16,48,.96),rgba(19,10,48,.94));
  box-shadow:0 24px 70px rgba(1,3,18,.3);
}

/* Reference-aligned journey shell and active workspace */
.beginner-game-page {
  background:
    radial-gradient(circle at 57% 8%, rgba(64, 83, 191, .25), transparent 34%),
    radial-gradient(circle at 78% 55%, rgba(83, 38, 163, .15), transparent 36%),
    var(--dyshea-bg);
}
.game-sidebar {
  width: 176px;
  padding: 22px 16px 18px;
  border-right-color: var(--dyshea-line);
  background: linear-gradient(180deg, rgba(7, 12, 36, .98), rgba(7, 11, 29, .96));
}
.game-sidebar nav { margin-top: 32px; gap: 4px; }
.game-sidebar a, .game-sidebar button {
  min-height: 44px;
  border-radius: 10px;
  font-size: 10px;
}
.game-sidebar .nav-glyph { flex: 0 0 30px; width: 30px; height: 30px; }
.game-sidebar-bottom .nav-glyph { display: grid; }
.game-dashboard { padding: 24px clamp(22px, 3vw, 54px) 48px; }
.game-topbar { margin-bottom: 18px; }
.game-topbar h1 {
  max-width: 540px;
  font-size: clamp(30px, 3.7vw, 54px);
  line-height: .98;
  letter-spacing: -.055em;
}
.journey-stage {
  min-height: 540px;
  grid-template-columns: 240px minmax(330px, 1fr) 320px;
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 52% 45%, rgba(116, 69, 214, .25), transparent 32%),
    linear-gradient(145deg, rgba(10, 17, 51, .94), rgba(8, 11, 33, .97));
}
.journey-stage article { border-radius: 18px; }
.progress-console { align-self: center; }
.dyshi-stage { min-height: 470px; }
.dyshi-stage > img { width: min(430px, 92%); max-height: 440px; }
.current-level-card { align-self: center; min-height: 390px; display: flex; flex-direction: column; }
.current-level-card .game-primary { margin-top: auto; }
.career-card {
  position: absolute !important;
  right: 24px;
  top: 24px;
  bottom: 24px;
  width: 320px;
  overflow: auto;
}
.journey-stage { padding-right: 368px; }
.mission-track {
  margin-top: 16px;
  padding: 22px 26px;
  border-radius: 22px;
  background: rgba(8, 12, 34, .88);
}
.active-workspace-preview {
  min-height: 350px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 270px minmax(380px, 1fr) 245px;
  overflow: hidden;
  border: 1px solid var(--dyshea-line);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(12, 17, 48, .97), rgba(6, 9, 27, .98));
  box-shadow: var(--dyshea-shadow);
}
.active-workspace-preview > article {
  padding: 28px 24px;
  border-right: 1px solid var(--dyshea-line);
  background: radial-gradient(circle at 0 0, rgba(132, 64, 238, .19), transparent 42%);
}
.active-workspace-preview small { color: #be7bff; font: 800 9px Sora, sans-serif; letter-spacing: .12em; }
.active-workspace-preview h2 { margin: 9px 0 12px; font: 800 26px/1.05 Sora, sans-serif; }
.active-workspace-preview p { color: #a6a5bb; font-size: 11px; line-height: 1.6; }
.workspace-objectives { display: grid; gap: 8px; margin: 20px 0; }
.workspace-objectives span { color: #72e8c8; font-size: 9px; }
.workspace-code { min-width: 0; background: #0a101e; }
.workspace-code header {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 22px;
  border-bottom: 1px solid #252c45;
  color: #777b92;
  font-size: 9px;
}
.workspace-code header b { height: 48px; display: flex; align-items: center; color: #fff; border-bottom: 2px solid #a15cff; }
.workspace-code pre {
  min-height: 300px;
  margin: 0;
  padding: 26px;
  color: #dbe8ff;
  font: 13px/2 ui-monospace, Consolas, monospace;
  background: linear-gradient(90deg, #0a101e 68%, #11182b 68%);
}
.workspace-code i { color: #55607b; font-style: normal; }
.workspace-code em { color: #687694; }
.workspace-code strong { color: #bde9ff; }
.workspace-code u, .workspace-code mark {
  display: inline-block;
  margin-top: 60px;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
}
.workspace-code u { color: #b9c2dd; background: #182039; }
.workspace-code mark { color: #fff; background: #7736d9; }
.active-workspace-preview > .workspace-coach {
  padding: 18px;
  border-left: 1px solid var(--dyshea-line);
  background: rgba(12, 16, 43, .9);
}
.active-workspace-preview > .workspace-coach img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; }
.active-workspace-preview > .workspace-coach small { display: block; margin-top: 18px; }

@media (max-width: 1360px) {
  .journey-stage { grid-template-columns: 220px minmax(310px, 1fr); padding-right: 24px; }
  .career-card { display: none; }
  .active-workspace-preview { grid-template-columns: 250px minmax(360px, 1fr); }
  .active-workspace-preview > .workspace-coach { display: none; }
}
@media (max-width: 980px) {
  .game-sidebar { width: 100%; }
  .game-sidebar nav a:nth-child(n+4) { display: none; }
  .journey-stage { padding: 16px; }
  .active-workspace-preview { grid-template-columns: 1fr; }
  .active-workspace-preview > article { border-right: 0; border-bottom: 1px solid var(--dyshea-line); }
}
@media (max-width: 680px) {
  .active-workspace-preview { min-height:0; display: block; }
  .workspace-code { display: none; }
  .game-sidebar nav a:not(.active) { display: none; }
}
.mastery-proof { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.mastery-proof span { padding:9px 10px; border:1px solid rgba(139,124,255,.2); border-radius:10px; color:rgba(235,232,255,.55); font-size:9px; background:rgba(9,13,39,.45); }
.mastery-proof b { float:right; color:#72f1d2; }
.portfolio-studio>header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.portfolio-studio>header small { color:#72f1d2; font:800 9px/1.2 Sora,sans-serif; letter-spacing:.13em; }
.portfolio-studio>header h2 { margin:7px 0 5px; font:800 clamp(22px,2.4vw,34px)/1.05 Sora,sans-serif; letter-spacing:-.04em; }
.portfolio-studio>header p { max-width:760px; margin:0; color:rgba(235,232,255,.62); font-size:12px; line-height:1.6; }
.portfolio-studio>header>strong { min-width:86px; padding:12px 15px; border:1px solid rgba(114,241,210,.25); border-radius:14px; color:#72f1d2; text-align:center; background:rgba(10,25,43,.72); }
.portfolio-studio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.portfolio-studio-grid article { position:relative; min-height:300px; display:flex; flex-direction:column; padding:22px; overflow:hidden; border:1px solid rgba(152,132,255,.2); border-radius:22px; background:linear-gradient(155deg,rgba(38,29,87,.78),rgba(10,14,38,.9)); }
.portfolio-project-icon { width:48px; height:48px; display:grid; place-items:center; margin-bottom:25px; border:1px solid rgba(127,151,255,.34); border-radius:15px; color:#8debd9; background:linear-gradient(145deg,rgba(50,43,116,.8),rgba(15,47,78,.7)); box-shadow:inset 0 0 16px rgba(121,87,255,.14),0 8px 22px rgba(0,0,0,.2); }
.portfolio-project-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.portfolio-studio-grid article:nth-child(2) .portfolio-project-icon { color:#9cb5ff; border-color:rgba(110,132,255,.38); background:linear-gradient(145deg,rgba(45,49,126,.82),rgba(18,32,79,.72)); }
.portfolio-studio-grid article:nth-child(3) .portfolio-project-icon { color:#d49bff; border-color:rgba(191,113,255,.38); background:linear-gradient(145deg,rgba(82,35,125,.78),rgba(28,27,76,.72)); }
.portfolio-studio-grid article>small { color:#c58cff; font:800 8px/1.2 Sora,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.portfolio-studio-grid h3 { margin:8px 0; font:800 18px/1.15 Sora,sans-serif; }
.portfolio-studio-grid p { margin:0 0 16px; color:rgba(235,232,255,.6); font-size:11px; line-height:1.6; }
.portfolio-studio-grid article>div { display:grid; gap:6px; margin-top:auto; }
.portfolio-studio-grid em { color:rgba(235,232,255,.72); font-style:normal; font-size:10px; }
.portfolio-studio-grid a,.portfolio-studio-grid article>b { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); color:#72f1d2; font:800 10px/1.2 Sora,sans-serif; text-decoration:none; }
.portfolio-studio-grid article.complete::after { content:"VERIFIED"; position:absolute; right:15px; top:15px; color:#72f1d2; font:800 7px Sora,sans-serif; letter-spacing:.1em; }
.portfolio-studio-grid article.locked { filter:saturate(.3); opacity:.48; }
.portfolio-studio.locked .portfolio-studio-grid { pointer-events:none; }
@media(max-width:980px){.portfolio-studio-grid{grid-template-columns:1fr}.portfolio-studio-grid article{min-height:250px}}
@media(max-width:680px){.portfolio-studio{padding:18px;border-radius:22px}.portfolio-studio>header{align-items:flex-start;flex-direction:column}}

@media (prefers-reduced-motion: reduce) {
  .dyshi-stage > img, .dyshi-aura::before, .dyshi-aura::after, .mission-win article > img, .victory-burst i, .monitor-code i, .keyboard-typing i { animation: none !important; }
}