/*
Theme Name: switch-roms.uk
Theme URI: https://switch-roms.uk
Author: Adeel
Description: A ROM catalogue theme for WordPress. Ships a `rom` post type with Genre, Region and Language taxonomies, a game-details meta box, star ratings, a download countdown page, screenshots with a lightbox, related games and reviews.
Version: 2.7.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nroms
Tags: custom-post-type, custom-menu, translation-ready, threaded-comments
*/

/* ---------- VARIABLES ---------- */
:root{
  /* Joy-Con Neon: near-black chrome, Joy-Con blue for links and bars,
     Joy-Con red for the download action. */
  --bg:#f3f4f6;
  --surface:#ffffff;
  --primary:#0090b8;
  --primary-hover:#007596;
  --accent:#e8323f;
  --accent-hover:#c92631;
  --dark:#1b1b1f;
  --dark-2:#111114;
  --neon-blue:#00c3e3;
  --neon-red:#ff4554;
  --text:#18181b;
  --text-muted:#52525b;
  --text-light:#71717a;
  --border:#e4e4e7;
  --border-light:#f4f4f5;
  --footer:#1b1b1f;
  --footer-bar:#111114;
  --font-head:"Plus Jakarta Sans",sans-serif;
  --font-body:"Inter",sans-serif;
  --radius:10px;
  --radius-sm:8px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:0 8px 20px rgba(0,0,0,.08);
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-body);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}

/* ---------- LAYOUT ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.site-main{padding:24px 0 40px}

/* ---------- HEADER ---------- */
.main-header{
  background:var(--dark);
  position:sticky;top:0;z-index:1000;
  /* Two Joy-Con stripes along the bottom edge: red over blue. */
  border-bottom:3px solid var(--neon-blue);
  box-shadow:inset 0 -3px 0 var(--neon-red);
}
.main-header .container{display:flex;align-items:center;height:56px;gap:1.5rem}

