/* GENERATED by tools/theme-svg.py from tools/theme.src.css: edit the source, then re-run */
/* ===================== v4.4 GOTHIC THEME (loaded after style.css; overrides only, every id/class kept) =====================
   Dark gothic grimdark: deep purples and blacks, gold filigree, rim light. Display font: Cinzel (OFL, swarm/fonts/).
   Panels = textured dark violet + gold double frame + filigree corners (inline SVG, no image files). */
@font-face { font-family: 'Cinzel'; src: url(fonts/cinzel.woff2?v=v4.15.0) format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
:root {
  --display: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ink: #08060b; --ink2: #110b16; --vio: #1a1022; --vio2: #261631; --vio3: #3a2249; --vioHi: #8e5cc0;
  --gold: #c9a24a; --goldHi: #f4dc92; --goldLo: #6b4f1d; --goldDk: #2e220d;
  --blood: #9e1b14; --bloodHi: #e0452e; --bone: #eadfc6; --boneDim: #b9ab92;
  --edge: #6b4f1d;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E %3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .06 0 0 0 0 .12 0 0 0 -1.1 1.05'/%3E%3C/filter%3E %3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  --corners: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform=' ' fill='none' stroke='%23c9a24a' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23c9a24a' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23f4dc92' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23c9a24a' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23c9a24a' stroke='none'/%3E %3C/g%3E%3C/svg%3E") top left no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform='translate(36 0) scale(-1 1) ' fill='none' stroke='%23c9a24a' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23c9a24a' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23f4dc92' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23c9a24a' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23c9a24a' stroke='none'/%3E %3C/g%3E%3C/svg%3E") top right no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform=' translate(0 36) scale(1 -1)' fill='none' stroke='%23c9a24a' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23c9a24a' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23f4dc92' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23c9a24a' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23c9a24a' stroke='none'/%3E %3C/g%3E%3C/svg%3E") bottom left no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform='translate(36 0) scale(-1 1) translate(0 36) scale(1 -1)' fill='none' stroke='%23c9a24a' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23c9a24a' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23f4dc92' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23c9a24a' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23c9a24a' stroke='none'/%3E %3C/g%3E%3C/svg%3E") bottom right no-repeat;
  --vcorners: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform=' ' fill='none' stroke='%23b07ad8' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23b07ad8' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23ecd2ff' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23b07ad8' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23b07ad8' stroke='none'/%3E %3C/g%3E%3C/svg%3E") top left no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform='translate(36 0) scale(-1 1) ' fill='none' stroke='%23b07ad8' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23b07ad8' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23ecd2ff' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23b07ad8' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23b07ad8' stroke='none'/%3E %3C/g%3E%3C/svg%3E") top right no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform=' translate(0 36) scale(1 -1)' fill='none' stroke='%23b07ad8' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23b07ad8' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23ecd2ff' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23b07ad8' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23b07ad8' stroke='none'/%3E %3C/g%3E%3C/svg%3E") bottom left no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cg transform='translate(36 0) scale(-1 1) translate(0 36) scale(1 -1)' fill='none' stroke='%23b07ad8' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3 33V10Q3 3 10 3H33' stroke-width='1.6'/%3E %3Cpath d='M7 29V12Q7 7 12 7H29' stroke-width='.8' opacity='.65'/%3E %3Cpath d='M12 12q7 0 9 7q-7 1 -9 -7z' fill='%23b07ad8' stroke-width='.6' opacity='.9'/%3E %3Cpath d='M21 3q0 5 5 6M3 21q5 0 6 5' stroke-width='1.1'/%3E %3Cpath d='M14 3q1 3 4 3M3 14q3 1 3 4' stroke-width='.8' opacity='.8'/%3E %3Ccircle cx='9' cy='9' r='2.3' fill='%23ecd2ff' stroke='%236b4f1d' stroke-width='.6'/%3E %3Ccircle cx='33' cy='3' r='1.2' fill='%23b07ad8' stroke='none'/%3E%3Ccircle cx='3' cy='33' r='1.2' fill='%23b07ad8' stroke='none'/%3E %3C/g%3E%3C/svg%3E") bottom right no-repeat;
  --frame: 0 0 0 1px #000, 0 0 0 3px rgba(17,11,22,.95), 0 0 0 4px rgba(201,162,74,.38), inset 0 0 0 1px rgba(244,220,146,.08), inset 0 0 50px rgba(0,0,0,.65);
  --heavy: var(--display);
}
html, body { background: var(--ink); color: var(--bone); font-family: var(--body); }
h1, h2, h3, #timer, #banner b, #cutName, .card .nm, .bugCard .nm, button.big, #bossBar b, .wallet, #introName, #introKind, .chip.wave, .fKind, #fName, #tutTip i, #kiBtn span {
  font-family: var(--display); font-weight: 800; letter-spacing: 1.5px; }
