@charset "UTF-8";
/* ==========================================================================
   contact-center-service.de — hey contact heroes GmbH
   Designsystem, Layout und Spielstyling. Keine externen Ressourcen.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------------------- */
@font-face{font-family:"Aspekta";src:url("../fonts/Aspekta-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aspekta";src:url("../fonts/Aspekta-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aspekta";src:url("../fonts/Aspekta-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Aspekta";src:url("../fonts/Aspekta-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- Designtokens ------------------------------------------------- */
:root{
  --teal:#1fc9ca; --teal-deep:#19a4a5;
  --magenta:#d42fa5; --magenta-deep:#a21b80;
  --orange:#f49a1c;
  --bg:#070a12; --bg-2:#0b0f1c; --bg-3:#101625;
  --ink:#eef2f9; --ink-dim:#a8b3c6; --ink-mute:#7f8ca3;
  --stroke:rgba(255,255,255,.10);
  --stroke-strong:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --grad-brand:linear-gradient(100deg,var(--teal) 0%,var(--magenta) 58%,var(--orange) 112%);
  --radius:20px; --radius-sm:12px;
  --maxw:1180px; --nav-h:72px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 18px 50px -22px rgba(0,0,0,.85);
  --focus:0 0 0 3px rgba(31,201,202,.55);
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Aspekta",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{max-width:100%; height:auto; display:block}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.15; margin:0 0 .5em; font-weight:900; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem)}
h3{font-size:clamp(1.12rem,2vw,1.35rem); font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em; padding-left:1.15em}
li{margin-bottom:.45em}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:8px}

/* ---------- Hilfsklassen ------------------------------------------------- */
.wrap{width:min(100% - 2.5rem,var(--maxw)); margin-inline:auto}
.section{padding:clamp(3.5rem,7vw,6rem) 0; position:relative}
.section--alt{background:var(--bg-2)}
.eyebrow{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal); margin-bottom:.9rem;
}
.lead{font-size:clamp(1.02rem,1.7vw,1.18rem); color:var(--ink-dim); max-width:62ch}
.muted{color:var(--ink-dim)}
.small{font-size:.9rem}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.grad-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200; background:var(--teal);
  color:#04121a; padding:.7rem 1.1rem; border-radius:0 0 10px 0; font-weight:700;
}
.skip-link:focus{left:0}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.6rem; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:.98rem; cursor:pointer; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  line-height:1.2;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--grad-brand); color:#050810; box-shadow:0 10px 30px -12px rgba(212,47,165,.75)}
.btn--primary:hover{box-shadow:0 16px 38px -12px rgba(212,47,165,.9)}
.btn--ghost{background:var(--glass); color:var(--ink); border-color:var(--stroke-strong)}
.btn--ghost:hover{background:var(--glass-2); border-color:var(--teal)}
.btn--sm{padding:.6rem 1.15rem; font-size:.9rem}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- Kopfbereich -------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:rgba(7,10,18,.88); border-bottom:1px solid var(--stroke);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
}
.nav__inner{height:100%; display:flex; align-items:center; gap:1.5rem}
.nav__logo img{height:34px; width:auto}
.nav__links{display:flex; gap:1.5rem; margin-left:auto; align-items:center}
.nav__links a{color:var(--ink-dim); font-size:.94rem; font-weight:500; text-decoration:none; white-space:nowrap}
.nav__links a:hover{color:var(--ink)}
.nav__cta{margin-left:.4rem}
.nav__toggle{
  display:none; margin-left:auto; background:var(--glass); border:1px solid var(--stroke-strong);
  border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
}
.nav__toggle span{display:block; width:18px; height:2px; background:var(--ink); position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink)}
.nav__toggle span::before{top:-6px} .nav__toggle span::after{top:6px}

@media (max-width:900px){
  .nav__toggle{display:flex}
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--bg-2); border-bottom:1px solid var(--stroke); padding:.5rem 1.25rem 1.25rem;
    transform:translateY(-120%); transition:transform .3s var(--ease); max-height:calc(100vh - var(--nav-h)); overflow:auto;
  }
  .nav__links[data-open="true"]{transform:translateY(0)}
  .nav__links a{padding:.85rem 0; border-bottom:1px solid var(--stroke); font-size:1rem}
  .nav__cta{margin:1rem 0 0}
}

