*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#078ed0;color:#072e51}
.screen{display:none;min-height:100vh}
.screen.on{display:block}

.home{
  min-height:100svh;
  background:#078ed0;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right))
          max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));
}
.home.on{display:flex}

/* Die Grafik hat 1536 x 1024 = 3:2.
   Bild und Klickflächen bleiben immer im selben Koordinatensystem. */
.home-stage{
  position:relative;
  width:min(100vw,calc(100svh * 1.5));
  aspect-ratio:3 / 2;
  flex:0 0 auto;
  overflow:hidden;
  background:#d8f3ff;
}
.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.hot{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
}
.spot{
  position:absolute;
  z-index:21;
  border:0;
  padding:0;
  margin:0;
  background:rgba(255,255,255,0.001);
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* EXAKTE Klickflächen der aktuellen neutralen Grafik */
.help{left:82.2%;top:2.2%;width:7.8%;height:13.5%}
.settings{left:90.2%;top:2.2%;width:8.0%;height:13.5%}
.start{left:30.3%;top:44.0%;width:37.6%;height:16.3%}
.reg{left:2.6%;top:73.7%;width:19.3%;height:13.4%}
.board{left:23.2%;top:73.7%;width:16.3%;height:13.4%}
.rules{left:40.4%;top:73.7%;width:17.0%;height:13.4%}
.jokerinfo{left:58.4%;top:73.7%;width:17.0%;height:13.4%}

.spot:focus-visible{
  outline:3px solid #fff;
  box-shadow:0 0 0 6px #07375f;
  border-radius:14px;
}

/* Handy hochkant: die vollständige Grafik bleibt sichtbar.
   Die Klickkoordinaten bleiben identisch; nur die Gesamtgrafik wird skaliert. */
@media (max-width:700px){
  .home{
    align-items:flex-start;
    justify-content:center;
    padding-top:max(8px,env(safe-area-inset-top));
  }
  .home-stage{
    width:100vw;
    max-width:none;
    aspect-ratio:3 / 2;
  }
  /* Mindest-Touchhöhe für die kleinen oberen Icons, ohne ihre Lage zu verändern */
  .help,.settings{min-height:44px}
}
.panel{padding:6vh 15px;background:linear-gradient(#0aa8eb,#0874b6)}.card{max-width:820px;margin:auto;background:white;border:4px solid #062e52;border-radius:26px;padding:30px;box-shadow:0 16px 35px #003b5d66}.card h1{margin-top:0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card input{width:100%;padding:15px;border:2px solid #acd4e8;border-radius:12px;margin:7px 0;font-size:1rem}.consent{display:flex;gap:10px;align-items:flex-start;font-weight:600;margin:12px 0}.consent input{width:auto;margin-top:3px}.primary,.secondary,.masterBtn,.masteractions button{width:100%;padding:15px;border:0;border-radius:13px;margin-top:10px;font-weight:800;font-size:1rem}.primary{background:#ff9f00;color:#fff}.secondary{background:#07375f;color:#fff}.masterBtn{background:#e9f4fa;color:#07375f}.center{text-align:center}.hat{font-size:6rem}.game{background:linear-gradient(#08a7eb,#0874b6);padding-bottom:40px}.game header{background:#062e52;color:#fff;padding:18px 5%;display:flex;justify-content:space-between;align-items:center}.brand{font-size:1.7rem;color:#ff7400}.brand span{color:#31b6ff}.game main{max-width:920px;margin:34px auto;background:#fff;border:5px solid #062e52;border-radius:26px;padding:30px}.qtop{display:flex;justify-content:space-between;align-items:center;color:#0879b7}.timer{width:64px;height:64px;border-radius:50%;background:#ff9f00;color:#fff;display:grid;place-items:center;font-size:2rem;font-weight:900}.progress{height:11px;border-radius:10px;background:#dcebf3;overflow:hidden;margin:14px 0 25px}.progress i{display:block;height:100%;background:#ff9f00;width:0}.game h2{font-size:2rem;min-height:80px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.answer{padding:18px;border:3px solid #087abc;border-radius:16px;background:#eaf8ff;font-size:1rem;font-weight:800;text-align:left}.answer.correct{background:#c6f4ce;border-color:#198a42}.answer.wrong{background:#ffd1cc;border-color:#c53d30}.actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}.actions button{padding:13px 18px;border:0;border-radius:12px;background:#ffb000;font-weight:800}.leaderrow{display:grid;grid-template-columns:45px 1fr auto;gap:10px;padding:12px;border-bottom:1px solid #d7e7ef}.masterrow{display:grid;grid-template-columns:1.2fr 1.5fr auto auto;gap:8px;border-bottom:1px solid #d7e7ef;padding:10px 0;align-items:center}.masterrow button{padding:8px;border:0;border-radius:8px}.masteractions{display:flex;gap:8px}.masteractions button{background:#07375f;color:white}@media(max-width:700px){.grid,.answers{grid-template-columns:1fr}.game main{margin:15px 10px;padding:20px}.game h2{font-size:1.5rem}.game header{gap:12px;align-items:flex-start}.brand{font-size:1.2rem}.masterrow{grid-template-columns:1fr}}