/* Pagine statiche del Cyber//Codex (carte, 404): stesso aspetto del Codex, senza JavaScript.
   Generato in dist/pagine.css da scripts/build.mjs. */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{--bg:#07090c;--tile:#0e141b;--surface:#0d1116;--hline:rgba(255,255,255,.10);--rowhover:rgba(255,255,255,.045);--ink:#e9eff3;--dim:#7d8896;--line:rgba(255,255,255,.12);--accent:#e7ecef;--rush:#ff7a45;--warn:#ffb13b;
  --fdisp:'Chakra Petch',system-ui,sans-serif;--fmono:'JetBrains Mono',ui-monospace,monospace}
/* versione chiara (Signal, come nel Codex): solo se scelta nel menu */
:root[data-theme=catalogo]{--bg:#f2f3f5;--tile:#e4e7eb;--surface:#fafbfc;--hline:rgba(13,17,22,.12);--rowhover:rgba(13,17,22,.045);--ink:#0d1116;--dim:#5b6470;--line:rgba(13,17,22,.14);--accent:#0d1116;--rush:#c2410c;--warn:#9a5a00}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--fmono);font-size:14px;line-height:1.6;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
/* Testata come quella del Codex: celle separate da linee sottili, menu ad hamburger, logo */
.top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"menu brand act";gap:1px;background:linear-gradient(var(--hline),var(--hline)),var(--bg);padding-bottom:1px;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.top.hid{transform:translateY(-100%)}
.top .cell{background:var(--bg);display:flex;align-items:center;min-width:0;height:64px}
.top .menu{grid-area:menu;justify-content:center;padding:0 14px;cursor:pointer}
/* come nel Codex: tutta la cella apre il menu, il bordo del pulsante non cambia al passaggio del mouse */
.burger{width:34px;height:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.5px;border:1px solid var(--hline);border-radius:2px}
.burger span{width:12px;height:1.5px;background:var(--ink)}
.top .brand{grid-area:brand;gap:12px;padding:0 clamp(14px,2vw,22px)}
.logo{font-family:var(--fdisp);font-weight:900;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em;text-transform:uppercase;line-height:1;white-space:nowrap;position:relative;top:.07em;color:var(--ink)}
.logo span{color:var(--accent);letter-spacing:-.2em;margin-right:.2em}
.logo:hover{text-decoration:none}
.view{font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;position:relative;top:1px}
.top .act{grid-area:act;padding:0 clamp(14px,2vw,22px)}
/* passaggio del mouse leggerissimo, come nel Codex */
@media (hover:hover){.top .menu,.langs a,.langs button{transition:background-color .15s ease,border-color .15s ease}.top .menu:hover{background:color-mix(in srgb,var(--ink) 6%,var(--bg))}.langs a:not([aria-current]):hover,.langs button:not([aria-pressed=true]):hover{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}}
/* Menu laterale (senza JavaScript: casella nascosta + etichette) */
.menu-state{position:fixed;top:15px;left:14px;width:34px;height:34px;margin:0;opacity:0;pointer-events:none;z-index:31}
.menu-state:focus-visible + .top .burger{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.scrim{position:fixed;inset:0;z-index:60;background:rgba(4,6,10,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:61;width:min(340px,88vw);background:var(--surface);border-right:1px solid var(--hline);display:flex;flex-direction:column;gap:28px;padding:14px 20px 28px;overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .34s cubic-bezier(.16,1,.3,1),visibility .34s}
.menu-state:checked ~ .scrim{opacity:1;visibility:visible}
.menu-state:checked ~ .drawer{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between}
.drawer-head span{font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
.close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hline);border-radius:2px;font-size:18px;cursor:pointer}
.drawer nav{display:flex;flex-direction:column;gap:22px}
.group{display:flex;flex-direction:column}
.glabel{font-size:9px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;padding:0 0 8px 44px}
.group a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 10px;border-top:1px solid var(--hline);color:color-mix(in oklab,var(--ink) 72%,var(--dim))}
.group a:hover{background:var(--rowhover);text-decoration:none;color:var(--ink)}
.group a[aria-current]{background:var(--rowhover);box-shadow:inset 3px 0 0 var(--accent);color:var(--accent)}
.group .num{width:22px;flex:none;font-size:10px;letter-spacing:.08em;color:var(--dim)}
.group .lab{flex:1;min-width:0;font-family:var(--fdisp);font-weight:700;font-size:17px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.group .mark{width:7px;height:7px;flex:none}
.group a[aria-current] .mark{background:var(--accent)}
/* lingua: come il selettore del tema nel Codex */
.langs{display:flex;flex-direction:column;gap:10px}
.langs>span{font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.langs>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.langs a,.langs button{display:flex;align-items:center;justify-content:center;height:40px;padding:6px 11px;box-sizing:border-box;border:1px solid var(--line);border-radius:2px;color:var(--ink);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:all .18s ease}
.langs a:hover{text-decoration:none}
.langs button{font:inherit;background:none;cursor:pointer}
.themes{display:none}
:root[data-js] .themes{display:flex}
.langs a[aria-current],.langs button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700;pointer-events:none}
.crumbs{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap;padding-top:16px;padding-bottom:0}
.crumbs a{color:var(--ink)}
.open{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:9px 14px;border-radius:2px;white-space:nowrap}
.open .short{display:none}
.open:hover{border-color:var(--accent);text-decoration:none}
.hero{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,4vw,48px) 0;align-items:start}
.hero figure{margin:0}
.face{border-radius:2.2%/1.5%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.art{border:1px solid var(--line);border-radius:2px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
h1{margin:.3em 0 0;font-family:var(--fdisp);font-weight:700;font-size:clamp(30px,4.4vw,48px);line-height:1;text-transform:uppercase;letter-spacing:-.005em}
.names{margin:.7em 0 0;color:var(--dim);font-size:13px}
.names b{color:var(--ink);font-weight:400;opacity:.8}
/* in breve: riassunto in frasi della carta (scripts/pages/sintesi.mjs) */
.summary{margin:18px 0 0;max-width:68ch;font-size:14px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.sources{margin:28px 0 0;font-family:var(--fmono);font-size:11px;line-height:1.55;letter-spacing:.02em;color:var(--dim);max-width:90ch}
h2{font-family:var(--fdisp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.01em;margin:0;padding:0 0 12px;border-bottom:1px solid var(--line)}
section{padding:clamp(24px,3vw,36px) 0}
.lbl{font-family:var(--fmono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400;margin:0;padding:0;border:0}
/* Pagina carta: testata come la scheda del Codex (immagine | identità, ATK/DEF, dati, uscite e testi in accordion, nota d'archivio) */
.info{display:flex;flex-direction:column;gap:16px;min-width:0}
.info .names{display:flex;flex-direction:column;gap:6px;margin:0;color:var(--ink);font-size:inherit}
.info h1{margin:0;line-height:.98;letter-spacing:-.01em;font-size:clamp(30px,4vw,44px)}
.info .other{font-size:12px;letter-spacing:.04em;opacity:.7}
.info .jp{font-size:14px;letter-spacing:.05em;color:var(--dim)}
.info .off{font-size:10px;letter-spacing:.08em;color:var(--dim)}
.info .summary{margin:0}
.atkdef{display:flex;gap:10px;flex-wrap:wrap;padding:4px 0}
.atkdef div{flex:1;min-width:110px;border:1px solid var(--line);border-radius:2px;padding:8px 14px}
.atkdef span{display:block;font-size:10px;letter-spacing:.16em;color:var(--dim)}
.atkdef b{display:block;font-family:var(--fdisp);font-weight:700;font-size:26px;line-height:1.3}
.atkdef .atk{color:var(--accent)}
.facts{display:flex;flex-wrap:wrap;gap:18px 26px;margin:0;font-size:12px}
.facts dt{color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.facts dd{margin:3px 0 0}
.facts .yes{color:var(--accent)}
.facts .dim{color:var(--dim)}
.accb .facts dt{font-size:10.5px}
.acc{border:1px solid var(--line);border-radius:2px}
.acc details + details{border-top:1px solid var(--line)}
.acc summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 18px;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';margin-left:auto;font-size:14px;line-height:1;color:var(--dim)}
.acc details[open] > summary::after{content:'\2212';color:var(--ink)}
@media (hover:hover){.acc summary:hover .lbl{color:var(--ink)}}
.acc .peek{font-size:11px;letter-spacing:.04em;opacity:.85}
.accb{display:flex;flex-direction:column;gap:12px;padding:0 18px 16px}
.otag{font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:2px;border:1px solid var(--accent);color:var(--accent)}
.otag.warn{border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn)}
.ctext{margin:0;padding:0 18px 16px;font-size:13px;line-height:1.5;opacity:.78;text-wrap:pretty}
.ctext.main{font-size:14px;opacity:1}
/* uscite per regione: regione | data | set, quella della pagina in evidenza */
.rel{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);gap:5px 14px;align-items:baseline;margin:0;font-size:12px}
.rel div{display:contents}
.rel dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.rel dd{margin:0}
.rel .d{white-space:nowrap;font-variant-numeric:tabular-nums}
.rel .s{min-width:0;overflow-wrap:break-word;opacity:.82}
.rel .on dt{color:var(--ink);font-weight:700}
.rel .on .d{color:var(--accent);font-weight:700}
.rel .on .s{opacity:1}
.rel .none dd{color:var(--dim)}
.rel .code{white-space:nowrap}
.anote p{margin:6px 0 0;font-size:13px;line-height:1.55;text-wrap:pretty}
.awm{margin-top:12px;padding-left:12px;border-left:1px dashed var(--line)}
.awm div{font-size:10.5px;line-height:1.5;letter-spacing:.03em;color:var(--dim)}
.awm p{margin:3px 0 0;font-size:12.5px;opacity:.85}
/* immagine: Artwork / Carta / Rush senza script (radio nascoste); un clic apre lo zoom (zoom.js?v=eb43cca63c) */
.pic{position:relative;margin:0}
.pic figure{margin:0}
.vh{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pic:not(.one) .pf{display:none}
.f-art:checked ~ .pf-art,.f-card:checked ~ .pf-card,.f-rush:checked ~ .pf-rush{display:block}
.pic .pf img{background:var(--tile)}
.pic.zoomable .pf img{cursor:zoom-in}
.ftog{display:flex;justify-content:center;gap:2px;margin:14px auto 0;width:max-content;padding:3px;border:1px solid var(--line);border-radius:2px}
.ftog label{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:2px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:background .18s ease,color .18s ease}
.f-art:checked ~ .ftog .l-art,.f-card:checked ~ .ftog .l-card,.f-rush:checked ~ .ftog .l-rush{background:var(--accent);color:var(--bg);font-weight:700}
.f-art:focus-visible ~ .ftog .l-art,.f-card:focus-visible ~ .ftog .l-card,.f-rush:focus-visible ~ .ftog .l-rush{outline:2px solid var(--accent);outline-offset:2px}
/* layer zoom, come nel Codex: sfondo scuro sfocato, immagine al centro, selettore e chiusura in alto a destra */
/* resta scuro anche in Signal: dentro il layer valgono i colori di Core (come [data-dark-layer] nel Codex) */
.zl{--bg:#07090c;--tile:#0e1116;--surface:#0d1116;--ink:#e9eff3;--dim:#77808c;--line:rgba(255,255,255,.10);--accent:#e7ecef;--rush:#ff7a45;color-scheme:dark}
.zl{position:fixed;inset:0;z-index:95;background:rgba(2,3,5,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;cursor:zoom-in;animation:zl-in .2s ease}
.zl.big{cursor:grab}
@keyframes zl-in{from{opacity:0}to{opacity:1}}
.zl > img{max-width:92vw;max-height:86vh;width:auto;height:auto;object-fit:contain;transform-origin:center center;will-change:transform;pointer-events:none;box-shadow:0 20px 80px -20px rgba(0,0,0,.9)}
.zl > img.face{border-radius:2.2%/1.5%}
/* zoom a strati (artwork + carta + cornice Rush): gli stili degli strati li dà squareLayers di wall-carte.js */
.zsq{position:relative;width:min(92vw,86vh);aspect-ratio:1/1;overflow:hidden;transform-origin:center center;will-change:transform;pointer-events:none}
.zflip{position:absolute;inset:0}
.zsq img{display:block;background-size:100% 100%;user-select:none}
.zbar{position:fixed;top:14px;right:14px;z-index:2;display:flex;gap:8px;align-items:center}
.ztog{display:flex;gap:2px;padding:3px;height:38px;box-sizing:border-box;background:rgba(12,15,20,.7);border:1px solid rgba(255,255,255,.24);border-radius:2px}
.ztog button{display:inline-flex;align-items:center;padding:0 10px;border:0;border-radius:2px;background:transparent;color:var(--ink);font:500 10px/1 var(--fmono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,color .18s ease}
.ztog button[aria-pressed=true]{background:var(--accent);color:var(--bg);font-weight:700}
.zx{cursor:pointer;background:rgba(12,15,20,.7);border:1px solid rgba(255,255,255,.24);color:var(--ink);width:38px;height:38px;border-radius:2px;font:16px/1 var(--fmono)}
@media (hover:hover){.ztog button:not([aria-pressed=true]):hover{background:rgba(255,255,255,.08)}.zx:hover{border-color:var(--accent)}}
/* capitoli (versioni, artwork, Evoluzione, Apparizioni, Zane, dati d'archivio) */
.chap h2{margin-bottom:16px}
.chap h3{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:400;margin:0}
.chap-lead{margin:0;font-size:12px;line-height:1.45;color:var(--dim)}
.chap-go{margin:16px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.chap-go a{color:var(--dim);border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent);padding-bottom:2px}
.chap-go a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--ink)}
.vgrid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.vgrid > .vbody:first-child{grid-column:1/-1}
.vbody{display:flex;flex-direction:column;gap:16px;max-width:720px;min-width:0}
.egroup{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.erow{display:flex;flex-direction:column;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.emeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.emeta .g{color:var(--dim)}
.emeta .m{font-weight:700}
.emeta .flag{border:1px solid var(--line);padding:1px 6px;border-radius:2px;color:var(--dim)}
.emeta .note{text-transform:none;letter-spacing:.02em;color:var(--dim);font-size:11px}
.eflow{display:flex;align-items:flex-start;gap:14px}
.eitems{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.eout{flex:1;display:flex;align-items:flex-start;gap:10px;min-width:220px}
.eline{flex:1;height:1px;margin-top:38px;background:var(--line);min-width:16px}
.arr{margin-top:28px;color:var(--dim)}
.et{display:flex;flex-direction:column;gap:6px;width:64px;flex:none}
.et .nm{font-size:8.5px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);overflow-wrap:anywhere}
a.et:hover{text-decoration:none}
a.et:hover .nm{color:var(--ink)}
.th{position:relative;display:block;width:64px;height:64px;overflow:hidden;background:var(--tile);border:1px solid var(--line);border-radius:2px}
.th img{width:100%;height:100%;object-fit:cover}
.th i{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:9px;font-weight:700;padding:1px 4px;background:color-mix(in srgb,var(--bg) 85%,transparent);border-radius:2px}
.th.self{border:1.5px solid var(--accent)}
.th.via{border:1.5px dashed var(--accent);border-radius:50%}
a.et:hover .th{border-color:var(--accent)}
.slot{display:flex;align-items:center;justify-content:center;text-align:center;width:64px;height:64px;padding:4px;border:1px dashed var(--dim);border-radius:2px;font-size:8.5px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);position:relative}
.slot i{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:9px;font-weight:700;color:var(--ink)}
.sep{height:64px;display:flex;align-items:center;font-size:13px;color:var(--dim)}
.sep.word{font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:0 2px}
.sep.acc{color:var(--accent)}
.eres{display:flex;align-items:flex-start;gap:10px;min-width:0}
.eres .th{width:77px;height:77px;border-color:var(--accent);flex:none}
.eres .th.self{border-width:2px;box-shadow:0 0 18px -6px var(--accent)}
.eres .rn{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:4px}
.eres b{font-family:var(--fdisp);font-weight:700;font-size:13px;line-height:1.1;text-transform:uppercase}
.eres small{font-size:10px;letter-spacing:.1em;color:var(--dim)}
a.eres:hover{text-decoration:none}
a.eres:hover b{text-decoration:underline;text-underline-offset:3px}
.asub{display:flex;flex-direction:column;gap:12px}
.asub > .lbl{display:flex;justify-content:space-between;gap:12px}
.asub > .lbl span{color:var(--ink);letter-spacing:.1em}
.agroup{display:flex;flex-direction:column;gap:10px}
.atiles{display:flex;flex-wrap:wrap;gap:12px 10px}
.tag{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:1px 6px;border-radius:2px;color:var(--dim);vertical-align:middle;margin-left:6px}
.tag.rush{color:var(--rush);border-color:color-mix(in srgb,var(--rush) 55%,transparent)}
.arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(18px,2.4vw,28px);margin-top:20px}
.arts figure{margin:0;display:flex;flex-direction:column;gap:10px}
.arts figcaption{font-size:12px;color:var(--dim)}
.arts figcaption b{display:block;color:var(--ink);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.duels{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.duels li{background:var(--bg);padding:12px 14px;display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:4px 16px;align-items:baseline}
.duels .ep{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.duels .res{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.duels small{grid-column:2/-1;color:var(--dim);font-size:12px}
.intro{padding:clamp(24px,3vw,40px) 0 8px;max-width:820px}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.jump a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:7px 12px;border-radius:2px}
.jump span{color:var(--dim);margin-left:4px}
h2 small{font-family:var(--fmono);font-weight:400;font-size:11px;letter-spacing:.1em;color:var(--dim);margin-left:8px;text-transform:uppercase}
h2 a{color:inherit}
section h3{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:400;margin:20px 0 10px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:20px 14px;margin-top:16px}
.tile{display:flex;flex-direction:column;gap:6px;min-width:0}
.tile:hover{text-decoration:none}
.tile:hover b{text-decoration:underline;text-underline-offset:3px}
.tile img.face{aspect-ratio:1394/2031;object-fit:cover}
.tile img.art{aspect-ratio:1/1;object-fit:cover}
.tile .noimg{display:block;aspect-ratio:1/1;background:var(--tile);border:1px solid var(--line)}
.tile b{font-family:var(--fdisp);font-weight:700;font-size:13px;line-height:1.15;text-transform:uppercase}
.tile span{font-size:12px;letter-spacing:.04em;color:var(--dim)}
.set{padding:clamp(18px,2.4vw,28px) 0}
.set p{margin:14px 0 0;font-size:12px}
.decklist{columns:3 220px;column-gap:28px;margin:16px 0 0;padding-left:1.6em;font-size:13px}
.decklist li{break-inside:avoid;padding:2px 0}
.decklist a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.duels.big li{display:block}
.dh{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.dh .res{margin-left:auto}
.duels.big p{margin:8px 0 0;font-size:13px;color:var(--dim)}
.duels.big p.cards{color:var(--ink)}
.duels .tag{margin-left:4px}
.dim{color:var(--dim)}
section > p.text{margin:14px 0 0;color:var(--dim)}
.notes{margin:14px 0 0;padding-left:1.2em;color:var(--dim);font-size:12px;max-width:80ch}
footer{font-size:12px;color:var(--dim);padding:28px 0 40px;line-height:1.7}
/* 404 (scripts/build.mjs): un terreno con Cyber Dragon e Cyber End Dragon e, fra loro, la zona vuota della pagina che manca */
.nf{min-height:calc(100vh - 220px);display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(32px,5vw,64px) 0}
.field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,16px);padding:clamp(10px,1.6vw,18px);border:1px solid var(--hline);border-radius:2px;
  background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--ink) 5%,transparent),transparent 70%)}
.zone{position:relative;aspect-ratio:1394/2031;container-type:inline-size}
.zone .face{width:100%;height:100%;opacity:.55;filter:saturate(.6) drop-shadow(0 10px 18px rgba(0,0,0,.55));transition:opacity .3s ease,filter .3s ease}
.field:hover .zone .face{opacity:.8;filter:saturate(.85) drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.void{border-radius:2.2%/1.5%;background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 3.5%,transparent) 0 1px,transparent 1px 3px),var(--surface);overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent),0 0 0 4px var(--bg),0 0 0 5px var(--hline)}
/* angoli di mira, come una zona del terreno */
.void::before{content:"";position:absolute;inset:7%;--c:color-mix(in srgb,var(--ink) 55%,transparent);
  background:linear-gradient(var(--c),var(--c)) 0 0/14% 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 10%,linear-gradient(var(--c),var(--c)) 100% 0/14% 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 10%,
             linear-gradient(var(--c),var(--c)) 0 100%/14% 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 10%,linear-gradient(var(--c),var(--c)) 100% 100%/14% 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 10%;background-repeat:no-repeat}
/* linea di scansione che percorre la zona vuota */
.void::after{content:"";position:absolute;left:0;right:0;top:-20%;height:20%;background:linear-gradient(transparent,color-mix(in srgb,var(--ink) 10%,transparent) 85%,color-mix(in srgb,var(--ink) 30%,transparent));animation:nf-scan 3.6s cubic-bezier(.45,0,.55,1) infinite}
.ghost{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqi;text-align:center}
.ghost .code,.ghost .stat{font-size:max(8px,6.4cqi);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
.ghost b{position:relative;font-family:var(--fdisp);font-weight:700;font-size:34cqi;line-height:.9;letter-spacing:-.02em;color:var(--ink)}
.ghost b::before,.ghost b::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.ghost b::before{color:var(--rush);mix-blend-mode:screen;animation:nf-glitch 2.8s steps(1) infinite}
.ghost b::after{color:#5ad1ff;mix-blend-mode:screen;animation:nf-glitch 2.8s steps(1) infinite reverse}
.field:hover .ghost b::before,.field:hover .ghost b::after{animation-duration:.9s}
/* sul chiaro i due colori del disturbo si sommano al contrario */
:root[data-theme=catalogo] .ghost b::before,:root[data-theme=catalogo] .ghost b::after{mix-blend-mode:multiply}
:root[data-theme=catalogo] .ghost b::after{color:#0a8fd1}
:root[data-theme=catalogo] .zone .face{opacity:.75}
@keyframes nf-scan{0%{top:-20%}70%,100%{top:110%}}
@keyframes nf-glitch{0%,62%,100%{clip-path:inset(0 0 100% 0);transform:none}
  64%{clip-path:inset(12% 0 58% 0);transform:translateX(-6%)}68%{clip-path:inset(55% 0 20% 0);transform:translateX(5%)}
  72%{clip-path:inset(30% 0 45% 0);transform:translateX(-3%)}76%{clip-path:inset(80% 0 4% 0);transform:translateX(7%)}80%{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion:reduce){.void::after,.ghost b::before,.ghost b::after{animation:none;display:none}}
.nf-text h1{font-size:clamp(34px,5.4vw,64px)}
/* il testo come il riquadro dell'effetto di una carta */
.fx{margin:22px 0 0;max-width:52ch;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:2px;background:var(--surface);font-size:13px;line-height:1.65;text-wrap:pretty}
.fx span{display:block;margin-bottom:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.go{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
@media (max-width:860px){.nf{grid-template-columns:1fr;min-height:0}.field{max-width:520px;width:100%;margin:0 auto}}
@media (max-width:760px){
  .top .cell{height:auto;min-height:48px}
  .top .menu,.top .brand{min-height:64px}
  .view{display:none}
  .top .act{padding:0 10px}
  .open .long{display:none}
  .open .short{display:inline}
  .hero{grid-template-columns:1fr}
  .hero > figure,.hero .pic,.vgrid .pic{max-width:360px;margin:0 auto;width:100%}
  .vgrid{grid-template-columns:1fr}
  .rel{grid-template-columns:max-content minmax(0,1fr);gap:2px 14px}
  .rel .s{grid-column:2;margin-bottom:6px}
  .eflow{flex-direction:column;gap:10px}
  .eout{min-width:0}
  .eline{display:none}
  .arr{margin-top:28px}
  .duels li{grid-template-columns:1fr auto}
  .duels .ep{grid-column:1/-1}
}
/* About (scripts/pages/about.mjs): testo del progetto, carte negli anni, nota legale */
.about .lede{margin:18px 0 0;max-width:62ch;font-size:15px;line-height:1.7;text-wrap:pretty}
.about .lede:first-of-type{font-size:17px}
.icons{list-style:none;margin:22px 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:28px 18px}
.icons a{display:flex;flex-direction:column;gap:6px;min-width:0}
.icons a:hover{text-decoration:none}
.icons a:hover b{text-decoration:underline;text-underline-offset:3px}
.icons .yr{font-family:var(--fdisp);font-weight:700;font-size:22px;line-height:1;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.icons img{aspect-ratio:1394/2031;object-fit:cover}
.icons b{font-family:var(--fdisp);font-weight:700;font-size:13px;line-height:1.15;text-transform:uppercase;margin-top:4px}
.icons .why{font-size:12px;line-height:1.5;color:var(--ink);opacity:.85}
.icons .from{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.contact p{margin:16px 0 0;font-size:clamp(17px,2vw,22px);font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.contact a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.contact a:hover{color:var(--accent)}
.legal p{max-width:72ch;margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--dim)}
.legal p:first-of-type{color:var(--ink)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.credits dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 18px;align-items:baseline;max-width:80ch;margin:16px 0 0;font-size:13px;line-height:1.6}
.credits dl div{display:contents}
.credits dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.credits dd{margin:0;color:color-mix(in oklab,var(--ink) 85%,var(--dim))}
.credits a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.credits .sign{margin:26px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.credits .sign b{color:var(--ink)}
@media (max-width:560px){.credits dl{grid-template-columns:1fr;gap:2px 0}.credits dd{margin-bottom:10px}}
footer a{color:var(--ink);white-space:nowrap}
.privacy section{padding:clamp(18px,2.4vw,28px) 0 0}
.privacy p{max-width:72ch;margin:12px 0 0;line-height:1.7}
.privacy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.privacy .upd{margin-top:36px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@media (max-width:560px){.icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}}
/* Lab · Homebrew: il Wall del Codex in piccolo (scripts/pages/lab-wall.js). Riquadri con gli stessi stili in linea del
   Wall di index.html (wcards); senza script una griglia semplice. Se cambia il Wall del Codex, va riallineato. */
.hbw{--tl:color-mix(in srgb,var(--ink) 16%,transparent);position:relative;margin:24px 0 72px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
@media (min-width:721px){.hbw{--cl-name:11.5px;--cl-jp:8px}}
/* come il Wall del Codex (wallStyle): durante il passaggio Artwork ↔ Cards gli strati escono dal riquadro; il Wall li
   ritaglia appena fuori dal bordo, altrimenti allargano la pagina (scorrimento orizzontale sui telefoni) */
.hbw-live .hbw{display:block;min-height:340px;overflow:clip;overflow-clip-margin:24px}
@media (max-width:719px){.hbw-live .hbw{overflow-clip-margin:10px}}
.wt{position:relative;display:block;aspect-ratio:1/1;color:inherit;cursor:pointer;box-sizing:border-box}
.hbw-live .wt{position:absolute;top:0;left:0;aspect-ratio:auto;opacity:0;will-change:transform}
.wt:hover{text-decoration:none}
.wt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wt-box{position:absolute;inset:0;background:var(--tile);border:1px solid var(--tl);border-radius:2px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
/* nessun contorno al passaggio del mouse sui riquadri (scelta dell'utente, a differenza del Wall del Codex) */
.wt-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.wt-deco .dots{position:absolute;inset:0;background-image:radial-gradient(var(--tl) .8px,transparent .8px);background-size:14px 14px;opacity:.34}
.wt-deco .dia{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1/1;opacity:.82}
.wt-deco .dia span{position:absolute}
.wt-deco .dia span:first-child{inset:0;border:1px solid var(--tl);transform:rotate(45deg)}
.wt-deco .dia span:last-child{inset:24%;border:1px solid var(--accent);opacity:.45;border-radius:2px}
.wt-deco .c1,.wt-deco .c2{position:absolute;width:.85em;height:.85em;opacity:.5}
.wt-deco .c1{top:.7em;left:.7em;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.wt-deco .c2{bottom:.7em;right:.7em;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
.wt-face{position:absolute;display:none;max-width:none}
.wt-skel{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--tile) 30%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,var(--tile) 70%);background-size:220% 100%;animation:hbw-shimmer 1.25s linear infinite}
@keyframes hbw-shimmer{0%{background-position:160% 0}100%{background-position:-160% 0}}
.wt-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:1;transition:opacity .4s ease,filter .3s ease}
/* didascalie sull'artwork: colori fissi chiari in ogni tema, come nel Codex */
.wt-label{position:absolute;inset:0;z-index:2;pointer-events:none}
.wt .grad{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(to top,rgba(0,0,0,.82) 8%,rgba(0,0,0,.34) 48%,transparent 100%)}
.wt .cap{position:absolute;left:10px;right:10px;bottom:9px}
.wt .nm{display:block;font-family:var(--fdisp);font-weight:800;font-size:var(--cl-name,13px);line-height:1.04;color:#fff;text-transform:uppercase;letter-spacing:.005em;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.wt .jp{display:block;font-size:var(--cl-jp,9px);color:rgba(255,255,255,.72);margin-top:3px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.wt .icon{display:none;position:absolute;bottom:9px;right:10px;align-items:center;font-size:8px;letter-spacing:.16em;color:var(--bg);background:var(--accent);padding:3px 6px;border-radius:2px;font-family:var(--fmono);font-weight:700}
/* Ordina: riga con le linguette come quella della Tabella del Codex (tableTabs) */
.hbw-sort{display:flex;align-items:stretch;margin:22px 0 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.hbw-sort::-webkit-scrollbar{display:none}
.hbw-sort button{flex:none}
.hbw-sort .hbw-lbl{flex:none;align-self:center;padding:0 10px 0 0}
.hbw-sort button{display:inline-flex;align-items:center;padding:15px 14px 13px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--dim);font-family:var(--fmono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;cursor:pointer;white-space:nowrap;transition:color .18s ease,border-color .18s ease}
.hbw-sort button[aria-pressed=true]{border-bottom-color:var(--accent);color:var(--ink);font-weight:700}
@media (hover:hover){.hbw-sort button[aria-pressed=false]:hover{color:var(--ink)}}
:root:not(.hbw-live) .hbw-sort{display:none}
@media (max-width:719px){.hbw-sort button{padding:14px 8px 12px;letter-spacing:.06em}.hbw-sort .hbw-lbl{display:inline;padding-right:4px;letter-spacing:.14em}}
/* testata come quella del Wall: Misura (− colonne +) e Info · Artwork · Cards */
.top.hbw-top{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"menu brand dim face"}
.top .hbw-dim{grid-area:dim;gap:14px;padding:0 10px 0 18px}
.hbw-lbl{font-family:var(--fmono);font-size:9px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
.hbw-step{display:flex;align-items:stretch;height:40px;margin-left:auto}
.hbw-step button{width:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--ink);font-family:var(--fmono);font-size:17px;line-height:1;padding:0;cursor:pointer}
.hbw-step button:disabled{opacity:.28;cursor:default}
.hbw-cols{display:flex;align-items:center;gap:9px;padding:0 6px}
.hbw-cols .bars{display:flex;gap:2px;width:30px;height:14px;align-items:stretch}
.hbw-cols .bars span{flex:1;background:var(--accent);opacity:.75;border-radius:1px}
.hbw-cols b{font-family:var(--fmono);font-size:12px;font-weight:700;color:var(--ink);min-width:1.2em;text-align:center}
.top .hbw-face{grid-area:face;align-items:stretch;gap:2px;padding:0 clamp(14px,2vw,22px);user-select:none}
.hbw-face button{display:inline-flex;align-items:center;justify-content:center;padding:2px 12px 0;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--dim);font-family:var(--fmono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;cursor:pointer;white-space:nowrap;transition:color .18s ease,border-color .18s ease}
.hbw-face button[aria-selected=true]{border-bottom-color:var(--accent);color:var(--ink);font-weight:700}
@media (hover:hover){.hbw-face button[aria-selected=false]:hover{color:var(--ink)}}
:root:not(.hbw-live) .hbw-dim,:root:not(.hbw-live) .hbw-face{visibility:hidden}
@media (max-width:719px){
  .top.hbw-top{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"menu brand brand brand" "dim dim face face"}  /* come il Wall del Codex: la Misura prende due colonne, l'hamburger resta stretto */
  .top .hbw-dim{height:48px;padding:0 4px;gap:10px}
  .hbw-lbl{display:none}
  .hbw-step button{width:32px}
  .top .hbw-face{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:48px;padding:0}
  .hbw-face button{padding:2px 4px 0;letter-spacing:.06em}
}
/* Scheda della carta homebrew: copia della scheda del Codex (index.html, «Scheda della carta»: stessi valori degli
   stili in linea), senza le parti che le homebrew non hanno. Se cambia quella, va riallineata questa. */
.hbs{--tl:color-mix(in srgb,var(--ink) 16%,transparent);display:none;position:fixed;inset:0;z-index:80;background:rgba(4,6,10,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);align-items:center;justify-content:center;padding:clamp(14px,4vw,40px);animation:hbs-fade .22s ease}
.hbs.on,:root:not([data-js]) .hbs:target{display:flex}
/* nel Codex la scheda è sempre lunga (90vh) e parte al 5% dall'alto; qui le schede sono più corte e centrate
   scenderebbero, con la ✕: partono dallo stesso punto */
.hbs{align-items:flex-start;padding-top:5vh}
.hbs-open{overflow:hidden}
@keyframes hbs-fade{from{opacity:0}to{opacity:1}}
.hbs-panel{position:relative;width:100%;max-width:1000px;max-height:90vh;overflow-y:auto;overflow-x:hidden;background:var(--surface);border:1px solid var(--line);border-radius:2px;overscroll-behavior:contain}
.hbs-closebar{position:sticky;top:0;height:0;z-index:7;display:flex;justify-content:flex-end}
.hbs-x{flex:none;margin:16px 16px 0 0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink);border-radius:2px;font-size:15px;line-height:1;font-family:var(--fmono);box-shadow:0 2px 10px color-mix(in srgb,var(--bg) 35%,transparent)}
.hbs-x:hover{text-decoration:none;background:var(--surface);border-color:var(--accent)}
.hbs-head{display:grid;grid-template-columns:min(480px,49%) minmax(0,1fr);align-items:start}
.hbs-left{display:flex;flex-direction:column;min-width:0}
/* quadrato a strati: senza wall-carte.js (o senza script) l'artwork pieno, o la carta dentro il quadrato */
.hbs-img.pic{position:relative;aspect-ratio:1/1;background:var(--tile);overflow:hidden;min-height:240px;cursor:zoom-in}
.hbs-dots{position:absolute;inset:0;background-image:radial-gradient(var(--tl) 1px,transparent 1px);background-size:20px 20px;opacity:.4}
.hbs-img .pf{display:contents}
.hbs-img img{position:absolute;max-width:none;background:none;user-select:none;-webkit-user-select:none}
.hbs-img .hl-face{z-index:1;background-size:100% 100%}
.hbs-img .hl-art{z-index:2;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover}
.hbs-img:not([data-mode=wc]) .hl-face{top:5%;height:90%;left:50%;width:auto;aspect-ratio:1394/2031;transform:translateX(-50%)}
.hbs-img[data-mode=card] .hl-art{display:none}
.hbs-img[data-mode=art] .hl-face{opacity:0}
.hbs-ftog{position:absolute;bottom:12px;left:12px;z-index:4;display:flex;gap:2px;padding:3px;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--tl);border-radius:2px;cursor:default}
.hbs-ftog button{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;min-height:26px;padding:0 calc(10px - .12em) 0 10px;border:none;border-radius:2px;cursor:pointer;background:transparent;color:var(--ink);font-family:var(--fmono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;transition:background .18s ease,color .18s ease}
.hbs-ftog button[aria-selected=true]{background:var(--accent);color:var(--bg);font-weight:700}
@media (hover:hover){.hbs-ftog button[aria-selected=false]:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}}
:root:not([data-js]) .hbs-ftog{display:none}
.hbs-zi{position:absolute;bottom:12px;right:12px;z-index:3;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--tl);border-radius:2px;color:var(--ink);font-size:13px;line-height:1;opacity:.8;pointer-events:none}
.hbs-side{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.hbs-sidelbl{font-family:var(--fmono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.hbs-others{display:flex;flex-wrap:wrap;gap:10px}
.hbs-other{display:flex;flex-direction:column;gap:6px;width:80px;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.hbs-other[hidden]{display:none}
.hbs-other .th{position:relative;display:block;width:80px;height:80px;overflow:hidden;background:var(--tile);border:1px solid var(--tl);border-radius:2px;transition:border-color .15s ease}
.hbs-other:hover .th,.hbs-other:focus-visible .th{border-color:var(--accent)}
.hbs-other img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hbs-other .nm{font-family:var(--fmono);font-size:10px;line-height:1.3}
.hbs-info{min-width:0;padding:30px 34px;display:flex;flex-direction:column;gap:16px}
.hbs-pophead{padding-right:44px;font-family:var(--fmono);font-size:11px;line-height:1.35;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.hbs-names{display:flex;flex-direction:column;gap:6px}
.hbs-names h2{margin:0;padding:0;border:0;font-family:var(--fdisp);font-weight:900;font-size:clamp(28px,8.7vw,34px);line-height:.98;color:var(--ink);text-transform:uppercase;letter-spacing:-.01em}
.hbs-en{font-family:var(--fmono);font-size:12px;color:var(--ink);opacity:.7;letter-spacing:.04em}
.hbs-jp{font-size:14px;color:var(--dim);letter-spacing:.05em}
/* firma: nello stile della riga "Nome ufficiale attuale" della scheda del Codex */
.hbs-by{font-family:var(--fmono);font-size:10px;letter-spacing:.08em;color:var(--dim)}
.hbs-stats{display:flex;gap:10px;flex-wrap:wrap;padding:4px 0}
.hbs-stats > div{flex:1;min-width:110px;border:1px solid var(--line);border-radius:2px;padding:8px 14px}
.hbs-stats .k{font-family:var(--fmono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.hbs-stats .v{font-family:var(--fdisp);font-weight:800;font-size:26px;line-height:1.3;color:var(--ink)}
.hbs-stats .v.atk{color:var(--accent)}
.hbs-facts{display:flex;gap:18px 26px;flex-wrap:wrap;font-family:var(--fmono);font-size:12px}
.hbs-facts span{color:var(--dim);letter-spacing:.12em}
.hbs-facts div div{color:var(--ink);margin-top:3px}
.hbs-box{border:1px solid var(--line);border-radius:2px}
.hbs-acc > summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 18px;cursor:pointer}
.hbs-acc > summary::-webkit-details-marker{display:none}
.hbs-acc > summary::after{content:'+';margin-left:auto;font-family:var(--fmono);font-size:14px;line-height:1;color:var(--dim)}
.hbs-acc[open] > summary::after{content:'\2212';color:var(--ink)}
@media (hover:hover){.hbs-acc > summary:hover::after{color:var(--ink)}}
.hbs .lbl{font-family:var(--fmono);font-size:9px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.hbs-acc .tag{font-family:var(--fmono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:2px;border:1px solid var(--accent);color:var(--accent)}
.hbs-acc .txt .sub{display:block;margin:2px 0 4px;font-family:var(--fmono);font-size:9px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.hbs-acc .txt .sub:not(:first-child){margin-top:12px}
.hbs-acc .txt{padding:0 18px 16px;font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-line;text-wrap:pretty}
/* il testo nell'altra lingua, chiuso sotto il primo: più piccolo e attenuato come nella scheda del Codex */
.hbs-acc + .hbs-acc{border-top:1px solid var(--line)}
.hbs-acc.alt .txt{font-size:13px;opacity:.78}
.hbs-note p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink);text-wrap:pretty}
@media (max-width:720px){
  .hbs-head{grid-template-columns:minmax(0,1fr)}
  .hbs-x{margin:4px 8px 0 0;width:40px;height:40px;font-size:16px}
  .hbs-pophead{padding-right:0}
  .hbs-img.pic{aspect-ratio:1/1;height:auto;width:100%}
  .hbs-side{padding-left:16px;padding-right:16px}
  .hbs-side:last-child{padding-bottom:4px}
  .hbs-info{padding:20px 16px 28px}
}