/* Kopf- und Fußzeile (nach theme.css, vor light.css).
   Muster wie bei großen Spieleplattformen: Navigation mit Unterstrich an der Unterkante der Kopfleiste,
   Konto-Bereich in einheitlichen Kacheln und Play als feste rote Fläche ganz rechts.
   Fußzeile mit Marke, Discord, Linkspalten und Hinweis auf GAMPEON Studios. Nur Muster, keine fremden Grafiken. */

/* ---------------------------------------------------------------- Kopfleiste */
.topbar { padding-right:0; }
.tn { position:relative; height:var(--top-h); padding:0 18px; border-radius:0; background:none; border:0; }
.tn.active, .tn[aria-expanded="true"] { background:none; box-shadow:none; color:#fff; }
.tn.active { box-shadow:none; }
.tn::after { content:""; position:absolute; left:18px; right:18px; bottom:0; height:4px; border-radius:4px 4px 0 0; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; transition:transform .15s; }
.tn.active::after { transform:none; }
.tn:hover:not(.active)::after, .tn[aria-expanded="true"]:not(.active)::after { transform:none; background:rgba(237,242,244,.22); }
.tn:focus-visible { outline:2px solid #fff; outline-offset:-16px; border-radius:14px; }
/* Menüs hängen direkt an der Kopfleiste. */
.top-nav .pop { top:100%; border-top-left-radius:0; border-top-right-radius:0; }

.account { align-self:stretch; gap:10px; }
.coin-chip { height:44px; padding:0 14px; border-radius:12px; border:0; background:rgba(0,0,0,.18); color:#EDF2F4; }
.coin-chip:hover { background:rgba(0,0,0,.3); color:#fff; }
.account .login-btn { box-shadow:none; }
.account .login-btn:hover { box-shadow:inset 0 0 0 2px rgba(237,242,244,.35); }

/* Play: volle Höhe, schräge linke Kante, bündig am rechten Rand. */
.account .play-btn { align-self:stretch; height:auto; margin-left:6px; padding:0 34px 0 40px; gap:10px; border-radius:0; box-shadow:none;
  font:700 1.12rem/1 var(--text); letter-spacing:.1em; text-transform:uppercase; clip-path:polygon(18px 0, 100% 0, 100% 100%, 0 100%); }
.account .play-btn svg.i { width:18px; height:18px; }
.account .play-btn:hover { background:var(--accent-strong); }
.account .play-btn:focus-visible { outline:2px solid #fff; outline-offset:-12px; }

/* Zwischen 1101 und 1280 px ist neben der Navigation kaum Platz: Suche als Symbol, beim Antippen breit. */
@media (min-width:1101px) and (max-width:1280px) {
  .search { position:relative; flex:0 0 48px; width:48px; padding:0; justify-content:center; cursor:pointer; }
  .search input { position:absolute; inset:0; opacity:0; padding:0 0 0 48px; cursor:pointer; }
  .search .ico { pointer-events:none; }
  .search:focus-within { flex:1 1 auto; max-width:none; justify-content:flex-start; padding:0 18px; }
  .search:focus-within input { position:static; opacity:1; padding:0; cursor:text; }
  .topbar:has(.search:focus-within) .top-nav { display:none; }
}

/* Hinweisleiste unter der Kopfleiste: ruhig, damit Play die einzige rote Fläche oben bleibt. */
.preview-bar { background:#1f2133; color:rgba(237,242,244,.75); border-bottom:1px solid rgba(255,255,255,.05); font-size:.82rem; padding:7px 28px; }
.preview-bar::before { content:""; display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); vertical-align:1px; }

@media (max-width:900px) { .preview-bar { padding:7px 16px; } }
/* Am Handy steht der Kontostand in der Wallet, damit Play sichtbar bleibt. */
@media (max-width:480px) { .account .coin-chip { display:none; } }
@media (max-width:640px) {
  .account { gap:8px; }
  .coin-chip { height:40px; padding:0 10px; border-radius:10px; }
  .account .play-btn { margin-left:2px; padding:0 18px 0 26px; clip-path:polygon(12px 0, 100% 0, 100% 100%, 0 100%); }
  .account .play-btn span { display:none; }
}

/* ---------------------------------------------------------------- Fußzeile */
.foot { display:block; margin-top:24px; padding:48px max(32px, calc((100% - var(--page)) / 2 + 32px)) 24px; background:var(--side);
  border-top:1px solid var(--line); color:var(--muted); font-size:.95rem; font-weight:500; }
.foot a { color:var(--muted); }
.foot a:hover { color:var(--fg); }
.foot-top { display:grid; grid-template-columns:minmax(240px, 1.2fr) minmax(0, 3fr); gap:48px; padding-bottom:36px; border-bottom:1px solid var(--line); }
.foot-brand .brand .word { height:18px; }
.foot-brand p { margin:16px 0 20px; max-width:300px; line-height:1.5; }
.foot a.btn.foot-dc { color:var(--fg); }
.foot a.btn.foot-dc:hover { color:var(--fg); }
.foot-dc svg.i { width:18px; height:18px; }
.foot-cols { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
.foot-cols > div { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.foot-h { margin:0 0 4px; color:var(--fg); font:700 .8rem/1.2 var(--text); letter-spacing:.12em; text-transform:uppercase; }
.foot-cols a { font-weight:600; }
.foot-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; padding-top:22px; font-size:.88rem; }
.foot-studio { display:inline-flex; align-items:center; gap:8px; }
.foot-studio b { color:var(--fg); font-weight:700; }
.foot-studio svg.i { width:13px; height:13px; }
.foot-bottom .theme-seg { margin-left:auto; }
/* Rechtstexte (statische Seiten unter /legal/) */
.foot-legal { display:flex; flex-wrap:wrap; gap:6px 16px; }
.foot-legal a { font-weight:600; }
.foot .word-l { display:none; }
:root[data-theme="light"] .foot .word-d { display:none; }
:root[data-theme="light"] .foot .word-l { display:block; }

@media (max-width:900px) {
  .foot { padding:36px 16px 20px; }
  .foot-top { grid-template-columns:minmax(0, 1fr); gap:32px; }
  .foot-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:28px; }
}
@media (max-width:640px) {
  .foot-bottom { flex-direction:column; align-items:flex-start; }
  .foot-bottom .theme-seg { margin-left:0; }
}