/* /oozling/<id> v2: the "live panel" mockup layout inside the site chrome. Scoped to .ozv. Uses the site's v2.css variables. */
.ozv{--pc:#0e1f1a;--pl:rgba(140,255,170,.13)}
.ozv .goo-text{background:linear-gradient(180deg,var(--goo2),var(--goo) 50%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(125,255,79,.3))}
.ozv h2,.ozv h3{font-family:var(--fd);font-weight:400;letter-spacing:.01em;line-height:1.05;margin:0}
.ozv .kicker{font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--teal);margin:0 0 .5em}
.ozv .muted{color:var(--mut)}
.ozv .box{background:var(--pc);border:1px solid var(--pl);border-radius:var(--r);padding:14px 16px}
.ozv .box b{display:block;margin-bottom:4px}.ozv .box p{margin:0;font-size:.9rem}
.ozv .btn[disabled]{opacity:.45;cursor:default}
/* header */
.ozv-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 16px}
.ozv-hd .av{width:52px;height:52px;border-radius:14px;box-shadow:0 0 0 1px var(--pl),0 0 0 3px rgba(125,255,79,.18);background:#0b0316;object-fit:cover}
.ozv-hd h1{font-size:clamp(1.9rem,4.2vw,2.6rem);margin:0;line-height:1.05}
.ozv-hd .sub{margin:3px 0 0;color:var(--mut);font-weight:600;font-size:.95rem}
.ozv-hd .sp{flex:1}
/* layout: panel + info column */
.ozv-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.ozv-app{background:radial-gradient(700px 360px at 10% -10%,rgba(125,255,79,.09),transparent 60%),linear-gradient(180deg,rgba(14,31,26,.8),rgba(5,12,10,.92));border:1px solid var(--pl);border-radius:22px;overflow:hidden;min-width:0}
.ozv-tabs{display:flex;gap:6px;padding:14px 16px 12px;border-bottom:1px solid var(--pl);overflow-x:auto;scrollbar-width:none}
.ozv-tabs::-webkit-scrollbar{display:none}
.ozv-tabs button{flex:none;font:700 .92rem var(--fb);color:var(--mut);background:rgba(255,255,255,.03);border:1px solid var(--pl);border-radius:999px;padding:.55em 1.05em;cursor:pointer;display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;min-height:40px;transition:.15s}
.ozv-tabs button:hover{color:var(--text);border-color:rgba(125,255,79,.35)}
.ozv-tabs button[aria-selected=true]{background:linear-gradient(180deg,var(--goo2),var(--goo));color:#06210c;border-color:transparent;box-shadow:0 6px 24px -8px rgba(125,255,79,.8)}
.ozv-tabs .ic{font-size:1.05em}
.ozv-panes{padding:18px;min-height:520px}
.ozv .pane[hidden]{display:none!important}
.ozv .pane{animation:ozvfade .25s}
@keyframes ozvfade{from{opacity:0;transform:translateY(4px)}}
/* tab 1: original art */
.ozv .t1{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
.ozv .art{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--pl),0 24px 60px -24px #000;aspect-ratio:1/1;background:#0b0316}
.ozv .art canvas,.ozv .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.ozv #origImg{opacity:0;transition:opacity .4s}.ozv #origImg.ok{opacity:1}
.ozv .stamp{position:absolute;top:14px;left:14px;font:800 .68rem var(--fb);letter-spacing:.14em;text-transform:uppercase;background:rgba(5,12,10,.8);border:1px solid rgba(125,255,79,.35);color:var(--goo);padding:.45em .8em;border-radius:999px}
.ozv .t1 h2{font-size:2rem;margin:.05em 0 .3em}
.ozv .t1-info>p.muted{margin:0;font-size:.95rem}
.ozv .lockline{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.ozv .chip{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.8rem;padding:.35em .75em;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--pl)}
.ozv .chip.g{color:var(--goo);border-color:rgba(125,255,79,.3)}
.ozv .traits{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ozv .traits div{background:rgba(0,0,0,.3);border:1px solid var(--pl);border-radius:12px;padding:8px 11px;min-width:0}
.ozv .traits b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.ozv .traits span{display:block;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ozv .held{margin:12px 0 0;font-size:.86rem;color:var(--mut)}.ozv .held b{color:var(--text)}
.ozv .held:empty{display:none}
/* tab 2: Ooze Card */
.ozv .t2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:18px;align-items:start}
.ozv .cardimg{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 0 0 1px var(--pl),0 20px 50px -20px #000;background:#0b0316;aspect-ratio:1200/740}
.ozv .cardimg.ready{aspect-ratio:auto}
.ozv .wg-k{margin-top:16px}
.ozv .stamps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.ozv .st{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:9px 4px 8px;border-radius:12px;background:rgba(0,0,0,.35);border:1.5px dashed rgba(255,255,255,.2);cursor:pointer;color:var(--text);font:700 .76rem/1.15 var(--fb);min-width:0}
.ozv .st .em{width:38px;height:38px;font-size:1.25rem;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.ozv .st .nm{color:var(--c,var(--text))}
.ozv .st small{display:block;color:var(--mut);font-weight:600;font-size:.66rem}
.ozv .st.never{opacity:.5}.ozv .st.never .nm{color:var(--mut)}
.ozv .st.on{border-style:solid;border-color:var(--c,var(--goo));box-shadow:0 0 0 1px var(--c,var(--goo)) inset;opacity:1}
.ozv .st .seen{position:absolute;top:4px;right:5px;font-size:.7rem}
.ozv .st .td{position:absolute;top:4px;left:5px;font:800 .52rem var(--fb);letter-spacing:.1em;text-transform:uppercase;color:#06210c;background:var(--goo);border-radius:4px;padding:2px 3px}
.ozv .wg-note{margin:8px 0 0;font-size:.78rem;color:var(--mut2)}
.ozv .t2-r{display:flex;flex-direction:column;gap:12px}
.ozv .t2-r .btn{justify-content:center;width:100%}
.ozv .wxnow{border-radius:var(--r);padding:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--wc,#7cf3ff) 14%,transparent),rgba(14,31,26,.9) 55%);border:1px solid color-mix(in srgb,var(--wc,#7cf3ff) 40%,transparent)}
.ozv .wxnow .big{font-family:var(--fd);font-size:1.7rem;line-height:1.05;margin:.1em 0 .2em;color:var(--wc,#7cf3ff)}
.ozv .wxnow .over{display:block}
.ozv .wxnow p{margin:.35em 0 0;font-size:.9rem}
.ozv .wxnow .cd{color:var(--mut2);font-size:.8rem}
.ozv .note{margin:0;font-size:.8rem;color:var(--mut)}.ozv .note:empty{display:none}.ozv .note b{color:var(--text)}
/* tab 3: Pit Kit */
.ozv .t3{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:start}
.ozv .pfpwrap{aspect-ratio:1/1;width:100%}
.ozv .pfpwrap canvas{width:100%;height:100%;border-radius:16px;display:block;transition:border-radius .3s;box-shadow:0 0 0 1px var(--pl)}
.ozv .pfpwrap.circle canvas{border-radius:50%}
.ozv .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.ozv .tog2{display:inline-flex;flex-wrap:wrap;gap:3px;background:#050c0a;border:1px solid var(--pl);border-radius:20px;padding:4px}
.ozv .tog2 button{font:700 .82rem var(--fb);color:var(--mut);background:none;border:0;border-radius:999px;padding:.45em .85em;cursor:pointer;min-height:34px}
.ozv .tog2 button.on{background:rgba(125,255,79,.16);color:var(--goo)}
.ozv .xprev{border-radius:14px;overflow:hidden;border:1px solid var(--pl);background:#000}
.ozv .xprev .bn{width:100%;height:auto;display:block}
.ozv .xprev .row{display:flex;align-items:flex-end;gap:12px;padding:0 16px 12px;margin-top:-44px;position:relative}
.ozv .xprev .row canvas{width:88px;height:88px;border-radius:50%;border:4px solid #000;flex:none;background:#000}
.ozv .xprev .row b{display:block;font-size:1.05rem}.ozv .xprev .row span{color:#71767b;font-size:.85rem}
.ozv .t3 .note{margin-top:10px}
/* tab 4: Mutation Closet */
.ozv .t4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
.ozv .pv{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--pl),0 24px 60px -24px #000;background:#000}
.ozv .pv canvas{position:absolute;inset:0;width:100%;height:100%}
.ozv .pv .tag{position:absolute;left:12px;bottom:12px;font:800 .72rem var(--fb);letter-spacing:.08em;text-transform:uppercase;padding:.45em .75em;border-radius:9px;background:rgba(5,12,10,.82);border:1.5px dashed rgba(125,255,79,.6);color:var(--goo)}
.ozv .cur{margin:0 0 10px;font-weight:700}.ozv .cur b{color:var(--goo)}
.ozv .cats{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.ozv .cats button{font:700 .85rem var(--fb);color:var(--mut);background:none;border:1px solid var(--pl);border-radius:10px;padding:.5em .85em;cursor:pointer;min-height:36px}
.ozv .cats button.on{color:var(--goo);border-color:rgba(125,255,79,.5);background:rgba(125,255,79,.08)}
.ozv .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.ozv .sk{position:relative;border-radius:13px;overflow:hidden;border:2px solid transparent;background:var(--pc);cursor:pointer;padding:0;color:var(--text);text-align:left}
.ozv .sk[hidden]{display:none}
.ozv .sk canvas{aspect-ratio:1/1;width:100%;height:auto;display:block;background:#0a1814}
.ozv .sk span{display:block;font:700 .74rem/1.2 var(--fb);padding:5px 7px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ozv .sk[aria-checked=true]{border-color:var(--goo);box-shadow:0 0 0 3px rgba(125,255,79,.2)}
.ozv .sk[aria-checked=true]::after{content:"✓";position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--goo);color:#06210c;font-weight:900;font-size:.8rem;display:grid;place-items:center}
.ozv .rules{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ozv .rules div{background:rgba(0,0,0,.3);border:1px solid var(--pl);border-radius:12px;padding:9px 11px;font-size:.8rem;color:var(--mut)}
.ozv .rules b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:3px}
/* info column (marketplace-style) */
.ozv-side{background:linear-gradient(180deg,rgba(14,31,26,.7),rgba(5,12,10,.8));border:1px solid var(--pl);border-radius:22px;padding:18px}
.ozv-side .coll{color:var(--goo);font-weight:800;font-size:.9rem;text-decoration:none}
.ozv-side h2,.ozv-side .ozv-name{font-size:1.9rem;margin:2px 0 14px}
.ozv-side .ozv-name{font-family:var(--fd);font-weight:400;line-height:1.05;letter-spacing:.01em}
.ozv-side h3{font-family:var(--fb);font-weight:800;font-size:.95rem;margin:4px 0 8px}
.ozv-side h3 small{color:var(--mut2);font-weight:600;font-size:.78rem;margin-left:4px}
.ozv .tcards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:16px}
.ozv .tc{background:var(--pc);border:1px solid var(--pl);border-radius:11px;padding:8px 10px;min-width:0}
.ozv .tc b{display:block;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2)}
.ozv .tc span{display:block;font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ozv .tc small{display:block;color:var(--mut);font-size:.74rem}
.ozv .dets{margin:0 0 16px;display:grid;gap:1px;border-radius:12px;overflow:hidden;border:1px solid var(--pl)}
.ozv .dets>div{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;background:rgba(0,0,0,.25);font-size:.88rem}
.ozv .dets>div[hidden]{display:none}
.ozv .dets dt{color:var(--mut)}.ozv .dets dd{margin:0;font-weight:700;text-align:right}
.ozv .dets a{color:var(--goo)}
.ozv .side-btns{display:grid;gap:8px}.ozv .side-btns .btn{justify-content:center}
/* responsive */
@media (max-width:1080px){
  .ozv-grid{grid-template-columns:1fr}
  .ozv-side{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
  .ozv-side>.coll,.ozv-side>h2,.ozv-side>.ozv-name{grid-column:1/-1}
  .ozv-side .tcards{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:860px){
  .ozv .t1,.ozv .t2,.ozv .t4{grid-template-columns:1fr}
  .ozv .t3{grid-template-columns:1fr}
  .ozv .pfpwrap{max-width:320px}
  .ozv-side{display:block}
  .ozv-side .tcards{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .ozv-hd{gap:10px}.ozv-hd .av{width:44px;height:44px}
  .ozv-hd .ozl-find{width:100%}.ozv-hd .ozl-find input{flex:1;width:auto}
  .ozv-tabs{padding:10px 10px 9px;gap:5px;flex-wrap:wrap;overflow:visible}
  .ozv-tabs button{font-size:.84rem;padding:.5em .85em}
  .ozv-panes{padding:12px;min-height:0}
  .ozv .stamps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ozv .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ozv .rules{grid-template-columns:1fr}
  .ozv-side{padding:14px}
}
@media (prefers-reduced-motion:reduce){.ozv .pane{animation:none}.ozv #origImg{transition:none}}