/* TweakFC Rotordex — public pages. Same Brand Cartridge identity as the game (css/brand.css): putty shell,
   LCD-green screens, one orange action, pixel type. */
:root { --bg: var(--tfc-shell); --panel: var(--tfc-shell-hi); --panel2: var(--tfc-shell-light); --line: rgba(var(--tfc-tint), 0.25); --text: var(--tfc-ink); --muted: var(--tfc-muted); --amber: var(--tfc-accent); --warn: var(--tfc-accent);
  --display: var(--tfc-font-display); --sans: var(--tfc-font-body); --mono: var(--tfc-font-data); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg) var(--tfc-dots); color: var(--text); font: 16px/1.5 var(--sans); }
a { color: var(--amber); text-decoration: none; } a:hover { text-decoration: underline; }
main { max-width: 1240px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font: 700 40px/1.1 var(--display); margin: 8px 0 12px; letter-spacing: .01em; }
h2 { font: 600 20px var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 34px 0 12px; }
.hidden { display: none !important; }
.rx-top { display: flex; gap: 18px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--tfc-shell); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.rx-brand { font: 700 22px var(--display); color: var(--text); letter-spacing: .04em; } .rx-brand span { color: var(--amber); } .rx-brand b { font: 600 13px var(--display); letter-spacing: .2em; color: var(--muted); margin-left: 6px; }
.rx-search { flex: 1; display: flex; gap: 6px; min-width: 240px; }
.rx-search input, .rx-filters input, .rx-filters select, .rx-form input, .rx-form select, .rx-form textarea, .rx-reviewform input, .rx-reviewform select {
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 0; padding: 9px 12px; font: 14px var(--sans); }
.rx-search input { flex: 1; }
button, .rx-btn { background: var(--amber); color: var(--tfc-ink); border: 0; border-radius: 0; padding: 9px 16px; font: 600 14px var(--display); letter-spacing: .04em; cursor: pointer; display: inline-block; }
.rx-btn.ghost, .rx-views button { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.rx-top nav { display: flex; gap: 14px; } .rx-top nav a { color: var(--muted); } .rx-top .rx-play { color: var(--amber); font-weight: 600; }
.rx-hero p { max-width: 760px; color: var(--muted); font-size: 17px; }
.rx-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.rx-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 12px 18px; min-width: 130px; }
.rx-stats b { display: block; font: 700 30px var(--mono); color: var(--amber); } .rx-stats span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.rx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rx-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 14px; color: var(--text); display: grid; gap: 2px; }
.rx-tile b { font-size: 26px; color: var(--amber); } .rx-tile em { font: 500 13px var(--mono); color: var(--muted); font-style: normal; } .rx-tile:hover { border-color: var(--amber); text-decoration: none; }
.rx-eras { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rx-era { background: linear-gradient(135deg, var(--tfc-shell-light), var(--tfc-shell-light)); border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; color: var(--text); }
.rx-era b { font: 600 18px var(--display); } .rx-era span { float: right; font: 13px var(--mono); color: var(--amber); } .rx-era p { color: var(--muted); margin: 6px 0 0; font-size: 14px; }
.rx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.rx-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 0; overflow: hidden; color: var(--text); display: block; padding-bottom: 12px; transition: transform .12s, border-color .12s; }
.rx-card:hover { transform: translateY(-2px); border-color: var(--amber); text-decoration: none; }
.rx-card.r-legendary { box-shadow: inset 0 0 0 3px #FFB020; } .rx-card.r-epic { box-shadow: inset 0 0 0 2px #A86F00; } .rx-card.r-rare { box-shadow: inset 0 0 0 2px #3CFF8B; }
.rx-card.s-coming-soon { opacity: .82; }
.rx-cimg { aspect-ratio: 16/10; background: radial-gradient(circle at 50% 40%, var(--tfc-shell-hi), var(--tfc-shell-light)); display: grid; place-items: center; overflow: hidden; }
.rx-cimg img { width: 100%; height: 100%; object-fit: cover; } .rx-glyph { font: 700 64px var(--display); color: var(--tfc-ink); }
.rx-cnum { font: 600 13px var(--mono); color: var(--amber); padding: 10px 12px 0; }
.rx-cname { font: 600 16px/1.25 var(--display); padding: 2px 12px; } .rx-cmeta { color: var(--muted); font-size: 13px; padding: 0 12px; }
.rx-cfacts { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 0; } .rx-cfacts span { font: 12px var(--mono); background: var(--panel2); border-radius: 0; padding: 2px 7px; color: var(--tfc-ink); }
.rx-badge { position: absolute; top: 10px; right: 10px; background: var(--rc, var(--tfc-shell-shadow)); color: var(--tfc-ink); font: 700 11px var(--display); text-transform: uppercase; letter-spacing: .12em; border-radius: 0; padding: 3px 10px; }
.rx-badge.cs { background: var(--tfc-shell-hi); color: var(--tfc-ink); }
.rx-entry .rx-badge { position: static; display: inline-block; margin-right: 8px; }
.rx-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; } .rx-filters input { flex: 1; min-width: 200px; }
.rx-pager { display: flex; gap: 16px; align-items: center; color: var(--muted); margin: 12px 0; font: 13px var(--mono); }
.rx-empty { color: var(--muted); }
.rx-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.rx-num { font: 700 48px var(--mono); color: var(--amber); line-height: 1; padding-top: 10px; }
.rx-head > div:nth-child(2) { flex: 1; min-width: 280px; } .rx-meta { color: var(--muted); margin: 0; }
.rx-tags { margin: 10px 0 0; } .rx-why { color: var(--amber); font-size: 14px; }
.rx-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; }
.rx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; margin-top: 18px; }
@media (max-width: 900px) { .rx-cols { grid-template-columns: 1fr; } h1 { font-size: 30px; } }
.rx-stage { position: relative; background: radial-gradient(circle at 50% 35%, var(--tfc-shell-hi), var(--tfc-shell) 70%); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.rx-stage canvas, .rx-stage img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.rx-views { position: absolute; left: 10px; bottom: 44px; display: flex; gap: 6px; flex-wrap: wrap; } .rx-views button { padding: 5px 10px; font-size: 12px; } .rx-views button.on { border-color: var(--amber); color: var(--amber); }
.rx-stage .rx-note { margin: 0; padding: 8px 12px; background: rgba(220, 217, 207, 0.9); }
.rx-note { color: var(--muted); font-size: 13px; }
.rx-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.rx-tab th, .rx-tab td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rx-tab th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.rx-tab tr.warn td, .rx-tab tr.warn th { background: rgba(255, 176, 32, 0.08); } .rx-tab tr.warn b { color: var(--warn); }
.rx-specs td:nth-child(2) { font: 500 14px var(--mono); }
.rx-src { font-size: 12.5px; color: var(--tfc-ink); } .rx-src small { color: var(--muted); display: block; } .rx-src details { margin-top: 4px; } .rx-src summary { cursor: pointer; color: var(--warn); }
.rx-conf { display: inline-block; width: 46px; height: 6px; background: var(--tfc-shell-hi); border-radius: 0; overflow: hidden; vertical-align: middle; } .rx-conf i { display: block; height: 100%; background: var(--amber); }
.rx-statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rx-statgrid div { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; } .rx-statgrid span { display: block; color: var(--muted); font-size: 12px; } .rx-statgrid b { font: 600 20px var(--mono); }
.rx-parts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .rx-parts li { display: flex; gap: 10px; background: var(--panel); border-radius: 0; padding: 8px 12px; } .rx-parts span { color: var(--muted); width: 90px; }
.rx-maker { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 0; color: var(--muted); font-size: 14px; }
.rx-review { background: var(--panel); border-radius: 0; padding: 10px 14px; margin-bottom: 8px; } .rx-review b { color: var(--amber); } .rx-review p { margin: 4px 0 0; }
.rx-reviewform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rx-reviewform input { flex: 1; min-width: 220px; }
.rx-msg { color: var(--muted); font-size: 13px; }
.rx-form { display: grid; gap: 12px; max-width: 620px; } .rx-form label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.rx-qi { background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 10px 14px; margin: 8px 0; } .rx-qi pre { white-space: pre-wrap; font-size: 12px; color: var(--tfc-ink); } .rx-qi button { margin-right: 6px; } .rx-qi input { margin-right: 6px; }
.rx-foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding: 18px 20px 40px; text-align: center; }
code { font: 13px var(--mono); background: var(--panel2); padding: 1px 6px; border-radius: 0; }

