/* Soft console colors and readable arcade display type. Font license: assets/fonts/LICENSE-Chakra-Petch-OFL.txt. */
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--accent)}
.cover-fallback{background:linear-gradient(135deg,#dce6d7,#a4b7aa);color:#334b3e;font-family:var(--retro);font-weight:700}.cover-fallback.hue-1{background:linear-gradient(135deg,#d7e7e5,#99b8b3)}.cover-fallback.hue-2{background:linear-gradient(135deg,#edd9dc,#c6a2ac)}.cover-fallback.hue-3{background:linear-gradient(135deg,#efdfcc,#cab094)}.cover-fallback.hue-4{background:linear-gradient(135deg,#dce4ed,#a0b0c7)}.cover-fallback.hue-5{background:linear-gradient(135deg,#e7e7cf,#b3b68c)}
[data-theme=dark] .cover-fallback{background:linear-gradient(135deg,#516c5b,#34493f);color:#e0e9da}[data-theme=dark] .cover-fallback.hue-1{background:linear-gradient(135deg,#4d6b66,#314941)}[data-theme=dark] .cover-fallback.hue-2{background:linear-gradient(135deg,#795c63,#4c3d43)}[data-theme=dark] .cover-fallback.hue-3{background:linear-gradient(135deg,#7a6855,#4e4337)}[data-theme=dark] .cover-fallback.hue-4{background:linear-gradient(135deg,#586e7b,#364853)}[data-theme=dark] .cover-fallback.hue-5{background:linear-gradient(135deg,#6b7250,#424a34)}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/chakra-petch-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--retro:"Chakra Petch","Segoe UI",sans-serif;--bg:#f4f1e9;--surface:#fdfbf6;--header:#e7ebe2;--border:#d8ddd1;--muted:#757e76;--text:#303c36;--accent:#6d8877;--orange:#c77c61;--sidebar-color:#efeee5;--chip:#f8f6ee;--chip-border:#d9ddd1;--hover:#e2e8da;--active:#d9e5d1;--active-text:#3f604d;--icon-color:#798d7c;--search:#f8f9f2;--button:#ccdcc4;--button-text:#385240;--subtle:#889086;--panel:#fcfaf3;--toolbar:#dfe6d8;--shadow:#354c3020;color-scheme:light}
:root[data-theme=dark]{--bg:#192123;--surface:#263031;--header:#26302e;--border:#374541;--muted:#a7b5ac;--text:#e3e9df;--accent:#b3c5a6;--orange:#e1ae94;--sidebar-color:#202929;--chip:#293434;--chip-border:#3c4b43;--hover:#35423d;--active:#3f4f42;--active-text:#d0dfc0;--icon-color:#a5b99e;--search:#34423d;--button:#b4cba4;--button-text:#293d2e;--subtle:#86998e;--panel:#263031;--toolbar:#313e39;--shadow:#0004;color-scheme:dark}
body{background:var(--bg);color:var(--text)}.topbar{background:var(--header);border-bottom:1px solid var(--border);box-shadow:0 2px 0 var(--shadow)}.brand{font-family:var(--retro);font-size:28px;letter-spacing:-.4px;font-weight:700}.brand-symbol{background:#dba589;border-radius:8px;box-shadow:2px 2px 0 #936d5625;color:#324336}.brand-fg{color:var(--orange)}.icon-button{color:var(--icon-color)}.icon-button:hover{background:var(--hover);color:var(--active-text)}.searchbox{background:var(--search);color:var(--icon-color);border:1px solid var(--border);border-radius:13px}.searchbox input{color:var(--text)}.searchbox input::placeholder{color:var(--muted);opacity:.9}.searchbox:focus-within{border-color:var(--accent)}.searchbox kbd{border-color:var(--border);color:var(--subtle)}.header-actions{font-family:var(--retro);font-weight:700}.my-games,.surprise-button{font-family:var(--retro);font-size:15px;font-weight:700;border-radius:10px;background:var(--hover);color:var(--text);border:1px solid var(--border);padding:8px 13px}.my-games:hover{background:var(--active)}.surprise-button{background:var(--button);color:var(--button-text);border-color:#92a68c60;box-shadow:0 2px 0 #52664725}.surprise-button:hover{background:#b9d0ad;color:#2f4838}.favorite-count{background:var(--active-text);color:var(--bg)}.theme-toggle{width:36px;height:36px;border:1px solid var(--border);border-radius:10px;background:var(--chip);display:grid;place-items:center;color:var(--icon-color);flex-shrink:0}.theme-toggle:hover{background:var(--hover)}.theme-toggle .icon{width:18px;height:18px}.theme-sun{display:none}[data-theme=dark] .theme-sun{display:flex}[data-theme=dark] .theme-moon{display:none}.sidebar{background:var(--sidebar-color);border-right:1px solid var(--border);scrollbar-color:var(--border) transparent}.nav-item{font-family:var(--retro);font-size:15px;line-height:1.3;font-weight:700;color:var(--text);gap:11px}.nav-item .icon{color:var(--icon-color);stroke-width:2}.nav-item:hover{background:var(--hover);color:var(--active-text)}.nav-item.active{background:var(--active);color:var(--active-text);box-shadow:inset 3px 0 var(--accent)}.nav-item.active .icon{color:var(--active-text)}.nav-item small{color:var(--muted);font-family:var(--retro);font-size:12px}.nav-divider{background:var(--border)}.nav-label{font-family:var(--retro);font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:700}.sidebar-footer{color:var(--muted)}.sidebar-footer small{color:var(--subtle)}.sidebar-footer a:hover{color:var(--active-text)}.online-dot{background:var(--accent)}.eyebrow{color:var(--muted);font-weight:700}.home-intro h1{font-family:var(--retro);font-size:29px;font-weight:700;letter-spacing:0}.wave{color:#bd918b}.catalog-count{color:var(--muted)}.catalog-count .icon{color:var(--icon-color)}.quick-categories a{font-family:var(--retro);font-size:14px;font-weight:700;background:var(--chip);border-color:var(--chip-border);color:var(--text);border-radius:10px;padding:6px 13px}.quick-categories a .icon{color:var(--icon-color)}.quick-categories a:hover{background:var(--active);border-color:var(--accent)}.quick-categories a:nth-child(3n+2){background:#f0e3d9;color:#674e42;border-color:#e2cdbd}.quick-categories a:nth-child(3n){background:#e1e9ed;color:#425d6a;border-color:#c8d6dd}[data-theme=dark] .quick-categories a:nth-child(3n+2){background:#453a32;color:#e0c2ac;border-color:#594e43}[data-theme=dark] .quick-categories a:nth-child(3n){background:#32434b;color:#c3d6de;border-color:#4b626c}.section-heading h2{font-family:var(--retro);font-size:23px;font-weight:700;letter-spacing:0}.section-heading>a{font-family:var(--retro);font-size:13px;font-weight:700;color:var(--muted)}.section-heading>a:hover{color:var(--active-text)}.heading-spark{color:#b38e87}.game-card{border:1px solid #0000000b;box-shadow:0 2px 0 var(--shadow);background:var(--surface);border-radius:10px}.game-card:hover{box-shadow:0 7px 18px var(--shadow)}.card-caption{color:#fff;background:linear-gradient(transparent,#172721b3)}.card-caption strong{font-family:var(--retro);font-size:15px;letter-spacing:0;font-weight:700}.featured-large .card-caption strong{font-family:var(--retro);font-size:24px;letter-spacing:0}.card-badge{background:#d99877;border-radius:5px}.card-badge .icon{stroke:#fff7ef}.browse-categories{border-color:var(--border)}.category-grid>a{background:var(--chip);border-color:var(--border);font-family:var(--retro);font-size:15px;font-weight:700;border-radius:9px}.category-grid>a:hover{background:var(--active);border-color:var(--accent)}.category-grid .icon:first-child{color:var(--icon-color)}.category-grid .icon:last-child{color:var(--subtle)}.page-footer{color:var(--muted)}.page-footer .brand{color:var(--text);font-family:var(--retro);font-size:21px;letter-spacing:-.2px}.game-shell{border-color:var(--border);background:var(--surface)}.game-stage{background:#202825}.game-launch .eyebrow{color:#ebe9dd}.game-launch h1{font-family:var(--retro);font-size:36px;letter-spacing:0;color:#f4f0e6;text-shadow:0 2px 3px #0006}.game-launch>p{color:#e0ddd2}.launch-button,.primary-button{background:#cedcbc;color:#354737;border:1px solid #e2e9d5;border-radius:11px;box-shadow:0 3px 0 #25372a45;font-family:var(--retro);font-weight:700;font-size:20px;padding:10px 28px}.launch-button:hover,.primary-button:hover{background:#bcd1aa;color:#263b2c}.launch-button .icon{fill:currentColor}.launch-cover{border-radius:9px;box-shadow:0 5px 0 #0f281d50}.player-toolbar{background:var(--toolbar)}.player-name>strong{font-family:var(--retro);font-size:16px;font-weight:700}.small-game-icon{background:var(--accent);color:var(--bg);border-radius:5px}.small-game-icon .icon{stroke:var(--bg)}.player-actions .icon-button{background:var(--chip);border:1px solid var(--border);border-radius:9px;color:var(--icon-color)}.player-actions .icon-button:hover{background:var(--active);color:var(--active-text)}.player-actions .favorite-button.is-favorite{background:#eed9d8;color:#a16061;border-color:#ddc0bf}[data-theme=dark] .player-actions .favorite-button.is-favorite{background:#593d3d;color:#e1b4b0;border-color:#805e5b}.favorite-button.is-favorite .icon{fill:currentColor;fill-opacity:.2}.toolbar-divider{background:var(--border)}.rail-heading h2{font-family:var(--retro);font-size:20px;font-weight:700}.rail-heading>.icon{color:var(--icon-color)}.recommendation-grid .card-caption strong{font-family:var(--retro);font-size:12px}.breadcrumbs{color:var(--muted);font-family:var(--retro);font-weight:700;font-size:13px}.breadcrumbs a{color:var(--active-text)}.breadcrumbs .icon{color:var(--subtle)}.game-info{background:var(--panel);border-color:var(--border)}.game-info h2{font-family:var(--retro);font-size:30px;font-weight:700;letter-spacing:0}.game-info p{color:var(--muted)}.game-tags>a{background:var(--active);color:var(--active-text);font-family:var(--retro);font-size:13px;font-weight:700;border-radius:8px}.game-tags>a:hover{background:var(--hover)}.controls-card{border-color:var(--border)}.controls-card>.icon{color:var(--icon-color)}.controls-card h3{font-family:var(--retro);font-size:18px;font-weight:700}.controls-card>span{color:var(--subtle)}.collection-header h1{font-family:var(--retro);font-size:38px;letter-spacing:0}.collection-header p{color:var(--muted)}.result-count{color:var(--muted);border-color:var(--border)}.pagination a{border-color:var(--border);background:var(--chip);font-family:var(--retro);font-size:17px;font-weight:700}.pagination a:hover,.pagination a.current{background:var(--active);border-color:var(--accent);color:var(--active-text)}.empty-state>.icon{color:var(--icon-color)}.empty-state h1,.empty-state h2,.text-page h1{font-family:var(--retro);font-weight:700;letter-spacing:0}.empty-state p,.text-page p{color:var(--muted)}.toast{border-color:var(--border);background:var(--active);color:var(--active-text);box-shadow:0 6px 24px var(--shadow);font-family:var(--retro);font-weight:700;font-size:16px}.skip-link{background:var(--button);color:var(--button-text)}.loading-spinner{border-color:#718272;border-top-color:#d7e4c9}.game-loading strong{font-family:var(--retro);font-size:20px;color:#eceee6}.loading-hint{color:#c0c9be}.recent-grid .card-caption strong{font-size:13px}
@media(max-width:1150px){.nav-item{font-size:14px}.header-actions .my-games,.header-actions .surprise-button{font-size:14px}.topbar{gap:15px}.home-intro h1{font-size:27px}}
@media(max-width:850px){.brand{font-size:27px}.home-intro h1{font-size:26px}.section-heading h2{font-size:22px}}
@media(max-width:600px){.topbar{gap:8px}.brand{font-size:23px;gap:5px}.brand-area{gap:8px}.brand-symbol{width:23px;height:23px}.searchbox{padding:0 9px;border-radius:9px}.searchbox input{font-size:10px}.header-actions{gap:6px}.theme-toggle{width:29px;height:29px;border-radius:8px}.theme-toggle .icon{width:15px;height:15px}.my-games{width:25px;height:29px;border:0;background:transparent!important}.my-games .icon{width:18px;height:18px}.home-intro h1{font-size:26px}.quick-categories a{font-size:13px;padding:5px 10px}.section-heading h2{font-size:21px}.section-heading>a{font-size:12px}.card-caption strong{font-size:12px}.featured-large .card-caption strong{font-size:19px}.recommendation-grid .card-caption strong{font-size:11px}.category-grid>a{font-size:13px}.game-launch h1{font-size:30px}.launch-button{font-size:18px;padding:8px 25px}.player-name>strong{font-size:14px}.breadcrumbs{font-size:12px}.controls-card{border-color:var(--border)}.game-info h2{font-size:27px}.collection-header h1{font-size:33px}.page-footer .brand{font-size:20px}}

.portrait-game .game-stage{width:100%;aspect-ratio:4/3;min-height:500px}@media(max-width:600px){.portrait-game .game-stage{aspect-ratio:3/4;min-height:640px}}

/* Joystick mark: original PlayFG SVG, shared by the header and favicon. */
.brand-symbol{width:24px;height:23px;width:1.05cap;height:1cap;background:transparent;border-radius:0;box-shadow:none;flex-shrink:0}
.brand-symbol img{display:block;width:100%;height:100%}
.sidebar-footer{padding:10px 1px 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.sidebar-footer .footer-brandline{display:block;margin:0;color:var(--text);font-size:12px;font-weight:600;white-space:nowrap}
.sidebar-footer .footer-meta{display:flex;align-items:center;gap:5px;margin:7px 0 0;white-space:nowrap}
.sidebar-footer .footer-meta a{color:var(--text)}
.sidebar-footer .footer-meta a:hover{color:var(--active-text);text-decoration:underline}
.nav-item{font-weight:600;font-size:15px;line-height:1.45}
.card-caption strong,.recommendation-grid .card-caption strong,.recent-grid .card-caption strong{font-weight:600}
.section-heading h2{font-size:22px}
@media(max-width:1150px){.nav-item{font-size:14px}}
@media(max-width:600px){.brand{font-size:22px;letter-spacing:-.25px}.brand-symbol{width:19px;height:18px;width:1.05cap;height:1cap}.brand-area{gap:7px}.section-heading h2{font-size:20px}.nav-item{font-size:15px}}

/* Primary slogan is the single H1; supporting copy stays readable beside it. */
.home-intro{display:block;align-items:initial;justify-content:initial}
.home-heading-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.home-intro .home-heading-row h1{font-size:44px;line-height:1.16;letter-spacing:-.7px;margin:0}
.home-tagline{font-family:var(--retro);font-size:18px;line-height:1.45;font-weight:600;color:var(--text);margin:0;padding-left:24px;border-left:2px solid var(--border)}
.home-tagline span{color:var(--accent)}
.home-description{font-size:14px;line-height:1.75;color:var(--muted);max-width:780px;margin:15px 0 11px}
.home-intro .catalog-count{display:inline-flex;font-size:12px;margin:0;gap:7px}
@media(max-width:760px){.home-heading-row{gap:15px}.home-intro .home-heading-row h1{font-size:37px}.home-tagline{font-size:16px;padding-left:15px}}
@media(max-width:600px){.home-heading-row{display:block}.home-intro .home-heading-row h1{font-size:35px}.home-tagline{padding:0;border:0;margin-top:9px;font-size:16px}.home-description{font-size:13px;margin-top:13px}.home-intro .catalog-count{font-size:11px}}

/* Readable category introduction with game count below the paragraph. */
.category-header .category-description{display:block;max-width:900px;font-size:14px;line-height:1.8;color:var(--text);margin:12px 0 0}
.category-summary{display:flex;align-items:center;margin-top:13px}
.category-summary .result-count{font-size:11px}
@media(max-width:600px){.category-header .category-description{font-size:13px;line-height:1.75}}

/* Equal visible heights, contained within a 300 by 50 px logo area. */
:root{--top:72px;--brand-height:42px;--brand-font:60px;--brand-width:44.1px}
.topbar{gap:22px}
.brand-area{width:auto;gap:14px}
.brand-area .brand{max-width:300px;height:var(--brand-height);font-size:var(--brand-font);line-height:var(--brand-height);letter-spacing:-1px;gap:8px}
.brand-area .brand-symbol{width:var(--brand-width);height:var(--brand-height)}
.brand-area .brand-symbol img{width:100%;height:100%}
.topbar .searchbox{width:auto;flex:1;min-width:0;margin:0}
.header-actions{flex-shrink:0}
@media(max-width:850px){
  :root{--brand-height:32px;--brand-font:45.714286px;--brand-width:33.6px}
  .topbar{gap:12px}
  .brand-area{gap:10px}
}
@media(max-width:600px){
  :root{--top:64px;--brand-height:26px;--brand-font:37.142857px;--brand-width:27.3px}
  .topbar{padding:0 12px;gap:8px}
  .brand-area{gap:8px}
  .brand-area .brand{letter-spacing:-.6px;gap:5px}
  .topbar .searchbox input{font-size:12px}
  .sidebar{box-shadow:none}
  body.mobile-nav-open .sidebar{box-shadow:12px 0 40px #0003}
}
@media(max-width:440px){
  :root{--top:110px;--brand-height:36px;--brand-font:51.428571px;--brand-width:37.8px}
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--brand-height) 38px;column-gap:9px;row-gap:10px;padding:12px}
  .brand-area{grid-column:1/-1;grid-row:1;width:100%;justify-content:center}
  .brand-area .brand{letter-spacing:-1.5px;gap:8px}
  .brand-area .menu-toggle{position:absolute;left:12px;top:calc(var(--brand-height) + 29px);width:24px;height:24px}
  .topbar .searchbox{grid-column:1;grid-row:2;width:calc(100% - 36px);height:38px;max-width:none;flex:none;margin:0 0 0 36px}
  .header-actions{grid-column:2;grid-row:2;justify-content:flex-end}
}
