/* Axion Forge Card Explorer
   Layout concept: the forge. Near-black steel with faint grid lines, brushed-metal panels, molten ember accents and
   glow taken from the official logo, and the card as the brightest object on screen. Each faction lends its colour
   (--fac) to what it touches. One dark visual world on purpose (no light theme), like playaxionforge.com.
   Type: Cinzel (display: the website's carved capitals), IBM Plex Sans (reading), IBM Plex Mono (labels, numbers). */
:root {
  --void: #050506;          /* page */
  --abyss: rgb(13 13 16 / 0.72);   /* panels: slightly see-through */
  --plate: rgb(24 24 30 / 0.62);   /* raised surfaces */
  --plate-2: #1f1f26;
  --line: #2a2a33;          /* hairlines */
  --line-2: #3a3a46;
  --ink: #ece8e2;           /* text: warm white */
  --muted: #a39d95;
  --dim: #6f6a63;
  --ember: #ff7a1a;         /* molten orange: links, focus, live state */
  --ember-2: #ffb15c;
  --ember-soft: rgb(255 122 26 / 0.12);
  --steel: linear-gradient(165deg, #23232b 0%, #121216 55%, #1b1b21 100%);
  --melee: #4fd16f; --ranged: #ff9a2e; --guard: #4ea8ff;   /* Battle Map arrows: Melee green, Ranged orange, Guard blue */
  --pos-i: #4fd16f; --pos-n: #8d8a86; --pos-x: #e04848;     /* positions: Initial green, Neutral grey, Restricted red */
  --ultra: #ff2b2b; --mythic: #ff9b3a;
  --warn: #f2b443;
  --fac: var(--ember);
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 10px;
  --shadow: 0 18px 40px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--void); scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--void); font: 15px/1.55 var(--body);
  background-image: radial-gradient(1200px 600px at 80% -10%, rgb(255 122 26 / 0.06), transparent 60%),
    linear-gradient(rgb(255 255 255 / 0.016) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.016) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px; background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--void); }
img { max-width: 100%; }
img.protected, .c3d img, .tile img, .rel img, .mq img, .var img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: 0.03em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); line-height: 1.1; }
.h3, h2.h3 { font-size: 1.15rem; }
p { margin: 0; }
.muted { color: var(--muted); } .small { font-size: 0.86rem; } .fine { font: 0.72rem/1.4 var(--mono); color: var(--dim); }
.eyebrow { font: 500 0.7rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.lede { color: #c9c2b8; max-width: 62ch; font-size: 1.02rem; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
[hidden] { display: none !important; }
/* the cursor changes only on things that do something; tooltip-only text keeps the normal cursor */
[data-tip], [data-gloss] { cursor: inherit; }
button, a, select, summary, label.tg, .lnk { cursor: pointer; }
button:disabled { cursor: default; }

/* ---------- shell ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgb(5 5 6 / 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 122 26 / 0.45), transparent); }
/* a small bright glint races along the divider now and then, with a soft trail */
.glint-track { position: absolute; left: 0; right: 0; height: 6px; overflow: hidden; pointer-events: none; z-index: 2; }   /* clips the glint so the page never widens */
.glint-bottom { bottom: -3px; }
.glint-top { top: -3px; }
.glint { position: absolute; left: 0; top: 1px; height: 3px; width: 160px; pointer-events: none; opacity: 0; z-index: 2; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgb(255 190 120 / 0.25) 55%, rgb(255 245 225 / 1) 92%, transparent); filter: blur(0.6px) drop-shadow(0 0 6px rgb(255 170 80 / 0.9)); }
.glint.go { animation: glintRun 1.3s cubic-bezier(.55,.1,.35,1) forwards; }
.glint-rtl { background: linear-gradient(270deg, transparent, rgb(255 190 120 / 0.25) 55%, rgb(255 245 225 / 1) 92%, transparent); }
.glint-rtl.go { animation-name: glintRunRtl; }
@keyframes glintRunRtl { 0% { transform: translateX(100vw); opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(-180px); opacity: 0; } }
@keyframes glintRun { 0% { transform: translateX(-180px); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(100vw); opacity: 0; } }
.topbar-in { display: flex; align-items: center; gap: 14px 26px; padding-block: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1480px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-emblem-a { display: block; line-height: 0; }
.brand-emblem-a:hover .brand-emblem { filter: drop-shadow(0 0 14px rgb(255 120 30 / 0.7)); }
.brand-emblem { width: 54px; height: 54px; filter: drop-shadow(0 0 10px rgb(255 100 20 / 0.35)); }
.brand-t { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none !important; }
.brand-word { height: 48px; width: auto; }
.brand-b { font: 600 0.8rem/1.2 var(--mono); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ember-2); padding-left: 0.6em; }
.topnav-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.topnav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; cursor: grab; }
.topnav::-webkit-scrollbar { display: none; }
/* when the links do not fit, an arrow shows there is more; the strip can be dragged sideways */
.nav-arrow { display: none; flex: 0 0 auto; width: 44px; height: 52px; border: 0; border-radius: 8px; padding: 0 0 6px; background: none; font: 700 2.8rem/1 var(--body); color: var(--ember-2); visibility: hidden; }
.nav-arrow:hover { color: #fff; text-shadow: 0 0 12px var(--ember); }
.nav-prev { margin-right: 10px; }
.nav-next { margin-left: 10px; }
.topnav-wrap.over .nav-arrow { display: grid; place-items: center; }
.topnav-wrap.more .nav-next, .topnav-wrap.less .nav-prev { visibility: visible; }
.topnav .ss { margin-left: 10px; flex: 0 0 auto; }
.topnav-a { color: var(--muted); font: 700 0.86rem/1 var(--display); letter-spacing: 0.08em; padding: 10px 12px; border-radius: 6px; white-space: nowrap; text-decoration: none !important; position: relative; }
.topnav-a:hover { color: var(--ink); }
.topnav-a.on { color: var(--ink); }
.topnav-a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.topbar-r { margin-left: auto; display: flex; align-items: stretch; gap: 10px; flex: 0 0 auto; }
/* PLAY NOW: large, slowly pulsing */
.play-now { display: grid; place-items: center; padding: 12px 24px; border-radius: 9px; font: 700 1rem/1 var(--display); letter-spacing: 0.14em; color: #160800 !important; text-decoration: none !important;
  background: linear-gradient(180deg, #ffb062, #ff6a0a); border: 1px solid #ffc488; animation: playPulse 3.2s ease-in-out infinite; }
.play-now:hover { filter: brightness(1.1); }
@keyframes playPulse { 0%, 100% { box-shadow: 0 0 10px rgb(255 106 10 / 0.35); } 50% { box-shadow: 0 0 26px 4px rgb(255 120 30 / 0.7); } }
@media (prefers-reduced-motion: reduce) { .play-now { animation: none; } }
.topbar-site { display: inline-flex; gap: 6px; align-items: center; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.08em; color: var(--ember-2); white-space: nowrap; }
.topbar-site .ico { width: 13px; height: 13px; }
.comm-menu { position: relative; }
.comm-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 9px; font: 700 1rem/1 var(--display); letter-spacing: 0.12em; color: var(--ink); background: rgb(20 20 25 / 0.9); }
.comm-menu .caret { color: var(--muted); font-size: 0.7rem; }
/* traces (js/core/traces.js): now and then a thin highlight runs once around an outline, then fades; one at a time */
.trace { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1.5px; opacity: 0; z-index: 3;
  background: conic-gradient(from var(--a, 0deg), transparent 0deg, transparent 290deg, var(--trace-c, rgb(255 200 140)) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ftile > .trace, .fhero > .trace { inset: 0; padding: 3px; z-index: 6; filter: drop-shadow(0 0 4px var(--trace-c)); }
.ftile > .trace.go, .fhero > .trace.go { animation-name: traceRunBright; }
@keyframes traceRunBright { 0% { --a: 0deg; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { --a: 360deg; opacity: 0; } }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.trace.go { animation: traceRun 1.8s ease-in-out forwards; }
@keyframes traceRun { 0% { --a: 0deg; opacity: 0; } 12% { opacity: 0.85; } 85% { opacity: 0.85; } 100% { --a: 360deg; opacity: 0; } }
/* the bottom bar's trace: a short light running right to left along its top edge */
.trace-line-rtl { inset: -2px 0 auto 0; height: 3px; padding: 0; border-radius: 0; -webkit-mask: none; mask: none; filter: blur(0.6px) drop-shadow(0 0 6px rgb(255 170 80 / 0.9));
  background: linear-gradient(270deg, transparent, rgb(255 190 120 / 0.25) 55%, rgb(255 245 225 / 1) 92%, transparent); background-size: 160px 100%; background-repeat: no-repeat; background-position: calc(100% + 160px) 0; }
.trace-line-rtl.go { animation: traceRtl 1.3s cubic-bezier(.55,.1,.35,1) forwards; }
@keyframes traceRtl { 0% { background-position: calc(100% + 160px) 0; opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { background-position: -160px 0; opacity: 0; } }
.comm-menu .comm-drop { position: absolute; right: 0; top: 100%; z-index: 70; display: grid; grid-template-columns: repeat(5, 40px); gap: 12px; padding: 14px; margin-top: 8px; border-radius: 12px; background: #0e0e12; border: 1px solid var(--line-2); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.comm-menu .comm-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* round 11: a mouse click no longer keeps it open; the keyboard (focus-visible) and touch screens (a tap) still open it */
.comm-menu:hover .comm-drop, .comm-menu:has(:focus-visible) .comm-drop { opacity: 1; visibility: visible; transition: opacity 0.08s ease, visibility 0s; }
.comm-menu:hover .comm-btn, .comm-menu:has(:focus-visible) .comm-btn { border-color: var(--ember); }
@media (hover: none) { .comm-menu:focus-within .comm-drop { opacity: 1; visibility: visible; transition: opacity 0.08s ease, visibility 0s; } }
.comm { display: flex; flex-wrap: wrap; gap: 10px; }
.comm-a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: transform 0.15s, filter 0.15s; text-decoration: none !important; }
.comm-a img { width: 100%; height: 100%; object-fit: contain; }
.comm-a:hover, .comm-a:focus-visible { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 2px #ffd08a, 0 0 18px 4px rgb(255 122 26 / 0.65); }
.comm-lg .comm-a { width: 52px; height: 52px; }
.main { flex: 1 0 auto; width: 100%; max-width: 1480px; margin: 0 auto; padding-block: 24px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); outline: none; }
.foot { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgb(11 11 14 / 0.75), rgb(5 5 6 / 0.85)); }
.foot-in { max-width: 1480px; margin: 0 auto; padding-block: 32px 30px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 620px) minmax(max-content, 1fr); gap: 18px 30px; align-items: center; }
.foot-l { display: flex; flex-direction: column; align-items: center; gap: 8px; justify-self: center; }
.foot-logo-a { line-height: 0; }
.foot-logo { height: 104px; width: auto; }
.foot-site { font: 700 1.15rem/1.2 var(--display); letter-spacing: 0.08em; color: var(--ember-2); }
.foot-r { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-self: center; }
.comm-foot { justify-content: center; }
.comm-foot .comm-a { width: clamp(18px, 2vw, 28px); height: clamp(18px, 2vw, 28px); }   /* shrinks to about half on narrow windows */
.foot-join { font: 700 1.2rem/1.2 var(--display); letter-spacing: 0.14em; color: var(--ink); }
.foot-b { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; justify-self: center; width: 100%; }
.foot-b > * { margin-inline: auto; text-align: center; }
.foot-about { font-size: 0.9rem; color: #d4cec5; }
.foot-copy { font: 600 0.74rem/1.5 var(--mono); color: var(--muted); letter-spacing: 0.08em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; font-size: 0.88rem; }
.foot-links .dot { color: var(--dim); }

/* ---------- site search ---------- */
.ss { position: relative; }
.ss-box { display: flex; align-items: center; gap: 8px; width: clamp(120px, 12vw, 180px); padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--void); }
.ss-box:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft); }
.ss-box .ico { width: 16px; height: 16px; color: var(--muted); }
.ss-box input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: 0.9rem var(--body); padding: 10px 0; }
.ss-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: min(440px, 92vw); margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: #0e0e12; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.ss-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.ss-item.on, .ss-item:hover { background: var(--ember-soft); }
.ss-thumb { width: 34px; height: 34px; object-fit: contain; display: grid; place-items: center; }
.ss-thumb.ss-card { height: 46px; object-fit: cover; border-radius: 3px; }
.ss-ico { color: var(--ember-2); } .ss-ico .ico { width: 18px; height: 18px; }
.ss-txt { display: flex; flex-direction: column; min-width: 0; }
.ss-txt strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-txt span { font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-kind { font: 600 0.6rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.ss-empty { padding: 10px; color: var(--muted); font-size: 0.86rem; }

/* ---------- background corner glows ---------- */
.corner-glow { position: fixed; z-index: 0; width: 46vmax; height: 46vmax; pointer-events: none; transition: opacity 1.2s ease; }
.corner-glow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 110 20 / 0.12), transparent 70%); animation: cornerPulse 9s ease-in-out infinite; }
body.mq-on .corner-glow { opacity: 0; transition: opacity 0s; }
.corner-tr { right: -18vmax; top: -18vmax; }
.corner-bl { left: -18vmax; bottom: -18vmax; }
.corner-bl::before { animation-delay: -4.5s; }
@keyframes cornerPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .corner-glow { animation: none; } }

/* ---------- always-visible bar ---------- */
.devbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: block; padding: 7px max(16px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); text-align: center; font: 600 0.82rem/1.3 var(--body); color: var(--ember) !important; background: rgb(8 8 10 / 0.92); border-top: 1px solid rgb(255 122 26 / 0.3); backdrop-filter: blur(6px); }
.devbar:hover { color: var(--ember-2) !important; text-decoration: underline; }


/* brief fade when a faction or card page opens */
.fade-in { animation: fadeIn 0.42s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* ---------- embers ---------- */
.embers { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }
.app { position: relative; z-index: 1; }

/* ---------- icons ---------- */
.ico { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -0.16em; }
.ico svg { width: 100%; height: 100%; display: block; }
.ico-shard { color: #7fd8ff; } .ico-core { color: #ffb347; } .ico-prism { color: #e48bff; } .ico-axion { color: #9b8cff; }
.ico-dominance { color: #e3c27f; } .ico-resonance { color: #ff7a9a; } .ico-atk { color: var(--melee); } .ico-def { color: #8fb3ff; }

/* ---------- controls ---------- */
button { font: inherit; color: inherit; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--steel); color: var(--ink); font: 600 0.86rem/1 var(--body); letter-spacing: 0.02em; text-decoration: none !important; }
.btn:hover:not(:disabled) { border-color: var(--ember); box-shadow: 0 0 16px rgb(255 122 26 / 0.15); }
.btn .ico { width: 15px; height: 15px; }
.btn-ghost { background: transparent; }
.btn.small { padding: 6px 10px; font-size: 0.78rem; }
.btn-clear { flex: 0 0 auto; margin-left: auto; padding: 14px 26px; font: 700 0.96rem/1 var(--mono); letter-spacing: 0.14em; color: #160800; background: linear-gradient(180deg, #ff9a42, #ff6a0a); border: 1px solid #ffb15c; cursor: pointer; }
.btn-clear:hover { filter: brightness(1.1); box-shadow: 0 0 18px 3px rgb(255 106 10 / 0.65), 0 0 40px rgb(255 120 30 / 0.35); }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); background: var(--plate); color: var(--ink); font-size: 1rem; }
.icon-btn:disabled { opacity: 0.35; }
.icon-btn:hover:not(:disabled) { border-color: var(--ember); }
.icon-btn .ico { width: 18px; height: 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--plate); color: #d4cec5; font: 500 0.8rem/1.1 var(--body); text-decoration: none !important; }
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip[aria-pressed="true"], .chip.open { border-color: var(--ember); color: var(--ink); background: var(--ember-soft); }
.chip-sm { padding: 3px 9px; font-size: 0.76rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 500 0.72rem/1.3 var(--mono); border: 1px solid var(--line-2); color: #d4cec5; background: var(--plate); white-space: nowrap; }
.pill-preview { color: #1a1205; background: var(--warn); border-color: transparent; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pill-cost { color: #ffd59a; border-color: rgb(242 180 67 / 0.35); background: rgb(242 180 67 / 0.08); }
.lnk { all: unset; cursor: pointer; color: var(--ember-2); border-bottom: 1px solid rgb(255 177 92 / 0.3); display: inline-flex; align-items: center; gap: 5px; }
.lnk:hover { border-bottom-color: var(--ember-2); text-decoration: none; }
.lnk:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.lnk .ico { width: 12px; height: 12px; }
.notice { border-left: 3px solid var(--warn); background: rgb(242 180 67 / 0.07); padding: 10px 12px; border-radius: 0 8px 8px 0; font-size: 0.88rem; color: #f4dcb0; }
.panel { background: var(--abyss); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
select, input[type=number] { font: 0.86rem var(--body); color: var(--ink); background: var(--plate); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; max-width: 100%; }
select:hover { border-color: var(--muted); }
select option { background: #121620; color: var(--ink); }   /* dropdown lists match the panels */

/* ---------- tooltip ---------- */
.tx-word.has-gloss, .tx-trait, .tx-head, .tx-token, .tx-vp, .tx-stat { border-bottom: 1px dotted rgb(163 157 149 / 0.6); }
.tip { position: fixed; z-index: 90; max-width: 320px; padding: 10px 12px; border-radius: 9px; background: #101014; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 0.84rem; line-height: 1.45; color: #e2ddd5; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
.tip-cat { font: 500 0.64rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-2); }
.tip-term { font: 700 0.95rem/1.2 var(--display); color: var(--ink); }
.tip-card { position: fixed; z-index: 89; width: 170px; height: 238px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 14px 28px rgb(0 0 0 / 0.6)); }
.tip-card.tip-card-lg { width: 220px; height: 308px; }

/* ---------- the 3D card ---------- */
.c3d { --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --on: 0; --dx: 0; --dy: 0; --c3d-accent: var(--ember);
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; max-width: 100%; perspective: 1100px; border: 0; padding: 0; background: none; -webkit-tap-highlight-color: transparent; }
.c3d-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(calc(var(--on) * -4px)); will-change: transform; }
.c3d-face { position: absolute; inset: 0; border-radius: 4.6% / 3.3%; overflow: hidden; background: #111; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c3d-accent) 80%, transparent); transition: box-shadow 0.25s ease; }
/* faction colour: a thin stroke always, and a glow behind the card on hover */
.c3d:hover .c3d-face { box-shadow: 0 0 16px 1px color-mix(in srgb, var(--c3d-accent) 32%, transparent), 0 0 40px color-mix(in srgb, var(--c3d-accent) 14%, transparent); }   /* glow only, no stroke */
.c3d-face { transition: box-shadow 0.25s ease, opacity 0.2s ease; }
.c3d-face.c3d-out { opacity: 0; }
/* the art drifts slightly against the tilt for depth, scaling up just enough that its edge is never exposed */
.c3d-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
  transform: translate3d(calc(var(--dx) * -5px), calc(var(--dy) * -5px), 0) scale(calc(1 + var(--on) * 0.02)); }
/* a soft, wide glare, like light on a matte card */
.c3d-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: calc(0.10 + var(--on) * 0.6);
  background: radial-gradient(ellipse 90% 75% at var(--px) var(--py), rgb(255 255 255 / 0.65) 0%, rgb(255 255 255 / 0.16) 40%, transparent 72%); }
.c3d-edge { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), inset 0 0 24px rgb(0 0 0 / 0.35); }
/* Foil. Real holofoil shows a narrow band of spectral colour where the light catches it, shifting as the card turns:
   a colour band that moves with the angle, masked to the light. The band never repeats, so no seam can show. */
.c3d-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at var(--px) var(--py), #000 0%, rgb(0 0 0 / 0.6) 45%, rgb(0 0 0 / 0.18) 85%);
          mask-image: radial-gradient(ellipse 85% 75% at var(--px) var(--py), #000 0%, rgb(0 0 0 / 0.6) 45%, rgb(0 0 0 / 0.18) 85%);
  background-image: linear-gradient(calc(118deg + var(--dx) * 60deg),
    transparent 30%, rgb(255 70 110 / 0.6) 38%, rgb(255 205 80 / 0.6) 43%, rgb(90 255 170 / 0.6) 48%, rgb(80 170 255 / 0.6) 53%, rgb(190 110 255 / 0.6) 58%, transparent 66%);
  background-repeat: no-repeat; background-size: 300% 300%; background-position: calc(50% + var(--dx) * 100%) calc(50% + var(--dy) * 80%); }
.c3d-foil-holo { opacity: calc(0.24 + var(--on) * 0.66); }
.c3d-foil-holo-soft { opacity: calc(0.14 + var(--on) * 0.42); }
/* colour treatment (holo art versions) */
.c3d-foil-color { opacity: calc(0.16 + var(--on) * 0.46); mix-blend-mode: overlay; }
.c3d-shadow { position: absolute; left: 8%; right: 8%; bottom: -4%; height: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.75), transparent); filter: blur(10px);
  transform: translate(calc(var(--dx) * -20px), calc(var(--on) * 6px)); opacity: calc(0.7 + var(--on) * 0.15); }
.c3d-empty .c3d-face::after { content: "Image coming soon"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 0.8rem var(--mono); color: var(--dim); }
.c3d-empty .c3d-art { visibility: hidden; }
.c3d-lg { touch-action: pan-y; }
@media (prefers-reduced-motion: reduce) { .c3d-tilt { transform: none !important; } .c3d-art { transform: none; } .c3d-shadow { transform: none; } }