/* ---------- Hero --------------------------------------------------------- */
.hero{position:relative; padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem); overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:80%;
  background:radial-gradient(60% 60% at 20% 30%,rgba(31,201,202,.22),transparent 70%),
             radial-gradient(50% 50% at 80% 10%,rgba(212,47,165,.20),transparent 70%);
  pointer-events:none; filter:blur(6px);
}
.hero__grid{
  position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.hero h1{margin-bottom:.55em}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}
.hero__facts{display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:2.4rem; padding-top:1.7rem; border-top:1px solid var(--stroke)}
.hero__fact strong{display:block; font-size:1.5rem; font-weight:900; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__fact span{font-size:.86rem; color:var(--ink-dim)}
.hero__art{position:relative; justify-self:center}
.hero__art img{width:min(100%,420px); filter:drop-shadow(0 30px 45px rgba(0,0,0,.55))}
.hero__badge{
  position:absolute; background:var(--bg-3); border:1px solid var(--stroke-strong);
  border-radius:14px; padding:.55rem .85rem; font-size:.82rem; font-weight:600;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.hero__badge--1{top:8%; left:-6%}
.hero__badge--2{bottom:14%; right:-4%}
.dot{width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none}
.dot--m{background:var(--magenta)}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{order:-1; max-width:280px}
  .hero__badge{display:none}
}

/* ---------- Karten ------------------------------------------------------- */
.grid{display:grid; gap:1.2rem}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius);
  padding:1.7rem 1.6rem; transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.card:hover{border-color:var(--stroke-strong); background:var(--glass-2); transform:translateY(-3px)}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card__icon{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(31,201,202,.22),rgba(212,47,165,.22));
  border:1px solid var(--stroke-strong); margin-bottom:1.05rem;
}
.card__icon svg{width:22px; height:22px; stroke:var(--teal); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.card ul{padding-left:1.1em; margin-bottom:0}
.card li{font-size:.95rem; color:var(--ink-dim)}

/* Split-Bereiche */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(2rem,4vw,3.5rem); align-items:center}
.split__art img{width:min(100%,340px); margin-inline:auto; filter:drop-shadow(0 24px 38px rgba(0,0,0,.5))}
.checklist{list-style:none; padding:0}
.checklist li{position:relative; padding-left:1.9rem; color:var(--ink-dim)}
.checklist li::before{
  content:""; position:absolute; left:0; top:.55em; width:14px; height:8px;
  border-left:2.5px solid var(--teal); border-bottom:2.5px solid var(--teal);
  transform:rotate(-45deg);
}

