:root{color-scheme:dark;--bg: 6, 10, 16;--bg-deep: 3, 5, 8;--panel: 19, 17, 19;--raised: 28, 25, 28;--inset: 23, 21, 23;--line: 34, 31, 34;--line-strong: 52, 48, 51;--line-control: 112, 102, 108;--border: 34, 31, 34;--border-strong: 52, 48, 51;--text: 246, 243, 244;--muted: 170, 161, 166;--subtle: 144, 135, 141;--primary: 0, 229, 255;--primary-strong: 0, 195, 220;--primary-hover: 45, 240, 255;--primary-text: 0, 240, 255;--primary-deep: 0, 75, 95;--secondary: 255, 42, 95;--success: 76, 195, 138;--danger: 255, 42, 95;--info: 90, 160, 255;--state-free: 76, 195, 138;--state-queued: 255, 138, 61;--state-fight: 230, 0, 76;--state-locked: 170, 176, 186;--font-text: "Purista", system-ui, sans-serif;--font-heading: "Arame", system-ui, sans-serif;--font-display: "Estricta", system-ui, sans-serif;--font-number: "Estricta", system-ui, sans-serif;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-in: cubic-bezier(.55, 0, 1, .45);--dur-micro: .12s;--dur-hover: .2s;--dur-overlay: .28s;--dur-exit: .18s;--dur-section: .6s;--dur-moment: .8s;--dur-spin: .7s;--stagger: 50ms;--radius-control: .25rem;--radius-media: .625rem;--radius-panel: 1rem;--radius-pass: 1.5rem;--shadow-lift: 0 1.25rem 3rem rgba(0, 0, 0, .45), 0 .25rem .75rem rgba(0, 0, 0, .35);--z-nav: 50;--z-sheet: 60;--z-dialog: 80;--z-toast: 90;--gutter: clamp(1.25rem, 5vw, 4.5rem);--max: 82.5rem;--max-wide: 96rem;--max-narrow: 48rem}@font-face{font-family:Arame;src:url(../fonts/Arame-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Arame;src:url(../fonts/Arame-Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:Estricta;src:url(../fonts/Estricta_Bold.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:Estricta;src:url(../fonts/Estricta_Black.woff2) format("woff2");font-weight:900;font-display:swap}@font-face{font-family:Purista;src:url(../fonts/Purista-Medium.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:Purista;src:url(../fonts/Purista-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}*,*:before,*:after{box-sizing:border-box}html{font-size:100%;scroll-padding-top:6rem;-webkit-text-size-adjust:100%;text-size-adjust:100%}@media(min-width:1024px){html{font-size:max(15px,.8333333333vw)}}::selection{color:rgb(var(--text));background-color:rgba(var(--primary),.55)}html,body,*{scrollbar-width:none!important;-ms-overflow-style:none}::-webkit-scrollbar{width:0!important;height:0!important;display:none}body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font-text);font-weight:500;font-size:1.0625rem;line-height:1.55;color:rgb(var(--text));-webkit-font-smoothing:antialiased;background-color:rgb(var(--bg))}img{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}ul,ol{list-style:none}h1,h2,h3,h4{text-wrap:balance}p{text-wrap:pretty}button,input,select,textarea{font:inherit}:focus-visible{outline:none;outline-offset:.1875rem}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:0ms!important;animation-duration:0ms!important;animation-delay:0ms!important}}.ui-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;contain:strict;pointer-events:none}.ui-backdrop--fixed{position:fixed}.ui-backdrop[data-fade=bottom]{mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%)}.ui-backdrop[data-fade=top]{mask-image:linear-gradient(to top,#000 0%,#000 62%,transparent 100%)}.ui-backdrop[data-fade=both]{mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 80%,transparent 100%)}.ui-backdrop[data-fade=edges]{mask-image:radial-gradient(closest-side,#000 20%,rgba(0,0,0,.55) 55%,transparent 100%)}.ui-backdrop__fallback,.ui-backdrop__layer{position:absolute;inset:0}.ui-backdrop__fallback{transition:opacity calc(var(--dur-moment) * 1.5) var(--ease-out)}.ui-backdrop__layer{overflow:hidden;opacity:0;transition:opacity calc(var(--dur-moment) * 2) var(--ease-out)}.ui-backdrop__canvas{width:100%;height:100%;max-width:none;position:absolute;inset:0;display:block}.ui-backdrop[data-ready] .ui-backdrop__layer{opacity:1}.ui-backdrop[data-ready] .ui-backdrop__fallback{opacity:0}.ui-backdrop[data-effect=topography] .ui-backdrop__fallback{background:radial-gradient(70% 55% at 70% 85%,rgba(var(--primary),.14),transparent 70%),radial-gradient(50% 40% at 15% 100%,rgba(var(--secondary),.06),transparent 70%)}.ui-backdrop[data-effect=light-rays] .ui-backdrop__fallback{background:radial-gradient(38% 70% at 50% -5%,rgba(var(--primary-text),.2),transparent 70%),radial-gradient(24% 40% at 50% 0%,rgba(var(--text),.08),transparent 70%)}.ui-backdrop[data-effect=side-rays] .ui-backdrop__fallback{background:radial-gradient(55% 65% at 100% 0%,rgba(var(--primary),.2),transparent 70%),radial-gradient(40% 55% at 88% 6%,rgba(var(--primary-deep),.22),transparent 72%)}.ui-backdrop[data-effect=gradient-ascii] .ui-backdrop__fallback{background:radial-gradient(80% 60% at 50% 110%,rgba(var(--primary),.2),rgba(var(--secondary),.05) 45%,transparent 75%)}.ui-backdrop[data-effect=prism] .ui-backdrop__fallback{background:radial-gradient(40% 45% at 50% 50%,rgba(var(--primary),.18),transparent 70%)}@media(prefers-reduced-motion:reduce){.ui-backdrop__layer,.ui-backdrop__fallback{transition:none}}.ui-crash{min-height:100vh;min-height:100dvh;padding:var(--gutter);gap:1rem;display:grid;place-content:center;text-align:center}.ui-crash h1{font-family:var(--font-text);font-weight:600;font-size:1.75rem;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}.ui-crash p{max-width:32rem;color:rgb(var(--muted))}.ui-crash__reload{margin:0;padding:0;font:inherit;color:inherit;background:none;border:0;cursor:pointer;appearance:none}.ui-crash__reload:focus-visible{outline:none;outline-offset:.1875rem}.ui-crash__reload{justify-self:center;min-height:2.75rem;padding:0 1.25rem;font-weight:600;border:1px solid rgb(var(--line-control));border-radius:var(--radius-control)}.app-loading{min-height:100vh;min-height:100dvh}

/* CivicCity Theme Additions - Sleek Dark Cyberpunk Aesthetic */

:root {
  --bg: 4, 7, 11 !important;
  --bg-deep: 2, 4, 7 !important;
  --panel: 8, 14, 20 !important;
  --raised: 12, 20, 28 !important;
  --inset: 6, 11, 16 !important;
  --line: 18, 32, 44 !important;
  --line-strong: 28, 48, 64 !important;
  --line-control: 38, 64, 84 !important;
  --border: 18, 32, 44 !important;
  --border-strong: 28, 48, 64 !important;
  --text: 240, 246, 252 !important;
  --muted: 138, 162, 178 !important;
  --subtle: 88, 112, 128 !important;
  --primary: 0, 229, 255 !important;
  --primary-strong: 0, 165, 195 !important;
  --primary-hover: 45, 240, 255 !important;
  --primary-text: 0, 240, 255 !important;
  --primary-deep: 0, 60, 80 !important;
  --secondary: 255, 42, 95 !important;
  --danger: 255, 42, 95 !important;
}

/* Dark Body & Atmospheric Vignette */
body {
  background-color: #04070b !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.7) 100%);
}

/* ======================================================= */
/* EINREISE TICKET - Dark Sleek Carbon Pass with Cyan/Red Glow */
/* ======================================================= */
.home-entry__pass {
  --ink: 240, 246, 252 !important;
  background: linear-gradient(145deg, #09121b 0%, #05090e 55%, #081017 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.92), 
              0 0 50px rgba(0, 229, 255, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  isolation: isolate !important;
}

/* Ambient inner shadow/vignette inside the pass */
.home-entry__pass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 18%, rgba(0, 229, 255, 0.12) 0%, transparent 45%),
              radial-gradient(circle at 88% 85%, rgba(255, 42, 95, 0.08) 0%, transparent 40%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* Title & Lead in Entry Pass */
.home-entry__title {
  color: #00f0ff !important;
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.55), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}
.home-entry__lead {
  color: #8da6b8 !important;
}

/* Steps & Stamps */
.home-entry__stamp {
  color: #00f0ff !important;
  border: 2px solid rgba(0, 229, 255, 0.55) !important;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.14) 0%, rgba(0, 229, 255, 0.02) 75%, transparent 100%) !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.22), inset 0 0 12px rgba(0, 229, 255, 0.1) !important;
  backdrop-filter: blur(4px) !important;
}
.home-entry__stamp:before {
  border-color: rgba(0, 229, 255, 0.35) !important;
}
.home-entry__step-title {
  color: #f0f6fc !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}
.home-entry__text {
  color: #869dae !important;
}
.home-entry__link.ui-link--inline {
  color: #00f0ff !important;
  text-decoration-color: rgba(0, 229, 255, 0.45) !important;
}
.home-entry__link.ui-link--inline:hover {
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.8) !important;
}

