*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#07090b;--panel:#10141a;--line:#1d232c;--text:#e8eef4;--muted:#8b98ad;--accent:#12e68a;--accent-dim:#0b9e5e;--warn:#f59e0b}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:15px/1.5 "Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 background-image:radial-gradient(900px 500px at 12% -8%,rgba(18,230,138,.07),transparent 70%);
 background-attachment:fixed;min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* top bar */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:rgba(8,9,12,.82);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.02em;font-size:15px}
.brand .mark{width:20px;height:20px;flex:none;color:var(--accent);display:block}
.topnav{margin-left:auto;display:flex;gap:16px;font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.topnav a:hover{color:var(--accent)}
/* hero */
.hero{padding:44px 0 26px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(30px,6.2vw,54px);line-height:1.03;letter-spacing:-.02em;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.sub{color:var(--muted);margin-top:13px;max-width:60ch;font-size:15.5px}
.stats{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.stat{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px;font-size:12px;
 letter-spacing:.07em;display:flex;align-items:center;gap:8px;color:var(--muted)}
.stat b{color:var(--text);font-weight:700}
.live{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.35}}
/* notice */
.notice{margin:22px 0 0;border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--panel);
 border-radius:10px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
.notice .ic{color:var(--warn);font-weight:800;font-size:17px;line-height:1}
.notice p{font-size:13.5px;color:#c3cedd}
.notice p+p{margin-top:6px}
/* controls */
.controls{margin:26px 0 8px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{flex:1 1 280px;position:relative}
.search input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);
 padding:12px 14px 12px 40px;font-size:15px;outline:none}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,230,138,.13)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);opacity:.45}
select{background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px;font-size:14px;outline:none}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 15px;
 font-size:12.5px;letter-spacing:.05em;cursor:pointer;transition:.14s}
.chip:hover{color:var(--text);border-color:#2c3648}
.chip.on{background:rgba(18,230,138,.13);border-color:var(--accent);color:var(--accent)}
/* /dos/ shelf: continuous loading, no "load more" gate on a 2,500-item grid */
.more{display:block;margin:0 auto 40px;background:var(--panel);border:1px solid var(--line);
 color:var(--text);border-radius:10px;padding:13px 26px;font-size:14px;cursor:pointer}
.more:hover{border-color:var(--accent);color:var(--accent)}
#dsen{height:1px}
.dos-note{margin:0 0 46px;font-size:13px;color:var(--muted);max-width:820px}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:15px;padding-bottom:56px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;
 transition:.16s;position:relative}
.card:hover{transform:translateY(-3px);border-color:#2e3b52;box-shadow:0 14px 34px -14px rgba(0,0,0,.85)}
.cover{position:relative;aspect-ratio:16/10;background:#0d1017;overflow:hidden;flex:none}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .tile{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
 background:repeating-linear-gradient(135deg,rgba(255,255,255,.038) 0 9px,transparent 9px 19px),
 linear-gradient(152deg,hsl(var(--h) 58% 23%),hsl(var(--h) 46% 10%))}
.tile-init{font-weight:800;font-size:30px;letter-spacing:.16em;color:rgba(255,255,255,.92);line-height:1;
 text-shadow:0 2px 14px rgba(0,0,0,.5)}
.tile-sub{font-size:8.5px;letter-spacing:.26em;color:rgba(255,255,255,.4)}
.cover-tag{position:absolute;left:8px;top:8px;background:rgba(6,8,12,.8);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.11);
 border-radius:5px;padding:3px 7px;font-size:9.5px;letter-spacing:.13em;font-weight:700;color:#cbd5e1}
.cover-flag{position:absolute;right:8px;top:8px;background:rgba(245,158,11,.92);color:#1a1206;border-radius:5px;
 padding:3px 7px;font-size:9.5px;letter-spacing:.09em;font-weight:800}
.card .body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:14.5px;line-height:1.28;font-weight:700}
.card h3 a:hover{color:var(--accent)}
.meta{font-size:11.5px;color:var(--muted);letter-spacing:.03em;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.meta .sep{opacity:.35}
.meta .host{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 color:#6d7a90;font-size:10.5px}
/* header search: reachable from every page, like the big directories */
.hsearch{flex:0 1 240px;min-width:0;margin-left:6px}
.hsearch input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:9px;
 color:var(--text);padding:8px 11px;font-size:13px;outline:none}
.hsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,230,138,.13)}
@media(max-width:900px){.hsearch{display:none}}
/* legal pages */
.legal{max-width:760px;margin:0 auto;padding:34px 16px 70px}
.legal h1{font-size:clamp(24px,4.4vw,36px);line-height:1.1;margin:14px 0 6px;letter-spacing:-.02em}
.legal .upd{color:var(--muted);font-size:12.5px;letter-spacing:.05em;margin-bottom:20px}
.legal h2{font-size:17px;margin:26px 0 9px}
.legal p,.legal li{font-size:15px;line-height:1.66;color:#d3dced}
.legal p{margin:0 0 13px}
.legal ul{margin:0 0 14px;padding-left:21px}
.legal li{margin:5px 0}
.legal a{color:var(--accent)}
.legal .box{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);
 border-radius:10px;padding:14px 17px;margin:18px 0}
