/* Zomblocks Wiki - "quarantine terminal" theme (colours of the infection monitor) */
:root{--bg:#0b100e;--bg2:#0d1411;--panel:#121a16;--panel2:#18231e;--line:#24332c;--text:#e6efe9;--soft:#b9c9c0;--muted:#8ea197;--dim:#61766b;
--green:#5aff82;--yellow:#ffd63c;--red:#ff543c;--deep:#e11e2e;--pink:#ff5c78;--blue:#6ebeff;--purple:#c79bff;--px:"Pixelify Sans",ui-monospace,"Cascadia Mono",Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}
img.pix,.pix img{image-rendering:pixelated}
.px{font-family:var(--px)}
h1,h2,h3{font-family:var(--px);font-weight:700;letter-spacing:.01em}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid var(--line);background:#0b100ef2;backdrop-filter:blur(6px)}
.logo{display:flex;align-items:center;gap:10px;font:700 19px var(--px);color:var(--green);text-shadow:0 0 12px #5aff8255;white-space:nowrap}
.logo:hover{text-decoration:none}.logo small{color:var(--text);font:600 10px Inter,sans-serif;letter-spacing:.2em;border:1px solid var(--line);padding:2px 7px;border-radius:5px;text-shadow:none}
.search{position:relative;flex:1;max-width:480px}
.search input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 12px 8px 34px;color:var(--text);font:inherit;outline:none}
.search input:focus{border-color:#5aff8288;box-shadow:0 0 0 3px #5aff8218}
.search:before{content:"";position:absolute;left:12px;top:50%;width:11px;height:11px;margin-top:-7px;border:2px solid var(--muted);border-radius:50%}
.search:after{content:"";position:absolute;left:23px;top:50%;width:6px;height:2px;margin-top:4px;background:var(--muted);transform:rotate(45deg)}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px Inter,sans-serif;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 50px #000c;max-height:420px;overflow:auto;display:none}
.results.open{display:block}
.results a{display:flex;align-items:center;gap:10px;padding:7px 12px;color:var(--text)}.results a:hover,.results a.sel{background:var(--panel2);text-decoration:none}
.results img{width:28px;height:28px;object-fit:contain}.results span{margin-left:auto;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.results .none{padding:12px;color:var(--muted)}
.topnav{display:flex;gap:6px;margin-left:auto;align-items:center}
.topnav a{color:var(--muted);padding:6px 10px;border-radius:7px}.topnav a:hover{color:var(--text);text-decoration:none}.topnav a.on{color:var(--text);background:var(--panel2)}
.menu-btn{display:none;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 10px;font:inherit}

/* layout + sidebar */
.wrap{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 57px)}
.side{border-right:1px solid var(--line);padding:14px 10px 40px;background:var(--bg2);position:sticky;top:57px;height:calc(100vh - 57px);overflow:auto}
.side h6{margin:16px 10px 6px;color:var(--dim);font:700 10px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.side a,.side .soon{display:flex;align-items:center;gap:10px;padding:5px 10px;border-radius:7px;color:var(--soft);font-weight:500}
.side a:hover{background:var(--panel2);color:var(--text);text-decoration:none}
.side a.on{background:var(--panel2);color:var(--text);box-shadow:inset 3px 0 0 var(--green)}
.side img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;flex:none}
.side .n{margin-left:auto;color:var(--dim);font-size:11px}
.side .soon{color:var(--dim)}.side .soon img{opacity:.45;filter:grayscale(.6)}
.side .soon:after{content:"soon";margin-left:auto;font-size:9px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:0 6px}
.side .sub{margin:2px 0 4px 21px;border-left:1px solid var(--line);padding-left:6px}
.side .sub a{font-size:13px;padding:3px 10px}
.main{padding:22px 32px 60px;min-width:0;max-width:1240px}
.crumbs{color:var(--muted);font-size:12px;margin-bottom:6px}.crumbs a{color:var(--muted)}.crumbs b{color:var(--text);font-weight:600}
footer{border-top:1px solid var(--line);margin-top:50px;padding-top:16px;color:var(--dim);font-size:12px;display:flex;gap:14px;flex-wrap:wrap}

/* common blocks */
.sec{margin-top:32px}.sec>h2{display:flex;align-items:center;gap:10px;font-size:21px;margin:0 0 12px}
.sec>h2:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:14px}
.box>h3{margin:0 0 10px;font-size:17px;display:flex;align-items:center;gap:8px}
.box p{margin:6px 0;color:var(--soft)}
.chip{display:inline-flex;align-items:center;gap:5px;font:700 11px Inter,sans-serif;letter-spacing:.06em;padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.chip.boss{color:var(--purple);border-color:#c79bff66;background:#c79bff14}.chip.red{color:var(--red);border-color:#ff543c66;background:#ff543c12}
.chip.green{color:var(--green);border-color:#5aff8266;background:#5aff8210}.chip.yellow{color:var(--yellow);border-color:#ffd63c66;background:#ffd63c10}
.chip.grey{color:var(--muted);border-color:var(--line);background:var(--panel2)}
.skulls{display:inline-flex;gap:3px;vertical-align:middle}.skulls i{width:11px;height:11px;border-radius:50%;background:#3a1d18;border:1px solid #5a2a22}.skulls i.on{background:var(--red);border-color:var(--red);box-shadow:0 0 6px #ff543c88}
.stripe{height:6px;background:repeating-linear-gradient(-45deg,#ffd63c 0 10px,#1a1a0a 10px 20px);opacity:.7;border-radius:3px}
.tip{border:1px solid #ffd63c55;background:linear-gradient(90deg,#ffd63c14,transparent);border-radius:12px;padding:12px 16px;margin-top:14px;color:var(--soft)}
.tip b{color:var(--yellow);font:700 13px var(--px);display:block;margin-bottom:2px;letter-spacing:.04em}
.tip ul{margin:4px 0 0;padding-left:18px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.card{position:relative;display:block;color:var(--text);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:12px;overflow:hidden;transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-2px);border-color:#5aff8277;text-decoration:none}
.card .pic{height:132px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse at 50% 88%,#5aff8222,transparent 65%)}
.card .pic img{max-height:126px;max-width:100%;filter:drop-shadow(0 8px 10px #000a)}
.card h3{margin:10px 0 2px;font-size:15px}.card p{margin:0;color:var(--muted);font-size:12px}
.card .count{position:absolute;top:10px;right:10px;font:600 11px Inter,sans-serif;color:var(--muted);background:#0b120f;border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.card.soon{opacity:.55}.card.soon:after{content:"coming soon";position:absolute;top:10px;left:10px;font:700 9px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);border:1px solid #ffd63c55;border-radius:999px;padding:1px 7px;background:#0b120f}
.card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:4px;color:var(--muted);font-size:12px}

/* home */
.hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:10px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at 75% 60%,#2a1f3e 0,#0e1713 58%),#0e1713;min-height:360px}
.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 4px);pointer-events:none}
.hero .txt{padding:34px;position:relative;z-index:1}
.tag{display:inline-flex;align-items:center;gap:6px;font:700 11px Inter,sans-serif;letter-spacing:.14em;color:var(--yellow);border:1px solid #ffd63c55;background:#ffd63c12;padding:4px 10px;border-radius:999px}
.hero h1{font-size:46px;line-height:1.02;margin:14px 0 10px;text-shadow:0 0 30px #5aff8233}.hero h1 span{color:var(--green)}
.hero p{color:var(--soft);max-width:480px;font-size:15px}
.stats{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.stat{background:#0b120fcc;border:1px solid var(--line);border-radius:10px;padding:8px 13px}
.stat b{display:block;font:700 22px var(--px);color:var(--green);line-height:1.2}.stat span{color:var(--muted);font-size:12px}
.hero .art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px 10px 12px}
.hero .art .bar{max-width:92%;margin-bottom:6px;filter:drop-shadow(0 0 10px #c79bff55)}
.hero .art .who{position:relative;display:block}.hero .art .who img{height:300px;filter:drop-shadow(0 18px 30px #000c)}
.hero .art .name{font:700 13px var(--px);color:var(--purple);letter-spacing:.08em;margin-bottom:4px}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.guide{display:block;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--panel);color:var(--text)}.guide b{font:700 15px var(--px);display:block;margin:6px 0 4px}.guide p{margin:0;color:var(--muted);font-size:13px}
.guide .step{font:700 11px Inter,sans-serif;color:var(--green);letter-spacing:.12em}
.bossrow{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.bossrow a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:center;padding:8px 4px;color:var(--text)}
.bossrow a:hover{border-color:#c79bff88;text-decoration:none}
.bossrow img{height:96px;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px #000a)}.bossrow b{display:block;font:600 12px Inter,sans-serif;margin-top:4px}

/* list pages */
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.pagehead h1{font-size:36px;margin:0}.pagehead p{margin:4px 0 0;color:var(--soft);max-width:760px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0}
.filters input{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 11px;color:var(--text);font:inherit;min-width:220px;outline:none}
.filters button{background:var(--panel);border:1px solid var(--line);color:var(--soft);border-radius:999px;padding:5px 12px;font:600 12px Inter,sans-serif;cursor:pointer}
.filters button.on{background:var(--green);border-color:var(--green);color:#06210f}
.filters select{background:var(--panel);border:1px solid var(--line);color:var(--soft);border-radius:8px;padding:6px 9px;font:inherit}
.filters .lbl{color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-left:6px}
.empty{color:var(--muted);padding:20px 0}

/* entry page */
.entry{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;margin-top:6px}
.title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.title h1{font-size:40px;margin:0;line-height:1.1}
.lead{font-size:16px;color:#c6d4cc;max-width:760px;margin:12px 0 0}
.attack{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.attack:first-of-type{border-top:0}.attack b{font:700 14px var(--px)}.attack p{margin:0;color:var(--soft);font-size:13px}
.dmg{font:700 12px Inter,sans-serif;color:var(--red);background:#ff543c14;border:1px solid #ff543c44;border-radius:7px;padding:3px 8px;white-space:nowrap}
.dmg.info{color:var(--blue);background:#6ebeff12;border-color:#6ebeff44}
.phase{border-left:3px solid var(--purple);padding:4px 0 4px 12px;margin:10px 0}.phase b{font:700 14px var(--px);color:var(--purple)}.phase p{margin:2px 0 0}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.mini a{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:10px;text-align:center;padding:8px 4px;color:var(--text)}
.mini a:hover{border-color:#5aff8277;text-decoration:none}.mini img{height:84px;max-width:100%;object-fit:contain}.mini b{display:block;font-size:12px;font-weight:600}
.loot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lootcol h4{margin:0 0 8px;font:700 11px Inter,sans-serif;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.item{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px 10px;margin-bottom:6px}
.item img{width:32px;height:32px;image-rendering:pixelated;flex:none}.item span{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.variants{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.variants figure{margin:0;background:radial-gradient(ellipse at 50% 85%,#5aff821c,transparent 65%),var(--panel2);border:1px solid var(--line);border-radius:10px;text-align:center;padding:10px;cursor:pointer}
.variants figure.on{border-color:var(--green)}.variants img{height:170px;max-width:100%;object-fit:contain}
.variants figcaption{color:var(--muted);font-size:12px;margin-top:4px}
.bossbar{display:flex;justify-content:center;padding:12px;background:#0a0f0d;border:1px solid var(--line);border-radius:10px}.bossbar img{max-width:100%;max-height:120px}

/* infobox + 3D viewer */
.info{position:sticky;top:72px;align-self:start;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.viewer{position:relative;height:380px;background:radial-gradient(ellipse at 50% 78%,#24402e,#0e1310 72%);cursor:grab;touch-action:none}
.viewer.boss{background:radial-gradient(ellipse at 50% 78%,#33264a,#0e1310 72%)}
.viewer canvas{display:block;width:100%;height:100%}
.viewer .still{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;pointer-events:none}
.viewer .still img{max-height:330px;max-width:90%;filter:drop-shadow(0 14px 24px #000c)}
.viewer.live .still{display:none}
.viewer .badge{position:absolute;top:10px;left:10px;font:700 11px Inter,sans-serif;color:var(--green);background:#0b0f0ccc;border:1px solid #5aff8255;border-radius:999px;padding:3px 9px;z-index:2}
.viewer.boss .badge{color:var(--purple);border-color:#c79bff55}
.viewer .hint{position:absolute;top:10px;right:10px;color:var(--muted);font-size:11px;z-index:2}
.anims{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.anims button{font:600 12px Inter,sans-serif;color:var(--soft);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.anims button.on{color:#06210f;background:var(--green);border-color:var(--green)}
.rows{padding:6px 16px 14px}.rows div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}.rows div:last-child{border:0}
.rows span{color:var(--muted)}.rows b{font-weight:600;text-align:right}
.findh{margin:14px 0 8px;font:700 11px Inter,sans-serif;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.findh:first-child{margin-top:0}.findh small{text-transform:none;letter-spacing:0;font-weight:500}
.item b{font-weight:600}.item p{color:var(--soft);font-size:13px}
.soonpage{max-width:720px}.soonpage ul{color:var(--soft)}

/* phones */
@media (max-width:1100px){.entry{grid-template-columns:1fr}.info{position:static}.bossrow{grid-template-columns:repeat(4,1fr)}.hero{grid-template-columns:1fr}.hero .art .who img{height:240px}}
@media (max-width:820px){.wrap{grid-template-columns:1fr}.side{display:none;position:fixed;top:57px;left:0;right:0;bottom:0;height:auto;z-index:30}.side.open{display:block}
.menu-btn{display:block}.topnav a{display:none}.main{padding:16px 16px 50px}.guides{grid-template-columns:1fr}.hero h1{font-size:34px}.hero .txt{padding:22px}
.logo .full{display:none}.attack{grid-template-columns:1fr auto}.attack p{grid-column:1/-1;grid-row:2}.loot{grid-template-columns:1fr}.variants img{height:120px}.bossrow{grid-template-columns:repeat(2,1fr)}}

/* brand: the Zomblocks logos (header, home) and the Olivares Studios logo (home, footer); black + red, so a light halo on the dark theme */
.brand-icon{display:none;width:34px;height:34px;border-radius:7px;flex:none}
.brand-word{height:40px;width:auto;display:block;filter:drop-shadow(0 0 10px #5aff8233)}
.hero-logo{display:block;width:100%;max-width:440px;height:auto;margin:-6px 0 10px;filter:drop-shadow(0 6px 18px #000a)}
.by{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:13px;margin-bottom:14px}.by b{color:var(--text)}
.by img,.studio img{height:28px;width:auto;filter:drop-shadow(0 0 1px #fff9) drop-shadow(0 0 6px #ffffff40)}
footer .studio{display:inline-flex;align-items:center;gap:7px;color:var(--soft);font-weight:600}footer .studio:hover{text-decoration:none;color:var(--text)}
footer .studio img{height:22px}
@media (max-width:820px){.brand-icon{display:block}.hero-logo{max-width:320px}}
/* Project Zomblocks (15/10/2026): edition tag, wide renders, galleries, option rows */
.logo small.edition{color:var(--red);border-color:#ff5a5a66;background:#ff5a5a14}
.kicker{display:inline-block;font:700 13px Inter,sans-serif;letter-spacing:.32em;color:var(--red);margin:0 0 6px 4px}
.photo{margin:14px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{padding:8px 12px;color:var(--muted);font-size:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.gallery .photo{margin:0}
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.bcard{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.bcard img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;background:#07110b}
.bcard div{padding:10px 12px}.bcard h3{margin:0 0 4px;font-size:15px}.bcard p{margin:0;color:var(--muted);font-size:12px}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px}
.opt{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.opt img{width:56px;height:56px;flex:none;image-rendering:pixelated;border-radius:6px;background:#0b120f}
.opt b{display:block;font-size:13px}.opt p{margin:2px 0 0;color:var(--muted);font-size:12px}.opt .cost{color:var(--yellow);font-size:12px;margin-top:3px}
.up{color:var(--green)}.down{color:var(--red)}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.swatches span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--soft);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 9px 2px 3px}
.swatches i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid #0006}
.mcards .card .pic{height:150px}.mcards .card .pic img{max-height:146px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
.statgrid div{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px}.statgrid b{display:block;font:700 18px var(--px);color:var(--text)}.statgrid span{color:var(--muted);font-size:12px}
@media (max-width:700px){.gallery,.bcards,.opts{grid-template-columns:1fr}}
.cycle>[data-frame]{display:none}.cycle>[data-frame].on{display:block;animation:cyclein .35s ease}
@keyframes cyclein{from{opacity:.25}to{opacity:1}}
.cycle-name{text-align:center;color:var(--soft);font-size:12px;margin-top:6px;min-height:16px}
.paintbox{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:center}
.paintbox .cycle{text-align:center}.paintbox .cycle img{max-width:240px;max-height:260px;margin:0 auto}
@media (max-width:700px){.paintbox{grid-template-columns:1fr}}
.gunpaint{background:radial-gradient(ellipse at 50% 60%,#ffffff22,transparent 72%),#2a3531}.gunpaint img{max-width:600px;width:100%;margin:0 auto}
.studio-top{display:flex;align-items:center;flex:none;margin-left:10px;padding:2px;border-radius:8px}.studio-top img{height:34px;width:auto;display:block}.studio-top:hover{background:var(--panel2)}
/* phones (15/10, iPhone): the text column may shrink below its longest line; long item rows wrap */
@media (max-width:1100px){.entry{grid-template-columns:minmax(0,1fr)}.entry>div,.entry>aside{min-width:0}}
@media (max-width:700px){.item{flex-wrap:wrap}.item span{white-space:normal}.studio-top img{height:28px!important}.top{gap:10px;padding:10px 12px}}