/*
Theme Name: NintendoROMs
Theme URI: https://example.com/nintendo-roms
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: 1.0.0
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{
  --bg:#faf8f8;
  --surface:#ffffff;
  --primary:#e11d2f;
  --primary-hover:#c01729;
  --accent:#047857;
  --accent-hover:#065f46;
  --dark:#a50d24;
  --dark-2:#87091d;
  --text:#241e1f;
  --text-muted:#6b5f62;
  --text-light:#7a6f71;
  --border:#e8e0e1;
  --border-light:#f5f0f1;
  --footer:#4a0d16;
  --footer-bar:#33090f;
  --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;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.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}

.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:#c01729;
  padding:7px 12px;font-size:.78rem;font-weight:700;transition:all .15s ease;
}
.search-box button:hover{background:#fde7e9}

.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;background:var(--dark);padding:10px 20px;border-radius:var(--radius);
}
.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:rgba(255,255,255,.9)}
.section-header .view-all:hover{color:#fff}

/* ---------- ROM CARDS ---------- */
.rom-grid{display:grid;grid-template-columns:repeat(6,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:#f2ecec;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:#e11d2f;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:1fr 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 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:rgba(225,29,47,.06)}
.sidebar-widget ul li.active a{color:var(--primary);background:rgba(225,29,47,.08);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,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 rgba(225,29,47,.3)}

/* ---------- 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:#f2ecec;aspect-ratio:300/493;
}
.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:#fde7e9;color:#c01729;
  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:#ded4d5;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:1fr 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}

.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:#4a4144;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: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 ---------- */
.main-footer{background:var(--footer);color:var(--text-light);margin-top:40px}
.main-footer .container{padding-top:40px;padding-bottom:40px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px}
/* The link columns are conditional (footer menu / widget area), so a lone
   brand block must not sit in the narrow first track of a 2fr 1fr 1fr grid. */
.footer-top > :only-child{grid-column:1 / -1}
.footer-brand__logo{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:#fff;
}
.footer-brand__logo span{color:#ff9aa4}
.footer-brand p{font-size:.78rem;color:#d3b8bc;line-height:1.7;margin:10px 0 16px;max-width:360px}
.footer-social{display:flex;gap:8px}
.footer-social a{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.16);color:#fff;transition:all .2s;
}
.footer-social a:hover{background:#fff;color:#c01729}
.footer-col h4{font-family:var(--font-head);font-size:.82rem;font-weight:700;color:#fff;margin-bottom:16px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin-bottom:7px}
.footer-col ul li a{color:#d3b8bc;font-size:.78rem;transition:color .15s}
.footer-col ul li a:hover{color:#fff}
.footer-bottom{background:var(--footer-bar);text-align:center;padding:14px 0;font-size:.75rem;color:#c6a6ab}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .archive-layout{grid-template-columns:180px 1fr;gap:20px}
  .rom-grid{grid-template-columns:repeat(4,1fr)}
  .archive-layout .rom-grid{grid-template-columns:repeat(3,1fr)}
  .game-header{gap:20px}
  .game-header__cover{width:150px}
}
@media (max-width:768px){
  .archive-layout{grid-template-columns: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,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}
  .game-header{flex-direction:column;align-items:center;text-align:center}
  .game-header__cover{width:160px}
  .game-header__meta{grid-template-columns: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%}
  /* 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{grid-template-columns:1fr;gap:24px}
  .emu-grid,.faq-grid{grid-template-columns: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,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:#e11d2f;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:#ded4d5;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)}

/* ---------- FOLLOW US BOX ---------- */
.follow-us-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 24px;margin:16px 0 24px;text-align:center;
}
.follow-us-box__title{
  font-family:var(--font-head);font-size:.95rem;font-weight:700;
  color:var(--text);margin-bottom:14px;
}
.follow-us-box__icons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.follow-icon{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:50px;color:#fff;
  font-size:.8rem;font-weight:600;transition:transform .2s,box-shadow .2s;
}
.follow-icon:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.2);color:#fff}
.follow-icon--tw{background:#000}
.follow-icon--yt{background:#ff0000}
.follow-icon--dc{background:#5865f2}
.follow-icon--tg{background:#0088cc}

/* ---------- 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 h2{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:#4a4144;line-height:1.8}
.page-wrap .entry-content ul,
.page-wrap .entry-content ol{margin:0 0 14px 24px;color:#4a4144}
.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:#4a4144;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:#4a4144;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:#e11d2f}
.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;
  }
}