.gold-text, .panel h2, .hubHead h1 { background: linear-gradient(180deg, #fff4cf 0%, #f0cf7a 38%, #b4832f 62%, #f6dd94 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
#loading { font-family: var(--display); letter-spacing: 3px; color: var(--gold); background: radial-gradient(circle at 50% 40%, #241530, var(--ink) 70%); }

/* ---------- screen transitions ---------- */
.screen:not(.hidden) { animation: thFade .28s ease-out both; }
.overlay:not(.hidden) > .panel, #settings:not(.hidden) > .panel { animation: thPanel .26s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes thFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes thPanel { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- panels ---------- */
.overlay { background: radial-gradient(ellipse at 50% 40%, rgba(30,12,40,.72), rgba(3,1,5,.9)); }
.panel, .fCard {
  background: var(--corners), var(--grain), radial-gradient(130% 55% at 50% 0%, rgba(110,50,150,.32), transparent 62%), linear-gradient(180deg, #1b1124, #0d0811 75%);
  border: 1px solid var(--goldLo); border-radius: 6px; box-shadow: var(--frame), 0 18px 50px rgba(0,0,0,.85); padding: 18px 16px; }
.panel h2 { font-size: 30px; font-weight: 900; letter-spacing: 3px; margin: 4px 0 2px; text-shadow: none; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 10px rgba(201,162,74,.25)); }
.panel h2::after { content: ''; display: block; height: 14px; margin: 4px auto 2px; width: min(240px, 80%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a24a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23c9a24a'/%3E%3Cstop offset='1' stop-color='%23c9a24a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M4 7H104.0M136.0 7H236' stroke='url(%23g)' stroke-width='1.2'/%3E %3Cpath d='M98.0 7q6 -5 10 0q-4 5 -10 0z M142.0 7q-6 -5 -10 0q4 5 10 0z' fill='%23c9a24a' opacity='.8'/%3E %3Cpath d='M120.0 1l6 6l-6 6l-6 -6z' fill='%23f4dc92' stroke='%236b4f1d' stroke-width='.8'/%3E %3C/svg%3E") center / contain no-repeat; }
#sumTitle { -webkit-text-fill-color: currentColor; background: none; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px currentColor); }
.sub { color: var(--boneDim); opacity: 1; }
#settings h3, #codex h3, .panel h3 { font-family: var(--display); color: var(--gold); letter-spacing: 2px; font-size: 13px; }

/* ---------- buttons (pressed states everywhere) ---------- */
button { transition: transform .07s ease-out, filter .1s, box-shadow .07s; }
button.big { position: relative; overflow: hidden; border-radius: 4px; border: 1px solid var(--gold); color: #fff3d8; font-weight: 800; letter-spacing: 2.5px;
  background: linear-gradient(180deg, #c8402a 0%, #8c1a0e 48%, #5a0d06 100%);
  box-shadow: inset 0 1px 0 rgba(255,214,160,.5), inset 0 -3px 0 rgba(0,0,0,.35), 0 0 0 1px #000, 0 0 0 3px rgba(201,162,74,.22), 0 4px 0 #1d0603, 0 8px 18px rgba(0,0,0,.6);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,120,60,.35); }
button.big:active, button.big.pressed { transform: translateY(3px); filter: brightness(1.12); box-shadow: inset 0 2px 8px rgba(0,0,0,.65), 0 0 0 1px #000, 0 0 0 3px rgba(201,162,74,.3), 0 1px 0 #1d0603; }
button.ghost, .setLink, .bestLink, #rerollBtn {
  border-radius: 4px; border: 1px solid rgba(201,162,74,.5); color: var(--bone); background: linear-gradient(180deg, #22162b, #130c19); box-shadow: inset 0 1px 0 rgba(244,220,146,.1), 0 0 0 1px #000, 0 3px 0 #050307; }
button.ghost:active, .setLink:active, .bestLink:active, #rerollBtn:active { transform: translateY(2px); background: linear-gradient(180deg, #2e1d3a, #1a1022); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 1px #000; }
.bestLink { color: var(--goldHi); }
button:disabled { filter: grayscale(.7) brightness(.7); }

/* ---------- HUD ---------- */
.bar { border-radius: 3px; border: 1px solid #000; background: linear-gradient(#0a070d, #1a1220); box-shadow: 0 0 0 1px var(--goldLo), 0 0 0 2px #000, inset 0 2px 5px rgba(0,0,0,.9); overflow: hidden; }
.bar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0,0,0,.5) calc(10% - 1px) 10%), linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0) 45%); }
.bar i { border-radius: 0; }
.bar.hp { height: 18px; }
.bar.hp i { background: linear-gradient(180deg, #ff7b5c 0%, #d12a18 40%, #7c0b05 100%); box-shadow: 0 0 10px rgba(255,60,30,.55); }
.bar.hp { position: relative; }
#bankBadge { position: absolute; left: 8px; top: 30px; z-index: 6; min-width: 40px; height: 26px; padding: 0 8px; border-radius: 13px; border: 2px solid #80deea; background: rgba(10,40,48,.85); color: #e0fbff; font: 800 14px/22px sans-serif; box-shadow: 0 0 10px #4dd0e1, 0 0 2px #fff inset; animation: bankGlow 1.2s ease-in-out infinite; pointer-events: auto; } #bankBadge.full { border-color: #ffd54a; box-shadow: 0 0 14px #ffca28; color: #fff3c4; } @keyframes bankGlow { 50% { box-shadow: 0 0 18px #4dd0e1, 0 0 2px #fff inset; } } /* v4.12.0 banked picks */
#armorTxt { position: absolute; right: 4px; top: 0; z-index: 2; font-size: 11px; line-height: 17px; font-weight: 800; color: #dfe9ff; text-shadow: 0 1px 2px #000, 0 0 3px #000; letter-spacing: .3px; pointer-events: none; } /* v4.12.0 armour score */
.bar.hp span { line-height: 17px; font-size: 11.5px; z-index: 1; letter-spacing: .5px; }
.bar.xp i { background: linear-gradient(180deg, #fff1b8 0%, #e3b043 42%, #7e5712 100%); box-shadow: 0 0 8px rgba(240,190,70,.5); }
.bar.xp span { z-index: 1; }
.bar.boss { height: 15px; box-shadow: 0 0 0 1px var(--gold), 0 0 0 2px #000, 0 0 16px rgba(200,20,10,.5), inset 0 2px 5px rgba(0,0,0,.9); }
.bar.boss i { background: linear-gradient(180deg, #ff5a3c, #a8130a 45%, #4a0603); }
#bossBar b { font-weight: 900; color: #ffd9c8; letter-spacing: 3px; text-shadow: 0 0 10px #ff2a10, 0 2px 0 #000; }
#bossBar b::before, #bossBar b::after { content: ' ✦ '; color: var(--gold); text-shadow: none; }
#timer { font-weight: 800; color: var(--goldHi); text-shadow: 0 2px 0 #000, 0 0 10px rgba(201,162,74,.35); font-variant-numeric: tabular-nums; }
#kills { color: var(--bone); }
#pauseBtn { border-radius: 4px; border: 1px solid var(--gold); background: linear-gradient(#2a1b34, #120b18); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(244,220,146,.2), 0 3px 0 #000; color: var(--goldHi); }
#pauseBtn:active { transform: translateY(2px); box-shadow: 0 0 0 1px #000, inset 0 2px 5px rgba(0,0,0,.7); }
.chip { border-radius: 3px; border: 1px solid rgba(201,162,74,.35); background: linear-gradient(rgba(30,18,38,.88), rgba(12,8,16,.88)); color: var(--bone); box-shadow: 0 0 0 1px rgba(0,0,0,.7); }
.chip.wave { font-family: var(--display); color: #ff8a6a; border-color: rgba(200,40,20,.6); background: linear-gradient(rgba(50,8,6,.88), rgba(18,4,4,.88)); letter-spacing: 2.5px; }
.chip.rite { border-color: var(--vioHi); }
#kiBtn { border: 0; background: conic-gradient(from -90deg, #ffcf4a 0, #ff6a1a var(--ki, 0%), rgba(10,6,14,.85) 0);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 0 5px #000, 0 6px 16px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.6); }
#kiBtn span { width: 76px; height: 76px; color: var(--goldHi); letter-spacing: 1.5px; font-size: 14px;
  background: radial-gradient(circle at 50% 35%, #3a2448, #150c1c 62%, #07040a); box-shadow: inset 0 0 0 1px var(--goldLo), inset 0 0 14px rgba(0,0,0,.9); }
#kiBtn.ready span { background: radial-gradient(circle at 50% 40%, #fff2b0, #ffb12a 40%, #b11e00 100%); color: #250600; text-shadow: 0 1px 0 rgba(255,240,200,.6); }
#kiBtn:active { transform: scale(.95); }
#banner { border-radius: 4px; border: 1px solid #c4301a; background: var(--grain), linear-gradient(rgba(42,8,6,.94), rgba(14,4,6,.94)); box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(201,162,74,.3), 0 0 30px rgba(160,20,0,.5); border-left-width: 1px; border-right-width: 1px; }
#banner b { font-weight: 900; letter-spacing: 2px; }
#tutTip { background: var(--grain), linear-gradient(rgba(34,22,40,.95), rgba(14,9,18,.95)); border: 1px solid var(--gold); border-left: 5px solid var(--gold); box-shadow: 0 0 0 1px #000, 0 0 22px rgba(201,162,74,.25), 0 6px 18px rgba(0,0,0,.7); }
#tutTip i { color: var(--goldHi); }

/* ---------- level-up cards: rarity frames ---------- */
#levelup .panel h2 { font-size: 34px; }
.card { position: relative; overflow: hidden; border-radius: 5px; border: 1px solid var(--rc); color: var(--bone);
  background: var(--grain), linear-gradient(100deg, color-mix(in srgb, var(--rc) 22%, transparent), transparent 55%), linear-gradient(180deg, #1c1225, #0e0913);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.6), 0 4px 0 #050307; padding: 12px 12px 12px 10px; }
.card:active { transform: translateY(2px) scale(.985); box-shadow: 0 0 0 1px #000, inset 0 0 26px rgba(0,0,0,.75); }
.card .ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; line-height: 1;
  background: radial-gradient(circle at 40% 32%, #432a52, #150c1b 68%); box-shadow: 0 0 0 2px var(--rc), 0 0 0 3px #000, 0 0 12px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 10px rgba(0,0,0,.85); }
.card .nm { font-size: 16px; font-weight: 800; color: #fff2da; letter-spacing: 1px; text-shadow: 0 2px 0 #000; }
.card .rt { color: var(--rc); letter-spacing: 1.2px; }
.card .ds { color: #d8cdb6; }
.card.r-rare { box-shadow: 0 0 0 1px #000, inset 0 0 22px rgba(0,0,0,.6), 0 0 14px rgba(66,165,245,.35), 0 4px 0 #050307; }
.card.r-epic { background: var(--vcorners), var(--grain), linear-gradient(100deg, rgba(171,71,188,.3), transparent 60%), linear-gradient(180deg, #24122e, #0f0814); box-shadow: 0 0 0 1px #000, inset 0 0 22px rgba(0,0,0,.6), 0 0 18px rgba(171,71,188,.55), 0 4px 0 #050307; }
.card.r-legendary { border-color: var(--gold); background: var(--corners), var(--grain), linear-gradient(100deg, rgba(255,190,60,.3), transparent 60%), linear-gradient(180deg, #2a1c0c, #120a06);
  box-shadow: 0 0 0 1px #000, inset 0 0 22px rgba(0,0,0,.55), 0 0 22px rgba(255,179,0,.55), 0 4px 0 #050307; }
.card.r-evolution, .card.evo { border-color: #ff4081; background: var(--corners), var(--grain), linear-gradient(100deg, rgba(255,64,129,.32), transparent 60%), linear-gradient(180deg, #2e0c1c, #12060c);
  box-shadow: 0 0 0 1px #000, inset 0 0 22px rgba(0,0,0,.55), 0 0 24px rgba(255,64,129,.55), 0 4px 0 #050307; }
.card.r-epic::after, .card.r-legendary::after, .card.r-evolution::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,200,.16) 48%, transparent 60%); transform: translateX(-120%); animation: thSheen 3.2s ease-in-out infinite; }
.card.r-epic::after { animation-duration: 4.4s; }
@keyframes thSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.card .sch { border-radius: 2px; box-shadow: 0 0 0 1px #000; }
.card.counter { outline: 1px solid rgba(156,204,101,.5); outline-offset: -4px; }

/* ---------- hub ---------- */
.screen { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E %3Cg fill='none' stroke='%23c9a24a' stroke-opacity='.06' stroke-width='1'%3E %3Cpath d='M28 0l28 16v32l-28 16l-28 -16v-32z M28 64v33 M0 48l-28 16 M56 48l28 16'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120% 50% at 50% -5%, rgba(120,50,160,.35), transparent 60%), radial-gradient(90% 40% at 50% 105%, rgba(140,30,10,.22), transparent 70%), linear-gradient(180deg, #120a18, var(--ink) 70%); }
.hubTop { background: linear-gradient(180deg, rgba(12,7,16,.98) 82%, rgba(12,7,16,0)); }
.hubTop::after { content: ''; display: block; height: 1px; margin: 8px auto 0; max-width: 560px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .55; }
.hubHead h1 { font-size: 36px; font-weight: 900; letter-spacing: 5px; text-shadow: none; filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px rgba(201,162,74,.3)); }
.hubTop .hubHead h1 { font-size: 34px; line-height: 1.05; }
.subtitle { font-family: var(--display); font-weight: 700; color: #e06a4a; letter-spacing: 6px; font-size: 11.5px; text-shadow: 0 1px 0 #000; }
.subtitle::before { content: '— '; color: var(--goldLo); } .subtitle::after { content: ' —'; color: var(--goldLo); }
.wallet { border-radius: 22px; border: 1px solid var(--gold); background: radial-gradient(circle at 30% 30%, #3a2448, #120b17); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(244,220,146,.2), 0 0 12px rgba(201,162,74,.2); color: var(--goldHi); padding: 6px 14px; font-weight: 800; }
.hubTop .start { font-size: 20px; padding: 9px 13px; letter-spacing: 4px; }
.hubTop .start::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,230,180,.28) 48%, transparent 60%); transform: translateX(-120%); animation: thSheen 3.6s ease-in-out infinite; pointer-events: none; }
section h3 { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; margin: 18px 0 10px; font-size: 14px; letter-spacing: 3px; color: var(--gold); font-weight: 800; }
section h3::before, section h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--goldLo)); }
section h3::after { background: linear-gradient(90deg, var(--goldLo), transparent); }
section h3 small { font-family: var(--body); font-size: 10px; letter-spacing: 0; color: var(--boneDim); opacity: 1; font-weight: 400; }
.bugCard, .slot, .item, .perm, #sumStats div, #sumLoot .lr, .cx, .cxn, .pt {
  background: var(--grain), linear-gradient(180deg, #1c1225, #100a15); border-radius: 4px; border-color: rgba(201,162,74,.28); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(244,220,146,.06); }
.bugCard { border: 1px solid rgba(201,162,74,.3); padding: 8px 8px 10px; }
.bugCard canvas { width: 92px; height: 92px; border-radius: 46px 46px 8px 8px; background: radial-gradient(circle at 50% 70%, rgba(150,80,200,.28), rgba(10,6,14,0) 70%); box-shadow: inset 0 0 0 1px rgba(201,162,74,.35), inset 0 -10px 18px rgba(0,0,0,.5); }
.bugCard.sel { border-color: var(--gold); background: var(--corners), var(--grain), radial-gradient(100% 60% at 50% 0%, rgba(201,162,74,.22), transparent 70%), linear-gradient(180deg, #2a1a30, #120a16);
  box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(201,162,74,.35), 0 0 20px rgba(201,162,74,.35); }
.bugCard.sel .nm { color: var(--goldHi); }
.bugCard .nm { font-size: 13.5px; letter-spacing: 1px; margin-top: 2px; }
.bugCard .ep { color: #cdb6e0; }
.bugCard .kit { color: var(--bone); }
.bugCard:active { transform: scale(.98); }
.bugCard .testTag { background: #3a2449; border: 1px solid var(--vioHi); color: #e8d6ff; }
.testNote { color: #c9a6ff; }
.prog { background: #07050a; box-shadow: 0 0 0 1px var(--goldLo); } .prog i { background: linear-gradient(#7fe8f5, #1b8ea0); }
.bugCard button, .item button, .perm button { border-radius: 4px; border: 1px solid var(--gold); color: #1d1204; font-weight: 800; background: linear-gradient(180deg, #f4dc92, #c9a24a 55%, #8a6726); box-shadow: 0 0 0 1px #000, 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.5); }
.bugCard button:active, .item button:active, .perm button:active { transform: translateY(2px); box-shadow: 0 0 0 1px #000, inset 0 2px 4px rgba(0,0,0,.4); }
.item button.sell { color: var(--bone); border-color: #7a2a1a; background: linear-gradient(180deg, #5a1a10, #2e0b07); box-shadow: 0 0 0 1px #000, 0 2px 0 #000; }
.bugCard button:disabled, .perm button:disabled { color: #8a7e6a; border-color: #3a3028; background: linear-gradient(#2a2420, #171310); }
.slot { border: 1px dashed rgba(201,162,74,.3); }
.slot.filled { border: 1px solid var(--rc); box-shadow: 0 0 0 1px #000, 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent), inset 0 0 14px rgba(0,0,0,.5); }
.slot b { font-family: var(--display); letter-spacing: 2px; color: var(--gold); opacity: .9; }
.item { border-left: 3px solid var(--rc); }
.perm b { font-family: var(--display); letter-spacing: .5px; color: #f2e6cc; }
.records { color: var(--boneDim); opacity: 1; }
.records .setLink, .records .bestLink { margin: 4px 3px; display: inline-block; padding: 8px 11px; font-size: 12.5px; }
.hubNotice { background: var(--grain), linear-gradient(rgba(38,24,46,.9), rgba(16,10,20,.9)); border: 1px solid var(--goldLo); border-left: 4px solid var(--gold); }
.tiny { color: var(--boneDim); }

/* ---------- summary / codex / settings / pause ---------- */
#summary.screen { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E %3Cg fill='none' stroke='%23c9a24a' stroke-opacity='.06' stroke-width='1'%3E %3Cpath d='M28 0l28 16v32l-28 16l-28 -16v-32z M28 64v33 M0 48l-28 16 M56 48l28 16'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(100% 60% at 50% 0%, rgba(120,50,160,.3), transparent 65%), linear-gradient(180deg, #120a18, var(--ink)); }
#sumStats small { color: var(--gold); font-family: var(--display); letter-spacing: 1px; font-size: 10px; }
#sumLoot .lr { border-left: 3px solid var(--rc, var(--gold)); }
.cx, .cxn { border-left: 3px solid #8a2a10; } .cx.locked { border-left-color: #3c3328; }
.pt { border-left: 3px solid var(--sc); }
.setRow { border-bottom: 1px solid rgba(201,162,74,.12); }
.setRow input[type=range], .setRow input[type=checkbox] { accent-color: #c9a24a; }
.seg { border: 1px solid rgba(201,162,74,.45); border-radius: 4px; background: #0f0a14; }
.seg button { border-left: 1px solid rgba(201,162,74,.3); }
.seg button.on { background: linear-gradient(180deg, #c8402a, #7a160c); color: #fff3d8; box-shadow: inset 0 1px 0 rgba(255,214,160,.4); }
.seg button:active { filter: brightness(1.2); }

/* ---------- intro cards ---------- */
.fCard { border-color: var(--fcol, #c41a00); box-shadow: var(--frame), 0 0 34px color-mix(in srgb, var(--fcol, #c41a00) 60%, transparent); }
#fName { font-weight: 900; letter-spacing: 3px; }
.fKind { color: var(--gold); font-weight: 700; }
.introCard { border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); background: var(--grain), linear-gradient(90deg, transparent, rgba(58,6,10,.95) 12%, rgba(40,6,24,.95) 50%, rgba(58,6,10,.95) 88%, transparent);
  box-shadow: 0 -4px 0 -2px rgba(201,162,74,.35), 0 4px 0 -2px rgba(201,162,74,.35), 0 0 40px rgba(0,0,0,.8); }
#introKind { color: var(--gold); font-weight: 700; letter-spacing: 8px; }
#introName { font-weight: 900; letter-spacing: 3px; }
#introName::before, #introName::after { content: ''; display: block; height: 14px; width: min(260px, 70%); margin: 2px auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23c9a24a' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23c9a24a'/%3E%3Cstop offset='1' stop-color='%23c9a24a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M4 7H104.0M136.0 7H236' stroke='url(%23g)' stroke-width='1.2'/%3E %3Cpath d='M98.0 7q6 -5 10 0q-4 5 -10 0z M142.0 7q-6 -5 -10 0q4 5 10 0z' fill='%23c9a24a' opacity='.8'/%3E %3Cpath d='M120.0 1l6 6l-6 6l-6 -6z' fill='%23f4dc92' stroke='%236b4f1d' stroke-width='.8'/%3E %3C/svg%3E") center / contain no-repeat; }

/* ---------- itch.io 400x800 & short screens ---------- */
@media (max-height: 560px) { .hubTop .hubHead h1 { font-size: 24px; } .hubTop::after { margin-top: 4px; } }
@media (max-width: 380px) { .hubHead h1, .hubTop .hubHead h1 { font-size: 28px; letter-spacing: 3px; } .card .ic { width: 46px; height: 46px; font-size: 24px; } }
/* low effects tier / reduced motion: no looping sheens */
.gfx-low .card::after, .gfx-low .hubTop .start::after, .reduced-motion .card::after, .reduced-motion .hubTop .start::after { animation: none !important; display: none; }

/* v4.5 title logo image (swarm/img/logo.webp, Skinface's art). Sized by height so START RUN stays in the sticky bar on phones */
.hubTitle { min-width: 0; flex: 1 1 auto; }
.hubHead h1.logoH { margin: 0; line-height: 0; font-size: 0; letter-spacing: 0; filter: none; background: none; }
.hubHead h1.logoH .logo { display: block; height: min(118px, 15vh, 30vw); width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.hubHead h1.logoH picture { display: block; }
.hubHead h1.logoH .logoTxt { display: none; }
.hubTitle .subtitle { margin-top: 2px; padding-left: 4px; }
@media (max-height: 560px) { .hubHead h1.logoH .logo { height: 60px; } }
/* fallback: image failed to load -> the old gold Cinzel text title */
.hubHead h1.logoH.noLogo { line-height: 1.05; font-size: 34px; letter-spacing: 5px; filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 14px rgba(201,162,74,.3)); background: linear-gradient(180deg, #fff4cf 0%, #f0cf7a 38%, #b4832f 62%, #f6dd94 100%); -webkit-background-clip: text; background-clip: text; }
.hubHead h1.logoH.noLogo picture { display: none; }
.hubHead h1.logoH.noLogo .logoTxt { display: inline; }
@media (max-width: 380px) { .hubHead h1.logoH.noLogo { font-size: 28px; letter-spacing: 3px; } }
.gfx-low .hubHead h1.logoH .logo { filter: none; }
/* v4.5 build label (hub corner + Settings) */
.buildTag { font: 600 10px/1 system-ui, sans-serif; letter-spacing: 1px; color: rgba(201,162,74,.55); text-transform: none; pointer-events: none; }
/* v4.6: bottom-LEFT, clear of itch.io's fullscreen button and the scrollbar on the right */
#hubBuild { position: fixed; left: calc(8px + env(safe-area-inset-left)); bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 4; }
.buildTag.inPanel { text-align: center; margin: 8px 0 0; }

/* v4.5 hub backdrop (swarm/img/hub-bg.webp, Skinface's art): fixed layer under the hub screen, plus a dark
   gradient + vignette on #hub itself so panels and text stay readable. Static image, so it is the same in ?gfx=low */
.hubBg { display: none; position: fixed; inset: 0; z-index: 3; overflow: hidden; background: var(--ink); pointer-events: none; }
#hub:not(.hidden) ~ .hubBg { display: block; }
.hubBg picture { display: contents; }
.hubBg img { position: absolute; top: 0; height: 100%; object-fit: cover; }
.hubBgSide { left: 0; width: 100%; }
.hubBgImg { left: 50%; width: min(100%, 72vh); transform: translateX(-50%); object-position: 50% 60%; }
@media (min-aspect-ratio: 2/3) { .hubBgImg { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } }
#hub.screen { background: radial-gradient(130% 75% at 50% 45%, rgba(10,6,14,0), rgba(10,6,14,.6) 100%), linear-gradient(180deg, rgba(10,6,14,.35) 0%, rgba(10,6,14,.2) 30%, rgba(10,6,14,.4) 65%, rgba(10,6,14,.75) 100%); background-attachment: fixed; }
#hub .hubTop { background: linear-gradient(180deg, rgba(12,7,16,.62) 0%, rgba(12,7,16,.78) 70%, rgba(12,7,16,0)); }
#hub section > h3 { text-shadow: 0 1px 3px #000, 0 0 8px #000; }

/* v4.7 HUD declutter: faction chip + separate shard chip hidden (merged/duplicated), smaller countdown under the timer */
#facChip, #shardChip { display: none !important; }
#kills { font-size: 11px; opacity: .8; }
.chip.wave.hidden { display: none; }

/* v4.15.0 skill paths screen: one aspect-ratio box holds the SVG lines and the node buttons (shared coordinates) */
#treeScr { z-index: 40; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; }
#treeScr.hidden { display: none; }
#treeHead { text-align: center; color: var(--goldHi, #ffe08a); font-size: 16px; line-height: 1.25; }
#treeHead small { display: block; color: #cdb6e0; font-size: 12px; }
.tTitle { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff4c8; }
#treeBox { position: relative; aspect-ratio: 360 / 460; width: min(100%, max(260px, calc((100dvh - 272px) * 360 / 460))); /* landscape: never smaller than 260 px wide (the screen scrolls) */ margin: 0 auto; flex: none; }
#treeSvg { position: absolute; inset: 0; width: 100%; height: 100%; }
#treeSvg .tl { stroke: #4a3f52; stroke-width: 3; stroke-linecap: round; }
#treeSvg .tl.locked, #treeSvg .tl.sealed { stroke-dasharray: 5 6; stroke-width: 2; }
#treeSvg .tl.available, #treeSvg .tl.unaffordable { stroke: #8a6f34; }
#treeSvg .tl.learnt { stroke-width: 4; }
#treeSvg .tglow { stroke-width: 12; opacity: .22; stroke-linecap: round; }
.tban { position: absolute; transform: translate(-50%, -50%); width: 23%; text-align: center; font-size: 11px; line-height: 1.15; color: #f4ecdc; color: var(--pc); }
.tban b { display: block; color: #f4ecdc; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tban.sig b::after { content: ' ★'; color: #ffcf6a; }
.tban .pips { font-size: 9px; letter-spacing: 1px; }
.tnode { position: absolute; transform: translate(-50%, -50%); width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 2px solid #4a3f52; background: #1b1420; color: #7d7385; display: flex; align-items: center; justify-content: center; }
.tnode.cap { width: 56px; height: 56px; border-radius: 16px; border-width: 3px; }
.tnode > i { display: flex; font-style: normal; }
.tnode .tlab { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; width: 74px; font-size: 10.5px; line-height: 1.1; color: #cfc4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tnode .tcost { position: absolute; top: -8px; right: -10px; font-size: 9.5px; font-style: normal; color: #ff8a80; background: #1b1420; border-radius: 6px; padding: 0 3px; }
.tnode.available, .tnode.unaffordable { border-color: #c9a24a; color: var(--pc); }
.tnode.learnt { border-color: var(--pc); color: #1b1420; background: var(--pc); }
.tnode.sealed { border-style: dashed; color: #a05050; opacity: .75; }
.tnode.sel { outline: 3px solid #fff; outline-offset: 2px; }
.tnode.available::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid #ffd76a; opacity: 0; animation: tpulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes tpulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
.reduced-motion .tnode.available::after, .reduced-motion #treeScr { animation: none; }
.reduced-motion .tnode.available::after { display: none; }
@media (prefers-reduced-motion: reduce) { .tnode.available::after { animation: none; display: none; } }
.troot { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--hc); background: #1b1420; display: flex; align-items: center; justify-content: center; font-size: 20px; }
#treeInfo { min-height: 64px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.4); color: #f4ecdc; font-size: 13.5px; line-height: 1.3; }
.tih { color: var(--pc); } .tih b { color: #fff; } .tih small { color: #cdb6e0; }
.tseal { color: #ffb4a8; font-size: 12.5px; margin-top: 2px; }
#treeInfo button { margin-top: 4px; min-height: 48px; padding: 0 18px; }
.treeBtns { display: flex; gap: 10px; justify-content: space-between; margin-top: auto; }
.treeBtns button { min-height: 48px; flex: 1; }
#treeRespec.armed { border-color: #ff8a80; color: #ffd0c8; }
#treeRespec.poor { opacity: .7; }
#treeRespec { white-space: nowrap; font-size: 15px; }
#treeInfo { max-height: 108px; overflow-y: auto; flex: none; }
.bugCard .treeBtn { margin-top: 6px; min-height: 40px; width: 100%; font-size: 12.5px; position: relative; }
.bugCard .treeBtn.ready::after { content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 6px; background: #4dd0e1; box-shadow: 0 0 6px #4dd0e1; }
/* v4.8 Core Tree rank pips */
.coreGrid .pips i { display: inline-block; width: 10px; height: 10px; margin-left: 3px; border-radius: 2px; border: 1px solid #c9a24a; transform: rotate(45deg); }
.coreGrid .pips i.on { background: #ffd54a; box-shadow: 0 0 5px #ffd54a; }
#treeInfo button { border-radius: 4px; border: 1px solid var(--gold); color: #1d1204; font-weight: 800; background: linear-gradient(180deg, #f4dc92, #c9a24a 55%, #8a6726); box-shadow: 0 0 0 1px #000, 0 2px 0 #000; }
#treeInfo button:disabled { color: #8a7e6a; border-color: #3a3028; background: linear-gradient(#2a2420, #171310); }

/* v4.10 upgrade icons: category colour ring + corner badge (js/upicons.js) */
.card .ic[class*="cat-"] { position: relative; box-shadow: 0 0 0 2px var(--cc), 0 0 0 3px #000, 0 0 12px color-mix(in srgb, var(--cc) 50%, transparent), inset 0 0 10px rgba(0,0,0,.85); }
.card .ic .icMain { width: 34px; height: 34px; filter: drop-shadow(0 1px 0 #000); }
.card .ic .icSmall { position: absolute; right: -4px; bottom: -4px; font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 1px #000); }
.card .ic .icEmoji { font-size: 28px; line-height: 1; }
.card .ic .icBadge { position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #0c0710; box-shadow: 0 0 0 2px var(--cc); display: grid; place-items: center; }
.card .ic .icBadge .icB { width: 15px; height: 15px; }
.catTag { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #0b0710; background: var(--cc); }
@media (max-width: 380px) { .card .ic .icMain { width: 28px; height: 28px; } }