/* Raijin2 – Spielauswahl (/<sprache>) und 4Story-Thema (/<sprache>/4story). Wird nur dort geladen, site.css bleibt Basis.
   Metin2 = Royal Storm (Navy, Elektrisch-Blau, Blitze), 4Story = Lava (Basalt, Glutrot, Ember-Orange).
   Lava-Bilder: public/img/4story/* (aus unseren eigenen Bildern umgefaerbt, scripts/build-4story-assets.js).
   Effekte: public/js/games.js. Bei "Bewegung reduzieren" steht alles still. */

:root {
  --lava-1: #ffd27a;
  --lava-2: #ff8a3d;
  --lava-3: #ff5a1f;
  --lava-4: #c8260b;
  --storm-1: #dbe8ff;
  --storm-2: #6fa0ff;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Naht der Spielauswahl als animierbare Groessen (Hover schiebt die Naht weich zur Seite) */
@property --seam { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --tilt { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* =====================================================================================================
   Spielauswahl
   ===================================================================================================== */
body.is-chooser { background: #04030a; }
html:has(body.is-chooser) { background: #04030a; }

.arena-top { position: absolute; z-index: 40; top: clamp(14px, 2.4vh, 26px); right: clamp(14px, 2vw, 28px); }
.arena-top .langmenu { margin: 0; }
.arena-top .langmenu__btn { background: rgba(6, 6, 16, 0.6); border-color: rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.arena {
  --seam: 50%;
  --tilt: 5.5vw;
  position: relative; overflow: hidden; isolation: isolate;
  height: 100vh; height: 100svh; min-height: 660px;
  background: #04030a;
  transition: --seam 0.85s var(--ease-out);
}
/* Hover/Fokus: Naht wandert, gewaehlte Seite waechst (games.js setzt data-active; ohne JS greift :has) */
.arena[data-active="metin2"], .arena:not([data-active]):has(.side--metin2:hover, .side--metin2:focus-visible) { --seam: 57%; }
.arena[data-active="4story"], .arena:not([data-active]):has(.side--4story:hover, .side--4story:focus-visible) { --seam: 43%; }

/* --- eine Seite: ganzer Bereich ist der Link, Form per clip-path (schraege Naht) --- */
.side { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; outline: none; }
.side:hover, .side:focus-visible { color: #fff; }
.side--metin2 { z-index: 1; clip-path: polygon(0 0, calc(var(--seam) + var(--tilt)) 0, calc(var(--seam) - var(--tilt)) 100%, 0 100%); }
.side--4story { z-index: 1; clip-path: polygon(calc(var(--seam) + var(--tilt)) 0, 100% 0, 100% 100%, calc(var(--seam) - var(--tilt)) 100%); }

.side__art {
  position: absolute; top: -3%; bottom: -3%; width: 72%; display: block;
  transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -10px), 0) scale(1.05);
  transition: filter 0.7s var(--ease-out);
  will-change: transform;
}
.side--metin2 .side__art { left: -6%; }
.side--4story .side__art { right: -6%; transform: translate3d(calc(var(--px, 0) * 16px), calc(var(--py, 0) * -10px), 0) scale(1.05); }
.side__art picture, .side__art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.side__art img { object-fit: cover; object-position: 80% 18%; -webkit-user-drag: none; }
.side--4story .side__art img { transform: scaleX(-1); } /* gespiegelt: die beiden Raijin schauen sich an */

.side__shade { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.7s; }
.side--metin2 .side__shade {
  background:
    linear-gradient(0deg, rgba(3, 8, 28, 0.95) 0%, rgba(4, 11, 36, 0.62) 30%, rgba(4, 11, 36, 0) 58%),
    linear-gradient(90deg, rgba(3, 8, 28, 0.78) 0%, rgba(3, 8, 28, 0.25) 34%, rgba(3, 8, 28, 0) 50%),
    linear-gradient(180deg, rgba(3, 8, 28, 0.55) 0%, rgba(3, 8, 28, 0) 22%);
}
.side--4story .side__shade {
  background:
    linear-gradient(0deg, rgba(14, 3, 1, 0.95) 0%, rgba(18, 4, 2, 0.62) 30%, rgba(18, 4, 2, 0) 58%),
    linear-gradient(270deg, rgba(14, 3, 1, 0.8) 0%, rgba(14, 3, 1, 0.25) 34%, rgba(14, 3, 1, 0) 50%),
    linear-gradient(180deg, rgba(14, 3, 1, 0.55) 0%, rgba(14, 3, 1, 0) 22%);
}

/* Inhalt: Metin2 unten links, 4Story unten rechts */
.side__content {
  position: absolute; z-index: 2; bottom: clamp(76px, 11vh, 120px);
  display: flex; flex-direction: column; align-items: flex-start;
  width: min(36vw, 600px);
  transition: opacity 0.6s, transform 0.8s var(--ease-out);
}
.side--metin2 .side__content { left: clamp(24px, 4.6vw, 88px); }
.side--4story .side__content { right: clamp(24px, 4.6vw, 88px); align-items: flex-end; text-align: right; }

.side__eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 0.85rem/1 var(--font-body); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.side__badge { letter-spacing: 0.12em; font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; color: #ffe2c7; border: 1px solid rgba(255, 138, 61, 0.6); background: rgba(255, 90, 31, 0.18); }
.side__name {
  display: block; margin: 4px 0 6px; padding: 0 0.04em; font: 700 clamp(3.4rem, 7.6vw, 8.4rem)/0.95 var(--font-display); letter-spacing: 0.01em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter 0.6s;
}
.side--metin2 .side__name { background-image: linear-gradient(180deg, #ffffff 12%, #cfe0ff 52%, #6fa0ff 100%); filter: drop-shadow(0 0 18px rgba(61, 123, 255, 0.75)) drop-shadow(0 0 2px rgba(220, 235, 255, 0.9)); }
.side--4story .side__name { background-image: linear-gradient(180deg, #fff3d6 8%, #ffb347 46%, #ff5a1f 76%, #c8260b 100%); filter: drop-shadow(0 0 18px rgba(255, 90, 31, 0.75)) drop-shadow(0 0 2px rgba(255, 220, 170, 0.9)); }
/* Titel-Effekte: Metin2 = Strom (heller Lichtstreifen jagt durch die Schrift, kurze Blitz-Zuckungen),
   4Story = fliessende Lava (wandernde Glut im Verlauf, pulsierende Hitze). Hover verstaerkt beides. */
@media (prefers-reduced-motion: no-preference) {
  .side--metin2 .side__name {
    background-image: linear-gradient(100deg, #ffffff 0%, #cfe0ff 18%, #6fa0ff 34%, #ffffff 42%, #9fe8ff 46%, #6fa0ff 56%, #cfe0ff 78%, #ffffff 100%);
    background-size: 250% 100%;
    animation: m2-current 4.2s linear infinite, m2-zap 5.5s steps(1, end) infinite;
  }
  .side--4story .side__name {
    background-image: linear-gradient(170deg, #fff3d6 0%, #ffb347 14%, #ff5a1f 30%, #c8260b 44%, #ff7a2b 58%, #ffd27a 70%, #ff5a1f 84%, #fff3d6 100%);
    background-size: 100% 260%;
    animation: fs-molten 6s ease-in-out infinite alternate, fs-heat 2.8s ease-in-out infinite alternate;
  }
  .arena[data-active="metin2"] .side--metin2 .side__name, .side--metin2:hover .side__name { animation-duration: 1.6s, 2.2s; }
  .arena[data-active="4story"] .side--4story .side__name, .side--4story:hover .side__name { animation-duration: 2.6s, 1.2s; }
}
@keyframes m2-current { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes m2-zap {
  0%   { filter: drop-shadow(0 0 18px rgba(61, 123, 255, 0.75)) drop-shadow(0 0 2px rgba(220, 235, 255, 0.9)); }
  86%  { filter: drop-shadow(0 0 34px rgba(120, 200, 255, 1)) drop-shadow(0 0 6px #ffffff); }
  88%  { filter: drop-shadow(0 0 14px rgba(61, 123, 255, 0.6)) drop-shadow(0 0 2px rgba(220, 235, 255, 0.8)); }
  91%  { filter: drop-shadow(0 0 40px rgba(150, 220, 255, 1)) drop-shadow(0 0 8px #ffffff); }
  93%  { filter: drop-shadow(0 0 18px rgba(61, 123, 255, 0.75)) drop-shadow(0 0 2px rgba(220, 235, 255, 0.9)); }
}
@keyframes fs-molten { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes fs-heat {
  from { filter: drop-shadow(0 0 14px rgba(255, 90, 31, 0.6)) drop-shadow(0 0 2px rgba(255, 220, 170, 0.8)); }
  to   { filter: drop-shadow(0 0 34px rgba(255, 110, 30, 1)) drop-shadow(0 4px 14px rgba(200, 38, 11, 0.9)) drop-shadow(0 0 3px #ffe2c7); }
}
.side__tagline { display: block; max-width: 34ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 500; color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); margin-bottom: 16px; }
.side__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.side--4story .side__facts { justify-content: flex-end; }
.side__fact {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 0.92rem; font-weight: 500; line-height: 1.25;
  border-radius: 8px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.side__fact::before { content: ""; width: 6px; height: 6px; flex: none; transform: rotate(45deg); }
.side--metin2 .side__fact { color: #e6eeff; background: rgba(5, 14, 44, 0.66); border: 1px solid rgba(111, 160, 255, 0.4); }
.side--metin2 .side__fact::before { background: var(--storm-2); box-shadow: 0 0 8px var(--storm-2); }
.side--4story .side__fact { color: #ffe9dc; background: rgba(32, 8, 3, 0.66); border: 1px solid rgba(255, 122, 61, 0.42); }
.side--4story .side__fact::before { background: var(--lava-2); box-shadow: 0 0 8px var(--lava-3); }

.side__cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 62px; padding: 0 34px;
  font: 700 1.15rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; border-radius: 10px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.side__cta svg { transition: transform 0.25s var(--ease-out); }
.side--metin2 .side__cta { color: #0a1a4a; background: linear-gradient(180deg, #ffffff 0%, #d9e5ff 100%); box-shadow: 0 0 0 1px rgba(111, 160, 255, 0.6), 0 10px 34px rgba(61, 123, 255, 0.5); }
.side--4story .side__cta { color: #fff; text-shadow: 0 1px 2px rgba(90, 14, 0, 0.6); background: linear-gradient(180deg, #ffb067 0%, #ff6a2b 48%, #d9330f 100%); box-shadow: 0 0 0 1px rgba(255, 176, 103, 0.7), 0 10px 34px rgba(255, 90, 31, 0.5); }
.side:hover .side__cta svg, .side:focus-visible .side__cta svg { transform: translateX(6px); }
.side--metin2:hover .side__cta, .side--metin2:focus-visible .side__cta { box-shadow: 0 0 0 1px #6fa0ff, 0 12px 50px rgba(111, 160, 255, 0.9); }
.side--4story:hover .side__cta, .side--4story:focus-visible .side__cta { box-shadow: 0 0 0 1px #ffc58f, 0 12px 50px rgba(255, 110, 40, 0.9); }
.side:focus-visible .side__cta { outline: 3px solid #fff; outline-offset: 4px; }

.side__last {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px 5px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.35);
}
.side__last::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }

/* aktive Seite leuchtet, die andere wird dunkel und entsaettigt */
.arena[data-active="metin2"] .side--4story .side__art, .arena[data-active="4story"] .side--metin2 .side__art,
.arena:not([data-active]):has(.side--metin2:hover) .side--4story .side__art,
.arena:not([data-active]):has(.side--4story:hover) .side--metin2 .side__art { filter: brightness(0.32) saturate(0.3); }
.arena[data-active="metin2"] .side--metin2 .side__art, .arena[data-active="4story"] .side--4story .side__art { filter: brightness(1.08) saturate(1.15); }
.arena[data-active="metin2"] .side--4story .side__content, .arena[data-active="4story"] .side--metin2 .side__content,
.arena:not([data-active]):has(.side--metin2:hover) .side--4story .side__content,
.arena:not([data-active]):has(.side--4story:hover) .side--metin2 .side__content { opacity: 0.28; }
.arena[data-active="metin2"] .side--4story .side__content { transform: translateX(3vw); }
.arena[data-active="4story"] .side--metin2 .side__content { transform: translateX(-3vw); }
.arena[data-active="metin2"] .side--metin2 .side__name { filter: drop-shadow(0 0 30px rgba(61, 123, 255, 1)) drop-shadow(0 0 3px #fff); }
.arena[data-active="4story"] .side--4story .side__name { filter: drop-shadow(0 0 30px rgba(255, 90, 31, 1)) drop-shadow(0 0 3px #ffe2c7); }

/* Metin2 "Bald verfuegbar" (METIN2_STATUS=soon, src/lib/metin2.js): 4Story bekommt mehr Flaeche und einen Knopf,
   Metin2 bleibt ausgegraut (Graustufen, keine Strom-Effekte) und waechst beim Hover nur wenig. */
.arena--m2soon { --seam: 42%; }
.arena--m2soon[data-active="metin2"], .arena--m2soon:not([data-active]):has(.side--metin2:hover, .side--metin2:focus-visible) { --seam: 48%; }
.arena--m2soon[data-active="4story"], .arena--m2soon:not([data-active]):has(.side--4story:hover, .side--4story:focus-visible) { --seam: 36%; }
.arena--m2soon .side--metin2.is-soon .side__art { filter: grayscale(1) brightness(0.42); }
.arena--m2soon[data-active="4story"] .side--metin2.is-soon .side__art,
.arena--m2soon:not([data-active]):has(.side--4story:hover) .side--metin2.is-soon .side__art { filter: grayscale(1) brightness(0.26); }
.arena--m2soon .side--metin2.is-soon .side__shade {
  background:
    linear-gradient(0deg, rgba(8, 8, 10, 0.95) 0%, rgba(10, 10, 12, 0.62) 32%, rgba(10, 10, 12, 0.2) 70%),
    linear-gradient(90deg, rgba(8, 8, 10, 0.7) 0%, rgba(8, 8, 10, 0) 50%);
}
.arena--m2soon .side--metin2.is-soon .side__name { background-image: linear-gradient(180deg, #f2f2f2 10%, #b9bcc2 55%, #7d8188 100%); background-size: auto; animation: none; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.8)); }
.arena--m2soon .side--metin2.is-soon .side__tagline { color: rgba(255, 255, 255, 0.7); }
.arena--m2soon .side--metin2.is-soon .side__fact { color: #cfd2d8; background: rgba(16, 16, 20, 0.66); border-color: rgba(255, 255, 255, 0.16); }
.arena--m2soon .side--metin2.is-soon .side__fact::before { background: #8a8f99; box-shadow: none; }
.side__badge--soon { color: #f4f4f6; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12); }
.side__soon { display: block; max-width: 38ch; font-size: 0.98rem; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }

/* Effekt-Ebene (eine Zeichenflaeche fuer beide Seiten und die Naht) */
.arena__fx { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }
.arena__flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(60% 70% at 50% 24%, rgba(220, 235, 255, 0.95), rgba(140, 180, 255, 0.35) 45%, rgba(255, 140, 60, 0.12) 70%, transparent 85%); }

/* Wappen oben mittig: Logo links blau, rechts Lava */
.arena__crest { position: absolute; z-index: 10; left: 50%; top: clamp(12px, 2.6vh, 30px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; width: max-content; max-width: 92vw; }
.crest__logo { position: relative; display: block; pointer-events: auto; border-radius: 12px; }
.crest__logo img { display: block; width: clamp(170px, 17vw, 280px); height: auto; }
.crest__storm { filter: drop-shadow(0 4px 22px rgba(61, 123, 255, 0.6)); }
/* kein filter auf dem Lava-Logo: drop-shadow + clip-path malte in Chromium einen dunklen Kasten */
.crest__lava { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
/* Logo-Farbverlauf: das Lava-Logo liegt ueber dem blauen und wird mit einer weichen, wandernden Maske eingeblendet -
   der Schriftzug fliesst dauerhaft von Blitz-Blau zu Lava-Rot und zurueck. Ohne Bewegung (reduced motion): halb/halb. */
@media (prefers-reduced-motion: no-preference) {
  .crest__lava {
    clip-path: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
    -webkit-mask-size: 200% 100%; mask-size: 200% 100%;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    animation: crest-flow 8s linear infinite;
  }
  .crest__storm { animation: crest-glow 4s ease-in-out infinite alternate; }
}
/* Maske ist doppelt so breit wie das Logo und wiederholt sich: -200 % verschiebt sie um genau eine Periode -> nahtlose Schleife */
@keyframes crest-flow {
  from { -webkit-mask-position: 0% 0;    mask-position: 0% 0; }
  to   { -webkit-mask-position: -200% 0; mask-position: -200% 0; }
}
@keyframes crest-glow {
  0%, 20%   { filter: drop-shadow(0 4px 22px rgba(61, 123, 255, 0.6)); }
  50%       { filter: drop-shadow(0 4px 22px rgba(170, 90, 200, 0.55)); }
  80%, 100% { filter: drop-shadow(0 4px 22px rgba(255, 90, 31, 0.6)); }
}
.crest__title { margin: 2px 0 0; font: 700 clamp(0.8rem, 1vw, 1rem)/1.2 var(--font-display); letter-spacing: 0.36em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9); }
.crest__lead { margin: 6px 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95); }

.arena-foot {
  position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
  padding: 10px 16px 12px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.62);
  background: linear-gradient(0deg, rgba(3, 2, 8, 0.85), transparent);
}
.arena-foot a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.arena-foot a:hover { color: #fff; text-decoration: underline; }
.arena-foot__note { flex-basis: 100%; margin: 0; text-align: center; font-size: 0.72rem; line-height: 1.35; color: rgba(255, 255, 255, 0.5); }

/* --- Intro: Haelften gleiten herein, das Logo schlaegt mit einem Blitz ein --- */
@media (prefers-reduced-motion: no-preference) {
  .side--metin2 { animation: side-in-left 1s var(--ease-out) backwards; }
  .side--4story { animation: side-in-right 1s var(--ease-out) backwards; }
  .crest__logo { animation: crest-strike 0.9s 0.45s var(--ease-out) backwards; }
  .crest__title, .crest__lead { animation: rise-in 0.7s 0.95s var(--ease-out) backwards; }
  .side__content { animation: rise-in 0.8s 0.8s var(--ease-out) backwards; }
  .arena__flash { animation: flash 0.75s 0.45s ease-out both; }
}
@keyframes side-in-left { from { transform: translateX(-14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes side-in-right { from { transform: translateX(14%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes crest-strike {
  0% { opacity: 0; transform: scale(1.7); filter: brightness(3) blur(8px); }
  35% { opacity: 1; transform: scale(0.94); filter: brightness(2.2) blur(0); }
  60% { transform: scale(1.03); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: 1; } 32% { opacity: 0.25; } 44% { opacity: 0.7; } 100% { opacity: 0; } }

/* Handy/Tablet hochkant: Seiten untereinander, schraege Kante dazwischen */
@media (max-width: 800px) {
  .arena-top { top: 12px; right: 12px; }
  .arena { height: auto; min-height: 0; display: flex; flex-direction: column; padding-top: 0; }
  .arena__crest { order: -1; position: relative; left: auto; transform: none; top: auto; width: auto; max-width: none; padding: 14px 16px 18px; background: #04030a; }
  .arena__fx { z-index: 11; }
  .crest__logo img { width: 150px; }
  .crest__lead { font-size: 0.88rem; }
  .side { position: relative; inset: auto; min-height: 540px; min-height: max(540px, 64svh); }
  .side--metin2 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); }
  .side--4story { margin-top: -44px; clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%); }
  .side__art { top: 0; bottom: 0; left: 0 !important; right: 0 !important; width: auto; transform: none !important; }
  .side__art img { object-position: 60% 0; }
  .side--metin2 .side__shade { background: linear-gradient(0deg, rgba(3, 8, 28, 0.97) 0%, rgba(4, 11, 36, 0.8) 40%, rgba(4, 11, 36, 0.1) 72%); }
  .side--4story .side__shade { background: linear-gradient(0deg, rgba(14, 3, 1, 0.97) 0%, rgba(18, 4, 2, 0.8) 40%, rgba(18, 4, 2, 0.1) 72%); }
  .side__content { left: 20px !important; right: 20px !important; bottom: 54px; width: auto; align-items: flex-start !important; text-align: left !important; }
  .side--4story .side__content { bottom: 28px; }
  .side--4story .side__facts { justify-content: flex-start; }
  .side__name { font-size: clamp(2.8rem, 14vw, 3.8rem); }
  .side__facts { gap: 6px; margin-bottom: 18px; }
  .side__fact { font-size: 0.85rem; padding: 5px 10px; }
  .side__cta { width: 100%; justify-content: center; min-height: 56px; font-size: 1.05rem; }
  .arena[data-active] .side__content { transform: none !important; }
  .arena-foot { position: static; background: #04030a; padding: 16px; }
  /* Metin2 "bald": oben nur ein schmaler, grauer Streifen, damit 4Story schnell im Bild ist */
  .arena--m2soon .side--metin2.is-soon { min-height: 340px; }
  .arena--m2soon .side--metin2.is-soon .side__facts { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .side--metin2, .side--4story { animation-name: rise-in; }
  }
}

/* =====================================================================================================
   4Story-Seite: die Metin2-Startseite im Lava-Thema (body.is-4story, .hero--lava)
   ===================================================================================================== */
body.is-4story {
  --navy: #170806;
  --navy-deep: #0b0403;
  --panel: #2a0d07;
  --panel-glass: rgba(36, 11, 6, 0.74);
  --field: rgba(23, 8, 6, 0.7);
  --line: #ff7a3d;
  --line-soft: rgba(255, 122, 61, 0.32);
  --line-faint: rgba(255, 122, 61, 0.16);
  --accent: #e8461a;
  --accent-hover: #ff8a3d;
  --muted: #efc4ad;
  --shadow: 0 18px 50px rgba(20, 3, 0, 0.6);
  background:
    radial-gradient(1100px 620px at 82% 0, rgba(255, 90, 31, 0.16), transparent 62%) no-repeat,
    radial-gradient(900px 700px at -10% 900px, rgba(255, 90, 31, 0.08), transparent 60%) no-repeat,
    linear-gradient(180deg, var(--navy) 0, var(--navy-deep) 1600px) no-repeat,
    var(--navy-deep);
}
html:has(body.is-4story) { background: #0b0403; }
.is-4story ::selection { background: var(--accent); }
.is-4story .site-header { background: rgba(18, 5, 3, 0.86); }
.is-4story .site-nav__main a { color: #ffe9dc; }
.is-4story .site-nav__main a:hover { background: rgba(255, 90, 31, 0.16); }
.is-4story .btn--ghost { background: rgba(36, 11, 6, 0.5); }
.is-4story .btn--ghost:hover { background: rgba(255, 90, 31, 0.18); }
.is-4story .btn--outline { background: rgba(20, 6, 4, 0.35); }
.is-4story .langmenu__btn, .is-4story .game-switch { color: #ffe9dc; }
.is-4story .langmenu__btn:hover, .is-4story .langmenu[open] > .langmenu__btn, .is-4story .game-switch:hover { background: rgba(255, 90, 31, 0.16); }
.is-4story .langmenu__item.is-current { background: rgba(255, 90, 31, 0.22); }
.is-4story .nav-toggle { background: rgba(36, 11, 6, 0.6); }
.is-4story .site-footer { background: rgba(12, 4, 3, 0.8); }
.is-4story .site-footer a { color: #ffe9dc; }
.is-4story kbd { color: #ffe9dc; background: rgba(255, 90, 31, 0.2); }
.is-4story .alert { background: rgba(255, 90, 31, 0.12); }

/* "Spielen"-Knopf in Glut statt Silber */
.is-4story .btn--play {
  color: #fff; text-shadow: 0 1px 2px rgba(90, 14, 0, 0.6);
  background: linear-gradient(180deg, #ffb067 0%, #ff6a2b 48%, #d9330f 100%); border-color: #ffb067;
  box-shadow: 0 0 0 1px rgba(255, 176, 103, 0.6), 0 10px 34px rgba(255, 90, 31, 0.5);
}
.is-4story .btn--play:hover { color: #fff; background: linear-gradient(180deg, #ffc283 0%, #ff7a3d 48%, #e8461a 100%); box-shadow: 0 0 0 1px #ffc58f, 0 12px 46px rgba(255, 110, 40, 0.85); }
.is-4story .btn--play.is-soon { cursor: default; opacity: 0.9; filter: saturate(0.8); }
.is-4story .btn--play.is-soon:active { transform: none; }

/* Hero: Verlauf in Glut statt Navy, Logo mit Glut-Schein */
.hero--lava .hero__art::after {
  background:
    linear-gradient(90deg, rgba(14, 3, 1, 0.95) 0%, rgba(20, 5, 2, 0.8) 28%, rgba(20, 5, 2, 0.22) 56%, rgba(20, 5, 2, 0) 72%),
    linear-gradient(180deg, rgba(14, 3, 1, 0.6) 0%, rgba(20, 5, 2, 0) 22%, rgba(20, 5, 2, 0) 70%, rgba(23, 8, 6, 0.9) 100%);
}
.hero--lava .hero__logo { filter: drop-shadow(0 6px 30px rgba(255, 90, 31, 0.6)); }
.hero--lava h1 { text-shadow: 0 2px 22px rgba(14, 3, 1, 0.85); }
.hero--lava .hero__pitch { color: #ffeadf; text-shadow: 0 1px 12px rgba(14, 3, 1, 0.95); }
.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.is-4story .status-bar { background: rgba(28, 8, 4, 0.8); }
.is-4story .status-bar__totals dd { font-size: 1.05rem; }

.dot--test { display: inline-block; vertical-align: -1px; background: var(--lava-2); box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.2), 0 0 14px rgba(255, 90, 31, 0.9); }

.fs-info th { width: 38%; color: var(--muted); font-weight: 500; }
.fs-info .dot { display: inline-block; vertical-align: -1px; }
.fs-tba { color: #ffd6a8; font-style: italic; }
.fs-slot h2 { margin-bottom: 0.3em; }
.fs-slot p { color: var(--muted); }
.fs-slot__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fs-soon {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  font-weight: 600; letter-spacing: 0.04em; color: #ffe2c7; border: 1px solid rgba(255, 138, 61, 0.6); background: rgba(255, 90, 31, 0.12);
}
@media (prefers-reduced-motion: no-preference) {
  .fs-soon { animation: fs-glow 2.8s ease-in-out infinite; }
}
@keyframes fs-glow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 90, 31, 0); } 50% { box-shadow: 0 0 22px rgba(255, 90, 31, 0.45); } }

@media (max-width: 700px) {
  .hero--lava .hero__art::after { background: linear-gradient(180deg, rgba(14, 3, 1, 0.5) 0%, rgba(20, 5, 2, 0) 16%, rgba(20, 5, 2, 0.55) 36%, rgba(20, 5, 2, 0.93) 54%, var(--navy) 100%); }
}

/* 4Story-Unterseiten im Lava-Thema (body.is-fspage: Rangliste, Bug melden, Anmelden, Registrieren; src/lib/fstheme.js) */
.is-4story .page-head::before { background-image: url("../img/4story/hero-1280.webp"); }
.is-4story .page-head::after {
  background: linear-gradient(90deg, rgba(14, 3, 1, 0.96) 0%, rgba(23, 8, 6, 0.82) 45%, rgba(23, 8, 6, 0.45) 100%), linear-gradient(180deg, transparent 40%, var(--navy) 100%);
}
.is-4story .page-head .lead { color: #ffeadf; }
.is-4story .auth::before { background-image: url("../img/4story/hero-1280.webp"); }
.is-4story .auth::after {
  background: radial-gradient(80% 70% at 50% 30%, rgba(23, 8, 6, 0.35), rgba(23, 8, 6, 0.9) 75%), linear-gradient(180deg, transparent 60%, var(--navy-deep) 100%);
}
.is-4story .auth__panel { background: rgba(36, 11, 6, 0.88); }
.is-4story .table tbody tr:hover { background: rgba(255, 90, 31, 0.08); }
.is-4story input:focus, .is-4story select:focus, .is-4story textarea:focus { box-shadow: 0 0 0 3px rgba(255, 122, 61, 0.3); }
.is-4story select option { background: #170806; }
.is-4story .rank--1, .is-4story .rank--2, .is-4story .rank--3 { color: #2a0d07; }
.fs-country { font-weight: 600; }
.fs-country--defugel { color: #8fc0ff; }
.fs-country--craxion { color: #ff9a6b; }
.fs-country--brahman { color: #e8d28a; }
.fs-gain { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 90, 31, 0.08); }
.fs-gain .check { margin-bottom: 0; }
.fs-activate { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 4px 0 12px; }
.fs-activate .field { flex: 1 1 220px; margin-bottom: 0; }
.fs-rank-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 18px; }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .arena { transition: none; }
  .side__art, .side__shade, .side__content, .side__name { transition: none; }
  .side__art { transform: scale(1.02) !important; }
  .arena__fx, .arena__flash, .hero__embers { display: none; }
}

/* 4Story-Seite: Top 5 der Rangliste, zweite Kartenreihe */
.fs-top { list-style: none; padding: 0; margin: 0 0 14px; }
.fs-top li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line-faint); }
.fs-top li:first-child { border-top: 0; }
.duo--even + .duo--even { margin-top: 28px; }

/* 4Story-Account (/<sprache>/4story/account, pages/fourstory_account.njk) */
.fs-account__box { padding: 22px 24px; }
.fs-account__box h3 { margin: 0 0 8px; }
.fs-account__box > :last-child { margin-bottom: 0; }
.fs-account__box form + .fs-account__note { margin-top: 14px; }
.fs-account__balances { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-account .stat .muted { margin: 10px 0 0; font-size: 0.88rem; }

/* Raijincoins kaufen im 4Story-Bereich (/<sprache>/4story/coins): Einzahlungsfenster aus shop.css im Lava-Thema */
.is-fscoins .shop-stage {
  background:
    linear-gradient(180deg, rgba(14, 3, 1, 0.66) 0%, rgba(14, 3, 1, 0.55) 40%, rgba(11, 4, 3, 0.94) 100%),
    url("../img/4story/hero-2000.webp") 70% 12% / cover no-repeat,
    var(--navy-deep);
}
.is-fscoins .paywin { background: rgba(23, 8, 6, 0.95); border-color: var(--line-soft); box-shadow: 0 30px 80px rgba(20, 3, 0, 0.7); }
.is-fscoins .paywin__inner { border-color: var(--line-soft); background: linear-gradient(180deg, rgba(64, 18, 8, 0.55), rgba(30, 9, 5, 0.6)); }
.is-fscoins .paywin__head { border-bottom-color: var(--line-faint); }
.is-fscoins .paywin__badge { color: #ffe3d3; background: linear-gradient(180deg, rgba(232, 70, 26, 0.45), rgba(60, 15, 6, 0.75)); border-color: var(--line-soft); }
.is-fscoins .paybox { border-color: var(--line-soft); background: rgba(14, 4, 2, 0.5); }
.is-fscoins .paybox--side h2 + .paymethods + h2 { border-top-color: var(--line-faint); }
.is-fscoins .paymethod { border-color: var(--line-soft); background: rgba(60, 16, 7, 0.45); }
.is-fscoins .paymethod.is-selected, .is-fscoins .paymethod:has(.paymethod__pick:checked) { border-color: var(--line); box-shadow: 0 0 0 1px var(--line), 0 0 22px rgba(232, 70, 26, 0.3); background: rgba(232, 70, 26, 0.16); }
.is-fscoins .paymethod__logo { background: linear-gradient(160deg, #ff7a3d, #b8320f); border-right-color: var(--line-soft); }
.is-fscoins .payhow li { color: #ffe3d3; }
.is-fscoins .paycard { border-color: var(--line-soft); background: linear-gradient(180deg, rgba(74, 20, 9, 0.6), rgba(30, 9, 5, 0.85)); }
.is-fscoins .paycard--popular, .is-fscoins .paycard--best { border-color: var(--line); box-shadow: 0 0 0 1px rgba(255, 122, 61, 0.6), 0 12px 30px rgba(232, 70, 26, 0.22); }
.is-fscoins .paycard__flag { background: #5a1607; }
.is-fscoins .paycard__coins > .ico { color: #ffb48a; }
.is-fscoins .payconsent { color: #ffe3d3; border-color: var(--line-soft); background: rgba(60, 16, 7, 0.45); }
.is-fscoins .pbtn { background: linear-gradient(180deg, #ffa06b 0%, #ff6a2b 50%, #d8400f 100%); border-color: #ffb48a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(232, 70, 26, 0.32); }
.is-fscoins .paycontact__field { color: #ffe3d3; }
.is-fscoins .paycontact__field input { border-color: var(--line-soft); background: rgba(23, 8, 6, 0.7); }

/* Spieler online (Spielauswahl, 4Story-Seite) */
.side__fact--online .dot { display: inline-block; vertical-align: -1px; margin-right: 8px; }

/* =====================================================================================================
   Mehr Spieler (Branch mobile): Einstieg auf der 4Story-Startseite, Event-Countdown, Wochenplan
   ===================================================================================================== */
/* Event-Arten: eine Farbe je Art (Leiste links), sonst bleibt alles im Glut-Ton */
.evk--luck { --evk: #ffd166; }
.evk--exp { --evk: #8fe388; }
.evk--gold { --evk: #f0b93b; }
.evk--upgrade { --evk: #c9a6f2; }
.evk--drops { --evk: #ffb067; }
.evk--pvp { --evk: #ff6b5a; }
.evk--boss { --evk: #ff3d3d; }
.evk--castle { --evk: #8fc0ff; }
.evk--quiz, .evk--special { --evk: #ffe9dc; }

/* Countdown: Kasten in der Statusleiste (bar), auf der Startseite (card) und auf der Eventseite (page) */
.evc { display: grid; gap: 4px; min-width: 0; }
.evc p { margin: 0; }
.evc__live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #ffeadf; font-size: 0.95rem; }
.evc__live strong { color: #fff; }
.evc__until { color: var(--muted); }
.evc__pulse { width: 9px; height: 9px; border-radius: 50%; background: #ff3d3d; box-shadow: 0 0 0 3px rgba(255, 61, 61, 0.25); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .evc__pulse { animation: ev-pulse 1.6s ease-in-out infinite; }
}
@keyframes ev-pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 61, 61, 0); } }
.evc__next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label left" "name left" "when left"; align-items: center; column-gap: 16px; }
.evc__label { grid-area: label; font-size: 0.82rem; color: var(--muted); }
.evc__name { grid-area: name; font-size: 1.08rem; line-height: 1.25; color: #fff; }
.evc__when { grid-area: when; font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.evc__left {
  grid-area: left; justify-self: end; font: 600 1.4rem/1.1 var(--font-body); letter-spacing: 0.01em; color: #ffb067;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 18px rgba(255, 106, 43, 0.45);
}
.evc__left.is-live { font: 600 1rem/1.2 var(--font-body); color: #ff8a7a; }
.evc--bar { margin-left: auto; padding-left: 22px; border-left: 1px solid var(--line-faint); }
.evc--card, .evc--page { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(28, 8, 4, 0.72); }
.evc--page { padding: 22px 24px; }
.evc--page .evc__left { font-size: clamp(1.6rem, 5vw, 2.3rem); }
.evc--page .evc__name { font-size: 1.3rem; }

/* Statusleiste mit Countdown */
.status-bar--live { align-items: center; }
.status-bar__online { color: #ffeadf; font-weight: 600; }

/* Hero der 4Story-Startseite: grosser Download-Knopf, darunter Registrieren und Discord */
.hero--cta .hero__actions { align-items: center; }
.hero__fine { margin: 10px 0 0; font-size: 0.9rem; color: #ffd9c4; text-shadow: 0 1px 8px rgba(14, 3, 1, 0.9); }
.btn--discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn--discord:hover { background: #6d78f5; border-color: #6d78f5; color: #fff; }

/* Der Weg ins Spiel: drei Schritte, jeder mit Knopf */
.section--first { padding-top: 54px; }
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: path; margin-top: 18px; }
.path__step {
  counter-increment: path; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 22px 22px 76px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(36, 11, 6, 0.6);
}
.path__step::before {
  content: counter(path); position: absolute; left: 20px; top: 18px; width: 40px; height: 40px; display: grid; place-items: center;
  font: 700 1.35rem/1 var(--font-display); color: #2a0d07; border-radius: 50%;
  background: linear-gradient(180deg, #ffb067, #e8461a); box-shadow: 0 0 18px rgba(255, 106, 43, 0.45);
}
.path__step h3 { margin: 0; font-size: 1.2rem; }
.path__step p { margin: 0; color: var(--muted); flex: 1; }
.path__step .btn, .path__step .fs-soon { margin-top: 4px; }

/* Events heute (Startseite) */
.ev-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
.ev-teaser__head { display: grid; gap: 14px; justify-items: start; }
.ev-teaser__head h2 { margin: 0; }
.ev-teaser__head .evc { justify-self: stretch; }
.ev-teaser__list { padding: 10px 22px; }

/* Termine als Zeitliste */
.evlist { display: grid; }
.evlist__item { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 2px 14px; padding: 11px 0 11px 12px; border-top: 1px solid var(--line-faint); position: relative; }
.evlist__item:first-child { border-top: 0; }
.evlist__item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--evk, var(--line)); }
.evlist__time { font-variant-numeric: tabular-nums; color: #ffe2cf; font-weight: 600; white-space: nowrap; }
.evlist__body { min-width: 0; }
.evlist__text { display: block; font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
.evlist__item.is-past { opacity: 0.5; }
.evlist__item.is-live { background: linear-gradient(90deg, rgba(255, 61, 61, 0.14), transparent 70%); border-radius: 8px; }
.evlist__badge, .evlist__done { display: inline-block; margin-left: 6px; padding: 0 8px; font-size: 0.75rem; font-weight: 600; line-height: 1.6; border-radius: 999px; vertical-align: 1px; }
.evlist__badge { color: #fff; background: #c8261a; }
.evlist__done { color: var(--muted); border: 1px solid var(--line-faint); }

/* Warum Raijin2 */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(36, 11, 6, 0.55); overflow: hidden; }
.why__item { padding: 22px 24px; border-top: 1px solid var(--line-faint); border-left: 1px solid var(--line-faint); }
.why__item:nth-child(-n+3) { border-top: 0; }
.why__item:nth-child(3n+1) { border-left: 0; }
.why__item h3 { margin: 10px 0 6px; font-size: 1.1rem; }
.why__item p { margin: 0; color: var(--muted); }
.fsi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.why__icon { display: block; width: 30px; height: 30px; color: #ffb067; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.why__more { margin: 20px 0 0; }

/* Discord-Band */
.discord-band { padding: 10px 0; }
.discord-band__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  padding: 28px 30px; border-radius: var(--radius);
  background: linear-gradient(110deg, rgba(88, 101, 242, 0.28), rgba(88, 101, 242, 0.08) 60%, transparent), rgba(28, 10, 20, 0.6);
  border: 1px solid rgba(124, 135, 255, 0.4);
}
.discord-band h2 { margin: 0 0 6px; }
.discord-band p { margin: 0; color: #ffe9dc; max-width: 60ch; }

/* Screenshots: auf dem Handy waagerecht wischen */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shots__item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line-faint); }

.facts--flush { padding: 0; margin: 0; }

/* Eventseite /<sprache>/4story/events */
.ev-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
.ev-top__today { padding: 18px 22px 8px; }
.ev-top__today h2 { font-size: 1.3rem; margin-bottom: 4px; }
.ev-tz { margin: 12px 2px 0; font-size: 0.92rem; color: var(--muted); }
.ev-h { margin-top: 44px; }
.ev-daily { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ev-chip { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 8px 14px 8px 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--evk, var(--line)); border-radius: 10px; background: rgba(36, 11, 6, 0.6); }
.ev-chip__time { font-variant-numeric: tabular-nums; color: #ffe2cf; font-weight: 600; }
.ev-chip__daily { font-size: 0.8rem; color: var(--muted); }
.ev-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ev-week__day { padding: 14px 12px; border: 1px solid var(--line-faint); border-radius: var(--radius-sm); background: rgba(36, 11, 6, 0.45); min-width: 0; }
.ev-week__day.is-today { border-color: var(--line); background: rgba(232, 70, 26, 0.16); box-shadow: 0 0 0 1px var(--line); }
.ev-week__name { font: 600 1rem/1.3 var(--font-body); margin: 0 0 10px; }
.ev-week__today { display: inline-block; padding: 0 8px; font-size: 0.75rem; line-height: 1.6; border-radius: 999px; background: var(--accent); color: #fff; vertical-align: 1px; }
.ev-week__ev { display: grid; gap: 2px; padding: 8px 0 8px 10px; border-top: 1px solid var(--line-faint); position: relative; }
.ev-week__ev::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--evk, var(--line)); }
.ev-week__time { font-size: 0.85rem; color: #ffe2cf; font-variant-numeric: tabular-nums; }
.ev-week__ev strong { display: block; line-height: 1.25; }
.ev-week__text { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.ev-special { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ev-special li { border-left: 3px solid var(--evk, var(--line)); }
.ev-special__when { margin: 0 0 4px; font-size: 0.88rem; color: #ffb067; font-weight: 600; }
.ev-special h3 { margin: 0 0 6px; }
.ev-special p:last-child { margin: 0; color: var(--muted); }
.ev-discord { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 36px; }
.ev-discord p { margin: 0; max-width: 60ch; }

/* Spielen-Leiste unten (nur Handy, public/js/site.js blendet sie ein) */
.playbar { display: none; }

@media (max-width: 1080px) {
  .ev-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .evc--bar { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; padding-top: 10px; border-top: 1px solid var(--line-faint); }
}
@media (max-width: 960px) {
  .path { grid-template-columns: 1fr; }
  .ev-teaser, .ev-top { grid-template-columns: 1fr; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__item:nth-child(-n+3) { border-top: 1px solid var(--line-faint); }
  .why__item:nth-child(-n+2) { border-top: 0; }
  .why__item:nth-child(3n+1) { border-left: 1px solid var(--line-faint); }
  .why__item:nth-child(2n+1) { border-left: 0; }
}
@media (max-width: 700px) {
  .section--first { padding-top: 30px; }
  .path__step { padding: 18px 16px 18px 64px; }
  .path__step::before { left: 14px; top: 16px; width: 36px; height: 36px; font-size: 1.2rem; }
  .path__step .btn { width: 100%; }
  .ev-teaser__list, .ev-top__today { padding: 6px 14px; }
  .evlist__item { grid-template-columns: 1fr; padding-left: 14px; }
  .evc__left { font-size: 1.2rem; }
  .why { grid-template-columns: 1fr; }
  .why__item, .why__item:nth-child(n) { border-left: 0; border-top: 1px solid var(--line-faint); padding: 18px; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; }
  .why__item:first-child { border-top: 0; }
  .why__icon { grid-row: span 2; margin-top: 2px; }
  .why__item h3 { margin: 0 0 4px; }
  .why__more .btn, .ev-teaser__head .btn { width: 100%; }
  .discord-band__inner { padding: 22px 18px; }
  .discord-band .btn { width: 100%; }
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .shots__item { flex: 0 0 84%; scroll-snap-align: start; }
  .ev-week { grid-template-columns: 1fr; gap: 8px; }
  .ev-week__day { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 10px; padding: 10px 12px; }
  .ev-week__name { margin: 8px 0 0; }
  .ev-week__ev:first-child { border-top: 0; }
  .ev-discord .btn { width: 100%; }
  .playbar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 5, 3, 0.94); border-top: 1px solid var(--line-soft); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(110%); visibility: hidden; transition: transform 0.2s, visibility 0.2s;
  }
  .playbar.is-shown { transform: none; visibility: visible; }
  .playbar .btn { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 0 10px; white-space: normal; text-align: center; line-height: 1.15; }
  .playbar .btn--play { flex-grow: 1.6; font-size: 0.95rem; letter-spacing: 0.02em; }
  body.is-4story:has(.playbar) .site-footer { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .playbar { transition: none; }
}

/* Spielauswahl auf dem Handy, solange Metin2 "bald" ist: 4Story (das Spiel, das laeuft) zuerst, mit Knopf im
   ersten Bildschirm; Metin2 darunter als schmaler grauer Streifen. Fusszeilen-Links mit 44 px Tap-Hoehe. */
@media (max-width: 800px) {
  .arena--m2soon .side--4story { order: 1; margin-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); }
  .arena--m2soon .side--4story .side__content { bottom: 58px; }
  .arena--m2soon .side--metin2.is-soon { order: 2; margin-top: -44px; min-height: 280px; clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%); }
  .arena--m2soon .side--metin2.is-soon .side__content { bottom: 26px; }
  .arena-foot a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 700px) {
  .fs-account__box { padding: 18px 16px; }
}

/* ---- Wachstum (Branch grow): Neu auf Raijin2, Level-Rennen, Truhen & Chancen ---------------------------------- */
/* Neu auf Raijin2 (4Story-Startseite: Karten, Spielauswahl: schmales Band) */
.fresh__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 14px; }
.fresh__head h2 { margin: 0; }
.fresh__all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.fresh__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.fresh__link {
  display: grid; gap: 6px; height: 100%; padding: 16px 18px; border-radius: var(--radius-sm); color: inherit; text-decoration: none;
  border: 1px solid var(--line-soft); border-top: 3px solid var(--accent); background: rgba(36, 11, 6, 0.6); transition: border-color 0.15s, transform 0.15s;
}
.fresh__link:hover, .fresh__link:focus-visible { border-color: var(--line); transform: translateY(-2px); }
.fresh__item--event .fresh__link { border-top-color: #ff9a3d; }
.fresh__item--patch .fresh__link { border-top-color: #8fc0ff; }
.fresh__meta { font-size: 0.82rem; color: var(--muted); }
.fresh__cat { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #ffb067; margin-right: 6px; }
.fresh__title { font-size: 1.08rem; line-height: 1.3; }
.fresh__teaser { color: var(--muted); font-size: 0.94rem; line-height: 1.45; }
.fresh--band { padding: 26px 0 8px; background: #0b0606; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.fresh--band .fresh__link { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); border-top-color: #e8461a; }
.fresh--band .fresh__meta { color: #c9b8ae; }

/* Weitere Seiten (4Story-Startseite unter "Warum Raijin2") */
.fs-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.fs-more__link { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(36, 11, 6, 0.5); color: inherit; text-decoration: none; }
.fs-more__link:hover, .fs-more__link:focus-visible { border-color: var(--line); }
.fs-more__link strong::after { content: " →"; color: #ffb067; }
.fs-more__link span { color: var(--muted); font-size: 0.94rem; }
.fsf-oath__more { margin: 14px 0 0; }
.fsf-oath__more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Sprungleiste (Rennen, Chancen) */
.race-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }

/* Level-Rennen */
.race-prize { border-left: 3px solid #ffd27a; background: linear-gradient(100deg, rgba(255, 210, 122, 0.12), transparent 60%), rgba(36, 11, 6, 0.6); }
.race-prize h2 { margin: 0 0 6px; font-size: 1.25rem; }
.race-prize p { margin: 0; }
.race-level { margin-top: 34px; scroll-margin-top: 80px; }
.race-level__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.race-level__head h2 { margin: 0; display: flex; align-items: center; gap: 12px; }
.race-level__badge {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  font: 700 1.3rem/1 var(--font-display); color: #2a0d07; background: linear-gradient(180deg, #ffd27a, #e8461a); box-shadow: 0 0 18px rgba(255, 106, 43, 0.4);
}
.race-level__first { margin: 0; }
.race-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.race-card { padding: 14px 16px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(36, 11, 6, 0.55); min-width: 0; }
.race-card__cls { margin: 0 0 6px; font: 600 1.02rem/1.3 var(--font-body); color: #ffe2cf; }
.race-card__list { display: grid; }
.race-place { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-faint); }
.race-place:first-child { border-top: 0; }
.race-place .rank { min-width: 30px; height: 30px; font-size: 0.95rem; }
.race-place.is-free .rank { opacity: 0.45; }
.race-place__who { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.race-place__at { display: block; font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.race-how { margin-top: 34px; }
.race-how h2 { margin: 0 0 6px; font-size: 1.2rem; }
.race-how p { margin: 0 0 8px; }

/* Truhen & Chancen */
.chance-table th, .chance-table td { padding: 9px 14px; white-space: nowrap; }
.chance-table tbody th { font-variant-numeric: tabular-nums; }
.chance-table td.num { font-variant-numeric: tabular-nums; }
.chance { font-weight: 700; }
.chance--hi { color: #8fe39a; }
.chance--mid { color: #ffd27a; }
.chance--lo { color: #ff8a70; }
.chance-note { margin: 10px 2px 0; font-size: 0.92rem; }
.chance-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -6px 0 14px; font-size: 0.92rem; color: var(--muted); }
.chance-legend strong { color: #ffe2cf; }
.chance-rules { margin-top: 22px; }
.chance-rules h3 { margin: 0 0 8px; font-size: 1.1rem; }
.chance-list { display: grid; gap: 6px; padding-left: 1.1em; list-style: disc; }
.chance-list li::marker { color: #ffb067; }
.chest-list { display: grid; gap: 10px; }
.chest { padding: 0; overflow: hidden; }
.chest__sum { display: flex; align-items: center; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; min-height: 56px; padding: 12px 44px 12px 18px; cursor: pointer; position: relative; list-style: none; }
.chest__sum::-webkit-details-marker { display: none; }
.chest__sum::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: #ffb067; }
.chest[open] .chest__sum::after { content: "–"; }
.chest__name { font-weight: 700; }
.chest__meta { font-size: 0.88rem; color: var(--muted); }
.chest-table th, .chest-table td { padding: 8px 18px; }
.chest-table tbody th { font-weight: 500; overflow-wrap: anywhere; }
.chest-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.chest-table td.is-rare { color: #ffd27a; }

@media (max-width: 960px) {
  .race-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-more { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .race-grid { gap: 8px; }
  .race-card { padding: 10px 10px 4px; }
  .race-place { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
  .race-place .rank { min-width: 24px; height: 24px; font-size: 0.82rem; padding: 0 4px; }
  .race-place__who { font-size: 0.92rem; }
  .race-place__who .fs-country { display: block; font-size: 0.8rem; }
  .race-place__at { font-size: 0.78rem; }
  .race-level__badge { width: 40px; height: 40px; font-size: 1.1rem; }
  .chance-table th, .chance-table td { padding: 8px 8px; font-size: 0.9rem; }
  .chance-table thead th { white-space: normal; font-size: 0.78rem; line-height: 1.25; vertical-align: bottom; }
  .chest__sum { padding: 12px 40px 12px 14px; }
  .chest-table th, .chest-table td { padding: 8px 10px; font-size: 0.92rem; }
  .fresh__list { grid-template-columns: 1fr; }
  .fresh--cards .fresh__item:nth-child(n+4) { display: none; } /* Handy: hoechstens drei, der Rest unter "Alle News" */
  .fresh--band { padding: 20px 0 6px; }
}