/* Bang Bang Granny — Bouwplaats (level builder). Same palette and type as the game. */
:root{
  --ink:#1A1033;--bg:#0F0B24;--panel:#1B1540;--panel2:#241C52;--line:rgba(255,255,255,.1);
  --y:#FFD23C;--o:#FF9A1F;--mag:#FF3CAC;--cy:#5FE8FF;--lime:#C6F03A;--txt:#FFF8EC;--mute:#A8A2C8;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.5,.5,1)
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:'Barlow Condensed',system-ui,sans-serif;letter-spacing:.01em;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- top bar ---- */
.bar{position:fixed;inset:0 0 auto 0;height:calc(58px + var(--st));padding:var(--st) calc(12px + var(--sr)) 0 calc(12px + var(--sl));display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#191241,#130E33);border-bottom:2px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.25);z-index:20}
.brand{margin:0;font-family:'Bangers',cursive;font-size:28px;letter-spacing:.03em;color:var(--y);text-shadow:2px 2px 0 var(--ink);white-space:nowrap}
.brand span{color:var(--txt)}
.name{flex:1 1 140px;min-width:80px;max-width:300px;height:38px;padding:0 12px;border-radius:10px;border:2px solid var(--line);background:rgba(0,0,0,.25);color:var(--txt);font:700 18px 'Barlow Condensed',sans-serif;letter-spacing:.02em;outline:none;transition:border-color .2s,background .2s}
.name:focus{border-color:var(--y);background:rgba(0,0,0,.4)}
.bar-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.ib{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);transition:transform .25s var(--spring),background .2s}
.ib:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.ib:active{transform:scale(.92)}
.ib:disabled{opacity:.3;pointer-events:none}
.tb{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.07);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;transition:transform .25s var(--spring),background .2s,box-shadow .2s}
.tb:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}
.tb:active{transform:scale(.95)}
.tb.go{background:var(--y);color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.tb.go:hover{background:#FFE071;box-shadow:0 5px 0 var(--ink);transform:translateY(-2px)}

/* ---- layout ---- */
.work{position:fixed;inset:calc(58px + var(--st)) 0 0 0;display:flex}
.pal{flex:none;width:272px;display:flex;flex-direction:column;background:var(--panel);border-right:2px solid var(--ink);padding-left:var(--sl)}
.stage{position:relative;flex:1;min-width:0;overflow:hidden;touch-action:none;background:#0A0718}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---- palette ---- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 12px 8px}
.tab{height:32px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.06);font-weight:800;font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);transition:background .2s,color .2s,transform .25s var(--spring)}
.tab:hover{color:var(--txt);transform:translateY(-1px)}
.tab[aria-selected="true"]{background:var(--y);color:var(--ink)}
.mats{display:flex;gap:6px;padding:0 12px 8px}
.mats:empty{display:none}
.mat{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 5px;border-radius:10px;background:rgba(255,255,255,.05);font-weight:700;font-size:12px;letter-spacing:.05em;color:var(--mute);transition:background .2s,color .2s,transform .25s var(--spring)}
.mat i{width:24px;height:16px;border-radius:4px;border:2px solid var(--ink);background:var(--c)}
.mat:hover{transform:translateY(-1px);color:var(--txt)}
.mat[aria-pressed="true"]{background:rgba(255,210,60,.18);color:var(--y);box-shadow:inset 0 0 0 2px var(--y)}
.items{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 12px calc(14px + var(--sb));align-content:start;scrollbar-width:thin}
.it{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 7px;border-radius:12px;background:rgba(255,255,255,.05);border:2px solid transparent;transition:transform .25s var(--spring),background .2s,border-color .2s}
.it canvas{width:58px;height:46px}
.it span{font-weight:700;font-size:13px;line-height:1.05;text-align:center;color:var(--mute)}
.it:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.it:hover span{color:var(--txt)}
.it[aria-pressed="true"]{border-color:var(--y);background:rgba(255,210,60,.12)}
.it[aria-pressed="true"] span{color:var(--y)}

/* ---- stage overlays ---- */
.modes{position:absolute;left:12px;top:12px;display:flex;gap:6px;padding:5px;border-radius:14px;background:rgba(15,11,36,.82);border:2px solid var(--ink);backdrop-filter:blur(6px)}
.modes button{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);transition:background .2s,color .2s,transform .25s var(--spring)}
.modes button:hover{color:var(--txt);transform:translateY(-1px)}
.modes button[aria-pressed="true"]{background:var(--cy);color:var(--ink)}
.modes button[data-m="erase"][aria-pressed="true"]{background:#FF5A5A}
.modes button[data-m="ground"][aria-pressed="true"]{background:var(--lime)}
.zoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px}
.zoom button{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(15,11,36,.82);border:2px solid var(--ink);font:400 26px 'Bangers',cursive;transition:transform .25s var(--spring),background .2s}
.zoom button:hover{background:#2A2160;transform:scale(1.06)}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;max-width:calc(100% - 24px);padding:8px 14px;border-radius:12px;background:rgba(15,11,36,.85);border:2px solid var(--ink);font-weight:700;font-size:15px;letter-spacing:.02em;text-align:center;pointer-events:none;transition:opacity .3s}
.hint:empty{opacity:0}
.hint b{color:var(--y)}
.toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-12px);margin:0;padding:9px 16px;border-radius:12px;background:var(--y);color:var(--ink);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-weight:800;font-size:16px;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--spring);white-space:nowrap}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#FF6A6A}