/* Photo Frame inside Pass */
.home-entry__photo-frame {
  background: linear-gradient(180deg, #0e1c28, #050a10) !important;
  border: 0.25rem solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85), 0 0 25px rgba(0, 229, 255, 0.2) !important;
}
.home-entry__photo figcaption {
  color: #7993a6 !important;
}

/* Perforation Dotted Divider */
.home-entry .home-entry__perforation.ui-separator {
  background-image: linear-gradient(180deg, rgba(0, 229, 255, 0.3) 50%, transparent 50%) !important;
}

/* Right Stub (Ticket Coupon) */
.home-entry__ticket dt {
  color: #5d788c !important;
}
.home-entry__ticket dd {
  color: #e4edf5 !important;
}
.home-entry__status .ui-status {
  --tone: 0, 229, 255 !important;
  --tone-text: 240, 248, 255 !important;
  background: rgba(0, 229, 255, 0.08) !important;
  border: 1px solid rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.18) !important;
}

/* "Jetzt verbinden" Button on Ticket */
.home-entry__stub .ui-button,
.home-entry__action .ui-button,
.home-entry .ui-button--light {
  background: linear-gradient(180deg, #00f0ff 0%, #00c0d4 60%, #0096a6 100%) !important;
  color: #03070b !important;
  font-weight: 700 !important;
  border: 1px solid #00f0ff !important;
  box-shadow: 0 4px 22px rgba(0, 240, 255, 0.5) !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--radius-control) !important;
  transition: all 0.2s ease !important;
}
.home-entry__stub .ui-button:hover,
.home-entry__action .ui-button:hover,
.home-entry .ui-button--light:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 6px 32px rgba(0, 240, 255, 0.8) !important;
}
.home-entry__copy-address {
  color: #8da4b5 !important;
}
.home-entry__copy-address:hover {
  color: #00f0ff !important;
}