/* ---------- endless card scroll ---------- */
.mq { position: relative; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq.mq-grab { cursor: grabbing; }
.mq-track { display: flex; gap: 14px; width: max-content; padding: 28px 0; will-change: transform; }
.mq-item { position: relative; flex: 0 0 auto; width: 150px; aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 7px; overflow: hidden; background: var(--plate); cursor: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.mq-sm .mq-item { width: 96px; border-radius: 5px; }
.mq-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* the hovered card grows where it is */
.mq-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--mq-fac, var(--ember)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.mq:not(.mq-grab) .mq-item:hover, .mq-item:focus-visible { transform: scale(1.2); z-index: 2; box-shadow: 0 14px 28px rgb(0 0 0 / 0.7); }
.mq:not(.mq-grab) .mq-item:hover::after, .mq-item:focus-visible::after { opacity: 1; }

/* ---------- home hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; gap: 18px; justify-content: flex-end; min-height: 640px; margin: -24px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 28px; padding: 84px max(16px, env(safe-area-inset-left, 0px)) 18px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; animation: heroIn 2.6s ease-out; }
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 5 6 / 0.94) 0%, rgb(5 5 6 / 0.62) 45%, rgb(5 5 6 / 0.2) 100%), linear-gradient(0deg, var(--void) 0%, transparent 45%); }
/* the faction characters crossfade in turn: 8 frames, 6 seconds each */
/* artwork from the faction pages: 12 frames, 6 seconds each, edges feathered to transparent */
.hero-frame { position: absolute; inset: -2% -2% -2% 18%; background-size: cover; background-position: center 30%; opacity: 0; filter: saturate(1.05);
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 58% 46%, #000 35%, rgb(0 0 0 / 0.55) 60%, transparent 92%);
          mask-image: radial-gradient(ellipse 62% 70% at 58% 46%, #000 35%, rgb(0 0 0 / 0.55) 60%, transparent 92%);
  animation: heroFade 72s linear infinite; animation-delay: calc(var(--i) * 6s - 1s); }
@keyframes heroFade { 0% { opacity: 0; transform: scale(1.03); } 2.2% { opacity: 1; } 8.33% { opacity: 1; } 10.6% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-frame { animation: none; } .hero-frame:first-child { opacity: 1; } }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.hero-tag { width: min(440px, 90%); height: auto; opacity: 0.9; }
.hero-h { font: 700 clamp(2.4rem, 1.4rem + 4.4vw, 4.8rem)/1 var(--display); letter-spacing: 0.02em; text-shadow: 0 4px 30px rgb(0 0 0 / 0.8); }
.hero-h span { background: linear-gradient(180deg, #ffe0b0 0%, #ff9a42 55%, #e05a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-facs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hero-fac { position: relative; width: 82px; height: 82px; border: 0; padding: 0; background: none; display: grid; place-items: center; transition: transform 0.18s ease; }
.hero-fac img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.6)); transition: filter 0.18s; }
.hero-fac:hover, .hero-fac:focus-visible { transform: scale(1.16); z-index: 2; }
.hero-fac:hover img, .hero-fac:focus-visible img { filter: drop-shadow(0 0 14px var(--fac)) brightness(1.15); }
/* one line under the icons, faded in quickly for the hovered faction */
.hero-fac-line { min-height: 1.7em; padding-left: 14px; font-size: 1.5rem; color: #ece6dc; opacity: 0; transform: translateY(-4px); transition: opacity 0.45s ease, transform 0.45s ease; text-shadow: 0 2px 12px rgb(0 0 0 / 0.95); }
.hero-fac-line strong { font: 700 1.6rem/1.2 var(--display); letter-spacing: 0.06em; filter: brightness(1.25) drop-shadow(0 0 10px currentColor); }
.hero-fac-line.on { opacity: 1; transform: none; }
.hero-fac-sub { margin-left: 0.9em; font-size: 1.05rem; }
.hero .mq { position: relative; z-index: 1; margin-top: 64px; }

/* ---------- filters ---------- */
.browser { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 90px; }
.browser-h { margin-top: 30px; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.1 var(--display); letter-spacing: 0.08em; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; align-items: start; padding: 16px; background: var(--abyss); border: 1px solid var(--line); border-radius: var(--r); }
.fleft { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fright { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--void); max-width: 100%; }
.search:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft); }
.search .ico { color: var(--muted); width: 16px; height: 16px; }
.search input { flex: 1 1 auto; min-width: 0; background: none; border: 0; color: var(--ink); font: 0.92rem var(--body); padding: 10px 0; outline: none; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tg { display: inline-flex; align-items: center; gap: 7px; color: #d4cec5; font-size: 0.86rem; }
.tg input { accent-color: var(--ember); width: 16px; height: 16px; margin: 0; }
.fac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--plate); color: #d4cec5; font: 500 0.82rem/1 var(--body); }
.fchip img { width: 22px; height: 22px; object-fit: contain; }
.fchip:hover { border-color: var(--fac); }
.fchip[aria-pressed="true"] { border-color: var(--fac); color: var(--ink); background: color-mix(in srgb, var(--fac) 16%, var(--plate)); }
.frow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.frow-top { align-items: flex-start; flex-wrap: nowrap; }
.frow-top .fac-chips { flex: 1 1 auto; }
select.has-sel { border-color: var(--ember); color: var(--ink); box-shadow: 0 0 0 1px var(--ember), 0 0 14px rgb(255 122 26 / 0.45); }
.fsort { display: inline-flex; align-items: center; gap: 8px; }
.flabel { font: 600 0.64rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }
.range-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.range-wrap { position: relative; }
/* hovering a range button shows its slider; it hides when the pointer leaves */
.range-pop { position: absolute; left: 0; top: 100%; z-index: 30; display: none; align-items: center; gap: 10px; width: 280px; padding: 14px 12px 12px; margin-top: 6px; border: 1px solid var(--ember); border-radius: 10px; background: #120c08; box-shadow: var(--shadow); }
.range-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.range-wrap:hover .range-pop { display: flex; }   /* hover only, even after clicking or dragging */
.dual { position: relative; flex: 1 1 auto; min-width: 0; height: 24px; }
.dual input[type=range] { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual input[type=range]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.dual input[type=range]::-moz-range-track { height: 4px; background: transparent; }
.dual input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--ember); border: 2px solid #160800; margin-top: -7px; cursor: grab; box-shadow: 0 0 10px rgb(255 122 26 / 0.6); }
.dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--ember); border: 2px solid #160800; cursor: grab; }
.dual-track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--line-2); }
.dual-fill { position: absolute; top: 10px; height: 4px; border-radius: 2px; background: var(--ember); }
.dual-min { font: 0.74rem var(--mono); color: var(--dim); }
.dual-val { font: 600 0.86rem var(--mono); color: var(--ink); min-width: 4.5em; }
.fbottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.fbottom > .search { flex: 0 1 320px; min-width: 220px; order: 0; }
.fbottom > .fsort { order: 0; }
.fbottom .viewsw { margin-left: auto; align-self: flex-end; order: 9; }
.fdrawer { flex: 1 1 100%; order: 3; }
.fdrawer > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-2); font: 600 0.74rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember-2); }
.fdrawer > summary::-webkit-details-marker { display: none; }
.fdrawer > summary .ico { width: 15px; height: 15px; }
.fdrawer[open] > summary { background: var(--ember-soft); border-color: var(--ember); }
.fcount:not(:empty) { background: var(--ember); color: #160800; border-radius: 999px; padding: 2px 7px; font-size: 0.7rem; }
.fdrawer-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 24px; padding: 16px 2px 4px; }
.fgroup { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pins { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; align-items: center; order: 1; }
.pin { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 12px; border-radius: 999px; border: 1px solid var(--ember); background: var(--ember-soft); color: var(--ink); font: 0.8rem var(--body); }
.pin span { color: var(--muted); }
#fclear { order: 2; }
.rbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rcount { font: 500 0.8rem var(--mono); color: var(--muted); letter-spacing: 0.06em; }
.viewsw { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.viewsw button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--plate); color: var(--muted); padding: 8px 13px; font: 600 0.82rem/1 var(--body); }
.viewsw button + button { border-left: 1px solid var(--line-2); }
.viewsw button[aria-pressed="true"] { background: var(--ember); color: #160800; }
.viewsw .ico { width: 15px; height: 15px; }

/* ---------- grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 26px 20px; padding-top: 4px; }
.tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tile-card { display: block; width: 100%; aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--plate); box-shadow: 0 6px 16px rgb(0 0 0 / 0.5); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.tile-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-card:hover, .tile-card:focus-visible { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 28px rgb(0 0 0 / 0.6), 0 0 0 2px color-mix(in srgb, var(--fac) 70%, #fff), 0 0 22px color-mix(in srgb, var(--fac) 35%, transparent); }
.tile-noimg { display: grid; place-items: center; height: 100%; font: 0.76rem var(--mono); color: var(--dim); }
.tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 7px; background: var(--plate); border: 1px solid var(--line); }
.tile-name { font: 700 0.78rem/1.25 var(--display); letter-spacing: 0.01em; overflow-wrap: break-word; word-break: normal; min-width: 0; flex: 1 1 auto; }
.tile-meta { flex-direction: column; align-items: stretch; gap: 6px; }
.tile-name { text-align: center; }
.tile-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tile-num { font: 500 0.7rem/1 var(--mono); color: var(--muted); letter-spacing: 0.06em; margin-right: 2px; }
.tile-row img { object-fit: contain; }
.ti-fac, .ti-rar { width: 32px; height: 32px; }
.ti-type { width: 24px; height: 24px; }
.grid-more { height: 1px; grid-column: 1 / -1; }
.empty { padding: 48px 16px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; border: 1px dashed var(--line-2); border-radius: var(--r); }
.empty-t { font: 700 1.1rem var(--display); }

/* ---------- pages of results ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 26px 0 6px; }
.pager-n { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--plate); color: var(--ink); font: 600 0.9rem/1 var(--mono); cursor: pointer; }
.pager-n:hover { border-color: var(--ember); }
.pager-n[aria-current="page"] { background: var(--ember); color: #160800; border-color: var(--ember); }
.pager-arrow { width: 42px; height: 42px; font-size: 1.5rem; }
.pager-info { margin-left: 10px; font: 0.8rem var(--mono); color: var(--muted); }

/* ---------- list ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--abyss); }
.cards-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.cards-table th { position: sticky; top: 0; background: var(--plate); font: 600 0.66rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); text-align: left; padding: 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.th-btn { all: unset; cursor: pointer; } .th-btn:hover { color: var(--ink); } .th-btn:focus-visible { outline: 2px solid var(--ember); }
.cards-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cards-table tbody tr { cursor: pointer; } .cards-table tbody tr:hover td, .cards-table tbody tr:focus-visible td { background: rgb(255 122 26 / 0.06); }
.cards-table .ctr, .cards-table th.ctr { text-align: center; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.cards-table .num { font-family: var(--mono); color: var(--muted); }
.td-ico { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.td-ico img { width: 28px; height: 28px; object-fit: contain; }
.cards-table .name { width: 1%; white-space: nowrap; padding-right: 22px; }
.cards-table .mark { width: 1%; padding: 8px 2px; color: #6cb8ff; font-size: 1.05rem; text-align: center; }
.arrows { display: inline-flex; gap: 4px; font: 700 1.3rem/1 var(--body); }
.ar-melee { color: var(--melee); } .ar-ranged { color: var(--ranged); } .ar-guard { color: var(--guard); }

/* ---------- card page ---------- */
.detail { display: flex; flex-direction: column; gap: 18px; }
.dv-bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 80px) + 6px); z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; margin: -8px -10px 0; border-radius: 12px; background: rgb(5 5 6 / 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
.dv-step { display: inline-flex; align-items: center; gap: 8px; margin-left: 26px; }
.dv-step-l { font: 600 0.6rem/1.15 var(--mono); letter-spacing: 0.12em; color: var(--muted); text-align: center; }
.dv-all { font-family: var(--mono); letter-spacing: 0.12em; }
.dv-count { font: 500 0.78rem var(--mono); color: var(--muted); min-width: 5.5em; text-align: center; font-variant-numeric: tabular-nums; }
.dv-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-left: auto; min-width: 0; }
.dv-nav::-webkit-scrollbar { display: none; }
.dv-tab { padding: 9px 14px; border-radius: 7px; border: 1px solid var(--line-2); color: var(--ink); font: 700 0.86rem/1 var(--display); letter-spacing: 0.08em; white-space: nowrap; text-decoration: none !important; background: rgb(255 255 255 / 0.03); }
.dv-tab:hover { border-color: var(--ember); }
.dv-tab:hover { color: var(--ink); } .dv-tab.on { color: var(--ink); background: color-mix(in srgb, var(--fac) 18%, transparent); }
.dv-body { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 40px; align-items: start; }
.dv-stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 80px) + 76px); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 6px 0; }
.dv-halo { position: absolute; inset: -6% -16% 18%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--fac) 26%, transparent), transparent 75%); filter: blur(8px); }
.dv-stage .c3d { max-width: 350px; }
.variants { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; position: relative; }
.var { width: 46px; height: 64px; padding: 0; border-radius: 5px; border: 1px solid var(--line-2); background: var(--plate); overflow: hidden; cursor: pointer; }
.var img { width: 100%; height: 100%; object-fit: cover; }
.var[aria-pressed="true"] { border-color: var(--fac); box-shadow: 0 0 0 2px var(--fac); }
.dv-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dv-head { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; margin-bottom: 20px; }
.dv-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dv-title .pill-preview { margin-top: 10px; flex: 0 0 auto; }
.dv-id { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 500 0.76rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dv-id .dot { color: var(--dim); }
.dv-name { font: 700 clamp(2rem, 1.5rem + 2.4vw, 3.1rem)/1.05 var(--display); }
.dv-lore { font: italic 1.04rem/1.55 var(--body); color: #e3d3b4; max-width: 62ch; margin-bottom: 14px; }
.dv-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 7px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--plate); font: 600 0.84rem/1 var(--body); color: var(--ink); }
.badge img { width: 22px; height: 22px; object-fit: contain; }
button.badge:hover { border-color: var(--ember); }
.badge-fac { border-color: color-mix(in srgb, var(--fac) 70%, transparent); background: color-mix(in srgb, var(--fac) 14%, var(--plate)); }
.badge-rar { color: #e3c27f; }
.dv-sec { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--abyss); border: 1px solid var(--line); position: relative; scroll-margin-top: calc(var(--topbar-h, 80px) + 76px); }
.dv-sec::before { content: ""; position: absolute; left: 20px; top: -1px; width: 48px; height: 2px; background: var(--fac); box-shadow: 0 0 10px var(--fac); }
.dv-sec-h { font: 700 1.05rem/1.2 var(--display); letter-spacing: 0.06em; }
.dv-sec h3.eyebrow { font-family: var(--mono); }

