.games-view { min-height: calc(100dvh - 86px); background: #fffaf0; }
.games-hero { max-width: 1440px; min-height: 620px; margin: auto; padding: clamp(54px,7vw,96px) clamp(22px,6vw,90px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px,7vw,100px); }
.games-hero-copy h1 { font-size: clamp(48px,6vw,84px); }
.games-hero-copy > p:not(.eyebrow) { max-width: 680px; margin: 24px 0 34px; color: var(--muted); font-size: clamp(15px,1.5vw,19px); line-height: 2; }
.games-summary { max-width: 670px; display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid #b9d0dc; }
.games-summary div { min-width: 0; padding: 22px 16px; display: grid; gap: 4px; border-inline-start: 1px solid #b9d0dc; }
.games-summary div:first-child { border-inline-start: 0; }
.games-summary strong { font: 800 34px "Baloo Bhaijaan 2",sans-serif; font-variant-numeric: tabular-nums; }
.games-summary span { color: var(--muted); font-size: 11px; }
.games-hero-board { position: relative; min-height: 430px; overflow: hidden; border: 3px solid var(--ink); border-radius: 34px; background: var(--blue); box-shadow: 12px 12px 0 var(--ink); direction: ltr; }
.games-hero-board::before { content: ""; position: absolute; width: 240px; height: 240px; inset: 36px auto auto 50%; border: 28px solid var(--yellow); border-radius: 50%; transform: translateX(-50%); opacity: .88; }
.board-robot { position: absolute; width: 180px; height: 150px; inset: 118px auto auto 50%; border: 4px solid var(--ink); border-radius: 42px; background: var(--white); transform: translateX(-50%); }
.board-robot i, .board-robot b { position: absolute; width: 24px; height: 24px; top: 48px; border-radius: 50%; background: var(--blue); }
.board-robot i { left: 42px; } .board-robot b { right: 42px; }
.board-robot span { position: absolute; width: 64px; height: 28px; left: 54px; bottom: 30px; border-bottom: 7px solid var(--ink); border-radius: 50%; }
.games-hero-board p { position: absolute; inset: auto auto 26px 28px; margin: 0; color: var(--white); font: 800 19px/1.1 "Baloo Bhaijaan 2",sans-serif; }
.games-hero-board p strong { color: var(--yellow); font-size: 32px; }
.board-chip { position: absolute; z-index: var(--z-base); width: 70px; height: 70px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 18px; background: var(--white); color: var(--ink); font: 800 28px sans-serif; box-shadow: 5px 5px 0 var(--ink); }
.chip-code { inset: 28px 28px auto auto; transform: rotate(6deg); }
.chip-loop { inset: auto 42px 32px auto; transform: rotate(-7deg); }
.chip-bug { inset: 80px auto auto 24px; transform: rotate(-8deg); }

.games-library { padding: 86px clamp(22px,6vw,90px) 120px; background: var(--white); }
.games-section-head { max-width: 1260px; margin: 0 auto 42px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.games-section-head h2 { font-size: clamp(36px,4vw,58px); }
.games-section-head > p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.9; }
.games-grid { max-width: 1260px; margin: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.game-card { min-width: 0; min-height: 410px; padding: 22px; display: flex; flex-direction: column; border: 2px solid #cbdde4; border-radius: var(--radius); background: #fffdf8; box-shadow: var(--shadow); }
.game-card.is-complete { border-color: var(--green); }
.game-card-top { display: flex; align-items: center; justify-content: space-between; }
.game-card-number { color: var(--muted); font: 800 15px "Noto Kufi Arabic",sans-serif; font-variant-numeric: tabular-nums; }
.game-card-stars { color: #9a6d00; direction: ltr; font-size: 18px; }
.game-card-icon { width: 78px; height: 78px; margin: 22px 0 18px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 22px; background: var(--yellow); font: 800 35px sans-serif; box-shadow: 5px 5px 0 var(--ink); }
.game-card-skill { color: var(--green); font-size: 11px; font-weight: 800; }
.game-card h3 { margin-top: 7px; font-size: 30px; }
.game-card p { margin: 10px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.game-card-button { width: 100%; margin-top: auto; background: var(--ink); color: var(--white); box-shadow: 0 5px 0 #0d2f4b; }

.game-player { max-width: 1260px; min-height: calc(100dvh - 86px); margin: auto; padding: 54px clamp(18px,4vw,54px) 100px; }
.game-back { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 5px; }
.game-player-head { margin: 26px 0 22px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.game-level { color: var(--green); font-size: 12px; font-weight: 800; }
.game-player-head h2 { margin-top: 6px; font-size: clamp(42px,5vw,66px); }
.game-player-head p { margin: 5px 0 0; color: var(--muted); }
.game-score { min-width: 170px; padding: 15px 18px; display: grid; gap: 4px; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); text-align: center; box-shadow: 5px 5px 0 var(--ink); }
.game-score span { color: var(--muted); font-size: 11px; }
.game-score strong { color: #946900; direction: ltr; font-size: 24px; }
.game-objective { padding: 20px 24px; display: flex; align-items: center; gap: 16px; border: 1px solid #c4d7dd; border-radius: 20px 20px 0 0; background: var(--paper); }
.game-objective > span { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); font-size: 25px; }
.game-objective strong { display: block; }
.game-objective p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.game-stage { min-height: 440px; padding: clamp(22px,4vw,48px); border: 1px solid #c4d7dd; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--white); box-shadow: var(--shadow); }
.game-stage button:focus-visible, .game-back:focus-visible { outline: 4px solid var(--cyan); outline-offset: 3px; }
.game-feedback { min-height: 64px; margin: 20px 0 0; padding: 16px 20px; border-radius: 16px; font-weight: 800; line-height: 1.7; }
.game-feedback:empty { display: none; }
.game-feedback.success { border: 2px solid var(--green); background: #def6e9; color: #145b48; }
.game-feedback.error { border: 2px solid var(--coral); background: #fff0ec; color: #8e2d28; }
.game-feedback.hint { border: 2px solid #9e7b00; background: #fff5bd; color: #574500; }
.game-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.stage-note { color: var(--muted); text-align: center; }
.stepper { display: flex; align-items: center; gap: 10px; direction: ltr; }
.stepper button, .command-pad button { width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 13px; background: var(--white); color: var(--ink); font-size: 24px; font-weight: 800; box-shadow: 0 3px 0 var(--ink); }
.stepper strong, .stepper b { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }

.robot-game-layout, .loop-lab, .rocket-lab, .logic-lab, .debug-lab, .network-lab, .sensor-lab, .city-lab { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px,5vw,70px); }
.robot-route-grid { grid-template-columns: repeat(4,1fr); max-width: 430px; gap: 7px; }
.robot-route-grid span { border-radius: 13px; font-size: 30px; }
.robot-route-grid .obstacle { background: #cbd2d8; color: #697684; }
.robot-route-grid .robot { background: #d8f6f1; color: var(--blue); }
.command-console { padding: 26px; border: 2px solid var(--ink); border-radius: 24px; background: #f4f8fb; }
.command-console h3 { font-size: 30px; }
.command-list { min-height: 72px; margin: 16px 0; padding: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border: 2px dashed #a5bac5; border-radius: 14px; background: var(--white); direction: ltr; }
.command-list b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--yellow); font-size: 25px; }
.command-list span { width: 100%; color: var(--muted); text-align: center; direction: rtl; }
.command-pad { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4,48px); gap: 8px; direction: ltr; }

.loop-code { padding: 24px; border: 3px solid var(--ink); border-radius: 22px; background: var(--blue); color: var(--white); box-shadow: 7px 7px 0 var(--ink); }
.loop-code > span, .loop-inner > span { display: block; margin-bottom: 10px; font-weight: 800; }
.loop-inner { margin: 18px 0; padding: 18px; border-radius: 15px; background: #244f88; }
.garden-preview { --garden-cols: 1; min-height: 310px; padding: 24px; display: grid; grid-template-columns: repeat(var(--garden-cols),minmax(40px,1fr)); align-content: center; gap: 12px; border: 3px solid var(--ink); border-radius: 25px; background: #dff5d7; }
.garden-preview span { display: grid; place-items: center; aspect-ratio: 1; color: var(--coral); font-size: 38px; }

.recycle-lab { display: grid; gap: 32px; }
.recycle-item { max-width: 350px; min-height: 190px; margin: auto; padding: 24px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 28px; background: var(--paper); box-shadow: 7px 7px 0 var(--ink); }
.recycle-item > span { font-size: 60px; }
.recycle-item strong { font-size: 22px; }
.recycle-item small { color: var(--muted); }
.recycle-bins { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.recycle-bins button { min-height: 130px; padding: 16px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 20px; background: var(--white); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.recycle-bins button span { font-size: 36px; }

.rocket-visual { min-height: 400px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 30px; background: #dceaff; }
.rocket-visual > span { color: var(--coral); font-size: 160px; transform: rotate(0deg); }
.rocket-visual i { width: 70px; height: 70px; margin-top: -140px; border-radius: 50%; background: var(--yellow); }
.rocket-visual b { padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--white); }
.variable-panel { display: grid; gap: 14px; }
.variable-row { padding: 14px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; }
.variable-row > span { font-size: 24px; }
.variable-total { padding: 18px; display: flex; justify-content: space-between; border-radius: 16px; background: var(--paper); }

.visitor-tests { display: grid; gap: 12px; }
.visitor-tests > div { padding: 15px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 15px; background: #f7fafc; }
.visitor-tests b { color: var(--green); font-size: 12px; }
.visitor-tests em { color: var(--muted); font-size: 11px; }
.formula-list { min-width: 0; padding: 22px; border: 2px solid var(--ink); border-radius: 22px; }
.formula-list legend { padding: 0 10px; font-weight: 800; }
.formula-list label { min-height: 58px; margin: 10px 0; padding: 10px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.formula-list input { width: 22px; height: 22px; flex: 0 0 auto; }
.formula-list .button { width: 100%; margin-top: 12px; }

.code-window { overflow: hidden; border: 3px solid var(--ink); border-radius: 22px; background: #122a42; color: var(--white); box-shadow: 7px 7px 0 var(--ink); direction: ltr; }
.code-window-bar { min-height: 45px; padding: 10px 14px; display: flex; align-items: center; gap: 6px; background: #e4ecf1; color: var(--ink); }
.code-window-bar span { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
.code-window-bar span:nth-child(2) { background: var(--yellow); }.code-window-bar span:nth-child(3) { background: var(--green); }
.code-window-bar b { margin-left: auto; font-size: 11px; }
.code-window ol { margin: 0; padding: 15px 48px 15px 15px; }
.code-window li { padding-left: 5px; }
.code-window li::marker { color: #8eb1c9; font-variant-numeric: tabular-nums; }
.code-window button { width: 100%; min-height: 42px; padding: 6px 9px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; background: transparent; color: var(--white); text-align: left; }
.code-window button.selected { background: #70372f; }
.code-window code { white-space: pre-wrap; }.code-window button span { color: #a9c7d9; font-size: 10px; }
.debug-notes { padding: 24px; border-radius: 22px; background: var(--paper); }
.debug-notes p { color: var(--muted); line-height: 1.9; }.debug-notes > strong { display: block; margin: 18px 0; color: var(--coral); }

.order-lab { max-width: 760px; margin: auto; }
.dependency-note { margin-bottom: 20px; padding: 18px; border-right: 6px solid var(--yellow); background: #f7fafc; }
.dependency-note p { margin: 5px 0 0; color: var(--muted); }
.sortable-steps { margin: 0 0 22px; padding: 0; display: grid; gap: 10px; list-style: none; }
.sortable-steps li { min-height: 70px; padding: 11px 14px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; border: 2px solid var(--ink); border-radius: 15px; background: var(--white); }
.sortable-steps li > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); font-weight: 800; }
.sortable-steps li div { display: flex; gap: 7px; }
.sortable-steps button { width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 10px; background: #edf4f8; color: var(--ink); }

.network-map { position: relative; min-height: 410px; border: 3px solid var(--ink); border-radius: 28px; background: #e7f5f2; direction: ltr; }
.network-node { position: absolute; width: 58px; height: 58px; z-index: 1; border: 3px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.network-node.selected { background: var(--yellow); }
.node-A { left: 7%; top: 43%; }.node-B { left: 31%; top: 12%; }.node-C { left: 31%; bottom: 12%; }.node-D { right: 31%; top: 25%; }.node-E { right: 31%; bottom: 9%; }.node-F { right: 7%; top: 43%; }
.network-map::before, .network-map::after { content: ""; position: absolute; height: 3px; width: 75%; left: 12%; background: #7896a2; transform-origin: left center; }
.network-map::before { top: 45%; transform: rotate(-15deg); }.network-map::after { bottom: 28%; transform: rotate(12deg); }
.edge { position: absolute; padding: 2px 7px; border-radius: 999px; background: var(--white); font-weight: 800; font-variant-numeric: tabular-nums; }
.e-ab { left: 20%; top: 25%; }.e-ac { left: 20%; bottom: 25%; }.e-bd { left: 47%; top: 17%; }.e-cd { left: 47%; top: 54%; }.e-ce { left: 47%; bottom: 10%; }.e-df { right: 20%; top: 30%; }.e-ef { right: 20%; bottom: 23%; }
.network-console { padding: 24px; border: 2px solid var(--ink); border-radius: 22px; }
.network-console h3 { font-size: 30px; }
#networkPath { min-height: 70px; margin: 18px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; direction: ltr; }
#networkPath b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); }

.coordinate-grid { display: grid; grid-template-columns: repeat(4,minmax(58px,1fr)); gap: 8px; direction: ltr; }
.coordinate-grid button { aspect-ratio: 1; min-width: 0; min-height: 58px; padding: 5px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 13px; background: #f3f9fb; color: var(--ink); }
.coordinate-grid button.selected { background: var(--yellow); }
.coordinate-grid button span { font-size: 10px; }.coordinate-grid button b { font-size: 22px; }
.sensor-brief { padding: 24px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); }
.sensor-brief ul { padding-right: 22px; line-height: 2.2; }.sensor-brief p { color: var(--muted); }

.city-skyline { position: relative; min-height: 460px; overflow: hidden; border: 3px solid var(--ink); border-radius: 30px; background: #d9eff5; }
.city-skyline span, .city-skyline b, .city-skyline i { position: absolute; bottom: 0; border: 3px solid var(--ink); border-bottom: 0; background: var(--blue); }
.city-skyline span { width: 32%; height: 45%; left: 8%; }.city-skyline b { width: 26%; height: 68%; left: 38%; }.city-skyline i { width: 31%; height: 36%; right: 7%; background: var(--cyan); }
.city-skyline em { position: absolute; right: 24px; top: 20px; color: #bd8200; font-style: normal; font-size: 72px; }
.city-dashboard { display: grid; gap: 16px; }
.city-meters { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 16px; background: var(--ink); color: var(--white); }
.city-meters span { display: grid; gap: 3px; }.city-meters strong { color: var(--yellow); font-variant-numeric: tabular-nums; }
.city-dashboard fieldset { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; }
.city-dashboard legend { padding: 0 8px; font-weight: 800; }
.city-dashboard fieldset > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.city-dashboard label { min-width: 0; cursor: pointer; }.city-dashboard label input { position: absolute; opacity: 0; }
.city-dashboard label span { min-height: 78px; padding: 9px; display: grid; align-content: center; gap: 3px; border: 2px solid var(--line); border-radius: 12px; background: var(--white); text-align: center; }
.city-dashboard label input:checked + span { border-color: var(--ink); background: var(--yellow); }
.city-dashboard label input:focus-visible + span { outline: 4px solid var(--cyan); outline-offset: 3px; }
.city-dashboard label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.city-dashboard label small { color: var(--muted); font-size: 8px; }

@media (max-width: 1000px) {
  .games-hero { grid-template-columns: 1fr; }.games-hero-board { min-height: 390px; }
  .games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .robot-game-layout, .loop-lab, .rocket-lab, .logic-lab, .debug-lab, .network-lab, .sensor-lab, .city-lab { grid-template-columns: 1fr; }
  .mini-grid, .coordinate-grid { width: min(100%,520px); margin-inline: auto; }
}

@media (max-width: 680px) {
  .games-view { min-height: calc(100dvh - 68px); }
  .games-hero { min-height: 0; padding-top: 52px; }.games-hero-board { min-height: 330px; }
  .games-summary { grid-template-columns: 1fr; border-bottom: 0; }.games-summary div { padding: 14px 4px; border-inline-start: 0; border-bottom: 1px solid #b9d0dc; }
  .games-library { padding-block: 62px 80px; }.games-section-head { display: grid; }.games-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 370px; }.game-player { padding-top: 32px; }.game-player-head { align-items: stretch; flex-direction: column; }.game-score { width: 100%; }
  .game-objective { align-items: flex-start; }.game-stage { min-height: 360px; padding: 18px 12px; }
  .command-console, .loop-code, .formula-list, .debug-notes, .network-console, .sensor-brief { padding: 17px; }
  .command-pad { grid-template-columns: repeat(4,44px); }.command-pad button { width: 44px; height: 44px; }
  .recycle-bins { grid-template-columns: 1fr; }.recycle-bins button { min-height: 88px; grid-template-columns: auto 1fr; gap: 15px; }
  .variable-row { grid-template-columns: 30px minmax(70px,1fr); }.variable-row .stepper { grid-column: 1 / -1; justify-content: center; }
  .code-window ol { padding-right: 38px; }.code-window code { font-size: 10px; }.code-window button span { display: none; }
  .sortable-steps li { grid-template-columns: 40px minmax(0,1fr); }.sortable-steps li div { grid-column: 1 / -1; justify-content: end; }
  .network-map { min-height: 340px; }.coordinate-grid { gap: 5px; }.coordinate-grid button { min-height: 54px; }
  .city-skyline { min-height: 300px; }.city-dashboard fieldset > div { grid-template-columns: 1fr; }.city-dashboard label span { min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-card .button { transition: none; }
}