/* Ablauf */
.steps{counter-reset:step; display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); list-style:none; padding:0}
.steps li{
  counter-increment:step; background:var(--glass); border:1px solid var(--stroke);
  border-radius:var(--radius); padding:1.6rem 1.5rem 1.5rem;
}
.steps li::before{
  content:"0" counter(step); display:block; font-size:1.5rem; font-weight:900; margin-bottom:.6rem;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.steps h3{font-size:1.05rem; margin-bottom:.35rem}
.steps p{font-size:.93rem; color:var(--ink-dim); margin:0}

/* ---------- Spielbereich ------------------------------------------------- */
.game-section{
  background:
    radial-gradient(70% 60% at 50% -10%,rgba(31,201,202,.14),transparent 70%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  border-block:1px solid var(--stroke);
}
.game-layout{
  display:grid; grid-template-columns:minmax(0,auto) minmax(260px,320px);
  gap:clamp(1.2rem,3vw,2.2rem); justify-content:center; align-items:start; margin-top:2.5rem;
}
.game-stage{
  position:relative; background:#05070d; border:1px solid var(--stroke-strong);
  border-radius:var(--radius); padding:14px; box-shadow:var(--shadow), 0 0 0 1px rgba(31,201,202,.08) inset;
  touch-action:none;
}
.game-stage canvas{
  display:block; border-radius:10px; background:#04060b;
  width:100%; height:auto; max-height:min(64vh,560px); margin-inline:auto;
  image-rendering:auto; touch-action:none;
}
#board{aspect-ratio:1/2}

/* Overlays */
.overlay{
  position:absolute; inset:14px; border-radius:10px; display:grid; place-items:center;
  background:rgba(4,6,11,.93); backdrop-filter:blur(3px); text-align:center; padding:1.5rem; z-index:3;
}
.overlay[hidden]{display:none}
.overlay__inner{max-width:300px; width:100%}
.overlay h3{font-size:1.35rem; margin-bottom:.5rem}
.overlay p{font-size:.92rem; color:var(--ink-dim); margin-bottom:1.2rem}
.overlay .btn{width:100%}
.keyhint{
  display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:1.1rem;
  font-size:.76rem; color:var(--ink-mute);
}
kbd{
  background:var(--glass-2); border:1px solid var(--stroke-strong); border-bottom-width:2px;
  border-radius:6px; padding:.12em .45em; font-family:inherit; font-size:.78em; font-weight:700; color:var(--ink);
}

/* Seitenleiste */
.game-side{display:grid; gap:1rem}
.panel{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius); padding:1.1rem 1.2rem}
.panel h3{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; margin-bottom:.85rem}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem}
.stat{background:rgba(0,0,0,.28); border:1px solid var(--stroke); border-radius:var(--radius-sm); padding:.6rem .7rem}
.stat span{display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute)}
.stat strong{font-size:1.35rem; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.25}
.stat--wide{grid-column:1/-1}
#next{width:100%; max-width:150px; aspect-ratio:4/3; margin-inline:auto; display:block; background:rgba(0,0,0,.28); border-radius:var(--radius-sm)}
.sound-row{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.9rem}
.toggle{
  display:inline-flex; align-items:center; gap:.5rem; background:none; border:1px solid var(--stroke-strong);
  border-radius:999px; padding:.4rem .85rem; cursor:pointer; font-size:.85rem; font-weight:600;
}
.toggle[aria-pressed="true"]{border-color:var(--teal); color:var(--teal)}

/* Touch-Steuerung */
.touchpad{display:none; margin-top:1rem; gap:.55rem; grid-template-columns:repeat(4,1fr); user-select:none}
.touchpad button{
  background:var(--glass-2); border:1px solid var(--stroke-strong); border-radius:14px;
  height:56px; display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; font-size:.72rem; font-weight:700; color:var(--ink); gap:2px; padding:0;
}
.touchpad button:active{background:rgba(31,201,202,.22); border-color:var(--teal)}
.touchpad button svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.touchpad .wide{grid-column:span 2}
body.is-touch .touchpad{display:grid}
body.is-touch .keyhint{display:none}

@media (max-width:880px){
  .game-layout{grid-template-columns:minmax(0,1fr); max-width:460px; margin-inline:auto}
  .game-stage canvas{max-height:min(58vh,520px)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat strong{font-size:1.1rem}
}
@media (max-width:420px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Reihen-Blitz */
.flash{position:absolute; left:14px; right:14px; height:2px; background:var(--teal); box-shadow:0 0 18px 4px rgba(31,201,202,.9); pointer-events:none; z-index:2; opacity:0}

/* ---------- Bestenliste -------------------------------------------------- */
.scoreboard{margin-top:2.5rem}
.score-table{width:100%; border-collapse:collapse; font-size:.94rem}
.score-table caption{text-align:left; color:var(--ink-mute); font-size:.85rem; padding-bottom:.7rem}
.score-table th,.score-table td{padding:.62rem .7rem; text-align:left; border-bottom:1px solid var(--stroke)}
.score-table th{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); font-weight:700}
.score-table td:first-child{width:2.6rem; font-weight:900; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.score-table tr:nth-child(1) td:first-child{color:var(--orange)}
.score-table tr:nth-child(2) td:first-child{color:var(--teal)}
.score-table tr:nth-child(3) td:first-child{color:var(--magenta)}
.score-table td:last-child,.score-table th:last-child{text-align:right; font-variant-numeric:tabular-nums; font-weight:700}
.score-table tr.is-me td{background:rgba(31,201,202,.10)}
.score-table .company{display:block; font-size:.8rem; color:var(--ink-mute)}

/* ---------- Formulare ---------------------------------------------------- */
.form{display:grid; gap:1.05rem}
.form-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.05rem}
.field{display:grid; gap:.4rem}
.field label{font-size:.86rem; font-weight:600}
.field .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%; background:rgba(0,0,0,.32); border:1px solid var(--stroke-strong); border-radius:12px;
  padding:.75rem .9rem; font-size:.97rem; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal); background:rgba(0,0,0,.5); outline:none; box-shadow:var(--focus)}
