/* Startseite neu: die Arena ist die Bühne, Migs Air das Ereignis daneben.
   Alles hängt an body.home-v2 – ohne die Klasse sieht die Seite genauso aus wie vorher (Einstellungen → Anzeige → Startseite). */
.hv2-head, .hv2-air, .dash-air { display: none; }

body.home-v2 #tile-migsair { display: none; }   /* Migs Air hat die große Karte */

/* ---- Breit: links Arena, rechts Migs Air, unten die Kacheln ---- */
body.home-v2.menu-dash .menu-dash {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 29%, 900px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--dg) clamp(14px, 1.4cqw, 34px);
  position: relative;
}
body.home-v2.menu-dash .menu-dash::before {   /* die Arena-Bühne als ein Stück */
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  border-radius: 22px;
  border: 1px solid rgba(255, 210, 63, .3);
  background:
    radial-gradient(70% 70% at 22% 0%, rgba(255, 197, 49, .16), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgba(79, 227, 255, .1), transparent 70%),
    rgba(14, 12, 40, .62);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.home-v2 .dash-left {
  --hv2-play: clamp(84px, 11.5cqh, 136px);
  --hv2-gap: clamp(12px, 1.7cqh, 20px);
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  display: grid;
  grid-template-columns: clamp(190px, 21%, 460px) minmax(0, 1fr) clamp(190px, 25%, 460px);
  grid-template-areas: "logo head head" "logo play social" "alert alert alert";
  grid-template-rows: auto auto auto;
  column-gap: clamp(12px, 1.6cqw, 36px);
  row-gap: clamp(6px, 1cqh, 14px);
  padding: clamp(10px, 1.6cqh, 24px) clamp(14px, 1.6cqw, 34px) 0;
  align-items: center;
}
body.home-v2 .dash-hero { grid-area: logo; flex: none; }
body.home-v2.menu-dash .logo { font-size: clamp(36px, 5.2cqh, 84px); }
body.home-v2.menu-dash .tagline { font-size: clamp(11px, 1.4cqh, 17px); max-width: 100%; white-space: normal; line-height: 1.15; }
body.home-v2 .dash-alerts { grid-area: alert; display: block; }
body.home-v2 .dash-alerts:not(:has(> :not([hidden]))) { display: none; }
body.home-v2 .dash-social { grid-area: social; align-self: start; }
body.home-v2 .dash-playcard {
  grid-area: play;
  padding: 0;
  gap: 4px;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.home-v2 .dash-playcard::before { content: none; }
body.home-v2 .dash-playcard #btn-play {
  min-height: var(--hv2-play); height: var(--hv2-play);
  font-size: clamp(30px, 5cqh, 58px);
  box-shadow: 0 0 44px rgba(255, 197, 49, .42), 0 10px 26px rgba(0, 0, 0, .35);
}
body.home-v2 .dash-playcard .identity { justify-content: center; }
body.home-v2 .dash-playcard .online-line,
body.home-v2 .dash-playcard .identity { font-size: clamp(12px, 1.5cqh, 16px); }

.hv2-head { grid-area: head; min-width: 0; }
body.home-v2.menu-dash .hv2-head { display: flex; flex-direction: column; gap: 2px; }
.hv2-live {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 3px;
  border-radius: 999px;
  font-size: clamp(11px, 1.35cqh, 15px);
  font-weight: 600;
  letter-spacing: .03em;
  color: #eafff1;
  background: rgba(94, 224, 122, .14);
  border: 1px solid rgba(94, 224, 122, .4);
}
.hv2-live b { font-weight: 600; }
.hv2-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ee07a; box-shadow: 0 0 10px #5ee07a; animation: hv2-blink 1.6s ease-in-out infinite; }
@keyframes hv2-blink { 50% { opacity: .35; } }
.hv2-title { margin: 2px 0 0; font-size: clamp(24px, 4.3cqh, 64px); font-weight: 700; line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hv2-title em { font-style: normal; color: #ffd23f; }
.hv2-sub { margin: 0; font-size: clamp(13px, 1.75cqh, 21px); color: rgba(235, 238, 255, .82); }

body.home-v2 .dash-gallery { grid-column: 1; grid-row: 2; z-index: 1; min-height: 0; padding: 0 clamp(8px, 1cqw, 22px) clamp(6px, 1cqh, 14px); }
body.home-v2 .dash-air { display: block; grid-column: 2; grid-row: 1 / 3; min-height: 0; }
body.home-v2 .dash-center { grid-column: 1; grid-row: 3; }
body.home-v2 .dash-right { grid-column: 2; grid-row: 3; }
body.home-v2 .menu-dash:not(:has(#missions-panel:not([hidden]))) .dash-air { grid-row: 1 / 4; }
body.home-v2 .menu-dash:not(:has(#missions-panel:not([hidden]))) .dash-right { display: none; }
body.home-v2.menu-dash .dash-play { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
body.home-v2.menu-dash .dash-play .tile { grid-column: auto; }

/* ---- Migs Air: die Karte, die man anklicken MUSS ---- */
body.home-v2 .hv2-air {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  min-height: 170px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: #fff;
  isolation: isolate;
  background: #10245a;
  box-shadow: 0 0 0 2px rgba(127, 212, 255, .55), 0 0 54px rgba(79, 168, 255, .4), 0 18px 50px rgba(0, 0, 0, .4);
  transition: transform .18s ease, box-shadow .18s ease;
}
body.home-v2 .hv2-air:hover,
body.home-v2 .hv2-air:focus-visible { transform: translateY(-3px) scale(1.01); box-shadow: 0 0 0 3px #ffd23f, 0 0 80px rgba(79, 168, 255, .7), 0 22px 54px rgba(0, 0, 0, .45); }
.hv2-air-vid { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hv2-air::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 18, 60, .1) 0%, rgba(8, 18, 60, .28) 38%, rgba(8, 14, 48, .92) 74%, #070c2e 100%);
}
.hv2-air-badge {
  position: absolute;
  top: clamp(10px, 1.5cqh, 20px);
  left: clamp(12px, 1.5cqh, 22px);
  padding: 4px 14px 5px;
  border-radius: 999px;
  font-size: clamp(13px, 1.6cqh, 19px);
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(90deg, #ff3d7f, #ff9a3c);
  box-shadow: 0 0 22px rgba(255, 61, 127, .7);
  animation: hv2-pulse 1.8s ease-in-out infinite;
}
@keyframes hv2-pulse { 50% { box-shadow: 0 0 38px rgba(255, 154, 60, .95); transform: scale(1.05); } }
.hv2-air-body { display: flex; flex-direction: column; gap: clamp(4px, .9cqh, 12px); padding: clamp(12px, 2cqh, 30px) clamp(14px, 2cqh, 30px); }
.hv2-air-name { font-size: clamp(32px, 6.4cqh, 92px); font-weight: 700; line-height: 1; text-shadow: 0 3px 20px rgba(0, 0, 0, .55); }
.hv2-air-txt { font-size: clamp(13px, 1.9cqh, 23px); line-height: 1.25; color: rgba(235, 242, 255, .9); }
.hv2-air-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.hv2-air-facts > span { padding: 2px 10px 3px; border-radius: 999px; font-size: clamp(11px, 1.35cqh, 16px); background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .2); }
.hv2-air-cta {
  align-self: stretch;
  margin-top: clamp(2px, .6cqh, 8px);
  padding: clamp(8px, 1.3cqh, 16px) 18px;
  border-radius: 14px;
  text-align: center;
  font-size: clamp(17px, 2.5cqh, 32px);
  font-weight: 700;
  color: #06203f;
  background: linear-gradient(90deg, #7fd4ff, #5ee0ff 50%, #b6f0ff);
  box-shadow: 0 6px 24px rgba(79, 212, 255, .5);
}

/* ---- Schmal (Handy, Kompakt): Karte unter SPIELEN ---- */
body.home-v2:not(.menu-dash) .hv2-air { width: 100%; height: auto; min-height: 226px; margin-top: 4px; }
body.home-v2:not(.menu-dash) .hv2-air-name { font-size: 34px; }
body.home-v2:not(.menu-dash) .hv2-air-txt { font-size: 14px; }
body.home-v2:not(.menu-dash) .hv2-air-cta { font-size: 18px; padding: 8px 14px; }
body.home-v2:not(.menu-dash) .hv2-air-badge { font-size: 13px; top: 10px; left: 12px; }

@media (prefers-reduced-motion: reduce) {
  .hv2-air-badge, .hv2-dot { animation: none; }
}

/* ---- Mit Freunden: direkt „Lobby erstellen“ und „Beitreten“ statt aufklappender Zeile ---- */
body.home-v2 .fr-box:not(.has-lobby) { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home-v2 .fr-box:not(.has-lobby) .frb-open,
body.home-v2 .fr-box:not(.has-lobby) .frb-head,
body.home-v2 .fr-box:not(.has-lobby) .frb-reward,
body.home-v2 .fr-box:not(.has-lobby) .frb-invite { display: none; }
body.home-v2 .fr-box:not(.has-lobby) > .frb-body,
body.home-v2 .fr-box:not(.has-lobby).frb-exp > .frb-body { display: grid; position: static; padding: 0; border: 0; background: none; box-shadow: none; }
body.home-v2 .frb-idle > .frb-actions { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; }
body.home-v2 #ui .frb-actions .btn, body.home-v2 #ui .frb-actions .frb-create { grid-column: auto; flex-direction: row; gap: 7px; min-height: clamp(44px, 5.6cqh, 64px); font-size: clamp(15px, 2cqh, 21px); }
body.home-v2:not(.menu-dash) .frb-idle > .frb-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
/* gleiche Höhe wie SPIELEN: oben und unten bündig, die offene Lobby legt sich darüber und schiebt nichts weg */
body.home-v2.menu-dash .dash-social { align-self: start; display: block; position: relative; height: var(--hv2-play); }
body.home-v2.menu-dash .dash-social > .fr-box:not(.has-lobby), body.home-v2.menu-dash .fr-box:not(.has-lobby) > .frb-body, body.home-v2.menu-dash .fr-box:not(.has-lobby) .frb-idle { height: 100%; }
body.home-v2.menu-dash .frb-idle > .frb-actions { grid-template-rows: auto auto; gap: var(--hv2-gap); }
body.home-v2.menu-dash #ui .frb-actions .btn, body.home-v2.menu-dash #ui .frb-actions .frb-create { min-height: 0; height: calc((var(--hv2-play) - var(--hv2-gap)) / 2); padding-block: 0; box-shadow: none; }
body.home-v2.menu-dash .dash-social:has(> .fr-box.has-lobby) { grid-area: 1 / 3 / 4 / 4; align-self: stretch; height: auto; }   /* offene Lobby: mittig im Kopfbereich */
body.home-v2.menu-dash .fr-box.has-lobby .frb-tiles.sz-l { zoom: .8; }
body.home-v2.menu-dash .dash-social > .fr-box.has-lobby { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 30; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
body.home-v2 .frb-join { gap: 6px; }
body.home-v2 .frb-join .frb-code { font-size: 19px; letter-spacing: .12em; padding-left: .12em; }
body.home-v2 #ui .frb-join-go { padding-inline: 10px; font-size: 15px; }
body.home-v2.menu-dash .dash-social > .fr-box:not(.has-lobby) { padding: 0; margin: 0; }
body.home-v2 .fr-box:not(.has-lobby) > .frb-body { gap: 0; }
body.home-v2 .fr-box:not(.has-lobby) > .frb-body > .frb-idle { grid-row: 1; }