.logo{
  font-family:var(--font-head);
  font-size:1.2rem;font-weight:800;color:rgba(255,255,255,.82);
  letter-spacing:-.3px;white-space:nowrap;
}
.logo span{color:#fff}
/* Uploaded logo: capped to the 56px bar, and narrowed on phones so the menu
   and search keep their room. */
.logo--image{display:flex;align-items:center;flex-shrink:0}
.logo--image img{display:block;width:auto;height:auto;max-height:48px;max-width:min(220px,45vw)}

.main-nav{display:flex;align-items:center;gap:4px;flex:1}
.nav-pill{
  padding:6px 14px;color:rgba(255,255,255,.95);font-size:.82rem;font-weight:500;
  border-radius:6px;transition:all .15s ease;
}
.nav-pill:hover{color:#fff;background:rgba(255,255,255,.16)}

.nav-dropdown{position:relative}
.nav-dropdown__toggle{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;font-family:var(--font-body);
}
.nav-dropdown__menu{
  display:none;flex-direction:column;position:absolute;top:100%;left:0;
  margin-top:8px;background:var(--surface);
  border:1px solid var(--border-light);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  min-width:190px;padding:6px 0;z-index:200;
  max-height:70vh;overflow-y:auto;
}
/* The 8px offset below the toggle belongs to no hover target, so the menu
   closed the moment the pointer crossed it. The bridge has to sit on the
   wrapper, not the menu: the menu scrolls (max-height + overflow-y), which
   clips anything drawn outside its box. It only exists while open, so it
   never intercepts clicks the rest of the time. */
.nav-dropdown:hover::after,
.nav-dropdown:focus-within::after,
.nav-dropdown.is-open::after{
  content:'';position:absolute;top:100%;left:0;
  width:100%;min-width:190px;height:10px;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu{display:flex}
/* Click/tap-opened dropdown. The :hover rule above never fires on touch, and
   the toggle button is what keyboard users reach, so the JS-applied class is
   what actually opens the menu. */
.nav-dropdown.is-open .nav-dropdown__menu{display:flex}
.nav-dropdown__menu a{display:block;padding:7px 16px;font-size:.82rem;color:var(--text);transition:background .15s}
.nav-dropdown__menu a:hover{background:var(--bg);color:var(--primary)}

.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.search-box{
  display:flex;align-items:center;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.38);
  border-radius:var(--radius-sm);overflow:hidden;transition:all .2s ease;
}
.search-box:focus-within{background:rgba(0,0,0,.26);border-color:#fff}
.search-box input{
  background:transparent;border:none;outline:none;color:#fff;
  padding:7px 12px;font-size:.82rem;width:180px;font-family:var(--font-body);
}
.search-box input::placeholder{color:rgba(255,255,255,.85)}
.search-box button{
  background:#fff;border:none;color:var(--primary);
  padding:7px 12px;font-size:.78rem;font-weight:700;transition:all .15s ease;
}
.search-box button:hover{background:var(--bg)}
.search-box--menu{display:none}

.mobile-btn{
  display:none;background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.38);color:#fff;
  padding:6px 10px;border-radius:6px;font-size:1.2rem;
}

/* ---------- HERO ---------- */
.archive-hero{text-align:center;padding:32px 20px 28px;margin-bottom:28px}
.archive-hero h1{
  font-family:var(--font-head);font-size:1.5rem;font-weight:800;
  color:var(--text);margin-bottom:10px;
}
.archive-hero p{
  color:var(--text-muted);font-size:.85rem;line-height:1.7;
  max-width:680px;margin:0 auto;
}

/* ---------- SECTION HEADER ---------- */
.section-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;padding:10px 20px;border-radius:var(--radius);
  /* Dark like the header and the emulator/FAQ bars, with a Joy-Con red
     stripe; the blue gradient blended into the Telegram banner below it. */
  background:var(--dark);border-left:5px solid var(--neon-red);
}
.section-header h2{font-family:var(--font-head);font-size:1rem;font-weight:700;color:#fff;margin:0}
.section-header .view-all{font-size:.8rem;font-weight:600;color:var(--neon-blue)}
.section-header .view-all:hover{color:#fff}

/* ---------- ROM CARDS ---------- */
.rom-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:32px}

.rom-card{
  background:var(--surface);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);transition:all .15s ease;position:relative;
}
.rom-card:hover{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.rom-card a{display:block;color:inherit}

.rom-card__image{aspect-ratio:3/4;overflow:hidden;background:var(--border-light);position:relative}
.rom-card__image img{width:100%;height:100%;object-fit:cover}

.rom-card__badge{
  position:absolute;top:6px;left:6px;z-index:2;
  background:var(--accent);color:#fff;
  font-family:var(--font-head);font-size:.6rem;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.rom-card__body{padding:8px 10px 10px}
.rom-card__body h2,
.rom-card__body h3{
  font-family:var(--font-head);font-size:.78rem;font-weight:600;color:var(--text);
  margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.35;
}
.rom-card__meta{font-size:.68rem;color:var(--text-muted);letter-spacing:.2px}


/* ---------- TELEGRAM BANNER ---------- */
.telegram-banner{
  display:flex;align-items:center;gap:16px;padding:18px 24px;
  background:linear-gradient(135deg,#0088cc 0%,#00c6ff 100%);
  border-radius:var(--radius);margin:24px 0;
  box-shadow:0 4px 16px rgba(0,136,204,.25);
}
.telegram-banner__icon{
  flex-shrink:0;width:52px;height:52px;background:rgba(255,255,255,.2);
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
}
.telegram-banner__text{flex:1}
.telegram-banner__text h3{
  font-family:var(--font-head);font-size:1rem;font-weight:700;color:#fff;margin-bottom:2px;
}
.telegram-banner__text p{font-size:.82rem;color:rgba(255,255,255,.9);margin:0}
.telegram-banner__btn{
  flex-shrink:0;background:#fff;color:#0088cc;font-weight:700;font-size:.85rem;
  padding:10px 24px;border-radius:50px;
  transition:transform .2s,box-shadow .2s;box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.telegram-banner__btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)}

/* ---------- EMULATOR / FAQ SECTIONS ---------- */
.emu-section,.faq-section{margin-top:32px}
.emu-section__header,.faq-section__header{
  background:var(--dark);
  padding:12px 24px;border-radius:var(--radius) var(--radius) 0 0;
}
.emu-section__header h2,.faq-section__header h2{
  color:#fff;font-family:var(--font-head);font-size:1.05rem;font-weight:700;
  text-align:center;margin:0;
}
.emu-grid,.faq-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  border:1px solid var(--border);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);background:var(--surface);
}
.emu-card,.faq-item{
  padding:20px 24px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
}
.emu-card:nth-child(2n),.faq-item:nth-child(2n){border-right:none}
.emu-card:nth-last-child(-n+2),.faq-item:nth-last-child(-n+2){border-bottom:none}
.emu-card h3{
  font-family:var(--font-head);font-size:.95rem;font-weight:700;
  color:var(--primary);margin-bottom:8px;
}
.emu-card p,.faq-item p{color:var(--text-muted);font-size:.82rem;line-height:1.7}
.faq-item h3{
  font-family:var(--font-head);font-size:.88rem;font-weight:700;
  color:var(--text);margin-bottom:6px;
}

/* ---------- ARCHIVE SIDEBAR ---------- */
.archive-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.archive-sidebar{position:sticky;top:72px}
.sidebar-widget h2{
  font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--text);
  margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-light);
}
.sidebar-widget ul{list-style:none;padding:0;margin:0}
.sidebar-widget ul li a{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 10px;font-size:.8rem;color:var(--text-muted);
  border-radius:var(--radius-sm);transition:all .15s;
}
.sidebar-widget ul li a:hover{color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent)}
.sidebar-widget ul li.active a{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent);font-weight:600}
.sidebar-widget ul li a span{
  font-size:.72rem;color:var(--text-light);background:var(--bg);padding:1px 7px;border-radius:10px;
}
.archive-layout .rom-grid{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- ARCHIVE LAYOUT SAFETY ---------- */
/* The sidebar is suppressed when no term in the taxonomy has posts yet.
   Without this the lone content column lands in the 220px sidebar track and
   the whole grid shrinks to ~34px cards. */
.archive-layout > :only-child{grid-column:1 / -1}

/* ---------- PAGINATION ---------- */
.paging-nav{display:flex;justify-content:center;gap:6px;margin:30px 0}
.paging-nav a,.paging-nav span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border-radius:var(--radius-sm);
  font-size:.875rem;font-weight:500;color:var(--text-muted);
  background:var(--surface);box-shadow:var(--shadow);transition:all .2s ease;
}
.paging-nav a:hover{color:var(--primary);box-shadow:var(--shadow-md)}
.paging-nav .current{background:var(--primary);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--primary) 30%,transparent)}

