/*
Theme Name: BrayGames für NetzGames
Description: Responsive Fassung des vorhandenen BrayGames-Designs für aktuelle WordPress- und MyArcade-Versionen.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: braygames
*/

:root {
  color-scheme: light;
  --ink: #332714;
  --muted: #67533b;
  --gold: #ffc600;
  --paper: #fff9e5;
  --blue: #d4f2ff;
  --red: #a2251f;
  --line: #e4c57b;
}
* { box-sizing: border-box; }
body { margin: 0; background: #ffc600 url(assets/bg.png) center top; color: var(--ink); font: .95rem/1.55 Verdana, system-ui, sans-serif; }
a { color: var(--red); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #12547c; outline-offset: 3px; }
img { display: block; max-width: 100%; }
.wrap { width: min(61rem, calc(100% - 2rem)); margin-inline: auto; }
.skip-link { position: absolute; transform: translateY(-150%); padding: .8rem; background: white; z-index: 9; }
.skip-link:focus { transform: translateY(0); }
.topbar { background: #fff; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: .3rem 1.2rem; flex-wrap: wrap; padding-block: .45rem; }
.quick-links { display: flex; flex-wrap: wrap; gap: .85rem; font-weight: 700; }
.masthead { background: #ffc600 url(assets/bgheader.png) center top repeat-x; padding-block: .8rem .45rem; }
.masthead-inner { display: flex; align-items: stretch; justify-content: space-between; gap: .6rem; padding: .55rem; border: 2px solid white; border-radius: .48rem; background: #fff5cd; }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.brand img, .custom-logo { max-width: min(220px, 32vw); height: auto; }
.brand-banner { flex: 1; display: grid; align-content: center; border: 1px solid #84c8df; border-radius: .3rem; background: #d4f2ff; padding: .4rem .75rem; text-align: center; }
.brand-banner strong { font-size: clamp(1.1rem, 4vw, 1.65rem); color: #286279; }
.brand-banner span { color: #4c5b63; font-size: .83rem; }
.search { display: flex; gap: .35rem; flex: 0 1 19rem; }
.search input { min-width: 0; width: 100%; border: 1px solid #97723d; padding: .5rem .75rem; border-radius: .45rem; font: inherit; }
.button { display: inline-block; border: 1px solid #8b211b; border-radius: .45rem; color: white; background: var(--red); padding: .55rem .85rem; text-decoration: none; font: inherit; font-weight: 750; cursor: pointer; }
.category-nav { background: #ffc600; border-bottom: 3px solid #e74131; color: white; }
.category-nav .wrap { display: flex; flex-wrap: wrap; gap: .15rem; list-style: none; margin-block: 0; padding-inline-start: 0; }
.category-nav a { display: inline-block; color: white; background: var(--red); border-radius: .35rem .35rem 0 0; font-weight: 700; padding: .3rem .55rem; text-decoration: none; }
.category-nav a:hover, .category-nav .current-cat a { text-decoration: underline; }
.main { padding-block: .65rem 2rem; }
.hero, .panel { background: #fff; border: 1px solid var(--line); border-radius: .48rem; padding: .8rem; }
.hero { background: #fff4c6; margin-bottom: .6rem; }
.hero.has-feature { display: grid; grid-template-columns: 1.15fr 1fr .78fr; align-items: stretch; gap: .55rem; padding: .45rem; border: 2px solid #fff; }
.featured-art img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border: 2px solid #fff; border-radius: .4rem; }
.hero-copy { padding: .6rem; }
.feature-aside { background: #d4f2ff; border: 2px solid #fff; border-radius: .4rem; padding: .5rem .75rem; }
.feature-aside ul { padding-left: 1.15rem; }
.eyebrow { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 850; color: #822720; }
h1, h2, h3 { line-height: 1.15; margin-block: .4em; }
h1 { font-size: clamp(1.5rem, 4vw, 2.15rem); letter-spacing: -.035em; }
.hero.has-feature h1 { font-size: clamp(1.05rem, 2.4vw, 1.5rem); }
h2 { font-size: 1.15rem; }
.hero p:last-child { margin-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; list-style: none; padding: 0; margin: .65rem 0; }
.card { overflow: hidden; background: white; border: 2px solid #e7e7e7; border-radius: .4rem; }
.card a { display: block; color: var(--ink); text-decoration: none; }
.card a:hover strong { text-decoration: underline; }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--blue); }
.card strong { display: block; padding: .35rem .45rem; font-size: .8rem; color: var(--red); }
.carousel { display: flex; align-items: center; gap: .3rem; background: #fff5ce; border: 2px solid white; border-radius: .4rem; padding: .3rem; margin-bottom: .65rem; }
.carousel-track { display: flex; gap: .4rem; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0; }
.carousel-track .card { flex: 0 0 calc((100% - 2.4rem) / 7); min-width: 6.8rem; scroll-snap-align: start; }
.carousel-control { border: 0; background: transparent; color: var(--red); font: 800 1.5rem/1 sans-serif; cursor: pointer; }
.category-panels, .footer-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .65rem; }
.footer-widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arcade-widget { background: white; padding: .65rem; border-radius: .45rem; }
.pagination { margin-top: 1rem; }
.game-activation { background: #ffedb4; border: 1px solid var(--line); border-radius: .65rem; padding: 1rem; }
.game-activation p { margin: 0 0 .6rem; }
.game-frame { display: block; width: 100%; min-height: 22rem; height: min(72vh, 46rem); border: 0; background: #16171c; border-radius: .65rem; }
.content { max-width: 46rem; overflow-wrap: anywhere; }
.site-footer { background: #f6ce66; border-top: 1px solid #cc943e; padding-block: 1rem; color: #543615; }
.site-footer p { margin-block: .3rem; }
@media (max-width: 35rem) {
  .wrap { width: calc(100% - 1.25rem); }
  .search { flex: 1 0 100%; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .card strong { font-size: .9rem; }
  .hero.has-feature, .category-panels, .footer-widgets { grid-template-columns: 1fr; }
  .feature-aside { display: none; }
}