/* ============================================================ Tako Wiki — shared design system Per-game palettes are swapped by [data-game] on . ============================================================ */ *, *::before, *::after { box-sizing: border-box; } :root { /* neutral chrome — overridden per game below */ --bg: #100e18; --bg-2: #16131f; --panel: #1c1828; --panel-2: #221d31; --line: #302a42; --line-soft: #262135; --ink: #ece9f4; --ink-2: #b9b2cc; --muted: #8b82a4; --accent: #ffc24b; --accent-ink:#1a1206; --link: #8fd0ff; --good: #58c98a; --warn: #f0a83c; --bad: #e0604c; --r: 10px; --r-sm: 6px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7); --nav-w: 248px; --rail-w: 312px; --topbar-h: 56px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Cross Blitz factions */ --f-war: #e0533f; --f-nature: #63bf59; --f-fortune: #f0c04a; --f-balance: #4fa8e0; --f-chaos: #a86fd6; --f-neutral: #94a0b8; /* rarities */ --r-common: #a8b2c6; --r-rare: #4fa8e0; --r-mythic: #b47ae0; --r-legendary: #f0a83c; } /* ---- Cross Blitz: deep plum night + tavern gold ---- */ [data-game="crossblitz"] { --bg: #100e1a; --bg-2: #171327; --panel: #1d1830; --panel-2: #241e3b; --line: #342c52; --line-soft: #282142; --accent: #ffc24b; --accent-ink:#1c1204; --link: #9ad4ff; --hero-a: #3b2a63; --hero-b: #10101f; } /* ---- Hell Wilds: red mist over scorched dark ---- */ [data-game="hellwilds"] { --bg: #120c0c; --bg-2: #191010; --panel: #1f1414; --panel-2: #281a19; --line: #422626; --line-soft: #331d1d; --ink: #f0e6e2; --ink-2: #cbb3ad; --muted: #9c827c; --accent: #d9563a; --accent-ink:#1a0a06; --link: #f0a07c; --hero-a: #5c1d18; --hero-b: #140b0b; } /* ---- Candies 'n Curses: haunted mansion, candy pink ---- */ [data-game="candies"] { --bg: #140d1e; --bg-2: #1b1229; --panel: #221634; --panel-2: #2b1c41; --line: #402a5e; --line-soft: #33214c; --ink: #f2e9fb; --ink-2: #c6b4dd; --muted: #9481b0; --accent: #ff7ac0; --accent-ink:#2a0518; --link: #ffb0d8; --hero-a: #4d2159; --hero-b: #150d20; } /* ---- Studio hub: cool ink ---- */ [data-game="tako"] { --bg: #0d0f14; --bg-2: #12151c; --panel: #171b24; --panel-2: #1d222d; --line: #2a3140; --line-soft: #222836; --accent: #57d1c9; --accent-ink:#04211f; --link: #8fd0ff; --hero-a: #1d3b46; --hero-b: #0b0e13; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.62 var(--sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } .px { image-rendering: pixelated; image-rendering: crisp-edges; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.22; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; } h1 { font-size: 30px; letter-spacing: -.02em; } h2 { font-size: 21px; margin-top: 2em; padding-bottom: .38em; border-bottom: 1px solid var(--line); } h3 { font-size: 16.5px; margin-top: 1.7em; color: var(--ink); } p { margin: 0 0 1em; color: var(--ink-2); } code, .mono { font-family: var(--mono); font-size: .88em; } code { background: var(--panel-2); border: 1px solid var(--line-soft); padding: .1em .38em; border-radius: 4px; color: var(--ink); } hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } /* ============================ top bar ============================ */ .topbar { position: sticky; top: 0; z-index: 60; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 750; color: var(--ink); letter-spacing: -.02em; } .brand:hover { text-decoration: none; } .brand .mark { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; font-size: 15px; background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ff4f9a)); color: var(--accent-ink); } .brand .sub { color: var(--muted); font-weight: 500; } .topnav { display: flex; gap: 2px; margin-left: 6px; } .topnav a { padding: 6px 11px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 13.5px; font-weight: 550; } .topnav a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; } .topnav a.on { background: var(--panel-2); color: var(--accent); } .spacer { flex: 1; } .search { position: relative; width: min(360px, 38vw); } .search input { width: 100%; padding: 7px 11px 7px 32px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13.5px; outline: none; } .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; } .search-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); max-height: 60vh; overflow: auto; display: none; padding: 5px; } .search-pop.open { display: block; } .search-pop a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink); font-size: 13.5px; } .search-pop a:hover, .search-pop a.cursor { background: var(--panel-2); text-decoration: none; } .search-pop img { width: 26px; flex: none; } .search-pop .kind { margin-left: auto; color: var(--muted); font-size: 11.5px; } .search-pop .none { padding: 12px; color: var(--muted); font-size: 13px; } /* ============================ shell ============================ */ .shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--rail-w); gap: 34px; max-width: 1560px; margin: 0 auto; padding: 26px 22px 90px; align-items: start; } .shell.no-rail { grid-template-columns: var(--nav-w) minmax(0, 1fr); } .shell.wide { grid-template-columns: var(--nav-w) minmax(0, 1fr); max-width: 1760px; } .shell.solo { grid-template-columns: minmax(0, 1fr); max-width: 1180px; } /* ---------------- side nav ---------------- */ /* The nav is taller than the viewport on most pages. Give it its own scroll region so you can reach the bottom of it without first scrolling the article. */ .nav { position: sticky; top: calc(var(--topbar-h) + 20px); max-height: calc(100vh - var(--topbar-h) - 34px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; font-size: 13.5px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .nav::-webkit-scrollbar { width: 8px; } .nav::-webkit-scrollbar-track { background: transparent; } .nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; } .nav::-webkit-scrollbar-thumb:hover { background: var(--muted); } .nav .group { margin-bottom: 20px; } .nav .glabel { font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 9px; margin-bottom: 6px; } .nav a { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: var(--r-sm); color: var(--ink-2); border-left: 2px solid transparent; } .nav a:hover { background: var(--panel); color: var(--ink); text-decoration: none; } .nav a.on { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-left-color: var(--accent); font-weight: 600; } .nav .count { margin-left: auto; color: var(--muted); font-size: 11.5px; font-family: var(--mono); } /* Not-yet-built sections: deliberately not link-shaped. */ .nav .todo { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 9px 0; } .nav .todo-i { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 5px; padding: 1.5px 6px; cursor: default; } .nav .todo-i .count { margin: 0; font-size: 10px; opacity: .75; } .nav .todo-note { padding: 8px 9px 0; font-size: 11px; line-height: 1.45; color: var(--muted); opacity: .8; } /* ---------------- right rail ---------------- */ .rail { position: sticky; top: calc(var(--topbar-h) + 20px); max-height: calc(100vh - var(--topbar-h) - 34px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; display: grid; gap: 16px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .rail::-webkit-scrollbar { width: 8px; } .rail::-webkit-scrollbar-track { background: transparent; } .rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; } .rail::-webkit-scrollbar-thumb:hover { background: var(--muted); } .infobox { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); } .infobox .ib-head { padding: 11px 14px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--accent) 13%, transparent); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; } .infobox .ib-art { padding: 16px; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); } .infobox .ib-art img { width: 168px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)); } .infobox dl { margin: 0; padding: 4px 0 8px; } .infobox .row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 5.5px 14px; font-size: 13px; align-items: baseline; } .infobox .row + .row { border-top: 1px solid var(--line-soft); } .infobox dt { color: var(--muted); } .infobox dd { margin: 0; color: var(--ink); } .toc { font-size: 13px; } .toc .glabel { font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .toc a { display: block; padding: 3.5px 10px; color: var(--ink-2); border-left: 2px solid var(--line); } .toc a:hover { color: var(--ink); border-left-color: var(--accent); text-decoration: none; } /* ============================ hero ============================ */ .hero { border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(90% 130% at 88% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%), linear-gradient(150deg, var(--hero-a, var(--panel-2)), var(--hero-b, var(--bg-2))); padding: 26px 28px; margin-bottom: 8px; position: relative; overflow: hidden; } .hero h1 { font-size: 34px; margin-bottom: 8px; } .hero p { max-width: 62ch; color: var(--ink-2); margin-bottom: 0; } .hero .eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; } /* ---- brand mark ---- */ .brand .mark-img { width: 26px; height: 26px; flex: none; object-fit: cover; display: block; border-radius: 7px; } /* ---- game hero: logo + copy on the left, one strong asset on the right ---- */ .gamehero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px; margin-bottom: 8px; overflow: hidden; background: linear-gradient(150deg, var(--hero-a), var(--hero-b)); } /* 128x116 source — only ever 2x or 1x, never a fractional shrink */ .gamehero-logo { width: 256px; height: 232px; max-width: none; flex: none; margin-bottom: 18px; } @media (max-width: 1080px) { .gamehero-logo { width: 128px; height: 116px; } } .gamehero-copy p { max-width: 56ch; margin-bottom: 0; } .gamehero-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; } .gamehero-art { display: grid; place-items: center; } @media (max-width: 900px) { .gamehero { grid-template-columns: 1fr; padding: 24px; } .gamehero-art { display: none; } } /* 214x144 still, integer 2x in the hero and 1x in a category tile */ .mansion { width: 428px; height: 288px; background: url(../img/cnc/mansion.png) no-repeat center / 428px 288px; image-rendering: pixelated; } /* exact 1/2 of the source (214x144), so every output pixel samples the grid uniformly — never a fractional transform */ .mansion-sm { width: 107px; height: 72px; background: url(../img/cnc/mansion.png) no-repeat center / 107px 72px; image-rendering: pixelated; } .gamehero-key { width: 420px; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); } @media (max-width: 1200px) { .gamehero-art { display: none; } } /* ---- category grid ---- */ .catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; margin-top: 18px; } .catcard { display: grid; grid-template-rows: 116px auto; color: inherit; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); transition: transform .13s ease, border-color .13s ease; } .catcard:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; } .catcard-art { display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); } .catcard-body { padding: 12px 14px 14px; } .catcard-body h3 { margin: 0 0 4px; font-size: 14.5px; color: var(--ink); display: flex; align-items: baseline; gap: 8px; } .catcard-body h3 .n { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-weight: 500; } .catcard-body p { margin: 0; font-size: 12.5px; line-height: 1.45; } /* ---- section cards: one deliberate asset each ---- */ .sectiongrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; margin-top: 18px; } .sectioncard { display: grid; grid-template-rows: 132px auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); color: inherit; transition: transform .13s ease, border-color .13s ease; } .sectioncard:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; } .sectioncard-art { display: grid; place-items: center; background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), linear-gradient(180deg, var(--panel-2), var(--panel)); border-bottom: 1px solid var(--line-soft); } .sectioncard-body { padding: 14px 16px 16px; } .sectioncard-body h3 { margin: 0 0 5px; font-size: 16px; color: var(--ink); display: flex; align-items: baseline; gap: 8px; } .sectioncard-body h3 .n { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 500; } .sectioncard-body p { margin: 0; font-size: 13px; line-height: 1.5; } /* ---- simple page header (no art, just hierarchy) ---- */ .pagehead { margin-bottom: 22px; } .pagehead h1 { font-size: 29px; margin-bottom: 10px; } .pagehead .lede { margin-bottom: 0; } /* ---- flashlight showcase ---- */ .flashgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 16px 0; } .flashcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .flashcard-art { display: grid; place-items: center; } .flashcard-body b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 6px; } .flashcard-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .flashcard-body p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .flashcard-foot { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); } /* ---- entry detail pages ---- */ .detailhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px; margin-bottom: 20px; background: linear-gradient(150deg, var(--hero-a), var(--hero-b)); } .detailhead-art { display: grid; place-items: center; min-width: 200px; min-height: 160px; } .detailhead h1 { font-size: 30px; margin-bottom: 10px; } .detailhead .lede { margin-bottom: 8px; } .flavour { margin: 0; font-size: 13.5px; font-style: italic; color: var(--muted); max-width: 62ch; } @media (max-width: 800px) { .detailhead { grid-template-columns: 1fr; padding: 22px; } .detailhead-art { min-width: 0; } } /* a strip of neighbours at the foot of a detail page */ .entrystrip { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; } .entrychip { display: grid; justify-items: center; gap: 6px; width: 104px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink-2); font-size: 11.5px; text-align: center; line-height: 1.3; } .entrychip:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; } a.critcard, a.flashcard { color: inherit; } a.critcard:hover, a.flashcard:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); } a.critcard, a.flashcard { transition: transform .13s ease, border-color .13s ease; } /* costume line-up (320x114 source, integer 2x) */ .costume-lineup { /* 306x108 source, integer 2x */ box-sizing: content-box; /* a border must never eat into the pixel grid */ width: 612px; height: 216px; max-width: none; image-rendering: pixelated; border-radius: 10px; outline: 1px solid var(--line); outline-offset: -1px; margin: 16px 0; } @media (max-width: 760px) { .costume-lineup { width: 306px; height: 108px; } } /* ---- art row: a few large renders side by side, each captioned ---- */ .artrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 18px 0; } .artrow figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px 14px; } .artrow figure > img, .artrow figure > .spr { margin-top: auto; } .artrow figcaption { font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; display: flex; flex-direction: column; gap: 2px; } .artrow figcaption span { font-weight: 400; font-size: 11.5px; color: var(--muted); } /* ---- creature cards (ghosts, bosses, NPCs) ---- */ .critgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 18px 0; } .critgrid.big { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .critcard { display: grid; grid-template-rows: 128px auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); } .critcard.big { grid-template-rows: 160px auto; } .critcard-art { display: grid; place-items: center; border-bottom: 1px solid var(--line-soft); background: radial-gradient(65% 100% at 50% 100%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 74%); } .critcard-body { padding: 13px 15px 15px; } .critcard-body b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 7px; } .critcard-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .critcard-role { display: inline-block; font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: -2px 0 8px; } .critcard-body p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .critcard-stats { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); } /* ---- costumes (36x36 source) ---- */ .costume { width: 72px; height: 72px; image-rendering: pixelated; } .costume2 { width: 108px; height: 108px; image-rendering: pixelated; } .costumegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; margin: 18px 0; } .costumecard { display: grid; justify-items: center; gap: 8px; padding: 18px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: center; } .costumecard b { font-size: 13.5px; color: var(--ink); } .costumecard code { font-size: 11px; } .iconrow { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; } .iconrow-item { display: grid; justify-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); } /* ---- boss cards ---- */ .bossgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 16px 0; } .bosscard { display: grid; grid-template-rows: 132px auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); } .bosscard-art { display: grid; place-items: center; border-bottom: 1px solid var(--line-soft); background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); } .bosscard-body { padding: 13px 15px 15px; } .bosscard-body b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 7px; } .bosscard-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .bosscard-body p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bosscard-stats { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); } /* ---- cast cards ---- */ .castgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 14px; margin: 16px 0; } .castcard { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .castcard-art { display: grid; place-items: center; } .castcard-body b { display: block; font-size: 14.5px; color: var(--ink); } .castcard-role { display: inline-block; font-size: 11px; color: var(--accent); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; margin: 3px 0 7px; } .castcard-body p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .castcard-likes { font-size: 11.5px; color: var(--muted); } /* ---- hero banner ---- */ .herobanner { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; background: radial-gradient(70% 130% at 12% 50%, color-mix(in srgb, var(--fc) 34%, transparent), transparent 62%), linear-gradient(150deg, var(--hero-a), var(--hero-b)); } .herobanner .hb-art { width: 132px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)); } @media (max-width: 640px) { .herobanner { grid-template-columns: 1fr; } .herobanner .hb-art { width: 96px; } } /* ---- level tree ladder ---- */ .tree .ladder { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; } .tree .ladder li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: center; } .tree .lv { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 750; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); } .tree .rw { display: flex; align-items: center; gap: 9px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 4px 9px 4px 5px; color: var(--ink); } a.rw:hover { border-color: var(--accent); text-decoration: none; } .tree .rw b { display: block; font-size: 12.5px; font-weight: 620; line-height: 1.25; } .tree .rw em { display: block; font-size: 11px; color: var(--muted); font-style: normal; } .tree .hpup { width: 34px; height: 34px; display: grid; place-items: center; flex: none; color: var(--good); font-size: 16px; font-weight: 700; } /* ---- collapsible voice-line groups ---- */ .vgroup { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); margin-bottom: 7px; } .vgroup summary { cursor: pointer; padding: 8px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 9px; } .vgroup summary::-webkit-details-marker { display: none; } .vgroup summary::before { content: '▸'; color: var(--muted); font-size: 11px; } .vgroup[open] summary::before { content: '▾'; } .vgroup summary .n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); } .vgroup .vlines { padding: 0 13px 10px 31px; display: grid; gap: 5px; } .vgroup .vl { display: grid; grid-template-columns: 82px 1fr; gap: 10px; font-size: 13px; } .vgroup .emo { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); padding-top: 2px; } .vgroup .vl span:last-child { color: var(--ink-2); } /* ---- cutscene script ---- */ .script { display: grid; gap: 7px; margin: 12px 0; } .script .ln { display: grid; grid-template-columns: 116px 1fr; gap: 12px; font-size: 13.5px; } .script .sp { color: var(--accent); font-weight: 650; text-align: right; } .script .tx2 { color: var(--ink-2); } @media (max-width: 620px) { .script .ln { grid-template-columns: 1fr; gap: 1px; } .script .sp { text-align: left; } } /* ---- objective checklist ---- */ .steps { list-style: none; margin: 10px 0; padding: 0; counter-reset: s; display: grid; gap: 5px; } .steps li { counter-increment: s; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--ink-2); } .steps li::before { content: counter(s); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-family: var(--mono); font-size: 10.5px; font-weight: 750; } /* ============================ bits ============================ */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2.5px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); white-space: nowrap; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .chip[data-f="War"] { color: var(--f-war); border-color: color-mix(in srgb, var(--f-war) 40%, transparent); background: color-mix(in srgb, var(--f-war) 13%, transparent); } .chip[data-f="Nature"] { color: var(--f-nature); border-color: color-mix(in srgb, var(--f-nature) 40%, transparent); background: color-mix(in srgb, var(--f-nature) 13%, transparent); } .chip[data-f="Fortune"] { color: var(--f-fortune); border-color: color-mix(in srgb, var(--f-fortune) 40%, transparent); background: color-mix(in srgb, var(--f-fortune) 13%, transparent); } .chip[data-f="Balance"] { color: var(--f-balance); border-color: color-mix(in srgb, var(--f-balance) 40%, transparent); background: color-mix(in srgb, var(--f-balance) 13%, transparent); } .chip[data-f="Chaos"] { color: var(--f-chaos); border-color: color-mix(in srgb, var(--f-chaos) 40%, transparent); background: color-mix(in srgb, var(--f-chaos) 13%, transparent); } .chip[data-f="Neutral"] { color: var(--f-neutral); border-color: color-mix(in srgb, var(--f-neutral) 40%, transparent); background: color-mix(in srgb, var(--f-neutral) 13%, transparent); } .chip[data-r="Common"] { color: var(--r-common); } .chip[data-r="Rare"] { color: var(--r-rare); } .chip[data-r="Mythic"] { color: var(--r-mythic); } .chip[data-r="Legendary"] { color: var(--r-legendary); } .lede { font-size: 16.5px; color: var(--ink-2); max-width: 68ch; } .note { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 11px 15px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13.5px; color: var(--ink-2); margin: 1.2em 0; } .note strong { color: var(--ink); } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 650; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; } .btn:hover { border-color: var(--accent); text-decoration: none; } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ============================ tables ============================ */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.tbl th { text-align: left; padding: 9px 13px; font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; white-space: nowrap; } table.tbl td { padding: 8px 13px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: middle; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl tbody tr:hover { background: var(--panel-2); } table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--mono); font-size: 12.5px; } table.tbl .name { color: var(--ink); font-weight: 620; } /* ============================ stat tiles ============================ */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 18px 0; } .tile { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; } .tile .k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .tile .v { font-size: 25px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); margin-top: 3px; font-variant-numeric: tabular-nums; } .tile .d { font-size: 12px; color: var(--muted); margin-top: 1px; } .tile .v.accent { color: var(--accent); } /* ============================ card grid ============================ */ .toolbar { position: sticky; top: var(--topbar-h); z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 12px 0 11px; margin-bottom: 18px; } .filters { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .filters + .filters { margin-top: 8px; } .flabel { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); width: 58px; flex: none; } .tog { padding: 4px 10px; border-radius: 999px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 620; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); } .tog:hover { border-color: var(--muted); color: var(--ink); } .tog.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .tog.on[data-f="War"] { background: var(--f-war); border-color: var(--f-war); color: #fff; } .tog.on[data-f="Nature"] { background: var(--f-nature); border-color: var(--f-nature); color: #06210a; } .tog.on[data-f="Fortune"] { background: var(--f-fortune); border-color: var(--f-fortune); color: #241a02; } .tog.on[data-f="Balance"] { background: var(--f-balance); border-color: var(--f-balance); color: #041b2a; } .tog.on[data-f="Chaos"] { background: var(--f-chaos); border-color: var(--f-chaos); color: #fff; } .tog.on[data-f="Neutral"] { background: var(--f-neutral); border-color: var(--f-neutral); color: #10151f; } select.sel, input.txt { padding: 5px 9px; border-radius: 7px; font: inherit; font-size: 12.5px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); outline: none; } select.sel:focus, input.txt:focus { border-color: var(--accent); } .resultbar { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 14px; } .resultbar b { color: var(--ink); font-variant-numeric: tabular-nums; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 16px; } .cardcell { position: relative; display: block; text-align: center; border-radius: var(--r); padding: 8px 6px 9px; border: 1px solid transparent; background: transparent; transition: transform .11s ease, background .11s ease, border-color .11s ease; } .cardcell:hover { transform: translateY(-3px); background: var(--panel); border-color: var(--line); text-decoration: none; box-shadow: var(--shadow); } .cardcell > img { width: 100%; max-width: 132px; margin: 0 auto 7px; } .cardcell .cname { font-size: 12.5px; font-weight: 640; color: var(--ink); line-height: 1.3; } .cardcell .cmeta { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--mono); } /* ---- card face ---------------------------------------------------- 388 of 600 cards have an exported 168x202 render (the Feb-2024 zip); those render as a plain . The rest are composited from portrait art + card data at the same aspect ratio so the grid stays uniform and every card shows its rules text without a click. */ .cardface { position: relative; aspect-ratio: 168 / 202; margin-bottom: 8px; } .cardface > img.render { width: 100%; height: 100%; object-fit: contain; margin: 0; } .ctile { position: relative; aspect-ratio: 168 / 202; margin-bottom: 8px; overflow: hidden; border-radius: 7px; display: flex; flex-direction: column; padding: 15% 7% 6%; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 34%, #2a2018), #241b15 55%); border: 2px solid #5d4630; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); } .cardcell:hover .ctile { border-color: var(--rc); } /* art window */ .ctile .art { flex: 0 0 34%; border-radius: 3px; overflow: hidden; position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 55%, #1a1410), #1a1410); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); } .ctile .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 55%; margin: 0; padding: 3% 6% 0; } /* name plate */ .ctile .np { margin-top: 3px; border-radius: 2px; background: #e6d9b0; color: #3a2a17; font-size: 8.5px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; text-align: center; padding: 2px 3px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* rules text box */ .ctile .tx { flex: 1 1 auto; margin-top: 3px; border-radius: 2px; overflow: hidden; background: #d9caa0; color: #3d2d19; font-size: 7.6px; line-height: 1.28; padding: 4px 4px; text-align: center; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); } .ctile .tx span { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .ctile .tx.empty { color: #8b7a5c; font-style: italic; } .ctile .cost, .ctile .pw, .ctile .hp, .ctile .wr { position: absolute; font-family: var(--mono); font-weight: 800; line-height: 1; display: grid; place-items: center; } .ctile .cost { top: 2%; left: 50%; transform: translateX(-50%); width: 15%; aspect-ratio: 1; border-radius: 4px; font-size: 9.5px; color: #fff; background: radial-gradient(circle at 35% 30%, #c79ae8, #7b3fb0 72%); box-shadow: 0 1px 3px rgba(0,0,0,.7); } .ctile .pw, .ctile .hp { top: 5%; width: 15%; aspect-ratio: 1; border-radius: 4px; font-size: 9.5px; box-shadow: 0 1px 3px rgba(0,0,0,.7); } .ctile .pw { left: 4%; background: radial-gradient(circle at 35% 30%, #ffcb6e, #d1861a 72%); color: #33200a; } .ctile .hp { right: 4%; background: radial-gradient(circle at 35% 30%, #ff9d8c, #c53f30 72%); color: #fff; } .ctile .kindtag { position: absolute; top: 6%; right: 4%; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #f0e4c0; background: rgba(0,0,0,.6); padding: 2px 4px; border-radius: 3px; } /* win-rate badge sits on either face */ .cardface .wr, .ctile .wr { position: absolute; top: 4px; right: 4px; z-index: 2; font-family: var(--mono); font-weight: 750; font-size: 10px; padding: 2px 5px; border-radius: 5px; background: rgba(0,0,0,.78); border: 1px solid rgba(255,255,255,.16); } /* larger variant for the card page infobox */ .ctile.big { width: 190px; margin: 0; } .ctile.big .np { font-size: 10px; padding: 3px 4px; } .ctile.big .tx { font-size: 9.2px; line-height: 1.35; } .ctile.big .cost, .ctile.big .pw, .ctile.big .hp { font-size: 12px; } .wr-hi { color: var(--good); } .wr-mid { color: var(--warn); } .wr-lo { color: var(--bad); } .empty { padding: 60px 20px; text-align: center; color: var(--muted); } /* ---- tag cloud ---- */ .cloud { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .cloud .cl { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); } .cloud .cl:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; } .cloud .cl span { font-family: var(--mono); font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 7px; } /* ---- cutscene browser ---- */ .scenelist { display: grid; gap: 6px; max-height: 62vh; overflow: auto; padding-right: 4px; } .scenelist a { display: block; padding: 7px 11px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--panel); color: var(--ink-2); font-size: 13px; } .scenelist a:hover { border-color: var(--accent); text-decoration: none; } .scenelist a.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); } .scenelist a b { display: block; color: var(--ink); font-weight: 620; } .scenelist a em { font-style: normal; font-size: 11.5px; color: var(--muted); } .scenepane { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 18px; align-items: start; } @media (max-width: 860px) { .scenepane { grid-template-columns: 1fr; } } /* ==================== pixel art ===================================== One rule for every piece of pixel art on the site: never resample, only integer-scale. `--k` is the multiplier, so two assets sitting next to each other share an apparent pixel size regardless of their source dimensions. Physical size is allowed to differ — that is what keeps density honest. */ .pxa { image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; display: block; max-width: none; /* never let a container rescale pixel art */ flex: none; box-sizing: content-box; /* a border must not eat into the pixel grid */ } /* fixed integer steps; pick the tier, never a free-form width */ .pxa[data-k="1"] { zoom: 1; } .px1 { --k: 1; } .px2 { --k: 2; } .px3 { --k: 3; } .px4 { --k: 4; } /* sprite strips: one row, only frames that contain artwork (see pngtool.py) */ .spr { --cw: 32; --ch: 32; --cols: 1; --k: 3; --dur: .9; width: calc(var(--cw) * var(--k) * 1px); height: calc(var(--ch) * var(--k) * 1px); background-repeat: no-repeat; background-size: calc(var(--cols) * var(--cw) * var(--k) * 1px) 100%; image-rendering: pixelated; animation: spr-x calc(var(--dur) * 1s) steps(var(--cols)) infinite; } @keyframes spr-x { to { background-position-x: calc(var(--cols) * var(--cw) * var(--k) * -1px); } } .spr.still { animation: none; } @media (prefers-reduced-motion: reduce) { .spr { animation: none; } } /* a sprite centred in a fixed cell keeps rows from jumping around */ .sprbox { display: grid; place-items: center; } .sprbox.h48 { height: 48px; } .sprbox.h72 { height: 72px; } .sprbox.h112 { height: 112px; } /* fixed tiers per art source — 24x24 icons at 2x, 33x33 journal at 2x/3x, 96x96 flashlight showcase at 1x/2x. Never a free-form width. */ .icon24 { width: 48px; height: 48px; image-rendering: pixelated; } .icon3 { width: 72px; height: 72px; image-rendering: pixelated; } .jrn2 { width: 66px; height: 66px; image-rendering: pixelated; } .jrn3 { width: 99px; height: 99px; image-rendering: pixelated; } /* 96x96 flashlight showcase art */ .flash1 { width: 96px; height: 96px; image-rendering: pixelated; } .flash2 { width: 192px; height: 192px; image-rendering: pixelated; } td.art { width: 78px; padding: 4px 8px; } .muted-cell { color: var(--muted); } td.art > * { margin: 0 auto; } .noart { width: 40px; height: 40px; border-radius: 8px; margin: 0 auto; border: 1px dashed var(--line); opacity: .5; } /* dense variant so long reference tables fit more on screen */ table.tbl.dense td { padding: 5px 11px; } table.tbl.dense th { padding: 7px 11px; } /* ============================ charts ============================ */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; } .panel h3 { margin: 0 0 2px; font-size: 14.5px; } .panel .sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; } .cols { display: grid; gap: 16px; } .cols.two { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); } .bars { display: grid; gap: 7px; } .bar { display: grid; grid-template-columns: 132px 1fr 54px; gap: 10px; align-items: center; font-size: 12.5px; } .bar .bl { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar .bt { height: 9px; border-radius: 999px; background: var(--panel-2); overflow: hidden; } .bar .bf { height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, transparent), var(--accent)); } .bar .bv { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink); } svg.chart { width: 100%; height: auto; display: block; overflow: visible; } svg.chart text { fill: var(--muted); font-size: 10px; font-family: var(--sans); } svg.chart .grid-l { stroke: var(--line-soft); stroke-width: 1; } svg.chart .axis { stroke: var(--line); stroke-width: 1; } .spark-wrap { display: flex; align-items: center; gap: 12px; } .legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 10px; } .legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; } .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--good); } .live.off { color: var(--muted); } /* loading + empty states so a panel never looks broken while it waits */ .skel { display: grid; gap: 8px; padding: 6px 0; } .skel-row { height: 14px; border-radius: 5px; background: linear-gradient(90deg, var(--panel-2) 25%, var(--line) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; } .skel-row:nth-child(2) { width: 82%; } .skel-row:nth-child(3) { width: 91%; } .skel-row:nth-child(4) { width: 68%; } @keyframes skel { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skel-row { animation: none; } } .live-empty { display: grid; gap: 5px; padding: 30px 20px; } .live-empty b { color: var(--ink-2); font-size: 13.5px; } .live-empty span { font-size: 12.5px; } .live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 70%, transparent); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .live .pulse { animation: none; } .cardcell, .gamecard { transition: none; } } /* ============================ studio hub ============================ */ .studiohero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px; margin-bottom: 8px; background: linear-gradient(150deg, var(--hero-a), var(--hero-b)); } .studiohero-logo { width: 108px; height: auto; flex: none; } .studiohero h1 { font-size: 32px; margin-bottom: 8px; } .studiohero p { max-width: 64ch; margin-bottom: 0; } .studiohero-url { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--accent); letter-spacing: .01em; } @media (max-width: 720px) { .studiohero { grid-template-columns: 1fr; padding: 24px; } .studiohero-logo { width: 76px; } } /* game cards: key art on top, app icon + copy beneath */ .wikigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; margin-top: 20px; } .wikicard { display: block; color: inherit; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: transform .13s ease, border-color .13s ease; } a.wikicard:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; } .wikicard-art { aspect-ratio: 2 / 1; overflow: hidden; border-bottom: 1px solid var(--line); } .wikicard-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .wikicard-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px; } .wikicard-icon { width: 64px; height: 64px; border-radius: 14px; flex: none; border: 1px solid var(--line); object-fit: cover; } .wikicard-icon.placeholder { display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-weight: 750; font-size: 17px; letter-spacing: .04em; } .wikicard-text h3 { margin: 0 0 5px; font-size: 18px; color: var(--ink); } .wikicard-text p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; } .wikicard-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); font-family: var(--mono); } .wikicard.muted { opacity: .6; } .wikicard.muted:hover { transform: none; border-color: var(--line); } /* ============================ hub (legacy cards) ============================ */ .gamegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 22px; } .gamecard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); display: block; color: inherit; transition: transform .13s ease, border-color .13s ease; } .gamecard:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); } .gamecard .banner { height: 132px; display: grid; place-items: center; position: relative; overflow: hidden; } .gamecard .banner img { height: 100%; width: 100%; object-fit: cover; opacity: .9; } .gamecard .body { padding: 15px 17px 17px; } .gamecard h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); } .gamecard p { font-size: 13px; margin: 0 0 10px; } .gamecard .stats { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); } .gamecard.soon { opacity: .55; } .gamecard.soon:hover { transform: none; border-color: var(--line); } /* ============================ responsive ============================ */ @media (max-width: 1280px) { .shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); } .rail { display: none; } .shell.show-rail { grid-template-columns: minmax(0, 1fr); } .shell.show-rail .rail { display: grid; position: static; max-height: none; overflow: visible; } } @media (max-width: 900px) { .shell, .shell.no-rail, .shell.wide { grid-template-columns: minmax(0, 1fr); gap: 20px; } .rail { position: static; max-height: none; overflow: visible; padding-right: 0; } .nav { position: static; max-height: none; overflow: visible; padding-right: 0; display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .nav .group { margin: 0; display: contents; } .nav .glabel { display: none; } .nav a { border-left: 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; } .nav .count { display: none; } .topnav { display: none; } .search { width: auto; flex: 1; } .hero h1 { font-size: 26px; } .bar { grid-template-columns: 96px 1fr 46px; } }