html, body {
  min-height: 100%;
  height: auto;
}

body {
  display: block !important;
  align-items: normal !important;
  justify-content: normal !important;
  padding-top: var(--safe-topbar) !important;
  box-sizing: border-box !important;
}

main.page, .container {
  display: block !important;
  margin-top: 0 !important;
  padding-top: calc(var(--topbar-height) + 16px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 540px) {
  main.page, .container {
    padding-top: calc(var(--safe-topbar) + 8px) !important;
  }
}

:root {
  --topbar-height: var(--topbar-height, 64px);
  --safe-topbar: calc(env(safe-area-inset-top, 0px) + var(--topbar-height));
}

html { scroll-padding-top: var(--safe-topbar) !important; }

body {
  padding-top: var(--safe-topbar) !important;
  box-sizing: border-box !important;
}

/*
header.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--topbar-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, rgba(7,16,42,0.75), rgba(7,16,42,0.55));
  padding: 8px 12px !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
*/

/* ===== Fix narrow safe-area banding (iPhone 14 Pro Max, dynamic island) ===== */
header.topbar {
  /* include safe-area inset in the header's layout */
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px)) !important;

  /* slightly stronger top opacity to avoid tiny peek-through while keeping translucency */
  background: linear-gradient(180deg, rgba(7,16,42,0.88), rgba(7,16,42,0.55)) !important;

  /* keep blur but tuned */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  /* help the browser rasterize cleanly and avoid banding */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
  overflow: visible; /* allow the ::before pseudo-element */
}

/* Fill the safe-area top with a matching, slightly more opaque strip.
   This covers tiny rounding gaps and subpixel seams. */
header.topbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, rgba(7,16,42,0.95), rgba(7,16,42,0.88));
  pointer-events: none;
  z-index: 0;
}

/* Ensure header content (nav, menu button) sits above the pseudo-element */
header.topbar > * {
  position: relative;
  z-index: 1;
}

header.topbar .topnav {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

header.topbar .menu-button {
  pointer-events: auto !important;
  position: absolute !important;
  right: 12px !important;
  top: 8px !important;
  z-index: 1300 !important;
}

.main, .page, .container, main, .card {
  padding-top: calc(var(--topbar-height) + 20px) !important;
}

@media (max-width: 540px) {
  header.topbar .topnav { display: none !important; }
  header.topbar .menu-button { display: flex !important; }
  main, .card, .container { padding-top: calc(var(--topbar-height) + 12px) !important; }
}

html,body{height:100%; margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;}
body{
  background:
    radial-gradient(900px 400px at 8% 10%, rgba(123,47,247,0.12), transparent 8%),
    radial-gradient(700px 300px at 92% 90%, rgba(255,111,181,0.06), transparent 6%),
    linear-gradient(180deg,#07102a,#0f1530);
  color:rgba(255,255,255,0.92);
  -webkit-font-smoothing:antialiased;

  padding: calc(env(safe-area-inset-top, 0px) + var(--topbar-height, 64px)) 20px 40px 20px;
  box-sizing: border-box;
}

.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1200 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(7,16,42,0.75), rgba(7,16,42,0.55));
  padding: 10px 20px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.topbar .topnav { display: flex; gap: 12px; align-items: center; }

.container {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 28px !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.container, .page { position: relative; z-index: 1; }

.page-title{
  font-size:24px;
  margin:0 0 12px 0;
  color:white;
  letter-spacing:0.2px;
  text-align:center;
}

.lead{
  font-size:18px;
  margin:0 0 18px 0;
  color:#f0f6ffcc;
}

h3{margin-top:18px; margin-bottom:8px; color:#e9f3ff;}
.games-list{padding-left:1.15rem; margin:8px 0 24px 0;}
.games-list li{margin:12px 0;}
.games-list p{margin:8px 0 0 0; color:#e9f3ff;}
.note{font-size:14px; color:#d6e8ff; margin-top:6px;}

.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

@media (max-width:540px){
  .container{
    padding:18px;
    border-radius:10px;
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    margin: 8px auto 0 auto;
    box-sizing: border-box;
  }
  .page-title{font-size:20px}
}

@media (min-width: 1024px) {
  .container { padding:32px; }
}

header.topbar .topnav {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
}

header.topbar .topnav .tab {
  padding: 8px 14px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

@media (min-width: 541px) {
  header.topbar .topnav {
    gap: 48px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

@media (max-width: 540px) {
  header.topbar .topnav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  header.topbar .menu-button {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 540px) {
  header.topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--topbar-height) !important;
    min-height: var(--topbar-height) !important;
    z-index: 1200 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box !important;
  }

  header.topbar .menu-button {
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 12px !important;
    z-index: 1300 !important;
  }

  main.container,
  main.page,
  .container {
    padding-top: calc(var(--safe-topbar) + 8px) !important;
    box-sizing: border-box !important;
  }

  .container > *:first-child {
    margin-top: 0 !important;
  }
}