/* ---------- Brand Cartridge components ---------- */
h1 { font: 400 clamp(24px, 4vw, 40px)/1.35 var(--display); }
h2 { font: 400 12px var(--tfc-font-label); letter-spacing: .12em; color: var(--amber); }
.rx-top { background: var(--tfc-shell-light); border-bottom: 0; box-shadow: inset 0 -4px 0 var(--tfc-shell-shadow); }
.rx-brand { font: 400 18px var(--display); letter-spacing: 0; } .rx-brand span { color: var(--tfc-orange); } .rx-brand b { font: 400 11px var(--tfc-font-label); letter-spacing: .12em; }
.rx-top nav a { font: 400 11px var(--tfc-font-label); letter-spacing: .08em; text-transform: uppercase; }
.rx-search input, .rx-filters input, .rx-filters select, .rx-form input, .rx-form select, .rx-form textarea, .rx-reviewform input, .rx-reviewform select {
  background: var(--tfc-shell-hi); border: 2px solid var(--text); font: 16px var(--sans); }
button, .rx-btn { background: var(--tfc-key); color: #D3DCE4; font: 400 11px/1.4 var(--tfc-font-label); letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px; box-shadow: inset 0 -3px 0 #000; clip-path: var(--tfc-px-sm); }
button:active, .rx-btn:active { transform: translateY(2px); box-shadow: none; }
.rx-actions .rx-btn:not(.ghost), .rx-top .rx-play { background: var(--tfc-orange); color: var(--tfc-cta-ink, #1A1200); box-shadow: inset 0 -3px 0 var(--tfc-orange-dark); }
.rx-top .rx-play { padding: 8px 12px; clip-path: var(--tfc-px-sm); font-weight: 400; text-decoration: none; }
.rx-btn.ghost, .rx-views button { background: var(--tfc-shell-hi); color: var(--text); border: 0; box-shadow: inset 0 -3px 0 var(--tfc-shell-shadow); }
.rx-views button.on { background: var(--tfc-lcd-0); color: var(--tfc-lcd-3); }
.rx-stats div, .rx-tile, .rx-statgrid div { background: var(--tfc-lcd-3); border: 0; box-shadow: inset 0 0 0 2px var(--tfc-lcd-1); clip-path: var(--tfc-px-sm); }
.rx-stats b, .rx-tile b { font: 400 34px/1 var(--mono); color: var(--tfc-lcd-0); }
.rx-stats span, .rx-statgrid span { color: #8FB8A1; font: 400 10px var(--tfc-font-label); letter-spacing: .08em; }
.rx-tile:hover { box-shadow: inset 0 0 0 2px var(--tfc-lcd-0); }
.rx-tile em { font: 400 16px var(--mono); color: #8FB8A1; }
.rx-statgrid b { font: 400 24px var(--mono); }
.rx-era { background: var(--panel); border: 0; box-shadow: inset 0 -3px 0 var(--tfc-shell-shadow); clip-path: var(--tfc-px-sm); }
.rx-era b { font: 400 13px/1.5 var(--display); } .rx-era span { font: 400 16px var(--mono); }
.rx-card { border: 0; box-shadow: inset 0 -4px 0 var(--tfc-shell-shadow); clip-path: var(--tfc-px); }
.rx-card:hover { transform: translateY(-2px); }
.rx-cimg { background: var(--tfc-lcd-3); } .rx-glyph { font: 400 40px var(--display); color: var(--tfc-lcd-0); }
.rx-cnum { font: 400 18px var(--mono); }
.rx-cname { font: 600 17px/1.25 var(--sans); } .rx-cfacts span { font: 400 15px var(--mono); background: var(--tfc-lcd-3); }
.rx-badge { font: 600 10px var(--tfc-font-label); letter-spacing: .12em; color: #05090C; }
.rx-badge.cs { background: var(--tfc-shell-hi); color: var(--text); }
.rx-num { font: 400 56px var(--mono); }
.rx-stage { background: var(--tfc-bezel); border: 0; padding: 10px; clip-path: var(--tfc-px); }
.rx-stage canvas, .rx-stage img { background: radial-gradient(circle at 50% 35%, var(--tfc-shell-hi), var(--tfc-shell-shadow) 80%); }
.rx-tab th { font: 400 10px var(--tfc-font-label); letter-spacing: .06em; text-transform: uppercase; }
.rx-specs td:nth-child(2) { font: 400 18px var(--mono); }
.rx-conf { background: var(--tfc-shell-shadow); } .rx-conf i { background: var(--tfc-lcd-1); }
.rx-parts li, .rx-review, .rx-qi { background: var(--panel); box-shadow: inset 0 -3px 0 var(--tfc-shell-shadow); }
.rx-pager { font: 400 16px var(--mono); }
code { font: 400 16px var(--mono); }
.rx-top nav { align-items: center; } .rx-theme { padding: 6px 10px; background: var(--tfc-shell-hi); color: var(--text); box-shadow: inset 0 -3px 0 var(--tfc-shell-shadow); }