/*
Theme Name: Arcade Nova
Theme URI: https://example.com/arcade-nova
Author: Arcade Nova Studio
Author URI: https://example.com
Description: Arcade Nova is an original, free-to-use WordPress theme for browser-game arcade and casual-gaming portals. It is built to work with the CloudArcade Connect plugin, displaying synced games, categories, thumbnails and single game pages with an embedded player, view counters, star ratings, instant search suggestions, and AJAX "load more" game grids. Requires the CloudArcade Connect plugin, active and approved, to display games. Inspired by the layout conventions of large portal and casual-game sites, but built from scratch with an original neon-arcade visual identity.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arcade-nova
Tags: entertainment, grid-layout, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, right-sidebar, custom-colors
*/

/* =========================================================
   0. RESET & BASE
========================================================= */
:root{
  --an-bg: #0b0e1a;
  --an-bg-alt: #10142a;
  --an-surface: #151a33;
  --an-surface-2: #1b2140;
  --an-border: #262c4d;
  --an-text: #e9ecff;
  --an-text-dim: #9aa1c9;
  --an-accent: #33e6d8;
  --an-accent-2: #ff3fa4;
  --an-accent-3: #ffd23f;
  --an-gradient: linear-gradient(135deg, var(--an-accent) 0%, #3f8cff 50%, var(--an-accent-2) 100%);
  --an-radius: 14px;
  --an-radius-sm: 8px;
  --an-shadow: 0 10px 30px rgba(0,0,0,.35);
  --an-container: 1240px;
  --an-font-head: 'Orbitron', 'Poppins', sans-serif;
  --an-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--an-bg);
  color: var(--an-text);
  font-family: var(--an-font-body);
  font-size: 16px;
  line-height: 1.6;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(51,230,216,.10), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(255,63,164,.10), transparent 40%);
  background-attachment: fixed;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--an-accent); text-decoration:none; transition: color .2s ease; }
