/* Kits: each game's buttons, frames, rules and atmosphere, drawn by us in the spirit of that game.
   A kit only changes shapes and type; colours always come from the game's tokens, so light and dark both work. */

/* a shared paper grain, our own SVG noise */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ================= HUB: the site's own look.
   One idea runs through it: square edges with one corner cut off, like the mark. Labels are printed stamps,
   not outlined pills. Buttons are solid blocks or plain words. No rounded cards, no circles of initials. */
[data-kit="hub"] body { --radius: 0px; --radius-lg: 0px; --d-track: -.01em; --l-track: .04em; --cut: 9px; }
[data-kit="hub"] .backdrop { background: var(--grain); }
[data-kit="hub"] .cut, [data-kit="hub"] .btn, [data-kit="hub"] .tag, [data-kit="hub"] .feature, [data-kit="hub"] .switch summary, [data-kit="hub"] .find input,
[data-kit="hub"] .panel, [data-kit="hub"] .tile, [data-kit="hub"] .tier, [data-kit="hub"] .file, [data-kit="hub"] .modcard, [data-kit="hub"] .achip, [data-kit="hub"] .acard {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
[data-kit="hub"] .tag { --cut: 5px; }

/* the wordmark */
[data-kit="hub"] .brand { gap: 9px; }
[data-kit="hub"] .brand .mark { width: 28px; height: 28px; color: var(--accent); }
[data-kit="hub"] .brand .wordmark { font-family: var(--f-label); font-weight: 700; font-size: 20px; letter-spacing: .01em; text-transform: uppercase; }

/* buttons: a solid block, or just the word */
[data-kit="hub"] .btn { border: 0; border-radius: 0; background: var(--accent); color: var(--accent-ink); font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; padding: 0 18px; }
[data-kit="hub"] .btn:hover { filter: none; background: color-mix(in srgb, var(--accent) 86%, #fff); color: var(--accent-ink); }
[data-kit="hub"] .btn.ghost { background: var(--bg2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--line); }
[data-kit="hub"] .btn.ghost:hover { background: color-mix(in srgb, var(--bg2) 80%, var(--ink)); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
[data-kit="hub"] .btn.on { background: var(--bg2); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
[data-kit="hub"] .signin { font-family: var(--f-label); font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink2); padding: 0 8px; }
[data-kit="hub"] .signin:hover { color: var(--ink); }

/* stamps instead of pills */
[data-kit="hub"] .tag { border: 0; border-radius: 0; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink2); font-family: var(--f-label); font-weight: 600; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px 3px 9px; }
[data-kit="hub"] .tag.accent { background: var(--accent); color: var(--accent-ink); }
[data-kit="hub"] .tag.sample { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ink) 10%, transparent) 0 4px, transparent 4px 8px); color: var(--mute); border: 0; }
[data-kit="hub"] .tag.good { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
[data-kit="hub"] .tag .ic { width: 12px; height: 12px; }

/* the game picker shows the game itself */
[data-kit="hub"] .switch summary { border: 0; border-radius: 0; background: var(--bg2); padding: 5px 10px 5px 6px; gap: 9px; font-weight: 600; letter-spacing: .03em; color: var(--ink); }
[data-kit="hub"] .switch summary:hover, [data-kit="hub"] .switch[open] summary { background: color-mix(in srgb, var(--bg2) 80%, var(--ink)); }
.sw-stack { display: inline-flex; }
.sw-stack img, .sw-cover { width: 20px; height: 28px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.sw-stack img + img { margin-left: -9px; }
.sw-chev { width: 12px; height: 12px; color: var(--mute); }
.sw-thumb { width: 26px; height: 36px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line); }
.sw-thumb.hub { display: grid; place-items: center; background: var(--bg); color: var(--accent); }
.sw-thumb.hub .mark { width: 18px; height: 18px; }
[data-kit="hub"] .sw-panel { border-radius: 0; padding: 6px; }
[data-kit="hub"] .sw-item { border-radius: 0; padding: 6px 8px; }
[data-kit="hub"] .sw-item.on { box-shadow: inset 3px 0 0 var(--accent); }

/* the search: a filled bar with a key hint */
.find kbd { position: absolute; right: 9px; font: 600 11px/1 var(--f-label); color: var(--mute); padding: 4px 6px; border: 1px solid var(--line); border-bottom-width: 2px; }
[data-kit="hub"] .find input { border: 0; border-radius: 0; background: var(--bg2); box-shadow: inset 0 -2px 0 var(--line); }
[data-kit="hub"] .find input:focus { box-shadow: inset 0 -2px 0 var(--accent); }
[data-kit="hub"] .mainnav { font-weight: 600; letter-spacing: .04em; }

/* panels and cards: square, cut corner, no hairline box */
[data-kit="hub"] .panel, [data-kit="hub"] .tile, [data-kit="hub"] .tier, [data-kit="hub"] .file, [data-kit="hub"] .feature { border: 0; background: var(--bg2); }
[data-kit="hub"] .modcard { border: 0; background: var(--bg2); }
[data-kit="hub"] .modcard:hover { box-shadow: inset 0 -3px 0 var(--accent); }
[data-kit="hub"] .ft-pic, [data-kit="hub"] .ft-shots a, [data-kit="hub"] .hl-thumb, [data-kit="hub"] .sm-pic, [data-kit="hub"] .gcover img { border-radius: 0; }
[data-kit="hub"] .ft-logo { border-radius: 0; }
[data-kit="hub"] input[type=text], [data-kit="hub"] input[type=email], [data-kit="hub"] input[type=password], [data-kit="hub"] input[type=number], [data-kit="hub"] input[type=url], [data-kit="hub"] input[type=date], [data-kit="hub"] select, [data-kit="hub"] textarea {
  border: 0; border-radius: 0; background: var(--bg); box-shadow: inset 0 -2px 0 var(--line); padding: 12px 12px 11px; }
[data-kit="hub"] input:focus, [data-kit="hub"] select:focus, [data-kit="hub"] textarea:focus { box-shadow: inset 0 -2px 0 var(--accent); }
[data-kit="hub"] .field > span, [data-kit="hub"] .field > label { letter-spacing: .04em; font-weight: 600; }
/* small labels over headings: plain words, not spaced capitals */
[data-kit="hub"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-family: var(--f-body); }
[data-kit="hub"] .notice { border: 0; border-radius: 0; box-shadow: inset 3px 0 0 var(--accent); background: var(--bg2); }
[data-kit="hub"] .notice.bad { box-shadow: inset 3px 0 0 var(--bad); }

/* people without a photo get their maker's mark, square */
.av.mark { background: none; box-shadow: none; border-radius: 0; }
.av.mark svg { width: 100%; height: 100%; display: block; }
[data-kit="hub"] .av { border-radius: 0; clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px); }

/* ================= SKYRIM: smoke, white caps, fading rules, the light band */
[data-kit="skyrim"] body { --radius: 0px; --radius-lg: 0px; --d-case: uppercase; --d-track: .14em; --l-track: .22em; font-weight: 300; letter-spacing: .02em; }
[data-kit="skyrim"] .backdrop { background:
  radial-gradient(ellipse 90% 70% at 62% 30%, color-mix(in srgb, var(--ink) 7%, transparent) 0%, transparent 70%),
  radial-gradient(ellipse 60% 50% at 10% 90%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 70%), var(--grain); }
[data-kit="skyrim"] h1, [data-kit="skyrim"] h2, [data-kit="skyrim"] h3 { font-weight: 400; }
[data-kit="skyrim"] h1 { font-size: clamp(28px, 3.6vw, 44px); }
[data-kit="skyrim"] .brand { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .2em; font-size: 17px; font-weight: 500; }
[data-kit="skyrim"] .brand .mark { color: var(--ink); }
/* fading rule with our knot: two diamonds, one inside the other */
[data-kit="skyrim"] .orn { color: var(--ink); margin: 30px 0; }
[data-kit="skyrim"] .orn::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 55%, transparent)); }
[data-kit="skyrim"] .orn::after { background: linear-gradient(270deg, transparent, color-mix(in srgb, currentColor 55%, transparent)); }
[data-kit="skyrim"] .orn i { width: 10px; height: 10px; border-color: color-mix(in srgb, var(--ink) 75%, transparent); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px color-mix(in srgb, var(--ink) 60%, transparent); }
/* bracket corners on frames: eight short strokes, no image */
[data-kit="skyrim"] .panel, [data-kit="skyrim"] .modcard, [data-kit="skyrim"] .file, [data-kit="skyrim"] .tier, [data-kit="skyrim"] .tile, [data-kit="skyrim"] .ask {
  --c: color-mix(in srgb, var(--ink) 70%, transparent);
  border-color: var(--line);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position: -1px -1px, -1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) -1px, -1px calc(100% + 1px), -1px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px);
  background-color: var(--panel); background-origin: border-box; }
