/* Grafite Deck: mesmo kit visual dos overlays (parede roxa, spray lima, adesivo com sombra dura) */
:root{--pu:#5a12c9;--pu2:#3d0a8f;--li:#c8f53a;--ink:#0d0716;--paper:#f3eedf;--red:#ff2d55;
  --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)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--pu2);overscroll-behavior:none}
body{font-family:'Montserrat',sans-serif;font-weight:800;color:#fff;display:flex;flex-direction:column;height:100dvh;
  padding:calc(var(--st) + 10px) calc(var(--sr) + 14px) calc(var(--sb) + 10px) calc(var(--sl) + 14px);
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
.marker{font-family:'Permanent Marker',cursive;font-weight:400}
.wet{font-family:'Rubik Wet Paint',cursive;font-weight:400}
.ops{font-family:'Black Ops One',cursive;font-weight:400}

/* parede */
#wall{position:fixed;inset:0;z-index:0;pointer-events:none}
#wall>*{position:absolute;inset:0}
#wall .bg{background:radial-gradient(ellipse at 30% 30%,#6c1fe0 0%,var(--pu) 45%,var(--pu2) 100%)}
#wall .grain{opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
#wall .tone{inset:auto;width:260px;height:260px;background-image:radial-gradient(circle,rgba(13,7,22,.45) 2.2px,transparent 2.7px);background-size:13px 13px}
#wall .t1{right:-70px;top:12%}
#wall .t2{left:-90px;bottom:16%}
#wall svg{width:100%;height:100%;opacity:.5}
#wall svg path{fill:none;stroke:var(--li);stroke-linecap:round;stroke-linejoin:round}
#wall canvas{width:100%;height:100%;opacity:.7}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none}
.drip{position:absolute;width:7px;border-radius:0 0 6px 6px;background:var(--li);transform-origin:top;pointer-events:none}
.tp{position:absolute;width:64px;height:20px;background:rgba(236,230,212,.94);box-shadow:0 2px 3px rgba(0,0,0,.3);pointer-events:none;
  clip-path:polygon(3% 0,97% 0,100% 18%,96% 36%,100% 54%,96% 72%,100% 90%,97% 100%,3% 100%,0 82%,4% 64%,0 46%,4% 28%,0 10%)}

/* topo */
#top{position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex:none;height:52px}
.brand{font-size:42px;line-height:1;color:var(--li);text-shadow:3px 3px 0 var(--ink);letter-spacing:.02em;white-space:nowrap;transform:rotate(-3deg)}
.brand span{display:inline-block}
.conn{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--ink);border:3px solid var(--li);padding:7px 12px;font-size:12px;font-weight:900;letter-spacing:.14em;line-height:1;transform:rotate(2deg);white-space:nowrap}
.conn i{width:11px;height:11px;border-radius:50%;background:var(--li)}
body.wait .conn{border-color:var(--paper)}
body.wait .conn i{background:var(--paper);animation:blink .7s steps(1) infinite}
body.off .conn{border-color:var(--red)}
body.off .conn i{background:var(--red)}
@keyframes blink{50%{opacity:.15}}
.gear{flex:none;width:44px;height:44px;background:var(--li);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;transform:rotate(-2deg)}
.gear svg{width:26px;height:26px;fill:var(--ink)}
.gear:active{transform:translate(3px,3px) rotate(-2deg);box-shadow:1px 1px 0 var(--ink)}

/* miolo */
#main{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column;gap:14px;
  margin:6px -14px 0;padding:6px 14px 16px;transition:opacity .3s,filter .3s}
#main::-webkit-scrollbar{display:none}
body:not(.on) #main,body:not(.on) #dock{opacity:.32;filter:saturate(.4);pointer-events:none}
.side{display:flex;flex-direction:column;gap:14px}
h2{font-size:21px;line-height:1;color:var(--li);text-shadow:2px 2px 0 var(--ink);margin:0 0 9px 2px;transform:rotate(-2deg);transform-origin:left;display:inline-block}
h2::after{content:"";display:block;height:4px;margin-top:1px;background:var(--li);border-radius:3px;box-shadow:2px 2px 0 var(--ink);transform:rotate(1.2deg) scaleX(1.12);transform-origin:left}

/* botão de cena */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 13px}
.grid .key:last-child:nth-child(odd){grid-column:span 2}
.key{position:relative;min-height:84px;padding:20px 10px 12px;background:var(--ink);border:4px solid var(--li);box-shadow:6px 6px 0 rgba(13,7,22,.55);
  display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(var(--r,0deg))}
