/* Byte Studio: extra styles on top of kids.css */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s-app .k-top { gap: 10px; }
.s-name input { width: min(240px, 26vw); height: 44px; padding: 0 12px; border: 3px solid var(--edge); border-radius: 12px; background: #fff; color: var(--ink); font: 900 17px var(--f-body); box-shadow: 0 3px 0 var(--drop); }
.s-name input:focus { outline: 3px solid var(--gold); }
.s-saved { font: 700 11px var(--f-pixel); letter-spacing: .04em; color: #b9f6ca; white-space: nowrap; margin-right: auto; }
.s-saved.busy { color: #ffe58a; }
.k-tool.s-wide { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; }
.k-tool.s-wide span { font: 900 15px var(--f-body); color: var(--ink); }
.k-tool[hidden] { display: none; }

.s-main { grid-template-columns: 330px minmax(0, 1fr) minmax(360px, 1.05fr); }
.s-pal { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.s-cats { display: flex; flex-direction: column; gap: 6px; padding: 10px 6px; background: #fff3c4; border-right: 3px solid var(--edge); overflow-y: auto; }
.s-cat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 10px; background: transparent; font: 800 10px var(--f-body); color: #4b4f5c; }
.s-cat i { display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid var(--edge); border-radius: 50%; font-style: normal; font-size: 17px; box-shadow: 0 2px 0 var(--drop); }
.s-cat:hover { background: rgba(0, 0, 0, .06); }
.s-cat.event i { background: var(--event); } .s-cat.move i { background: var(--move); } .s-cat.look i { background: var(--look); }
.s-cat.sound i { background: var(--sound); } .s-cat.loop i { background: var(--loop); } .s-cat.var i { background: var(--var); }
.s-blocks { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 10px 10px 120px; overflow: auto; scroll-padding-top: 6px; }
.s-h { margin: 12px 2px 0; font: 700 11px var(--f-pixel); letter-spacing: .08em; color: #7a5a00; }
.s-h:first-child { margin-top: 0; }
:root { --look: #8a5cf6; --sound: #d946ef; --var: #ea580c; }
.blk.look { background: var(--look); } .blk.sound { background: var(--sound); } .blk.var { background: var(--var); }
.cblk.look { --c: var(--look); } .cblk.move { --c: var(--move); }
.blk .arg.txt { font-size: 15px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.blk .arg.hatarg { font-size: 15px; }
.s-pal .blk { font-size: 13px; min-height: 44px; max-width: none; gap: 6px; padding: 5px 9px 5px 8px; } .s-pal .blk .ic { font-size: 19px; }
.s-pal .blk .arg { min-width: 28px; height: 28px; font-size: 14px; padding: 0 6px; }
.s-pal .cblk { min-width: 0; } .s-pal .cblk .mouth { min-height: 16px; } .s-pal .cblk .foot { width: 90px; height: 14px; }

.s-who { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; font-weight: 900; }
.s-who b { font-size: 18px; } .s-who span:last-child { font: 700 12px var(--f-code); color: #7b7566; }
.s-thumb { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--edge); border-radius: 12px; background: #fff; }
.s-thumb canvas, .s-spr canvas, .s-libi canvas { image-rendering: pixelated; }
#k-script { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.s-script > .blk.hat { cursor: grab; }
.s-newscript { padding: 14px 16px; border: 3px dashed #cfc6ae; border-radius: 16px; color: #8a8478; font-weight: 800; font-size: 15px; max-width: 420px; }
.s-newscript code { font: 800 14px var(--f-code); color: var(--event); }
.s-newscript .hand { font-size: 22px; display: inline-block; animation: k-nudge 1.2s ease-in-out infinite; }
.hatdrag #k-script.hatok .s-newscript { border-color: var(--event); background: rgba(14, 165, 164, .12); color: #0f766e; }
.k-ws.live { box-shadow: inset 0 0 0 4px rgba(34, 197, 94, .35); }
.blk.hat.run { outline: 4px solid #fff; }

.s-right { background: #cfe9ff; overflow-y: auto; }
.s-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #1d3557; border-bottom: 4px solid var(--edge); }
.s-flag, .s-stop { display: grid; place-items: center; width: 56px; height: 50px; border: 3px solid var(--edge); border-radius: 14px; font-size: 24px; box-shadow: 0 4px 0 var(--drop); padding: 0; color: #fff; }
.s-flag { background: #22c55e; } .s-flag.on { background: #16a34a; box-shadow: 0 0 0 4px #b9f6ca, 0 4px 0 var(--drop); }
.s-stop { background: #ef4444; font-size: 20px; }
.s-flag:active, .s-stop:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }
.s-tip { flex: 1; min-width: 0; color: #dbeafe; font-weight: 800; font-size: 14px; line-height: 1.25; }
.s-tip.warn { color: #ffe58a; }
.s-tip code { font: 800 13px var(--f-code); color: #fff; }
.s-full { width: 44px; height: 44px; font-size: 20px; }
.s-stage { flex: none; padding: 10px 10px 6px; display: block; }
.s-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none; touch-action: none; cursor: pointer; }
.s-stage canvas:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
.s-pad { justify-content: center; margin: 0; padding: 4px 10px 6px; flex-wrap: wrap; }
.s-pad .k-small { width: 52px; height: 48px; border-radius: 12px; }
.s-pad .k-small.wide { width: 110px; font: 900 16px var(--f-body); }
.s-pad .k-small.down { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); background: #fde68a; }
.s-tray { display: flex; gap: 10px; align-items: stretch; padding: 6px 10px; }
.s-sprites { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.s-spr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 74px; height: 80px; padding: 4px; border: 3px solid var(--edge); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--drop); }
.s-spr .nm { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 12px var(--f-body); }
.s-spr.on { background: #ffe58a; outline: 3px solid #f59e0b; outline-offset: 1px; }
.s-spr .n { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; border: 2px solid var(--edge); border-radius: 11px; background: var(--event); color: #fff; font: 900 12px var(--f-body); font-style: normal; }
.s-add { background: #e9fbe9; border-style: dashed; } .s-add b { font-size: 26px; line-height: 1; }
.s-add:disabled { opacity: .5; cursor: not-allowed; }
.s-side { flex: none; }
.s-bd { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 80px; height: 80px; padding: 5px; border: 3px solid var(--edge); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--drop); font: 900 11px var(--f-body); }
.s-bd canvas { width: 60px; height: 45px; border: 2px solid var(--edge); border-radius: 6px; image-rendering: pixelated; }
.s-props { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 10px 14px; font-weight: 800; }
.s-props label { display: flex; align-items: center; gap: 6px; }
.s-props input { width: 130px; height: 38px; padding: 0 10px; border: 3px solid var(--edge); border-radius: 10px; font: 900 15px var(--f-body); }
.s-xy { font: 700 13px var(--f-code); color: #334155; } .s-xy b { display: inline-block; min-width: 34px; color: var(--ink); }
.s-mini { height: 38px; padding: 0 10px; border: 3px solid var(--edge); border-radius: 10px; background: #fff; box-shadow: 0 3px 0 var(--drop); font: 900 14px var(--f-body); }
.s-mini:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--drop); }
.s-del { background: #fee2e2; }

/* value picker */
.s-pop { grid-template-columns: repeat(4, minmax(56px, auto)); max-width: min(420px, 94vw); }
.s-pop.wide { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
.s-pop button { padding: 0 10px; font-size: 17px; white-space: nowrap; }
.s-own { grid-column: 1 / -1; display: flex; gap: 6px; }
.s-own input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 3px solid var(--edge); border-radius: 10px; font: 800 17px var(--f-body); }
.s-own button { width: 52px; background: #22c55e !important; color: #fff; }

/* dialogs */
.s-card { position: relative; width: min(560px, 94vw); max-height: 88vh; overflow: auto; text-align: left; }
.s-card.wide { width: min(760px, 94vw); }
.s-card h2 { text-align: center; margin-top: 0; }
.s-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 3px solid var(--edge); border-radius: 10px; background: #fff; box-shadow: 0 3px 0 var(--drop); font: 900 18px var(--f-body); }
.s-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; }
.s-libi { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 3px solid var(--edge); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--drop); font: 900 13px var(--f-body); text-transform: capitalize; }
.s-libi:hover { background: #fff7d6; } .s-libi.on { background: #ffe58a; }
.s-bdlib { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.s-bdlib canvas { width: 120px; height: 90px; border: 2px solid var(--edge); border-radius: 8px; }
.s-files { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.s-row { display: flex; justify-content: center; }
.s-new, .s-check, .s-open { height: 46px; padding: 0 16px; border: 3px solid var(--edge); border-radius: 12px; background: #22c55e; color: #fff; box-shadow: 0 3px 0 var(--drop); font: 900 16px var(--f-body); white-space: nowrap; }
.s-open { background: #2f7fe8; } .s-open:disabled { background: #cbd5e1; color: #475569; cursor: default; }
.s-file { display: flex; align-items: center; gap: 12px; padding: 8px; border: 3px solid var(--edge); border-radius: 14px; background: #fff; }
.s-file.on { background: #fff7d6; }
.s-file canvas { width: 96px; height: 72px; border: 2px solid var(--edge); border-radius: 8px; image-rendering: pixelated; flex: none; }
.s-fi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.s-fi b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-fi span { color: #5b6170; font-weight: 700; font-size: 13px; }
.s-confirm p { font-weight: 800; font-size: 18px; text-align: center; }
.s-confirm .row button { width: auto; padding: 0 18px; font: 900 17px var(--f-body); }
.s-confirm .s-yes { background: #ef4444; color: #fff; }
.s-mintro { margin: 0 0 6px; font-weight: 700; color: #4b5160; text-align: center; }
.s-mlist { display: flex; flex-direction: column; gap: 8px; }
.s-m { display: flex; align-items: center; gap: 10px; padding: 10px; border: 3px solid var(--edge); border-radius: 14px; background: #fff; }
.s-m.done { background: #effdf3; } .s-m.pass { animation: k-pop .35s ease-out; }
.s-mn { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 3px solid var(--edge); border-radius: 50%; background: var(--gold); font: 900 16px var(--f-body); }
.s-m.done .s-mn { background: #22c55e; color: #fff; }
.s-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s-mt b { font-size: 17px; } .s-mt span { font-weight: 700; color: #4b5160; font-size: 14px; }
.s-mres { font-style: normal; font-weight: 800; font-size: 14px; color: #1d3557; }
.s-mres:empty { display: none; }
.s-mres code, .s-mt code { font: 800 13px var(--f-code); background: #eef2ff; padding: 1px 4px; border-radius: 4px; }
.s-mstars { color: var(--gold); font-size: 18px; letter-spacing: -1px; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.s-mstars i { font-style: normal; color: #d1d5db; text-shadow: none; }
.s-empty { font-weight: 800; color: #7a5a00; }

/* teacher watching a student's project */
.s-view { padding: 8px 14px; background: #fde68a; border-bottom: 4px solid var(--edge); font-weight: 800; text-align: center; }
.s-view button { margin-left: 10px; height: 36px; padding: 0 12px; border: 3px solid var(--edge); border-radius: 10px; background: #fff; font: 900 14px var(--f-body); }
.s-app.s-viewing { grid-template-rows: auto auto 1fr; }
.s-viewing .s-pal { pointer-events: none; opacity: .55; }

/* a bigger stage */
.s-app.s-big .s-main { grid-template-columns: 0 0 minmax(0, 1fr); }
.s-app.s-big .s-pal, .s-app.s-big .k-ws { display: none; }
.s-app.s-big .s-stage canvas { max-width: min(100%, calc((100dvh - 260px) * 4 / 3)); margin: 0 auto; }

@media (max-width: 1180px) {
  .s-main { grid-template-columns: 290px minmax(0, 1fr) minmax(320px, 1fr); }
  .k-tool.s-wide span { display: none; } .k-tool.s-wide { width: 48px; padding: 0; justify-content: center; }
}
/* tablets and small Chromebooks: stage on top, blocks below */
@media (max-width: 980px) {
  .s-app { height: auto; min-height: 100dvh; }
  .s-main { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto minmax(70vh, auto); }
  .s-right { grid-column: 1 / -1; grid-row: 1; border-bottom: 4px solid var(--edge); overflow: visible; }
  .s-stage canvas { max-width: min(100%, 640px); margin: 0 auto; }
  .s-pal { grid-row: 2; position: sticky; top: 0; height: 100dvh; } .k-ws { grid-row: 2; border-right: 0; }
  .s-cats { padding: 8px 4px; } .s-pal { grid-template-columns: 56px minmax(0, 1fr); }
  .s-name input { width: 150px; } .s-saved { display: none; }
  .k-top { flex-wrap: nowrap; } .k-tools { margin-left: auto; gap: 6px; }
}
@media (max-width: 640px) {
  .s-main { grid-template-columns: 1fr; }
  .s-pal { grid-row: 3; position: static; height: 46vh; border-right: 0; border-top: 4px solid var(--edge); }
  .k-ws { grid-row: 2; min-height: 50vh; }
  .k-top { flex-wrap: wrap; } .s-name { order: 3; flex-basis: 100%; } .s-name input { width: 100%; }
  .k-tool { width: 42px; height: 42px; font-size: 19px; }
}
/* iPad: scroll the code area with a finger; blocks themselves still drag */
.s-app .k-ws { touch-action: pan-x pan-y; }
.s-app .blk, .s-app .s-script > .blk.hat { touch-action: none; }
.s-app .blk:focus-visible, .s-app .arg:focus-visible, .s-app .cblk:focus-visible { outline: 4px solid #3478F6; outline-offset: 2px; }