/* ---------- SINGLE GAME ---------- */
.game-breadcrumb{padding:0 0 20px;font-size:.85rem;color:var(--text-muted)}
.game-breadcrumb a{color:var(--text-muted)}
.game-breadcrumb a:hover{color:var(--primary)}
.game-breadcrumb .sep{margin:0 8px;color:var(--text-light)}

.game-header{
  display:flex;gap:28px;background:var(--surface);border-radius:var(--radius);
  padding:24px;margin-bottom:24px;border:1px solid var(--border);
}
.game-header__cover{
  flex-shrink:0;width:180px;border-radius:var(--radius-sm);
  overflow:hidden;background:var(--border-light);aspect-ratio:300/493;
}
/* `rom-cover` is uncropped, so most covers are shorter than the 300x493 box.
   The box keeps that shape only for the placeholder; a real image sets it. */
.game-header__cover:has(img){aspect-ratio:auto;align-self:flex-start}
.game-header__cover img{display:block;width:100%;height:auto}
.game-header__info{flex:1;min-width:0}
.game-header__title{
  font-family:var(--font-head);font-size:1.35rem;font-weight:800;
  line-height:1.3;margin-bottom:8px;
}
.format-badge{
  display:inline-block;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);
  padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px;
}
.game-header__rating{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:.9rem}
.star-rating{display:flex;gap:2px}
.star-rating .star{color:var(--border);font-size:1.2rem;user-select:none;transition:color .15s}
.star-rating .star.active{color:#d97706}
.game-header__rating .score{color:var(--text-muted);font-size:.85rem}
.game-header__rating .vote-count{color:var(--text-light);font-size:.78rem}

.game-header__meta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  margin-bottom:16px;border-top:1px solid var(--border);
}
.gh-meta-item{
  display:flex;justify-content:space-between;padding:8px 12px 8px 0;
  border-bottom:1px solid var(--border-light);font-size:.82rem;
}
.gh-meta-item:nth-child(even){padding-left:12px;border-left:1px solid var(--border-light);padding-right:0}
.gh-meta-label{color:var(--text-muted)}
.gh-meta-value{font-weight:600;color:var(--text)}
.gh-meta-value a{color:var(--primary)}
.gh-meta-value a:hover{text-decoration:underline}

