.bit-top{background:linear-gradient(135deg,#1D4F91,#4C7BD9);color:#fff;padding:16px 0 12px}
.crumbs-dark{font-size:14px;color:#D6E4FA}.crumbs-dark a{color:#fff}
.bit-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px}
.bit-title-row h1{font-size:clamp(24px,3.4vw,32px);margin:0}
.view-sw{display:inline-flex;background:rgba(255,255,255,.18);border-radius:12px;padding:3px}
.view-sw button{border:0;background:transparent;color:#fff;font-family:var(--head);font-weight:500;font-size:15px;padding:6px 14px;border-radius:9px;cursor:pointer}
.view-sw button[aria-selected="true"]{background:#fff;color:#1D4F91}
.bit-levels{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start}
.stage{display:flex;flex-direction:column;gap:4px}
.stage small{font-size:12.5px;color:#D6E4FA}
.stage{max-width:100%}
.stage .dots{display:flex;flex-wrap:wrap;gap:6px}
.lvb{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;font-family:var(--head);font-weight:600;cursor:pointer;position:relative}
.lvb.s1{background:#7BD389;border-color:#7BD389;color:#1E4D30}.lvb.s3{background:#FFC94D;border-color:#FFC94D;color:#4A3500}
.lvb.cur{box-shadow:0 0 0 3px #1D4F91,0 0 0 5px #fff}
.bit-main{padding-top:20px}
.bit-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.say{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.say img{flex:0 0 auto;background:#E4EEF9;border-radius:50%}
.bubble{position:relative;flex:1;background:#fff;border:2px solid #CFE0F5;border-radius:16px;padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.bubble::before{content:"";position:absolute;left:-10px;top:18px;border:8px solid transparent;border-right-color:#CFE0F5}
.bubble b{font-family:var(--head);font-weight:600;font-size:18px}
.say-acts{display:flex;gap:6px;margin-top:4px}
.mini-btn{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:3px 10px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink-2)}
.mini-btn:hover{background:var(--accent-soft)}
.hint{margin:4px 0 0;background:#FFF4D6;border-radius:10px;padding:6px 10px;font-size:15px}
.world-wrap{background:#EAF6EE;border-radius:18px;padding:12px;display:flex;justify-content:center;overflow:auto}
.world{position:relative;display:grid;gap:3px}
.cell{width:var(--cs);height:var(--cs);border-radius:8px;background:#BFE6C9;display:flex;align-items:center;justify-content:center}
.cell.alt{background:#B3DFBF}
.cell.water{background:linear-gradient(180deg,#7EC3F2,#4FA3E0)}
.cell svg{width:78%;height:78%}
.bot{position:absolute;left:0;top:0;width:var(--cs);height:var(--cs);transition:transform .32s ease;z-index:2;pointer-events:none}
.bot img{width:86%;height:86%;margin:7%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.bot .arrow{position:absolute;inset:0;transition:transform .25s ease;z-index:3}
.bot .arrow::after{content:"";position:absolute;right:-16px;top:50%;margin-top:-11px;border:11px solid transparent;border-left:16px solid #E8833A;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.bot.crash img{animation:wobble .5s}
.bot.win img{animation:hop .6s 2}
@keyframes wobble{20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes hop{50%{transform:translateY(-12px)}}
.cell.got svg{opacity:.15}
.run-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.speed{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.status{min-height:1.6em;margin:8px 0 0;font-weight:600}
.status.bad{color:var(--red)}.status.ok{color:var(--green)}
/* จานบล็อกและโปรแกรม */
.palette-card,.prog-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow)}
.prog-card{margin-top:14px}
.side-head{font-family:var(--head);font-weight:600;margin:0 0 8px}
.side-head .note{font-family:var(--body);font-weight:400;font-size:13.5px}
.palette{display:flex;flex-wrap:wrap;gap:8px}
.pb{border:0;border-radius:10px;padding:8px 12px;font-family:var(--body);font-weight:700;font-size:16px;color:#fff;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.pb:hover{filter:brightness(1.06)}
.pb.arrow{width:64px;height:58px;font-size:30px;padding:0}
.k-move{background:#4C97FF}.k-turn{background:#3C7FE0}.k-ctl{background:#FFAB19;color:#3B2A00}.k-if{background:#E6891A;color:#fff}
.prog-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.prog{min-height:120px;max-height:52vh;overflow:auto;padding:4px 2px}
.prog.arrows{display:flex;flex-wrap:wrap;align-items:center;gap:0}
/* จุดวางบล็อก: เห็นตลอดเป็นเส้นประสีเทา + วงกลม “+” (เดิมเห็นเฉพาะตอนเลื่อนเมาส์ผ่าน · Safari/แท็บเล็ตแทบมองไม่เห็น) */
.slot{height:16px;border-radius:6px;margin:1px 0;cursor:pointer;position:relative}
.slot::before{content:"";position:absolute;left:22px;right:6px;top:50%;border-top:2px dashed #A3ADB8;transform:translateY(-50%)}
.slot::after{content:"+";position:absolute;left:3px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#A3ADB8;color:#fff;font:700 14px/16px system-ui,sans-serif;text-align:center}
.slot:hover{background:#E4EEF9}
.slot:hover::before{border-top-color:#1D4F91}.slot:hover::after{background:#1D4F91}
.slot.cur{height:30px;background:#FFF4D6;border:2px dashed #E8A300;display:flex;align-items:center;padding-left:10px;font-size:13.5px;color:#8A6200}
.slot.cur::before{display:none}
.slot.cur::after{content:"▸ บล็อกถัดไปจะวางตรงนี้";position:static;width:auto;height:auto;margin:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left}
.prog.arrows .slot{width:16px;height:58px;margin:3px 0}
.prog.arrows .slot::before{left:50%;right:auto;top:6px;bottom:6px;border-top:0;border-left:2px dashed #A3ADB8;transform:translateX(-50%)}
.prog.arrows .slot:hover::before{border-left-color:#1D4F91}
.prog.arrows .slot::after{left:0;top:50%}
.prog.arrows .slot.cur{width:28px;padding:0;justify-content:center}
.prog.arrows .slot.cur::after{content:"▾"}
.blk{border-radius:10px;color:#fff;font-weight:700;margin:0;position:relative}
.blk .row{display:flex;align-items:center;gap:6px;padding:7px 10px;min-height:38px}
.blk.sel{outline:3px solid #221F29;outline-offset:1px}
.blk.run{box-shadow:0 0 0 4px #FFE066}
.blk.c{background:#FFAB19;color:#3B2A00}
.blk.c.ifb{background:#E6891A;color:#fff}
.blk .body{margin:0 0 0 18px;background:#fff;border-radius:0 0 0 8px;padding:2px 4px 4px 6px;border-left:6px solid rgba(0,0,0,.06);min-height:22px}
.blk .ft{height:12px}
.blk .num{width:44px;border:0;border-radius:6px;padding:2px 4px;font:inherit;font-weight:700;text-align:center}
.blk select{border:0;border-radius:6px;font:inherit;font-weight:600;padding:2px 4px}
.blk .tools{margin-left:auto;display:none;gap:4px}
.blk.sel>.row .tools{display:inline-flex}
.blk .tools button{border:0;background:rgba(255,255,255,.9);color:#221F29;border-radius:6px;width:28px;height:26px;cursor:pointer;font-weight:700}
.tile{width:58px;height:58px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;background:#4C97FF;position:relative;cursor:pointer;margin:3px 0}
.tile.sel{outline:3px solid #221F29}
.tile.run{box-shadow:0 0 0 4px #FFE066}
.tile .x{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:#221F29;color:#fff;font-size:13px;border:0;display:none;cursor:pointer}
.tile.sel .x{display:block}
.empty-prog{color:var(--muted);font-size:15px;padding:6px 4px}
.code-view{margin:0;font:15px/1.7 Menlo,Consolas,'Sarabun',monospace;background:#1F1A2B;color:#EDE7F6;border-radius:12px;padding:12px 14px;white-space:pre;overflow:auto;max-height:52vh}
.res-stars{font-size:40px;text-align:center;color:#E8A300;letter-spacing:4px}
.res-stars .off{color:#E6E1EE}
@media (max-width:900px){.bit-grid{grid-template-columns:minmax(0,1fr)}.speed{margin-left:0}}
.k-fn{background:#FF6680}
.blk.c.fnb{background:#FF6680;color:#fff}