/* Lobbyscreen – feste 16:9-Bühne (1920 × 1080), wird per lobby.js auf den Bildschirm skaliert */

@font-face { font-family: 'Rapid'; src: url('fonts/RapidST-Medium.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Rapid Wide'; src: url('fonts/RapidST-MediumWide.woff2') format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Rapid Wide'; src: url('fonts/RapidST-BlackWide.woff2') format('woff2'); font-weight: 900; font-display: block; }
@font-face { font-family: 'Rapid Extended'; src: url('fonts/RapidST-RegularExtended.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Rapid Extended'; src: url('fonts/RapidST-MediumExtended.woff2') format('woff2'); font-weight: 500; font-display: block; }

:root {
  --bg: #212c7c;
  --card: #000e38;
  --cyan: #00feff;
  --ink: #ffffff;
  --cut: 32px;
  --k: 1; /* Skalierung der Preisspalte, setzt lobby.js passend zum Inhalt */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { cursor: none; -webkit-font-smoothing: antialiased; }

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  background: var(--bg); color: var(--ink);
  transform-origin: center center; transform: translate(-50%, -50%);
  font-family: 'Rapid', sans-serif; font-weight: 500;
  font-kerning: normal;
}

/* Achteck mit 45°-Fasen wie im Original */
.card, #media {
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

/* ------------------------------------------------------------------ Preise */
#prices {
  position: absolute; left: 78px; top: 104px; width: 768px; height: 877px;
  display: flex; flex-direction: column; gap: 23px;
}
.card {
  background: var(--card);
  padding: calc(var(--k) * var(--pt, 41.5px)) 88px calc(var(--k) * var(--pb, 46px));
  display: flex; flex-direction: column;
  flex: 1 1 auto;
}
.card.compact { --pt: 32px; --pb: 36px; }
.card.compact .rows { gap: calc(var(--k) * 12px); padding-top: calc(var(--k) * 18px); }
#prices.measuring .card { flex: 0 0 auto; }
#prices.measuring .rows { flex: none; justify-content: flex-start; }
.card.extra { flex: 0 0 auto; background: var(--cyan); color: var(--card); --pt: 43px; --pb: 41px; --k: var(--ke, 1); }

.card-title {
  display: block; width: max-content; max-width: none;
  font-family: 'Rapid Extended', sans-serif; font-weight: 400;
  font-size: calc(var(--k) * 34.5px); line-height: 1; letter-spacing: 0.08em; white-space: nowrap;
}
.rows { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(var(--k) * 31px); padding-top: calc(var(--k) * 22px); }
.card .rows:first-child { padding-top: 0; }
.card .rows:first-child .row:first-child .row-label { margin-top: 0; }
.row-label { font-weight: 500; font-size: calc(var(--k) * 24.8px); line-height: 1; margin: calc(var(--k) * 26px) 0 calc(var(--k) * 21.5px); }
.row-main { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.duration { font-weight: 500; font-size: calc(var(--k) * 34.8px); line-height: 1; white-space: nowrap; }

.price {
  font-family: 'Rapid Wide', sans-serif; font-weight: 900;
  font-size: calc(var(--k) * 62px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
  background-image: linear-gradient(90deg, #00f6ff 0%, #7491ff 17%, #b450ff 34%, #e033ff 50%, #b450ff 66%, #7491ff 83%, #00f6ff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad 9s linear infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
  padding-right: 2px;
}
.price.dark { background: none; color: var(--card); animation: none; }
@keyframes grad { from { background-position: 0% 50%; } to { background-position: 150% 50%; } }

.extra-title {
  display: block; width: max-content;
  font-family: 'Rapid Extended', sans-serif; font-weight: 500;
  font-size: calc(var(--k) * 26px); line-height: 1; letter-spacing: 0.22em; white-space: nowrap;
  margin-bottom: calc(var(--k) * 18.3px);
}
.extra .row-main { align-items: flex-end; }
.extra-text { font-family: 'Rapid Wide', sans-serif; font-weight: 500; font-size: calc(var(--k) * 26px); line-height: 1.27; white-space: nowrap; }

/* ------------------------------------------------------------------ Video (Texteinblendungen sind im Video) */
#media {
  position: absolute; left: 878px; top: 104px; width: 980px; height: 890px;
  background: #000; overflow: hidden;
}
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Vorschau im Dashboard: Mauszeiger sichtbar */
body.preview { cursor: default; }

/* ==================================================================== BattleKart */
@font-face { font-family: 'Grobold'; src: url('battlekart/fonts/GROBOLDpr.otf') format('opentype'); font-display: block; }
@font-face { font-family: 'Montreal'; src: url('battlekart/fonts/Montreal-Heavy.ttf') format('truetype'); font-weight: 800; font-display: block; }
@font-face { font-family: 'Source Sans BK'; src: url('battlekart/fonts/SourceSansPro-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: block; }

body.theme-battlekart, body.theme-battlekart #viewport { background: #e8501c; }
body.theme-battlekart #stage {
  --dark: #3d0f09;
  background: #e8501c url('battlekart/bg.jpg') center / 1920px 1080px no-repeat;
  font-family: 'Montreal', sans-serif; font-weight: 800; color: var(--dark);
}
/* weißer Kasten links (aus dem Hintergrundbild) – Inhalt darüber */
body.theme-battlekart #prices.bk-panel {
  position: absolute; left: 129px; top: 134px; width: 819px; height: 834px;
  display: flex; flex-direction: column;
  padding: calc(var(--k) * 181px) 56px calc(var(--k) * 38px);
  overflow: visible;
}
/* rechter Kasten: Video mit gleichen Rundungen */
body.theme-battlekart #media {
  left: 985px; top: 133px; width: 819px; height: 839px;
  clip-path: none; border-radius: 77px; background: #fff;
}

.bk-head { position: absolute; left: 0; right: 0; top: -30px; text-align: center; }
.bk-head h1 { font-weight: normal; line-height: 1; }
.bk-sub { font-size: 36.5px; line-height: 1; margin-top: 6px; padding-left: 12px; }

.bk-secs { display: flex; flex-direction: column; gap: calc(var(--k) * 46px); }
.bk-sec h2 { font-weight: normal; line-height: 1; margin-bottom: calc(var(--k) * 16px); }
.bk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; height: calc(var(--k) * 54.5px); }
.bk-label { font-size: calc(var(--k) * 45px); line-height: calc(var(--k) * 54.5px); padding-left: 10px; white-space: nowrap; }
.bk-foot { margin-top: auto; font-family: 'Source Sans BK', sans-serif; font-weight: 600; font-size: 27px; line-height: 1.2; padding-left: 10px; }

/* Grobold mit dunkler Kontur + Schatten: Kopie dahinter (::before), Füllung davor */
.bk-ol { position: relative; display: inline-block; font-family: 'Grobold', sans-serif; font-weight: normal; line-height: 1; white-space: nowrap; }
.bk-ol::before {
  content: attr(data-t); position: absolute; left: 0; top: 0; z-index: 0;
  color: var(--dark); -webkit-text-stroke: var(--sw) var(--dark);
  text-shadow: 0 var(--sh) 0 var(--dark);
}
.bk-ol .f { position: relative; z-index: 1; }
.bk-title { font-size: calc(var(--k) * 41.5px); --sw: calc(var(--k) * 13px); --sh: calc(var(--k) * 6px); color: #fff; }
.bk-price, .bk-big { --sw: 13px; --sh: 6px; }
.bk-price { font-size: calc(var(--k) * 57.5px); margin-right: 10px; --sw: calc(var(--k) * 13px); --sh: calc(var(--k) * 6px); }
.bk-big { font-size: 78px; --sw: 15px; --sh: 7px; }
.bk-price .f, .bk-big .f {
  background-image: linear-gradient(180deg, #ffe100 0%, #ffc20e 35%, #f7871c 70%, #e8501c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}