[data-kit="skyrim"] .modcard .cover { background-color: var(--bg2); }
[data-kit="skyrim"] .modcard .name, [data-kit="skyrim"] .file .fn, [data-kit="skyrim"] .modrow .name { font-size: 16px; letter-spacing: .12em; }
/* buttons: text in caps, the glowing underline from the game's menus */
[data-kit="skyrim"] .btn { position: relative; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); border: 1px solid var(--line); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; }
[data-kit="skyrim"] .btn::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--ink), transparent); opacity: .5; transition: opacity .15s, left .15s, right .15s; }
[data-kit="skyrim"] .btn:hover { color: var(--ink); filter: none; background: color-mix(in srgb, var(--ink) 12%, transparent); text-shadow: 0 0 8px color-mix(in srgb, var(--ink) 50%, transparent); }
[data-kit="skyrim"] .btn:hover::after { opacity: 1; left: 4%; right: 4%; }
[data-kit="skyrim"] .btn.ghost { background: transparent; border-color: transparent; }
[data-kit="skyrim"] .btn.on { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 50%, transparent); background: color-mix(in srgb, var(--ink) 10%, transparent); }
[data-kit="skyrim"] .tabs a.on::after, [data-kit="skyrim"] .sortbar a.on { background: none; }
[data-kit="skyrim"] .tabs a.on::after { left: -4px; right: -4px; background: linear-gradient(90deg, transparent, var(--ink), transparent); }
[data-kit="skyrim"] .tabs a.on { text-shadow: 0 0 6px color-mix(in srgb, var(--ink) 40%, transparent); }
[data-kit="skyrim"] .sortbar a { border-radius: 0; border-color: transparent; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
[data-kit="skyrim"] .sortbar a.on { color: var(--ink); border-color: transparent; border-bottom-color: var(--ink); }
/* the soft band of light on the row you point at, as in the inventory list */
[data-kit="skyrim"] .modrow { border-radius: 0; }
[data-kit="skyrim"] .modrow:hover, [data-kit="skyrim"] .filters a.opt:hover, [data-kit="skyrim"] .sw-item:hover, [data-kit="skyrim"] .sw-item.on, [data-kit="skyrim"] .me-panel a:hover {
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 11%, transparent) 35%, transparent 100%); border-color: transparent; }
[data-kit="skyrim"] .tag { border-radius: 0; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
[data-kit="skyrim"] .notches i { border-radius: 0; width: 5px; }
[data-kit="skyrim"] .numbar b, [data-kit="skyrim"] .tile b { font-weight: 300; }
[data-kit="skyrim"] .chart .ln { stroke: var(--ink); }
[data-kit="skyrim"] .chart .area { fill: var(--ink); opacity: .07; }
[data-kit="skyrim"] .chart .dot { stroke: var(--ink); }
[data-kit="skyrim"] .chart .bar { fill: var(--ink); opacity: .55; }
[data-kit="skyrim"] .find input, [data-kit="skyrim"] input, [data-kit="skyrim"] select, [data-kit="skyrim"] textarea { border-radius: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); }
[data-kit="skyrim"] .switch summary { border-radius: 0; }
/* the bottom bar, like the menus' key bar */
[data-kit="skyrim"] .foot { border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 96%, #000), var(--bg)); }
[data-kit="skyrim"] .foot nav a { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
[data-kit="skyrim"] .ghero .art { opacity: .7; }
[data-kit="skyrim"] .prose { font-weight: 300; letter-spacing: .01em; }

/* ================= BALDUR'S GATE 3: from the game's own menus (character creation, inventory): near-black
   warm panels, a thin gold line with a second line inside it, a small crest at the top of a panel, corner
   flourishes, serif titles in normal case, a gold-edged tile for what is picked, round check marks. */
[data-kit="bg3"] body { --radius: 3px; --radius-lg: 4px; --l-case: none; --l-track: .02em; font-size: 17px; }
[data-kit="bg3"] .backdrop { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(212,174,108,.07), transparent 70%); }
[data-kit="bg3"] h1, [data-kit="bg3"] h2, [data-kit="bg3"] h3 { font-weight: 500; }
[data-kit="bg3"] .eyebrow, [data-kit="bg3"] .tabs a, [data-kit="bg3"] .numbar span, [data-kit="bg3"] .tile span, [data-kit="bg3"] .filters h3, [data-kit="bg3"] .field > span { color: var(--accent); font-size: 14px; letter-spacing: .02em; }
[data-kit="bg3"] .panel, [data-kit="bg3"] .modcard, [data-kit="bg3"] .file, [data-kit="bg3"] .tier, [data-kit="bg3"] .tile, [data-kit="bg3"] .ask {
  position: relative; border: 1px solid var(--line); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
[data-kit="bg3"] .panel::before, [data-kit="bg3"] .ask::before { content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg);
  background: var(--bg); border: 1px solid var(--accent); box-shadow: 0 0 0 3px var(--bg); }
[data-kit="bg3"] .panel::after, [data-kit="bg3"] .modcard::after, [data-kit="bg3"] .file::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right top / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left bottom / 1px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 14px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 1px 14px no-repeat; }
[data-kit="bg3"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-kit="bg3"] .modcard .name { font-size: 20px; font-weight: 500; }
[data-kit="bg3"] .btn { border-radius: 4px; background: linear-gradient(#2a2117, #17120c); color: var(--ink); border: 1px solid var(--accent); box-shadow: inset 0 0 0 2px #17120c, inset 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  font-family: var(--f-display); font-weight: 500; font-size: 16px; letter-spacing: .01em; }
[data-kit="bg3"] .btn:hover { color: #fff3da; filter: none; box-shadow: inset 0 0 0 2px #17120c, inset 0 0 0 3px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-kit="bg3"] .btn.ghost { background: transparent; border-color: var(--line); box-shadow: none; }
:root[data-theme="light"] [data-kit="bg3"] .btn, :root[data-theme="light"][data-kit="bg3"] .btn { background: linear-gradient(#fbf6ea, #ece1c9); box-shadow: inset 0 0 0 2px #fbf6ea, inset 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
[data-kit="bg3"] .tabs a.on::after { height: 1px; left: 0; right: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 8px var(--accent); }
[data-kit="bg3"] .tag { border-radius: 3px; border-color: var(--line); font-family: var(--f-body); font-size: 13px; }
[data-kit="bg3"] .orn i { width: 9px; height: 9px; background: none; border: 1px solid var(--accent); }
[data-kit="bg3"] .orn::before { background: linear-gradient(90deg, transparent, var(--accent)); }
[data-kit="bg3"] .orn::after { background: linear-gradient(270deg, transparent, var(--accent)); }
/* the step list's round check marks, on the filter lists */
[data-kit="bg3"] .filters a.opt { justify-content: flex-start; gap: 10px; }
[data-kit="bg3"] .filters a.opt::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1px solid var(--mute); margin-top: 3px; }
[data-kit="bg3"] .filters a.opt.on::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 35%, transparent 40%); }
[data-kit="bg3"] .filters a.opt .c { margin-left: auto; }
[data-kit="bg3"] .score-pick button, [data-kit="bg3"] .rangebar, [data-kit="bg3"] .sortbar a { border-radius: 4px; }
[data-kit="bg3"] .sortbar a.on { border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ================= KINGDOM COME II: from the inventory and codex: dark wood around everything, the content on
   cream parchment with dark ink, the picked row in a bright yellow bar, gold-edged frames for slots and pictures,
   wine-red panels for an item's detail, blackletter titles. The parchment keeps its own ink in both themes. */
[data-kit="kcd"] body { --radius: 1px; --radius-lg: 2px; font-size: 17px; }
[data-kit="kcd"] .backdrop { background:
  repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.07) 3px 4px, rgba(0,0,0,0) 4px 11px),
  repeating-linear-gradient(90deg, rgba(255,220,160,.025) 0 90px, rgba(0,0,0,.08) 90px 92px), var(--grain); }
:root[data-theme="light"][data-kit="kcd"] .backdrop { background: var(--grain); }
[data-kit="kcd"] h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 400; }
[data-kit="kcd"] h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 400; }
/* parchment surfaces carry dark ink, whatever the page colour */
[data-kit="kcd"] .panel, [data-kit="kcd"] .modcard, [data-kit="kcd"] .file, [data-kit="kcd"] .tier, [data-kit="kcd"] .tile, [data-kit="kcd"] .ask, [data-kit="kcd"] .filters, [data-kit="kcd"] .prose, [data-kit="kcd"] .sw-panel, [data-kit="kcd"] .me-panel {
  --ink: #25190d; --ink2: #4a3824; --mute: #7a6446; --line: rgba(37,25,13,.22); --accent: #7b1d14; --accent-ink: #f3e8cf; color: var(--ink); }
[data-kit="kcd"] .panel, [data-kit="kcd"] .modcard, [data-kit="kcd"] .file, [data-kit="kcd"] .tier, [data-kit="kcd"] .tile, [data-kit="kcd"] .ask, [data-kit="kcd"] .sw-panel, [data-kit="kcd"] .me-panel {
  background: #ddcca6 var(--grain); border: 1px solid #8d6f38; box-shadow: 0 0 0 3px #2a1d10, 0 0 0 4px #8d6f38, 0 10px 24px rgba(0,0,0,.4); }
[data-kit="kcd"] .filters { background: #ddcca6 var(--grain); padding: 16px 18px; box-shadow: 0 0 0 3px #2a1d10, 0 0 0 4px #8d6f38; }
[data-kit="kcd"] .prose { background: #e6d8b6 var(--grain); padding: 26px 30px; box-shadow: 0 0 0 3px #2a1d10, 0 0 0 4px #8d6f38; max-width: none; }
[data-kit="kcd"] .prose > p:first-child::first-letter, [data-kit="kcd"] .prose .bb > :first-child::first-letter { font-family: var(--f-display); float: left; font-size: 3.4em; line-height: .9; margin: .06em .1em 0 0; color: #7b1d14; }
[data-kit="kcd"] .modcard .cover { border-bottom: 2px solid #8d6f38; }
[data-kit="kcd"] .modcard .name, [data-kit="kcd"] .file .fn { font-size: 23px; }
/* the yellow bar on the row you point at */
[data-kit="kcd"] .filters a.opt:hover, [data-kit="kcd"] .filters a.opt.on, [data-kit="kcd"] .modrow:hover, [data-kit="kcd"] .sw-item:hover, [data-kit="kcd"] .sw-item.on, [data-kit="kcd"] .me-panel a:hover, [data-kit="kcd"] .hublist a:hover {
  background: #e3c04f; color: #22170c; border-radius: 0; }
[data-kit="kcd"] .modrow:hover .muted, [data-kit="kcd"] .modrow:hover .right { color: #4a3824; }
[data-kit="kcd"] .btn { border-radius: 0; background: #5e1a14; color: #f3e8cf; border: 1px solid #c9a24e; box-shadow: inset 0 0 0 2px #5e1a14, inset 0 0 0 3px rgba(201,162,78,.55); text-transform: uppercase; letter-spacing: .14em; font-family: var(--f-body); font-size: 13px; }
[data-kit="kcd"] .btn:hover { background: #74221a; color: #fff4d8; filter: none; }
[data-kit="kcd"] .btn.ghost { background: #2a1d10; }
[data-kit="kcd"] .tabs a { color: var(--mute); }
[data-kit="kcd"] .tabs a.on { color: var(--ink); }
[data-kit="kcd"] .tabs a.on::after { background: #e3c04f; height: 3px; }
[data-kit="kcd"] .modhead, [data-kit="kcd"] .ghero { border-bottom: 3px double #8d6f38; }
[data-kit="kcd"] .numbar b, [data-kit="kcd"] .tile b, [data-kit="kcd"] .score .n, [data-kit="kcd"] .tier .price { font-family: var(--f-body); font-weight: 500; }
[data-kit="kcd"] .orn i { width: 7px; height: 7px; background: #7b1d14; border: 0; border-radius: 50%; transform: none; box-shadow: -14px 0 0 -2px var(--mute), 14px 0 0 -2px var(--mute); }
[data-kit="kcd"] .tag { border-radius: 0; }
[data-kit="kcd"] .notice { background: #5e1a14; color: #f3e8cf; border-color: #c9a24e; }
[data-kit="kcd"] .notice .inline { color: #e3c04f; }
[data-kit="kcd"] input[type=text], [data-kit="kcd"] textarea, [data-kit="kcd"] select, [data-kit="kcd"] .find input { border-radius: 0; }
[data-kit="kcd"] .find input { background: #ddcca6; color: #25190d; border-color: #8d6f38; }
[data-kit="kcd"] .find .ic { color: #7a6446; }

/* ================= CYBERPUNK: chamfers, hairlines, mono labels */
[data-kit="cyber"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .04em; --l-track: .1em; font-size: 17px; font-weight: 500; }
[data-kit="cyber"] .backdrop { background:
  linear-gradient(color-mix(in srgb, var(--line) 50%, transparent) 1px, transparent 1px) 0 0 / 100% 48px,
  linear-gradient(90deg, color-mix(in srgb, var(--line) 50%, transparent) 1px, transparent 1px) 0 0 / 48px 100%; opacity: .35; }
[data-kit="cyber"] h1, [data-kit="cyber"] h2, [data-kit="cyber"] h3 { font-weight: 700; }
[data-kit="cyber"] h1 { text-shadow: 2px 0 color-mix(in srgb, #ff2a6d 55%, transparent), -2px 0 color-mix(in srgb, #05d9e8 55%, transparent); }
[data-kit="cyber"] .panel, [data-kit="cyber"] .modcard, [data-kit="cyber"] .file, [data-kit="cyber"] .tier, [data-kit="cyber"] .tile, [data-kit="cyber"] .ask {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); border-color: var(--line); }
[data-kit="cyber"] .modcard:hover { border-color: var(--accent); }
[data-kit="cyber"] .btn { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; border: 0; }
[data-kit="cyber"] .btn.ghost { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
[data-kit="cyber"] .tag { border-radius: 0; font-size: 11px; }
[data-kit="cyber"] .tabs a.on::after { height: 3px; left: 0; right: 0; }
[data-kit="cyber"] .orn { color: var(--accent); }
[data-kit="cyber"] .orn i { width: 26px; height: 6px; transform: skewX(-30deg); background: var(--accent); border: 0; }
[data-kit="cyber"] .modcard .name { font-size: 20px; font-weight: 700; }
[data-kit="cyber"] .numbar b, [data-kit="cyber"] .tile b { font-weight: 600; }
[data-kit="cyber"] .find input, [data-kit="cyber"] input, [data-kit="cyber"] select, [data-kit="cyber"] textarea { border-radius: 0; }

/* ================= BATTLE BROTHERS: rough paper, printed cards, blood red */
[data-kit="brothers"] body { --radius: 0; --radius-lg: 0; font-size: 17.5px; }
[data-kit="brothers"] .backdrop { background: var(--grain), radial-gradient(ellipse at 50% 120%, color-mix(in srgb, #000 30%, transparent), transparent 60%); }
[data-kit="brothers"] .panel, [data-kit="brothers"] .modcard, [data-kit="brothers"] .file, [data-kit="brothers"] .tier, [data-kit="brothers"] .tile, [data-kit="brothers"] .ask {
  border: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); box-shadow: 4px 4px 0 color-mix(in srgb, #000 35%, transparent); }
[data-kit="brothers"] .modcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 color-mix(in srgb, #000 35%, transparent); }
[data-kit="brothers"] .btn { border-radius: 0; border: 2px solid color-mix(in srgb, #000 40%, var(--accent)); box-shadow: 3px 3px 0 color-mix(in srgb, #000 40%, transparent); font-family: var(--f-display); font-weight: 400; font-size: 16px; letter-spacing: .02em; }
[data-kit="brothers"] .tag { border-radius: 0; border-width: 1.5px; font-family: var(--f-display); font-size: 13px; }
[data-kit="brothers"] .orn i { width: 10px; height: 10px; background: var(--accent); border: 0; transform: rotate(45deg); }
[data-kit="brothers"] .modcard .name { font-size: 21px; }

/* ================= BELLWRIGHT: forest, timber beams, warm brass */
[data-kit="bellwright"] body { --radius: 4px; --radius-lg: 6px; font-size: 16.5px; }
[data-kit="bellwright"] .backdrop { background: repeating-linear-gradient(90deg, transparent 0 140px, color-mix(in srgb, var(--ink) 2.5%, transparent) 140px 142px), var(--grain); }
[data-kit="bellwright"] h1, [data-kit="bellwright"] h2 { font-weight: 700; }
[data-kit="bellwright"] .panel, [data-kit="bellwright"] .modcard, [data-kit="bellwright"] .file, [data-kit="bellwright"] .tier, [data-kit="bellwright"] .tile, [data-kit="bellwright"] .ask { border-top: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); }
[data-kit="bellwright"] .btn { border-radius: 3px; box-shadow: inset 0 -3px 0 color-mix(in srgb, #000 25%, transparent); }
[data-kit="bellwright"] .orn i { width: 18px; height: 6px; transform: none; border-radius: 3px; background: var(--accent); border: 0; }
[data-kit="bellwright"] .modcard .name { font-weight: 700; font-size: 20px; }

/* ================= CRUSADER KINGS III: heraldry, gold double lines, banners */
[data-kit="ck3"] body { --radius: 1px; --radius-lg: 2px; --l-track: .16em; font-size: 18px; }
[data-kit="ck3"] .backdrop { background: repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--accent) 4%, transparent) 22px 23px), repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--accent) 4%, transparent) 22px 23px); }
[data-kit="ck3"] h1, [data-kit="ck3"] h2 { font-weight: 600; }
[data-kit="ck3"] h1 { font-size: clamp(36px, 5vw, 60px); }
[data-kit="ck3"] .panel, [data-kit="ck3"] .modcard, [data-kit="ck3"] .file, [data-kit="ck3"] .tier, [data-kit="ck3"] .tile, [data-kit="ck3"] .ask {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); outline-offset: -6px; }
[data-kit="ck3"] .btn { border-radius: 0; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
[data-kit="ck3"] .tag { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); padding-bottom: 5px; }
[data-kit="ck3"] .orn i { width: 14px; height: 16px; border: 1px solid var(--accent); transform: none; border-radius: 0 0 7px 7px; }
[data-kit="ck3"] .modcard .name { font-size: 22px; font-weight: 600; }

/* ================= MANOR LORDS: from the build and management panels: dark translucent slate, thin light
   borders, small spaced capitals, round dark icon buttons, building cards on beige paper with a painted picture,
   a red ribbon marking a panel's title. */
[data-kit="manor"] body { --radius: 3px; --radius-lg: 4px; --l-track: .16em; font-size: 16px; }
[data-kit="manor"] .backdrop { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(205,187,142,.05), transparent 70%); }
[data-kit="manor"] h1, [data-kit="manor"] h2, [data-kit="manor"] h3 { font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
[data-kit="manor"] h1 { font-size: clamp(30px, 4vw, 46px); }
[data-kit="manor"] h2 { font-size: clamp(20px, 2.2vw, 26px); }
[data-kit="manor"] .panel, [data-kit="manor"] .file, [data-kit="manor"] .tier, [data-kit="manor"] .tile, [data-kit="manor"] .ask { background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line); }
/* the red ribbon on a section's title */
[data-kit="manor"] .section-head h2, [data-kit="manor"] .hubcol-head h2, [data-kit="manor"] .panel > h3:first-child { position: relative; padding-left: 20px; }
[data-kit="manor"] .section-head h2::before, [data-kit="manor"] .hubcol-head h2::before, [data-kit="manor"] .panel > h3:first-child::before { content: ""; position: absolute; left: 0; top: .1em; width: 10px; height: 1.05em;
  background: #9e2b20; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
/* building cards: beige paper frame around the picture */
[data-kit="manor"] .modcard { background: #d9ceb0; border: 0; box-shadow: 0 6px 18px rgba(0,0,0,.35); --ink: #1d1c18; --ink2: #3c3a33; --mute: #6c6656; --line: rgba(29,28,24,.18); color: var(--ink); }
[data-kit="manor"] .modcard .cover { margin: 7px 7px 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
[data-kit="manor"] .modcard .name { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em; font-size: 16px; font-weight: 600; }
[data-kit="manor"] .modcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #9e2b20, 0 10px 24px rgba(0,0,0,.4); }
/* round dark icon buttons, and quiet text buttons */
[data-kit="manor"] .iconbtn { border-radius: 50%; background: rgba(20,20,18,.75); border: 1px solid var(--line); color: var(--ink); }
[data-kit="manor"] .btn { border-radius: 999px; background: #262723; color: var(--ink); border: 1px solid rgba(236,235,227,.28); font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 600; }
[data-kit="manor"] .btn:hover { background: #33342f; color: #fff; filter: none; border-color: var(--accent); }
[data-kit="manor"] .btn.ghost { background: transparent; }
:root[data-theme="light"][data-kit="manor"] .btn { background: #2a2b27; color: #f3f1ea; }
[data-kit="manor"] .tabs a.on::after { background: #9e2b20; height: 2px; }
[data-kit="manor"] .tag { border-radius: 999px; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
[data-kit="manor"] .orn i { width: 6px; height: 6px; border-radius: 50%; border: 0; background: #9e2b20; }
[data-kit="manor"] .score-pick button { border-radius: 50%; }

/* ================= BANNERLORD: leather, stitching, bronze caps */
[data-kit="bannerlord"] body { --radius: 3px; --radius-lg: 4px; --d-case: uppercase; --d-track: .08em; --l-track: .14em; }
[data-kit="bannerlord"] .backdrop { background: var(--grain), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); }
[data-kit="bannerlord"] .panel, [data-kit="bannerlord"] .modcard, [data-kit="bannerlord"] .file, [data-kit="bannerlord"] .tier, [data-kit="bannerlord"] .tile, [data-kit="bannerlord"] .ask {
  outline: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -6px; }
[data-kit="bannerlord"] .btn { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .12em; font-weight: 400; border-radius: 2px; }
[data-kit="bannerlord"] .orn i { width: 12px; height: 12px; border: 1px solid var(--accent); transform: rotate(45deg); background: color-mix(in srgb, var(--accent) 25%, transparent); }
[data-kit="bannerlord"] .modcard .name { font-size: 17px; }

/* ================= PLAIN: any game added later, using only its colours */
[data-kit="plain"] body { --radius: 4px; --radius-lg: 8px; }
[data-kit="kcd"] .numbar b, [data-kit="kcd"] .tile b, [data-kit="kcd"] .score .n, [data-kit="kcd"] .tier .price { font-family: var(--f-body); font-weight: 500; }

/* the site's own sort bar and range switch: one strip of square segments, the picked one solid */
[data-kit="hub"] .sortbar { gap: 0; display: inline-flex; flex-wrap: wrap; background: var(--bg2); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
[data-kit="hub"] .sortbar a { border: 0; border-radius: 0; padding: 9px 15px; font-family: var(--f-label); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink2); background: none; }
[data-kit="hub"] .sortbar a + a { box-shadow: inset 1px 0 0 var(--line); }
[data-kit="hub"] .sortbar a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
[data-kit="hub"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
[data-kit="hub"] .rangebar { border: 0; border-radius: 0; background: var(--bg2); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
[data-kit="hub"] .rangebar a { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 7px 13px; }
[data-kit="hub"] .rangebar a.on { background: var(--accent); color: var(--accent-ink); }

/* the cut corner's edge line: these boxes have no border, so a drawn diagonal floated on its own (a stray slash);
   it stays off, and only shows as the accent edge on hover where a box is a link */
[data-kit="hub"] :is(.panel, .tile, .tier, .file, .achip, .modcard, .gtile) {
  --edge: transparent;
  background-image: linear-gradient(135deg, transparent calc(50% - .6px), var(--edge) calc(50% - .6px), var(--edge) calc(50% + .8px), transparent calc(50% + .8px));
  background-size: var(--cut) var(--cut); background-repeat: no-repeat; background-position: 0 0; }
[data-kit="hub"] :is(.achip, a.gtile):hover { --edge: var(--accent); }
[data-kit="hub"] .achip { border-radius: 0; }
/* Skyrim header: Sign in and Join set like the menu beside them (Mods, Tools, Bids...) */
[data-kit="skyrim"] .userbox .signin { font-size: 13px; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: var(--ink2); padding: 0 8px; }
[data-kit="skyrim"] .userbox .signin:hover { color: var(--ink); }
[data-kit="skyrim"] .userbox .btn { font-size: 13px; font-weight: 300; letter-spacing: .22em; }

/* the light-theme fixes above also apply when the visitor's own computer is in light mode (no choice made on the site):
   before this, Baldur's Gate 3 and Manor Lords showed dark text on a dark button there */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])[data-kit="bg3"] .btn { background: linear-gradient(#fbf6ea, #ece1c9); box-shadow: inset 0 0 0 2px #fbf6ea, inset 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
  :root:not([data-theme="dark"])[data-kit="manor"] .btn { background: #2a2b27; color: #f3f1ea; }
  :root:not([data-theme="dark"])[data-kit="kcd"] .backdrop { background: var(--grain); }
}

/* ================= FALLOUT 4: the Pip-Boy and Vault-Tec. Condensed caps with wide spacing, thin rules with short
   ticks at the ends, the picked row inverted into a solid bar (as in the Pip-Boy's lists), tabs like STAT INV DATA with
   the open one boxed, a faint scanline over everything, Vault-Tec blue and yellow. */
[data-kit="fo4"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .06em; --l-track: .14em; font-size: 16.5px; }
[data-kit="fo4"] .backdrop { background:
  repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 3px),
  radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
[data-kit="fo4"] h1, [data-kit="fo4"] h2, [data-kit="fo4"] h3 { font-weight: 700; }
[data-kit="fo4"] h1 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: .05em; }
[data-kit="fo4"] .eyebrow, [data-kit="fo4"] .tabs a, [data-kit="fo4"] .field > span, [data-kit="fo4"] .filters h3 { text-transform: uppercase; letter-spacing: .16em; }
/* frames: a thin line with short ticks at the corners, like the Pip-Boy's boxes */
[data-kit="fo4"] .panel, [data-kit="fo4"] .modcard, [data-kit="fo4"] .file, [data-kit="fo4"] .tier, [data-kit="fo4"] .tile, [data-kit="fo4"] .ask {
  --c: var(--accent); border: 1px solid var(--line); background-color: var(--panel);
  background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat; background-size: 1px 10px, 1px 10px, 1px 10px, 1px 10px;
  background-position: -1px -1px, calc(100% + 1px) -1px, -1px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px); background-origin: border-box; }
[data-kit="fo4"] .modcard .name { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
[data-kit="fo4"] .modcard:hover { border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent); }
/* the picked row: solid bar, dark text */
[data-kit="fo4"] .modrow:hover, [data-kit="fo4"] .filters a.opt:hover, [data-kit="fo4"] .filters a.opt.on, [data-kit="fo4"] .sw-item:hover, [data-kit="fo4"] .sw-item.on, [data-kit="fo4"] .me-panel a:hover {
  background: var(--accent); color: var(--accent-ink); border-radius: 0; }
[data-kit="fo4"] .filters a.opt:hover .c, [data-kit="fo4"] .filters a.opt.on .c, [data-kit="fo4"] .modrow:hover .muted { color: var(--accent-ink); }
[data-kit="fo4"] .btn { border-radius: 0; background: transparent; color: var(--ink); border: 1px solid var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13.5px; }
[data-kit="fo4"] .btn:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
[data-kit="fo4"] .btn.ghost { border-color: var(--line); }
[data-kit="fo4"] .tabs a.on { outline: 1px solid var(--accent); outline-offset: 4px; }
[data-kit="fo4"] .tabs a.on::after { display: none; }
[data-kit="fo4"] .sortbar a { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
[data-kit="fo4"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="fo4"] .tag { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; }
[data-kit="fo4"] .orn i { width: 16px; height: 6px; border: 0; transform: none; background: var(--accent); }
[data-kit="fo4"] .orn::before { background: linear-gradient(90deg, transparent, var(--accent)); }
[data-kit="fo4"] .orn::after { background: linear-gradient(270deg, transparent, var(--accent)); }
[data-kit="fo4"] .numbar b, [data-kit="fo4"] .tile b { font-weight: 700; }
[data-kit="fo4"] .find input, [data-kit="fo4"] input, [data-kit="fo4"] select, [data-kit="fo4"] textarea { border-radius: 0; }
[data-kit="fo4"] .chart .ln, [data-kit="fo4"] .chart .dot { stroke: var(--accent); }

/* ================= FALLOUT: NEW VEGAS: the amber Pip-Boy 3000. A glowing amber terminal: scanlines, a soft glow on
   text, square brackets around the picked item, the picked row inverted to amber, typewriter-like terminal capitals. */
[data-kit="fnv"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .04em; --l-track: .1em; font-size: 16.5px; }
[data-kit="fnv"] .backdrop { background:
  repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
  radial-gradient(ellipse 85% 75% at 50% 45%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 75%); }
[data-kit="fnv"] h1, [data-kit="fnv"] h2 { text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-theme="light"][data-kit="fnv"] :is(h1, h2) { text-shadow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="fnv"] :is(h1, h2) { text-shadow: none; } }
[data-kit="fnv"] h1 { font-size: clamp(42px, 5.6vw, 68px); font-weight: 400; letter-spacing: .04em; }
[data-kit="fnv"] h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 400; }
[data-kit="fnv"] .eyebrow, [data-kit="fnv"] .tabs a, [data-kit="fnv"] .filters h3, [data-kit="fnv"] .tag, [data-kit="fnv"] .btn, [data-kit="fnv"] .sortbar a { font-family: var(--f-label); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
[data-kit="fnv"] .panel, [data-kit="fnv"] .modcard, [data-kit="fnv"] .file, [data-kit="fnv"] .tier, [data-kit="fnv"] .tile, [data-kit="fnv"] .ask {
  border: 1px solid var(--line); border-radius: 0; background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 6%, transparent); }
[data-kit="fnv"] .modcard .name { font-family: var(--f-label); font-size: 22px; font-weight: 400; letter-spacing: .04em; }
[data-kit="fnv"] .modcard:hover { border-color: var(--accent); }
/* the picked row: inverted amber, with the Pip-Boy's square brackets */
[data-kit="fnv"] .modrow:hover, [data-kit="fnv"] .filters a.opt:hover, [data-kit="fnv"] .filters a.opt.on, [data-kit="fnv"] .sw-item:hover, [data-kit="fnv"] .sw-item.on, [data-kit="fnv"] .me-panel a:hover {
  background: var(--accent); color: var(--accent-ink); border-radius: 0; }
[data-kit="fnv"] .filters a.opt:hover .c, [data-kit="fnv"] .filters a.opt.on .c { color: var(--accent-ink); }
[data-kit="fnv"] .btn { border-radius: 0; background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 0 16px; }
[data-kit="fnv"] .btn::before { content: "[ "; } [data-kit="fnv"] .btn::after { content: " ]"; }
[data-kit="fnv"] .btn:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
[data-kit="fnv"] .btn.ghost { border-color: transparent; }
[data-kit="fnv"] .tabs a.on::after { height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
[data-kit="fnv"] .sortbar a { border-radius: 0; font-size: 17px; }
[data-kit="fnv"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="fnv"] .tag { border-radius: 0; font-size: 16px; padding-top: 0; padding-bottom: 0; }
[data-kit="fnv"] .orn i { width: 8px; height: 8px; border: 0; background: var(--accent); transform: none; box-shadow: 0 0 6px var(--accent); }
[data-kit="fnv"] .orn::before { background: linear-gradient(90deg, transparent, var(--accent)); }
[data-kit="fnv"] .orn::after { background: linear-gradient(270deg, transparent, var(--accent)); }
[data-kit="fnv"] .numbar b, [data-kit="fnv"] .tile b { font-family: var(--f-label); font-weight: 400; font-size: 1.35em; }
[data-kit="fnv"] .find input, [data-kit="fnv"] input, [data-kit="fnv"] select, [data-kit="fnv"] textarea { border-radius: 0; }
[data-kit="fnv"] .chart .ln, [data-kit="fnv"] .chart .dot { stroke: var(--accent); }
[data-kit="fnv"] .chart .area, [data-kit="fnv"] .chart .bar { fill: var(--accent); }

/* ================= STARDEW VALLEY: the game's menus. Beige paper inside a thick orange-brown wooden frame with a dark
   outline and stepped pixel corners, pixel lettering for titles and buttons, the picked slot outlined in orange, the
   page behind as the valley sky (day in light, night in dark). The paper keeps its own brown ink in both themes. */
[data-kit="stardew"] body { --radius: 0; --radius-lg: 0; --px: 4px; font-size: 17px; }
[data-kit="stardew"] .backdrop { background:
  radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 1.5px, transparent 2px) 0 0 / 140px 120px,
  radial-gradient(circle at 70% 60%, rgba(255,255,255,.4) 0 1px, transparent 1.5px) 0 0 / 90px 110px; opacity: .55; }
:root[data-theme="light"][data-kit="stardew"] .backdrop { background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,.35)); opacity: 1; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="stardew"] .backdrop { background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,.35)); opacity: 1; } }
[data-kit="stardew"] h1, [data-kit="stardew"] h2, [data-kit="stardew"] h3 { font-weight: 700; letter-spacing: .01em; }
[data-kit="stardew"] h1 { font-size: clamp(36px, 5vw, 58px); }
/* the wooden frame: dark outline, thick orange-brown wood, a lighter inner edge, stepped corners */
[data-kit="stardew"] .panel, [data-kit="stardew"] .modcard, [data-kit="stardew"] .file, [data-kit="stardew"] .tier, [data-kit="stardew"] .tile, [data-kit="stardew"] .ask, [data-kit="stardew"] .filters, [data-kit="stardew"] .prose, [data-kit="stardew"] .sw-panel, [data-kit="stardew"] .me-panel {
  --ink: #3b1d08; --ink2: #5c3415; --mute: #7a5530; --line: rgba(59,29,8,.25); --accent: #c4581f; --accent-ink: #fff3d6; color: var(--ink); }
[data-kit="stardew"] .panel, [data-kit="stardew"] .modcard, [data-kit="stardew"] .file, [data-kit="stardew"] .tier, [data-kit="stardew"] .tile, [data-kit="stardew"] .ask, [data-kit="stardew"] .sw-panel, [data-kit="stardew"] .me-panel, [data-kit="stardew"] .filters, [data-kit="stardew"] .prose {
  background: #f9d493; border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 3px #e9a54c, 0 0 0 4px #b8561c, 0 0 0 7px #d97a2b, 0 0 0 10px #5b2b0f;
  clip-path: polygon(-10px 0, 0 -10px, calc(100% + 0px) -10px, calc(100% + 10px) 0, calc(100% + 10px) 100%, 100% calc(100% + 10px), 0 calc(100% + 10px), -10px 100%); }
[data-kit="stardew"] .filters, [data-kit="stardew"] .prose { padding: 16px 18px; max-width: none; }
[data-kit="stardew"] .modcard .cover { border-bottom: 3px solid #b8561c; }
[data-kit="stardew"] .modcard .name { font-family: var(--f-display); font-size: 19px; font-weight: 600; }
[data-kit="stardew"] .modcard:hover { box-shadow: inset 0 0 0 3px #ffd66b, 0 0 0 4px #b8561c, 0 0 0 7px #f0a33a, 0 0 0 10px #5b2b0f; }
/* buttons: a little wooden sign */
[data-kit="stardew"] .btn { border-radius: 0; background: #d97a2b; color: #fff3d6; border: 0; font-family: var(--f-label); font-weight: 600; font-size: 15px; letter-spacing: .02em;
  box-shadow: inset 0 -4px 0 #a14e16, inset 0 3px 0 #f2a95a, 0 0 0 3px #5b2b0f; text-shadow: 1px 1px 0 #5b2b0f; }
[data-kit="stardew"] .btn:hover { background: #ee8c35; color: #fff; filter: none; }
[data-kit="stardew"] .btn.ghost { background: #f9d493; color: #3b1d08; text-shadow: none; box-shadow: inset 0 -4px 0 #e0a650, 0 0 0 3px #5b2b0f; }
/* the picked slot: an orange outline, like the hovered inventory square */
[data-kit="stardew"] .modrow:hover, [data-kit="stardew"] .filters a.opt:hover, [data-kit="stardew"] .filters a.opt.on, [data-kit="stardew"] .sw-item:hover, [data-kit="stardew"] .sw-item.on, [data-kit="stardew"] .me-panel a:hover {
  background: #ffe2a8; box-shadow: inset 0 0 0 2px #e07b1c; border-radius: 0; color: #3b1d08; }
[data-kit="stardew"] .tabs a { font-family: var(--f-label); font-size: 15px; }
[data-kit="stardew"] .tabs a.on::after { height: 4px; background: #e07b1c; }
[data-kit="stardew"] .sortbar a { border-radius: 0; font-family: var(--f-label); }
[data-kit="stardew"] .sortbar a.on { background: #d97a2b; color: #fff3d6; border-color: #5b2b0f; }
[data-kit="stardew"] .tag { border-radius: 0; font-family: var(--f-label); font-size: 13px; background: #f9d493; color: #3b1d08; border: 2px solid #b8561c; }
[data-kit="stardew"] .orn i { width: 10px; height: 10px; border: 0; transform: none; background: #e07b1c; box-shadow: 0 0 0 2px #5b2b0f; }
[data-kit="stardew"] .numbar b, [data-kit="stardew"] .tile b { font-family: var(--f-display); font-weight: 600; }
[data-kit="stardew"] .find input, [data-kit="stardew"] input, [data-kit="stardew"] select, [data-kit="stardew"] textarea { border-radius: 0; }
[data-kit="stardew"] .find input { background: #fff1cf; color: #3b1d08; border: 2px solid #b8561c; }

/* ================= OBLIVION: the journal and map menus. Content on parchment with dark brown ink, framed in dark
   leather with a thin gold line, calligraphic titles, a red wax seal as the ornament, the picked row underlined in red
   ink. The parchment keeps its own ink in both themes. */
[data-kit="oblivion"] body { --radius: 1px; --radius-lg: 2px; font-size: 17.5px; }
[data-kit="oblivion"] .backdrop { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(201,164,92,.08), transparent 70%), var(--grain); }
[data-kit="oblivion"] h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 700; }
[data-kit="oblivion"] h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; }
[data-kit="oblivion"] .panel, [data-kit="oblivion"] .modcard, [data-kit="oblivion"] .file, [data-kit="oblivion"] .tier, [data-kit="oblivion"] .tile, [data-kit="oblivion"] .ask, [data-kit="oblivion"] .filters, [data-kit="oblivion"] .prose, [data-kit="oblivion"] .sw-panel, [data-kit="oblivion"] .me-panel {
  --ink: #2b1a0c; --ink2: #4c321a; --mute: #7a6040; --line: rgba(43,26,12,.24); --accent: #7a2a12; --accent-ink: #f1e3c0; color: var(--ink); }
[data-kit="oblivion"] .panel, [data-kit="oblivion"] .modcard, [data-kit="oblivion"] .file, [data-kit="oblivion"] .tier, [data-kit="oblivion"] .tile, [data-kit="oblivion"] .ask, [data-kit="oblivion"] .sw-panel, [data-kit="oblivion"] .me-panel, [data-kit="oblivion"] .filters, [data-kit="oblivion"] .prose {
  background: #e3cfa1 var(--grain); border: 1px solid #a8864c; border-radius: 2px;
  box-shadow: inset 0 0 40px rgba(122,82,30,.22), 0 0 0 4px #3a2412, 0 0 0 5px #a8864c, 0 10px 26px rgba(0,0,0,.4); }
[data-kit="oblivion"] .filters, [data-kit="oblivion"] .prose { padding: 18px 20px; max-width: none; }
[data-kit="oblivion"] .modcard .cover { border-bottom: 1px solid #a8864c; }
[data-kit="oblivion"] .modcard .name { font-family: var(--f-display); font-size: 21px; font-weight: 700; }
[data-kit="oblivion"] .modcard:hover { box-shadow: inset 0 0 40px rgba(122,82,30,.22), 0 0 0 4px #3a2412, 0 0 0 5px #d9b56a, 0 12px 28px rgba(0,0,0,.45); }
[data-kit="oblivion"] .modrow:hover, [data-kit="oblivion"] .filters a.opt:hover, [data-kit="oblivion"] .filters a.opt.on, [data-kit="oblivion"] .sw-item:hover, [data-kit="oblivion"] .sw-item.on, [data-kit="oblivion"] .me-panel a:hover {
  background: rgba(122,42,18,.1); box-shadow: inset 0 -2px 0 #7a2a12; border-radius: 0; color: #2b1a0c; }
[data-kit="oblivion"] .btn { border-radius: 2px; background: #3a2412; color: #ecdcb6; border: 1px solid #a8864c; box-shadow: inset 0 0 0 2px #3a2412, inset 0 0 0 3px rgba(201,164,92,.45);
  font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
[data-kit="oblivion"] .btn:hover { background: #4d3018; color: #fff2d0; filter: none; }
[data-kit="oblivion"] .btn.ghost { background: #e3cfa1; color: #2b1a0c; box-shadow: inset 0 0 0 2px #e3cfa1, inset 0 0 0 3px rgba(122,82,30,.35); }
[data-kit="oblivion"] .tabs a { font-family: var(--f-display); font-size: 16px; }
[data-kit="oblivion"] .tabs a.on::after { background: #7a2a12; height: 2px; }
[data-kit="oblivion"] .sortbar a { border-radius: 2px; font-family: var(--f-display); }
[data-kit="oblivion"] .sortbar a.on { background: #3a2412; color: #ecdcb6; border-color: #a8864c; }
[data-kit="oblivion"] .tag { border-radius: 2px; font-family: var(--f-body); font-size: 13.5px; }
/* the wax seal */
[data-kit="oblivion"] .orn i { width: 12px; height: 12px; border-radius: 50%; border: 0; transform: none; background: radial-gradient(circle at 35% 35%, #c2412a, #7a1d0f 70%); box-shadow: 0 0 0 2px rgba(122,29,15,.35); }
[data-kit="oblivion"] .orn::before { background: linear-gradient(90deg, transparent, #a8864c); }
[data-kit="oblivion"] .orn::after { background: linear-gradient(270deg, transparent, #a8864c); }
[data-kit="oblivion"] .prose > p:first-child::first-letter, [data-kit="oblivion"] .prose .bb > :first-child::first-letter { font-family: var(--f-display); float: left; font-size: 3.2em; line-height: .9; margin: .06em .1em 0 0; color: #7a2a12; }
[data-kit="oblivion"] input[type=text], [data-kit="oblivion"] textarea, [data-kit="oblivion"] select, [data-kit="oblivion"] .find input { border-radius: 1px; }
[data-kit="oblivion"] .find input { background: #e3cfa1; color: #2b1a0c; border-color: #a8864c; }

/* ================= THE WITCHER 3: the game's menus. Near-black panels with a thin grey border and a faint inner
   vignette, silver serif capitals, the picked entry lit by a red glow on its left edge, the wolf's head medallion's
   ring as the ornament, red underline on the open tab. */
[data-kit="witcher"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .08em; --l-track: .12em; font-size: 16.5px; }
[data-kit="witcher"] .backdrop { background: radial-gradient(ellipse 90% 70% at 50% 20%, rgba(255,255,255,.035), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), var(--grain); }
[data-kit="witcher"] h1, [data-kit="witcher"] h2, [data-kit="witcher"] h3 { font-weight: 600; }
[data-kit="witcher"] h1 { font-size: clamp(30px, 4vw, 48px); }
[data-kit="witcher"] .panel, [data-kit="witcher"] .modcard, [data-kit="witcher"] .file, [data-kit="witcher"] .tier, [data-kit="witcher"] .tile, [data-kit="witcher"] .ask {
  border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 0 60px rgba(0,0,0,.35); }
[data-kit="witcher"] .modcard .name { font-family: var(--f-display); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
[data-kit="witcher"] .modcard:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: inset 0 0 60px rgba(0,0,0,.35), 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-kit="witcher"] .modrow:hover, [data-kit="witcher"] .filters a.opt:hover, [data-kit="witcher"] .filters a.opt.on, [data-kit="witcher"] .sw-item:hover, [data-kit="witcher"] .sw-item.on, [data-kit="witcher"] .me-panel a:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent 75%); box-shadow: inset 2px 0 0 var(--accent); border-radius: 0; }
[data-kit="witcher"] .btn { border-radius: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }
[data-kit="witcher"] .btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); filter: none; }
[data-kit="witcher"] .btn.ghost { background: transparent; border-color: transparent; }
[data-kit="witcher"] .tabs a.on::after { background: var(--accent); height: 2px; box-shadow: 0 0 8px var(--accent); }
[data-kit="witcher"] .sortbar a { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
[data-kit="witcher"] .sortbar a.on { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
[data-kit="witcher"] .tag { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
/* the medallion's ring */
[data-kit="witcher"] .orn i { width: 12px; height: 12px; border-radius: 50%; transform: none; background: none; border: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px color-mix(in srgb, var(--ink) 30%, transparent); }
[data-kit="witcher"] .find input, [data-kit="witcher"] input, [data-kit="witcher"] select, [data-kit="witcher"] textarea { border-radius: 0; }

/* ================= STARFIELD: the NASA-punk menus. Clean flat panels with square edges, the four-colour stripe
   (red, orange, yellow, blue) as the mark on a panel's top, condensed capitals for labels, the picked row as a solid
   block, thin rules, lots of space. */
[data-kit="starfield"] body { --radius: 0; --radius-lg: 0; --l-track: .14em; font-size: 16.5px; --sf-stripe: linear-gradient(90deg, #e0342c 0 25%, #f2913b 25% 50%, #f4c23a 50% 75%, #2f6fb5 75% 100%); }
[data-kit="starfield"] .backdrop { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 1px, transparent 1.5px) 0 0 / 120px 120px, radial-gradient(circle at 70% 70%, rgba(255,255,255,.35) 0 1px, transparent 1.5px) 0 0 / 170px 150px; opacity: .45; }
:root[data-theme="light"][data-kit="starfield"] .backdrop { opacity: 0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="starfield"] .backdrop { opacity: 0; } }
[data-kit="starfield"] h1, [data-kit="starfield"] h2, [data-kit="starfield"] h3 { font-weight: 600; letter-spacing: .01em; }
[data-kit="starfield"] h1 { font-size: clamp(32px, 4.4vw, 54px); }
[data-kit="starfield"] .eyebrow, [data-kit="starfield"] .tabs a, [data-kit="starfield"] .field > span, [data-kit="starfield"] .filters h3, [data-kit="starfield"] .tag, [data-kit="starfield"] .sortbar a { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; }
[data-kit="starfield"] .panel, [data-kit="starfield"] .modcard, [data-kit="starfield"] .file, [data-kit="starfield"] .tier, [data-kit="starfield"] .tile, [data-kit="starfield"] .ask {
  position: relative; border: 1px solid var(--line); background: var(--panel); }
[data-kit="starfield"] .panel::before, [data-kit="starfield"] .modcard::before, [data-kit="starfield"] .tier::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 56px; height: 4px; background: var(--sf-stripe); z-index: 1; }
[data-kit="starfield"] .modcard .name { font-size: 18px; font-weight: 600; }
[data-kit="starfield"] .modcard:hover { border-color: var(--ink); }
[data-kit="starfield"] .modrow:hover, [data-kit="starfield"] .filters a.opt:hover, [data-kit="starfield"] .filters a.opt.on, [data-kit="starfield"] .sw-item:hover, [data-kit="starfield"] .sw-item.on, [data-kit="starfield"] .me-panel a:hover {
  background: var(--accent); color: var(--accent-ink); border-radius: 0; }
[data-kit="starfield"] .filters a.opt:hover .c, [data-kit="starfield"] .filters a.opt.on .c, [data-kit="starfield"] .modrow:hover .muted { color: var(--accent-ink); }
[data-kit="starfield"] .btn { border-radius: 0; background: var(--accent); color: var(--accent-ink); border: 0; font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 14px; }
[data-kit="starfield"] .btn:hover { filter: none; box-shadow: inset 0 -4px 0 #f2913b; }
[data-kit="starfield"] .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-kit="starfield"] .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
[data-kit="starfield"] .tabs a.on::after { height: 3px; background: var(--sf-stripe); }
[data-kit="starfield"] .sortbar a { border-radius: 0; font-size: 12.5px; }
[data-kit="starfield"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="starfield"] .tag { border-radius: 0; font-size: 12px; }
[data-kit="starfield"] .orn i { width: 40px; height: 4px; transform: none; border: 0; background: var(--sf-stripe); }
[data-kit="starfield"] .orn::before, [data-kit="starfield"] .orn::after { background: var(--line); }
[data-kit="starfield"] .find input, [data-kit="starfield"] input, [data-kit="starfield"] select, [data-kit="starfield"] textarea { border-radius: 0; }

/* ================= FALLOUT 3: a RobCo terminal. Pale blue phosphor on near-black, scanlines, the terminal's
   capitals, a blinking cursor after headings, the picked line inverted, frames of thin rules. */
[data-kit="fo3"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .05em; --l-track: .1em; font-size: 16.5px; }
[data-kit="fo3"] .backdrop { background:
  repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
  radial-gradient(ellipse 85% 75% at 50% 45%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 75%); }
:root[data-theme="light"][data-kit="fo3"] .backdrop { background: repeating-linear-gradient(0deg, rgba(15,28,44,.04) 0 1px, transparent 1px 3px); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="fo3"] .backdrop { background: repeating-linear-gradient(0deg, rgba(15,28,44,.04) 0 1px, transparent 1px 3px); } }
[data-kit="fo3"] h1 { font-size: clamp(42px, 5.6vw, 68px); font-weight: 400; }
[data-kit="fo3"] h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 400; }
[data-kit="fo3"] h1, [data-kit="fo3"] h2 { text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); }
[data-kit="fo3"] .section-head h2::after { content: "_"; margin-left: 2px; animation: fo3-blink 1.1s steps(1) infinite; }
@keyframes fo3-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-kit="fo3"] .section-head h2::after { animation: none; } }
[data-kit="fo3"] .eyebrow, [data-kit="fo3"] .tabs a, [data-kit="fo3"] .filters h3, [data-kit="fo3"] .tag, [data-kit="fo3"] .btn, [data-kit="fo3"] .sortbar a { font-family: var(--f-label); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
[data-kit="fo3"] .panel, [data-kit="fo3"] .modcard, [data-kit="fo3"] .file, [data-kit="fo3"] .tier, [data-kit="fo3"] .tile, [data-kit="fo3"] .ask {
  border: 1px solid var(--line); border-radius: 0; background: var(--panel); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 6%, transparent); }
[data-kit="fo3"] .modcard .name { font-family: var(--f-label); font-size: 22px; font-weight: 400; }
[data-kit="fo3"] .modcard:hover { border-color: var(--accent); }
[data-kit="fo3"] .modrow:hover, [data-kit="fo3"] .filters a.opt:hover, [data-kit="fo3"] .filters a.opt.on, [data-kit="fo3"] .sw-item:hover, [data-kit="fo3"] .sw-item.on, [data-kit="fo3"] .me-panel a:hover {
  background: var(--accent); color: var(--accent-ink); border-radius: 0; }
[data-kit="fo3"] .filters a.opt:hover .c, [data-kit="fo3"] .filters a.opt.on .c { color: var(--accent-ink); }
[data-kit="fo3"] .btn { border-radius: 0; background: transparent; color: var(--accent); border: 1px solid var(--accent); }
[data-kit="fo3"] .btn::before { content: "> "; }
[data-kit="fo3"] .btn:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
[data-kit="fo3"] .btn.ghost { border-color: transparent; }
[data-kit="fo3"] .tabs a.on::after { height: 2px; background: var(--accent); }
[data-kit="fo3"] .sortbar a { border-radius: 0; font-size: 17px; }
[data-kit="fo3"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="fo3"] .tag { border-radius: 0; font-size: 16px; padding-top: 0; padding-bottom: 0; }
[data-kit="fo3"] .orn i { width: 10px; height: 14px; border: 0; transform: none; background: var(--accent); }
[data-kit="fo3"] .numbar b, [data-kit="fo3"] .tile b { font-family: var(--f-label); font-weight: 400; font-size: 1.35em; }
[data-kit="fo3"] .find input, [data-kit="fo3"] input, [data-kit="fo3"] select, [data-kit="fo3"] textarea { border-radius: 0; }

/* logos that disappear on one of the two backgrounds get a soft halo there (data-logo from src/games.js):
   "dark" = a dark logo, lit from behind on dark pages; "light" = a pale logo, shaded on light pages */
:root:not([data-theme="light"]) .glogo[data-logo="dark"] img { filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(255,255,255,.35)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .glogo[data-logo="dark"] img { filter: none; } }
:root[data-theme="light"] .glogo[data-logo="light"] img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(0,0,0,.25)); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .glogo[data-logo="light"] img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)) drop-shadow(0 0 12px rgba(0,0,0,.25)); } }

/* ================= MORROWIND: the game's windows. Near-black panels inside a bevelled tan border (light outer edge,
   dark inner edge, like the carved frames of its menus), its calligraphic lettering for titles and buttons, the picked
   line brightening to pale gold, square buttons with the same bevel. */
[data-kit="morrowind"] body { --radius: 0; --radius-lg: 0; font-size: 17.5px; --mw-bevel: inset 1px 1px 0 rgba(255,236,190,.35), inset -1px -1px 0 rgba(0,0,0,.6); }
[data-kit="morrowind"] .backdrop { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(202,174,112,.07), transparent 70%), var(--grain); }
[data-kit="morrowind"] h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 400; }
[data-kit="morrowind"] h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 400; }
[data-kit="morrowind"] .panel, [data-kit="morrowind"] .modcard, [data-kit="morrowind"] .file, [data-kit="morrowind"] .tier, [data-kit="morrowind"] .tile, [data-kit="morrowind"] .ask {
  border: 3px solid #8a7146; border-radius: 0; background: var(--panel);
  box-shadow: inset 2px 2px 0 rgba(255,236,190,.28), inset -2px -2px 0 rgba(0,0,0,.55), 0 0 0 1px #2a1f12; }
[data-kit="morrowind"] .modcard .name { font-family: var(--f-display); font-size: 20px; font-weight: 400; }
[data-kit="morrowind"] .modcard:hover { border-color: #b39560; }
[data-kit="morrowind"] .modrow:hover, [data-kit="morrowind"] .filters a.opt:hover, [data-kit="morrowind"] .filters a.opt.on, [data-kit="morrowind"] .sw-item:hover, [data-kit="morrowind"] .sw-item.on, [data-kit="morrowind"] .me-panel a:hover {
  background: rgba(202,174,112,.12); color: var(--accent); border-radius: 0; }
[data-kit="morrowind"] .btn { border-radius: 0; background: #2a1f12; color: #e8d6a4; border: 2px solid #8a7146; box-shadow: var(--mw-bevel); font-family: var(--f-display); font-weight: 400; font-size: 17px; letter-spacing: .02em; }
[data-kit="morrowind"] .btn:hover { color: #fff1c8; background: #3a2b18; filter: none; }
[data-kit="morrowind"] .btn.ghost { background: transparent; }
:root[data-theme="light"][data-kit="morrowind"] .btn { background: #e9dec4; color: #2a1d0e; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="morrowind"] .btn { background: #e9dec4; color: #2a1d0e; } }
[data-kit="morrowind"] .tabs a { font-family: var(--f-display); font-size: 17px; }
[data-kit="morrowind"] .tabs a.on { color: var(--accent); }
[data-kit="morrowind"] .tabs a.on::after { background: #8a7146; height: 2px; }
[data-kit="morrowind"] .sortbar a { border-radius: 0; font-family: var(--f-display); }
[data-kit="morrowind"] .sortbar a.on { border: 2px solid #8a7146; box-shadow: var(--mw-bevel); color: var(--accent); }
[data-kit="morrowind"] .tag { border-radius: 0; border-color: #8a7146; }
[data-kit="morrowind"] .orn i { width: 10px; height: 10px; border: 2px solid #8a7146; background: #2a1f12; transform: rotate(45deg); }
[data-kit="morrowind"] .orn::before { background: linear-gradient(90deg, transparent, #8a7146); }
[data-kit="morrowind"] .orn::after { background: linear-gradient(270deg, transparent, #8a7146); }
[data-kit="morrowind"] .find input, [data-kit="morrowind"] input, [data-kit="morrowind"] select, [data-kit="morrowind"] textarea { border-radius: 0; }

/* ================= MONSTER HUNTER: WORLD: the hunter's menus. Navy glass panels with a gold hairline and soft
   corners, condensed capitals, the picked entry marked by an orange bar on the left and a warm glow, small diamonds
   as markers (like the quest board), gold underline on the open tab. */
[data-kit="mhw"] body { --radius: 3px; --radius-lg: 5px; --l-track: .1em; font-size: 16.5px; }
[data-kit="mhw"] .backdrop { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(233,180,76,.08), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(60,110,160,.12), transparent 70%); }
[data-kit="mhw"] h1, [data-kit="mhw"] h2, [data-kit="mhw"] h3 { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
[data-kit="mhw"] h1 { font-size: clamp(34px, 4.6vw, 56px); }
[data-kit="mhw"] .eyebrow, [data-kit="mhw"] .tabs a, [data-kit="mhw"] .filters h3, [data-kit="mhw"] .field > span, [data-kit="mhw"] .sortbar a, [data-kit="mhw"] .tag { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; }
[data-kit="mhw"] .panel, [data-kit="mhw"] .modcard, [data-kit="mhw"] .file, [data-kit="mhw"] .tier, [data-kit="mhw"] .tile, [data-kit="mhw"] .ask {
  border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent), 0 8px 22px rgba(0,0,0,.25); }
[data-kit="mhw"] .modcard .name { font-family: var(--f-display); font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
[data-kit="mhw"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 1px 0 var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-kit="mhw"] .modrow:hover, [data-kit="mhw"] .filters a.opt:hover, [data-kit="mhw"] .filters a.opt.on, [data-kit="mhw"] .sw-item:hover, [data-kit="mhw"] .sw-item.on, [data-kit="mhw"] .me-panel a:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 80%); box-shadow: inset 3px 0 0 var(--accent); }
[data-kit="mhw"] .btn { border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent)); color: var(--accent-ink); border: 0; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
[data-kit="mhw"] .btn:hover { filter: brightness(1.08); }
[data-kit="mhw"] .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-kit="mhw"] .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); filter: none; }
[data-kit="mhw"] .tabs a.on::after { background: var(--accent); height: 2px; }
[data-kit="mhw"] .tabs a.on::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; transform: rotate(45deg) translateY(-2px); background: var(--accent); }
[data-kit="mhw"] .sortbar a { border-radius: 3px; font-size: 13px; }
[data-kit="mhw"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="mhw"] .tag { border-radius: 2px; font-size: 12px; }
[data-kit="mhw"] .orn i { width: 9px; height: 9px; border: 0; background: var(--accent); transform: rotate(45deg); box-shadow: -16px 0 0 -2px var(--mute), 16px 0 0 -2px var(--mute); }
[data-kit="mhw"] .find input, [data-kit="mhw"] input, [data-kit="mhw"] select, [data-kit="mhw"] textarea { border-radius: 3px; }

/* ================= BLADE & SORCERY: dark tooled leather with brass rivets at the corners, engraved serif capitals,
   the arcane blue glow of its magic on what you point at, a rune-like diamond as the ornament. */
[data-kit="bas"] body { --radius: 2px; --radius-lg: 3px; --d-case: uppercase; --d-track: .06em; --l-track: .12em; font-size: 16.5px; --rivet: radial-gradient(circle, #e2c178 0 2px, #7a5a26 2.5px, transparent 3.5px); }
[data-kit="bas"] .backdrop { background: radial-gradient(ellipse 60% 45% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), var(--grain); }
[data-kit="bas"] h1, [data-kit="bas"] h2, [data-kit="bas"] h3 { font-weight: 700; }
[data-kit="bas"] h1 { font-size: clamp(30px, 4vw, 48px); }
[data-kit="bas"] .panel, [data-kit="bas"] .modcard, [data-kit="bas"] .file, [data-kit="bas"] .tier, [data-kit="bas"] .tile, [data-kit="bas"] .ask {
  border: 1px solid var(--line); background-color: var(--panel);
  background-image: var(--rivet), var(--rivet), var(--rivet), var(--rivet), var(--grain);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, auto;
  background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 0 0;
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--panel) 80%, #000), inset 0 0 0 5px color-mix(in srgb, #bd9252 30%, transparent); }
[data-kit="bas"] .modcard .name { font-family: var(--f-display); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
[data-kit="bas"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--panel) 80%, #000), inset 0 0 0 5px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-kit="bas"] .modrow:hover, [data-kit="bas"] .filters a.opt:hover, [data-kit="bas"] .filters a.opt.on, [data-kit="bas"] .sw-item:hover, [data-kit="bas"] .sw-item.on, [data-kit="bas"] .me-panel a:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
[data-kit="bas"] .btn { border-radius: 2px; background: linear-gradient(#3a2a1a, #23180e); color: #ebdfc8; border: 1px solid #bd9252; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
[data-kit="bas"] .btn:hover { color: #fff; border-color: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); filter: none; }
[data-kit="bas"] .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
[data-kit="bas"] .tabs a.on::after { background: var(--accent); height: 2px; box-shadow: 0 0 8px var(--accent); }
[data-kit="bas"] .sortbar a { border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
[data-kit="bas"] .sortbar a.on { border-color: var(--accent); color: var(--ink); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-kit="bas"] .tag { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }
[data-kit="bas"] .orn i { width: 10px; height: 10px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 25%, transparent); transform: rotate(45deg); box-shadow: 0 0 8px var(--accent); }
[data-kit="bas"] .find input, [data-kit="bas"] input, [data-kit="bas"] select, [data-kit="bas"] textarea { border-radius: 2px; }

/* ================= DRAGON AGE: ORIGINS: dark stone panels with a thin gold line, a blood-red brush stroke across the
   top of each frame, gothic serif titles, the picked entry lit in dark red, a blood drop as the ornament. */
[data-kit="dao"] body { --radius: 1px; --radius-lg: 2px; font-size: 17.5px; --blood: #9c1818; }
[data-kit="dao"] .backdrop { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(156,24,24,.12), transparent 70%), var(--grain); }
[data-kit="dao"] h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 600; }
[data-kit="dao"] h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; }
[data-kit="dao"] .eyebrow, [data-kit="dao"] .tabs a, [data-kit="dao"] .filters h3, [data-kit="dao"] .sortbar a { font-family: var(--f-label); letter-spacing: .1em; text-transform: uppercase; font-size: 12.5px; }
[data-kit="dao"] .panel, [data-kit="dao"] .modcard, [data-kit="dao"] .file, [data-kit="dao"] .tier, [data-kit="dao"] .tile, [data-kit="dao"] .ask {
  position: relative; border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
[data-kit="dao"] .panel::before, [data-kit="dao"] .modcard::before, [data-kit="dao"] .tier::before {
  content: ""; position: absolute; left: 8%; right: 30%; top: -3px; height: 5px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--blood) 12%, var(--blood) 70%, transparent); border-radius: 50%; filter: blur(.4px); }
[data-kit="dao"] .modcard .name { font-family: var(--f-display); font-size: 22px; font-weight: 600; }
[data-kit="dao"] .modcard:hover { border-color: var(--accent); }
[data-kit="dao"] .modrow:hover, [data-kit="dao"] .filters a.opt:hover, [data-kit="dao"] .filters a.opt.on, [data-kit="dao"] .sw-item:hover, [data-kit="dao"] .sw-item.on, [data-kit="dao"] .me-panel a:hover {
  background: linear-gradient(90deg, rgba(156,24,24,.35), transparent 85%); color: var(--ink); }
[data-kit="dao"] .btn { border-radius: 1px; background: linear-gradient(#5e1010, #3b0a0a); color: #f2e6d2; border: 1px solid var(--accent); font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
[data-kit="dao"] .btn:hover { background: linear-gradient(#741515, #4a0d0d); color: #fff; filter: none; }
[data-kit="dao"] .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
[data-kit="dao"] .tabs a.on::after { background: var(--blood); height: 2px; }
[data-kit="dao"] .sortbar a { border-radius: 1px; }
[data-kit="dao"] .sortbar a.on { background: #5e1010; color: #f2e6d2; border-color: var(--accent); }
[data-kit="dao"] .tag { border-radius: 1px; }
/* the blood drop */
[data-kit="dao"] .orn i { width: 10px; height: 10px; border: 0; background: var(--blood); border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
[data-kit="dao"] .orn::before { background: linear-gradient(90deg, transparent, var(--accent)); }
[data-kit="dao"] .orn::after { background: linear-gradient(270deg, transparent, var(--accent)); }
[data-kit="dao"] .find input, [data-kit="dao"] input, [data-kit="dao"] select, [data-kit="dao"] textarea { border-radius: 1px; }

/* ================= RED DEAD REDEMPTION 2: the pause menu and the catalogue. Black see-through panels with a rough,
   torn edge, white condensed capitals, the picked entry boxed in white with a red tick, wood-type titles, and the
   general store catalogue's serif for reading. */
[data-kit="rdr2"] body { --radius: 0; --radius-lg: 0; --l-track: .08em; font-size: 17.5px;
  --torn: polygon(0 3px, 6% 0, 14% 2px, 27% 0, 38% 3px, 52% 1px, 63% 3px, 78% 0, 91% 2px, 100% 0, 100% calc(100% - 3px), 88% 100%, 74% calc(100% - 2px), 61% 100%, 47% calc(100% - 3px), 33% 100%, 19% calc(100% - 2px), 8% 100%, 0 calc(100% - 2px)); }
[data-kit="rdr2"] .backdrop { background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,.4), transparent 70%), var(--grain); }
[data-kit="rdr2"] h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 400; letter-spacing: .02em; }
[data-kit="rdr2"] h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 400; }
[data-kit="rdr2"] .eyebrow, [data-kit="rdr2"] .tabs a, [data-kit="rdr2"] .filters h3, [data-kit="rdr2"] .field > span, [data-kit="rdr2"] .tag, [data-kit="rdr2"] .sortbar a, [data-kit="rdr2"] .btn { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; }
[data-kit="rdr2"] .panel, [data-kit="rdr2"] .modcard, [data-kit="rdr2"] .file, [data-kit="rdr2"] .tier, [data-kit="rdr2"] .tile, [data-kit="rdr2"] .ask {
  border: 0; background: var(--panel); clip-path: var(--torn); }
[data-kit="rdr2"] .modcard .name { font-family: var(--f-label); text-transform: uppercase; font-size: 18px; font-weight: 500; letter-spacing: .04em; }
[data-kit="rdr2"] .modcard:hover { outline: 2px solid var(--ink); outline-offset: -6px; }
[data-kit="rdr2"] .modrow:hover, [data-kit="rdr2"] .filters a.opt:hover, [data-kit="rdr2"] .filters a.opt.on, [data-kit="rdr2"] .sw-item:hover, [data-kit="rdr2"] .sw-item.on, [data-kit="rdr2"] .me-panel a:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 70%, transparent), inset 4px 0 0 var(--accent); border-radius: 0; }
[data-kit="rdr2"] .btn { border-radius: 0; background: var(--ink); color: var(--bg); border: 0; font-weight: 500; font-size: 15px; clip-path: var(--torn); }
[data-kit="rdr2"] .btn:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
[data-kit="rdr2"] .btn.ghost { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
[data-kit="rdr2"] .tabs a.on::after { background: var(--accent); height: 3px; }
[data-kit="rdr2"] .sortbar a { border-radius: 0; font-size: 13px; }
[data-kit="rdr2"] .sortbar a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
[data-kit="rdr2"] .tag { border-radius: 0; font-size: 12px; }
[data-kit="rdr2"] .orn i { width: 12px; height: 12px; border: 0; background: var(--accent); transform: rotate(45deg); }
[data-kit="rdr2"] .find input, [data-kit="rdr2"] input, [data-kit="rdr2"] select, [data-kit="rdr2"] textarea { border-radius: 0; }

/* ================= STELLAR BLADE: the HUD and menus. Thin white lines, angled corners cut on two sides, small
   bracket marks, wide-spaced techno capitals for titles, a cyan glow on what you point at, light glass panels. */
[data-kit="stellar"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .1em; --l-track: .16em; font-size: 16.5px; }
[data-kit="stellar"] .backdrop { background: linear-gradient(115deg, transparent 48%, color-mix(in srgb, var(--accent) 6%, transparent) 50%, transparent 52%), radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
[data-kit="stellar"] h1, [data-kit="stellar"] h2, [data-kit="stellar"] h3 { font-weight: 600; }
[data-kit="stellar"] h1 { font-size: clamp(28px, 3.8vw, 46px); }
[data-kit="stellar"] h2 { font-size: clamp(20px, 2.3vw, 28px); }
[data-kit="stellar"] .eyebrow, [data-kit="stellar"] .tabs a, [data-kit="stellar"] .filters h3, [data-kit="stellar"] .tag, [data-kit="stellar"] .sortbar a { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
[data-kit="stellar"] .panel, [data-kit="stellar"] .modcard, [data-kit="stellar"] .file, [data-kit="stellar"] .tier, [data-kit="stellar"] .tile, [data-kit="stellar"] .ask {
  border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(8px);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
[data-kit="stellar"] .modcard .name { font-family: var(--f-body); font-size: 18px; font-weight: 600; letter-spacing: .02em; }
[data-kit="stellar"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent); }
[data-kit="stellar"] .modrow:hover, [data-kit="stellar"] .filters a.opt:hover, [data-kit="stellar"] .filters a.opt.on, [data-kit="stellar"] .sw-item:hover, [data-kit="stellar"] .sw-item.on, [data-kit="stellar"] .me-panel a:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 85%); box-shadow: inset 2px 0 0 var(--accent); color: var(--ink); }
[data-kit="stellar"] .btn { border-radius: 0; background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); text-transform: uppercase; letter-spacing: .18em; font-size: 12.5px; font-weight: 600;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
[data-kit="stellar"] .btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); filter: none; }
[data-kit="stellar"] .btn.ghost { border-color: transparent; }
[data-kit="stellar"] .tabs a.on::after { background: var(--accent); height: 2px; box-shadow: 0 0 8px var(--accent); }
[data-kit="stellar"] .sortbar a { border-radius: 0; }
[data-kit="stellar"] .sortbar a.on { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
[data-kit="stellar"] .tag { border-radius: 0; }
[data-kit="stellar"] .orn i { width: 14px; height: 14px; border: 1px solid var(--accent); background: none; transform: rotate(45deg); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 5px var(--accent); }
[data-kit="stellar"] .find input, [data-kit="stellar"] input, [data-kit="stellar"] select, [data-kit="stellar"] textarea { border-radius: 0; }

/* ================= ELDEN RING: the game's sparse menus. Dark, almost frameless panels edged by a fine gold line that
   fades at the ends, serif titles with small capitals, the picked entry lit by a soft golden haze (the light of
   grace), a small ring as the ornament. */
[data-kit="eldenring"] body { --radius: 0; --radius-lg: 0; --l-track: .14em; font-size: 17.5px; }
[data-kit="eldenring"] .backdrop { background: radial-gradient(ellipse 60% 45% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
[data-kit="eldenring"] h1 { font-size: clamp(38px, 5vw, 62px); font-weight: 500; letter-spacing: .02em; }
[data-kit="eldenring"] h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; }
[data-kit="eldenring"] .eyebrow, [data-kit="eldenring"] .tabs a, [data-kit="eldenring"] .filters h3, [data-kit="eldenring"] .sortbar a, [data-kit="eldenring"] .btn { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; }
[data-kit="eldenring"] .panel, [data-kit="eldenring"] .modcard, [data-kit="eldenring"] .file, [data-kit="eldenring"] .tier, [data-kit="eldenring"] .tile, [data-kit="eldenring"] .ask {
  border: 0; background: var(--panel); position: relative;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
[data-kit="eldenring"] .modcard .name { font-family: var(--f-display); font-size: 21px; font-weight: 600; }
[data-kit="eldenring"] .modcard:hover { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent); }
[data-kit="eldenring"] .modrow:hover, [data-kit="eldenring"] .filters a.opt:hover, [data-kit="eldenring"] .filters a.opt.on, [data-kit="eldenring"] .sw-item:hover, [data-kit="eldenring"] .sw-item.on, [data-kit="eldenring"] .me-panel a:hover {
  background: radial-gradient(ellipse 70% 120% at 30% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 75%); color: var(--ink); }
[data-kit="eldenring"] .btn { border-radius: 0; background: transparent; color: var(--ink); border: 0; font-size: 13px; font-weight: 400; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent) 50%, transparent); }
[data-kit="eldenring"] .btn:hover { background: radial-gradient(ellipse 80% 140% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 80%); color: var(--ink); filter: none; text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
[data-kit="eldenring"] .btn.ghost { box-shadow: none; }
[data-kit="eldenring"] .tabs a.on::after { height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
[data-kit="eldenring"] .tabs a.on { text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); }
[data-kit="eldenring"] .sortbar a { border-radius: 0; border-color: transparent; font-size: 12px; }
[data-kit="eldenring"] .sortbar a.on { border-color: transparent; box-shadow: inset 0 -1px 0 var(--accent); color: var(--ink); }
[data-kit="eldenring"] .tag { border-radius: 0; font-size: 12.5px; }
[data-kit="eldenring"] .orn i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--accent); background: none; transform: none; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); }
[data-kit="eldenring"] .orn::before { background: linear-gradient(90deg, transparent, var(--accent)); }
[data-kit="eldenring"] .orn::after { background: linear-gradient(270deg, transparent, var(--accent)); }
[data-kit="eldenring"] .find input, [data-kit="eldenring"] input, [data-kit="eldenring"] select, [data-kit="eldenring"] textarea { border-radius: 0; }

/* ================= READY OR NOT: a tactical police screen. Dark slate panels with corner brackets like a camera
   overlay, mono labels like a case file, condensed capitals, police blue for the picked line, yellow and black
   tape as the ornament. */
[data-kit="ron"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .03em; --l-track: .12em; font-size: 16.5px; }
[data-kit="ron"] .backdrop { background: linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px) 0 0 / 100% 32px; opacity: .6; }
[data-kit="ron"] h1, [data-kit="ron"] h2, [data-kit="ron"] h3 { font-weight: 700; }
[data-kit="ron"] h1 { font-size: clamp(36px, 5vw, 60px); }
[data-kit="ron"] .eyebrow, [data-kit="ron"] .tabs a, [data-kit="ron"] .filters h3, [data-kit="ron"] .field > span, [data-kit="ron"] .tag, [data-kit="ron"] .sortbar a { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
[data-kit="ron"] .panel, [data-kit="ron"] .modcard, [data-kit="ron"] .file, [data-kit="ron"] .tier, [data-kit="ron"] .tile, [data-kit="ron"] .ask {
  --c: color-mix(in srgb, var(--ink) 75%, transparent); border: 1px solid var(--line); background-color: var(--panel);
  background-image: linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat; background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: -1px -1px, -1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) -1px, -1px calc(100% + 1px), -1px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px), calc(100% + 1px) calc(100% + 1px); background-origin: border-box; }
[data-kit="ron"] .modcard .name { font-family: var(--f-display); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
[data-kit="ron"] .modcard:hover { border-color: var(--accent); }
[data-kit="ron"] .modrow:hover, [data-kit="ron"] .filters a.opt:hover, [data-kit="ron"] .filters a.opt.on, [data-kit="ron"] .sw-item:hover, [data-kit="ron"] .sw-item.on, [data-kit="ron"] .me-panel a:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); }
[data-kit="ron"] .btn { border-radius: 0; background: var(--accent); color: var(--accent-ink); border: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; }
[data-kit="ron"] .btn:hover { filter: brightness(1.1); }
[data-kit="ron"] .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-kit="ron"] .btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); filter: none; }
[data-kit="ron"] .tabs a.on::after { background: var(--accent); height: 2px; }
[data-kit="ron"] .sortbar a { border-radius: 0; }
[data-kit="ron"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="ron"] .tag { border-radius: 0; }
/* the tape */
[data-kit="ron"] .orn i { width: 46px; height: 8px; border: 0; transform: none; background: repeating-linear-gradient(-45deg, #f2c230 0 6px, #111 6px 12px); }
[data-kit="ron"] .find input, [data-kit="ron"] input, [data-kit="ron"] select, [data-kit="ron"] textarea { border-radius: 0; }

/* ================= RESIDENT EVIL 4: the attaché case and the typewriter. A faint case grid behind everything, dark
   panels with a thin worn edge, typewriter labels, serif titles, the picked slot outlined in brass like the case's
   selection, an ink ribbon stroke as the ornament. */
[data-kit="re4"] body { --radius: 1px; --radius-lg: 2px; font-size: 16.5px; }
[data-kit="re4"] .backdrop { background:
  linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
  radial-gradient(ellipse 70% 60% at 50% 30%, transparent, rgba(0,0,0,.25)); }
[data-kit="re4"] h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 600; }
[data-kit="re4"] h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; }
[data-kit="re4"] .eyebrow, [data-kit="re4"] .tabs a, [data-kit="re4"] .filters h3, [data-kit="re4"] .field > span, [data-kit="re4"] .tag, [data-kit="re4"] .sortbar a, [data-kit="re4"] .btn { font-family: var(--f-label); letter-spacing: .04em; }
[data-kit="re4"] .panel, [data-kit="re4"] .modcard, [data-kit="re4"] .file, [data-kit="re4"] .tier, [data-kit="re4"] .tile, [data-kit="re4"] .ask {
  border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 0 30px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.25); }
[data-kit="re4"] .modcard .name { font-family: var(--f-display); font-size: 22px; font-weight: 600; }
[data-kit="re4"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-kit="re4"] .modrow:hover, [data-kit="re4"] .filters a.opt:hover, [data-kit="re4"] .filters a.opt.on, [data-kit="re4"] .sw-item:hover, [data-kit="re4"] .sw-item.on, [data-kit="re4"] .me-panel a:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
[data-kit="re4"] .btn { border-radius: 1px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); border: 1px solid var(--accent); font-size: 15px; }
[data-kit="re4"] .btn:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
[data-kit="re4"] .btn.ghost { border-color: var(--line); background: transparent; }
[data-kit="re4"] .tabs a.on::after { background: var(--accent); height: 2px; }
[data-kit="re4"] .sortbar a { border-radius: 1px; font-size: 14px; }
[data-kit="re4"] .sortbar a.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
[data-kit="re4"] .tag { border-radius: 1px; font-size: 13px; }
[data-kit="re4"] .orn i { width: 34px; height: 3px; border: 0; transform: skewX(-20deg); background: var(--accent); }
[data-kit="re4"] .find input, [data-kit="re4"] input, [data-kit="re4"] select, [data-kit="re4"] textarea { border-radius: 1px; }

/* ================= PALWORLD: bright, round and friendly. White panels with big rounded corners and a soft shadow,
   chunky rounded lettering, pill buttons, the picked item in a yellow pill, a paw-like trio of dots as the ornament;
   the sky by day (light), the night sky (dark). */
[data-kit="palworld"] body { --radius: 14px; --radius-lg: 18px; font-size: 17px; }
[data-kit="palworld"] .backdrop { background: radial-gradient(ellipse 60% 40% at 15% 10%, rgba(255,255,255,.5), transparent 70%), radial-gradient(ellipse 50% 35% at 85% 25%, rgba(255,255,255,.35), transparent 70%); }
:root:not([data-theme="light"])[data-kit="palworld"] .backdrop { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 1px, transparent 1.5px) 0 0 / 130px 120px; opacity: .5; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="palworld"] .backdrop { background: radial-gradient(ellipse 60% 40% at 15% 10%, rgba(255,255,255,.5), transparent 70%), radial-gradient(ellipse 50% 35% at 85% 25%, rgba(255,255,255,.35), transparent 70%); opacity: 1; } }
[data-kit="palworld"] h1, [data-kit="palworld"] h2, [data-kit="palworld"] h3 { font-weight: 700; }
[data-kit="palworld"] h1 { font-size: clamp(36px, 5vw, 58px); }
[data-kit="palworld"] .panel, [data-kit="palworld"] .modcard, [data-kit="palworld"] .file, [data-kit="palworld"] .tier, [data-kit="palworld"] .tile, [data-kit="palworld"] .ask {
  border: 0; border-radius: 18px; background: var(--panel); box-shadow: 0 8px 24px rgba(19,33,63,.14), inset 0 -3px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
[data-kit="palworld"] .modcard { overflow: hidden; }
[data-kit="palworld"] .modcard .name { font-family: var(--f-display); font-size: 19px; font-weight: 600; }
[data-kit="palworld"] .modcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(19,33,63,.2), inset 0 -3px 0 var(--accent); }
[data-kit="palworld"] .modrow:hover, [data-kit="palworld"] .filters a.opt:hover, [data-kit="palworld"] .filters a.opt.on, [data-kit="palworld"] .sw-item:hover, [data-kit="palworld"] .sw-item.on, [data-kit="palworld"] .me-panel a:hover {
  background: #ffd23f; color: #13213f; border-radius: 999px; }
[data-kit="palworld"] .filters a.opt:hover .c, [data-kit="palworld"] .filters a.opt.on .c { color: #13213f; }
[data-kit="palworld"] .btn { border-radius: 999px; background: var(--accent); color: var(--accent-ink); border: 0; font-family: var(--f-label); font-weight: 600; font-size: 16px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
[data-kit="palworld"] .btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
[data-kit="palworld"] .btn.ghost { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
[data-kit="palworld"] .tabs a { font-family: var(--f-label); font-weight: 600; }
[data-kit="palworld"] .tabs a.on::after { background: var(--accent); height: 4px; border-radius: 4px; }
[data-kit="palworld"] .sortbar a { border-radius: 999px; font-family: var(--f-label); }
[data-kit="palworld"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="palworld"] .tag { border-radius: 999px; font-family: var(--f-label); }
[data-kit="palworld"] .orn i { width: 10px; height: 10px; border-radius: 50%; border: 0; transform: none; background: var(--accent); box-shadow: -16px -4px 0 -2px var(--accent), 16px -4px 0 -2px var(--accent); }
[data-kit="palworld"] .find input, [data-kit="palworld"] input, [data-kit="palworld"] select, [data-kit="palworld"] textarea { border-radius: 12px; }

/* ================= MONSTER HUNTER WILDS: the Forbidden Lands. Warm sand and dusk tones, panels with a heavy
   ochre bar along the bottom like the game's windows, condensed capitals, the picked entry warmed with an ochre
   wash and a bar on the left, small diamonds as markers. */
[data-kit="mhwilds"] body { --radius: 2px; --radius-lg: 3px; --l-track: .1em; font-size: 16.5px; }
[data-kit="mhwilds"] .backdrop { background: radial-gradient(ellipse 90% 60% at 50% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), repeating-linear-gradient(170deg, transparent 0 60px, color-mix(in srgb, var(--ink) 2.5%, transparent) 60px 61px), var(--grain); }
[data-kit="mhwilds"] h1, [data-kit="mhwilds"] h2, [data-kit="mhwilds"] h3 { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
[data-kit="mhwilds"] h1 { font-size: clamp(34px, 4.6vw, 56px); }
[data-kit="mhwilds"] .eyebrow, [data-kit="mhwilds"] .tabs a, [data-kit="mhwilds"] .filters h3, [data-kit="mhwilds"] .field > span, [data-kit="mhwilds"] .sortbar a, [data-kit="mhwilds"] .tag { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; }
[data-kit="mhwilds"] .panel, [data-kit="mhwilds"] .modcard, [data-kit="mhwilds"] .file, [data-kit="mhwilds"] .tier, [data-kit="mhwilds"] .tile, [data-kit="mhwilds"] .ask {
  border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--accent) 75%, transparent), 0 8px 20px rgba(0,0,0,.22); }
[data-kit="mhwilds"] .modcard .name { font-family: var(--f-display); font-size: 19px; font-weight: 700; text-transform: uppercase; }
[data-kit="mhwilds"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 -4px 0 var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-kit="mhwilds"] .modrow:hover, [data-kit="mhwilds"] .filters a.opt:hover, [data-kit="mhwilds"] .filters a.opt.on, [data-kit="mhwilds"] .sw-item:hover, [data-kit="mhwilds"] .sw-item.on, [data-kit="mhwilds"] .me-panel a:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 4px 0 0 var(--accent); color: var(--ink); }
[data-kit="mhwilds"] .btn { border-radius: 2px; background: var(--accent); color: var(--accent-ink); border: 0; font-family: var(--f-label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
[data-kit="mhwilds"] .btn:hover { filter: brightness(1.08); }
[data-kit="mhwilds"] .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-kit="mhwilds"] .tabs a.on::after { background: var(--accent); height: 3px; }
[data-kit="mhwilds"] .sortbar a { border-radius: 2px; font-size: 13px; }
[data-kit="mhwilds"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="mhwilds"] .tag { border-radius: 2px; font-size: 12px; }
[data-kit="mhwilds"] .orn i { width: 9px; height: 9px; border: 1px solid var(--accent); background: none; transform: rotate(45deg); box-shadow: -16px 0 0 -2px var(--accent), 16px 0 0 -2px var(--accent); }
[data-kit="mhwilds"] .find input, [data-kit="mhwilds"] input, [data-kit="mhwilds"] select, [data-kit="mhwilds"] textarea { border-radius: 2px; }

/* ================= MARVEL RIVALS: a comic book. Panels with thick black outlines and a hard offset shadow, a halftone
   dot screen behind, bold comic lettering, slanted buttons, the picked item in a yellow block, a burst as the ornament. */
[data-kit="rivals"] body { --radius: 0; --radius-lg: 0; font-size: 16.5px; --ol: #111; }
[data-kit="rivals"] .backdrop { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 1.4px, transparent 1.6px) 0 0 / 10px 10px; opacity: .45; }
[data-kit="rivals"] h1, [data-kit="rivals"] h2, [data-kit="rivals"] h3 { font-weight: 400; letter-spacing: .03em; }
[data-kit="rivals"] h1 { font-size: clamp(44px, 6vw, 76px); }
[data-kit="rivals"] h2 { font-size: clamp(30px, 3.4vw, 42px); }
[data-kit="rivals"] .eyebrow, [data-kit="rivals"] .tabs a, [data-kit="rivals"] .filters h3, [data-kit="rivals"] .sortbar a, [data-kit="rivals"] .tag { font-family: var(--f-label); text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
[data-kit="rivals"] .panel, [data-kit="rivals"] .modcard, [data-kit="rivals"] .file, [data-kit="rivals"] .tier, [data-kit="rivals"] .tile, [data-kit="rivals"] .ask {
  border: 3px solid var(--ol); background: var(--panel); box-shadow: 6px 6px 0 var(--ol); }
:root:not([data-theme="light"])[data-kit="rivals"] body { --ol: #ffd400; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="rivals"] body { --ol: #111; } }
[data-kit="rivals"] .modcard .name { font-family: var(--f-display); font-size: 24px; font-weight: 400; letter-spacing: .03em; }
[data-kit="rivals"] .modcard:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 9px 9px 0 var(--accent); }
[data-kit="rivals"] .modrow:hover, [data-kit="rivals"] .filters a.opt:hover, [data-kit="rivals"] .filters a.opt.on, [data-kit="rivals"] .sw-item:hover, [data-kit="rivals"] .sw-item.on, [data-kit="rivals"] .me-panel a:hover {
  background: #ffd400; color: #111; border-radius: 0; }
[data-kit="rivals"] .filters a.opt:hover .c, [data-kit="rivals"] .filters a.opt.on .c { color: #111; }
[data-kit="rivals"] .btn { border-radius: 0; background: var(--accent); color: var(--accent-ink); border: 3px solid var(--ol); box-shadow: 4px 4px 0 var(--ol); font-family: var(--f-display); font-weight: 400; font-size: 20px; letter-spacing: .05em; transform: skewX(-8deg); }
[data-kit="rivals"] .btn:hover { transform: skewX(-8deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ol); filter: none; }
[data-kit="rivals"] .btn.ghost { background: var(--panel); color: var(--ink); }
[data-kit="rivals"] .tabs a.on::after { background: var(--accent); height: 4px; }
[data-kit="rivals"] .sortbar a { border-radius: 0; }
[data-kit="rivals"] .sortbar a.on { background: #ffd400; color: #111; border-color: #111; }
[data-kit="rivals"] .tag { border-radius: 0; border: 2px solid var(--ol); }
/* the burst */
[data-kit="rivals"] .orn i { width: 22px; height: 22px; border: 0; transform: none; background: var(--accent); clip-path: polygon(50% 0, 61% 32%, 96% 20%, 72% 48%, 100% 72%, 64% 68%, 56% 100%, 44% 70%, 8% 86%, 30% 56%, 0 30%, 38% 34%); }
[data-kit="rivals"] .find input, [data-kit="rivals"] input, [data-kit="rivals"] select, [data-kit="rivals"] textarea { border-radius: 0; }

/* ================= SUBNAUTICA: the PDA. Rounded panels of deep-sea glass with a cyan edge, light rising through
   the water behind, round-cornered buttons that glow cyan, the picked entry lit cyan, a bubble trio as the ornament. */
[data-kit="subnautica"] body { --radius: 10px; --radius-lg: 14px; font-size: 16.5px; }
[data-kit="subnautica"] .backdrop { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), repeating-linear-gradient(100deg, transparent 0 70px, color-mix(in srgb, var(--accent) 3%, transparent) 70px 90px); }
[data-kit="subnautica"] h1, [data-kit="subnautica"] h2, [data-kit="subnautica"] h3 { font-weight: 600; }
[data-kit="subnautica"] h1 { font-size: clamp(34px, 4.6vw, 56px); }
[data-kit="subnautica"] .panel, [data-kit="subnautica"] .modcard, [data-kit="subnautica"] .file, [data-kit="subnautica"] .tier, [data-kit="subnautica"] .tile, [data-kit="subnautica"] .ask {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); backdrop-filter: blur(8px); box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 7%, transparent); }
[data-kit="subnautica"] .modcard { overflow: hidden; }
[data-kit="subnautica"] .modcard .name { font-size: 18px; font-weight: 600; }
[data-kit="subnautica"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 0 24px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-kit="subnautica"] .modrow:hover, [data-kit="subnautica"] .filters a.opt:hover, [data-kit="subnautica"] .filters a.opt.on, [data-kit="subnautica"] .sw-item:hover, [data-kit="subnautica"] .sw-item.on, [data-kit="subnautica"] .me-panel a:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 8px; color: var(--ink); }
[data-kit="subnautica"] .btn { border-radius: 10px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); border: 1px solid var(--accent); font-weight: 600; letter-spacing: .03em; }
[data-kit="subnautica"] .btn:hover { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); filter: none; }
[data-kit="subnautica"] .btn.ghost { background: transparent; border-color: var(--line); }
[data-kit="subnautica"] .tabs a.on::after { background: var(--accent); height: 3px; border-radius: 3px; box-shadow: 0 0 8px var(--accent); }
[data-kit="subnautica"] .sortbar a { border-radius: 8px; }
[data-kit="subnautica"] .sortbar a.on { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); color: var(--ink); }
[data-kit="subnautica"] .tag { border-radius: 8px; }
[data-kit="subnautica"] .orn i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); background: none; transform: none; box-shadow: -13px 5px 0 -2px var(--accent), 12px -5px 0 -3px var(--accent); }
[data-kit="subnautica"] .find input, [data-kit="subnautica"] input, [data-kit="subnautica"] select, [data-kit="subnautica"] textarea { border-radius: 10px; }

/* ================= 7 DAYS TO DIE: scavenged steel. Dark scratched panels with a rust-orange edge and a heavier
   bottom lip, stencilled titles, the picked line marked with rust, hazard stripes as the ornament, square buttons
   like stamped metal plates. */
[data-kit="7d2d"] body { --radius: 0; --radius-lg: 0; --l-track: .08em; font-size: 16.5px; }
[data-kit="7d2d"] .backdrop { background: repeating-linear-gradient(115deg, transparent 0 3px, color-mix(in srgb, var(--ink) 2.5%, transparent) 3px 4px, transparent 4px 17px), var(--grain); }
[data-kit="7d2d"] h1, [data-kit="7d2d"] h2, [data-kit="7d2d"] h3 { font-weight: 400; letter-spacing: .02em; }
[data-kit="7d2d"] h1 { font-size: clamp(34px, 4.8vw, 58px); }
[data-kit="7d2d"] .eyebrow, [data-kit="7d2d"] .tabs a, [data-kit="7d2d"] .filters h3, [data-kit="7d2d"] .field > span, [data-kit="7d2d"] .sortbar a, [data-kit="7d2d"] .tag, [data-kit="7d2d"] .btn { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; }
[data-kit="7d2d"] .panel, [data-kit="7d2d"] .modcard, [data-kit="7d2d"] .file, [data-kit="7d2d"] .tier, [data-kit="7d2d"] .tile, [data-kit="7d2d"] .ask {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-bottom-width: 4px; background: var(--panel) var(--grain); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
[data-kit="7d2d"] .modcard .name { font-family: var(--f-display); font-size: 18px; font-weight: 400; }
[data-kit="7d2d"] .modcard:hover { border-color: var(--accent); }
[data-kit="7d2d"] .modrow:hover, [data-kit="7d2d"] .filters a.opt:hover, [data-kit="7d2d"] .filters a.opt.on, [data-kit="7d2d"] .sw-item:hover, [data-kit="7d2d"] .sw-item.on, [data-kit="7d2d"] .me-panel a:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 4px 0 0 var(--accent); color: var(--ink); }
[data-kit="7d2d"] .btn { border-radius: 0; background: linear-gradient(#3a332b, #26211b); color: var(--ink); border: 1px solid var(--accent); box-shadow: inset 0 -3px 0 rgba(0,0,0,.4); font-weight: 600; font-size: 15px; }
[data-kit="7d2d"] .btn:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
[data-kit="7d2d"] .btn.ghost { background: transparent; border-color: var(--line); }
:root[data-theme="light"][data-kit="7d2d"] .btn { background: linear-gradient(#e9e6df, #d3cfc6); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="7d2d"] .btn { background: linear-gradient(#e9e6df, #d3cfc6); } }
[data-kit="7d2d"] .tabs a.on::after { background: var(--accent); height: 3px; }
[data-kit="7d2d"] .sortbar a { border-radius: 0; }
[data-kit="7d2d"] .sortbar a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-kit="7d2d"] .tag { border-radius: 0; }
[data-kit="7d2d"] .orn i { width: 46px; height: 8px; border: 0; transform: none; background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, #111 6px 12px); }
[data-kit="7d2d"] .find input, [data-kit="7d2d"] input, [data-kit="7d2d"] select, [data-kit="7d2d"] textarea { border-radius: 0; }

/* ================= HELLDIVERS 2: Super Earth's terminal. Black panels with a yellow top edge and cut corners, tall
   condensed capitals, the picked line in a solid yellow bar, chevrons on the open tab, stratagem arrows as the
   ornament. */
[data-kit="helldivers"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .02em; --l-track: .12em; font-size: 16.5px; }
[data-kit="helldivers"] .backdrop { background: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--accent) 3%, transparent) 22px 24px); }
[data-kit="helldivers"] h1, [data-kit="helldivers"] h2, [data-kit="helldivers"] h3 { font-weight: 700; }
[data-kit="helldivers"] h1 { font-size: clamp(38px, 5.2vw, 64px); }
[data-kit="helldivers"] .eyebrow, [data-kit="helldivers"] .tabs a, [data-kit="helldivers"] .filters h3, [data-kit="helldivers"] .field > span, [data-kit="helldivers"] .sortbar a, [data-kit="helldivers"] .tag, [data-kit="helldivers"] .btn { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .1em; }
[data-kit="helldivers"] .panel, [data-kit="helldivers"] .modcard, [data-kit="helldivers"] .file, [data-kit="helldivers"] .tier, [data-kit="helldivers"] .tile, [data-kit="helldivers"] .ask {
  border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--panel);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
:root[data-theme="light"][data-kit="helldivers"] :is(.panel, .modcard, .file, .tier, .tile, .ask) { border-top-color: #e5cf00; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="helldivers"] :is(.panel, .modcard, .file, .tier, .tile, .ask) { border-top-color: #e5cf00; } }
[data-kit="helldivers"] .modcard .name { font-family: var(--f-display); font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
[data-kit="helldivers"] .modcard:hover { border-color: var(--accent); }
[data-kit="helldivers"] .modrow:hover, [data-kit="helldivers"] .filters a.opt:hover, [data-kit="helldivers"] .filters a.opt.on, [data-kit="helldivers"] .sw-item:hover, [data-kit="helldivers"] .sw-item.on, [data-kit="helldivers"] .me-panel a:hover {
  background: #ffe710; color: #0a0a0a; border-radius: 0; }
[data-kit="helldivers"] .filters a.opt:hover .c, [data-kit="helldivers"] .filters a.opt.on .c { color: #0a0a0a; }
[data-kit="helldivers"] .btn { border-radius: 0; background: var(--accent); color: var(--accent-ink); border: 0; font-weight: 700; font-size: 15px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
[data-kit="helldivers"] .btn:hover { filter: brightness(1.12); }
[data-kit="helldivers"] .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
[data-kit="helldivers"] .tabs a.on::before { content: "» "; color: var(--accent); }
[data-kit="helldivers"] .tabs a.on::after { background: var(--accent); height: 2px; }
:root[data-theme="light"][data-kit="helldivers"] .tabs a.on::before { color: #b39f00; }
[data-kit="helldivers"] .sortbar a { border-radius: 0; }
[data-kit="helldivers"] .sortbar a.on { background: #ffe710; color: #0a0a0a; border-color: #ffe710; }
[data-kit="helldivers"] .tag { border-radius: 0; }
/* stratagem arrows */
[data-kit="helldivers"] .orn i { width: auto; height: auto; border: 0; transform: none; background: none; font-style: normal; color: var(--accent); font-size: 14px; letter-spacing: 3px; }
[data-kit="helldivers"] .orn i::before { content: "▲▼◀▶▲"; }
:root[data-theme="light"][data-kit="helldivers"] .orn i { color: #0d0d0d; }
[data-kit="helldivers"] .find input, [data-kit="helldivers"] input, [data-kit="helldivers"] select, [data-kit="helldivers"] textarea { border-radius: 0; }

/* ================= OBLIVION REMASTERED: the remaster's menus. Dark stone panels inside a double gold line with
   small corner flourishes, engraved capitals, the picked entry warmed by a gold wash, the Oblivion gate's shield
   shape as the ornament. */
[data-kit="oblivionr"] body { --radius: 0; --radius-lg: 0; --d-case: uppercase; --d-track: .06em; --l-track: .14em; font-size: 17px; }
[data-kit="oblivionr"] .backdrop { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(217,120,60,.1), transparent 70%), var(--grain); }
[data-kit="oblivionr"] h1, [data-kit="oblivionr"] h2, [data-kit="oblivionr"] h3 { font-weight: 600; }
[data-kit="oblivionr"] h1 { font-size: clamp(32px, 4.4vw, 54px); }
[data-kit="oblivionr"] .panel, [data-kit="oblivionr"] .modcard, [data-kit="oblivionr"] .file, [data-kit="oblivionr"] .tier, [data-kit="oblivionr"] .tile, [data-kit="oblivionr"] .ask {
  position: relative; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: var(--panel);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 22px rgba(0,0,0,.3); }
[data-kit="oblivionr"] .panel::after, [data-kit="oblivionr"] .modcard::after { content: ""; position: absolute; inset: 5px; pointer-events: none;
  background: linear-gradient(var(--accent), var(--accent)) left top / 10px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 1px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right bottom / 10px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 1px 10px no-repeat; opacity: .8; }
[data-kit="oblivionr"] .modcard .name { font-family: var(--f-display); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
[data-kit="oblivionr"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-kit="oblivionr"] .modrow:hover, [data-kit="oblivionr"] .filters a.opt:hover, [data-kit="oblivionr"] .filters a.opt.on, [data-kit="oblivionr"] .sw-item:hover, [data-kit="oblivionr"] .sw-item.on, [data-kit="oblivionr"] .me-panel a:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 85%); color: var(--ink); }
[data-kit="oblivionr"] .btn { border-radius: 0; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); border: 1px solid var(--accent); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }
[data-kit="oblivionr"] .btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); filter: none; }
[data-kit="oblivionr"] .btn.ghost { border-color: var(--line); box-shadow: none; background: transparent; }
[data-kit="oblivionr"] .tabs a.on::after { height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
[data-kit="oblivionr"] .sortbar a { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
[data-kit="oblivionr"] .sortbar a.on { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 15%, transparent); }
[data-kit="oblivionr"] .tag { border-radius: 0; }
/* the gate's shield shape */
[data-kit="oblivionr"] .orn i { width: 12px; height: 14px; border: 1.5px solid var(--accent); background: color-mix(in srgb, #d9783c 30%, transparent); transform: none; border-radius: 0 0 50% 50% / 0 0 70% 70%; }
[data-kit="oblivionr"] .find input, [data-kit="oblivionr"] input, [data-kit="oblivionr"] select, [data-kit="oblivionr"] textarea { border-radius: 0; }

/* ================= DRAGON AGE: INQUISITION: the war table. Deep navy panels with a thin gold border and a gold
   rule under titles, engraved capitals, the picked entry lit gold from the left, the Inquisition's eye as the
   ornament. */
[data-kit="dai"] body { --radius: 1px; --radius-lg: 2px; --d-case: uppercase; --d-track: .05em; --l-track: .14em; font-size: 17.5px; }
[data-kit="dai"] .backdrop { background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), radial-gradient(ellipse 50% 40% at 100% 100%, rgba(40,160,150,.08), transparent 70%), var(--grain); }
[data-kit="dai"] h1, [data-kit="dai"] h2, [data-kit="dai"] h3 { font-weight: 600; }
[data-kit="dai"] h1 { font-size: clamp(32px, 4.4vw, 54px); }
[data-kit="dai"] .section-head h2, [data-kit="dai"] .firsthere h2 { padding-bottom: 6px; background: linear-gradient(90deg, var(--accent), transparent) left bottom / 60% 1px no-repeat; }
[data-kit="dai"] .panel, [data-kit="dai"] .modcard, [data-kit="dai"] .file, [data-kit="dai"] .tier, [data-kit="dai"] .tile, [data-kit="dai"] .ask {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--panel); box-shadow: inset 0 0 40px rgba(0,0,0,.25), 0 8px 22px rgba(0,0,0,.28); }
[data-kit="dai"] .modcard .name { font-family: var(--f-display); font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
[data-kit="dai"] .modcard:hover { border-color: var(--accent); box-shadow: inset 0 0 40px rgba(0,0,0,.25), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent); }
[data-kit="dai"] .modrow:hover, [data-kit="dai"] .filters a.opt:hover, [data-kit="dai"] .filters a.opt.on, [data-kit="dai"] .sw-item:hover, [data-kit="dai"] .sw-item.on, [data-kit="dai"] .me-panel a:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent 85%); box-shadow: inset 2px 0 0 var(--accent); color: var(--ink); }
[data-kit="dai"] .btn { border-radius: 1px; background: linear-gradient(color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel)); color: var(--ink); border: 1px solid var(--accent); font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }
[data-kit="dai"] .btn:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
[data-kit="dai"] .btn.ghost { background: transparent; border-color: var(--line); }
[data-kit="dai"] .tabs a.on::after { background: var(--accent); height: 1px; box-shadow: 0 0 6px var(--accent); }
[data-kit="dai"] .sortbar a { border-radius: 1px; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; }
[data-kit="dai"] .sortbar a.on { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
[data-kit="dai"] .tag { border-radius: 1px; }
/* the Inquisition's eye */
[data-kit="dai"] .orn i { width: 18px; height: 10px; border: 1.5px solid var(--accent); background: radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px); transform: none; border-radius: 50% / 100% 100% 100% 100%; }
[data-kit="dai"] .find input, [data-kit="dai"] input, [data-kit="dai"] select, [data-kit="dai"] textarea { border-radius: 1px; }

/* ================= MINECRAFT: the game's own screens. A dirt-block backdrop, panels like the inventory (flat grey
   with a raised bevel: light top-left edge, dark bottom-right edge, a black outline), stone-grey buttons with the
   same bevel that get a white outline when you point at them, pixel lettering with a hard shadow, a diamond as the
   ornament. */
[data-kit="minecraft"] body { --radius: 0; --radius-lg: 0; font-size: 17px; --mc-bevel: inset 2px 2px 0 rgba(255,255,255,.55), inset -2px -2px 0 rgba(0,0,0,.35); }
[data-kit="minecraft"] .backdrop { background:
  linear-gradient(rgba(0,0,0,.74), rgba(0,0,0,.74)), /* darkened like the game's own option screens, so text reads (Seth, 8 Nov 2026) */
  conic-gradient(from 90deg at 50% 50%, #6b4a2c 25%, #5f4127 0 50%, #6f4f33 0 75%, #644529 0) 0 0 / 32px 32px; }
:root[data-theme="light"][data-kit="minecraft"] .backdrop { background: conic-gradient(from 90deg at 50% 50%, #9c7a55 25%, #8a6a49 0 50%, #a8865f 0 75%, #937250 0) 0 0 / 32px 32px; opacity: .22; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="minecraft"] .backdrop { background: conic-gradient(from 90deg at 50% 50%, #9c7a55 25%, #8a6a49 0 50%, #a8865f 0 75%, #937250 0) 0 0 / 32px 32px; opacity: .22; } }
[data-kit="minecraft"] h1, [data-kit="minecraft"] h2, [data-kit="minecraft"] h3 { font-weight: 600; text-shadow: 3px 3px 0 rgba(0,0,0,.45); }
[data-kit="minecraft"] h1 { font-size: clamp(40px, 5.6vw, 72px); }
[data-kit="minecraft"] .panel, [data-kit="minecraft"] .modcard, [data-kit="minecraft"] .file, [data-kit="minecraft"] .tier, [data-kit="minecraft"] .tile, [data-kit="minecraft"] .ask {
  border: 2px solid #000; background: var(--panel); box-shadow: var(--mc-bevel); }
[data-kit="minecraft"] .panel h2, [data-kit="minecraft"] .panel h3, [data-kit="minecraft"] .modcard .name { text-shadow: none; }
[data-kit="minecraft"] .modcard .name { font-family: var(--f-display); font-size: 19px; font-weight: 600; }
[data-kit="minecraft"] .modcard:hover { outline: 2px solid #fff; outline-offset: -2px; }
[data-kit="minecraft"] .modrow:hover, [data-kit="minecraft"] .filters a.opt:hover, [data-kit="minecraft"] .filters a.opt.on, [data-kit="minecraft"] .sw-item:hover, [data-kit="minecraft"] .sw-item.on, [data-kit="minecraft"] .me-panel a:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
[data-kit="minecraft"] .btn { border-radius: 0; background: #6f6f6f; color: #fff; border: 2px solid #000; box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -4px 0 #4a4a4a; font-family: var(--f-label); font-weight: 500; font-size: 17px; text-shadow: 2px 2px 0 #3a3a3a; }
[data-kit="minecraft"] .btn:hover { background: #7c84b8; box-shadow: inset 2px 2px 0 #bcc4f2, inset -2px -4px 0 #59608a; border-color: #fff; color: #ffffa0; filter: none; }
[data-kit="minecraft"] .btn.ghost { background: #545454; }
[data-kit="minecraft"] .tabs a { font-family: var(--f-label); }
[data-kit="minecraft"] .tabs a.on::after { background: var(--ink); height: 3px; }
[data-kit="minecraft"] .sortbar a { border-radius: 0; font-family: var(--f-label); }
[data-kit="minecraft"] .sortbar a.on { background: #6f6f6f; color: #fff; border-color: #000; box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -2px 0 #4a4a4a; }
[data-kit="minecraft"] .tag { border-radius: 0; font-family: var(--f-label); border-color: #000; }
/* a diamond, in pixels */
[data-kit="minecraft"] .orn i { width: 14px; height: 14px; border: 0; transform: rotate(45deg); background: linear-gradient(135deg, #d6fbff 0 30%, #4ad8e8 30% 70%, #1d8fa0 70%); box-shadow: 0 0 0 2px #0b3a40; }
[data-kit="minecraft"] .find input, [data-kit="minecraft"] input, [data-kit="minecraft"] select, [data-kit="minecraft"] textarea { border-radius: 0; }
[data-kit="minecraft"] .find input { background: #000; color: #e0e0e0; border: 2px solid #a0a0a0; }

/* ================= WORLD OF WARCRAFT: the classic interface. Dark panels inside an ornate gold frame (a gold line,
   a dark gap, a second thinner gold line), gold titles, the famous red buttons with gold lettering, the picked line
   lit gold, a gold gem as the ornament; the quest log's parchment in light. */
[data-kit="wow"] body { --radius: 3px; --radius-lg: 4px; font-size: 17px; --wow-gold: #c79c3e; }
[data-kit="wow"] .backdrop { background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,209,0,.07), transparent 70%), var(--grain); }
[data-kit="wow"] h1, [data-kit="wow"] h2, [data-kit="wow"] h3 { font-weight: 400; color: var(--accent); text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
:root[data-theme="light"][data-kit="wow"] :is(h1, h2, h3) { text-shadow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"])[data-kit="wow"] :is(h1, h2, h3) { text-shadow: none; } }
[data-kit="wow"] h1 { font-size: clamp(36px, 5vw, 60px); }
[data-kit="wow"] .panel, [data-kit="wow"] .modcard, [data-kit="wow"] .file, [data-kit="wow"] .tier, [data-kit="wow"] .tile, [data-kit="wow"] .ask {
  border: 2px solid var(--wow-gold); border-radius: 4px; background: var(--panel);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 4px color-mix(in srgb, var(--wow-gold) 55%, transparent), 0 8px 22px rgba(0,0,0,.35); }
[data-kit="wow"] .modcard .name { font-family: var(--f-display); font-size: 20px; color: var(--accent); }
[data-kit="wow"] .modcard:hover { border-color: #ffd100; box-shadow: inset 0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 4px #ffd100, 0 0 18px rgba(255,209,0,.25); }
[data-kit="wow"] .modrow:hover, [data-kit="wow"] .filters a.opt:hover, [data-kit="wow"] .filters a.opt.on, [data-kit="wow"] .sw-item:hover, [data-kit="wow"] .sw-item.on, [data-kit="wow"] .me-panel a:hover {
  background: linear-gradient(90deg, rgba(255,209,0,.22), transparent 85%); color: var(--ink); }
[data-kit="wow"] .btn { border-radius: 4px; background: linear-gradient(#a10f08, #5e0603); color: #ffd100; border: 1px solid #e2b042; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.35), 0 0 0 1px #2a0603;
  font-family: var(--f-display); font-weight: 400; font-size: 16px; text-shadow: 1px 1px 0 #000; }
[data-kit="wow"] .btn:hover { background: linear-gradient(#c4170d, #760804); color: #fff3b0; filter: none; }
[data-kit="wow"] .btn.ghost { background: linear-gradient(#3a2a18, #22180d); color: #ffd100; }
[data-kit="wow"] .tabs a { font-family: var(--f-display); }
[data-kit="wow"] .tabs a.on { color: var(--accent); }
[data-kit="wow"] .tabs a.on::after { background: var(--wow-gold); height: 2px; }
[data-kit="wow"] .sortbar a { border-radius: 3px; font-family: var(--f-display); }
[data-kit="wow"] .sortbar a.on { background: linear-gradient(#a10f08, #5e0603); color: #ffd100; border-color: #e2b042; }
[data-kit="wow"] .tag { border-radius: 3px; border-color: color-mix(in srgb, var(--wow-gold) 55%, transparent); }
[data-kit="wow"] .orn i { width: 11px; height: 11px; border: 2px solid var(--wow-gold); background: radial-gradient(circle at 35% 35%, #ff6a5a, #9c0e06 70%); transform: rotate(45deg); }
[data-kit="wow"] .orn::before { background: linear-gradient(90deg, transparent, var(--wow-gold)); }
[data-kit="wow"] .orn::after { background: linear-gradient(270deg, transparent, var(--wow-gold)); }
[data-kit="wow"] .find input, [data-kit="wow"] input, [data-kit="wow"] select, [data-kit="wow"] textarea { border-radius: 3px; }

/* pixel lettering draws the "fi" ligature wrong ("first" came out as "Arst"): no ligatures where it is used */
[data-kit="minecraft"] body, [data-kit="stardew"] body { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }

/* every "done" message on every page and game: Modhold's own Pass gold, the same look everywhere (Seth: no green, no grey) */
[data-kit] .notice.good, .notice.good { color: var(--ink); background: rgba(224,168,78,.13); border: 1px solid rgba(224,168,78,.55); border-left: 4px solid #e0a84e; border-radius: 0;
  box-shadow: none; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); font-family: inherit; }
[data-kit] .notice.good .inline, .notice.good .inline { color: #e0a84e; }