/* card details: one clean list, two columns on wide screens */
.cd { display: flex; flex-direction: column; gap: 16px; }
.cd-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
.cd-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cd-row dt { font: 600 0.66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.cd-row dd { margin: 0; font-size: 0.92rem; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cd-v { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cd-ico { width: 20px; height: 20px; object-fit: contain; }
.cd-pos { flex-direction: column; align-items: flex-start; gap: 2px; }
.cd-pos-k { display: inline-block; min-width: 7.4em; font: 600 0.64rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.cd-sub { display: flex; align-items: center; gap: 8px; font: 600 0.7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.cd-sub .ico { width: 15px; height: 15px; color: var(--ember-2); }
/* stats: one compact strip */
.statline { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--steel); border: 1px solid var(--line-2); }
.sv { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.86rem; color: var(--muted); }
.sv .ico { width: 17px; height: 17px; align-self: center; }
.sv b { font: 700 1.3rem/1 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-cost b { font: 600 0.9rem var(--body); color: #ffd59a; }

.stats-wrap { display: flex; flex-direction: column; gap: 10px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--steel); border: 1px solid var(--line-2); }
.stat-ico { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgb(255 255 255 / 0.04); }
.stat-ico .ico { width: 21px; height: 21px; }
.stat-v { font: 700 1.55rem/1 var(--body); font-variant-numeric: tabular-nums; }
.stat-k { font: 500 0.62rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.stats-extra { display: flex; flex-wrap: wrap; gap: 8px; }

/* abilities */
.abilities { display: flex; flex-direction: column; gap: 10px; }
.kw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kw { padding: 6px 12px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--fac) 60%, var(--line-2)); background: color-mix(in srgb, var(--fac) 10%, var(--plate)); color: var(--ink); font: 700 0.78rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.ab { padding: 12px 14px; border-radius: 9px; background: var(--plate); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ab-ability { border-left: 3px solid var(--fac); }
.ab-ultimate { border-left-color: #e3c27f; background: linear-gradient(90deg, rgb(227 194 127 / 0.08), var(--plate) 40%); }
.ab-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ab-type { display: inline-flex; align-items: center; gap: 6px; font: 600 0.66rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-2); }
.ab-type .ico { width: 16px; height: 16px; }
.ab-name { font: 700 1rem/1.2 var(--display); letter-spacing: 0.03em; }
.ab-body { font-size: 0.95rem; line-height: 1.6; color: #e2ddd5; }
.tx-sym { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; vertical-align: -0.3em; border-radius: 5px; background: rgb(255 255 255 / 0.06); margin: 0 1px; color: var(--ink); }
.tx-sym .ico { width: 0.95em; height: 0.95em; }
.tx-res { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.tx-res b, .tx-stat b, .tx-vp b, .tx-pt b { font-weight: 700; color: var(--ink); }
.tx-shard .tx-sym { color: #7fd8ff; } .tx-core .tx-sym { color: #ffb347; } .tx-prism .tx-sym { color: #e48bff; } .tx-axion .tx-sym { color: #9b8cff; }
.tx-abname { font: 700 0.95em var(--display); color: var(--ink); letter-spacing: 0.03em; }
.tx-reminder { font-style: italic; color: var(--muted); font-size: 0.92em; }
.tx-trait { font-weight: 600; color: var(--ink); }
.tx-head { font: 600 0.76em var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: #ffd59a; }
.tx-vp.tx-resonance { color: #ffb0c2; } .tx-vp.tx-dominance { color: #e9cf9e; }
.tx-pt { font-family: var(--mono); }
.tx-caps { font-weight: 700; }
.tx-retired { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 5px; border: 1px dashed var(--warn); color: var(--warn); font: 0.8em var(--mono); }
.tx-fac img { width: 1.2em; height: 1.2em; vertical-align: -0.25em; object-fit: contain; }
.tx-bullet { color: var(--fac); margin: 0 6px 0 10px; }
.tx-lead { margin-right: 4px; }

/* fact lists */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: 0.9rem; }
.facts dt { font: 600 0.66rem/1.7 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.facts-inline { padding-top: 4px; border-top: 1px solid var(--line); }

/* gameplay: small labelled tiles */
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.gp-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 9px; background: var(--plate); border: 1px solid var(--line); min-width: 0; }
.gp-wide { grid-column: 1 / -1; }
.gp-k { display: inline-flex; align-items: center; gap: 8px; font: 600 0.66rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.gp-k .ico { width: 16px; height: 16px; }
.gp-v { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; color: #e8e2d8; }

/* targeting range */
.bm { display: flex; flex-direction: column; gap: 14px; }
.bm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.bm-body { display: grid; grid-template-columns: minmax(0, 420px) minmax(200px, 1fr); gap: 20px; align-items: start; }
.bm-side-col { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.bm-side-col .bm-explain { width: 100%; }
.bm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bf-pos rect { stroke-width: 1.5; }
.bm-I rect { fill: rgb(79 209 111 / 0.16); stroke: var(--pos-i); }
.bm-N rect { fill: rgb(141 138 134 / 0.16); stroke: var(--pos-n); }
.bm-X rect { fill: rgb(224 72 72 / 0.12); stroke: var(--pos-x); }
.bm-code { fill: var(--ink); font: 600 13px var(--body); pointer-events: none; }
.bm-X .bm-code { fill: #e88a8a; }
.bm-side { fill: var(--ember); font: 600 10px var(--mono); letter-spacing: 0.2em; }
/* arrow lines drift slowly while shown */
.bf-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 5; animation: lineFlow 1.6s linear infinite; }
@keyframes lineFlow { to { stroke-dashoffset: -19; } }
@media (prefers-reduced-motion: reduce) { .bf-line, .bf-from-glow { animation: none; } }
.bf-line.bm-melee { stroke: var(--melee); }
.bf-line.bm-ranged { stroke: var(--ranged); }
.bf-line.bm-guard { stroke: var(--guard); stroke-dasharray: 8 4; animation-duration: 1.2s; }
.bm-head.bm-melee path { fill: var(--melee); } .bm-head.bm-ranged path { fill: var(--ranged); } .bm-head.bm-guard path { fill: var(--guard); }
.bf-pos { cursor: pointer; }
.bf-pos:focus { outline: none; }
.bf-pos:focus rect:first-child { stroke: #fff; stroke-width: 2.5; }
.bf-opp rect { fill: rgb(255 255 255 / 0.03); stroke: var(--line-2); }
.bf-opp .bm-code { fill: var(--dim); }
.bf-hit rect { stroke-width: 2.5; }
.bf-hit-melee rect { fill: rgb(79 209 111 / 0.22); stroke: var(--melee); }
.bf-hit-ranged rect { fill: rgb(255 154 46 / 0.22); stroke: var(--ranged); }
.bf-hit-guard rect { fill: rgb(78 168 255 / 0.2); stroke: var(--guard); }
/* the card's own position: amber, with a soft glow pulsing around the inner edge */
.bf-from rect:first-child { fill: rgb(255 176 40 / 0.28); stroke: #ffb328; stroke-width: 2.5; }
.bf-from-glow { fill: none; stroke: #ffd27a; stroke-width: 3; filter: blur(2px); animation: innerGlow 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes innerGlow { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
.bf-from .bm-code { fill: #fff; font-weight: 700; }
.bf-pick:hover rect:first-child { stroke: #fff; }
.bm-divide { stroke: var(--line-2); stroke-dasharray: 2 5; }
.bm-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-kinds .chip { padding: 9px 15px; font: 600 0.88rem/1 var(--mono); gap: 8px; }
.bm-kinds .chip:disabled { opacity: 0.35; filter: grayscale(1); }
.bm-swatch { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.bm-swatch.bm-melee { background: var(--melee); } .bm-swatch.bm-ranged { background: var(--ranged); } .bm-swatch.bm-guard { background: var(--guard); }
.chip-melee[aria-pressed="true"] { border-color: var(--melee); background: rgb(79 209 111 / 0.14); }
.chip-ranged[aria-pressed="true"] { border-color: var(--ranged); background: rgb(255 154 46 / 0.14); }
.chip-guard[aria-pressed="true"] { border-color: var(--guard); background: rgb(78 168 255 / 0.12); }
.bm-explain { display: flex; flex-direction: column; gap: 4px; min-height: 6em; font-size: 0.92rem; color: #e2ddd5; padding: 12px 14px; border-radius: 9px; background: rgb(255 255 255 / 0.03); border: 1px solid var(--line); }
.bm-ex-h { font-weight: 600; color: var(--ink); }
.bm-ex-no { color: #ff6b6b; }
.bm-ex-x { color: #ff6b6b; font-weight: 600; }
.bm-k-special { color: #c58cff; }
/* a clicked Restricted position flashes bright red, then stays marked; an unreached opponent position flashes grey */
.bf-marked rect:first-child { stroke: #ff4545; stroke-width: 2.5; fill: rgb(255 69 69 / 0.22); }
.flash-red rect:first-child { animation: flashRed 0.6s ease-out; }
@keyframes flashRed { 0%, 40% { fill: rgb(255 70 70 / 0.75); stroke: #ff9a9a; } 100% { fill: rgb(255 69 69 / 0.22); stroke: #ff4545; } }
.flash-grey rect:first-child { animation: flashGrey 0.6s ease-out; }
@keyframes flashGrey { 0%, 35% { fill: rgb(200 200 200 / 0.45); stroke: #e0e0e0; } 100% { } }
/* special targeting: positions an ability can target directly, in purple with a pulsing border */
.bf-special rect:first-child { fill: rgb(170 90 255 / 0.22); stroke: #b77bff; stroke-width: 2.5; animation: specialPulse 1.6s ease-in-out infinite; }
@keyframes specialPulse { 0%, 100% { stroke-opacity: 0.55; filter: drop-shadow(0 0 0 rgb(183 123 255 / 0)); } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgb(183 123 255 / 0.9)); } }
.bf-special-ico { pointer-events: none; opacity: 0.95; }
.bm-special { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bm-special-h { font: 700 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; color: #c58cff; }
.chip-special { text-align: left; white-space: normal; }
.chip-special[aria-pressed="true"] { border-color: #b77bff; background: rgb(170 90 255 / 0.16); color: var(--ink); }
.bm-ex-k { margin-top: 6px; font: 700 0.72rem/1.3 var(--mono); letter-spacing: 0.14em; }
.bm-k-melee { color: var(--melee); } .bm-k-ranged { color: var(--ranged); } .bm-k-guard { color: var(--guard); }
.bm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); }
.bm-leg { display: inline-flex; align-items: center; gap: 6px; }
.bm-leg i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.bm-leg.bm-I i { background: rgb(79 209 111 / 0.3); border: 1px solid var(--pos-i); }
.bm-leg.bm-N i { background: rgb(141 138 134 / 0.3); border: 1px solid var(--pos-n); }
.bm-leg.bm-X i { background: rgb(224 72 72 / 0.25); border: 1px solid var(--pos-x); }
.bm-none { padding: 18px; border-radius: 10px; border: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.bm-none-title { font: 700 1rem var(--display); }

/* lore */
.lore { display: flex; flex-direction: column; gap: 14px; }
.lore-fac { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--fac) 40%, var(--line)); background: var(--plate); }
.lore-fac::before { content: ""; position: absolute; inset: 0; background: var(--art) center 25% / cover no-repeat; opacity: 0.35; }
.lore-fac::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(13 13 16 / 0.96) 35%, rgb(13 13 16 / 0.6)); }
.lore-fac-txt { position: relative; z-index: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-width: 70ch; }
.lore-fac-name { display: flex; align-items: center; gap: 10px; font: 700 1.05rem/1.2 var(--display); letter-spacing: 0.04em; }
.lore-fac-name img { width: 34px; height: 34px; object-fit: contain; }
.lore-items { display: flex; flex-wrap: wrap; gap: 6px; }
.lore-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--plate); color: #e3d3b4; font: 500 0.84rem var(--body); text-decoration: none !important; }
.lore-chip:hover { border-color: #e3c27f; }
.lore-kind { font: 600 0.6rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }

/* related */
.related { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.related .mq { width: 100%; }
.btn-fac { padding: 12px 22px; font: 700 0.88rem/1 var(--mono); letter-spacing: 0.12em; color: #0b0b0e; background: var(--fac); border: 1px solid color-mix(in srgb, var(--fac) 70%, #fff); }
.btn-fac:hover { filter: brightness(1.12); box-shadow: 0 0 22px color-mix(in srgb, var(--fac) 60%, transparent); }
.rel-sugg-h { font: 700 1.15rem/1.2 var(--display); letter-spacing: 0.06em; }
.rel-group { width: 100%; }
.rel-group { display: flex; flex-direction: column; gap: 8px; }
.rel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.rel { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
.rel-img { display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 5px; overflow: hidden; background: var(--plate); transition: transform 0.18s, box-shadow 0.18s; }
.rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel:hover .rel-img, .rel:focus-visible .rel-img { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 18px rgb(0 0 0 / 0.55), 0 0 0 1px var(--ember); }
.rel-name { font: 600 0.8rem/1.2 var(--body); overflow-wrap: anywhere; }
.rel-id { font: 0.7rem var(--mono); color: var(--muted); }

/* resources */
.res-cols { columns: 2 260px; column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.res-cols li { break-inside: avoid; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.res-cols a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.res-cols a:hover { color: var(--ember-2); text-decoration: none; }
.res-cols .ico { width: 12px; height: 12px; color: var(--dim); }
.soon { font: 500 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.res-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 36px; }
.res-groups section, .page-read > section { display: flex; flex-direction: column; gap: 10px; }

/* pages */
.page { display: flex; flex-direction: column; gap: 22px; }
.page-head { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
.page-head .search { max-width: 420px; }
.page-read { max-width: 980px; }
.back { align-self: flex-start; }
.glossary { margin: 0; display: flex; flex-direction: column; }
.gl-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.gl-row dt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 0.98rem/1.3 var(--display); letter-spacing: 0.03em; }
.gl-row dt .ico { width: 18px; height: 18px; color: var(--ember-2); }
.gl-row dd { margin: 0; color: #d9d3ca; font-size: 0.94rem; }
.gl-cat { font: 500 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.gl-n { margin-left: 10px; font-size: 0.82rem; }
.gl-fac { width: 24px; height: 24px; object-fit: contain; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.cat-tab { padding: 7px 12px; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--muted); font: 700 0.8rem/1 var(--display); letter-spacing: 0.06em; }
.cat-tab:hover { color: var(--ink); }
.cat-tab[aria-selected="true"] { color: var(--ink); border-color: var(--ember); background: var(--ember-soft); }

/* factions */
.ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ftile { position: relative; overflow: hidden; display: flex; flex-direction: row; gap: 14px; align-items: flex-end; justify-content: flex-start; text-align: left; padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: #0c0c0f; color: var(--ink); text-decoration: none !important; min-height: 250px; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; isolation: isolate; }
.ftile::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art, none) center 22% / cover no-repeat; transition: transform 0.4s ease; }
.ftile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(8 8 10 / 0.96) 8%, rgb(8 8 10 / 0.55) 48%, rgb(8 8 10 / 0.12) 100%); }
.ftile:hover { transform: translateY(-3px); border-color: var(--fac); box-shadow: 0 16px 34px rgb(0 0 0 / 0.5), 0 0 24px color-mix(in srgb, var(--fac) 25%, transparent); }
.ftile:hover::before { transform: scale(1.05); }
.ftile-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-bottom: 4px; }
.ftile-ico { flex: 0 0 auto; width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.8)); }
.ftile-name { font: 700 1.4rem/1.1 var(--display); letter-spacing: 0.04em; text-shadow: 0 2px 10px rgb(0 0 0 / 0.9); }
.ftile-q { color: #dcd4c8; font-size: 0.9rem; text-shadow: 0 1px 6px rgb(0 0 0 / 0.9); }
.ftile-n { font: 500 0.72rem var(--mono); color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.ftile-n .ico { width: 12px; height: 12px; }
.unknown { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.unknown-h { font: 700 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.1 var(--display); letter-spacing: 0.06em; }
.unknown-p { font-size: 1.05rem; color: #d4cec5; }
.ftiles-unknown .ftile { min-height: 210px; }
.ftiles-unknown .ftile::before { filter: saturate(0.85); }
.fhero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; padding: 26px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--fac) 45%, var(--line)); overflow: hidden; isolation: isolate; background: #0b0b0e; }
.fhero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* the faction's artwork crossfades slowly with a gentle zoom */
.fhero-frame { position: absolute; inset: 0; background-size: cover; background-position: center 25%; opacity: 0; animation: fheroFade calc(var(--n) * 8s) linear infinite; animation-delay: calc(var(--i) * 8s - 1s); }
.fhero-frame.fhero-still { opacity: 0.6; animation: fheroZoom 24s ease-in-out infinite alternate; }
@keyframes fheroFade { 0% { opacity: 0; transform: scale(1); } 6% { opacity: 0.6; } 25% { opacity: 0.6; } 33% { opacity: 0; transform: scale(1.07); } 100% { opacity: 0; } }
@keyframes fheroZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .fhero-frame { animation: none; } .fhero-frame:first-child { opacity: 0.6; } }
.fhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(8 8 10 / 0.95) 25%, rgb(8 8 10 / 0.55) 70%, rgb(8 8 10 / 0.35)); }
.fhero-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; align-items: flex-start; }
.fhero-ico { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--fac) 60%, transparent)); }
.fhero-name { font: 700 clamp(2.3rem, 1.6rem + 3vw, 3.6rem)/1 var(--display); color: color-mix(in srgb, var(--fac) 30%, #fff); }
.fhero-q { font: italic 1.08rem/1.4 var(--body); color: #efe8dc; }
.fhero-sum { color: #d9d3ca; max-width: 60ch; }
.fhero-cards { min-width: 0; display: flex; flex-direction: column; align-items: stretch; margin: 6px -26px -26px; }
.fhero-cards .mq { width: 100%; }
.fhero-solo { grid-template-columns: minmax(0, 1fr); min-height: 420px; }
.notices { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-left: 2px solid var(--fac); background: rgb(0 0 0 / 0.35); border-radius: 0 8px 8px 0; }
.notice-line { font-size: 0.9rem; color: #d9d3ca; font-style: italic; }
.fcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; align-items: stretch; }
.pillars { font: 700 0.9rem/1.5 var(--display); letter-spacing: 0.06em; color: color-mix(in srgb, var(--fac) 50%, #fff); }
.pillar { white-space: nowrap; }   /* a pillar never breaks across lines ("The unexpected" stays together) */
.pillar-dot { color: var(--dim); }
.fstat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 1 1 auto; align-content: start; }
.fstat { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 7px; background: var(--plate); border: 1px solid var(--line); text-align: left; min-width: 0; }
button.fstat:hover:not(:disabled) { border-color: var(--fac); }
button.fstat:disabled { opacity: 0.45; }
button.fstat[aria-pressed="true"] { border-color: var(--fac); box-shadow: 0 0 0 1px var(--fac) inset; }
.fstat-txt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; text-align: right; }
.fstat b { font: 700 1.15rem/1 var(--body); font-variant-numeric: tabular-nums; }
.fstat-txt span { font: 600 0.58rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fstat-ico { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.fstat-total { border-color: color-mix(in srgb, var(--fac) 50%, var(--line)); }
.btn-open { padding: 12px 22px; font: 700 0.9rem/1 var(--mono); letter-spacing: 0.14em; color: #160800; background: linear-gradient(180deg, #ff9a42, #ff6a0a); border: 1px solid #ffb15c; }
.btn-open:hover { filter: brightness(1.08); box-shadow: 0 0 24px rgb(255 106 10 / 0.6); }
.fcards { display: flex; flex-direction: column; gap: 14px; }
.fcards-h { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.fcards-title { font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem)/1.1 var(--display); letter-spacing: 0.06em; color: var(--fac); }

/* boot */
.boot, .boot-error { min-height: 60vh; display: grid; place-content: center; gap: 14px; text-align: center; color: var(--muted); font: 0.9rem var(--mono); padding: 24px; }
.boot-mark { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ember); animation: spin 1s linear infinite; }
.boot-error h1 { font-size: 1.4rem; color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } }

/* narrower screens */
.tapbar { display: none; }
@media (max-width: 1100px) { .topbar-site { display: none; } }
@media (max-width: 980px) {
  .dv-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dv-stage { position: relative; top: 0; }
  .dv-stage .c3d { max-width: 260px; }
  .fhero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .topbar-in { gap: 10px; }
  .brand-t { display: none; }
  .topnav-a { padding: 10px 8px; font-size: 0.8rem; }
  .comm-btn { font-size: 0; gap: 0; padding: 9px; }
  .comm-btn::before { content: "☰"; font-size: 0.95rem; }
  .comm-menu .caret { display: none; }
  .hero { padding-top: 40px; min-height: 0; }
  .ss-box { width: 130px; }
  .play-now { padding: 9px 12px; font-size: 0.78rem; }
  .comm-btn { padding: 9px 10px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .foot-r { align-items: center; justify-self: center; }
  .fstat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-body { grid-template-columns: minmax(0, 1fr); }
  .frow-top { flex-wrap: wrap; }
  .hero-fac { width: 58px; height: 58px; } .hero-fac img { width: 48px; height: 48px; }
  .mq-item { width: 112px; }
  .filters { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .fsort { margin-left: 0; }
  .btn-clear { width: 100%; justify-content: center; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .cards-table .m-hide { display: none; }
  .dv-bar { margin: -8px 0 0; }
  .dv-nav { margin-left: 0; width: 100%; }
  .dv-sec { padding: 14px; }
  .gp-row, .gl-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts dd { margin-bottom: 8px; }
  .foot-top { flex-direction: column; align-items: flex-start; }
  body.card-open .main { padding-bottom: 60px; }
  body.card-open .tapbar { display: grid; place-items: center; position: fixed; z-index: 45; border: 0; margin: 0; padding: 0; color: var(--ember-2); background: rgb(13 13 16 / 0.88); backdrop-filter: blur(6px); font: 600 0.75rem/1 var(--mono); letter-spacing: 0.1em; -webkit-tap-highlight-color: transparent; }
  body.card-open .tapbar:disabled { opacity: 0.25; }
  .tap-l { left: 0; top: 40%; height: 120px; width: calc(18px + env(safe-area-inset-left, 0px)); padding-left: env(safe-area-inset-left, 0px) !important; border-radius: 0 10px 10px 0; font-size: 1.3rem !important; }
  .tap-r { right: 0; top: 40%; height: 120px; width: calc(18px + env(safe-area-inset-right, 0px)); padding-right: env(safe-area-inset-right, 0px) !important; border-radius: 10px 0 0 10px; font-size: 1.3rem !important; }
  .tap-b { left: 0; right: 0; bottom: 0; height: calc(44px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px) !important; border-top: 1px solid var(--line) !important; }
}

/* v0.7.0 filters: toggles on the left of the ranges row, ranges pushed right; Sort By sits under the search */
.frow-checks { justify-content: flex-start; align-items: center; gap: 10px 28px; }
.franges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fleft .fsort { align-self: flex-start; }
.ti-rar { width: 36px; height: 36px; }

/* v0.7.0 card page */
.variants-h { margin: 8px 0 0; text-align: center; font: 700 0.78rem/1 var(--mono); letter-spacing: 0.22em; color: var(--fac); text-shadow: 0 0 10px color-mix(in srgb, var(--fac) 50%, transparent); }
.cd-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 22px; }
.cd-row { display: flex; flex-direction: column; gap: 4px; padding: 0; border-bottom: 0; }
.cd-row:last-child { grid-column: span 2; }
.cd-lnk { color: var(--ink); border-bottom-color: rgb(255 255 255 / 0.18); }
.cd-lnk:hover { color: var(--ember-2); border-bottom-color: var(--ember-2); }
.cd-sub { margin-top: 18px; }
.kw-sys { border-color: var(--line-2); background: rgb(255 255 255 / 0.06); color: #f1ebe2; }
.related { align-items: center; }
.btn-fac { color: var(--muted); background: var(--plate); border: 1px solid var(--line-2); transition: background 0.25s, color 0.25s, box-shadow 0.25s, border-color 0.25s; }
.btn-fac:hover, .btn-fac:focus-visible { color: #0b0b0e; background: var(--fac); border-color: color-mix(in srgb, var(--fac) 70%, #fff); filter: none; box-shadow: 0 0 26px color-mix(in srgb, var(--fac) 70%, transparent); }

/* v0.7.0 special targeting: name and phrase on separate lines, no heading */
.chip-special { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 9px 13px; }
.sp-name { font: 700 0.74rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #c58cff; }
.sp-text { font: 500 0.86rem/1.3 var(--body); color: var(--ink); }
.bm-ex-ask { color: #c58cff; font-weight: 600; margin-top: 4px; }
.chip-special { border-radius: 10px; }

/* ---------- v0.8.0 (review round 7) ---------- */
/* rarity icons read larger everywhere, except Ultra (its art already fills the frame) */
/* round 10: the official rarity images are trimmed to their edges (tools/convert_icons.py), so they need no enlarging */
.tile-row .ti-rar { width: 38px; height: 38px; margin-top: -5px; }

/* List view: coloured numbers, steady columns, the positions shape */
.cards-table td.c-shards { color: #ffb877; }
.cards-table td.c-atk { color: #ff8f8f; }
.cards-table td.c-def { color: #8fc6ff; }
.cards-table td.c-dom { color: #cfd3da; }
.td-rar img { width: 36px; height: 36px; }
.th-ar { display: inline-block; width: 1em; margin-left: 3px; text-align: center; }
.th-ar.off { visibility: hidden; }
.mini-pos { width: 58px; height: auto; display: block; margin: 0 auto; }
.mini-pos rect { stroke-width: 3; }
.mini-pos .mp-I { fill: rgb(79 209 111 / 0.55); stroke: var(--pos-i); }
.mini-pos .mp-N { fill: rgb(141 138 134 / 0.45); stroke: #a9a6a2; }
.mini-pos .mp-X { fill: rgb(224 72 72 / 0.45); stroke: var(--pos-x); }
@media (min-width: 761px) {
  .cards-table { table-layout: fixed; min-width: 1240px; }
  .cards-table td.name { overflow: hidden; text-overflow: ellipsis; }
  .cards-table .name { width: auto; }
  .col-num { width: 64px; } .col-mark { width: 30px; } .col-name { width: auto; } .col-faction { width: 150px; } .col-cardtype { width: 132px; }
  .col-rarity { width: 118px; } .col-dominance { width: 116px; } .col-shards { width: 92px; } .col-atk { width: 64px; } .col-def { width: 64px; }
  .col-melee, .col-ranged, .col-guard { width: 74px; } .col-positions { width: 92px; }
}

/* home: the tagline sits under the faction name; the artwork fades out towards the right */
.hero-fac-line strong, .hero-fac-sub { display: block; }
.hero-fac-sub { margin: 2px 0 0; }
.hero-frame {
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 58% 46%, #000 35%, rgb(0 0 0 / 0.55) 60%, transparent 92%), linear-gradient(90deg, #000 62%, transparent 98%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 62% 70% at 58% 46%, #000 35%, rgb(0 0 0 / 0.55) 60%, transparent 92%), linear-gradient(90deg, #000 62%, transparent 98%);
          mask-composite: intersect; }

/* faction pages: one image at a time (FactionExplorer heroArt); the first fades in slowly */
.fhero-frame, .fhero-frame.fhero-still { opacity: 0; animation: none; transition: opacity 1.8s ease; }
.fhero-frame.on { opacity: 0.6; animation: fheroZoom 12s ease-out forwards; }
.fhero-frame.on.first { transition-duration: 3.2s; }
.fhero-frame.fhero-still.on { animation: fheroZoom 24s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .fhero-frame.on { animation: none; } }
.fstat-txt { align-items: flex-start; text-align: left; }

/* footer */
.foot-logo-a { position: relative; isolation: isolate; }
.foot-logo-a::before { content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 122 26 / 0.5), rgb(255 90 10 / 0.18) 60%, transparent); filter: blur(18px); }
.foot-join { color: var(--ember); text-shadow: 0 0 12px rgb(255 122 26 / 0.45); }
.foot-about a { color: #d4cec5; }
.foot-about a:hover { color: var(--ember-2); }

/* card page */
.dv-sec-card { margin-top: 48px; }
.cd-icons { position: absolute; right: 6px; bottom: calc(100% + 6px); display: flex; align-items: flex-end; gap: 10px; }
.cdi { height: 40px; width: auto; max-width: 48px; object-fit: contain; }
.cdi-fac { height: 46px; }
.dv-tab.on { border-color: var(--fac); background: color-mix(in srgb, var(--fac) 22%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--fac) 35%, transparent); }
.trace-once { inset: 0; padding: 2px; z-index: 5; filter: drop-shadow(0 0 5px var(--trace-c)); }
.trace-once.go { animation-name: traceRunBright; }
.tilt-btn { padding: 6px 14px; font-size: 0.78rem; }
.kw-prime { border-color: #e7b93a; background: rgb(231 185 58 / 0.16); color: #ffd978; }
.kw-impulse { border-color: #c9ced8; background: rgb(201 206 216 / 0.14); color: #eef1f6; }
.kw-cost { border-color: #ff6a3a; background: rgb(255 106 58 / 0.15); color: #ffb08e; }
.kw-upkeep { border-color: #f2a516; background: rgb(242 165 22 / 0.15); color: #ffcb6b; }
.related { align-items: stretch; }
.related-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.related .btn-fac { border-color: var(--fac); color: var(--ink); }
.related .btn-fac:hover, .related .btn-fac:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--fac) 22%, var(--plate)); border-color: var(--fac); box-shadow: 0 0 0 1px var(--fac), 0 0 18px color-mix(in srgb, var(--fac) 55%, transparent); }

/* Battle Map */
.bm-side-col .bm-top { flex-direction: column; justify-content: center; gap: 10px; }
.bm-kinds { justify-content: center; }
.bm-legend { justify-content: center; }
.chip-melee { border-color: var(--melee); background: rgb(79 209 111 / 0.14); }
.chip-ranged { border-color: var(--ranged); background: rgb(255 154 46 / 0.14); }
.chip-guard { border-color: var(--guard); background: rgb(78 168 255 / 0.12); }
.bf-free rect { fill: rgb(255 255 255 / 0.03); stroke: var(--line-2); }
.bf-free .bm-code { fill: var(--dim); }
.bf-at rect:first-child { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 5 3; }
.bf-player { fill: rgb(170 90 255 / 0.08); stroke: #b77bff; stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.bm-side-lit { fill: #c58cff; }
.bm-noplace .bm-none { margin-bottom: 14px; }

/* ---------- v0.9.0 (review round 8) ---------- */
/* carousel: the hovered card and its neighbours grow like a dock */
.mq-item { transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; }
.mq:not(.mq-grab) .mq-item.mq-n2 { transform: scale(1.05); z-index: 1; }
.mq:not(.mq-grab) .mq-item.mq-n1 { transform: scale(1.1); z-index: 2; }
.mq:not(.mq-grab) .mq-item.mq-h, .mq:not(.mq-grab) .mq-item:hover { transform: scale(1.2); z-index: 3; }

/* results fade in one after another (CardGrid sets --d) */
.stagger .tile, .stagger tbody tr { animation: fadeIn 0.38s ease-out backwards; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .stagger .tile, .stagger tbody tr { animation: none; } }

/* header: the search box always shows, beside COMMUNITY */
.topbar-r .ss { display: flex; align-items: center; }
.topbar-r .ss-box { height: 100%; }

/* the bottom bar: sticky while scrolling, then it rests just above the footer */
.devbar { position: sticky; bottom: 0; white-space: pre-wrap; }

/* footer */
.foot-logo-a::before { animation: logoGlow 4.5s ease-in-out infinite; transition: opacity 0.3s; }
@keyframes logoGlow { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
.foot-logo-a:hover::before { animation: none; opacity: 1; filter: blur(14px) brightness(1.5); }
.foot-logo { transition: filter 0.25s; }
.foot-logo-a:hover .foot-logo { filter: brightness(1.15) drop-shadow(0 0 10px rgb(255 140 50 / 0.6)); }
.foot-site { transition: color 0.2s, text-shadow 0.2s; }
.foot-site:hover, .foot-logo-a:hover + .foot-site { color: #ffd2a0; text-shadow: 0 0 12px rgb(255 122 26 / 0.7); text-decoration: none; }
.foot-join { animation: joinGlow 3.8s ease-in-out infinite; }
@keyframes joinGlow { 0%, 100% { text-shadow: 0 0 10px rgb(255 122 26 / 0.35); } 50% { text-shadow: 0 0 16px rgb(255 122 26 / 0.6), 0 0 2px rgb(255 220 180 / 0.6); } }
.foot-about a, .foot-about a em { color: var(--ember); }
.foot-about a:hover { color: var(--ember-2); }
@media (prefers-reduced-motion: reduce) { .foot-logo-a::before, .foot-join { animation: none; } }

/* Unknown faction icons flicker (FactionExplorer flicker) */
.flick { transform: translate(var(--jx, 0), var(--jy, 0)); filter: brightness(1.3) contrast(1.2); }

/* home: room for the two-line faction text, so nothing below it moves; a narrower, stronger feather on the right */
.hero-fac-line { min-height: 3.4em; }
.hero-frame {
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 58% 46%, #000 35%, rgb(0 0 0 / 0.55) 60%, transparent 92%), linear-gradient(90deg, #000 80%, transparent 96%);
          mask-image: radial-gradient(ellipse 62% 70% at 58% 46%, #000 35%, rgb(0 0 0 / 0.55) 60%, transparent 92%), linear-gradient(90deg, #000 80%, transparent 96%); }

/* Factions page */
.unknown { padding-top: 36px; margin-top: 14px; }
.unknown-h { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.ftiles-unknown .ftile { min-height: 250px; }
.ftile-ico { transition: filter 0.35s ease; }
.ftile:hover .ftile-ico, .ftile:focus-visible .ftile-ico { filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.8)) drop-shadow(0 0 16px var(--fac)); }

/* faction pages: the zoom changes by transition, so a frame fading out keeps its size (no jump before the change) */
.fhero-frame, .fhero-frame.fhero-still { transform: scale(1); transition: opacity 1.8s ease, transform 0s linear 1.8s; }
.fhero-frame.on { animation: none; transform: scale(1.07); transition: opacity 1.8s ease, transform 10s ease-out; }
.fhero-frame.on.first { transition: opacity 3.2s ease, transform 10s ease-out; }
/* one image only: fade in, then zoom in, hold, zoom back out, hold, again */
.fhero-frame.fhero-still.on { transform: none; transition: opacity 3.2s ease; animation: fheroBreathe 22s ease-in-out 3.2s infinite; }
@keyframes fheroBreathe { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 55% { transform: scale(1.07); } 92% { transform: scale(1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fhero-frame.on, .fhero-frame.fhero-still.on { animation: none; transform: none; transition: opacity 0.4s; } }
.fpage-unknown .notices { margin-top: 14px; }
.fhero-ico { animation: icoGlow 4s ease-in-out infinite; }
@keyframes icoGlow { 0%, 100% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fac) 40%, transparent)); } 50% { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--fac) 80%, transparent)); } }
@media (prefers-reduced-motion: reduce) { .fhero-ico { animation: none; } }

/* Card view */
.tile-row .ti-rar { margin-top: 0; }
.tile-meta { transition: box-shadow 0.35s ease, border-color 0.35s ease; }
.tile:hover .tile-meta, .tile:focus-within .tile-meta { border-color: color-mix(in srgb, var(--fac) 45%, var(--line)); box-shadow: 0 0 16px color-mix(in srgb, var(--fac) 28%, transparent); }
.pager-info { flex: 1 0 100%; margin: 8px 0 0; text-align: center; }

/* List view */
.ar-guard { -webkit-text-stroke: 1.4px currentColor; }
.cards-table th.ctr .th-btn::before { content: ""; display: inline-block; width: calc(1em + 3px); }   /* balances the arrow space, so the label is centred */

/* card page */
.dv-title { align-items: flex-start; }
.dv-title .cd-icons { position: static; flex: 0 0 auto; gap: 12px; margin-top: 4px; }
.dv-title .cdi { height: 52px; max-width: 60px; }
.dv-title .cdi-fac { height: 60px; }
.dv-sec-card { margin-top: 0; }
/* the strip between the header and the section bar: the page under it is blurred and dimmed */
.dv-bar::before { content: ""; position: absolute; left: -40px; right: -40px; bottom: 100%; height: 22px; pointer-events: none; backdrop-filter: blur(16px) brightness(0.35); -webkit-backdrop-filter: blur(16px) brightness(0.35); background: rgb(5 5 6 / 0.55); }
.kw { display: inline-flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.kw-trait { border-color: #b9bec8; background: rgb(185 190 200 / 0.12); color: #eef1f6; }
.kw-upkeep { border-color: #d9560f; background: rgb(217 86 15 / 0.16); color: #ff9a5c; }
/* a light sweeps once across the tags */
.kw-row.sweep .kw::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%); transform: translateX(-120%); animation: tagSweep 1.3s ease-out forwards; }
.kw-row.sweep .kw:nth-child(2)::after { animation-delay: 0.08s; } .kw-row.sweep .kw:nth-child(3)::after { animation-delay: 0.16s; }
.kw-row.sweep .kw:nth-child(4)::after { animation-delay: 0.24s; } .kw-row.sweep .kw:nth-child(n+5)::after { animation-delay: 0.32s; }
@keyframes tagSweep { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .kw-row.sweep .kw::after { display: none; } }
/* all of the card's text in one box */
.ab-box { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--plate); border: 1px solid var(--line); }
.ab-box .ab { padding: 0; background: none; border: 0; border-radius: 0; }
.ab-box .ab + .ab { padding-top: 12px; border-top: 1px solid var(--line); }
.ab-box .ab-ability { border-left: 0; }
.ab-costs { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.92rem; }
.ab-cost b { font: 700 0.7rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ab-cost-add b { color: #ff8a5c; } .ab-cost-up b { color: #ff9a5c; }

/* Range */
.bm-leg i { width: 10px; height: 14px; border-radius: 2px; }   /* card-shaped */
.chip-off { border-color: var(--line-2); background: var(--plate); opacity: 0.4; filter: grayscale(1); }
.bm-explain.asking { border-color: #b77bff; animation: askGlow 1.4s ease-in-out infinite; }
@keyframes askGlow { 0%, 100% { box-shadow: 0 0 0 1px rgb(183 123 255 / 0.4); } 50% { box-shadow: 0 0 0 2px #b77bff, 0 0 22px rgb(183 123 255 / 0.55); } }
.bm-explain.asking .bm-ex-ask { font-size: 1rem; }
.bm-ex-can { color: #6fe08a; font-weight: 600; }
.chip-special.avail { animation: availPulse 1.4s ease-in-out infinite; }
@keyframes availPulse { 0%, 100% { box-shadow: 0 0 0 1px rgb(183 123 255 / 0.35); } 50% { box-shadow: 0 0 0 2px #b77bff, 0 0 14px rgb(183 123 255 / 0.6); } }
/* the placed card: a gold pulsing border, the inside keeps its own colour */
.bf-from rect:first-child { stroke: #ffc233; stroke-width: 3; animation: goldPulse 1.5s ease-in-out infinite; }
.bm-I.bf-from rect:first-child { fill: rgb(79 209 111 / 0.16); }
.bm-N.bf-from rect:first-child { fill: rgb(141 138 134 / 0.16); }
@keyframes goldPulse { 0%, 100% { stroke-opacity: 0.6; filter: drop-shadow(0 0 0 rgb(255 194 51 / 0)); } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgb(255 194 51 / 0.95)); } }
/* positions a Guard arrow reaches: a blue pulsing border */
.bf-hit-guard rect:first-child { animation: guardPulse 1.5s ease-in-out infinite; }
@keyframes guardPulse { 0%, 100% { stroke-opacity: 0.6; filter: none; } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgb(78 168 255 / 0.95)); } }
/* a selected Restricted position keeps pulsing red */
.bf-marked rect:first-child { animation: redPulse 1.3s ease-in-out infinite; }
@keyframes redPulse { 0%, 100% { stroke-opacity: 0.6; filter: none; } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgb(255 69 69 / 0.95)); } }
.flash-green rect:first-child { animation: flashGreen 0.6s ease-out; }
@keyframes flashGreen { 0%, 40% { fill: rgb(80 220 120 / 0.6); stroke: #8ff0a8; } 100% { } }
.bf-line.bm-special-line { stroke: #b77bff; stroke-dasharray: 6 4; }
.bm-head.bm-special path { fill: #b77bff; }
@media (prefers-reduced-motion: reduce) { .bf-from rect:first-child, .bf-hit-guard rect:first-child, .bf-marked rect:first-child, .chip-special.avail, .bm-explain.asking { animation: none; } }

/* ---------- v0.10.0 (review round 9) ---------- */
html, body { overflow-x: clip; }   /* the page never scrolls sideways */

/* parts of the Factions, Mechanics, Lore and Resources pages fade in one after another (dom.js staggerIn sets --d) */
.stagger-in { animation: fadeIn 0.45s ease-out backwards; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .stagger-in { animation: none; } }

/* home: the card scroll sits a little closer to the faction text */
.hero .mq { margin-top: 36px; }

/* carousel dock (CardMarquee): with a mouse, each card is scaled by the script; the box reaches up over the content
   above it so a magnified card has room, and lets clicks through to that content */
@media (hover: hover) and (pointer: fine) {
  .mq { --dock-pad: 90px; padding-top: var(--dock-pad); margin-top: calc(-1 * var(--dock-pad)); pointer-events: none; }
  .mq-sm { --dock-pad: 60px; }
  .hero .mq { margin-top: calc(36px - var(--dock-pad)); }
  .mq-item { pointer-events: auto; transform-origin: 50% 100%; transition: box-shadow 0.25s ease-out; }
  .mq:not(.mq-grab) .mq-item:hover, .mq:not(.mq-grab) .mq-item.mq-h, .mq:not(.mq-grab) .mq-item.mq-n1, .mq:not(.mq-grab) .mq-item.mq-n2 { transform: none; }
  .mq-docking .mq-item:hover { box-shadow: 0 18px 34px rgb(0 0 0 / 0.75); }
}

/* Card view: the box under a card opens it too */
.tile-meta { cursor: pointer; }

/* header: MENU (phones only) and the Community link icon */
.menu { position: relative; display: none; }
.menu-btn { display: flex; align-items: center; gap: 6px; height: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: rgb(20 20 25 / 0.9); color: var(--ink); font: 700 0.8rem/1 var(--display); letter-spacing: 0.12em; }
.menu-btn[aria-expanded="true"], .menu-btn:hover { border-color: var(--ember); }
.menu-drop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; min-width: 190px; display: flex; flex-direction: column; padding: 6px; border-radius: 10px; border: 1px solid var(--line-2); background: rgb(10 10 13 / 0.97); box-shadow: 0 16px 34px rgb(0 0 0 / 0.6); }
.menu-drop[hidden] { display: none; }
.menu-a { padding: 12px 14px; border-radius: 7px; color: var(--ink); font: 700 0.9rem/1 var(--display); letter-spacing: 0.08em; text-decoration: none !important; }
.menu-a:hover, .menu-a.on { background: var(--ember-soft); color: var(--ink); }
.menu-a.on { box-shadow: inset 3px 0 0 var(--ember); }
.comm-btn .comm-ico { display: none; }

/* faction pages: Gameplay and Collection outlined in the faction's colour */
.fpage .panel-fac { border-color: color-mix(in srgb, var(--fac) 70%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--fac) 14%, transparent); }

/* card page: the bar's buttons light in the faction's colour; on wide screens ALL CARDS is in the header menu instead */
.detail .dv-bar .btn:hover:not(:disabled), .detail .dv-bar .icon-btn:hover:not(:disabled), .detail .dv-tab:hover { border-color: var(--fac); box-shadow: 0 0 14px color-mix(in srgb, var(--fac) 40%, transparent); }
@media (min-width: 761px) { .dv-all { display: none; } .dv-step { margin-left: 0; } }
.dv-nav-wrap { display: flex; align-items: center; min-width: 0; margin-left: auto; }
.dv-nav-wrap .dv-nav { margin-left: 0; }
.dv-nav-arrow { display: grid; place-items: center; width: 22px; height: 36px; padding: 0 0 4px; font-size: 1.9rem; visibility: hidden; }
.dv-nav-wrap:not(.more):not(.less) .dv-nav-arrow { display: none; }
.dv-nav-wrap .nav-prev { margin-right: 4px; } .dv-nav-wrap .nav-next { margin-left: 4px; }
.dv-nav-wrap.more .nav-next, .dv-nav-wrap.less .nav-prev { visibility: visible; }

/* every section has a faction-coloured outline; the short bright bar on top stays */
.dv-sec { border-color: color-mix(in srgb, var(--fac) 42%, var(--line)); }
.dv-sec::before { height: 3px; top: -2px; border-radius: 2px; }

/* the name, its lore and the larger rarity, type and faction icons */
.dv-head { gap: 4px; }
.dv-title .cd-icons { gap: 8px; }
.dv-title .cdi { height: 64px; max-width: 74px; padding: 5px; border-radius: 10px; box-sizing: content-box; transition: background 0.2s, box-shadow 0.2s; }
.dv-title .cdi-fac { height: 72px; }
.dv-title .cdi-rar { transform: translateY(-6px); }
.dv-title .cdi:hover, .dv-title .cdi:focus-visible { background: color-mix(in srgb, var(--fac) 18%, rgb(255 255 255 / 0.05)); box-shadow: 0 0 14px color-mix(in srgb, var(--fac) 35%, transparent); }

/* Card Details: Positions is one heading over three values that line up with the columns */
.cd-pos-group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 4px; }
.cd-pos-group .cd-row { grid-column: auto; }
.cd-pos-group .cd-pos-k { color: #b9b3aa; }
@supports not (grid-template-columns: subgrid) { .cd-pos-group { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; } }

/* Card Text: room under the tags, larger symbols, key terms in colour */
.abilities .kw-row { margin-bottom: 8px; }
.ab-body .tx-sym { width: 1.6em; height: 1.6em; vertical-align: -0.42em; }
.ab-body .tx-sym .ico { width: 1.15em; height: 1.15em; }
.ab-body .tx-fac img { height: 1.5em; }
.tx-atk, .tx-pt-a { color: #ffa3a3; }
.tx-def, .tx-pt-d { color: #a9d4ff; }
.tx-dmg { color: #ffb37f; }
.tx-plus { color: #7fe29b; }
.tx-minus { color: #ff7f7f; }

/* the card's foil and glare show only while it is pointed at, touched or tilted */
.c3d-glare { opacity: calc(var(--on) * 0.7); }
.c3d-foil-holo { opacity: calc(var(--on) * 0.9); }
.c3d-foil-holo-soft { opacity: calc(var(--on) * 0.56); }
.c3d-foil-color { opacity: calc(var(--on) * 0.62); }

/* alternate arts light up when pointed at; character buttons under the card */
.var { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.var:hover, .var:focus-visible { border-color: var(--fac); box-shadow: 0 0 0 1px var(--fac), 0 0 14px color-mix(in srgb, var(--fac) 55%, transparent); transform: translateY(-2px); }
.dv-chars { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.tilt-note { max-width: 300px; margin: 8px auto 0; font-size: 0.78rem; color: var(--muted); text-align: center; }

/* Lore: the card's own lore first; the faction box has no faction colour; lore buttons glow */
.lore-card { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--plate); border: 1px solid var(--line); }
.lore-card-k { margin: 0 0 6px; font: 700 0.7rem/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lore-card-t { margin: 0; font: italic 1rem/1.55 var(--body); color: #e3d3b4; }
.lore-fac { border-color: var(--line); }
.lore-chip { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, color 0.2s; }
.lore-chip:hover, .lore-chip:focus-visible { border-color: #e3c27f; color: #fff1d2; box-shadow: 0 0 0 1px rgb(227 194 127 / 0.5), 0 0 18px rgb(227 194 127 / 0.45); }

/* Range: icon tags, the Special tag, the key under the map, the Foundry boxes */
.bm-map-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bm-map-col .bm-legend { justify-content: center; padding-bottom: 4px; }
.bm-kico { width: 17px; height: 17px; }
.bm-kico.bm-melee { color: var(--melee); } .bm-kico.bm-ranged { color: var(--ranged); } .bm-kico.bm-guard { color: var(--guard); } .bm-kico.bm-special { color: #c89bff; }
.chip-sp { border-color: #b77bff; background: rgb(170 90 255 / 0.14); padding: 9px 15px; font: 600 0.88rem/1 var(--mono); gap: 8px; }
.bm-ex-note { font-size: 0.8rem; color: var(--muted); }
.bf-foundry rect { fill: rgb(255 255 255 / 0.02); stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.bf-foundry-t { font: 600 7.5px/1 var(--mono); letter-spacing: 0.06em; fill: var(--dim); }
.bf-foundry-lit rect { fill: rgb(170 90 255 / 0.2); stroke: #b77bff; stroke-dasharray: none; animation: spPulse 1.4s ease-in-out infinite; }
.bf-foundry-lit .bf-foundry-t { fill: #e2cbff; }
@keyframes spPulse { 0%, 100% { stroke-opacity: 0.6; } 50% { stroke-opacity: 1; filter: drop-shadow(0 0 6px rgb(183 123 255 / 0.95)); } }
@media (prefers-reduced-motion: reduce) { .bf-foundry-lit rect { animation: none; } }

/* List view: a larger card on hover; the Variant column sorts from its blank header */
.tip-card.tip-card-lg { width: 330px; height: 462px; }
.cards-table th.mark .th-btn { min-width: 100%; justify-content: center; }
.name-mark { display: none; color: var(--muted); font-family: var(--mono); }

/* ---------- v0.10.0 phones ---------- */
@media (max-width: 760px) {
  .topnav-wrap { display: none; }
  .menu { display: block; }
  .topbar-in { gap: 8px; }
  .comm-btn::before { content: none; }
  .comm-btn .comm-ico { display: inline-grid; width: 18px; height: 18px; color: var(--ink); }
  .comm-btn .comm-t { display: none; }
  /* the header fits a 360px phone: the search box takes whatever room is left */
  .topbar-r { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 6px; }
  .topbar-r .ss { flex: 1 1 60px; min-width: 44px; }
  .topbar-r .ss-box { width: 100%; min-width: 0; }
  .menu-btn { padding: 8px 10px; }
  .menu-btn .caret { display: none; }

  /* home: the tagline image as wide as the words Every card */
  .hero-tag { width: min(260px, 72%); }
  .hero-fac-line { min-height: 2.8em; font-size: 1.15rem; }
  .hero-fac-line strong { font-size: 1.25rem; }
  .hero-fac-line.armed { cursor: pointer; }

  /* card page: previous and next beside ALL CARDS; the rarity, type and faction icons under the lore, on the left */
  .dv-bar { column-gap: 8px; }
  .dv-step { margin-left: auto; gap: 6px; }
  .dv-step-l { display: none; }   /* no room beside ALL CARDS; the arrows and the count remain */
  .dv-all { padding: 8px 10px; font-size: 0.74rem; letter-spacing: 0.08em; }
  .dv-nav-wrap { width: 100%; margin-left: 0; }
  .dv-nav-wrap .dv-nav { flex: 1 1 auto; width: auto; }
  .dv-head { display: flex; flex-direction: column; }
  .dv-title { display: contents; }
  .dv-name { order: 1; }
  .dv-lore { order: 2; margin-bottom: 6px; }
  .dv-title .cd-icons { order: 3; justify-content: flex-start; margin: 0 0 14px; }
  .dv-title .cdi { height: 46px; max-width: 54px; } .dv-title .cdi-fac { height: 52px; }

  /* List view: Card #, the name with its variant mark, and the type, rarity and faction icons only */
  .cards-table .mark { display: none; }
  .name-mark { display: inline; }
  .cards-table .td-t { display: none; }
  .cards-table td.td-fac, .cards-table td.td-rarity, .cards-table td.type, .cards-table th.td-fac, .cards-table th.td-rarity, .cards-table th.type { text-align: center; }
  .cards-table .td-ico { justify-content: center; }
  .cards-table { table-layout: auto; min-width: 0; }
  .cards-table th, .cards-table td { padding: 8px 4px; }
  .cards-table th.num, .cards-table td.num { padding-left: 10px; width: 1%; white-space: nowrap; }
  .cards-table th.td-fac, .cards-table th.type, .cards-table th.td-rarity { width: 40px; }
  .cards-table .name { width: auto; padding-right: 6px; }
  .cards-table td.name { white-space: normal; overflow-wrap: break-word; }
  .cards-table .td-ico img { width: 24px; height: 24px; }
  /* the icon columns get short headers */
  .cards-table th.td-fac .th-btn, .cards-table th.type .th-btn, .cards-table th.td-rarity .th-btn { font-size: 0; letter-spacing: 0; gap: 0; justify-content: center; width: 100%; }
  .cards-table th.td-fac .th-btn::before { content: "Fac"; } .cards-table th.type .th-btn::before { content: "Type"; } .cards-table th.td-rarity .th-btn::before { content: "Rar"; }
  .cards-table th.td-fac .th-btn::before, .cards-table th.type .th-btn::before, .cards-table th.td-rarity .th-btn::before { font-size: 0.6rem; letter-spacing: 0.06em; }
  .cards-table th .th-ar { font-size: 0.6rem; }
  .cards-table th .th-ar.off { display: none; }

  /* four page numbers around the current page */
  .pager-far { display: none; }

  /* the bottom bar on two lines */
  .devbar-s { display: block; } .devbar-gap { display: none; }

  /* footer: community first, then the logo and link, then the text */
  .foot-r { order: 1; } .foot-l { order: 2; } .foot-b { order: 3; }
}

/* the bottom bar text: a box, so it can be nudged to line up with the footer (CardExplorer alignBar) */
.devbar-in { display: inline-block; }

/* ---------- v0.11.0 (round 10) ---------- */
/* official symbol images (icons.js IMG) fill their box; the background chip behind card-text symbols goes */
.ico-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tx-sym:has(.ico-img) { background: none; }

/* the bottom bar's trace runs once per header glint, 2 s after it (CardExplorer) */
.trace-line-rtl.trace-once { inset: -2px 0 auto 0; padding: 0; z-index: 3; filter: blur(0.6px) drop-shadow(0 0 6px rgb(255 170 80 / 0.9)); }
.trace-line-rtl.trace-once.go { animation-name: traceRtl; animation-duration: 1.3s; }

/* the bottom bar: a soft glow fades in behind it on hover */
.devbar { transition: background-color 0.35s ease, box-shadow 0.35s ease; }
.devbar:hover { text-decoration: none; background-color: rgb(255 120 30 / 0.12); box-shadow: inset 0 0 26px rgb(255 130 40 / 0.28), 0 0 22px rgb(255 120 30 / 0.22); }

/* COMMUNITY: the icons fade in one after another when the menu opens */
.comm-menu:hover .comm-drop > *, .comm-menu:has(:focus-visible) .comm-drop > * { animation: commIn 0.28s ease-out backwards; }
.comm-menu .comm-drop > :nth-child(2) { animation-delay: 0.03s; } .comm-menu .comm-drop > :nth-child(3) { animation-delay: 0.06s; }
.comm-menu .comm-drop > :nth-child(4) { animation-delay: 0.09s; } .comm-menu .comm-drop > :nth-child(5) { animation-delay: 0.12s; }
.comm-menu .comm-drop > :nth-child(6) { animation-delay: 0.15s; } .comm-menu .comm-drop > :nth-child(7) { animation-delay: 0.18s; }
.comm-menu .comm-drop > :nth-child(8) { animation-delay: 0.21s; } .comm-menu .comm-drop > :nth-child(9) { animation-delay: 0.24s; }
.comm-menu .comm-drop > :nth-child(n+10) { animation-delay: 0.27s; }
@keyframes commIn { from { opacity: 0; transform: translateY(-6px) scale(0.85); } to { opacity: 1; transform: none; } }

/* CLEAR FILTERS glows on hover (round 11: a large orange glow) */
.btn-clear { transition: box-shadow 0.25s ease, filter 0.25s ease; }
.btn-clear:hover, .btn-clear:focus-visible { filter: brightness(1.15); box-shadow: 0 0 0 1px #ffd08a, 0 0 26px 8px rgb(255 106 10 / 0.85), 0 0 70px 22px rgb(255 120 30 / 0.55), 0 0 130px 40px rgb(255 110 20 / 0.28); }

/* List view: a smaller card on hover (tooltip.js atCursor uses the same size) */
.tip-card.tip-card-lg { width: 240px; height: 336px; }

/* card page: a smaller name (two lines at most, such as 0001), the lore closer under it */
.dv-name { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); line-height: 1.08; }
.dv-head { gap: 2px; padding-top: 0; }
.dv-lore { margin-top: 0; }
/* the rarity, type and faction icons in one row, centred on the name; on hover a soft blurred glow, not a box */
.dv-title { align-items: center; }
.dv-title .cd-icons { align-items: center; }
.dv-title .cdi, .dv-title .cdi-fac { height: 60px; max-width: 70px; padding: 0; background: none !important; box-shadow: none !important; transform: none; transition: filter 0.2s; }
.dv-title .cdi:hover, .dv-title .cdi:focus-visible { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fac) 75%, white)) drop-shadow(0 0 18px color-mix(in srgb, var(--fac) 45%, transparent)); outline: none; }

/* the card bar: starts as a thin strip with a small arrow on the left; the arrow opens it */
.dv-fold { flex: 0 0 auto; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 7px; border: 1px solid var(--line-2); background: var(--plate); color: var(--fac); font-size: 0.9rem; cursor: pointer; }
.dv-fold:hover { border-color: var(--fac); box-shadow: 0 0 12px color-mix(in srgb, var(--fac) 40%, transparent); }
.dv-bar-closed { padding-top: 4px; padding-bottom: 4px; }
.dv-bar-closed > :not(.dv-fold):not(.dv-expand) { display: none !important; }
.dv-step { transition: transform 0.2s ease; }

/* Card Details: Positions sit on the same row as Guard and Traits (five columns on wide screens) */
@media (min-width: 1100px) {
  .cd-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cd-pos-group { grid-column: span 3; grid-template-columns: subgrid; }
}

/* Card Text: space under the costs; each Ability Type in its symbol's colour */
.ab-costs { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ab-type .ico { width: 20px; height: 20px; }
.ab-type-cast { color: #ef5cff; } .ab-type-counter { color: #ff4a4a; } .ab-type-focus { color: #3d95ff; } .ab-type-latent { color: #ecebe8; }
.ab-type-power { color: #ffd21f; } .ab-type-special { color: #45e3ff; } .ab-type-strike { color: #45f05a; } .ab-type-tactic { color: #ff8a1f; }
.ab-type-ultimate { color: #9c6bff; }
.ab-type[class*="ab-type-"] { text-shadow: 0 0 10px currentColor; }

/* Range: the tags start level with the top of the map; the zone strips; a selected opponent position stays outlined */
.bm-side-col { justify-content: flex-start; }
.bm-side-col .bm-top { justify-content: flex-start; }
.bm-map-col .bm-legend { padding: 0; }
.bf-zone .bf-foundry-t { font-size: 6.5px; }
.bf-picked rect:first-child { stroke-width: 2.5; }
.bf-picked-can rect:first-child { stroke: var(--pos-i); fill: rgb(79 209 111 / 0.2); }
.bf-picked-no rect:first-child { stroke: #ff4545; fill: rgb(255 69 69 / 0.16); }

/* faction pages, Collection: the selected box lit inside; number and label right-aligned, icon on the right */
button.fstat[aria-pressed="true"] { background: color-mix(in srgb, var(--fac) 22%, var(--plate)); }
.fstat { justify-content: space-between; }
.fstat-txt { flex: 1 1 auto; align-items: flex-end; text-align: right; }

@media (max-width: 760px) {
  /* List view: the Faction, Type and Rarity headers written out; the Name column gives up the room */
  .cards-table th.td-fac .th-btn::before { content: "Faction"; } .cards-table th.type .th-btn::before { content: "Type"; } .cards-table th.td-rarity .th-btn::before { content: "Rarity"; }
  .cards-table th.td-fac, .cards-table th.type, .cards-table th.td-rarity { width: 54px; }
  .cards-table th.td-fac .th-btn::before, .cards-table th.type .th-btn::before, .cards-table th.td-rarity .th-btn::before { font-size: 0.56rem; letter-spacing: 0.02em; }
  .dv-title .cdi, .dv-title .cdi-fac { height: 46px; max-width: 54px; }
}

/* ---------- round 11 ---------- */
/* rarity, type and faction icons shown together: one square size each, so they read the same size and height */
.tile-row .ti-rar, .tile-row .ti-type, .tile-row .ti-fac { width: 30px; height: 30px; margin: 0; object-fit: contain; }
.cards-table .td-ico img, .cards-table .td-rar img { width: 30px; height: 30px; }
.dv-title .cdi, .dv-title .cdi-fac { width: 60px; height: 60px; max-width: none; object-fit: contain; }
.cd-icons .cdi { width: 44px; height: 44px; max-width: none; }
/* the hover glow on those icons on the card page appears at once */
.dv-title .cdi { transition: none; }

/* card page: less room between the lore line and Details */
.dv-head { margin-bottom: 8px; }
.dv-lore { margin-bottom: 4px; }

/* card bar: always open on wide screens (no arrow); on phones the collapsed strip reads TAP TO EXPAND */
.dv-bar-fixed .dv-fold, .dv-bar-fixed .dv-expand { display: none; }
.dv-expand { display: none; }
.dv-bar-closed .dv-expand { display: block; flex: 1 1 auto; text-align: center; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.16em; color: var(--muted); }
.dv-bar-closed:not(.dv-bar-fixed) { cursor: pointer; }

/* phones: the card opened large over a dimmed page */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 0.86); opacity: 0; transition: opacity 0.22s ease; cursor: zoom-out; touch-action: none; }
.lightbox.on { opacity: 1; }
.lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 14px; box-shadow: 0 20px 60px rgb(0 0 0 / 0.8); transform: scale(0.94); transition: transform 0.22s ease; -webkit-user-select: none; user-select: none; }
.lightbox.on .lightbox-img { transform: none; }

/* Lore: the lore line and the character paragraphs in one box */
.lore-card-more .lore-card-t { margin-bottom: 12px; }
.lore-char { padding-top: 12px; border-top: 1px solid var(--line); }
.lore-char + .lore-char { margin-top: 12px; }
.lore-char-k { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 0.92rem/1.2 var(--display); letter-spacing: 0.04em; color: var(--ink); }
.lore-char-t { margin: 0 0 6px; font-size: 0.94rem; line-height: 1.55; color: #d4cec5; }

/* Range map: faint arrows to a selected opponent position from the card's other positions; an arrow that points
   where no position exists gets a faint line and a dotted outline */
.bf-line-faint { opacity: 0.32; }
.bf-line-ghost { opacity: 0.28; }
.bf-ghost { fill: none; stroke: rgb(255 255 255 / 0.35); stroke-width: 1.5; stroke-dasharray: 4 4; pointer-events: none; }

/* phones */
.btn-clear-m { display: none; }
@media (max-width: 760px) {
  .comm-foot { gap: 7px; flex-wrap: nowrap; }
  .comm-foot .comm-a { width: 27px; height: 27px; }
  .foot-about-l { display: block; }
  .foot-links .dot { display: none; }
  .foot-links { gap: 6px 18px; }
  .foot-r { margin-bottom: 18px; }
  .foot-l { margin-bottom: 18px; }
  /* filters: Sort By at the right above the search; a smaller CLEAR FILTERS left of Card view / List view */
  .frow-top .btn-clear { display: none; }
  .fbottom > .fsort { order: -1; margin-left: auto; }
  .fbottom > .search { flex: 1 1 100%; }
  .fbottom .btn-clear-m { display: inline-flex; order: 8; margin-left: 0; width: auto; padding: 8px 12px; font-size: 0.74rem; letter-spacing: 0.1em; align-self: flex-end; }
  .fbottom .viewsw { margin-left: auto; }
  .fbottom > .pins { order: 7; flex: 1 1 100%; }
  .fbottom > .pins:empty { display: none; }
  /* Range: the Melee, Ranged, Guard and Special tags on one line */
  .bm-kinds { flex-wrap: nowrap; gap: 5px; justify-content: space-between; }
  .bm-kinds .chip { padding: 7px 8px; font-size: 0.72rem; gap: 4px; flex: 0 1 auto; min-width: 0; }
  .bm-kinds .bm-kico { width: 13px; height: 13px; }
  .dv-title .cdi, .dv-title .cdi-fac { width: 46px; height: 46px; }
  .tile-row .ti-rar, .tile-row .ti-type, .tile-row .ti-fac { width: 26px; height: 26px; }
  .cards-table .td-ico img, .cards-table .td-rar img { width: 24px; height: 24px; }
}

/* ---------- round 12 ---------- */
/* CLEAR FILTERS: an even larger glow outside the button on hover */
.btn-clear:hover, .btn-clear:focus-visible { box-shadow: 0 0 0 1px #ffd08a, 0 0 30px 10px rgb(255 106 10 / 0.9), 0 0 90px 34px rgb(255 120 30 / 0.6), 0 0 170px 64px rgb(255 110 20 / 0.32); }

/* card text: larger symbols (Activate, Shard and the others) */
.ab-body .tx-sym { width: 1.9em; height: 1.9em; vertical-align: -0.55em; }
.ab-body .tx-sym .ico { width: 1.4em; height: 1.4em; }

/* card page icons: slightly larger; the glow fades in quickly on hover and fades out on leaving */
.dv-title .cdi, .dv-title .cdi-fac { width: 68px; height: 68px; }
.dv-title .cdi { transition: filter 0.15s ease-out; }

/* header: only the links themselves can be grabbed, and only when they do not all fit */
.topnav { flex: 0 1 auto; cursor: default; }
.topnav-wrap.over .topnav { cursor: grab; }
.topnav-a { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }

/* faction Collection boxes: the number and type stay right-aligned, and the gap before the icon sits in the middle */
.fstat { justify-content: center; gap: 12px; }
.fstat-txt { flex: 1 1 0; align-items: flex-end; text-align: right; }
.fstat-ico { flex: 1 1 0; width: 0; min-width: 30px; object-position: left center; }

/* lightbox: the card itself, sized to the screen, tilts when dragged */
.lightbox-card { width: min(92vw, calc(88vh * 5 / 7)); }
.lightbox-card .c3d { width: 100%; max-width: none; }

@media (max-width: 760px) {
  /* filters: the search and Sort By on one line ("Sort By" on two lines), CLEAR FILTERS level with Card view / List view */
  .fbottom { align-items: center; }
  .fbottom > .search { order: 1; flex: 1 1 0; min-width: 0; }
  .fbottom > .fsort { order: 2; margin-left: 0; gap: 6px; }
  .fbottom > .fsort .flabel { width: 3.2em; white-space: normal; line-height: 1.15; text-align: right; }
  .fbottom > .pins { order: 3; }
  .fbottom { column-gap: 10px; }
  .fbottom .btn-clear-m { order: 4; align-self: center; padding: 8px 9px; font-size: 0.66rem; letter-spacing: 0.06em; }
  .fbottom .viewsw button { padding: 8px 10px; font-size: 0.76rem; gap: 5px; }
  .fbottom .viewsw { order: 5; align-self: center; margin-left: auto; }
  /* card page: the rarity, type and faction icons centred, with room between them */
  .dv-title .cd-icons { justify-content: center; gap: 26px; width: 100%; }
  .dv-title .cdi, .dv-title .cdi-fac { width: 50px; height: 50px; }
  /* the collapsed bar: TAP FOR NAVIGATION centred over the card below it */
  .dv-bar-closed { position: sticky; }
  .dv-bar-closed .dv-expand { position: absolute; left: 0; right: 0; pointer-events: none; }
}

/* ---------- round 13 ---------- */
/* CLEAR FILTERS: a light sweeps across the button on hover (the glow above stays outside it) */
.btn-clear { position: relative; overflow: hidden; isolation: isolate; }
.btn-clear::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.55) 50%, transparent 70%); transform: translateX(-120%); }
.btn-clear:hover::after, .btn-clear:focus-visible::after { animation: clearSweep 0.75s ease-out; }
@keyframes clearSweep { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .btn-clear::after { display: none; } }

/* Card view: the box under a card lights the card above it too */
@media (hover: hover) {
  .tile:has(.tile-meta:hover) .tile-card { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 28px rgb(0 0 0 / 0.6), 0 0 0 2px color-mix(in srgb, var(--fac) 70%, #fff), 0 0 22px color-mix(in srgb, var(--fac) 35%, transparent); }
}

/* List view: rows fade in without moving, so the table never shows a scrollbar while they arrive */
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
.stagger tbody tr { animation-name: fadeOnly; }
.table-wrap { overflow-y: hidden; }

@media (max-width: 760px) {
  /* card page: room between the lore and the rarity, type and faction icons */
  .dv-title .cd-icons { margin-top: 16px; }
}

/* ---------- round 14 ---------- */
/* a light sweeps across PLAY, Card view and List view on hover, as on CLEAR FILTERS */
.play-now, .viewsw button { position: relative; overflow: hidden; isolation: isolate; }
.play-now::after, .viewsw button::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.5) 50%, transparent 70%); transform: translateX(-120%); }
.viewsw button::after { background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.16) 50%, transparent 70%); }
.play-now:hover::after, .play-now:focus-visible::after, .viewsw button:hover::after, .viewsw button:focus-visible::after { animation: clearSweep 0.75s ease-out; }
/* v0.18.0: a brighter, wider light on Card view and List view */
.viewsw button::after { background: linear-gradient(100deg, transparent 18%, rgb(255 236 210 / 0.35) 38%, rgb(255 255 255 / 0.9) 50%, rgb(255 236 210 / 0.35) 62%, transparent 82%); }
.viewsw button:hover::after, .viewsw button:focus-visible::after { animation-duration: 0.85s; }
@media (prefers-reduced-motion: reduce) { .play-now::after, .viewsw button::after { display: none; } }

/* Card view: the box under a card lights the card above it, without making it larger (replaces round 13) */
@media (hover: hover) {
  .tile:has(.tile-meta:hover) .tile-card { transform: none; box-shadow: 0 6px 16px rgb(0 0 0 / 0.5), 0 0 0 2px color-mix(in srgb, var(--fac) 70%, #fff), 0 0 22px color-mix(in srgb, var(--fac) 35%, transparent); }
}

/* List view: never a sideways scrollbar. Between phone width and 1280 px the Melee, Ranged, Guard and Positions
   columns are left out so the table fits (phones already leave them out); 1400 px and wider: every column */
.table-wrap { overflow-x: hidden; }
/* the Positions header with its sort arrow was 13 px wider than its column, which made the table scroll sideways */
@media (min-width: 761px) { .col-positions { width: 108px; } }
@media (min-width: 761px) and (max-width: 1399px) {
  .cards-table { min-width: 0; }
  .cards-table .t-hide { display: none; }
  .col-faction { width: 130px; } .col-cardtype { width: 120px; } .col-rarity { width: 104px; } .col-dominance { width: 100px; } .col-shards { width: 80px; }
}
@media (min-width: 761px) and (max-width: 999px) {
  /* icons only for Faction, Card Type and Rarity */
  .cards-table .td-t { display: none; }
  .col-faction, .col-cardtype, .col-rarity { width: 62px; }
  .cards-table th.td-fac, .cards-table th.type, .cards-table th.td-rarity { font-size: 0.7rem; }
}

/* carousel: the card under the pointer gets a soft glow in its faction's colour, fading in and out */
.mq-item { box-shadow: 0 0 0 rgb(0 0 0 / 0), 0 0 0 0 transparent; }
.mq:not(.mq-grab) .mq-item:hover, .mq-item:focus-visible { box-shadow: 0 14px 28px rgb(0 0 0 / 0.7), 0 0 26px 6px color-mix(in srgb, var(--mq-fac, var(--ember)) 55%, transparent); }

/* card page details: "—" in a subtle grey */
.cd-row dd.cd-none { color: var(--dim); }

/* card page icons: the glow starts the moment the pointer arrives (the resting state already holds a clear glow) */
.dv-title .cdi { filter: drop-shadow(0 0 8px transparent) drop-shadow(0 0 18px transparent); will-change: filter; transition: filter 0.08s linear; }
.dv-title .cdi:hover, .dv-title .cdi:focus-visible { transition: filter 0.08s linear; }

/* Range: a slight light sweeps now and then across the chips that are available (not greyed out) */
.bm-kinds .chip:not(.chip-off), .chip-special { position: relative; overflow: hidden; }
.bm-kinds .chip:not(.chip-off)::after, .chip-special::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.13) 50%, transparent 65%); transform: translateX(-120%); animation: chipSweep 6s ease-in-out infinite; }
.bm-kinds .chip:nth-child(2)::after, .chip-special:nth-child(2)::after { animation-delay: 0.15s; }
.bm-kinds .chip:nth-child(3)::after, .chip-special:nth-child(3)::after { animation-delay: 0.3s; }
.bm-kinds .chip:nth-child(4)::after, .chip-special:nth-child(n+4)::after { animation-delay: 0.45s; }
@keyframes chipSweep { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .bm-kinds .chip::after, .chip-special::after { display: none; } }

/* ---------- round 15 ---------- */
/* Exhaust: two Activate symbols side by side */
.ico.ico-pair, .tx-sym .ico.ico-pair, .ab-body .tx-sym .ico.ico-pair { width: auto; display: inline-flex; gap: 0.06em; }
.ico-img.ico-pair img { width: auto; height: 100%; aspect-ratio: 1; flex: 0 0 auto; }
.tx-sym:has(.ico-pair) { width: auto; padding: 0 0.12em; }

/* Range: the ability toggles no longer have the passing light (the Melee, Ranged, Guard and Special tags keep it) */
.chip-special::after { content: none; animation: none; }
.sp-name { display: inline-flex; align-items: center; gap: 6px; }
.sp-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.bm-ex-ab { display: flex; align-items: center; gap: 7px; }
.bm-ex-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* Card Details: the values are links without an underline */
.cd-lnk, .cd-lnk:hover { border-bottom: none; }

/* card page: the lore line under the name in a very light tint of the faction's colour */
.dv-lore { color: color-mix(in srgb, var(--fac) 22%, #fff); }

/* card page icons: slightly larger on hover, and a glow behind them that fades in at once (opacity, not a filter) */
.dv-title .cdi, .dv-title .cdi:hover, .dv-title .cdi:focus-visible { filter: none; will-change: auto; }
.cdi-w { position: relative; display: inline-grid; place-items: center; }
.cdi-w::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--fac) 60%, transparent), color-mix(in srgb, var(--fac) 18%, transparent) 70%, transparent); opacity: 0; transition: opacity 0.18s ease-out; }
.cdi-w:hover::before, .cdi-w:focus-within::before { opacity: 1; transition-duration: 0.12s; }
.cdi-w .cdi { position: relative; transition: transform 0.15s ease-out; }
.cdi-w:hover .cdi, .cdi-w .cdi:focus-visible { transform: scale(1.1); outline: none; }
@media (prefers-reduced-motion: reduce) { .cdi-w::before, .cdi-w .cdi { transition: none; } }

/* List view: when columns are left out, the space is shared by every column instead of all given to Name */
@media (min-width: 1000px) and (max-width: 1399px) { .col-name { width: 240px; } }
@media (min-width: 761px) and (max-width: 999px) {
  .col-name { width: 190px; }
  .col-faction, .col-cardtype, .col-rarity { width: 76px; }
  .cards-table th.td-fac, .cards-table th.type, .cards-table th.td-rarity { padding: 10px 4px; text-align: center; }
  .cards-table th.td-fac .th-btn, .cards-table th.type .th-btn, .cards-table th.td-rarity .th-btn { font-size: 0.6rem; letter-spacing: 0.04em; justify-content: center; }
  .cards-table td.td-fac, .cards-table td.type, .cards-table td.td-rarity { text-align: center; }
  .cards-table .td-ico { justify-content: center; }
}
/* phones (#, Name and the three icons): the icon columns widen with the screen, so Name does not take all the room.
   The hidden Variant column comes second, so the visible cells take the first five column widths in order */
@media (max-width: 760px) {
  .cards-table { table-layout: fixed; }
  .cards-table col { width: 0; }
  .cards-table col:nth-child(1) { width: 50px; }
  .cards-table col:nth-child(2) { width: auto; }   /* Name: what is left */
  .cards-table col:nth-child(3), .cards-table col:nth-child(4), .cards-table col:nth-child(5) { width: 13%; }
  .cards-table th.td-fac, .cards-table th.type, .cards-table th.td-rarity { width: auto; }
}

/* v0.17.0 card page: the rarity and type icons a little smaller than the faction icon; each glow takes its icon's
   colour (rarity gem colour; white behind a type, gold behind the gold Prime type icon; faction colour) */
.dv-title .cdi-rar, .dv-title .cdi-type { width: 58px; height: 58px; }
@media (max-width: 760px) { .dv-title .cdi-rar, .dv-title .cdi-type { width: 42px; height: 42px; } }
.cdi-w::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, var(--fac)) 60%, transparent), color-mix(in srgb, var(--glow, var(--fac)) 18%, transparent) 70%, transparent); }

/* v0.17.0: now and then a light sweeps across the lit section tab */
.dv-tab { position: relative; overflow: hidden; }
.dv-tab.on.sweep::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.32) 50%, transparent 70%); transform: translateX(-120%); animation: tagSweep 1.2s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .dv-tab.on.sweep::after { display: none; } }

/* v0.17.0 List view, 761 to 1399 px: every column is a share of the table's width, so the fixed widths can no
   longer add up to more than the screen and push ATK and DEF out of sight */
@media (min-width: 1000px) and (max-width: 1399px) {
  .cards-table { width: 100%; }
  .col-num { width: 6%; } .col-mark { width: 3%; } .col-name { width: 25%; } .col-faction { width: 13%; } .col-cardtype { width: 12%; }
  .col-rarity { width: 11%; } .col-dominance { width: 10%; } .col-shards { width: 8%; } .col-atk { width: 6%; } .col-def { width: 6%; }
}
@media (min-width: 761px) and (max-width: 999px) {
  .cards-table { width: 100%; }
  .col-num { width: 7%; } .col-mark { width: 3%; } .col-name { width: 28%; } .col-faction, .col-cardtype, .col-rarity { width: 9%; }
  .col-dominance { width: 13%; } .col-shards { width: 10%; } .col-atk { width: 6%; } .col-def { width: 6%; }
}

/* v0.18.0 faction page: the play style as one slim bar at the end of the Gameplay panel (replaces the v0.17.0 radar) */
.pstyle { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.pstyle-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 500 0.7rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.pstyle-of { letter-spacing: 0.04em; text-transform: none; color: var(--dim); }
.pstyle-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.pstyle-seg { flex: 1 1 0; min-width: 4px; padding: 0; border: 0; background: var(--k); opacity: 0.85; transition: opacity 0.15s, filter 0.15s; }
.pstyle-seg:hover { opacity: 1; filter: brightness(1.2); }
.pstyle-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pstyle-key { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: var(--ink); font: 500 0.8rem/1.2 var(--body); }
.pstyle-key b { color: var(--muted); font: 500 0.74rem/1 var(--mono); }
.pstyle-key:hover { color: var(--k); }
.pstyle-sw { width: 8px; height: 8px; border-radius: 2px; background: var(--k); }

/* ===== v0.17.0: the full site (Site Plan Brief 01, Phase 1 round 1) =====
   Sleek geometry (SP-17, 12.10): thin straight rules, small square markers beside section titles, plenty of empty
   space, one accent colour per page. v0.18.0: panels and buttons take the Card Database's rounded corners (the cut
   corners did not fit, user 2026-11-06). */
:root { --gold: #e8b44a; --gold-2: #ffd98a; }

/* header: the section menu, its floating page list, Shop (outlined gold) and Play Now (filled) */
/* v0.18.0: the section panel spans the header's width; titled columns start under the hovered link */
.tn-drop { position: absolute; left: 0; right: 0; z-index: 80; background: rgb(6 6 8 / 0.97); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgb(0 0 0 / 0.65); backdrop-filter: blur(6px); animation: fadeOnly 0.14s ease-out; }
.tn-drop[hidden] { display: none; }
.tn-drop-in { display: flex; gap: clamp(36px, 5vw, 84px); width: max-content; max-width: calc(100% - 32px); padding: 26px 0 30px; }
.tn-col { display: flex; flex-direction: column; min-width: 150px; }
.tn-col-h { margin: 0 0 10px; font: 700 0.92rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-2); }
.tn-drop-a { padding: 6px 0; color: var(--ink); font: 400 0.95rem/1.3 var(--body); text-decoration: none !important; white-space: nowrap; transition: color 0.12s, transform 0.12s; }
a.tn-drop-a:hover, a.tn-drop-a:focus-visible { color: var(--ember-2); transform: translateX(3px); outline: none; }
.tn-drop-a.on { color: var(--ember-2); }
.tn-drop-a.tn-all { margin-top: 2px; font-weight: 700; color: #fff; }
.tn-drop-a.is-soon { color: var(--dim); cursor: default; display: flex; align-items: center; gap: 8px; }
.tn-soon { font: 600 0.6rem/1 var(--mono); letter-spacing: 0.14em; color: var(--dim); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px; }
/* the open section's link: a small notch under it, pointing at the panel */
.topnav-a.open { color: var(--ink); }
.tn-notch { position: absolute; top: -1px; width: 0; height: 0; border: 7px solid transparent; border-top-color: var(--ember); border-bottom: 0; transform: translateX(-50%); filter: drop-shadow(0 0 6px var(--ember)); }
/* v0.18.0: five sections, COMMUNITY, Shop and Play Now fit one line from about 1300 px */
@media (min-width: 761px) {
  .topbar-in { column-gap: 18px; }
  .topnav-a { padding-inline: 10px; }
  .ss-box { width: clamp(110px, 9vw, 170px); }
  .comm-btn { padding: 12px 16px; font-size: 0.9rem; }
}
.menu-col-h { margin: 6px 0 0; padding: 8px 14px 4px 22px; font: 600 0.66rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-2); }
.menu-head { color: var(--muted); }
.menu-sub.is-soon { display: flex; align-items: center; gap: 8px; color: var(--dim); }
/* COMMUNITY (v0.18.0): the channel icons, then the community pages */
.comm-menu .comm-drop.comm-panel { display: flex; flex-direction: column; gap: 14px; width: 268px; padding: 16px 18px; }
.comm-panel .comm-icons { display: grid; grid-template-columns: repeat(5, 40px); gap: 12px; justify-content: space-between; }
.comm-links { display: flex; flex-direction: column; padding-top: 10px; border-top: 1px solid var(--line); }
.comm-menu.on .comm-btn { border-color: var(--ember); }
.shop-btn { display: grid; place-items: center; padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 9px; color: var(--gold-2) !important; font: 700 0.9rem/1 var(--display); letter-spacing: 0.14em; text-decoration: none !important; background: rgb(20 20 25 / 0.9); transition: background 0.15s, box-shadow 0.15s; }
.shop-btn:hover, .shop-btn.on { background: rgb(232 180 74 / 0.12); box-shadow: 0 0 14px rgb(232 180 74 / 0.3); }
.menu-sub { padding: 9px 14px 9px 28px; font-size: 0.8rem; color: var(--muted); }
.menu-shop { color: var(--gold-2); }
@media (max-width: 760px) { .shop-btn { display: none; } }

/* page files (content/pages): a reading column, with the Learn pages listed beside it */
.cpage { display: grid; grid-template-columns: minmax(0, 860px); justify-content: center; gap: 34px; padding-bottom: 20px; }
.cpage.cp-has-side { grid-template-columns: 210px minmax(0, 820px); }
.cpage-home { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cp-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cp-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line); position: relative; }
.cp-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.cp-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 0.74rem/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember-2); }
.cp-h1 { margin: 0; font: 700 clamp(1.9rem, 1.3rem + 2.4vw, 3rem)/1.1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-2); text-shadow: 0 2px 24px rgb(255 140 40 / 0.25); }
.cp-tag { margin: 0; font-size: 1.1rem; color: var(--muted); }
.md-mark { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; background: var(--ember); transform: rotate(45deg); box-shadow: 0 0 8px var(--ember); }
.cp-preview { margin: 0; padding: 12px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--warn); background: rgb(242 180 67 / 0.06); font-size: 0.9rem; color: var(--muted); }
.cp-preview b { color: var(--warn); font-weight: 600; }
.cp-body { display: flex; flex-direction: column; gap: 14px; line-height: 1.65; }
.cp-body > p, .md-list { margin: 0; max-width: 72ch; }
.md-list { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.md-list li::marker { color: var(--ember); }
.md-h2 { display: flex; align-items: center; gap: 12px; margin: 22px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 700 1.25rem/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-2); }
.md-h3 { margin: 10px 0 0; font: 700 1.02rem/1.3 var(--display); letter-spacing: 0.05em; color: var(--ink); }
.md-quote { margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--ember); font-style: italic; color: var(--ink); }
.md-hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.md-img { max-width: 100%; height: auto; border: 1px solid var(--line); }
.md-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* v0.18.0: the same rounded shapes as PLAY NOW and COMMUNITY (no cut corners), with the hover light sweep */
.md-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-grid; place-items: center; padding: 13px 22px; border-radius: 9px; font: 700 0.9rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: filter 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.md-btn-cta { color: #160800 !important; background: linear-gradient(180deg, #ffb062, #ff6a0a); border: 1px solid #ffc488; box-shadow: 0 0 12px rgb(255 106 10 / 0.3); }
.md-btn-cta:hover { filter: brightness(1.1); box-shadow: 0 0 22px rgb(255 120 30 / 0.55); }
.md-btn-line { color: var(--ink) !important; background: rgb(20 20 25 / 0.9); border: 1px solid var(--line-2); }
.md-btn-line:hover { border-color: var(--ember); box-shadow: 0 0 14px rgb(255 122 26 / 0.25); }
.md-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%); transform: translateX(-120%); }
.md-btn:hover::after, .md-btn:focus-visible::after { animation: clearSweep 0.75s ease-out; }
.md-tiles, .md-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.md-tile { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--abyss); border: 1px solid var(--line); border-radius: var(--r); }
.md-tile > * { margin: 0; }
.md-tile-h { margin: 0; font: 700 0.95rem/1.3 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-2); }
.md-tile .md-list { padding-left: 1.1em; font-size: 0.92rem; }
.md-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 10px; }
.md-steps > li { counter-increment: st; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.md-steps > li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; margin: 8px 0 0 4px; border: 1px solid var(--ember); color: var(--ember-2); font: 700 1rem/1 var(--display); }
.md-steps .md-tile { border-top-width: 1px; }
.md-box { padding: 18px 20px; background: var(--abyss); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; }
.md-box > p { margin: 0; }
.md-box-h { font: 700 0.85rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-2); }
.md-video { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border: 1px solid var(--line-2); }
.md-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.md-video-btn { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat; }
.md-video-ico { position: absolute; left: 50%; top: 50%; width: 78px; height: 54px; transform: translate(-50%, -50%); background: var(--ember); border-radius: 12px; box-shadow: 0 0 24px rgb(255 122 26 / 0.5); }
.md-video-ico::after { content: ""; position: absolute; left: 33px; top: 16px; border-left: 18px solid #160800; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.md-video-btn:hover .md-video-ico { filter: brightness(1.15); }
.md-form { display: flex; flex-direction: column; gap: 8px; }
.md-form iframe { width: 100%; min-height: 900px; border: 1px solid var(--line); background: #fff; }
.md-facs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.md-fac { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px; background: var(--abyss); border: 1px solid var(--line); border-left: 3px solid var(--fac); text-decoration: none !important; color: var(--ink); transition: box-shadow 0.15s, border-color 0.15s; }
.md-fac img { grid-row: span 2; width: 48px; height: 48px; object-fit: contain; }
.md-fac-n { font: 700 0.95rem/1.2 var(--display); letter-spacing: 0.06em; color: var(--fac); }
.md-fac-t { font-size: 0.82rem; color: var(--muted); }
.md-fac:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--fac) 35%, transparent); border-color: var(--fac); }
.md-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.md-card img { width: 150px; height: auto; display: block; border-radius: 8px; transition: transform 0.15s; }
.md-card:hover img { transform: translateY(-4px); }
.md-todo { margin: 0; padding: 8px 12px; border: 1px dashed #b77bff; color: #d9bfff; background: rgb(183 123 255 / 0.07); font-size: 0.85rem; }
.md-todo b { font-weight: 600; }
.cp-next { margin-top: 18px; padding: 20px; border: 1px solid var(--line-2); border-top: 2px solid var(--ember); background: linear-gradient(180deg, rgb(255 122 26 / 0.07), transparent 70%); display: flex; flex-direction: column; gap: 12px; }
.cp-next-h { margin: 0; font: 600 0.74rem/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember-2); }
.cp-side { position: sticky; top: calc(var(--topbar-h, 70px) + 18px); align-self: start; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.cp-side-h { margin: 0 0 8px; padding-left: 14px; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.24em; color: var(--ember-2); text-transform: uppercase; }
.cp-side-a { padding: 8px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); font-size: 0.92rem; text-decoration: none !important; }
.cp-side-a:hover { color: var(--ink); border-left-color: var(--line-2); }
.cp-side-a.on { color: var(--ink); border-left-color: var(--ember); background: linear-gradient(90deg, var(--ember-soft), transparent); }
.page-loading { min-height: 60vh; }
@media (max-width: 900px) {
  .cpage.cp-has-side { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* narrow screens: the Learn pages as a strip at the top */
  .cp-side { position: static; flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .cp-side-h { display: none; }
  .cp-side-a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; }
  .cp-side-a.on { border-bottom-color: var(--ember); background: none; }
}

/* home: the hero's pitch and buttons; the home page sections keep a reading width */
.hero-pitch { margin: 0; max-width: 60ch; font-size: 1.08rem; line-height: 1.6; color: var(--ink); text-shadow: 0 2px 12px rgb(0 0 0 / 0.9); }
.cpage-home .cp-body { gap: 22px; }
.cpage-home .cp-body > :not(.hero):not(.mq):not(.md-band) { width: min(100%, 1100px); margin-inline: auto; }

/* the newsletter box: in every footer, and larger inside a page */
.foot-signup { width: min(100% - 32px, 1100px); margin: 56px auto 34px; }
.signup { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 20px; border: 1px solid var(--line-2); border-left: 3px solid var(--ember); background: rgb(13 13 16 / 0.8); }
.signup-t { display: flex; flex-direction: column; gap: 4px; }
.signup-h { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 1rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-2); }
.signup-p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.signup-row { display: flex; gap: 10px; flex: 1 1 320px; max-width: 460px; }
.signup-row input { flex: 1; min-width: 0; padding: 12px 14px; background: #0a0a0d; border: 1px solid var(--line-2); color: var(--ink); font: 400 0.95rem var(--body); }
.signup-row input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); }
.signup-big { padding: 26px; background: linear-gradient(120deg, rgb(255 122 26 / 0.1), rgb(13 13 16 / 0.85) 55%); }
@media (max-width: 760px) { .signup-row { flex-basis: 100%; max-width: none; } }

/* pages written before the site's prerendered text is replaced: the text a search engine reads, shown plainly */
.prerender { max-width: 860px; margin: 40px auto; padding: 0 16px; color: var(--muted); }
.md-table-w { overflow-x: auto; }
.md-table { border-collapse: collapse; min-width: 420px; font-size: 0.94rem; }
.md-table th, .md-table td { padding: 9px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.md-table th { font: 600 0.74rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-2); border-bottom-color: var(--line-2); }
/* the text a search engine reads is in each built page; people see the page the scripts draw (the text shows only when scripts are off) */
.app .prerender { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* v0.17.0: the phone menu lists every page, so it scrolls when it is taller than the screen */
.menu-drop { max-height: calc(100dvh - var(--topbar-h, 70px) - 24px); overflow-y: auto; overscroll-behavior: contain; }

/* ===== v0.18.0 home page: fewer boxes, more room, one strong image per section =====
   Section titles centred and larger; the mechanics as six numbered points (no boxes); the Card Database as a fanned
   hand of cards; the factions as the Factions page's art tiles; the story as a full-width band over artwork. */
.cpage-home .cp-body { gap: 26px; }
.cpage-home .md-h2 { justify-content: center; margin-top: 84px; padding-bottom: 0; border: 0; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); letter-spacing: 0.1em; text-align: center; }
.cpage-home .md-h2 .md-mark { display: none; }
.cpage-home .md-h2::after { content: none; }
.cpage-home .md-h2 { flex-direction: column; gap: 14px; }
.cpage-home .md-h2::before { content: ""; order: 2; width: 64px; height: 2px; background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.cpage-home .cp-body > p { text-align: center; margin-inline: auto; color: #c9c2b8; }
.cpage-home .md-btns { justify-content: center; }
.cpage-home .md-video { width: min(100%, 960px); margin-inline: auto; border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 60px rgb(0 0 0 / 0.6), 0 0 40px rgb(255 122 26 / 0.12); }
.md-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; counter-reset: ft; }
.md-features .md-tile { counter-increment: ft; padding: 0 0 0 18px; background: none; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; transition: border-color 0.2s; }
.md-features .md-tile::before { content: counter(ft, decimal-leading-zero); font: 600 0.74rem/1 var(--mono); letter-spacing: 0.2em; color: var(--ember-2); }
.md-features .md-tile:hover { border-left-color: var(--ember); }
.md-features .md-tile-h { font-size: 1.02rem; color: var(--ink); }
.md-features .md-tile p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .md-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .md-features { grid-template-columns: minmax(0, 1fr); } }
.ftiles-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ftiles-home .ftile { min-height: 300px; }
@media (max-width: 1100px) { .ftiles-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftiles-home { grid-template-columns: minmax(0, 1fr); } .ftiles-home .ftile { min-height: 220px; } }
/* the story band reaches the screen's edges */
.cpage-home .cp-body > .md-band { width: auto; margin: 84px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; }
.md-band { position: relative; overflow: hidden; padding: clamp(60px, 9vw, 120px) 16px; background: var(--void); border-block: 1px solid var(--line); isolation: isolate; }
.md-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) center 30% / cover no-repeat; animation: fheroBreathe 26s ease-in-out infinite; }
.md-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgb(5 5 6 / 0.55), rgb(5 5 6 / 0.92) 75%), linear-gradient(0deg, var(--void), transparent 30%, transparent 70%, var(--void)); }
.md-band-in { width: min(100%, 760px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.md-band-in > p { font-size: 1.08rem; color: var(--ink); text-shadow: 0 2px 12px rgb(0 0 0 / 0.9); }
.cpage-home .md-band .md-h2 { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .md-band::before { animation: none; } }
.cpage-home .hero { min-height: min(92vh, 920px); }
.md-band::after { background: radial-gradient(ellipse at center, rgb(5 5 6 / 0.45), rgb(5 5 6 / 0.9) 78%), linear-gradient(0deg, var(--void), transparent 30%, transparent 70%, var(--void)); }
.cpage-home .cp-next { align-items: center; text-align: center; width: min(100%, 1100px); margin-inline: auto; }

/* ===== v0.18.0 card page ===== */
/* the name in a light tint of the faction's colour, the lore line under it in white (swapped from v0.16.0) */
.dv-name { color: color-mix(in srgb, var(--fac) 55%, #fff); }
.dv-lore { color: #fff; }
/* the icon glows: softer and wider (more blur) */
.cdi-w::before { inset: -34%; filter: blur(10px); }
/* the Common rarity icon is smaller than the others */
.dv-title .cdi-rar.cdi-common { width: 44px; height: 44px; }
@media (max-width: 760px) { .dv-title .cdi-rar.cdi-common { width: 32px; height: 32px; } }
/* ALL FACTION CARDS: now and then a light sweeps across it */
.btn-fac { position: relative; overflow: hidden; isolation: isolate; }
.btn-fac::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: facSweep 7s ease-in-out 2s infinite; }
@keyframes facSweep { 0%, 82% { transform: translateX(-120%); } 96%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .btn-fac::after { animation: none; display: none; } }

/* ===== v0.19.0: review round of v0.18.0 ===== */
/* 2. a wider page body: less empty space left and right */
.main { max-width: 1720px; }
.cpage { grid-template-columns: minmax(0, 960px); }
.cpage.cp-has-side { grid-template-columns: 220px minmax(0, 960px); }
.cpage.cpage-home { grid-template-columns: minmax(0, 1fr); }
.cpage-home .cp-body > :not(.hero):not(.mq):not(.md-band):not(.cw) { width: min(100%, 1240px); }
.page-read { max-width: 1100px; }
/* 4. NEXT: left-aligned on every page, the home page too */
.cpage-home .cp-next { align-items: flex-start; text-align: left; width: min(100%, 1240px); }
.cp-next .md-btns, .cpage-home .cp-next .md-btns { justify-content: flex-start; }
/* 1. the newsletter box carries a trace when it scrolls into view */
.signup { position: relative; border-radius: var(--r); }
/* 37. the Axion "A" above the newsletter box */
.foot-mark { display: grid; place-items: center; margin: 56px auto -24px; }
.foot-mark img { width: 92px; height: auto; opacity: 0.9; filter: drop-shadow(0 0 18px rgb(255 100 20 / 0.35)); }
/* 8. the corner glows fade out and back in */
body.mq-on .corner-glow { opacity: 0; transition: opacity 1.2s ease; }

/* header */
/* 5, 28. a column's first link in bold at the top; "indent" indents the links under it */
.tn-drop-a.tn-first { margin: 0 0 4px; }
.tn-indent .tn-drop-a:not(.tn-first) { padding-left: 14px; }
.menu-sub.tn-first { font-weight: 700; }
/* 16. a wider search box */
@media (min-width: 761px) { .ss-box { width: clamp(136px, 10.8vw, 230px); } }
@media (min-width: 761px) and (max-width: 1440px) { .topbar-in { column-gap: 12px; } .topnav-a { padding-inline: 7px; } }
/* 17. COMMUNITY: wide enough for every channel icon, its left edge under the button's left edge */
.comm-menu { position: relative; }
.comm-menu .comm-drop.comm-panel { left: 0; right: auto; width: max-content; }
.comm-panel .comm-icons { justify-content: start; }
/* 18. a light sweeps across SHOP on hover */
.shop-btn { position: relative; overflow: hidden; isolation: isolate; }
.shop-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 225 150 / 0.45) 50%, transparent 70%); transform: translateX(-120%); }
.shop-btn:hover::after, .shop-btn:focus-visible::after { transform: translateX(120%); transition: transform 0.7s ease-in-out; }
/* 19. a glow fades in behind the emblem and the wordmark on hover */
.brand { position: relative; isolation: isolate; }
.brand::before { content: ""; position: absolute; inset: -14px -26px; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 110 20 / 0.32), rgb(255 110 20 / 0.08) 60%, transparent); filter: blur(8px); opacity: 0; transition: opacity 0.45s ease; }
.brand:hover::before, .brand:focus-within::before { opacity: 1; }
/* 20. a header panel fades out when the pointer leaves it */
.tn-drop { transition: opacity 0.26s ease; }
.tn-drop.closing { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .shop-btn::after, .brand::before, .tn-drop { transition: none; } }

/* home page */
/* 9. 1-4 Players, 30-60+ Minutes, Ages 13+, Digital and physical (the old home page's images) */
.md-box.md-facts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 48px); padding: 0; background: none; border: 0; margin-top: 18px; }
.md-box.md-facts .md-img { width: clamp(96px, 11vw, 150px); border: 0; filter: drop-shadow(0 6px 16px rgb(0 0 0 / 0.6)); }
/* 10. one small picture under each mechanic's heading, dimmed until pointed at */
.md-features .md-img { order: -1; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); opacity: 0.72; filter: saturate(0.85); transition: opacity 0.25s, filter 0.25s; }
.md-features .md-tile:hover .md-img { opacity: 1; filter: none; }
.md-features .md-tile::before { order: -2; }
/* 11. the moving card wall */
.cw, .cpage-home .cp-body > .cw { width: auto; margin: 6px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 10px; overflow: hidden; perspective: 1400px; padding: 26px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cw-tilt { display: flex; flex-direction: column; gap: 14px; transform: rotateX(14deg) rotateZ(-2deg); transform-style: preserve-3d; }
.cw-track { display: flex; gap: 14px; width: max-content; animation: cwDrift var(--dur, 90s) linear infinite; }
.cw-rev .cw-track { animation-direction: reverse; }
.cw-row:hover .cw-track, .cw-row:focus-within .cw-track { animation-play-state: paused; }
@keyframes cwDrift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
.cw-c { position: relative; flex: 0 0 auto; width: clamp(96px, 9vw, 142px); aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 18px rgb(0 0 0 / 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cw-c img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-c:hover, .cw-c:focus-visible { z-index: 5; transform: translateZ(60px) scale(1.32); box-shadow: 0 20px 40px rgb(0 0 0 / 0.7), 0 0 26px color-mix(in srgb, var(--fac) 70%, transparent); outline: none; }
@media (prefers-reduced-motion: reduce) { .cw-track { animation: none; } }
@media (max-width: 560px) { .cw-c { width: 84px; } .cw-tilt { gap: 10px; } }
/* the video's plain link (pages that block embedded videos) */
.md-video-link { display: block; margin-top: 10px; text-align: center; font-size: 0.86rem; }

/* page files: picture tiles */
.md-products .md-img, .md-projects .md-img { order: -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.md-products .md-tile { gap: 10px; }
.md-products .md-tile:has(> .md-img + .md-img) { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.md-products .md-tile:has(> .md-img + .md-img) > :not(.md-img) { grid-column: 1 / -1; }
.md-products .md-tile:has(> .md-img + .md-img) .md-img { aspect-ratio: 5 / 7; }
.md-products .md-img[src*="coming-soon"] { opacity: 0.55; }
.md-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .md-projects { grid-template-columns: minmax(0, 1fr); } }

/* 29. the Factions page: larger, wide tiles, then the Unknown factions */
.ftiles-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ftiles-wide .ftile { min-height: 0; aspect-ratio: 16 / 7; padding: 22px 24px; }
.ftiles-wide .ftile::before { background-position: center 25%; }
.ftiles-wide .ftile-ico { width: 96px; height: 96px; }
.ftiles-wide .ftile-name { font-size: 1.7rem; }
.ftiles-unknown.ftiles-wide .ftile { min-height: 0; }
@media (max-width: 760px) { .ftiles-wide { grid-template-columns: minmax(0, 1fr); } .ftiles-wide .ftile { aspect-ratio: 16 / 8; } .ftiles-wide .ftile-ico { width: 70px; height: 70px; } }

/* faction pages */
/* 12. the play style in its own row, from Gameplay's left edge to the view buttons */
.fcards-h { align-items: stretch; flex-wrap: nowrap; gap: 14px; }
.fcards-h .pstyle { flex: 1 1 auto; margin: 0; padding: 14px 18px; border-top: 1px solid color-mix(in srgb, var(--fac) 70%, transparent); }
.fcards-h .viewsw { align-self: flex-end; }
.pstyle.hl .pstyle-seg:not(.on) { opacity: 0.22; }
.pstyle-seg.on { opacity: 1; filter: brightness(1.25); }
@media (max-width: 760px) { .fcards-h { flex-wrap: wrap; } .fcards-h .viewsw { align-self: auto; margin-left: auto; } }
/* 13. Gameplay and Collection the same height */
.fcols { align-items: stretch; }
.fcols > .panel { height: 100%; }
/* 14. DISCOVER THE LORE */
.btn-lore { align-self: flex-start; display: inline-grid; place-items: center; margin-top: 6px; padding: 12px 22px; border-radius: 9px; background: var(--fac); color: #0b0b0e !important; font: 700 0.86rem/1 var(--display); letter-spacing: 0.14em; text-decoration: none !important; box-shadow: 0 0 18px color-mix(in srgb, var(--fac) 45%, transparent); transition: filter 0.15s, box-shadow 0.15s; }
.btn-lore:hover, .btn-lore:focus-visible { filter: brightness(1.12); box-shadow: 0 0 26px color-mix(in srgb, var(--fac) 70%, transparent); outline: none; }

/* card page */
/* 21. the name in the same light faction colour as the faction page's name */
.dv-name { color: color-mix(in srgb, var(--fac) 30%, #fff); }
/* 22. the lore line indented */
.dv-lore { padding-left: 1.25rem; }
/* 23. the type, faction and rarity icons fade in one after another */
.dv-title .cd-icons .cdi-w { animation: fadeOnly 0.5s ease-out backwards; }
.dv-title .cd-icons .cdi-w:nth-child(1) { animation-delay: 0.25s; }
.dv-title .cd-icons .cdi-w:nth-child(2) { animation-delay: 0.5s; }
.dv-title .cd-icons .cdi-w:nth-child(3) { animation-delay: 0.75s; }
/* 24. an icon's glow fades out when the pointer leaves, even after a click (only keyboard focus keeps it lit) */
.cdi-w:focus-within:not(:hover):not(:has(:focus-visible))::before { opacity: 0; }
/* 25. the lit section tab fades out as the next one fades in */
.dv-tab { transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease; }
@media (prefers-reduced-motion: reduce) { .dv-title .cd-icons .cdi-w { animation: none; } .dv-tab { transition: none; } }
/* 27. the card lightbox on every screen */
.detail .dv-stage .c3d { cursor: zoom-in; }
.lightbox .c3d { cursor: zoom-out; }

/* 31-34. the Glossary: GAMEPLAY and STORY, search and RANDOM */
.gl-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.gl-search .search { flex: 1 1 260px; }
.gl-random { padding-inline: 18px; letter-spacing: 0.14em; }
.gl-kinds { display: flex; gap: 8px; margin-bottom: 10px; }
.gl-kind { padding: 10px 20px; border: 1px solid var(--line-2); border-radius: 9px; background: rgb(255 255 255 / 0.03); color: var(--muted); font: 700 0.9rem/1 var(--display); letter-spacing: 0.16em; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.gl-kind:hover { color: var(--ink); border-color: var(--ember); }
.gl-kind[aria-selected="true"] { color: var(--ink); border-color: var(--ember); background: var(--ember-soft); }
.gl-picked { border-left: 2px solid var(--ember); padding-left: 12px; animation: fadeOnly 0.35s ease-out; }

/* ===== v0.20.0: review round of v0.19.0 ===== */
/* a light that sweeps across a button once on hover (Glossary GAMEPLAY, STORY and RANDOM; DISCOVER THE LORE; buttons below) */
.hsweep, .btn-lore, .md-band .md-btn, .cpage-home .cp-body > .md-btns .md-btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.hsweep::after, .btn-lore::after, .md-band .md-btn::after, .cpage-home .cp-body > .md-btns .md-btn-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.32) 50%, transparent 70%); transform: translateX(-120%); }
.hsweep:hover::after, .hsweep:focus-visible::after, .btn-lore:hover::after, .btn-lore:focus-visible::after, .md-band .md-btn:hover::after, .cpage-home .cp-body > .md-btns .md-btn-cta:hover::after { transform: translateX(120%); transition: transform 0.7s ease-in-out; }

/* Glossary */
/* 1. RANDOM: the Shuffle icon, and a glow that fades in and out on each click */
.gl-random { display: inline-flex; align-items: center; gap: 8px; }
.gl-random-ico { width: 17px; height: 17px; }
.gl-random.glow { animation: rndGlow 1.1s ease-in-out; }
@keyframes rndGlow { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 122 26 / 0); border-color: var(--line-2); } 40% { box-shadow: 0 0 0 1px var(--ember), 0 0 24px 4px rgb(255 122 26 / 0.55); border-color: var(--ember); } }

/* header */
/* 5. the "A" icon and the text logo act as one: pointing at either lights both, with the glow behind them */
.brand-emblem-a:hover .brand-emblem { filter: drop-shadow(0 0 10px rgb(255 100 20 / 0.35)); }
.brand-emblem, .brand-word { transition: filter 0.45s ease; }
.brand:hover .brand-emblem, .brand:focus-within .brand-emblem, .brand:hover .brand-word, .brand:focus-within .brand-word { filter: drop-shadow(0 0 12px rgb(255 120 30 / 0.6)); }
/* 6. a little empty space between the text logo and LEARN */
@media (min-width: 761px) { .brand { margin-right: 18px; } }
/* 7. when the section links do not all fit, the MENU button replaces them (no cut-off words, no arrows) */
@media (min-width: 761px) {
  .topbar.use-menu .topnav-wrap { visibility: hidden; flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; }
  .topbar.use-menu .menu { display: block; }
  .topbar.use-menu .nav-arrow { display: none !important; }
}
/* 7. laptop widths: a narrower search box, so the section links still fit beside it */
@media (min-width: 761px) and (max-width: 1440px) { .ss-box { width: clamp(100px, 7.6vw, 150px); } }
/* 4. phones (COMMUNITY is the link icon): a shorter search box, SHOP shown whole, the COMMUNITY panel inside the screen */
@media (max-width: 760px) {
  .brand-emblem { width: 44px; height: 44px; }
  .topbar-r .ss { flex: 0 1 44px; }
  .shop-btn { display: grid; flex: 0 0 auto; padding: 8px 8px; font-size: 0.74rem; letter-spacing: 0.1em; white-space: nowrap; }
  .play-now { flex: 0 0 auto; max-width: 66px; padding-inline: 8px; line-height: 1.1; text-align: center; white-space: normal; }
  .topbar-r { gap: 5px; }
  .comm-menu { position: static; }
  .comm-menu .comm-drop.comm-panel { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h, 64px) - 4px); width: auto; max-width: none; }
  .comm-panel .comm-icons { grid-template-columns: repeat(auto-fill, 40px); justify-content: space-between; }
}
/* 8. the page body even wider */
.main { max-width: 1880px; }
.cpage { grid-template-columns: minmax(0, 1100px); }
.cpage.cp-has-side { grid-template-columns: 220px minmax(0, 1100px); }
@media (max-width: 900px) { .cpage.cp-has-side { grid-template-columns: minmax(0, 1fr); gap: 18px; } }   /* phones and tablets keep one column (the wider rules above had overridden it since v0.19.0) */
.cpage.cpage-home { grid-template-columns: minmax(0, 1fr); }
.cpage-home .cp-body > :not(.hero):not(.mq):not(.md-band):not(.cw) { width: min(100%, 1400px); }
.cpage-home .cp-next { width: min(100%, 1400px); }
/* 9. the footer: JOIN THE COMMUNITY is a link; Terms and Privacy Policy stay on one line */
.foot-join a { color: inherit; text-decoration: none !important; }
.foot-join a:hover, .foot-join a:focus-visible { color: #fff; }
.foot-pair { display: inline-flex; gap: 10px; white-space: nowrap; }
@media (max-width: 760px) { .foot-pair { gap: 18px; } }

/* home page */
/* 10. the full logo, with "Forge the future" under it */
.hero-logo { margin: 0; line-height: 0; }
.hero-logo img { width: min(460px, 78%); height: auto; filter: drop-shadow(0 6px 30px rgb(0 0 0 / 0.8)); }
.hero-in-home .hero-tag { width: min(380px, 70%); margin-top: -6px; }
/* 11. PLAY NOW and LEARN THE RULES at the left */
.cpage-home .hero-btns { justify-content: flex-start; }
/* 13. the four facts in a column in the hero's top right corner, smaller, glowing on hover */
.cpage-home .cp-body { position: relative; }
.cpage-home .cp-body > .md-box.md-facts { position: absolute; z-index: 2; top: 20px; right: clamp(8px, 2vw, 36px); width: auto !important; margin: 0 !important; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.cpage-home .md-box.md-facts .md-img { width: clamp(64px, 5.4vw, 92px); transition: filter 0.35s ease; }
.cpage-home .md-box.md-facts .md-img:hover { filter: drop-shadow(0 6px 16px rgb(0 0 0 / 0.6)) drop-shadow(0 0 14px rgb(255 130 40 / 0.75)); }
@media (max-width: 760px) { .cpage-home .cp-body > .md-box.md-facts { top: 10px; right: 6px; gap: 6px; } .cpage-home .md-box.md-facts .md-img { width: 50px; } .hero-in-home { padding-right: 52px; } }
/* 14. a mechanic's picture opens its page, as its title does */
.md-img-a { display: block; order: -1; line-height: 0; border-radius: 8px; overflow: hidden; }
.md-tile-h a { color: inherit; }
.md-tile-h a:hover { color: var(--ember-2); }
/* 16. more space above WHAT IS AXION FORGE?, filled, with an orange glow on hover and a light sweep */
.cpage-home .md-features + .md-btns { margin-top: 40px; }
.cpage-home .cp-body > .md-btns .md-btn-cta { transition: box-shadow 0.4s ease, filter 0.2s; }
.cpage-home .cp-body > .md-btns .md-btn-cta:hover, .cpage-home .cp-body > .md-btns .md-btn-cta:focus-visible { box-shadow: 0 0 26px 4px rgb(255 122 26 / 0.6); }
/* 17-20. the card wall: rows moved by script (drag and momentum), the lifted card above every row, larger and sharp */
.cw-track { animation: none; will-change: transform; }
.cw-row { position: relative; z-index: 1; cursor: grab; touch-action: pan-y; }
.cw-row.cw-dragging { cursor: grabbing; }
.cw-row.cw-dragging .cw-c { pointer-events: none; }
.cw-row:hover, .cw-row:focus-within { z-index: 3; }
.cw-c { -webkit-user-drag: none; user-select: none; }
.cw-c img { pointer-events: none; }
.cw-c:hover, .cw-c:focus-visible { z-index: 5; transform: translateZ(80px) scale(1.42); backface-visibility: hidden; }
.cpage-home .cp-body > .cw { width: auto !important; margin: 6px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 10px !important; padding: 46px 0 56px; }

/* 21. Discover the factions: wider, more rectangular tiles, three per row, then the Unknown tile */
.ftiles-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ftiles-home .ftile { min-height: 0; aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .ftiles-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftiles-home { grid-template-columns: minmax(0, 1fr); } .ftiles-home .ftile { min-height: 0; } }
.ftile-cycle { padding: 0; }
.ftile-cycle::before { display: none; }
.ftile-u { position: absolute; inset: 0; isolation: isolate; display: flex; gap: 14px; align-items: flex-end; padding: 18px; opacity: 0; transition: opacity 0.9s ease; }
.ftile-u.on { opacity: 1; }
.ftile-u::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) center 22% / cover no-repeat; filter: saturate(0.85); transition: transform 0.4s ease; }
.ftile-u::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(8 8 10 / 0.96) 8%, rgb(8 8 10 / 0.55) 48%, rgb(8 8 10 / 0.12) 100%); }
.ftile-cycle:hover .ftile-u::before { transform: scale(1.05); }
.ftile-cycle:hover .ftile-u .ftile-ico, .ftile-cycle:focus-visible .ftile-u .ftile-ico { filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.8)) drop-shadow(0 0 16px var(--fac)); }
/* 23. The story: one line per paragraph on wide screens; on phones each sentence on its own line */
.cpage-home .md-band-in { width: min(100%, 1100px); }
@media (min-width: 1000px) { .md-band-in > p:has(.md-s) { white-space: nowrap; } }
@media (max-width: 760px) { .md-band-in > p .md-s { display: block; } }

/* Factions page */
/* 24. four rectangular tiles per row, about 16:9 */
.ftiles-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ftiles-wide .ftile { aspect-ratio: 16 / 9; padding: 16px 18px; }
.ftiles-wide .ftile-ico { width: 72px; height: 72px; }
.ftiles-wide .ftile-name { font-size: clamp(1.05rem, 0.7rem + 0.6vw, 1.35rem); }
.ftiles-wide .ftile-ico { width: clamp(52px, 4.2vw, 72px); height: clamp(52px, 4.2vw, 72px); }
.cpage[data-path="factions"] { grid-template-columns: minmax(0, 1440px); }
@media (max-width: 1200px) { .ftiles-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ftiles-wide { grid-template-columns: minmax(0, 1fr); } .ftiles-wide .ftile { aspect-ratio: 16 / 9; } }

/* About page */
/* 26. a project's picture enlarges on hover and opens its link */
.md-projects .md-img-a .md-img { transition: transform 0.4s ease; }
.md-projects .md-tile:hover .md-img, .md-projects .md-img-a:focus-visible .md-img { transform: scale(1.06); }

/* Gameplay › Battle Maps: the working example (the card, then its map) */
.md-bm { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px; border: 1px solid var(--line); border-top: 1px solid color-mix(in srgb, var(--fac) 70%, transparent); border-radius: var(--r); background: rgb(255 255 255 / 0.02); }
.md-bm-card { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.md-bm-card .c3d { width: 100%; }
.md-bm-name { font-size: 0.86rem; text-align: center; }
@media (max-width: 760px) { .md-bm { grid-template-columns: minmax(0, 1fr); padding: 14px; } .md-bm-card .c3d { width: 150px; } }

/* card page */
/* 28. ALL FACTION CARDS filled with the faction's colour; a light sweeps across it on hover only */
.related .btn-fac, .detail .related .btn-fac { color: #0b0b0e; background: var(--fac); border-color: color-mix(in srgb, var(--fac) 70%, #fff); }
.related .btn-fac:hover, .related .btn-fac:focus-visible { color: #0b0b0e; background: var(--fac); filter: brightness(1.1); box-shadow: 0 0 22px color-mix(in srgb, var(--fac) 60%, transparent); }
.btn-fac::after { animation: none; }
.btn-fac:hover::after, .btn-fac:focus-visible::after { transform: translateX(120%); transition: transform 0.7s ease-in-out; }
/* 30. the Melee, Ranged, Guard and Special chips more square */
.bm-kinds .chip { border-radius: 6px; }
/* 31. EXPLORE <FACTION>: a button in the faction's colour */
.btn-explore { border: 0; cursor: pointer; margin-top: 0; }
/* 33. the Archetype tags under the type, faction and rarity icons, in the play style bar's colours */
.dv-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.cd-arch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cd-arch-t { padding: 5px 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--k) 70%, transparent); background: color-mix(in srgb, var(--k) 16%, transparent); color: color-mix(in srgb, var(--k) 45%, #fff); font: 600 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.2s, box-shadow 0.2s; }
.cd-arch-t:hover, .cd-arch-t:focus-visible { background: color-mix(in srgb, var(--k) 30%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--k) 50%, transparent); outline: none; }
@media (max-width: 760px) { .dv-badges { display: contents; } .cd-arch { order: 4; width: 100%; justify-content: center; margin: -4px 0 14px; } }
/* 35. the icons are links (the pointing hand) */
.cdi-link { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hsweep::after, .btn-lore::after, .btn-fac::after, .md-band .md-btn::after, .cpage-home .cp-body > .md-btns .md-btn-cta::after { display: none; } .gl-random.glow, .ftile-u { animation: none; transition: none; } }

/* ===== v0.21.0: review round of v0.20.0 (numbers are the items in TODO.md › Now) ===== */
/* header */
/* 27-28. the "A" icon and the wordmark light up separately, and each glow fades out when the pointer leaves (a click no
   longer keeps it lit: only keyboard focus does) */
.brand::before { display: none; }
.brand-emblem-a, .brand-t { position: relative; isolation: isolate; }
.brand-emblem-a::before, .brand-t::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 122 26 / 0.5), rgb(255 90 10 / 0.16) 60%, transparent); filter: blur(12px); opacity: 0; transition: opacity 0.45s ease; }
.brand-emblem-a::before { inset: -10px; }
.brand-t::after { inset: -6px -14px; }
.brand-emblem-a:hover::before, .brand-emblem-a:focus-visible::before, .brand-t:hover::after, .brand-t:focus-visible::after { opacity: 1; }
.brand:hover .brand-emblem, .brand:focus-within .brand-emblem, .brand:hover .brand-word, .brand:focus-within .brand-word { filter: none; }
.brand-emblem { filter: drop-shadow(0 0 10px rgb(255 100 20 / 0.35)); }
.brand-emblem-a:hover .brand-emblem, .brand-emblem-a:focus-visible .brand-emblem { filter: drop-shadow(0 0 14px rgb(255 120 30 / 0.7)); }
/* 30. the header wordmark copies the footer logo: a soft glow that breathes behind it, brighter on hover */
.brand-t::before { content: ""; position: absolute; inset: 0 -10px; z-index: -2; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 122 26 / 0.34), rgb(255 90 10 / 0.1) 60%, transparent); filter: blur(12px); animation: logoGlow 4.5s ease-in-out infinite; }
.brand-t:hover .brand-word, .brand-t:focus-visible .brand-word { filter: brightness(1.15) drop-shadow(0 0 10px rgb(255 140 50 / 0.6)); }
/* 29. narrow windows: COMMUNITY shrinks to its icon before the links give way to MENU */
@media (min-width: 761px) {
  .topbar.tight .comm-btn { padding: 9px 11px; gap: 0; }
  .topbar.tight .comm-btn .comm-t, .topbar.tight .comm-menu .caret { display: none; }
  .topbar.tight .comm-btn .comm-ico { display: inline-grid; width: 18px; height: 18px; color: var(--ink); }
  .topbar.tight .ss-box { width: clamp(96px, 8vw, 140px); }
}
/* 29, 21. the MENU panel: one sub-list per section. Side by side as columns when there is room (a sideways phone, a
   narrow window); on an upright phone each section opens under its name */
.menu-drop { position: fixed; left: auto; right: 12px; top: calc(var(--topbar-h, 70px) - 4px); min-width: 0; width: min(calc(100vw - 24px), 880px); padding: 10px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 10px; }
.menu-sec { display: flex; flex-direction: column; min-width: 0; padding-bottom: 6px; }
.menu-sec-h { display: flex; align-items: center; }
.menu-sec-h .menu-a { flex: 1 1 auto; }
.menu-sec-t { display: none; width: 44px; height: 40px; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.menu-sec-t .caret { display: inline-block; transition: transform 0.25s ease; }
.menu-sec-b { display: flex; flex-direction: column; }
.menu-sec-b > .menu-a { display: block; }
.menu-sec-b > .menu-a.is-soon { display: flex; }
.menu-sec-b .menu-col-h { padding-left: 14px; }
.menu-sec-b .menu-sub { padding-left: 14px; }
.menu-shop { display: block; margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; }
@media (max-width: 560px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
  .menu-sec { padding-bottom: 0; border-bottom: 1px solid var(--line); }
  .menu-sec-t { display: grid; place-items: center; }
  .menu-sec.open .menu-sec-t .caret { transform: rotate(180deg); }
}
@media (max-width: 560px) { .menu-sec-b { display: block; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .menu-sec.open .menu-sec-b { max-height: 640px; } }
/* 3. MENU and COMMUNITY: the orange glow fades in on hover, and the open panels fade in with a soft glow */
.menu-btn, .comm-btn { transition: border-color 0.3s ease, box-shadow 0.4s ease; }
.menu-btn:hover, .menu-btn[aria-expanded="true"], .comm-menu:hover .comm-btn, .comm-menu:has(:focus-visible) .comm-btn { box-shadow: 0 0 18px 2px rgb(255 122 26 / 0.45); }
.comm-menu .comm-drop { box-shadow: var(--shadow), 0 0 0 rgb(255 122 26 / 0); transition: opacity 0.25s ease, visibility 0s 0.25s, box-shadow 0.25s ease; }
.comm-menu:hover .comm-drop, .comm-menu:has(:focus-visible) .comm-drop { box-shadow: var(--shadow), 0 0 30px 2px rgb(255 122 26 / 0.3); border-color: rgb(255 122 26 / 0.45); transition: opacity 0.25s ease, visibility 0s, box-shadow 0.6s ease 0.05s, border-color 0.6s ease; }
@media (hover: none) { .comm-menu:focus-within .comm-drop { box-shadow: var(--shadow), 0 0 30px 2px rgb(255 122 26 / 0.3); border-color: rgb(255 122 26 / 0.45); } }
.menu-drop:not([hidden]) { animation: menuIn 0.6s ease-out both; }
@keyframes menuIn { 0% { opacity: 0; transform: translateY(-4px); box-shadow: 0 16px 34px rgb(0 0 0 / 0.6); border-color: var(--line-2); } 35% { opacity: 1; transform: none; } 100% { opacity: 1; box-shadow: 0 16px 34px rgb(0 0 0 / 0.6), 0 0 30px 2px rgb(255 122 26 / 0.3); border-color: rgb(255 122 26 / 0.45); } }
/* footer */
/* 2. JOIN THE COMMUNITY: a stronger glow fades in on hover (and out again) */
.foot-join a { transition: color 0.35s ease, text-shadow 0.5s ease; }
.foot-join a:hover, .foot-join a:focus-visible { text-shadow: 0 0 18px rgb(255 122 26 / 0.95), 0 0 36px rgb(255 122 26 / 0.5), 0 0 3px rgb(255 230 200 / 0.8); }
@media (prefers-reduced-motion: reduce) { .brand-t::before { animation: none; } .menu-drop:not([hidden]) { animation: none; } }
/* home page */
/* 34. the card wall: each card is laid out at its lifted size and drawn smaller, so a lifted card is sharp; the pointer
   magnifies the cards near it (script), and the card under it glows */
.cw-c { --w: clamp(96px, 9vw, 142px); width: calc(var(--w) * 1.42); margin: calc(var(--w) * -0.294) calc(var(--w) * -0.21); transform: scale(0.7042); transition: box-shadow 0.25s ease; backface-visibility: hidden; }
.cw-c:hover, .cw-c:focus-visible { transform: scale(0.7042); }
.cw-c:focus-visible { transform: translateZ(80px) scale(1); z-index: 50; }
@media (hover: none) { .cw-c:active { transform: translateZ(60px) scale(0.9); z-index: 50; } }
@media (max-width: 560px) { .cw-c { --w: 84px; width: calc(var(--w) * 1.42); } }
/* 4. phones: the sticky bars without the costly background blur (a more solid background instead) */
@media (max-width: 760px), (pointer: coarse) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(5 5 6 / 0.97); }
  .devbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dv-bar::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* 19. the Learn side list: Factions Overview set apart below the other pages, its factions in a list that opens under it */
.cp-side-group { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.cp-side-row { display: flex; align-items: center; }
.cp-side-row .cp-side-a { flex: 1 1 auto; }
.cp-side-tog { width: 32px; height: 32px; margin-right: 4px; border: 0; border-radius: 6px; background: none; color: var(--muted); }
.cp-side-tog:hover { color: var(--ember-2); background: var(--ember-soft); }
.cp-side-tog .caret { display: inline-block; transition: transform 0.25s ease; }
.cp-side-tog[aria-expanded="true"] .caret { transform: rotate(180deg); }
.cp-side-sub { display: flex; flex-direction: column; animation: fadeIn 0.3s ease-out; }
.cp-side-sub[hidden] { display: none; }
.cp-side-kid { padding: 6px 14px 6px 28px; font-size: 0.86rem; }
@media (max-width: 900px) {
  .cp-side { flex-wrap: wrap; }
  .cp-side-group { display: contents; }
  .cp-side-row { flex: 0 0 auto; }
  .cp-side-sub { order: 99; flex: 0 0 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); }
  .cp-side-kid { padding: 8px 12px; white-space: nowrap; }
}
/* 31-32. a larger logo, with "Forge the future" centred under it */
.hero-brand { display: flex; flex-direction: column; align-items: center; width: min(640px, 100%); }
.hero-logo { position: relative; isolation: isolate; width: 100%; text-align: center; }
.hero-logo img { position: relative; width: min(640px, 100%); }
.hero-in-home .hero-tag { width: min(440px, 72%); margin: -4px auto 0; }
@media (max-width: 760px) { .hero-brand { width: 100%; } .hero-logo img { width: min(420px, 100%); } .hero-in-home .hero-tag { width: min(300px, 72%); } }
/* 39. energy behind the logo: a slow breathing glow and now and then a burst of sparks (HeroEnergy) */
.hero-energy { position: absolute; z-index: -1; left: 50%; top: 42%; width: 130%; aspect-ratio: 1.6; transform: translate(-50%, -50%); pointer-events: none; }
.hero-energy::before { content: ""; position: absolute; inset: 18% 22%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 150 60 / 0.42), rgb(255 100 20 / 0.16) 55%, transparent); animation: energyBreathe 5.5s ease-in-out infinite; will-change: opacity, transform; }
.hero-energy::after { content: ""; position: absolute; inset: 34% 38%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 230 190 / 0.35), transparent); animation: energyBreathe 3.2s ease-in-out infinite reverse; }
@keyframes energyBreathe { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
.hero-sparks { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .hero-energy::before, .hero-energy::after { animation: none; } }
/* 33. home page: the corner glows are hidden while the hero is on screen (fading out quickly), and fade in below it */
body.hero-home .corner-glow { opacity: 0; transition: opacity 0.35s ease; }
/* 37. the Unknown icon beside the faction icons: the Unknown factions' icons crossfade in one place */
.hero-fac-unk { display: grid; }
.hero-fac-unk .hero-unk { grid-area: 1 / 1; opacity: 0; transition: opacity 0.8s ease, filter 0.18s; }
.hero-fac-unk .hero-unk.on { opacity: 1; }
/* 10, 16. a brighter light sweeps across these buttons on hover, and always runs to the end: SEE THE CARDS, WHAT IS
   AXION FORGE?, EXPLORE THE STORY, ALL FACTION CARDS, EXPLORE <FACTION> */
.btn-fac, .btn-explore, .md-band .md-btn, .cpage-home .cp-body > .md-btns .md-btn-cta { position: relative; overflow: hidden; isolation: isolate; }
.btn-fac::after, .btn-explore::after, .md-band .md-btn::after, .cpage-home .cp-body > .md-btns .md-btn-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 28%, rgb(255 255 255 / 0.6) 50%, transparent 72%); transform: translateX(-120%); transition: none; animation: none; }
.btn-fac:hover::after, .btn-fac:focus-visible::after, .btn-explore:hover::after, .btn-explore:focus-visible::after, .md-band .md-btn:hover::after, .md-band .md-btn:focus-visible::after, .cpage-home .cp-body > .md-btns .md-btn-cta:hover::after, .cpage-home .cp-body > .md-btns .md-btn-cta:focus-visible::after { transform: translateX(-120%); transition: none; animation: sweepX 0.8s ease-in-out; }
@keyframes sweepX { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
/* 5. ALL FACTION CARDS in the same lettering as EXPLORE <FACTION> */
.related .btn-fac, .detail .related .btn-fac { font: 700 0.86rem/1 var(--display); letter-spacing: 0.14em; padding: 12px 22px; border-radius: 9px; }
/* 43. the buttons above and below the card wall and under THE STORY are larger; 10. EXPLORE THE STORY is filled
   orange and its glow fades in on hover */
.cpage-home .cp-body > .md-btns .md-btn, .cpage-home .md-band .md-btn { padding: 18px 34px; font-size: 1.05rem; letter-spacing: 0.16em; box-shadow: 0 0 18px rgb(255 106 10 / 0.35); transition: box-shadow 0.45s ease, filter 0.2s; }
.cpage-home .cp-body > .md-btns .md-btn:hover, .cpage-home .cp-body > .md-btns .md-btn:focus-visible, .cpage-home .md-band .md-btn:hover, .cpage-home .md-band .md-btn:focus-visible { box-shadow: 0 0 32px 6px rgb(255 122 26 / 0.65); filter: brightness(1.06); }
/* 40. more space between THE STORY's words and its button */
.cpage-home .md-band-in > .md-btns { margin-top: 22px; }
/* 44. THE STORY's background artwork crossfades from one picture to the next (ContentPage) */
.md-band.md-band-cycle::before { display: none; }
.md-band-bg { position: absolute; inset: 0; z-index: -2; }
.md-band-f { position: absolute; inset: 0; background: var(--art) center 30% / cover no-repeat; opacity: 0; transition: opacity 2s ease; }
.md-band-f.on { opacity: 1; animation: fheroBreathe 26s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .md-band-f.on { animation: none; } }
/* 35. the pictures under "A different kind of card game" glow on hover; 42. the titles in orange */
.md-features .md-tile:hover .md-img { box-shadow: 0 0 26px 2px rgb(255 122 26 / 0.45); border-color: rgb(255 122 26 / 0.6); }
.md-features .md-img { transition: opacity 0.35s, filter 0.35s, box-shadow 0.45s ease, border-color 0.45s ease; }
.cpage-home .md-features .md-tile-h, .cpage-home .md-features .md-tile-h a { color: var(--ember-2); }
.cpage-home .md-features .md-tile-h a:hover { color: #ffd2a0; }
/* 36. the NEXT box as wide as the newsletter box (home and Factions pages) */
.cpage-home .cp-next, .cpage[data-path="factions"] .cp-next { width: min(100% - 32px, 1100px); margin-inline: auto; }
.cpage[data-path="factions"] .cp-next { width: min(100%, 1100px); }
/* 20. phones: the four facts move out of the hero, small and side by side under the first card carousel */
@media (max-width: 760px) {
  .cpage-home .cp-body > .md-box.md-facts { position: static; flex-direction: row; justify-content: center; gap: 14px; margin: 14px auto 0 !important; }
  .cpage-home .md-box.md-facts .md-img { width: 64px; }
  .hero-in-home { padding-right: 0; }
}
/* card page */
/* 45. the Archetype tags hang under the icons without moving the name or the lore line (wide screens: the lore line
   leaves room for them); a light sweeps across each tag now and then */
@media (min-width: 761px) {
  .dv-badges { position: relative; }
  .dv-badges .cd-arch { position: absolute; top: calc(100% + 8px); right: 0; width: max-content; max-width: 300px; }
  .dv-head:has(.cd-arch) .dv-lore { max-width: min(62ch, calc(100% - 320px)); }
}
.cd-arch-t { position: relative; overflow: hidden; isolation: isolate; }
.cd-arch-t::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 0.45) 50%, transparent 75%); transform: translateX(-130%); animation: tagSweep 9s ease-in-out 2s infinite; }
.cd-arch-t:nth-child(2)::after { animation-delay: 2.5s; }
.cd-arch-t:nth-child(3)::after { animation-delay: 3s; }
@keyframes tagSweep { 0% { transform: translateX(-130%); } 9% { transform: translateX(130%); } 100% { transform: translateX(130%); } }
/* 46. the lore line fades in word by word */
.dv-lw { display: inline-block; animation: loreWord 0.5s ease-out backwards; animation-delay: var(--d, 0ms); }
@keyframes loreWord { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .cd-arch-t::after, .dv-lw { animation: none; } }
/* faction pages */
/* 6. a COLLECTION box's outline fades in on hover and out again; a light sweeps across it when it is selected */
button.fstat { position: relative; overflow: hidden; isolation: isolate; transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; }
button.fstat::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--fac) 45%, rgb(255 255 255 / 0.35)) 50%, transparent 75%); transform: translateX(-130%); }
button.fstat[aria-pressed="true"]::after { animation: sweepX 0.85s ease-in-out; }
/* 23. phones: two boxes per row, the words allowed to wrap, so every label fits inside its box */
@media (max-width: 760px) {
  .fstat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fstat { gap: 8px; padding: 8px 10px; }
  .fstat-txt span { white-space: normal; overflow-wrap: anywhere; font-size: 0.56rem; letter-spacing: 0.04em; }
  .fstat-ico { flex: 0 0 26px; width: 26px; min-width: 0; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { button.fstat[aria-pressed="true"]::after { animation: none; } }
/* battle maps */
/* 24. the map never draws smaller than the card on the card page (about 320 px; it moves above the explanation box
   instead); the tags shrink with its squares and stay on one row until they must make two rows of two */
.bm-body { grid-template-columns: minmax(min(100%, 320px), 420px) minmax(200px, 1fr); }
.bm { container-type: inline-size; }
@container (max-width: 560px) { .bm-body { grid-template-columns: minmax(0, 1fr); } .bm-map-col { width: min(100%, 420px); margin-inline: auto; } }
.bm-kinds, .bm-side-col .bm-kinds { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: calc(8px * var(--bm-s, 1)); max-width: 100%; }
.bm-kinds .chip { flex: 0 0 auto; min-width: 0; padding: calc(9px * var(--bm-s, 1)) calc(15px * var(--bm-s, 1)); font-size: calc(0.88rem * var(--bm-s, 1)); gap: calc(8px * var(--bm-s, 1)); }
.bm-kinds .bm-kico { width: calc(16px * var(--bm-s, 1)); height: calc(16px * var(--bm-s, 1)); }
.bm-kinds.bm-kinds-2 { display: grid; grid-template-columns: repeat(2, max-content); }
/* 13. Glossary, Lore and the Card Database in the shared page frame (PageFrame) */
.cp-frame.page-read { max-width: none; }
.cp-frame .cp-body > .gl-search { max-width: 640px; }
.cp-frame .gl-search .search { max-width: none; }
.cp-frame .cp-body { display: flex; flex-direction: column; gap: 16px; }
.page-lore .cp-body section { display: flex; flex-direction: column; gap: 12px; }
.browser-head { margin-top: 34px; }
.browser-head .browser-h { margin-top: 0; }
.browser > .cp-next { margin-top: 40px; width: min(100%, 1100px); }
/* Glossary */
/* 47, 50. RANDOM filled orange, the Shuffle icon on its right */
.gl-random { flex-direction: row; padding: 10px 18px; border: 1px solid #ffc488; color: #160800 !important; background: linear-gradient(180deg, #ffb062, #ff6a0a); font: 700 0.9rem/1 var(--display); letter-spacing: 0.14em; transition: box-shadow 0.45s ease, filter 0.2s; }
.gl-random .gl-random-ico { color: #160800; }
/* 49. its glow fades in on hover and stays while the pointer is on it; a click only adds a pulse ring (no fade-out) */
.gl-random:hover, .gl-random:focus-visible { box-shadow: 0 0 24px 4px rgb(255 122 26 / 0.6); filter: brightness(1.06); }
.gl-random.glow { outline: 2px solid transparent; animation: rndRing 0.9s ease-out; }
@keyframes rndRing { 0% { outline-color: rgb(255 170 90 / 0.8); outline-offset: 0; } 100% { outline-color: rgb(255 170 90 / 0); outline-offset: 10px; } }
/* 51. entries fade in one after another */
.gl-row.gl-in { animation: fadeIn 0.4s ease-out backwards; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .gl-row.gl-in, .gl-random.glow { animation: none; } }
/* Gameplay › Battle Maps */
/* 52. the longer explanations fold under their titles */
.md-fold { border: 1px solid var(--line); border-radius: 10px; background: rgb(255 255 255 / 0.02); transition: border-color 0.3s ease, background 0.3s ease; }
.md-fold + .md-fold { margin-top: -6px; }
.md-fold[open] { border-color: rgb(255 122 26 / 0.4); background: rgb(255 122 26 / 0.04); }
.md-fold-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font: 700 0.95rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.md-fold-h::-webkit-details-marker { display: none; }
.md-fold-h::after { content: "▾"; color: var(--ember-2); transition: transform 0.25s ease; }
.md-fold[open] > .md-fold-h::after { transform: rotate(180deg); }
.md-fold-h:hover { color: var(--ember-2); }
.md-fold-b { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 18px; animation: fadeIn 0.3s ease-out; }
/* 53. the example card shows it can be opened */
.md-bm-card .c3d { cursor: zoom-in; }
/* Subscribe page and every newsletter box */
/* 22. the SUBSCRIBE button stays inside its box: on narrow screens the address and the button stack */
.signup { min-width: 0; }
.signup-row { min-width: 0; }
.signup-row .md-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 480px) { .signup-row { flex-direction: column; } .signup-row .md-btn { width: 100%; } .signup-big { padding: 18px; } }
/* About page */
/* 15. "Interested in working together?" on the right, with "Let's talk" as a button; project pictures glow on hover */
.md-box.md-talk { float: right; width: min(300px, 40%); margin: 4px 0 18px 32px; padding: 20px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; border: 1px solid var(--line-2); border-top: 2px solid var(--ember); border-radius: 10px; background: linear-gradient(180deg, rgb(255 122 26 / 0.08), rgb(13 13 16 / 0.85)); }
.md-box.md-talk > p { margin: 0; font: 700 1.05rem/1.3 var(--display); letter-spacing: 0.06em; color: var(--ink); }
.cpage[data-path="about"] .cp-body > .md-h2 { clear: both; }
@media (max-width: 760px) { .md-box.md-talk { float: none; width: auto; margin: 0 0 6px; } }
.md-projects .md-img-a { transition: box-shadow 0.45s ease; }
.md-projects .md-tile:hover .md-img-a, .md-projects .md-img-a:focus-visible { box-shadow: 0 0 28px 3px rgb(255 122 26 / 0.5); }
/* Shop page */
/* 17. larger product tiles: two per row on wide screens, bigger pictures and text */
.md-products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 22px; }
.md-products .md-tile { padding: 20px; gap: 14px; }
.md-products .md-tile-h { font-size: 1.15rem; }
.md-products .md-tile p { font-size: 1rem; line-height: 1.6; }
/* Contact and Feedback */
/* 7. the site's own form (ContentPage siteForm) */
.siteform { display: flex; flex-direction: column; gap: 14px; width: min(100%, 720px); padding: 22px; border: 1px solid var(--line-2); border-top: 2px solid var(--ember); border-radius: var(--r); background: linear-gradient(180deg, rgb(255 122 26 / 0.06), rgb(13 13 16 / 0.85) 60%); }
.sf-intro { margin: 0; color: var(--muted); }
.sf-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .sf-row { grid-template-columns: minmax(0, 1fr); } }
.sf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sf-label { font: 600 0.72rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember-2); }
.siteform input, .siteform select, .siteform textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: #0a0a0d; color: var(--ink); font: 400 0.98rem/1.5 var(--body); transition: border-color 0.25s, box-shadow 0.25s; }
.siteform textarea { resize: vertical; min-height: 150px; }
.siteform input:focus, .siteform select:focus, .siteform textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember), 0 0 16px rgb(255 122 26 / 0.25); }
.sf-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sf-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.sf-status { margin: 0; color: var(--muted); font-size: 0.92rem; }
.sf-off .sf-status { color: #ffcf9e; }
.siteform button:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.sf-alt { margin: 0; font-size: 0.9rem; color: var(--muted); }
.sf-done { margin: 0; font: 700 1.1rem/1.4 var(--display); color: var(--ember-2); }