.legal .box p{margin:0}
.footlinks{margin-top:12px !important}
.footlinks a{border-bottom:1px solid var(--line)}
.tag{border:1px solid var(--line);border-radius:4px;padding:2px 6px;font-size:10.5px;letter-spacing:.05em;color:#9fb0c7}
.tag.mp{border-color:var(--accent-dim);color:var(--accent)}
.tag.files{border-color:#5b4a1c;color:#d8b264}
.card .actions{margin-top:auto;display:flex;gap:8px;padding-top:3px}
.play{flex:1;text-align:center;background:var(--accent);color:#07090b;font-weight:800;font-size:12.5px;letter-spacing:.08em;
 padding:10px;border-radius:9px;transition:.14s}
.play:hover{filter:brightness(1.12)}
.detail{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:12px;color:var(--muted);letter-spacing:.07em}
.detail:hover{border-color:var(--accent);color:var(--accent)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0}
.section-head{display:flex;align-items:baseline;gap:12px;margin:0 0 15px}
.section-head h2{font-size:12.5px;letter-spacing:.17em;color:var(--muted);font-weight:700}
/* favourites rail: first content section, hand-picked, hidden while searching */
.favourites{margin:30px 0 4px;border:1px solid var(--line);border-radius:16px;padding:20px 18px 18px;
 background:linear-gradient(180deg,rgba(18,230,138,.06),rgba(18,230,138,0) 60%)}
.favourites .section-head{margin:0 0 16px}
.favourites .section-head h2{color:var(--accent)}
.favourites .section-head .star{color:var(--accent)}
.favourites .grid{padding-bottom:0}
.fav-star{position:absolute;right:8px;bottom:8px;background:rgba(18,230,138,.95);color:#07090b;
 border-radius:5px;padding:3px 7px;font-size:10px;line-height:1;font-weight:800}
/* blog */
.post-list{display:grid;gap:14px;padding-bottom:10px}
.post-item{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 20px;transition:.16s}
.post-item:hover{border-color:#2e3b52;box-shadow:0 14px 34px -18px rgba(0,0,0,.85)}
.post-item h2{font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:8px 0 7px;font-weight:700}
.post-item h2 a:hover{color:var(--accent)}
.post-meta{font-size:11.5px;color:var(--muted);letter-spacing:.07em;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-meta .sep{opacity:.35}
.cat{border:1px solid var(--line);border-radius:4px;padding:2px 7px;font-size:10.5px;letter-spacing:.06em}
.cat-ai{border-color:var(--accent-dim);color:var(--accent)}
.cat-news{border-color:#5b4a1c;color:#d8b264}
.post-sum{color:var(--muted);font-size:14px;margin-bottom:11px;max-width:80ch}
.post-more{font-size:11.5px;letter-spacing:.12em;color:var(--accent);font-weight:700}
.feed-note{color:var(--muted);font-size:12px;padding:8px 0 56px}
.feed-note a{color:var(--accent)}
.blog-post .prose{padding-top:4px}
.prose h2{font-size:19px;margin:26px 0 9px;letter-spacing:-.01em}
.prose h3{font-size:16px;margin:20px 0 7px}
.prose p{margin:0 0 14px;font-size:15.5px;line-height:1.68;color:#d3dced}
.prose ul{margin:0 0 15px;padding-left:22px}
.prose li{margin:5px 0;font-size:15.5px;line-height:1.6;color:#d3dced}
.prose blockquote{margin:18px 0;border-left:3px solid var(--accent);background:var(--panel);
 border-radius:0 10px 10px 0;padding:13px 17px}
.prose blockquote p{margin:0;font-size:15.5px;color:#c3cedd;font-style:italic}
.prose table{border-collapse:collapse;margin:16px 0;width:100%;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 11px;text-align:left}
.prose th{background:var(--panel);color:var(--muted);font-size:12px;letter-spacing:.07em}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-dim)}
.prose code{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:13px}
.blog-post h1{max-width:26ch}
.sources{margin-top:34px;border-top:1px solid var(--line);padding-top:18px}
.sources h2{font-size:11.5px;letter-spacing:.17em;color:var(--muted);margin-bottom:9px}
.sources ul{list-style:none;padding:0}
.sources li{margin:5px 0;font-size:13px}
.sources a{color:#9fb0c7;word-break:break-all;border-bottom:1px solid var(--line)}
.sources a:hover{color:var(--accent)}
.src-note{margin-top:10px;font-size:11.5px;color:var(--muted);opacity:.75}
.post-nav{display:flex;gap:12px;justify-content:space-between;margin-top:30px;
 border-top:1px solid var(--line);padding-top:18px}
.pn{font-size:13px;color:var(--muted);max-width:48%}
.pn.next{margin-left:auto;text-align:right}
.pn:hover{color:var(--accent)}
/* footer */
footer{border-top:1px solid var(--line);padding:30px 0 46px;color:var(--muted);font-size:12.5px}
footer p+p{margin-top:9px}
footer a{color:#9fb0c7;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--accent)}
/* detail page */
.detail-page{max-width:840px;margin:0 auto;padding:34px 16px 70px}
.detail-page .back{font-size:12.5px;color:var(--muted);letter-spacing:.07em}
.detail-page .back:hover{color:var(--accent)}
.detail-page h1{font-size:clamp(26px,5vw,40px);line-height:1.08;margin:18px 0 12px;letter-spacing:-.02em}
.detail-page .shot{width:100%;border-radius:13px;border:1px solid var(--line);margin:20px 0;display:block}
.detail-page .cta{display:inline-block;background:var(--accent);color:#07090b;font-weight:800;letter-spacing:.08em;
 padding:15px 30px;border-radius:11px;font-size:14px;margin:8px 0 24px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:10px 16px;border-top:1px solid var(--line);padding-top:18px;font-size:14px}
.kv dt{color:var(--muted);font-size:12px;letter-spacing:.08em;padding-top:2px}
@media(max-width:640px){
 .topnav{display:none}
 .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
 .card h3{font-size:13px}
 .card .body{padding:10px}
 .hero{padding:30px 0 20px}
 .kv{grid-template-columns:1fr;gap:2px 0}
 .kv dd{margin-bottom:12px}
}

/* ---------------------------------------------------------------- brand kit v1.0
   GAMEFAST brand system. Token source: brand/BRAND-LOCK.md, brand/tokens.css.
   The asymmetric corner (rounded leading edge, squared trailing edge) is the
   brand's one graphic device, reused on buttons, chips and cards. */
h1,h2,h3,.hero h1,.detail-page h1,.blog-post h1,.card h3{
 font-variation-settings:'wdth' 125,'wght' 800;font-weight:800;font-style:normal}
h2,h3{font-variation-settings:'wdth' 110,'wght' 700;font-weight:700}
.chip{border-radius:8px 2px 2px 8px}
.stat{border-radius:8px 2px 2px 8px}
.play{border-radius:10px 2px 2px 10px}
.more{border-radius:10px 2px 2px 10px}
.detail-page .cta{border-radius:10px 2px 2px 10px;color:#07090b}
.card{border-radius:11px 2px 2px 11px}
.prose blockquote{border-radius:0 10px 10px 0}
.brand .mark{width:20px;height:20px;flex:none;color:var(--accent);display:block}
.brand span{font-variation-settings:'wdth' 125,'wght' 800}
/* Focus is visible and instant. Never animated. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ------------------------------------------------------------- play counts
   Badge sits on the cover art bottom-left, opposite the favourite star, so a
   card can carry both without collision. Hidden until the counter answers, so a
   dead counter or a no-JS visitor sees nothing rather than an empty box. */
.cover .plays{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:5px;
 background:rgba(6,8,12,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.11);
 border-radius:5px;padding:3px 7px;font-size:9.5px;letter-spacing:.1em;font-weight:700;color:#cbd5e1}
.cover .plays::before{content:"";width:0;height:0;border-left:5px solid currentColor;
 border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;opacity:.75}
.detail-page .plays{color:var(--accent);font-size:12.5px;letter-spacing:.07em;margin-left:2px}

/* ------------------------------------------------------------------- banners
   One direct-sold banner. Served from this domain, no network, no script. The
   label is always visible: an undisclosed sponsor is a trust problem, and
   disclosure costs nothing here. */
.adslot{background:#0b0e12;border-bottom:1px solid var(--line);padding:10px 0 12px}
.adslot .wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.adslot-label{font-size:9px;letter-spacing:.22em;color:var(--muted);opacity:.65}
.adslot-link{display:block;width:100%;max-width:728px}
.adslot-link img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px 2px 2px 8px}
.adslot-link:hover img{border-color:#2e3b52}

/* ------------------------------------------------------- trust and legal pages
   The .legal shell, .legal .box and .upd rules already exist above. These are
   only the pieces the longer pages need: ordered lists, subheadings, and the
   framing note that opens each policy. */
.legal ol{margin:0 0 14px;padding-left:21px}
.legal ol li{font-size:15px;line-height:1.66;color:#d3dced;margin:5px 0}
.legal h3{font-size:14.5px;margin:18px 0 7px;color:var(--text);font-weight:700}
.legal-note{color:var(--muted);font-size:13.5px;line-height:1.6;border-left:2px solid var(--line);
 padding-left:12px;margin:0 0 20px}
/* .detail-page already centres itself with margin:auto and its own side padding.
   Inside the two-column shell both of those double up, so they are neutralised
   here rather than by changing the detail page for every other use. */
.shell .detail-page{max-width:none;margin:0;padding:34px 0 70px}

/* ------------------------------------------------------------------- sidebar
   One sticky rail doing four jobs, on the LEFT. Sticky with its own scroll rather than fixed,
   so on a short screen the support card at the base stays reachable instead of
   being cut off below the fold. */
.wrap.shell{max-width:1400px;display:grid;grid-template-columns:292px minmax(0,1fr);
 gap:26px;align-items:start}
.col-main{min-width:0;order:2}
.rail{order:1;position:sticky;top:74px;max-height:calc(100vh - 92px);overflow-y:auto;
 display:flex;flex-direction:column;gap:14px;padding-bottom:10px;scrollbar-width:thin}
.rail-card{background:var(--panel);border:1px solid var(--line);
 border-radius:13px 2px 2px 13px;padding:15px 16px}
.rail-head{font-size:10px;letter-spacing:.19em;color:var(--muted);margin-bottom:11px}
.rail-chips{display:flex;flex-wrap:wrap;gap:6px}
.rail-chips .chip{padding:6px 11px;font-size:11.5px;border-radius:7px 2px 2px 7px}
.rail-field{display:flex;flex-direction:column;gap:6px;margin-top:13px}
.rail-field span{font-size:10px;letter-spacing:.16em;color:var(--muted)}
.rail-field select{width:100%;padding:9px 10px;font-size:13px}
.rail-list{list-style:none;padding:0;margin:0}
.rail-list li+li{margin-top:1px}
.rail-list a{display:flex;align-items:baseline;gap:9px;padding:6px 7px;border-radius:7px 2px 2px 7px}
.rail-list a:hover{background:rgba(18,230,138,.08)}
.rail-list .rk{color:var(--muted);font-size:10.5px;flex:none;width:13px;text-align:right}
.rail-list .rt{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-list .rn{color:var(--accent);font-size:11px;flex:none}
.rail-empty{color:var(--muted);font-size:12.5px;line-height:1.5;padding:2px 0}
.rail-foot{color:var(--muted);font-size:10px;letter-spacing:.12em;margin-top:10px;opacity:.7}
.rail-blurb{color:var(--muted);font-size:13px;line-height:1.55;margin-bottom:11px}
.rail-link{display:block;font-size:12.5px;color:var(--accent);padding:6px 0;border-top:1px solid var(--line)}
.rail-link:hover{color:#7ff1bd}

/* support card, base of the rail */
.donate{border-color:var(--accent-dim);
 background:linear-gradient(150deg,rgba(18,230,138,.10),rgba(18,230,138,.01) 72%)}
.donate-line{font-size:14px;line-height:1.45;color:var(--text);margin-bottom:5px}
.donate-sub{color:var(--muted);font-size:12.5px;line-height:1.5;margin-bottom:12px}
.donate-btn{display:block;text-align:center;background:var(--accent);color:#07090b;
 font-weight:800;font-size:12.5px;letter-spacing:.1em;border-radius:10px 2px 2px 10px;padding:12px}
.donate-btn:hover{filter:brightness(1.12)}
/* secondary action in the rail: outline, so DONATE stays the only
   filled button and the two asks do not compete for the eye */
.rail-btn{display:block;text-align:center;border:1px solid var(--accent);
 color:var(--accent);border-radius:10px 2px 2px 10px;padding:11px;
 font-weight:700;font-size:12.5px;letter-spacing:.1em}
.rail-btn:hover{background:var(--accent);color:#07090b}
/* ------------------------------------------------------------------ submit form
   One column, generous hit targets, two-column rows collapsing on narrow
   screens. Status messages carry text as well as colour, never colour alone. */
.legal form{margin:6px 0 8px}
.field{margin:0 0 18px}
.field>label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted);margin-bottom:7px}
.field .req{color:var(--accent);letter-spacing:.06em}
.field .opt{color:var(--muted);opacity:.7;letter-spacing:.06em}
.legal input[type=text],.legal input[type=url],.legal textarea,.legal select{
 width:100%;background:#0b0e12;border:1px solid var(--line);border-radius:9px 2px 2px 9px;
 color:var(--text);font-size:15px;font-family:inherit;padding:11px 13px}
.legal textarea{resize:vertical;line-height:1.6}
.legal input:focus,.legal textarea:focus,.legal select:focus{outline:none;
 border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,230,138,.14)}
.legal select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
 background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
 background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.row{display:flex;gap:9px;align-items:stretch}
.row input{flex:1;min-width:0}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checks{display:flex;flex-wrap:wrap;gap:7px}
.fcheck{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
 border-radius:8px 2px 2px 8px;padding:8px 12px;font-size:13.5px;color:#d3dced;cursor:pointer}
.fcheck:hover{border-color:#2e3b52}
.fcheck input{accent-color:var(--accent);margin:0}
.hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin:7px 0 0}
.note{font-size:13px;line-height:1.5;margin:7px 0 0;color:var(--muted)}
.note.good{color:var(--accent)}
.note.bad{color:#ff8a8a}
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 4px}
.actions .hint{margin:0}
button.primary,button.ghost{font-family:inherit;font-weight:700;letter-spacing:.08em;
 cursor:pointer;border-radius:10px 2px 2px 10px;font-size:13px;padding:12px 20px}
button.primary{background:var(--accent);color:#07090b;border:1px solid var(--accent)}
button.primary:hover{filter:brightness(1.1)}
button.primary:disabled{opacity:.55;cursor:default;filter:none}
button.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);
 white-space:nowrap}
button.ghost:hover{background:rgba(18,230,138,.1)}
button.ghost:disabled{opacity:.55;cursor:default}
@media(max-width:640px){
 .row{flex-direction:column}
 .field.two{grid-template-columns:1fr}
 button.primary{width:100%}
}

/* alternate-route card on game pages */
.altpath{margin:0 0 22px;border:1px solid var(--line);border-radius:12px 2px 2px 12px;
 padding:14px 16px;background:var(--panel);display:flex;gap:14px;align-items:center;
 justify-content:space-between;flex-wrap:wrap}
.altpath p{margin:0;font-size:13.5px;color:var(--muted);max-width:60ch}
.altpath a{flex:none;border:1px solid var(--accent);color:var(--accent);
 border-radius:10px 2px 2px 10px;padding:9px 15px;font-size:12.5px;letter-spacing:.08em;font-weight:700}
.altpath a:hover{background:var(--accent);color:#07090b}

/* Single column below 1040px, rail after the grid: on a phone the games come
   first, and the search field already covers what the filters do. */
@media(max-width:1040px){
 .wrap.shell{grid-template-columns:minmax(0,1fr);max-width:1240px}
 .col-main{order:1}
 .rail{order:2;position:static;max-height:none;overflow:visible}
}
@media(max-width:640px){
 .altpath{flex-direction:column;align-items:flex-start}
 .altpath a{width:100%;text-align:center}
}