.field textarea{min-height:130px; resize:vertical}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%); background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.4rem}
.field select option{background:var(--bg-2); color:var(--ink)}
.field .hint{font-size:.79rem; color:var(--ink-mute)}
.field .err{font-size:.82rem; color:#ff8fa3; min-height:0}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:#ff8fa3}
.check{display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; color:var(--ink-dim)}
.check input{width:19px; height:19px; margin:.22rem 0 0; flex:none; accent-color:var(--teal)}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.formnote{
  border-radius:12px; padding:.85rem 1rem; font-size:.9rem; font-weight:600; border:1px solid;
  display:flex; gap:.6rem; align-items:flex-start;
}
.formnote[hidden]{display:none}
.formnote--ok{background:rgba(31,201,202,.12); border-color:rgba(31,201,202,.5); color:#8ff0f1}
.formnote--err{background:rgba(255,80,110,.10); border-color:rgba(255,140,163,.5); color:#ffb3c1}

/* ---------- FAQ ---------------------------------------------------------- */
.faq{display:grid; gap:.75rem; max-width:880px}
.faq details{background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius-sm); overflow:hidden}
.faq details[open]{border-color:var(--stroke-strong); background:var(--glass-2)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.25rem; font-weight:700;
  position:relative; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:1.3rem; top:1.5rem; width:9px; height:9px;
  border-right:2.5px solid var(--teal); border-bottom:2.5px solid var(--teal);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .answer{padding:0 1.25rem 1.15rem; color:var(--ink-dim); font-size:.96rem}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- CTA-Banner --------------------------------------------------- */
.cta-band{
  background:linear-gradient(120deg,rgba(31,201,202,.16),rgba(212,47,165,.16) 60%,rgba(244,154,28,.14));
  border:1px solid var(--stroke-strong); border-radius:var(--radius);
  padding:clamp(1.6rem,3.5vw,2.6rem); display:flex; flex-wrap:wrap; gap:1.4rem;
  align-items:center; justify-content:space-between;
}
.cta-band h2{font-size:clamp(1.35rem,2.6vw,1.85rem); margin-bottom:.3rem}
.cta-band p{margin:0; color:var(--ink-dim); max-width:52ch}

/* ---------- Fusszeile ---------------------------------------------------- */
.footer{background:var(--bg-2); border-top:1px solid var(--stroke); padding:3.2rem 0 2rem; font-size:.93rem}
.footer__grid{display:grid; grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(160px,1fr)); gap:2rem}
.footer__logo img{height:38px; width:auto; margin-bottom:1rem}
.footer h4{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; margin:0 0 .9rem}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:.55rem}
.footer a{color:var(--ink-dim)}
.footer a:hover{color:var(--teal)}
.footer__bottom{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--stroke);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between;
  color:var(--ink-mute); font-size:.86rem;
}
.footer__bottom nav{display:flex; gap:1.3rem; flex-wrap:wrap}

/* ---------- Rechtsseiten ------------------------------------------------- */
.legal{max-width:800px; padding-top:2.5rem}
.legal h2{font-size:1.4rem; margin-top:2.4rem}
.legal h3{font-size:1.08rem; margin-top:1.7rem}
.legal p,.legal li{color:var(--ink-dim)}
.legal address{font-style:normal; color:var(--ink)}

/* ---------- Animationen -------------------------------------------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .reveal{opacity:1; transform:none}
}

/* ---------- Druck -------------------------------------------------------- */
@media print{
  .nav,.touchpad,.game-stage,.game-side,.cta-band{display:none!important}
  body{background:#fff; color:#000}
}