/* ── CardForge shared styles: tokens, themes, card, topbar ─────────
   Single source of truth for both pages (editor + viewer).          */

:root{
  --font-ui:'Inter',system-ui,sans-serif;
  --font-display:'Manrope','Inter',sans-serif;
  --notch:8px;            /* standard chamfer for controls/cards   */
  --notch-lg:16px;        /* large chamfer for panels/modal        */
  --tbh:52px;             /* live topbar height, kept fresh by JS  */
  --tier-select:#9ba8b9;--tier-deluxe:#4aa8ff;--tier-premium:#b44bf0;
  --tier-ultra:#ff5d7b;--tier-exclusive:#ffc45e;
  /* chrome palette — fixed, independent of the card themes, so the
     surrounding app stays quiet and the card keeps the spotlight */
  --c-bg:#0B0F14;         /* app backdrop                          */
  --c-surface:#10161D;    /* topbar                                */
  --c-surface2:#151C24;   /* modal panels, chips, picker items     */
  --c-line:#222C37;       /* chrome hairlines                      */
  --c-line-soft:#1A222C;  /* quieter hairlines                     */
  --c-ink:#D9DCE0;        /* chrome text (dimmer than card ink)    */
  --c-mut:#8A95A1;        /* chrome secondary text                 */
  --c-accent:#FF4655;     /* reserved: one primary action + active */
  --c-accent-btn:#D62839;   /* darker fill so white 11px text passes AA (4.97:1) */
  --c-veil:rgba(6,9,13,.78);
}
:root,[data-theme=protocol]{--bg:#0F1923;--card1:#1F2731;--card2:#16202B;--frame:#0B121B;--panel:#1F2731;--box:#2A3540;--box-hi:#48515B;--line:#2E3A46;--ink:#ECE8E1;--mut:#8A99A9;--accent:#FF4655;--gold:#F2C14E;--red:#FF4655;--warn:#FF7A85;
--sheen:rgba(255,255,255,.09);--sheen-soft:rgba(255,255,255,.06);--tint:rgba(255,255,255,.02);--raise:rgba(255,255,255,.05);--stripe:rgba(255,255,255,.015);--veil:rgba(4,8,14,.72);--accent-dash:rgba(255,70,85,.3)}
[data-theme=holo]{--bg:#04101A;--card1:#0A1E30;--card2:#061523;--frame:#02090F;--panel:#0A1E30;--box:#0F2C44;--box-hi:#314A5E;--line:#164059;--ink:#DFF6FF;--mut:#7E9CB2;--accent:#46F6FF;--gold:#F2C14E;--red:#FF4655;--accent-dash:rgba(70,246,255,.3)}
[data-theme=reaver]{--bg:#0D0A14;--card1:#180F2A;--card2:#120B1F;--frame:#080512;--panel:#180F2A;--box:#241740;--box-hi:#43375B;--line:#37255C;--ink:#EFE9FF;--mut:#9D92BA;--accent:#B44BFF;--gold:#59E3B8;--red:#FF4655;--accent-dash:rgba(180,75,255,.3)}
[data-theme=oni]{--bg:#120B0B;--card1:#201114;--card2:#180D10;--frame:#0B0607;--panel:#201114;--box:#31191E;--box-hi:#4E393D;--line:#4A2A2C;--ink:#F5E9DC;--mut:#AF9889;--accent:#FF5540;--gold:#E8B14E;--red:#FF5540;--accent-dash:rgba(255,85,64,.3)}
[data-theme=arctic]{--bg:#171310;--card1:#221B15;--card2:#1A1511;--frame:#0E0B08;--panel:#221B15;--box:#2E261E;--box-hi:#4A4033;--line:#3A3128;--ink:#F2EEE6;--mut:#A79B8B;--accent:#D8434E;--gold:#D9B45B;--red:#E4626E;--warn:#FF8B94;
--sheen:rgba(255,255,255,.07);--sheen-soft:rgba(255,255,255,.05);--tint:rgba(255,255,255,.02);--raise:rgba(255,255,255,.045);--stripe:rgba(255,255,255,.015);--veil:rgba(10,8,6,.72);--accent-dash:rgba(216,67,78,.3)}
[data-theme=standard]{--bg:#141719;--card1:#1F2427;--card2:#181D20;--frame:#0D1012;--panel:#1F2427;--box:#2A3135;--box-hi:#475055;--line:#353E43;--ink:#EEF0EF;--mut:#96A0A4;--accent:#AFC2CE;--gold:#D9C07A;--red:#E4626E;--warn:#FF8B94;
--sheen:rgba(255,255,255,.07);--sheen-soft:rgba(255,255,255,.05);--tint:rgba(255,255,255,.02);--raise:rgba(255,255,255,.045);--stripe:rgba(255,255,255,.015);--veil:rgba(8,10,11,.72);--accent-dash:rgba(175,194,206,.3)}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
::selection{background:var(--c-accent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-line)}
::-webkit-scrollbar-thumb:hover{background:var(--c-accent)}

/* keyboard focus ring drawn inside the box so clip-path can't cut it */
:focus{outline:none}
:focus-visible{box-shadow:inset 0 0 0 2px var(--c-accent)!important}
[data-theme=arctic] :focus-visible{box-shadow:inset 0 0 0 2px var(--red)!important}

html{background:var(--c-bg)}
body{font-family:var(--font-ui);color:var(--c-ink)}

/* ── topbar ────────────────────────────────────────────────────── */
#topbar{position:fixed;top:0;left:0;right:0;min-height:52px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;row-gap:6px;padding:6px 14px;background:var(--c-surface);border-bottom:1px solid var(--c-line);z-index:20;gap:10px}
.tb-left,.tb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px}
.logo{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.10125em;color:var(--c-ink)}
.logo::before{content:"";display:inline-block;width:9px;height:15px;background:var(--c-accent);transform:skewX(-20deg);margin-right:9px;vertical-align:-2px}
#topbar button{background:transparent;border:1px solid var(--c-line-soft);color:var(--c-mut);padding:8px 16px;font:600 11px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
#topbar button:hover{border-color:var(--c-mut);color:var(--c-ink);background:color-mix(in srgb,#fff 4%,transparent)}
#topbar button:disabled{opacity:.5;cursor:default}
#topbar button.primary{background:var(--c-accent-btn);border-color:var(--c-accent-btn);color:#fff}
#topbar button.primary:hover{color:#fff;filter:brightness(1.12)}
#topbar button.accent{border-color:var(--c-line-soft);color:var(--c-mut)}
#topbar button.accent:hover{border-color:var(--c-accent);color:var(--c-accent);background:transparent}
#topbar a.tb-link{background:transparent;border:1px solid var(--c-line-soft);color:var(--c-mut);padding:8px 16px;font:600 11px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block}
#topbar a.tb-link:hover{border-color:var(--c-mut);color:var(--c-ink);background:color-mix(in srgb,#fff 4%,transparent)}
#status{position:fixed;left:50%;transform:translateX(-50%);bottom:46px;z-index:90; /* CF-08: above #modal/#importModal (z 50) so picker toasts are visible */
max-width:min(560px,calc(100vw - 24px));white-space:normal;overflow:visible;text-overflow:clip;
background:var(--c-surface2);border:1px solid var(--c-line);border-left:3px solid var(--c-mut);
color:var(--c-ink);font-size:12.5px;letter-spacing:.04em;line-height:1.45;padding:9px 14px;
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
@media (prefers-reduced-motion:no-preference){#status{transition:opacity .45s ease,visibility 0s 0s}#status.fade{transition:opacity .45s ease,visibility 0s .45s}}
#status::before{content:"// ";color:var(--c-mut)}
#status[data-kind=ok]{border-left-color:#3DD68C}
#status[data-kind=ok]::before{content:"✓ ";color:#3DD68C}
#status[data-kind=err]{border-left-color:#FF6B77}
#status[data-kind=err]::before{content:"✕ ";color:#FF6B77}
#status.fade{opacity:0;visibility:hidden;pointer-events:none}

/* ── stage + card ──────────────────────────────────────────────── */
/* vignette lives on the stage: every top-level element is fixed, so the
   body has zero height and can't be relied on to paint the canvas */
#stage{position:fixed;inset:var(--tbh) 0 0 0;display:flex;overflow:auto;
background:radial-gradient(1200px 680px at 50% 42%,#131B24,var(--c-bg) 72%)}
#stage.pan #sizer{margin:14px auto 24px}
#sizer{margin:auto;position:relative;flex:none}
#card{width:1920px;height:1080px;position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden;padding:24px 34px 28px;color:var(--ink);background:linear-gradient(180deg,var(--card1),var(--card2));border:1px solid var(--line);font-family:'Chakra Petch',sans-serif;
clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px))}
#card::before{content:"";position:absolute;top:8px;left:8px;width:20px;height:20px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
#card::after{content:"";position:absolute;bottom:8px;right:8px;width:20px;height:20px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}

body.exporting{overflow:visible}
body.exporting #topbar,body.exporting #chrome,body.exporting .tierbar,body.exporting #disclaimer,body.exporting #buildstamp{display:none}
body.exporting #stage{position:static;overflow:visible;display:block}
body.exporting #sizer{width:auto!important;height:auto!important;margin:0}
body.exporting #card{position:relative;transform:none!important}

/* editor-only chrome must never reach the exported PNG.
   visibility (not display) so the grid geometry the slots were measured
   against survives the capture — the PNG matches the preview. */
body.exporting .auto,body.exporting .pickrank,body.exporting .add{visibility:hidden}
body.exporting .hint{visibility:hidden}
body.exporting .more-note{display:none}
body.exporting .rm{display:none}

/* WYSIWYG capture: the exported PNG is the live 1920×1080 card, never a re-layout.
   The QR band (captureCardBlob) grows the card box below the crop; the grid is
   pinned to its live height there so these rows keep their exact pixel values.
   Plan 006 removed the old `exporting-full` unfold, which re-sized every row to
   content and produced a second, different layout. */

[contenteditable]{outline:none;border-bottom:1px dashed var(--accent-dash,rgba(255,70,85,.3))}
[contenteditable]:hover{border-bottom-color:var(--accent);cursor:text}

/* ── card identity + currency bits (live in footer boxes) ───────── */
.code{font-family:Anton,sans-serif;font-size:52px;letter-spacing:.18em;line-height:1}
.vlogin{font:600 16px 'Chakra Petch',sans-serif;letter-spacing:.14em;color:var(--mut);max-width:230px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.cur{display:flex;gap:7px;align-items:center;font-size:16px;font-weight:600}
.ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font:700 13px 'Chakra Petch',sans-serif;font-style:normal;border:1px solid var(--mut);color:var(--mut)}
.lvl{letter-spacing:.22em;color:var(--mut);font-weight:600;font-size:14px;white-space:nowrap}
.lvl b{color:var(--ink);letter-spacing:.14em;margin-left:5px}

/* ── skin grid ─────────────────────────────────────────────────── */
.grid{display:grid;gap:10px;height:100%;grid-template-columns:218px 270px 1fr 310px 325px 118px;
grid-template-rows:1fr 1fr 1fr 1.1fr .6fr 1.35fr;
grid-template-areas:
"side smg  rifles sniper mg    flex"
"side smg  rifles sniper mg    flex"
"side shot rifles sniper mg    flex"
"side shot rifles melee melee  melee"
"side shot rifles melee melee  melee"
"code stats stats  rank  pcard pcard"}
.panel{overflow:hidden;display:flex;flex-direction:column}
.panel h3{text-align:center;letter-spacing:.4em;font-size:15px;color:var(--mut);font-weight:600;margin:0 0 6px;text-transform:uppercase}
.panel h3::before{content:"";display:inline-block;width:7px;height:10px;background:var(--accent);transform:skewX(-20deg);margin-right:9px}
.slots{display:flex;flex-direction:column;height:100%;gap:6px;flex:1;min-height:0;overflow:hidden}
.panel[data-cat="Melees"] .slots{flex-direction:row}
.panel[data-cat="Melees"] .skin,.panel[data-cat="Melees"] .slotbox.empty{width:auto;min-width:64px}
.slots.melee-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:74px;gap:6px}
.slots.melee-grid .skin,.slots.melee-grid .slotbox.empty{width:auto;min-width:0}
.skin{position:relative;flex:1 1 0;min-height:64px;width:100%;overflow:hidden;border:1px solid var(--line);
background:
radial-gradient(120% 100% at 50% 0%,var(--sheen),transparent 60%),
linear-gradient(180deg,var(--box-hi),var(--box));
box-shadow:inset 0 0 0 1px var(--raise);
clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)))}
.skin img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:2px 8px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.skin .lv{position:absolute;right:3px;bottom:3px;z-index:2;background:var(--c-accent-btn);color:#fff;font:700 12px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;padding:2px 5px;pointer-events:none}
.rm{position:absolute;top:3px;right:3px;width:18px;height:18px;background:var(--red);color:#fff;border:none;font:700 11px/1 'Chakra Petch',sans-serif;cursor:pointer;display:none;z-index:2}
.skin:hover .rm{display:block}
@media (hover:none){.skin .rm{display:block}}
.cicon{position:relative;display:block}
.cicon .rm{display:block}
.slotbox{position:relative;border:1px solid var(--line);overflow:hidden;
background:radial-gradient(120% 100% at 50% 0%,var(--sheen-soft),transparent 60%),var(--box)}
.slotbox.empty{flex:1 1 0;min-height:64px;border-style:dashed;background:var(--tint);display:flex;align-items:center;justify-content:center}
.add{margin-top:6px;width:100%;background:var(--tint);border:1px solid var(--line);color:var(--mut);padding:6px;font:700 14px 'Chakra Petch',sans-serif;letter-spacing:.2em;cursor:pointer;text-transform:uppercase;
clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.add:hover{color:var(--accent);border-color:var(--accent)}
.charms-box,.flex-add{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-content:start;padding:6px;flex:1;min-height:0;overflow:hidden}
.charms-box img,.flex-add img{width:100%;height:52px;object-fit:contain}
.hint{color:var(--mut);font-size:13px;font-weight:600;letter-spacing:.25em;text-align:center;text-transform:uppercase;grid-column:1/-1;align-self:center}

/* buddies & flex strip (right edge, template-style) */
.flexcol h3{font-size:10.8px;letter-spacing:.11em;margin-bottom:4px;white-space:nowrap}
.flexcol .charms-box,.flexcol .flex-add{grid-template-columns:repeat(2,1fr)}
.flexcol .charms-box img,.flexcol .flex-add img{height:40px}
/* The Flex panel stacks two boxes instead of skin slots: same 6px gap the other
   panels use, and the now-empty .slots is dropped so the boxes fill the column
   to the same bottom line as the + ADD (0) buttons beside them. */
.panel[data-cat="Flex"]{gap:6px}
.panel[data-cat="Flex"]:has(.flex-add) .slots{display:none}
.flexcol .add{padding:4px;font-size:12px;letter-spacing:.1em}

/* ── footer boxes (grid row 6, template-style) ──────────────────── */
.boxf{background:var(--panel);border:1px solid var(--line);padding:12px 14px;overflow:hidden;
clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)))}
.codebox{grid-area:code;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.stats{grid-area:stats;display:flex;flex-direction:column;justify-content:space-between}
.counts{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:6px}
.stat{text-align:center;position:relative}
.stat label{display:block;color:var(--mut);font-size:14px;letter-spacing:.16em}
.stat.limited label{color:var(--gold)}
.stat b{font-family:Anton,sans-serif;font-size:26px;letter-spacing:.08em;font-weight:400}
.auto{position:absolute;right:-16px;bottom:2px;background:none;border:none;color:var(--mut);font:600 13px 'Chakra Petch',sans-serif;cursor:pointer;letter-spacing:.1em}
.auto:hover{color:var(--accent)}
.inforow{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:6px 2px;font-size:15px;letter-spacing:.05em}
.inforow span+span{border-left:1px solid var(--line);padding-left:10px}
.inforow .warn{color:var(--warn,var(--red))}
.inforow .padcell{border-left:0;padding-left:0}
.rankbox{grid-area:rank;display:flex;flex-direction:column;justify-content:space-between}
.rankcols{display:flex;gap:10px}
.rankrow{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:14px}
.rankrow label{color:var(--mut);letter-spacing:.2em;font-size:14px}
.rankrow b{letter-spacing:.06em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankbadge{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));flex:none}
.rankbadge:not([src]){display:none}
.currow{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;align-items:center;border-top:1px solid var(--line);padding-top:8px}
.pcardbox{grid-area:pcard;display:flex;flex-direction:column;gap:6px}
.pcard{flex:1;min-height:0;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;border:1px solid var(--line)}
.pclabel{text-align:center;color:var(--mut);font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.seller{display:flex;gap:10px;align-items:center}
.avatar{width:44px;height:44px;object-fit:cover;border:1px solid var(--line);clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
.tag{font-family:Anton,sans-serif;font-size:17px;letter-spacing:.06em}
.link{color:var(--mut);font-size:13px;word-break:break-all}

/* tier dots (picker chips) */
.dot{display:inline-block;width:9px;height:9px;flex:none;background:var(--mut);transform:rotate(45deg)}
.dot.t-select{background:var(--tier-select)}
.dot.t-deluxe{background:var(--tier-deluxe)}
.dot.t-premium{background:var(--tier-premium)}
.dot.t-ultra{background:var(--tier-ultra)}
.dot.t-exclusive{background:var(--tier-exclusive)}

/* ── disclaimer ────────────────────────────────────────────────── */
#disclaimer{position:fixed;bottom:8px;left:0;right:0;text-align:center;color:var(--c-mut);font-size:11px;letter-spacing:.02em;padding:8px;background:var(--c-veil);backdrop-filter:blur(4px);z-index:30}
#disclaimer a{color:var(--c-ink);text-decoration:underline;padding:2px 6px}

/* ── card frame + watermark strip ──────────────────────────────── */
/* the stage stays dark and quiet; a soft ambient shadow lifts the card off it */
#sizer{outline:1px solid var(--c-line);outline-offset:6px;
box-shadow:0 24px 70px -18px rgba(0,0,0,.6),0 6px 22px rgba(0,0,0,.35)}
#sizer::before,#sizer::after{content:none}
.wstrip{position:absolute;left:34px;right:34px;bottom:8px;display:flex;justify-content:space-between;gap:14px;
color:var(--mut);font-size:13px;letter-spacing:.28em;text-transform:uppercase;pointer-events:none}

/* ── small screens ─────────────────────────────────────────────── */
@media (max-width:760px){
  #topbar{row-gap:3px;padding:5px 10px}
  .tb-left,.tb-right{width:100%}
  .tb-right{justify-content:flex-start;row-gap:4px;gap:6px}
  #topbar button,#topbar a.tb-link{flex:none;height:auto;min-height:40px;padding:6px 8px;font-size:10px;letter-spacing:.06em;display:inline-flex;align-items:center;justify-content:center}
  .logo{font-size:14px}
  #status{bottom:54px;font-size:12px;max-width:calc(100vw - 16px)}
  #disclaimer{font-size:12px}
}

/* ── motion (skipped entirely for reduced-motion users) ────────── */
@media (prefers-reduced-motion:no-preference){
  body,#topbar,#card,.panel,.boxf,.slotbox,.skin,.avatar,.pcard{
    transition:background-color .25s ease,color .25s ease,border-color .25s ease,filter .15s ease}
  .skin.added{animation:skinIn .18s ease-out}
  .skin.removing{animation:skinOut .16s ease-in forwards}
}
@keyframes skinIn{from{opacity:0;transform:scale(.9)}}
@keyframes skinOut{to{opacity:0;transform:scale(.9)}}

