/* CODING STUDIO — scoped to [data-app="code"] (CS-1 shell). Brutalist chrome
   around the Blockly workspace (which keeps its own dark zelos theme). */

.win.w-code { width: 1100px; height: 700px; }
.w-code .win-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.w-code #code-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

[data-app="code"] .cs-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0e0a12; }
[data-app="code"] .cs-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #F2F2EC; border-bottom: 2px solid #0a0a0a; }
[data-app="code"] .cs-btn { font: 800 13px 'JetBrains Mono', monospace; letter-spacing: .04em; padding: 8px 18px; border: 2px solid #0a0a0a; box-shadow: 3px 3px 0 #0a0a0a; cursor: pointer; background: #fff; color: #0a0a0a; }
[data-app="code"] .cs-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0a0a0a; }
[data-app="code"] .cs-run { background: #2ECC40; color: #0a0a0a; }
[data-app="code"] .cs-run.cs-running { background: #C6F542; animation: cs-pulse 0.8s infinite; }
[data-app="code"] .cs-stop { background: #FF2E7E; color: #fff; }
@keyframes cs-pulse { 50% { box-shadow: 3px 3px 0 #0a0a0a, 0 0 0 4px rgba(198,245,66,.5); } }
[data-app="code"] .cs-hint { font: 700 11px 'JetBrains Mono', monospace; color: #4a4a52; margin-left: auto; }

[data-app="code"] .cs-main { flex: 1; min-height: 0; display: flex; }
[data-app="code"] .cs-work { flex: 1; min-width: 0; position: relative; }
[data-app="code"] #cs-blockly { position: absolute; inset: 0; }
[data-app="code"] .cs-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #C6F542; font: 800 14px 'JetBrains Mono', monospace; letter-spacing: .1em; pointer-events: none; }
[data-app="code"] .cs-dots { animation: cs-blink 1s steps(3) infinite; }
@keyframes cs-blink { 50% { opacity: .2; } }

[data-app="code"] .cs-side { width: 500px; flex: none; background: #F2F2EC; border-left: 2px solid #0a0a0a; display: flex; flex-direction: column; align-items: center; padding: 12px; gap: 8px; overflow: hidden; position: relative; }
[data-app="code"] #cs-stage { width: 100%; max-width: 480px; aspect-ratio: 4/3; border: 2px solid #0a0a0a; box-shadow: 5px 5px 0 #0a0a0a; background: #fff; image-rendering: pixelated; touch-action: none; }
[data-app="code"] .cs-stagehint { font: 700 11.5px 'JetBrains Mono', monospace; color: #4a4a52; text-align: center; }

/* backdrop row */
[data-app="code"] .cs-bgrow { display: flex; gap: 6px; margin-top: 4px; }
[data-app="code"] .cs-bgdot { width: 22px; height: 22px; border: 2px solid #0a0a0a; cursor: pointer; padding: 0; }
[data-app="code"] .cs-bgdot.sel { outline: 3px solid #FF2E7E; }

/* sprite strip */
[data-app="code"] .cs-sprites { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
[data-app="code"] .cs-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 8px; background: #fff; border: 2px solid #0a0a0a; box-shadow: 2px 2px 0 #0a0a0a; cursor: pointer; font: 700 9px 'JetBrains Mono', monospace; color: #0a0a0a; position: relative; min-width: 56px; }
[data-app="code"] .cs-chip.sel { background: #C6F542; }
[data-app="code"] .cs-chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #0a0a0a; }
[data-app="code"] .cs-chip-x { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; background: #FF2E7E; color: #fff; border: 2px solid #0a0a0a; font: 800 10px/14px 'JetBrains Mono', monospace; text-align: center; cursor: pointer; }
[data-app="code"] .cs-add { justify-content: center; font: 800 17px 'JetBrains Mono', monospace; background: #16E0E0; }
[data-app="code"] .cs-add span { font: 700 8px 'JetBrains Mono', monospace; }

/* sprite picker overlay */
[data-app="code"] .cs-picker { position: absolute; inset: 10px; background: #F2F2EC; border: 2px solid #0a0a0a; box-shadow: 6px 6px 0 #0a0a0a; z-index: 6; display: flex; flex-direction: column; padding: 10px; gap: 8px; }
[data-app="code"] .cs-picker[hidden] { display: none; }
[data-app="code"] .cs-phead { display: flex; gap: 6px; align-items: center; }
[data-app="code"] .cs-ptab { font: 800 11px 'JetBrains Mono', monospace; padding: 6px 12px; border: 2px solid #0a0a0a; background: #fff; cursor: pointer; }
[data-app="code"] .cs-ptab.sel { background: #0a0a0a; color: #C6F542; }
[data-app="code"] .cs-pclose { margin-left: auto; width: 26px; height: 26px; border: 2px solid #0a0a0a; background: #FF2E7E; color: #fff; font: 800 12px 'JetBrains Mono', monospace; cursor: pointer; }
[data-app="code"] .cs-pcolors { display: flex; gap: 6px; }
[data-app="code"] .cs-pswatch { width: 20px; height: 20px; border: 2px solid #0a0a0a; cursor: pointer; padding: 0; }
[data-app="code"] .cs-pswatch.sel { outline: 3px solid #FF2E7E; }
[data-app="code"] .cs-pgrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; align-content: start; }
[data-app="code"] .cs-ptile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; background: #fff; border: 2px solid #0a0a0a; cursor: pointer; font: 700 8.5px 'JetBrains Mono', monospace; color: #0a0a0a; }
[data-app="code"] .cs-ptile:hover { background: #C6F542; }

@media (max-width: 1100px) {
  [data-app="code"] .cs-side { width: 380px; }
}