a:hover{ color: var(--an-accent-2); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ font-family: var(--an-font-head); font-weight:700; letter-spacing:.3px; color:#fff; margin:0 0 .6em; }
p{ margin:0 0 1em; color: var(--an-text-dim); }
button, input, textarea, select{ font-family: inherit; }
.screen-reader-text{ position:absolute !important; clip: rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

.an-container{
  width: 100%;
  max-width: var(--an-container);
  margin: 0 auto;
  padding: 0 20px;
}

/* buttons */
.an-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px;
  border-radius: 100px;
  font-weight:600;
  font-size: 14px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.an-btn:hover{ transform: translateY(-2px); color:#fff; }
.an-btn--primary{
  background: var(--an-gradient);
  color:#06111a;
  box-shadow: 0 8px 24px rgba(63,140,255,.35);
}
.an-btn--primary:hover{ color:#06111a; box-shadow: 0 12px 30px rgba(255,63,164,.4); }
.an-btn--ghost{
  background: transparent;
  border-color: var(--an-border);
  color: var(--an-text);
}
.an-btn--ghost:hover{ border-color: var(--an-accent); color: var(--an-accent); }

/* =========================================================
   1. HEADER
========================================================= */
.an-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(11,14,26,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--an-border);
}
.an-header__bar{
  display:flex; align-items:center; gap:24px;
  padding: 14px 0;
}
.an-logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--an-font-head);
  font-size: 22px;
  font-weight:900;
  color:#fff !important;
  white-space:nowrap;
}
.an-logo img{ max-height:40px; width:auto; }
.an-logo__mark{
  width:34px; height:34px; border-radius:9px;
  background: var(--an-gradient);
  display:flex; align-items:center; justify-content:center;
  color:#06111a; font-size:18px;
}
.an-logo__mark svg{ width:20px; height:20px; }

.an-nav{ flex: 1; display:flex; }
.an-nav ul{ display:flex; gap:6px; flex-wrap:wrap; }
.an-nav a{
  display:block;
  padding: 10px 14px;
  border-radius: 100px;
  color: var(--an-text);
  font-weight:600;
  font-size: 14px;
}
.an-nav a:hover, .an-nav .current-menu-item > a{
  background: var(--an-surface-2);
  color: var(--an-accent);
}

.an-header__actions{ display:flex; align-items:center; gap:10px; }
.an-search-toggle, .an-menu-toggle{
  width:42px; height:42px; border-radius:50%;
  background: var(--an-surface);
  border:1px solid var(--an-border);
  color: var(--an-text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.an-search-toggle:hover, .an-menu-toggle:hover{ border-color: var(--an-accent); color: var(--an-accent); }
.an-menu-toggle{ display:none; }

/* search overlay */
.an-search-overlay{
  position: fixed; inset:0; z-index: 200;
  background: rgba(6,8,16,.92);
  backdrop-filter: blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 90px 20px;
  opacity:0; visibility:hidden; transform: translateY(-10px);
  transition: all .25s ease;
}
.an-search-overlay.is-active{ opacity:1; visibility:visible; transform:none; }
.an-search-overlay__inner{ width:100%; max-width:640px; }
.an-search-overlay .an-search-form{ position:relative; }
.an-search-overlay input[type="search"]{
  width:100%;
  padding: 18px 54px 18px 22px;
  border-radius: 100px;
  border: 2px solid var(--an-accent);
  background: var(--an-surface);
  color:#fff;
  font-size: 18px;
  outline:none;
}
.an-search-close{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  background:none; border:none; color: var(--an-text-dim); font-size:22px; cursor:pointer;
}
.an-search-suggestions{
  margin-top:14px;
  background: var(--an-surface);
  border:1px solid var(--an-border);
  border-radius: var(--an-radius);
  overflow:hidden;
  display:none;
}
.an-search-suggestions.is-active{ display:block; }
.an-search-suggestions a{
  display:flex; align-items:center; gap:12px;
  padding: 10px 14px;
  color: var(--an-text);
  border-bottom: 1px solid var(--an-border);
}
.an-search-suggestions a:last-child{ border-bottom:none; }
.an-search-suggestions a:hover{ background: var(--an-surface-2); color:var(--an-accent); }
.an-search-suggestions img{ width:40px; height:40px; object-fit:cover; border-radius:6px; background:var(--an-bg-alt); }

/* =========================================================
   2. HERO
========================================================= */
.an-hero{
  position:relative;
  padding: 70px 0 60px;
  overflow:hidden;
  border-bottom: 1px solid var(--an-border);
}
.an-hero__bg{
  position:absolute; inset:0;
  background-size: cover; background-position:center;
  opacity:.25;
  z-index:0;
}
.an-hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,14,26,.2), var(--an-bg) 95%);
}
.an-hero__content{ position:relative; z-index:1; max-width:680px; }
.an-hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--an-accent);
  font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:1.5px;
  margin-bottom: 14px;
}
.an-hero__title{
  font-size: clamp(32px, 5vw, 54px);
  line-height:1.05;
  background: var(--an-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  margin-bottom:.4em;
}
.an-hero__subtitle{ font-size:17px; max-width:560px; }
.an-hero__actions{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }

/* category pills row */
.an-pillnav{
  padding: 18px 0;
  border-bottom: 1px solid var(--an-border);
  overflow-x:auto;
}
.an-pillnav__list{ display:flex; gap:10px; }
.an-pillnav a{
  white-space:nowrap;
  display:flex; align-items:center; gap:8px;
  padding: 9px 18px;
  border-radius:100px;
  background: var(--an-surface);
  border:1px solid var(--an-border);
  color: var(--an-text);
  font-size:14px; font-weight:600;
}
.an-pillnav a:hover, .an-pillnav a.is-active{
  border-color: var(--an-accent);
  color: var(--an-accent);
}

/* =========================================================
   3. SECTIONS & GRIDS
========================================================= */
.an-section{ padding: 46px 0; }
.an-section__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom: 22px;
}
.an-section__title{
  font-size: 24px;
  display:flex; align-items:center; gap:10px;
}
.an-section__title .dashicons{ color: var(--an-accent); }
.an-section__link{ font-size:14px; font-weight:700; white-space:nowrap; }

.an-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.an-grid--6{ grid-template-columns: repeat(6, 1fr); }