/* ---- inspector ---- */
.insp{flex:none;width:250px;padding:14px 14px calc(14px + var(--sb));background:var(--panel);border-left:2px solid var(--ink);overflow:auto;padding-right:calc(14px + var(--sr))}
.insp h3{margin:0 0 10px;font-family:'Bangers',cursive;font-weight:400;font-size:24px;letter-spacing:.04em;color:var(--y)}
.grp{margin:0 0 12px}
.grp > span{display:block;margin:0 0 6px;font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:32px;padding:0 10px;border-radius:9px;background:rgba(255,255,255,.07);font-weight:700;font-size:14px;letter-spacing:.03em;transition:background .2s,transform .25s var(--spring),color .2s}
.chip:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--y);color:var(--ink)}
.step{display:flex;align-items:center;gap:6px}
.step button{width:34px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);font:400 22px 'Bangers',cursive;transition:background .2s,transform .2s var(--spring)}
.step button:hover{background:rgba(255,255,255,.16)}
.step button:active{transform:scale(.9)}
.step b{min-width:46px;text-align:center;font-weight:800;font-size:17px}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.act{flex:1;min-width:90px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;transition:background .2s,transform .25s var(--spring)}
.act:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.act.del{background:rgba(255,90,90,.18);color:#FF9A9A}
.act.del:hover{background:rgba(255,90,90,.32)}
select,input[type=range]{accent-color:var(--y)}
select{width:100%;height:38px;padding:0 10px;border-radius:10px;border:2px solid var(--line);background:#120D30;color:var(--txt);font:700 16px 'Barlow Condensed',sans-serif}

/* ---- modals ---- */
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(6,4,16,.66);backdrop-filter:blur(4px);animation:fade .2s ease}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px 22px 20px;border-radius:20px;background:var(--panel);border:3px solid var(--ink);box-shadow:0 8px 0 var(--ink),0 30px 80px rgba(0,0,0,.5);animation:pop .35s var(--spring)}
@keyframes pop{from{transform:scale(.92) translateY(10px);opacity:0}}
.sheet h2{margin:0 0 14px;font-family:'Bangers',cursive;font-weight:400;font-size:34px;letter-spacing:.03em;color:var(--y);text-shadow:2px 2px 0 var(--ink)}
.sheet h3{margin:18px 0 8px;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.x{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);font-size:24px;line-height:1;transition:background .2s,transform .25s var(--spring)}
.x:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}
.f{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.f b{color:var(--y);letter-spacing:.04em}
.f.chk{flex-direction:row;align-items:center;gap:10px;text-transform:none;letter-spacing:.02em;font-size:16px;color:var(--txt);font-weight:700}
.f.chk input{width:20px;height:20px;accent-color:var(--y)}
.ammo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.am{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 6px 6px 10px;border-radius:10px;background:rgba(255,255,255,.05);font-weight:700;font-size:15px}
.am.on{background:rgba(255,210,60,.12)}
.am .step b{min-width:22px}
.row{display:flex;flex-wrap:wrap;gap:8px}
.btn{height:42px;padding:0 16px;border-radius:12px;background:var(--y);color:var(--ink);font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 3px 0 var(--ink);transition:transform .25s var(--spring),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink);background:#FFE071}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--txt);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.slots li{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.slots li b{flex:1;font-size:17px}
.slots li em{font-style:normal;color:var(--mute);font-size:13px}
.slots .empty{color:var(--mute);background:none;padding:4px 0}
textarea{width:100%;margin:0 0 8px;padding:10px;border-radius:10px;border:2px solid var(--line);background:#120D30;color:var(--txt);font:600 14px ui-monospace,Menlo,monospace;resize:vertical;user-select:text;-webkit-user-select:text}

/* ---- phones: compact bar; portrait gets the palette as a strip at the bottom, landscape a narrow column ---- */
@media (max-width:860px),(max-height:560px){
  .bar{height:calc(50px + var(--st));gap:6px}
  .brand{display:none}
  .name{height:34px;font-size:16px}
  .tb{height:36px;padding:0 10px;font-size:14px}
  .tb span{display:none}
  .tb.go span{display:inline}
  .ib{width:36px;height:36px}
  .work{top:calc(50px + var(--st))}
  .modes{left:8px;top:8px}
  .modes button{height:34px;padding:0 9px;font-size:13px}
  .zoom{right:8px;top:8px}
  .zoom button{width:38px;height:38px}
  .hint{font-size:13px;bottom:8px}
  .insp h3{font-size:22px;margin-right:44px}
  .insp-x{display:block}
}
@media (orientation:portrait) and (max-width:860px){
  .work{flex-direction:column}
  .stage{order:1}
  .pal{order:2;width:auto;border-right:0;border-top:2px solid var(--ink);padding:0 var(--sr) var(--sb) var(--sl)}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px 6px;scrollbar-width:none}
  .tabs::-webkit-scrollbar,.items::-webkit-scrollbar{display:none}
  .tab{flex:none;height:30px;font-size:13px}
  .mats{padding:0 10px 6px}
  .mat{flex-direction:row;justify-content:center;padding:5px 0;font-size:12px}
  .mat i{width:16px;height:12px}
  .items{flex:none;display:flex;overflow-x:auto;overflow-y:hidden;padding:2px 10px 10px;gap:8px}
  .it{flex:none;width:76px;padding:6px 3px}
  .it canvas{width:52px;height:40px}
  .it span{font-size:12px}
  .insp{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:56vh;z-index:15;border-left:0;border-top:3px solid var(--ink);border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.45);padding:14px calc(14px + var(--sr)) calc(14px + var(--sb)) calc(14px + var(--sl));animation:up .3s var(--spring)}
}
@media (orientation:landscape) and (max-height:560px){
  .pal{width:calc(196px + var(--sl))}
  .tabs{gap:4px;padding:8px 8px 6px}
  .tab{height:26px;padding:0 8px;font-size:12px}
  .mats{gap:4px;padding:0 8px 6px}
  .mat{padding:4px 0;font-size:0;gap:0}
  .mat i{width:20px;height:13px}
  .items{grid-template-columns:repeat(2,1fr);gap:6px;padding:2px 8px calc(10px + var(--sb))}
  .it{padding:5px 3px}
  .it canvas{width:50px;height:38px}
  .it span{font-size:12px}
  .insp{position:fixed;right:0;top:calc(50px + var(--st));bottom:0;width:calc(240px + var(--sr));z-index:15;box-shadow:-10px 0 40px rgba(0,0,0,.45);animation:side .3s var(--spring)}
  .modes button span{display:none}
}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes side{from{transform:translateX(40px);opacity:0}}
.insp{position:relative}
.insp-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);font-size:22px;display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* v2: mode toggles, notes */
.modes .sep{width:2px;align-self:stretch;margin:4px 2px;background:rgba(255,255,255,.12);border-radius:2px}
.modes .tog{color:var(--mute)}
.modes .tog[aria-pressed="true"]{background:rgba(198,240,58,.18);color:var(--lime);box-shadow:inset 0 0 0 2px var(--lime)}
.modes .tog[aria-pressed="false"]{color:#FF9A9A;box-shadow:inset 0 0 0 2px rgba(255,90,90,.5)}
.modes button[data-m="box"][aria-pressed="true"]{background:var(--cy)}
.note{margin:0 0 12px;padding:8px 10px;border-radius:10px;background:rgba(255,154,31,.12);color:#FFC37A;font-weight:700;font-size:14px;line-height:1.25}
@media (max-width:860px),(max-height:560px){.modes{max-width:calc(100% - 64px);overflow-x:auto;scrollbar-width:none}.modes::-webkit-scrollbar{display:none}.modes button span{display:none}.modes button{padding:0 9px}}