.key .nm{display:block;max-width:100%;font-size:clamp(17px,5.3vw,27px);line-height:1;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.key .no{position:absolute;left:8px;top:4px;font-size:15px;color:var(--li);opacity:.85}
.key .air{position:absolute;right:-9px;top:-11px;background:var(--red);color:#fff;border:3px solid var(--ink);font-size:10px;font-weight:900;letter-spacing:.14em;padding:4px 7px;line-height:1;transform:rotate(7deg) scale(0);display:flex;align-items:center;gap:5px}
.key .air::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.key.on .air::before{animation:blink 1s steps(1) infinite}   /* só a cena no ar pisca: o selo escondido das outras animava à toa */
.key .tp{right:-18px;bottom:-5px;transform:rotate(-34deg) scale(0)}
.key.on{background:var(--li);border-color:var(--ink);box-shadow:8px 8px 0 var(--ink);z-index:2}
.key.on .nm,.key.on .no{color:var(--ink)}
.key.on .no{opacity:1}
.key.pend{border-style:dashed}
.key .drip{top:calc(100% + 2px)}

/* som */
.rows{display:flex;flex-direction:column;gap:12px}
.au{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:center}
.mute{position:relative;height:58px;background:var(--paper);color:var(--ink);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:flex;align-items:center;gap:9px;padding:0 10px;text-align:left;transform:rotate(var(--r,0deg))}
.mute svg{flex:none;width:26px;height:26px;fill:var(--ink)}
.mute .slash{position:absolute;left:8px;top:14px;width:30px;height:30px;fill:none;stroke:var(--li);stroke-width:5;stroke-linecap:round;display:none}
.mute .tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.mute .tx b{font-size:12px;font-weight:900;line-height:1.05;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mute .tx small{font-family:'Permanent Marker';font-weight:400;font-size:13px;line-height:1;color:var(--pu)}
.mute.m{background:var(--red);color:#fff}
.mute.m svg{fill:#fff}
.mute.m .slash{display:block}
.mute.m .tx small{color:var(--li)}
.vol{position:relative;height:58px;display:flex;align-items:center}
.vol output{position:absolute;right:0;top:-3px;font-family:'Permanent Marker';font-weight:400;font-size:12px;color:var(--li);text-shadow:1px 1px 0 var(--ink)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:14px;border:3px solid var(--ink);border-radius:2px;background:linear-gradient(90deg,var(--li) var(--p,50%),#1c1030 var(--p,50%));box-shadow:3px 3px 0 var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:34px;margin-top:-13px;background:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(4deg)}
input[type=range]::-moz-range-track{height:8px;border:3px solid var(--ink);background:linear-gradient(90deg,var(--li) var(--p,50%),#1c1030 var(--p,50%))}
input[type=range]::-moz-range-thumb{width:18px;height:30px;border-radius:0;background:var(--paper);border:3px solid var(--ink)}

/* o que está na cena */
.chips{display:flex;flex-wrap:wrap;gap:10px 10px}
.chip{position:relative;background:#fff;color:var(--pu2);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:9px 12px;font-size:12px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.03em;transform:rotate(var(--r,0deg));white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip.x{background:transparent;color:var(--li);border:3px dashed var(--li);box-shadow:none;text-decoration:line-through;text-decoration-thickness:3px;opacity:.75}
.none{font-family:'Permanent Marker';font-weight:400;font-size:15px;opacity:.7}

/* rodapé: ao vivo e gravação */
#dock{position:relative;z-index:2;flex:none;transition:opacity .3s,filter .3s}
.stats{font-size:13px;line-height:1;color:var(--paper);text-shadow:1px 1px 0 var(--ink);margin:6px 2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats b{color:var(--li);font-weight:400}
.stats b.bad{color:var(--red)}
.btns{display:flex;gap:14px;align-items:stretch;padding:0 8px 8px 0}
.live{position:relative;flex:1;min-width:0;height:70px;background:var(--ink);border:4px solid var(--li);box-shadow:7px 7px 0 var(--li);overflow:hidden;touch-action:none}
.live .fill{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}
.live .lbl{position:relative;height:100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;column-gap:10px;padding:0 14px;text-align:left}
.live .lbl i{grid-row:1/3;align-self:center;width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid #fff}
.live .lbl b{font-size:clamp(17px,5.4vw,25px);line-height:1;letter-spacing:.03em;white-space:nowrap}
.live .lbl small{font-family:'Permanent Marker';font-weight:400;font-size:13px;line-height:1.2;color:var(--li)}
.live.on{background:var(--red);border-color:var(--ink);box-shadow:7px 7px 0 var(--ink)}
.live.on .fill{background:var(--ink)}
.live.on .lbl i{background:#fff;border-color:var(--ink);animation:blink 1s steps(1) infinite}
.live.on .lbl small{color:#fff}
.rec{flex:none;width:78px;background:var(--paper);color:var(--ink);border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transform:rotate(2deg)}
.rec i{width:20px;height:20px;border-radius:50%;background:var(--ink)}
.rec b{font-size:16px;line-height:1;letter-spacing:.06em}
.rec.on{background:var(--li)}
.rec.on i{background:var(--red);animation:blink 1s steps(1) infinite}

/* conexão */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(13,7,22,.72);visibility:hidden;opacity:0;
  padding:calc(var(--st) + 16px) calc(var(--sr) + 16px) calc(var(--sb) + 16px) calc(var(--sl) + 16px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.card{position:relative;width:100%;max-width:440px;margin:auto 0 0;background:var(--paper);color:var(--ink);border:5px solid var(--ink);box-shadow:9px 9px 0 var(--li);padding:22px 18px 16px;transform:rotate(-1deg)}
.card .tp.a{left:-22px;top:-6px;transform:rotate(-36deg)}
.card .tp.b{right:-20px;top:10px;transform:rotate(32deg)}
.card h3{font-size:36px;line-height:1;color:var(--pu);text-shadow:2px 2px 0 var(--li)}
.card .how{font-size:12.5px;font-weight:800;line-height:1.4;margin:10px 0 14px;color:#3a2f4d}
.card .how b{color:var(--pu);font-weight:900}
.card label{display:block;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px}
.card input{display:block;width:100%;margin-top:5px;height:46px;padding:0 12px;font:800 17px 'Montserrat',sans-serif;letter-spacing:0;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:0;outline:0;user-select:text;-webkit-user-select:text}
.card input:focus{box-shadow:4px 4px 0 var(--pu)}
.card .two{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
.card .err{min-height:20px;font-size:15px;line-height:1.25;color:var(--red);margin-bottom:10px}
.card .go{display:block;width:100%;height:56px;background:var(--li);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);font-size:24px;letter-spacing:.05em;color:var(--ink)}
.card .go:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.card .go[disabled]{opacity:.55}
.card .qr{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin-bottom:6px;background:var(--pu);color:var(--li);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);font-size:22px;letter-spacing:.05em}
.card .qr svg{width:26px;height:26px;fill:currentColor}
.card .qr:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.card .or{text-align:center;font-size:14px;color:#6b5f80;margin:8px 0 6px}

/* leitor de QR */
.scan{position:fixed;inset:0;z-index:30;background:var(--ink);visibility:hidden;opacity:0;overflow:hidden}
.scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan .aim{position:absolute;left:50%;top:46%;width:min(70vw,70vh,340px);aspect-ratio:1;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax rgba(13,7,22,.55)}
.scan .aim i{position:absolute;width:44px;height:44px;border:0 solid var(--li)}
.scan .aim i:nth-child(1){left:-4px;top:-4px;border-width:7px 0 0 7px}
.scan .aim i:nth-child(2){right:-4px;top:-4px;border-width:7px 7px 0 0}
.scan .aim i:nth-child(3){left:-4px;bottom:-4px;border-width:0 0 7px 7px}
.scan .aim i:nth-child(4){right:-4px;bottom:-4px;border-width:0 7px 7px 0}
.scan .tip{position:absolute;left:16px;right:16px;top:calc(46% + min(35vw,35vh,170px) + 22px);text-align:center;font-size:20px;color:var(--li);text-shadow:2px 2px 0 var(--ink)}
.scan .x{position:absolute;left:50%;bottom:calc(var(--sb) + 28px);transform:translateX(-50%) rotate(-2deg);height:54px;padding:0 28px;background:var(--paper);color:var(--ink);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--li);font-size:22px;letter-spacing:.05em}
.card .demo{display:block;margin:14px auto 0;font-size:15px;color:var(--pu);text-decoration:underline;text-underline-offset:3px;padding:6px}

#toast{position:fixed;z-index:40;left:50%;top:calc(var(--st) + 66px);max-width:86vw;background:var(--ink);color:var(--li);border:3px solid var(--li);box-shadow:5px 5px 0 var(--ink);padding:9px 16px;font-size:16px;line-height:1.2;text-align:center;visibility:hidden;pointer-events:none}

/* celular deitado ou tablet */
@media (min-aspect-ratio:1/1){
  #top{height:44px}
  .brand{font-size:34px}
  #main{flex-direction:row;gap:22px;overflow:hidden}
  #s-scenes{flex:1.7;min-width:0;overflow-y:auto;scrollbar-width:none;margin-left:-8px;padding:4px 10px 12px 8px}
  .side{flex:1;min-width:0;overflow-y:auto;scrollbar-width:none;padding:4px 8px 12px 4px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
  .grid .key:last-child:nth-child(odd){grid-column:auto}
  .key{min-height:62px;padding:18px 6px 8px}
  .key .nm{font-size:clamp(14px,2.3vw,24px)}
  .stats{position:absolute;right:112px;top:-8px;margin:0;display:none}
  .live{height:58px}
  .live .lbl b{font-size:clamp(17px,2.6vw,24px)}
}
@media (min-aspect-ratio:1/1) and (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}}
@media (min-aspect-ratio:1/1) and (min-height:560px){.key{min-height:104px}.stats{display:block;position:static;margin:6px 2px 9px}}