.game-card{
  background: var(--an-surface);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.game-card:hover{
  transform: translateY(-6px);
  border-color: var(--an-accent);
  box-shadow: var(--an-shadow);
}
.game-card__link{ display:block; color:inherit; }
.game-card__link:hover{ color:inherit; }
.game-card__thumb{
  position:relative;
  aspect-ratio: 4/3;
  background: var(--an-bg-alt);
  overflow:hidden;
}
.game-card__thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.game-card:hover .game-card__thumb img{ transform: scale(1.08); }
.game-card__placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: var(--an-text-dim); font-size:40px;
}
.game-card__play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  background: rgba(11,14,26,.55);
  color:#fff; font-weight:700; font-size:14px;
  opacity:0; transition: opacity .2s ease;
}
.game-card:hover .game-card__play{ opacity:1; }
.game-card__play::before{
  content:"";
  width:0; height:0;
  border-style:solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--an-accent);
}
.game-card__badge{
  position:absolute; top:10px; left:10px;
  background: var(--an-gradient);
  color:#06111a;
  font-size:11px; font-weight:800;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform:uppercase;
  letter-spacing:.5px;
  z-index:2;
}
.game-card__title{
  font-size:15px;
  margin: 12px 14px 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.game-card__meta{
  display:flex; justify-content:space-between; align-items:center;
  margin: 0 14px 14px;
  font-size:12px;
  color: var(--an-text-dim);
}
.game-card__rating{ color: var(--an-accent-3); font-weight:700; }

/* category showcase tiles */
.an-cat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:16px;
}
.an-cat-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding: 26px 16px;
  border-radius: var(--an-radius);
  background: var(--an-surface);
  border: 1px solid var(--an-border);
  text-align:center;
  color: var(--an-text);
}
.an-cat-tile:hover{ border-color: var(--an-accent-2); color: var(--an-accent-2); transform: translateY(-4px); }
.an-cat-tile__icon{ font-size: 26px; }
.an-cat-tile__count{ font-size:12px; color: var(--an-text-dim); }

/* load more */
.an-loadmore{ text-align:center; margin-top: 34px; }

/* =========================================================
   4. GAME SINGLE / PLAYER
========================================================= */
.an-game{ padding: 34px 0 60px; }
.an-game__crumbs{ font-size:13px; color: var(--an-text-dim); margin-bottom:16px; }
.an-game__crumbs a{ color: var(--an-text-dim); }
.an-game__crumbs a:hover{ color: var(--an-accent); }

