.scratch-course { border-color: #e6a53a; }
.scratch-course .market-meta b { background: #f5a623; color: #4b2d00; }
.scratch-advanced-course { border-color: #8d5eb7; }
.scratch-advanced-course .market-meta b { background: #8d5eb7; color: #fff; }

.scratch-map, .scratch-motion, .scratch-loop, .scratch-project, .scratch-clones, .scratch-custom, .scratch-bounce { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 28px; }
.scratch-window { min-height: 390px; padding: 12px; display: grid; grid-template-columns: .42fr 1fr; grid-template-rows: 1fr 94px; gap: 9px; border: 3px solid var(--ink); border-radius: 24px; background: #e8eef6; box-shadow: 7px 7px 0 var(--ink); }
.scratch-window > div { padding: 14px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 14px; color: var(--ink); font-weight: 800; text-align: center; }
.scratch-stage { grid-column: 2; position: relative; background: #fff; }
.scratch-stage span { display: block; font-size: 64px; }
.scratch-palette { grid-column: 1; grid-row: 1; background: #dceaff; }
.scratch-code-area { grid-column: 2; grid-row: 2; background: #fff9e7; }
.scratch-sprites { grid-column: 1; grid-row: 2; background: #dff5e9; }
.scratch-panel, .scratch-rules { min-width: 0; padding: 22px; display: grid; gap: 15px; border: 2px solid var(--ink); border-radius: 22px; background: #f8fbfc; }
.scratch-select { min-width: 0; display: grid; gap: 7px; }
.scratch-select > span { color: var(--ink); font-size: 12px; font-weight: 800; }
.scratch-select select, .difficulty-table select { width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; border: 2px solid #a9bec9; border-radius: 12px; background: #fff; color: var(--ink); font: 700 12px "Noto Kufi Arabic",sans-serif; }
.scratch-select select:focus-visible, .difficulty-table select:focus-visible { outline: 4px solid var(--cyan); outline-offset: 2px; }
.scratch-select-error select { border-color: var(--coral); outline: 3px solid rgba(219,77,69,.16); }

.scratch-grid { display: grid; grid-template-columns: repeat(4,minmax(54px,1fr)); gap: 6px; direction: ltr; }
.scratch-grid span { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font-size: 27px; }
.scratch-grid .rock { background: #c7d1d8; }
.scratch-stack { min-width: 0; padding: 22px; border: 2px solid var(--ink); border-radius: 22px; background: #fff8dc; }
.scratch-stack h3 { font-size: 30px; }
.scratch-command-list { min-height: 72px; margin: 14px 0; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border: 2px dashed #a5bac5; border-radius: 14px; background: #fff; color: var(--muted); }
.scratch-command-list b { padding: 9px 12px; border: 2px solid #267bd9; border-radius: 10px; background: #4c97ff; color: #fff; font-size: 11px; }
.scratch-block-buttons { margin-bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scratch-block-buttons button { min-height: 48px; padding: 8px; border: 2px solid #267bd9; border-radius: 12px; background: #4c97ff; color: #fff; font-weight: 800; }

.scratch-order, .scratch-list-game { max-width: 780px; margin: auto; }
.scratch-order ol, .scratch-list-game ol { margin: 0 0 22px; padding: 0; display: grid; gap: 9px; list-style: none; }
.scratch-order li, .scratch-list-game li { min-height: 72px; padding: 12px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 2px solid var(--ink); border-radius: 15px; background: #fff; }
.scratch-order li > span, .scratch-list-game li > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #ffab19; font-weight: 800; font-variant-numeric: tabular-nums; }
.scratch-order li div, .scratch-list-game li div { display: flex; gap: 7px; }
.scratch-order li button, .scratch-list-game li button { width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 10px; background: #e7f0f6; color: var(--ink); }

.scratch-loop-preview { min-height: 330px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 26px; background: #dceaff; font-size: 130px; box-shadow: 7px 7px 0 var(--ink); }
.scratch-rules { max-width: 760px; margin: auto; }
.scratch-score { max-width: 760px; margin: auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.scratch-score > div:first-child { min-height: 260px; padding: 24px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 28px; background: #ffab19; box-shadow: 7px 7px 0 var(--ink); }
.scratch-score > div:first-child span, .scratch-score > div:first-child small { font-weight: 800; text-align: center; }
.scratch-score > div:first-child strong { font: 800 80px "Baloo Bhaijaan 2",sans-serif; font-variant-numeric: tabular-nums; }
.scratch-score-controls { display: grid; align-content: center; gap: 12px; }
.scratch-score-controls > button:not(.button) { min-height: 60px; padding: 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font-weight: 800; }

.scratch-project-screen { position: relative; min-height: 360px; overflow: hidden; border: 3px solid var(--ink); border-radius: 28px; background: #dceaff; box-shadow: 7px 7px 0 var(--ink); }
.scratch-project-screen span { position: absolute; inset: auto auto 35px 40px; font-size: 76px; }
.scratch-project-screen b { position: absolute; inset: 45px 45px auto auto; color: #be8300; font-size: 60px; }
.scratch-project-screen i { position: absolute; inset: 16px auto auto 16px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-style: normal; font-size: 11px; }
.scratch-project-screen::after { content: ""; position: absolute; width: 80%; height: 12px; inset: auto 10% 15px; border-radius: 999px; background: var(--green); }
.scratch-project-screen.galaxy, .galaxy .scratch-project-screen { background: #243c66; }
.galaxy .scratch-project-screen::after { background: #4c97ff; }

.clone-rain { min-height: 350px; padding: 30px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 28px; background: #243c66; color: var(--yellow); font-size: 50px; line-height: 1.9; text-align: center; box-shadow: 7px 7px 0 var(--ink); }
.scratch-check { min-height: 52px; padding: 10px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.scratch-check input { width: 24px; height: 24px; flex: 0 0 auto; }
.scratch-check span { font-size: 12px; font-weight: 800; }

.scratch-list-game h3 { margin-bottom: 18px; font-size: 32px; }
.scratch-list-game > .button { margin-inline-end: 10px; }
.scratch-custom .custom-definition { padding: 24px; display: grid; gap: 9px; border: 3px solid var(--ink); border-radius: 24px; background: #fff5d4; box-shadow: 7px 7px 0 var(--ink); }
.custom-definition strong, .custom-definition span { min-height: 58px; padding: 13px 18px; display: flex; align-items: center; border: 2px solid #7c49a9; border-radius: 14px; background: #9966ff; color: #fff; font-weight: 800; }
.custom-definition span { margin-inline-start: 28px; background: #8452df; }

.bounce-stage { position: relative; min-height: 360px; overflow: hidden; border: 3px solid var(--ink); border-radius: 28px; background: #e8f6f3; box-shadow: inset 0 0 0 14px #fff; }
.bounce-stage span { position: absolute; inset: 50% auto auto 50%; color: #db4d45; font-size: 70px; transform: translate(-50%,-50%); }
.velocity-row { min-height: 58px; display: grid; grid-template-columns: 1fr 44px 40px 44px; align-items: center; gap: 8px; }
.velocity-row button { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 10px; background: #4c97ff; color: #fff; font-size: 22px; }
.velocity-row strong { text-align: center; font-variant-numeric: tabular-nums; }

.difficulty-table { max-width: 820px; margin: auto; padding: 22px; display: grid; gap: 10px; border: 2px solid var(--ink); border-radius: 22px; background: #f8fbfc; }
.difficulty-table > div { display: grid; grid-template-columns: .5fr 1fr 1fr; align-items: center; gap: 10px; }
.difficulty-table > div:first-child { padding: 10px; border-radius: 12px; background: var(--ink); color: #fff; }
.difficulty-table > div > span { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .scratch-map, .scratch-motion, .scratch-loop, .scratch-project, .scratch-clones, .scratch-custom, .scratch-bounce { grid-template-columns: 1fr; }
  .scratch-window, .scratch-grid, .scratch-project-screen, .clone-rain, .bounce-stage { width: min(100%,620px); margin-inline: auto; }
}

@media (max-width: 680px) {
  .scratch-window { min-height: 320px; grid-template-columns: .46fr 1fr; }
  .scratch-window > div { padding: 8px; font-size: 10px; }
  .scratch-stage span { font-size: 48px; }
  .scratch-panel, .scratch-rules, .scratch-stack { padding: 15px; }
  .scratch-block-buttons { grid-template-columns: 1fr; }
  .scratch-order li, .scratch-list-game li { grid-template-columns: 40px minmax(0,1fr); }
  .scratch-order li div, .scratch-list-game li div { grid-column: 1 / -1; justify-content: end; }
  .scratch-score { grid-template-columns: 1fr; }
  .scratch-loop-preview { min-height: 250px; font-size: 100px; }
  .scratch-project-screen, .clone-rain, .bounce-stage { min-height: 270px; }
  .scratch-list-game > .button { width: 100%; margin: 0 0 10px; }
  .difficulty-table { padding: 12px; }
  .difficulty-table > div { grid-template-columns: 34px minmax(0,1fr); }
  .difficulty-table > div select:last-child { grid-column: 2; }
  .difficulty-table > div:first-child { display: none; }
}