/* ============================================================================
   4Blocks — Welt-Auswahl (Splitscreen-Chooser)
   Vollbild-Landing an 4blocks.gg: LINKS Minecraft, RECHTS GTA V Roleplay.
   Eigenständig (lädt NICHT site.css) — robust, self-contained, offline-fähig.
   Marken-Farben kommen aus siteRootVars() (:root --primary/--accent/...).
   Desktop = zwei Hälften nebeneinander (Hover lässt eine wachsen).
   Mobile  = vertikal gestapelt, Tap = Navigation.
   ============================================================================ */

@font-face { font-family:"Oswald"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/site/fonts/oswald-500.woff2") format("woff2"); }
@font-face { font-family:"Oswald"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/site/fonts/oswald-700.woff2") format("woff2"); }
@font-face { font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/site/fonts/anton.woff2") format("woff2"); }
@font-face { font-family:"Archivo Black"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/site/fonts/archivo-black.woff2") format("woff2"); }
@font-face { font-family:"Silkscreen"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/site/fonts/silkscreen.woff2") format("woff2"); }

*,*::before,*::after { box-sizing:border-box; }

:root{
  --mc-accent:#5ac234;      /* Minecraft-Grün */
  --mc-accent-2:#8be04f;
  --gta-accent:#c8102e;     /* GTA-Signatur-Crimson (edel, kein Flach-Rot) */
  --gta-accent-2:#ffffff;   /* Chrome-Weiß */
  --seam:#0a0d12;
}

html,body{ height:100%; margin:0; }
body.chooser-body{
  background:#05070b;
  color:#fff;
  font-family:"Oswald","Segoe UI",system-ui,sans-serif;
  overflow:hidden;                 /* Vollbild, kein Scroll auf Desktop */
  -webkit-font-smoothing:antialiased;
}

/* ── Bühne ──────────────────────────────────────────────────────────────── */
.chooser{
  position:fixed; inset:0;
  display:flex;
  isolation:isolate;
}

/* ── Eine Hälfte ────────────────────────────────────────────────────────── */
.half{
  position:relative;
  flex:1 1 50%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  cursor:pointer;
  transition:flex-grow .55s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  will-change:flex-grow;
}

/* Hintergrundbild als eigene Ebene (für sanften Zoom ohne Layout-Shift) */
.half__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
  transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  z-index:0;
}
.half--mc  .half__bg{ background-image:url("/assets/img/city-night.webp"); }
.half--gta .half__bg{ background-image:url("/assets/img/4life-hero.webp"); }

/* Abdunkelung + Farbstich pro Welt (Lesbarkeit + Identität) */
.half__scrim{
  position:absolute; inset:0; z-index:1;
  transition:opacity .5s ease, background .5s ease;
}
.half--mc .half__scrim{
  background:
    linear-gradient(180deg, rgba(5,10,6,.30) 0%, rgba(5,12,7,.10) 34%, rgba(4,10,6,.82) 100%),
    radial-gradient(120% 90% at 50% 120%, rgba(90,194,52,.28), transparent 60%);
}
/* 4Life = hell & sonnig: leichter Scrim oben, warmer Verlauf unten nur so viel wie für Text nötig. */
.half--gta .half__scrim{
  background:
    linear-gradient(180deg, rgba(10,16,28,.10) 0%, rgba(10,16,28,.03) 30%, rgba(8,14,26,.60) 100%),
    radial-gradient(120% 90% at 50% 120%, rgba(255,120,60,.30), transparent 60%);
}

/* Wandernder Glow-Streifen oben (Juice) */
.half__glow{
  position:absolute; left:0; right:0; top:0; height:42%; z-index:1;
  opacity:.0; transition:opacity .5s ease;
  pointer-events:none;
}
.half--mc .half__glow{ background:linear-gradient(180deg, rgba(139,224,79,.22), transparent); }
.half--gta .half__glow{ background:linear-gradient(180deg, rgba(229,18,31,.26), transparent); }

/* ── Inhalt ─────────────────────────────────────────────────────────────── */
.half__content{
  position:relative; z-index:2;
  padding:0 clamp(22px,5vw,64px) clamp(48px,9vh,96px);
  max-width:560px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transform:translateY(10px);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.half__eyebrow{
  font-weight:700; font-size:clamp(.72rem,1.1vw,.82rem);
  letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
  padding:7px 16px; border-radius:999px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
}
.half--mc  .half__eyebrow{ color:#bff29a; font-family:"Silkscreen",monospace; font-weight:400; letter-spacing:.16em; text-indent:.16em; }
.half--gta .half__eyebrow{ color:#e9ebf1; font-family:"Oswald",sans-serif; letter-spacing:.34em; text-indent:.34em; }

.half__title{
  margin:2px 0 0;
  font-weight:700; line-height:.92;
  font-size:clamp(2.6rem,6.4vw,5.2rem);
  letter-spacing:.005em;
  text-transform:uppercase;
  text-shadow:0 6px 40px rgba(0,0,0,.6);
}
/* MC = gehauene Gras-/Erde-Blöcke (Archivo Black, harte Extrusion) */
.half--mc .half__title{
  font-family:"Archivo Black","Oswald",sans-serif; font-weight:400; letter-spacing:.01em;
  /* Heller & lesbarer: Weiss->Gras->kurz Erde (nicht mehr matschig-braun). */
  /* Heller Grasverlauf, der NICHT in dunkles Grün-auf-Schwarz absäuft; die dunkle
     Extrusion unten macht die Tiefe (nicht der Fill). */
  background:linear-gradient(180deg, #ffffff 0%, #eafbcf 20%, #aee86e 44%, #7cc746 66%, #57a53a 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:
    0 2px 0 #24361c, 0 4px 0 #182611, 0 6px 0 #0f1a0b,
    0 9px 2px rgba(0,0,0,.55), 0 22px 46px rgba(90,194,52,.32);
}
/* GTA = Kino-Chrom mit Crimson-Fuß (Anton) */
.half--gta .half__title{
  font-family:"Anton","Oswald",sans-serif; font-weight:400; line-height:.9; letter-spacing:.02em;
  background:linear-gradient(180deg, #ffffff 0%, #e6e9f0 40%, #9aa2b4 52%, #d0d5e0 60%, #c8102e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(200,16,46,.4)) drop-shadow(0 14px 30px rgba(0,0,0,.6));
  text-shadow:none;
}

.half__sub{
  margin:0; max-width:44ch;
  font-family:"Segoe UI",system-ui,sans-serif;
  font-size:clamp(.98rem,1.5vw,1.12rem); font-weight:400;
  line-height:1.5; color:rgba(255,255,255,.86);
}

/* CTA */
.half__cta{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:.55em;
  padding:14px 30px; border-radius:14px;
  font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  color:#0a0d12; background:#fff;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9);
  transition:transform .18s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.half__cta .arrow{ transition:transform .25s ease; }
/* MC-CTA = Smaragd-Block mit Bevel (Silkscreen), tastbar */
.half--mc .half__cta{
  font-family:"Silkscreen",monospace; font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem;
  color:#0d1a09; border-radius:6px; border:2px solid #0a0f08;
  background:linear-gradient(180deg, #7ed957 0%, #4fae3f 48%, #3a8f31 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.4), inset 3px 0 0 rgba(255,255,255,.18),
    inset 0 -4px 0 rgba(9,48,14,.55), inset -3px 0 0 rgba(9,48,14,.3),
    0 6px 0 #205c1d, 0 16px 30px -14px rgba(0,0,0,.7);
}
/* GTA-CTA = angular HUD-Platte, Chrom-Fassung + roter Neon-Kern */
.half--gta .half__cta{
  position:relative; isolation:isolate; overflow:hidden;
  font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.94rem;
  color:#fff; border:0; border-radius:0;
  clip-path:polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  background:linear-gradient(180deg, #f6f7fb 0%, #b9bfcd 26%, #6f7789 52%, #d6dae4 78%, #8a92a6 100%);
  box-shadow:none;
  filter:drop-shadow(0 10px 24px rgba(200,16,46,.4)) drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.half--gta .half__cta::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #ff4652 0%, #d31226 46%, #8f0d1b 100%);
}

/* „BALD"-Badge (GTA kommt noch) */
.soon-badge{
  position:absolute; top:clamp(74px,12vh,110px); left:50%; transform:translateX(-50%);
  z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  padding:8px 18px; border-radius:999px;
  font-weight:700; font-size:.8rem; letter-spacing:.24em; text-indent:.24em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(120deg, rgba(255,46,136,.9), rgba(255,154,30,.9));
  box-shadow:0 12px 34px -12px rgba(255,46,136,.9);
}
.soon-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; animation:soonPulse 1.6s ease-in-out infinite; }
@keyframes soonPulse{ 0%,100%{opacity:.4; transform:scale(.7)} 50%{opacity:1; transform:scale(1)} }

/* Ecken-Plattform-Tag */
.half__platform{
  position:absolute; z-index:2; bottom:18px;
  font-size:.7rem; letter-spacing:.28em; text-indent:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.55); font-weight:600;
}
.half--mc  .half__platform{ left:22px; }
.half--gta .half__platform{ right:22px; }

/* ── Naht + Logo-Badge in der Mitte ─────────────────────────────────────── */
.seam{
  position:fixed; top:0; bottom:0; left:50%; width:2px; z-index:5;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.32) 30%, rgba(255,255,255,.32) 70%, transparent);
  box-shadow:0 0 22px rgba(255,255,255,.18);
  transition:left .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.seam__badge{
  position:fixed; top:50%; left:50%; z-index:6;
  transform:translate(-50%,-50%);
  width:clamp(84px,9vw,120px); height:clamp(84px,9vw,120px);
  border-radius:26px; padding:10px;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#12161d,#0a0d12);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transition:left .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.seam__badge img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)); }

/* ── Kopf: Wortmarke + Aufforderung ─────────────────────────────────────── */
.chooser__brand{
  position:fixed; top:clamp(22px,4vh,42px); left:50%; transform:translateX(-50%);
  z-index:7; text-align:center; pointer-events:none;
  width:max-content; max-width:92vw;
}
.chooser__wordmark{
  font-weight:700; font-size:clamp(1.5rem,3vw,2.2rem);
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.7);
}
.chooser__wordmark b{ color:var(--accent,#4d94ff); font-weight:700; }
.chooser__tag{
  margin-top:6px;
  font-family:"Segoe UI",system-ui,sans-serif; font-weight:500;
  font-size:clamp(.74rem,1.2vw,.9rem); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* ── Desktop-Hover: gewählte Hälfte wächst, andere dimmt ─────────────────── */
@media (hover:hover) and (min-width:821px){
  .chooser:hover .half:not(:hover){ filter:brightness(.58) saturate(.82); }
  .half:hover{ flex-grow:1.7; }
  .half:hover .half__bg{ transform:scale(1.11); }
  .half:hover .half__content{ transform:translateY(-4px); }
  .half:hover .half__glow{ opacity:1; }
  .half:hover .half__cta{ transform:translateY(-2px); }
  .half:hover .half__cta .arrow{ transform:translateX(4px); }
  /* Naht + Badge folgen der Aufteilung: mc gehovert -> nach rechts, gta -> nach links */
  .chooser:has(.half--mc:hover) ~ .seam,
  .chooser:has(.half--mc:hover) ~ .seam__badge{ left:63%; }
  .chooser:has(.half--gta:hover) ~ .seam,
  .chooser:has(.half--gta:hover) ~ .seam__badge{ left:37%; }
}

/* Fokus-Sichtbarkeit (Tastatur) */
.half:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }

/* ── Mobile: vertikal gestapelt ─────────────────────────────────────────── */
@media (max-width:820px){
  body.chooser-body{ overflow:auto; }
  .chooser{ position:relative; flex-direction:column; min-height:100dvh; }
  .half{ flex:1 1 auto; min-height:50dvh; }
  .half__content{ padding:0 24px 40px; }
  .half__title{ font-size:clamp(2.4rem,11vw,3.4rem); }
  .seam{ top:auto; bottom:auto; left:0; right:0; width:100%; height:2px; top:50%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.5) 22%, rgba(255,255,255,.5) 78%, transparent); }
  .seam__badge{ top:50%; left:50%; }
  .soon-badge{ top:16px; }
  .chooser__brand{ top:16px; }
}

/* ── Kurze Auftritts-Animation ──────────────────────────────────────────── */
@keyframes halfIn{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
.half__content{ animation:halfIn .7s cubic-bezier(.2,.8,.2,1) both; }
.half--gta .half__content{ animation-delay:.1s; }
.chooser__brand,.seam,.seam__badge{ animation:halfIn .8s ease .15s both; }

@media (prefers-reduced-motion:reduce){
  /* `*` matcht KEINE Pseudo-Elemente → sonst laufen ::after-Sheen/::before-Puls weiter. */
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ============================================================================
   GTA V Roleplay — „bald verfügbar" (Vollbild-Hero, /fivem)
   ============================================================================ */
body.soon-page{ overflow:auto; }
.soon{
  position:relative; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:80px 22px;
}
.soon__bg{
  position:absolute; inset:0; z-index:0;
  background:url("/assets/img/gta-city.webp") center/cover no-repeat;
  transform:scale(1.05);
  animation:soonZoom 22s ease-in-out infinite alternate;
}
@keyframes soonZoom{ from{transform:scale(1.05)} to{transform:scale(1.14)} }
.soon__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,3,10,.55) 0%, rgba(12,3,10,.5) 45%, rgba(8,2,8,.9) 100%),
    radial-gradient(90% 70% at 50% 40%, rgba(255,46,136,.22), transparent 62%);
}
.soon__content{
  position:relative; z-index:2;
  max-width:620px; display:flex; flex-direction:column; align-items:center; gap:16px;
  animation:halfIn .8s cubic-bezier(.2,.8,.2,1) both;
}
.soon-badge--static{ position:static; transform:none; }
.soon__title{
  margin:4px 0 0; font-weight:700; line-height:.96;
  font-size:clamp(2.8rem,8vw,5.6rem);
  text-shadow:0 6px 50px rgba(255,46,136,.4), 0 2px 14px rgba(0,0,0,.75);
}
.soon__sub{
  margin:0; max-width:52ch;
  font-family:"Segoe UI",system-ui,sans-serif; font-weight:400;
  font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.55; color:rgba(255,255,255,.88);
}
.soon__cta-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:10px; }
.soon__cta{
  display:inline-flex; align-items:center; gap:.5em;
  padding:15px 30px; border-radius:14px; font-weight:700; font-size:1.02rem;
  text-decoration:none; transition:transform .18s ease, box-shadow .3s ease, background .3s ease;
}
.soon__cta--primary{
  color:#fff; background:linear-gradient(120deg,var(--gta-accent),var(--gta-accent-2));
  box-shadow:0 18px 44px -16px rgba(255,46,136,.9);
}
.soon__cta--primary:hover{ transform:translateY(-2px); box-shadow:0 24px 54px -16px rgba(255,46,136,1); }
.soon__cta--ghost{
  color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px);
}
.soon__cta--ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); }
.soon__back{
  margin-top:10px; color:rgba(255,255,255,.6); text-decoration:none; font-size:.92rem;
  font-family:"Segoe UI",system-ui,sans-serif; letter-spacing:.02em; transition:color .2s ease;
}
.soon__back:hover{ color:#fff; }

/* ── Hover-Reveal-Logo pro Welt (Desktop: bei Hover; Mobil: immer sichtbar) ──────────────────── */
.half__logo{
  position:absolute; bottom:calc(100% + 10px); left:50%;
  width:min(62%, 340px); height:auto;
  transform:translateX(-50%) translateY(16px) scale(.9); transform-origin:center bottom;
  opacity:0; pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}
.half__logo--mc{ image-rendering:pixelated; filter:drop-shadow(0 10px 26px rgba(90,194,52,.45)); }
.half__logo--gta{ filter:drop-shadow(0 10px 26px rgba(200,16,46,.5)); }
@media (hover:hover) and (min-width:821px){
  .half:hover .half__logo{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  /* Titel weicht dezent zurück, wenn das Logo kommt (Logo übernimmt die Bühne) */
  .half:hover .half__title{ opacity:.55; transform:scale(.96); transition:opacity .4s, transform .4s; }
}
@media (max-width:820px){
  .half__logo{ position:static; opacity:1; transform:none; width:min(72%,300px); margin:0 auto 14px; }
  .half__eyebrow{ display:none; }   /* Logo ersetzt das kleine Eyebrow-Label auf Mobil */
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RUNDE 4 (Owner 2026-07-31): Texte mittig & groß; zentrales Hover-Logo am Trennstrich.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
/* Inhalt vertikal zentriert (statt unten), großzügiger */
.half__content{ padding:0 clamp(22px,5vw,64px); transform:none; gap:18px; }
.half__title{ font-size:clamp(3rem,8vw,6.4rem); }
.half__sub{ font-size:clamp(1rem,1.6vw,1.2rem); max-width:40ch; }

/* Per-Hälfte-Logo: Desktop AUS (zentrales Hover-Logo übernimmt), Mobil AN */
@media (hover:hover) and (min-width:821px){ .half__logo{ display:none; } }

/* Zentrales Hover-Logo: erscheint am Trennstrich und zeigt die gehoverte Welt */
.chooser__hoverlogo{
  position:fixed; left:50%; top:34%; transform:translate(-50%,-50%); z-index:8;
  width:min(38vw,520px); pointer-events:none;
}
.chooser__hoverlogo .cl{
  position:absolute; left:50%; top:50%; width:100%; height:auto;
  transform:translate(-50%,-50%) scale(.86); opacity:0;
  transition:opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
}
.cl--mc{ image-rendering:pixelated; filter:drop-shadow(0 14px 34px rgba(90,194,52,.55)); }
.cl--gta{ filter:drop-shadow(0 14px 34px rgba(200,16,46,.6)); }
@media (hover:hover) and (min-width:821px){
  .chooser:has(.half--mc:hover)  ~ .chooser__hoverlogo .cl--mc{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .chooser:has(.half--gta:hover) ~ .chooser__hoverlogo .cl--gta{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  /* Beim Hover weicht der neutrale Badge, das Welt-Logo übernimmt die Mitte */
  .chooser:has(.half:hover) ~ .seam__badge{ opacity:0; transition:opacity .3s; }
  /* Titel der gehoverten Hälfte tritt dezent zurück, damit das Logo die Bühne bekommt */
  .half:hover .half__title{ opacity:.5; transform:scale(.96); transition:opacity .4s, transform .4s; }
}
/* Mobil: Logos je Hälfte oben, groß & mittig; Titel bleibt groß */
@media (max-width:820px){
  .chooser__hoverlogo{ display:none; }
  .half{ align-items:center; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RUNDE 9 (Owner 2026-08-01): Play-Buttons deutlich edler; Titel MC/GTA = „Roleplay";
   Kopf-Wortmarke wandert auf die ENTGEGENGESETZTE Seite der Maus; Mobil verschärft.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Kopf-Wortmarke folgt der GEGENSEITE (hover MC links → Marke nach rechts, umgekehrt) ────── */
.chooser__brand{ transition:left .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
@media (hover:hover) and (min-width:821px){
  .chooser:has(.half--mc:hover)  ~ .chooser__brand{ left:74%; }   /* Maus links → Marke klar nach rechts */
  .chooser:has(.half--gta:hover) ~ .chooser__brand{ left:26%; }   /* Maus rechts → Marke klar nach links */
}

/* ── Premium Play-Buttons — gemeinsame, großzügigere Basis ──────────────────────────────────── */
.half__cta{
  margin-top:12px; padding:17px 34px; font-size:1.02rem; gap:.6em;
  transform:translateZ(0);
}
.half__cta .arrow{ font-size:1.1em; }

/* MC = massiver Smaragd-Block, gemeißelt & tastbar (Silkscreen) */
.half--mc .half__cta{
  font-family:"Silkscreen",monospace; font-weight:400; text-transform:uppercase;
  letter-spacing:.06em; font-size:.9rem;
  color:#0c1f0a; border-radius:8px; border:2px solid #14300f;
  padding:16px 32px 18px;
  /* Ein sauberer Smaragd-Fill; die Tiefe kommt aus Bevel + hartem Block-Schatten,
     KEIN äußerer Grün-Glow (der verwischte auf grünem Grund die Blockkante). */
  background:linear-gradient(180deg, #9bf06f 0%, #63bd4c 48%, #3f8f33 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.5), inset 3px 0 0 rgba(255,255,255,.2),
    inset 0 -5px 0 rgba(12,54,17,.6), inset -3px 0 0 rgba(12,54,17,.34),
    0 7px 0 #205c1d, 0 10px 0 #123c12,
    0 20px 32px -16px rgba(0,0,0,.75);
}
.half--mc .half__cta .arrow{ text-shadow:0 2px 0 rgba(12,54,17,.5); }

/* GTA = Crime-HUD-Platte: Chrom-Fassung, glühender Crimson-Kern, wandernder Chrom-Sheen */
.half--gta .half__cta{
  position:relative; isolation:isolate; overflow:hidden;
  font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; text-indent:.2em; font-size:.96rem; color:#fff;
  border:0; border-radius:0; padding:17px 38px;
  clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background:linear-gradient(180deg, #f6f8fc 0%, #c2c8d6 24%, #737b8e 52%, #dfe3ec 78%, #929aae 100%);
  box-shadow:none;
  filter:drop-shadow(0 12px 24px rgba(200,16,46,.42)) drop-shadow(0 3px 8px rgba(0,0,0,.62));
}
.half--gta .half__cta::before{
  content:""; position:absolute; inset:2px; z-index:-1;
  clip-path:polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #ff5560 0%, #e01528 46%, #950e1c 100%);
  box-shadow:inset 0 0 24px rgba(255,70,82,.55), inset 0 -3px 8px rgba(0,0,0,.35);
}
/* Chrom-Sheen: im Ruhezustand geparkt (kein Dauer-Loop = kein „Casino"), nur beim Hover ein Wisch. */
.half--gta .half__cta::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(118deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform:translateX(-130%);
}
@keyframes gtaCtaSheen{ from{ transform:translateX(-130%) } to{ transform:translateX(130%) } }

/* Hover-Feedback (Desktop): MC drückt sich hinein, GTA hebt & glüht stärker */
@media (hover:hover) and (min-width:821px){
  .half--mc .half__cta{ transition:transform .16s ease, box-shadow .2s ease, filter .2s ease; }
  .half--mc:hover .half__cta{
    transform:translateY(3px);
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,.6), inset 3px 0 0 rgba(255,255,255,.24),
      inset 0 -5px 0 rgba(12,54,17,.6), inset -3px 0 0 rgba(12,54,17,.34),
      0 4px 0 #205c1d, 0 6px 0 #123c12,
      0 14px 26px -12px rgba(0,0,0,.75), 0 0 44px -6px rgba(140,240,110,.7);
  }
  .half--gta:hover .half__cta{
    transform:translateY(-2px) scale(1.02);
    filter:drop-shadow(0 18px 36px rgba(230,20,42,.7)) drop-shadow(0 3px 8px rgba(0,0,0,.62));
  }
  /* Chrom-Wisch nur beim Hover, einmalig */
  .half--gta:hover .half__cta::after{ animation:gtaCtaSheen .9s ease-out; }
  /* Titel tritt zurück (weicht dem Welt-Logo, das die Mitte übernimmt) — deutlicher als nur dimmen */
  .half:hover .half__title{ opacity:.42; transform:translateY(-8px) scale(.94); }
}

/* ── Mobil: Buttons breit & fingerfreundlich, keine Overflows, sauberes Stacking ────────────── */
@media (max-width:820px){
  .half__content{ gap:16px; padding:0 22px 34px; max-width:100%; }
  .half__title{ font-size:clamp(2.4rem,12vw,3.6rem); }
  .half__sub{ font-size:clamp(.95rem,3.6vw,1.06rem); max-width:34ch; }
  .half__cta{ width:min(86%,340px); justify-content:center; padding:16px 24px; font-size:1rem; }
  .half--mc .half__cta{ font-size:.92rem; padding:16px 22px 18px; }
  .half--gta .half__cta{ letter-spacing:.16em; text-indent:.16em; padding:17px 24px; }
  .half__logo{ width:min(64%,240px); }
  .chooser__wordmark{ letter-spacing:.24em; text-indent:.24em; }
}
@media (max-width:400px){
  .half__title{ font-size:clamp(2rem,13vw,2.8rem); }
  .half__cta{ width:100%; }
}
/* Mobil: die fixierten Naht-Elemente (weiße Linie + zentraler Logo-Badge) komplett raus —
   im gestapelten Layout schweben sie sonst mitten über dem Inhalt. Jede Hälfte brandet
   sich über ihr eigenes Logo. */
@media (max-width:820px){
  .seam, .seam__badge{ display:none; }
  /* Beide Titel heißen jetzt „ROLEPLAY" → Eyebrow als klarer Unterscheider WIEDER zeigen. */
  .half__eyebrow{ display:inline-block; font-size:.66rem; padding:6px 13px; }
  .half__logo{ width:min(58%,210px); }
  /* MC-Inhalt unter die fixe Kopf-Wortmarke schieben, damit nichts kollidiert. */
  .half--mc .half__content{ padding-top:84px; }
  /* Notch / Home-Indicator respektieren */
  .chooser__brand{ top:max(14px, env(safe-area-inset-top)); }
  .half__platform{ bottom:max(16px, env(safe-area-inset-bottom)); }
  .half--mc  .half__platform{ left:max(18px, env(safe-area-inset-left)); }
  .half--gta .half__platform{ right:max(18px, env(safe-area-inset-right)); }
}
/* Kurze/quer gehaltene Handys (Landscape): Breite ist noch „Desktop", aber die Höhe reicht
   nicht → Inhalt würde ohne Scroll oben/unten abgeschnitten. Escape-Hatch: scrollbar machen. */
@media (max-height:540px) and (min-width:821px){
  body.chooser-body{ overflow:auto; }
  .chooser{ position:relative; min-height:100dvh; }
  .half__title{ font-size:clamp(1.9rem,6vh,3rem); }
  .half__logo{ display:none; }
  .seam, .seam__badge, .chooser__hoverlogo{ display:none; }
}
/* Plattform-Tag lesbarer (kleiner Text auf Scrim war grenzwertig) */
.half__platform{ color:rgba(255,255,255,.74); text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* 4Life-Hover-Wortmarke am Trennstrich (Text statt 4Blocks-Logobild, Owner 2026-08-05) */
.chooser__hoverlogo .cl--text{
  display:grid; place-items:center; text-align:center;
  font-family:"Oswald","Segoe UI",sans-serif; font-weight:800;
  font-size:min(13vw,140px); letter-spacing:.02em; line-height:1; color:#fff;
  text-shadow:0 14px 34px rgba(200,16,46,.6), 0 0 30px rgba(255,59,71,.4);
}