/* Circuit Builder: toy-like board + tray. Page frame comes from /shared/style.css. */
.cb-head{max-width:980px;margin:0 auto;padding:4px 16px 0}
.cb-head h1{margin:6px 0 4px;font-size:clamp(24px,6vw,34px)}
.cb-head p{margin:0 0 10px;color:#4b5563;font-size:15px}
#cb-wrap{position:relative;max-width:980px;margin:0 auto;padding:0 8px;user-select:none;-webkit-user-select:none}
.cb-bar{display:flex;align-items:center;gap:8px;padding:0 4px 8px}
.cb-bar .sp{flex:1}
.cb-bar button{height:40px;min-width:40px;padding:0 12px;border-radius:12px;border:0;background:#fff;box-shadow:0 1px 3px #0002;font:600 14px/1 system-ui,sans-serif;color:#1f2a3a;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.cb-bar button:active{transform:translateY(1px)}
#cb-board{display:block;width:100%;height:auto;touch-action:none;border-radius:22px;box-shadow:0 6px 16px #0003;overflow:visible}
#cb-wrap.dragging{z-index:20}
.cb-msg{margin:8px 4px 0;padding:9px 12px;border-radius:12px;font-weight:600;font-size:15px;line-height:1.35;background:#eef2f7;color:#1f2a3a}
.cb-msg.good{background:#dff5e8;color:#0f5132}
.cb-msg.bad{background:#fde2dd;color:#8a1c0e}
.cb-msg.tip{background:#fff4cf;color:#5c4400}
.cb-traywrap{margin-top:10px;background:#fff;border-radius:18px;box-shadow:0 1px 6px #0001;padding:10px 8px 8px}
.cb-traywrap .lab{font:700 12px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.6px;color:#6b7280;margin:0 6px 8px}
#cb-tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
@media (max-width:560px){#cb-tray{grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;grid-auto-columns:104px;overflow-x:auto;touch-action:pan-x;scrollbar-width:none;padding-bottom:2px}#cb-tray::-webkit-scrollbar{display:none}}
.cb-item{border:0;border-radius:12px;background:#f3f4f6;padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font:600 12px/1.15 system-ui,sans-serif;color:#374151;cursor:grab;touch-action:pan-x;min-height:68px;justify-content:center}
.cb-item:hover{background:#e9ecf1}
.cb-item.glow{background:#fff7d6;box-shadow:0 0 0 2.5px #f5b301;animation:cbpulse 1.2s ease-in-out infinite alternate}
@keyframes cbpulse{to{box-shadow:0 0 0 5px #f5b30155}}
.cb-item svg{pointer-events:none;height:38px;width:auto;max-width:100%}
#cb-float{position:fixed;z-index:50;pointer-events:none;opacity:.9;filter:drop-shadow(0 6px 8px #0004)}
#cb-selui{position:absolute;z-index:10;display:flex;align-items:center;gap:6px;background:#fff;border-radius:14px;padding:5px;box-shadow:0 4px 14px #0003}
#cb-selui[hidden],#cb-float[hidden],.cb-msg[hidden]{display:none}
#cb-selui button{height:36px;padding:0 10px;border:0;border-radius:10px;font:700 13px system-ui,sans-serif;cursor:pointer;background:#eef2f7;color:#1f2a3a}
#cb-selui #cb-del{background:#fde2dd;color:#8a1c0e}
#cb-name{font:700 12px system-ui,sans-serif;color:#6b7280;padding:0 4px;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* board pieces */
#cb-board .pc{cursor:grab}
#cb-board .ghost{opacity:.55;pointer-events:none}
#cb-board .ghost.bad .bd{fill:#e5533d}
#cb-board .taphint{pointer-events:none}
#cb-board .taphint .ring{fill:none;stroke:#ffd34d;stroke-width:4;transform-box:fill-box;transform-origin:center;animation:cbring 1.1s ease-out infinite}
@keyframes cbring{from{transform:scale(.7);opacity:1}to{transform:scale(1.9);opacity:0}}
#cb-board .taphint .hand{animation:cbtap 1.1s ease-in-out infinite;filter:drop-shadow(0 2px 3px #0006)}
@keyframes cbtap{0%,100%{transform:translateY(8px)}45%{transform:translateY(-4px)}}
#cb-board .fading{opacity:.3}
#cb-board .selbox{fill:none;stroke:#ffd34d;stroke-width:3;stroke-dasharray:8 6}
#cb-board .over .bd{animation:cbover .35s ease-in-out infinite alternate}
@keyframes cbover{to{fill:#ff3b3b}}
#cb-board .hot{transform-box:fill-box;transform-origin:center;animation:cbwobble .18s ease-in-out infinite alternate}
#cb-board .hot .bd{fill:#c0281b}
@keyframes cbwobble{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
#cb-board .note{pointer-events:none;animation:cbnote 1.25s ease-out forwards}
@keyframes cbnote{from{transform:translateY(0);opacity:1}to{transform:translateY(-60px);opacity:0}}
#cb-board .blade{pointer-events:none}
/* below the game */
.cb-pack{max-width:680px;margin:12px auto 0;padding:0 8px}
.cb-pack a{display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:14px;box-shadow:0 1px 3px #0001;padding:12px 14px;font-size:15px;color:#1f2a3a;text-decoration:none}
.cb-pack a:hover{box-shadow:0 0 0 2px #0f6b4f33,0 2px 8px #0002}
.cb-pack img{width:78px;height:auto;flex:0 0 auto;border-radius:6px;box-shadow:0 2px 6px #0003}
.cb-pack a > span{display:flex;flex-direction:column;gap:4px}
.cb-pack .tag{font-size:12px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.4px}
.cb-pack b{color:#0f6b4f;font-size:16px}
.cb-pack .ln{font-size:14px;color:#4b5563}
.cb-info{max-width:680px;margin:20px auto 40px;padding:0 16px}
.cb-info h2{font-size:20px;margin:26px 0 8px}
.cb-info h3{font-size:16px;margin:16px 0 4px}
.cb-info ul{margin:0;padding-left:22px}
.cb-info li{margin:4px 0;padding-left:2px}
@media (min-width:900px){
  #cb-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto 1fr;column-gap:16px;align-items:start}
  .cb-bar{grid-column:1/-1}
  .cb-main{grid-column:1}
  .cb-traywrap{grid-column:2;grid-row:2;margin-top:0}
  #cb-tray{grid-template-columns:repeat(2,1fr)}
  .cb-pack{max-width:980px}
}
/* ↻ that pops up beside a piece just dropped */
#cb-qt{position:absolute;z-index:11;width:46px;height:46px;border-radius:50%;border:0;background:#ffd34d;color:#1f2a3a;font:900 26px/46px system-ui,sans-serif;box-shadow:0 3px 10px #0005;cursor:pointer;opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .18s,transform .18s;padding:0}
#cb-qt.on{opacity:1;transform:scale(1);pointer-events:auto;animation:cbqt 1s ease-in-out .2s 2 alternate}
@keyframes cbqt{to{transform:scale(1.12)}}
#cb-board .shake{transform-box:fill-box;transform-origin:center;animation:cbshake .32s linear}
@keyframes cbshake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
/* ready-made circuits sheet */
.cb-bar .cb-circbtn{background:#ffd34d;color:#1f2a3a;font-weight:800}
#cb-presets{position:fixed;inset:0;z-index:60;background:#0008;display:flex;align-items:flex-end;justify-content:center}
#cb-presets[hidden]{display:none}
.cb-psheet{background:#f6f3ec;width:100%;max-width:720px;max-height:86vh;overflow:auto;border-radius:20px 20px 0 0;padding:14px 12px 18px}
@media (min-width:760px){#cb-presets{align-items:center}.cb-psheet{border-radius:20px}}
.cb-phead{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px;font-size:18px}
.cb-phead button{width:38px;height:38px;border:0;border-radius:50%;background:#fff;font-size:18px;cursor:pointer;box-shadow:0 1px 3px #0002}
#cb-plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cb-pcard{border:0;background:#fff;border-radius:14px;padding:8px 8px 10px;text-align:left;cursor:pointer;box-shadow:0 1px 4px #0001;display:flex;flex-direction:column;gap:4px;font:14px/1.3 system-ui,sans-serif;color:#374151}
.cb-pcard:hover{box-shadow:0 0 0 2.5px #f5b301}
.cb-pcard svg{width:100%;height:auto;border-radius:10px;margin-bottom:4px}
.cb-pcard b{font-size:16px;color:#1f2a3a}
.cb-pnote{margin:12px 4px 0;font-size:13px;color:#6b7280}
@media (max-width:480px){#cb-plist{grid-template-columns:1fr 1fr}.cb-pcard span{display:none}}
/* round 2 */
.cb-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.cb-bar .ic{display:none}
@media (max-width:620px){.cb-bar .lbl{display:none}.cb-bar .ic{display:inline}.cb-bar button{padding:0 10px}}
#cb-flowbtn.on{background:#1f2a3a;color:#ffd34d}
#cb-board .flow circle{fill:#ffe066;stroke:#7a5a00;stroke-width:1;pointer-events:none}
#cb-board .flow{pointer-events:none}
#cb-board .clip{fill:none;stroke:#cbd5e1;stroke-width:2.2;stroke-linecap:round;pointer-events:none;filter:drop-shadow(0 1px 1px #0008)}
#cb-board .broken > g:first-child rect.bd{animation:cbbroken 1s ease-in-out infinite alternate}
@keyframes cbbroken{to{fill:#7f1d1d}}
#cb-board .smoke{fill:#9ca3af;opacity:.8;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:cbsmoke 1.6s ease-out forwards}
@keyframes cbsmoke{to{transform:translateY(-70px) scale(2.6);opacity:0}}