/* ======================================================= */
/* GENERAL BUTTONS & PANELS - Dark Glass & Glowing Accents  */
/* ======================================================= */
.ui-button--primary {
  color: #04090e !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #00f0ff 0%, #00c7db 60%, #009eb0 100%) !important;
  border-color: #00f0ff !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.45) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ui-button--primary:hover {
  filter: brightness(1.15) !important;
  box-shadow: 0 6px 30px rgba(0, 240, 255, 0.75) !important;
}

.ui-button--secondary {
  background: rgba(10, 20, 30, 0.6) !important;
  border-color: rgba(0, 229, 255, 0.25) !important;
  color: #f0f6fc !important;
  backdrop-filter: blur(8px) !important;
}
.ui-button--secondary:hover {
  background: rgba(0, 229, 255, 0.12) !important;
  border-color: rgba(0, 229, 255, 0.6) !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2) !important;
}

.ui-button--danger {
  color: #ff2a5f !important;
  border-color: rgba(255, 42, 95, 0.5) !important;
  background-color: rgba(255, 42, 95, 0.12) !important;
  box-shadow: 0 0 15px rgba(255, 42, 95, 0.2) !important;
}

/* Dark Glassmorphic Cards & Panels */
.ui-panel, .home-live, .player-card, .shop-card {
  background: linear-gradient(180deg, rgba(10, 18, 26, 0.85) 0%, rgba(5, 9, 14, 0.92) 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.18) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 
              0 0 30px rgba(0, 229, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
}

/* Radial Menu Dark Cyber Feel */
.home-radial__ring {
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.9)) !important;
}
.home-radial__hub {
  background: radial-gradient(circle, #0c1824 0%, #050a10 80%) !important;
  border: 2px solid rgba(0, 229, 255, 0.4) !important;
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.25), inset 0 0 15px rgba(0, 229, 255, 0.15) !important;
  color: #00f0ff !important;
}
.home-radial__segment[data-active] {
  fill: #00f0ff !important;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.85));
}

/* Phone Chips & Icons */
.home-phone__chip {
  background: rgba(6, 12, 18, 0.88) !important;
  border: 1px solid rgba(0, 229, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 229, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}
.home-phone__chip[data-place="left-bottom"], 
.home-phone__chip[data-place="right-top"] {
  border-color: rgba(255, 42, 95, 0.45) !important;
}
.home-phone__chip-icon {
  background: linear-gradient(135deg, #ff2a5f 0%, #c4003f 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(255, 42, 95, 0.5) !important;
}

/* Navbar Brand & Highlights */
.home-nav__brand {
  color: #00f0ff !important;
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.7);
}
.home-nav[data-solid] .home-nav__backdrop {
  background: rgba(4, 8, 12, 0.85) !important;
  border: 1px solid rgba(0, 229, 255, 0.15) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 229, 255, 0.08) !important;
}


/* City Wordmark - Türkis to Schwarz Gradient */
.ui-wordmark__city {
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.45)) !important;
}
.ui-wordmark__stop {
  stop-color: #00f0ff !important;
}
.ui-wordmark__stop--end {
  stop-color: #040c14 !important;
}