/* ── build stamp (injected into dist/ at build time by scripts/copy-static.mjs) ── */
#buildstamp{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;margin-left:12px}
#buildstamp .bs-env{display:none;align-items:center;padding:2px 7px;font:700 9px var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:#0B0F14;
clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
#buildstamp:not([data-env=production]) .bs-env{display:inline-flex}
#buildstamp[data-env=staging] .bs-env{background:#E8A33D}
#buildstamp[data-env=preview] .bs-env{background:#4EA8DE}
#buildstamp[data-env=local] .bs-env{background:#8A95A1}
#buildstamp[data-env=beta] .bs-env{background:#B44BFF}
#buildstamp .bs-ver{font:500 10px var(--font-ui);letter-spacing:.02em;color:var(--c-mut);background:var(--c-veil);backdrop-filter:blur(4px);padding:3px 8px;border:1px solid var(--c-line);
clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
@media (max-width:760px){#buildstamp{position:absolute;bottom:calc(100% + 8px);right:8px;margin-left:0;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none}}

#disclaimer{padding-right:46px;transition:transform .3s ease,visibility 0s 0s}
#disclaimer.disc-hidden{transform:translateX(-102%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
#discToggle{position:fixed;right:10px;bottom:10px;z-index:31;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--c-surface2);border:1px solid var(--c-line);color:var(--c-mut);font:700 14px/1 var(--font-ui);cursor:pointer;clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch))}
#discToggle:hover{color:var(--c-ink);border-color:var(--c-mut)}
@media (prefers-reduced-motion:reduce){#disclaimer{transition:none}#disclaimer.disc-hidden{transition:none}}

.skin.tile{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-left:3px solid var(--mut);background:radial-gradient(120% 100% at 50% 0%,var(--sheen),transparent 60%),linear-gradient(180deg,var(--box-hi),var(--box));clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)));position:relative;overflow:hidden}
.skin.tile img{position:static;flex:1;min-height:0;width:auto;height:auto;inset:auto;padding:4px 6px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.skin.tile .tname{display:none;font:500 13px/1.2 'Chakra Petch',sans-serif;color:var(--ink);letter-spacing:.02em;padding:0 6px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skin.tile.tall .tname{display:block}
.slots.tiles{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);grid-auto-rows:56px;gap:6px}
.slots.tiles .skin.tile{width:auto}
.jchip{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);color:var(--mut);font:700 13px 'Chakra Petch',sans-serif;letter-spacing:.14em;background:transparent;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
button.jchip{cursor:pointer}
button.jchip:hover{color:var(--ink);border-color:var(--mut)}
.jchip.wide{width:100%;height:40px;flex:none}
.more-note{font-style:normal}
.slots.tiles .jchip,.panel[data-cat="Melees"] .slots .jchip{white-space:normal;text-align:center;line-height:1.25;font-size:12px;letter-spacing:.08em;padding:2px 4px}
.skin.named{flex:none;height:44px;display:flex;align-items:center;gap:10px;padding:0 10px}
.skin.named img{position:static;inset:auto;width:72px;height:36px;flex:none;padding:0}
.skin.named .tname{display:block;flex:1;min-width:0;font:500 13px 'Chakra Petch',sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode-m2 .slots{gap:6px}
/* ── live surfaces (viewer, quick view): categories scroll, never clip ── */
#card.is-live .slots{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#card.is-live .slots::-webkit-scrollbar{width:6px}
#card.is-live .slots::-webkit-scrollbar-thumb{background:var(--line)}
#card.is-live .slots::-webkit-scrollbar-track{background:transparent}
#card.is-live .slots.tiles{align-content:start}

/* ── CLASSIC (m3): one column per gun type, each scrolls on live surfaces ── */
#card.mode-m3 .grid{grid-template-columns:repeat(7,minmax(0,1fr)) 168px;
  grid-template-rows:1fr 1fr 1fr 1fr 1fr 1.35fr;
  grid-template-areas:
  "side smg shot rifles sniper mg melee flex"
  "side smg shot rifles sniper mg melee flex"
  "side smg shot rifles sniper mg melee flex"
  "side smg shot rifles sniper mg melee flex"
  "side smg shot rifles sniper mg melee flex"
  "code stats stats stats rank rank pcard pcard"}
#card.mode-m3 .panel[data-cat="Melees"] .slots{flex-direction:column}
#card.mode-m3 .panel[data-cat="Melees"] .skin,#card.mode-m3 .panel[data-cat="Melees"] .slotbox.empty{width:100%;min-width:0}