.an-game__header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 20px; flex-wrap:wrap;
  margin-bottom: 18px;
}
.an-game__title{ font-size: 30px; margin-bottom:6px; }
.an-game__tags a{
  display:inline-block; font-size:12px; color: var(--an-accent);
  background: rgba(51,230,216,.1); border:1px solid rgba(51,230,216,.3);
  padding:4px 10px; border-radius:100px; margin: 3px 6px 3px 0;
}
.an-game__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.an-player{
  position:relative;
  width:100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--an-radius);
  overflow:hidden;
  border: 1px solid var(--an-border);
  box-shadow: var(--an-shadow);
}
.an-player iframe{ width:100%; height:100%; border:0; }
.an-player__cover{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background-size:cover; background-position:center;
  cursor:pointer;
}
.an-player__cover::before{ content:""; position:absolute; inset:0; background: rgba(6,8,16,.55); }
.an-player__playbtn{
  position:relative; z-index:1;
  width:76px; height:76px; border-radius:50%;
  background: var(--an-gradient);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 8px rgba(51,230,216,.15);
}
.an-player__playbtn::before{
  content:""; width:0; height:0;
  border-style:solid; border-width:12px 0 12px 20px;
  border-color: transparent transparent transparent #06111a;
  margin-left:4px;
}
.an-player__label{ position:relative; z-index:1; color:#fff; font-weight:700; }
.an-player__fullscreen{
  position:absolute; bottom:12px; right:12px; z-index:3;
  background: rgba(11,14,26,.7);
  border:1px solid var(--an-border);
  color:#fff; width:38px; height:38px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.an-game__meta-row{
  display:flex; gap:22px; flex-wrap:wrap;
  margin: 18px 0;
  padding: 16px 0;
  border-top: 1px solid var(--an-border);
  border-bottom: 1px solid var(--an-border);
  font-size:14px;
}
.an-game__meta-row strong{ color:#fff; }

.an-rating{ display:flex; align-items:center; gap:4px; }
.an-rating__star{ cursor:pointer; color: var(--an-border); font-size:22px; }
.an-rating__star.is-filled, .an-rating__star:hover, .an-rating__star:hover ~ .an-rating__star{ color: var(--an-accent-3); }
.an-rating__note{ font-size:13px; color: var(--an-text-dim); margin-left:8px; }

.an-instructions{
  background: var(--an-surface);
  border: 1px solid var(--an-border);
  border-radius: var(--an-radius);
  padding: 18px 22px;
  margin-bottom: 24px;
}
.an-instructions h3{ font-size:16px; margin-bottom:8px; }

.an-content{ font-size:15px; }
.an-content p{ color: var(--an-text); opacity:.85; }

/* =========================================================
   5. LAYOUT: CONTENT + SIDEBAR
========================================================= */
.an-layout{ display:grid; grid-template-columns: 1fr 300px; gap: 34px; align-items:start; }
.an-layout--full{ grid-template-columns: 1fr; }
.an-sidebar .widget{
  background: var(--an-surface);
  border:1px solid var(--an-border);
  border-radius: var(--an-radius);
  padding: 20px;
  margin-bottom:20px;
}
.widget-title{ font-size:15px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; color:var(--an-accent); }
.an-sidebar ul li{ margin-bottom:10px; }
.an-sidebar .cat-item a, .an-sidebar li a{
  display:flex; justify-content:space-between; color: var(--an-text); font-size:14px;
}
.an-sidebar .cat-item a:hover, .an-sidebar li a:hover{ color:var(--an-accent); }

/* pagination */
.an-pagination{ display:flex; gap:8px; margin-top:30px; flex-wrap:wrap; }
.an-pagination a, .an-pagination span{
  padding:9px 15px; border-radius:8px;
  background: var(--an-surface); border:1px solid var(--an-border);
  color: var(--an-text); font-size:14px;
}
.an-pagination .current{ background: var(--an-gradient); color:#06111a; border-color:transparent; font-weight:700; }

/* =========================================================
   6. FOOTER
========================================================= */
.an-footer{ margin-top: 60px; border-top: 1px solid var(--an-border); background: var(--an-bg-alt); }
.an-footer__top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
  padding: 50px 0 30px;
}
.an-footer__brand p{ font-size:14px; }
.an-footer__social{ display:flex; gap:10px; margin-top:14px; }
.an-footer__social a{
  width:36px; height:36px; border-radius:50%;
  background: var(--an-surface); border:1px solid var(--an-border);
  display:flex; align-items:center; justify-content:center; color: var(--an-text);
}
.an-footer__social a:hover{ color: var(--an-accent); border-color: var(--an-accent); }
.an-footer .widget-title{ color:#fff; }
.an-footer-menu li{ margin-bottom:9px; }
.an-footer-menu a{ font-size:14px; color: var(--an-text-dim); }
.an-footer-menu a:hover{ color: var(--an-accent); }
.an-footer__bottom{
  border-top:1px solid var(--an-border);
  padding: 18px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color: var(--an-text-dim); flex-wrap:wrap; gap:10px;
}

/* =========================================================
   7. MISC PAGES (blog/page/404)
========================================================= */
.an-entry{
  background: var(--an-surface); border:1px solid var(--an-border);
  border-radius: var(--an-radius); padding: 28px; margin-bottom:24px;
}
.an-entry h1{ font-size:28px; }
.an-404{ text-align:center; padding: 90px 0; }
.an-404__code{
  font-family: var(--an-font-head); font-size: 110px; font-weight:900;
  background: var(--an-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1;
}
.an-comments{ margin-top:30px; }
.an-comments textarea, .an-comments input[type="text"], .an-comments input[type="email"]{
  width:100%; padding:12px 14px; border-radius:8px; background: var(--an-surface);
  border:1px solid var(--an-border); color:#fff; margin-bottom:12px;
}

/* =========================================================
   8. RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .an-grid{ grid-template-columns: repeat(3,1fr); }
  .an-grid--6{ grid-template-columns: repeat(4,1fr); }
  .an-layout{ grid-template-columns: 1fr; }
  .an-footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
  .an-nav{ display:none; }
  .an-menu-toggle{ display:flex; }
  .an-grid{ grid-template-columns: repeat(2,1fr); gap:14px; }
  .an-grid--6{ grid-template-columns: repeat(3,1fr); }
  .an-hero{ padding: 44px 0 36px; }
  .an-footer__top{ grid-template-columns: 1fr; padding: 34px 0 20px; }
  .an-game__header{ flex-direction:column; }
}
@media (max-width: 480px){
  .an-grid, .an-grid--6{ grid-template-columns: repeat(2,1fr); }
}

/* mobile off-canvas nav */
.an-mobile-nav{
  position:fixed; top:0; right:-320px; width:300px; height:100%; z-index:300;
  background: var(--an-bg-alt); border-left:1px solid var(--an-border);
  padding: 24px; transition: right .25s ease;
  overflow-y:auto;
}
.an-mobile-nav.is-active{ right:0; }
.an-mobile-nav ul li{ margin-bottom:6px; }
.an-mobile-nav a{ display:block; padding:12px 10px; color:#fff; font-weight:600; border-radius:8px; }
.an-mobile-nav a:hover{ background: var(--an-surface-2); color:var(--an-accent); }
.an-mobile-nav__close{ background:none; border:none; color:#fff; font-size:24px; margin-bottom:16px; cursor:pointer; }
.an-scrim{ position:fixed; inset:0; background: rgba(0,0,0,.5); z-index:290; display:none; }
.an-scrim.is-active{ display:block; }

/* =========================================================
   CLOUDARCADE CONNECT COMPATIBILITY
   Restyles the markup CloudArcade Connect renders itself
   ([cloudarcade_games] shortcode grid, single-game iframe player,
   widgets) so it matches the Arcade Nova visual identity.
   Loaded after cloudarcade-public.css so these rules win.
========================================================= */

/* inline pill nav variant used on the Games page template */
.an-pillnav--inline{ padding: 0 0 18px; border-bottom: none; margin-bottom: 20px; }

/* --- [cloudarcade_games] shortcode grid (used anywhere the shortcode is placed manually) --- */
.cloudarcade-game-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:18px;
  margin: 20px 0;
}
.cloudarcade-game-item{
  background: var(--an-surface);
  border:1px solid var(--an-border);
  border-radius: var(--an-radius);
  box-shadow:none;
  transition: transform .2s ease, border-color .2s ease;
}
.cloudarcade-game-item:hover{
  transform: translateY(-5px);
  border-color: var(--an-accent);
  box-shadow: var(--an-shadow);
}
.cloudarcade-game-thumb, .cloudarcade-game-item img.cloudarcade-game-thumb{
  border-radius: var(--an-radius) var(--an-radius) 0 0;
}
.cloudarcade-game-grid .cloudarcade-game-title,
.cloudarcade-game-title{
  font-family: var(--an-font-head);
  color:#fff;
}
.cloudarcade-game-category{ color: var(--an-text-dim); }
.cloudarcade-pagination .page-numbers{
  background: var(--an-surface);
  color: var(--an-text);
  border:1px solid var(--an-border);
  border-radius: var(--an-radius-sm);
}
.cloudarcade-pagination .page-numbers.current{
  background: var(--an-gradient);
  color:#06111a;
  border-color:transparent;
  font-weight:700;
}
.cloudarcade-pagination .page-numbers:hover:not(.current){
  border-color: var(--an-accent);
  color: var(--an-accent);
  background: var(--an-surface);
}

/* --- Single game page: iframe player injected via the_content --- */
.an-content--game .cloudarcade-game-iframe-container{
  border-radius: var(--an-radius);
  box-shadow: var(--an-shadow);
  background:#000;
}
.an-content--game .cloudarcade-game-header{
  margin-bottom: 16px;
}
.an-content--game .cloudarcade-fullscreen-btn{
  background: var(--an-gradient);
  color:#06111a;
  font-weight:700;
  border-radius: var(--an-radius-sm);
  border:none;
}
.an-content--game .cloudarcade-fullscreen-btn:hover{ opacity:.9; }
.an-content--game .cloudarcade-game-instructions{
  margin-top:24px;
  padding:16px 18px;
  background: var(--an-surface);
  border:1px solid var(--an-border);
  border-radius: var(--an-radius);
}
.an-content--game .cloudarcade-game-instructions h3{ margin-bottom:.4em; }
.an-content--game .cloudarcade-game-categories{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:12px 0 0; padding:0;
}
.an-content--game .cloudarcade-game-categories li{ margin:0; }
.an-content--game .cloudarcade-game-categories a{
  display:inline-block;
  padding:6px 14px;
  border-radius:100px;
  background: var(--an-surface);
  border:1px solid var(--an-border);
  font-size:13px; font-weight:600;
  color: var(--an-text);
}
.an-content--game .cloudarcade-game-categories a:hover{ border-color: var(--an-accent); color: var(--an-accent); }
.an-content--game .cloudarcade-mobile-play-button{ background: var(--an-accent-2); }
.an-content--game .cloudarcade-mobile-play-button:hover{ background: var(--an-accent-2); opacity:.9; }

/* --- CloudArcade widgets (games list / categories) in the sidebar --- */
.an-sidebar .cloudarcade-widget-game-title a{ color: var(--an-text); }
.an-sidebar .cloudarcade-widget-game-title a:hover{ color: var(--an-accent); }
.an-sidebar .cloudarcade-category-link{ color: var(--an-text); }
.an-sidebar .cloudarcade-category-count{ background: var(--an-surface-2); color: var(--an-text-dim); }