/* Shared mechanics for every prototype: comic grid, placeholders, lightbox, prototype chip. Looks live in each variant. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:12px;font:600 11px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.55);
  background-image:radial-gradient(rgba(0,0,0,.16) 1.2px,transparent 1.4px),linear-gradient(135deg,var(--a,#ffb3d9),var(--b,#9fe0ea));background-size:7px 7px,100% 100%}

.comic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(64px,8vw,92px);grid-auto-flow:dense;gap:var(--comic-gap,12px)}
.comic .panel{position:relative;overflow:hidden;padding:0;margin:0;cursor:zoom-in;display:block;width:100%;height:100%;font:inherit;color:inherit;background:#111;border:0}
.comic .panel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.comic .panel:hover img{transform:scale(1.03)}
.comic .cap{position:absolute;left:0;top:0;max-width:78%;text-align:left}
.comic .cap-br .cap{left:auto;top:auto;right:0;bottom:0}
.comic .title-panel{display:flex;flex-direction:column;justify-content:space-between;gap:10px;overflow:hidden;min-width:0}
.c2r3{grid-column:span 2;grid-row:span 3}.c4r3{grid-column:span 4;grid-row:span 3}
.c2r4{grid-column:span 2;grid-row:span 4}.c4r4{grid-column:span 4;grid-row:span 4}
.c6r4{grid-column:span 6;grid-row:span 4}
@media (max-width:700px){
  .comic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(78px,27vw,130px);gap:calc(var(--comic-gap,12px) * .8)}
  .c2r3,.c4r3,.c4r4,.c6r4{grid-column:span 2;grid-row:span 2}
  .c2r4,.c2r3{grid-column:span 1;grid-row:span 3}
  .comic .title-panel{grid-column:span 2;grid-row:span 2}
}

.lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  background:var(--lb-backdrop,rgba(10,8,20,.93));grid-template-columns:minmax(0,1fr)}
.lb *{box-sizing:border-box}
.lb-frame{justify-self:center;width:min(1100px,100%);min-width:0;max-height:100%;display:flex;flex-direction:column}
.lb-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lb-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-stage{display:grid;place-items:center;min-height:200px;touch-action:pan-y;background:#0b0a10}
.lb-stage img{max-height:calc(100dvh - 160px);width:auto;max-width:100%;object-fit:contain;display:block}
.lb-stage .ph{width:min(700px,100%);aspect-ratio:4/3;height:auto;font-size:13px}
.lb-bar{display:flex;gap:8px;align-items:center;justify-content:space-between}
.lb-cap{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb button{cursor:pointer;min-width:44px;min-height:40px}

.proto-chip{position:fixed;z-index:90;right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));
  font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;background:#111;color:#fff;padding:8px 10px;text-decoration:none;border-radius:2px;opacity:.85}
.proto-chip:hover{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}