.game-header__downloads{display:flex;gap:10px;flex-wrap:wrap}
.download-btn{
  display:inline-block;padding:12px 28px;background:var(--accent);color:#fff;
  text-align:center;border-radius:var(--radius-sm);font-weight:700;font-size:.9rem;
  transition:all .2s ease;
}
.download-btn:hover{background:var(--accent-hover);color:#fff}
/* Set apart from the download buttons so it does not read as one of them. */
.download-btn--discord{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#5865f2;margin-left:24px;
}
.download-btn--discord:hover{background:#4752c4}

.game-section{
  background:var(--surface);border-radius:var(--radius);padding:24px;
  margin-bottom:20px;border:1px solid var(--border);
}
.game-section__title{
  font-family:var(--font-head);font-size:1.05rem;font-weight:700;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);
}

/* One screenshot at a time. Scroll-snap does the paging, so touch swipe and
   keyboard arrows work without any of it being scripted. */
.rom-carousel{position:relative}
.rom-carousel__track{
  --per-view:5;--gap:10px;
  display:flex;gap:var(--gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rom-carousel__track::-webkit-scrollbar{display:none}
.rom-carousel__track:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.rom-carousel__slide{
  /* Never put a transition on this width - a transitioned calc(var()) freezes. */
  flex:0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
  scroll-snap-align:start;scroll-snap-stop:always;
  padding:0;border:0;background:var(--border-light);display:block;cursor:zoom-in;
  border-radius:var(--radius-sm);overflow:hidden;
}
.rom-carousel__slide img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.rom-carousel__slide:hover{box-shadow:0 0 0 2px var(--primary)}
@media (max-width:1024px){.rom-carousel__track{--per-view:4}}
@media (max-width:768px){.rom-carousel__track{--per-view:3}}
@media (max-width:480px){.rom-carousel__track{--per-view:2}}
.rom-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,opacity .15s ease;
}
.rom-carousel__nav:hover{background:rgba(0,0,0,.78)}
.rom-carousel__nav--prev{left:10px}
.rom-carousel__nav--next{right:10px}
.rom-carousel__nav[disabled]{opacity:.3;cursor:default}
@media (prefers-reduced-motion:reduce){.rom-carousel__track{scroll-behavior:auto}}
@media (max-width:480px){
  .rom-carousel__nav{width:32px;height:32px;font-size:1.25rem}
  .rom-carousel__nav--prev{left:6px}
  .rom-carousel__nav--next{right:6px}
}

.game-description p{color:var(--text-muted);margin-bottom:12px;line-height:1.8;font-size:.9rem}
.game-description a{color:var(--primary)}

.related-scroll{
  display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.related-scroll::-webkit-scrollbar{height:4px}
.related-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.related-card{flex-shrink:0;width:140px;scroll-snap-align:start;color:inherit}
.related-card__img{
  width:100%;aspect-ratio:3/4;border-radius:var(--radius-sm);
  overflow:hidden;margin-bottom:6px;background:var(--border-light);
}
.related-card__img img{display:block;width:100%;height:100%;object-fit:cover}
.related-card:hover .related-card__img{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.related-card__title{
  font-size:.78rem;font-weight:600;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.35;
}

/* ---------- FOOTER ---------- */
/* Text is white at reduced opacity rather than a fixed tint, so it stays
   readable whatever --footer is set to. */
.main-footer{background:var(--footer);color:rgba(255,255,255,.75);margin-top:48px}
.main-footer .container{padding-top:48px;padding-bottom:40px}
/* Every column after the brand is conditional, so a flex row copes with
   anything from one to five of them without empty tracks. */
.footer-top{display:flex;flex-wrap:wrap;gap:40px 48px}
.footer-brand{flex:1 1 280px;max-width:380px}
.footer-col{flex:1 1 140px;min-width:0}
.footer-brand__logo{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:#fff;
}
.footer-brand__logo:hover{color:#fff}
.footer-brand__logo span{color:rgba(255,255,255,.7)}
.footer-brand__logo--image img{display:block;width:auto;height:auto;max-height:56px;max-width:240px}
.footer-brand p{font-size:.82rem;line-height:1.7;margin:12px 0 18px}
.footer-social{display:flex;flex-wrap:wrap;gap:10px}
.footer-social a{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  transition:background .2s,color .2s,transform .2s;
}
.footer-social a:hover{background:#fff;color:var(--footer);transform:translateY(-2px)}
.footer-social svg{width:16px;height:16px}
.footer-col h4{
  font-family:var(--font-head);font-size:.78rem;font-weight:700;color:#fff;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;
}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:9px}
.footer-col a{color:rgba(255,255,255,.75);font-size:.84rem;transition:color .15s}
.footer-col a:hover{color:#fff}
.main-footer a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:2px}
.footer-bottom{background:var(--footer-bar);font-size:.75rem;color:rgba(255,255,255,.65)}
.main-footer .footer-bottom__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 24px;padding-top:16px;padding-bottom:16px;
}
.footer-bottom p{margin:0}
.footer-bottom__top{color:rgba(255,255,255,.85);font-weight:600;white-space:nowrap}
.footer-bottom__top:hover{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .archive-layout{grid-template-columns:180px minmax(0,1fr);gap:20px}
  .rom-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .archive-layout .rom-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .game-header{gap:20px}
  .game-header__cover{width:150px}
}
@media (max-width:768px){
  .archive-layout{grid-template-columns:minmax(0,1fr)}
  /* Display headings were the same size on a phone as on a desktop. */
  .archive-hero{padding:24px 0 20px}
  .archive-hero h1,.search-hero h1{font-size:1.25rem}
  .archive-hero p{font-size:.82rem}
  .page-wrap h1{font-size:1.3rem}
  .game-header__title{font-size:1.2rem}
  .game-section__title{font-size:1rem}
  .page-404__code{font-size:64px}
  .archive-sidebar{position:static}

  /* Categories become a horizontal pill strip: 20+ stacked rows otherwise push
     the ROM grid far below the fold on a phone. */
  .archive-sidebar{margin-bottom:18px}
  .sidebar-widget h2{margin-bottom:10px;padding-bottom:0;border-bottom:0}
  .sidebar-widget ul{
    display:flex;flex-wrap:nowrap;gap:8px;
    overflow-x:auto;padding-bottom:6px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .sidebar-widget ul::-webkit-scrollbar{display:none}
  .sidebar-widget ul li{flex:0 0 auto;scroll-snap-align:start}
  .sidebar-widget ul li a{
    display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;
    padding:7px 14px;white-space:nowrap;font-size:.78rem;
    background:var(--surface);
    border:1px solid var(--border);border-radius:50px;
  }
  .sidebar-widget ul li a:hover{background:var(--surface);border-color:var(--primary)}
  .sidebar-widget ul li a span{background:var(--bg);color:var(--text-light)}
  .sidebar-widget ul li.active a{
    background:var(--primary);border-color:var(--primary);color:#fff;
  }
  .sidebar-widget ul li.active a span{background:rgba(255,255,255,.22);color:#fff}
  .rom-grid,.archive-layout .rom-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .main-nav{display:none}
  .mobile-btn{display:block}

  /* The toggle adds .open; without this the nav stays display:none and the
     hamburger appears to do nothing. */
  .main-nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:var(--dark);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 24px rgba(0,0,0,.35);
    padding:10px 16px 14px;z-index:1001;
    max-height:calc(100vh - 56px);overflow-y:auto;
  }
  .main-nav.open .nav-pill{padding:10px 12px;font-size:.9rem}
  .main-nav.open .nav-dropdown{position:static}
  .main-nav.open .nav-dropdown__toggle{width:100%;justify-content:space-between}
  .main-nav.open .nav-dropdown__menu{position:static;margin:4px 0 0;box-shadow:none;max-height:44vh}
  .main-nav.open .nav-dropdown::after{content:none}
  .search-box{display:none}
  .main-nav.open .search-box--menu{display:flex;margin:0 0 8px}
  .search-box--menu input{flex:1;width:auto;min-width:0;padding:10px 12px}
  .search-box--menu button{padding:10px 14px}
  .page-404 .search-box{display:flex}
  /* iOS zooms the page into any field set below 16px and leaves it zoomed. */
  .search-box input,
  .game-comments .comment-form input,
  .game-comments .comment-form textarea{font-size:16px}
  /* Crumbs were 15px high - too small to hit with a thumb. */
  .game-breadcrumb a{display:inline-block;padding:6px 0}
  .game-header{flex-direction:column;align-items:center;text-align:center}
  .game-header__cover{width:160px}
  .game-header__meta{grid-template-columns:minmax(0,1fr)}
  .gh-meta-item:nth-child(even){padding-left:0;border-left:none;padding-right:0}
  .game-header__downloads{justify-content:center}
  /* Download buttons came out at whatever width their label needed, sitting
     unevenly side by side. Full width reads as one clear action per row. */
  .game-header__downloads{width:100%}
  .download-btn{flex:1 1 100%}
  .download-btn--discord{margin-left:0}
  /* The trail wrapped to two lines at desktop size. */
  .game-breadcrumb{font-size:.78rem;padding-bottom:14px;line-height:1.5}
  .main-header .container{gap:1rem}
  .footer-top{gap:32px 24px}
  .footer-brand{flex-basis:100%;max-width:none}
  .footer-col{flex-basis:calc(50% - 12px)}
  .main-footer .footer-bottom__inner{flex-direction:column;text-align:center}
  .emu-grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .emu-card,.faq-item{border-right:none}
  .emu-card:last-child,.faq-item:last-child{border-bottom:none}
  .telegram-banner{flex-direction:column;text-align:center;padding:20px 16px}
  .telegram-banner__btn{margin-top:12px}
}
@media (max-width:480px){
  .rom-grid,.archive-layout .rom-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .archive-hero h1,.search-hero h1{font-size:1.1rem}
  .game-header__title{font-size:1.1rem}
  .page-404__code{font-size:52px}
}

/* =========================================================
   Components beyond the three mockup pages
   ========================================================= */

/* ---------- ACCESSIBILITY ---------- */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal !important;
}
.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;margin:0;padding:12px 20px;
  background:var(--surface);color:var(--primary);font-weight:600;
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  top:8px;left:8px;z-index:100000;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;
}
.main-header a:focus-visible,.main-header button:focus-visible{outline-color:#fff}

/* ---------- COVER FALLBACK ---------- */
.rom-card__placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:10px;text-align:center;
  background:linear-gradient(150deg,
    hsl(var(--ph-hue,220deg) 62% 55%),
    hsl(calc(var(--ph-hue,220deg) + 38deg) 58% 42%));
}
.rom-card__placeholder span{
  font-family:var(--font-head);font-weight:800;font-size:.9rem;line-height:1.2;
  color:rgba(255,255,255,.94);text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.game-header__cover .rom-card__placeholder span{font-size:1.05rem}
.related-card__img .rom-card__placeholder span{font-size:.78rem}

/* ---------- NEW BADGE ---------- */
.rom-card__badge{
  position:absolute;top:6px;left:6px;z-index:2;
  background:var(--accent);color:#fff;
  font-family:var(--font-head);font-size:.6rem;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* ---------- STAR RATING (interactive) ---------- */
.star-rating .star{
  background:none;border:0;padding:0 1px;line-height:1;
  color:var(--border);font-size:1.2rem;cursor:pointer;transition:color .15s,transform .1s;
}
.star-rating .star.active{color:#d97706}
.star-rating .star.is-hover{color:#f59e0b}
.star-rating .star:not(:disabled):hover{transform:scale(1.12)}
.star-rating .star:disabled{cursor:default}
.user-rating.is-voted .star-rating .star{cursor:default}
.rating-msg{font-size:.78rem;color:var(--accent);font-weight:600}

/* ---------- SCREENSHOTS + LIGHTBOX ---------- */
.lightbox{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);
  z-index:9999;align-items:center;justify-content:center;padding:24px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:92%;max-height:88vh;border-radius:var(--radius-sm)}
.lightbox__close{
  position:absolute;top:20px;right:20px;
  background:rgba(255,255,255,.1);border:none;color:#fff;
  width:40px;height:40px;border-radius:50%;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__close:hover{background:rgba(255,255,255,.2)}

/* ---------- DOWNLOAD PAGE ---------- */
.download-page{display:flex;justify-content:center;padding:60px 20px}
.download-card{
  background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);
  padding:40px;text-align:center;max-width:420px;width:100%;
}
.download-card__thumb{width:80px;height:auto;border-radius:var(--radius-sm);margin:0 auto 16px}
.download-card__title{font-family:var(--font-head);font-size:1.1rem;font-weight:700;margin-bottom:6px}
.download-card__info{font-size:.8rem;color:var(--text-muted);margin-bottom:28px}
.download-card__timer{margin-bottom:24px}
.timer-circle{position:relative;width:80px;height:80px;margin:0 auto 12px}
.timer-circle svg{display:block}
.timer-circle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--primary);
  font-variant-numeric:tabular-nums;
}
#nroms-timer-arc{transition:stroke-dashoffset 1s linear}
.download-card__timer p{font-size:.85rem;color:var(--text-muted)}
.download-btn--big{font-size:1rem;padding:16px 32px;display:inline-block}
.download-card__ready{margin-bottom:20px}
.download-card__back{
  font-size:.82rem;color:var(--text-muted);display:inline-block;margin-top:12px;
}
.download-card__back:hover{color:var(--primary)}


/* ---------- EMPTY STATE / 404 / BUTTONS ---------- */
.empty-state{text-align:center;padding:50px 20px;grid-column:1/-1}
.empty-state h3{font-family:var(--font-head);font-weight:700;margin-bottom:6px;font-size:1rem}
.empty-state p{color:var(--text-muted);margin-bottom:16px;font-size:.85rem}

.page-404{text-align:center;padding:80px 20px}
.page-404__code{
  font-family:var(--font-head);font-size:100px;font-weight:900;
  color:var(--border);line-height:1;
}
.page-404 h1{font-family:var(--font-head);font-size:1.5rem;font-weight:700;margin:10px 0}
.page-404 p{color:var(--text-muted);margin-bottom:24px}
.page-404 .search-box{margin:0 auto 24px;max-width:360px}

.search-box--light{
  background:var(--surface);border-color:var(--border);
}
.search-box--light input{color:var(--text)}
.search-box--light input::placeholder{color:var(--text-light)}

.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;background:var(--primary);color:#fff;
  border-radius:var(--radius-sm);font-weight:600;transition:background .2s ease;
}
.btn-primary:hover{background:var(--primary-hover);color:#fff}

/* ---------- SEARCH HERO ---------- */
.search-hero{text-align:center;margin:32px 0 30px}
.search-hero h1{font-family:var(--font-head);font-size:1.5rem;font-weight:800;margin-bottom:4px}
.search-hero h1 span{color:var(--primary)}
.search-hero p{color:var(--text-muted);font-size:.85rem}

/* ---------- STATIC PAGES ---------- */
.page-wrap{
  max-width:800px;margin:0 auto 20px;background:var(--surface);
  border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);
}
.page-wrap h1{
  font-family:var(--font-head);font-size:1.6rem;font-weight:800;
  margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);
}
.page-wrap .entry-content h2,
.page-wrap .entry-content h3{margin:24px 0 10px;font-family:var(--font-head)}
.page-wrap .entry-content p{margin-bottom:14px;color:var(--text-muted);line-height:1.8}
.page-wrap .entry-content ul,
.page-wrap .entry-content ol{margin:0 0 14px 24px;color:var(--text-muted)}
.page-wrap .entry-content a{color:var(--primary)}
.page-wrap .entry-content a:hover{text-decoration:underline}

/* ---------- BLOG FALLBACK ---------- */
.post-list{display:grid;gap:16px;max-width:800px;margin:0 auto}
.post-summary{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;
}
.post-summary__title{font-family:var(--font-head);font-size:1.1rem;font-weight:700}
.post-summary__title a:hover{color:var(--primary)}
.post-summary__meta{font-size:.75rem;color:var(--text-light);margin:4px 0 10px}
.post-summary__excerpt{color:var(--text-muted);font-size:.9rem;line-height:1.8}

/* ---------- REVIEWS / COMMENTS ---------- */
.game-comments .comments-area h3{
  font-family:var(--font-head);font-size:1.05rem;font-weight:700;
  margin-bottom:20px;color:var(--text);
}
.game-comments .comment-list{list-style:none;padding:0;margin:0}
.game-comments .comment-list .comment{
  padding:18px;margin-bottom:12px;background:var(--bg);
  border-radius:var(--radius);border:1px solid var(--border-light);
}
.game-comments .comment-author{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.game-comments .comment-author img{
  width:40px;height:40px;border-radius:50%;border:2px solid var(--primary);
}
.game-comments .fn,.game-comments .author-name{font-weight:700;font-size:.88rem;color:var(--text);font-style:normal}
.game-comments .comment-metadata,
.game-comments .comment-date{display:block;font-size:.72rem;color:var(--text-light)}
.game-comments .comment-content{font-size:.88rem;line-height:1.7;color:var(--text-muted);padding-left:52px}
.game-comments .comment-content p{margin:0 0 6px}
.game-comments .reply a{font-size:.75rem;color:var(--primary);font-weight:600}
.game-comments .reply a:hover{text-decoration:underline}
.game-comments .children{list-style:none;padding-left:24px;margin-top:0;border-left:2px solid var(--primary)}
.game-comments .no-comments{font-size:.85rem;color:var(--text-muted)}

.game-comments .comment-form{margin-top:24px}
.game-comments .comment-reply-title{
  font-family:var(--font-head);font-size:1.15rem;font-weight:700;
  margin-bottom:4px;color:var(--text);
}
.game-comments .comment-reply-title small{font-size:.75rem}
.game-comments .comment-reply-title small a{color:var(--text-muted)}
.game-comments .comment-notes{font-size:.82rem;color:var(--text-muted);margin-bottom:16px}
.game-comments .comment-notes .required{color:var(--accent)}
.game-comments .comment-form label:not(.screen-reader-text){
  display:block;font-size:.78rem;color:var(--text-muted);margin-bottom:4px;
}
.game-comments .comment-form-author,
.game-comments .comment-form-email,
.game-comments .comment-form-url{
  display:inline-block;width:100%;margin:0 0 12px;
}
@media (min-width:700px){
  .game-comments .comment-form-author,
  .game-comments .comment-form-email,
  .game-comments .comment-form-url{width:calc(33.333% - 8px);vertical-align:top}
  .game-comments .comment-form-author,
  .game-comments .comment-form-email{margin-right:12px}
}
.game-comments .comment-form input[type="text"],
.game-comments .comment-form input[type="email"],
.game-comments .comment-form input[type="url"],
.game-comments .comment-form textarea{
  width:100%;padding:10px 14px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.88rem;
  background:#fff;color:var(--text);transition:border-color .2s;
}
.game-comments .comment-form input:focus,
.game-comments .comment-form textarea:focus{outline:none;border-color:var(--primary)}
.game-comments .comment-form input::placeholder,
.game-comments .comment-form textarea::placeholder{color:var(--text-light)}
.game-comments .comment-form textarea{min-height:120px;resize:vertical;margin-bottom:14px}
.game-comments .comment-form-cookies-consent{
  display:flex;align-items:center;gap:8px;font-size:.82rem;
  color:var(--text-muted);margin-bottom:14px;
}
.game-comments .comment-form .submit{
  background:var(--primary);color:#fff;border:none;
  padding:12px 28px;border-radius:var(--radius-sm);
  font-weight:700;font-size:.88rem;font-family:var(--font-body);
  transition:background .2s;
}
.game-comments .comment-form .submit:hover{background:var(--primary-hover)}
.game-comments .comment-navigation{
  display:flex;justify-content:space-between;margin:16px 0;font-size:.85rem;
}
.game-comments .comment-navigation a{color:var(--primary);font-weight:600}

/* ---------- WORDPRESS EDITOR CONTENT ---------- */
.alignleft{float:left;margin:0 20px 15px 0}
.alignright{float:right;margin:0 0 15px 20px}
.aligncenter{display:block;margin:15px auto}
.wp-caption{max-width:100%;margin-bottom:15px}
.wp-caption-text{text-align:center;font-size:.85rem;color:var(--text-muted);padding:4px 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:20px}
.gallery-item{margin:0}
.gallery-item img{border-radius:var(--radius-sm)}

/* ---------- ADMIN BAR ---------- */
.admin-bar .main-header{top:32px}
@media (max-width:782px){.admin-bar .main-header{top:46px}}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ---------- PHONE OVERRIDES ----------
   Kept last: the component rules above (stars, static pages) are declared
   after the main responsive block and would otherwise win over it. */
@media (max-width:768px){
  /* Stars were 18x19px - too small to hit with a thumb. */
  .star-rating .star{font-size:1.5rem;padding:4px 3px}
}
@media (max-width:480px){
  /* 40px of inner padding left pages a ~260px column of text. */
  .page-wrap{padding:24px 18px}
}