
/* ==========================================================
   V11 – SprungKiste
   ========================================================== */
.wk-game-shell{
  overflow:hidden;
  border:1px solid #cfdee7;
  border-radius:22px;
  background:#081c28;
  box-shadow:0 25px 65px rgba(6,31,47,.13);
}

.wk-game-topbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:13px 17px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#0a2231;
}

.wk-game-brand{
  display:flex;
  align-items:center;
  gap:9px;
}

.wk-game-brand strong{font-size:.84rem}
.wk-game-brand small{color:#7894a4;font-size:.62rem}

.wk-game-stats{
  display:flex;
  align-items:center;
  gap:23px;
}

.wk-game-stats>div{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.wk-game-stats small{
  color:#75909f;
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.wk-game-stats strong{
  margin-top:2px;
  font-variant-numeric:tabular-nums;
  font-size:.86rem;
  letter-spacing:.08em;
}

.wk-game-icon-btn{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  color:#c9e5f5;
  background:rgba(255,255,255,.035);
  cursor:pointer;
}

.wk-game-canvas-wrap{
  position:relative;
  background:#dff4ff;
}

#wkGameCanvas{
  display:block;
  width:100%;
  height:auto;
  touch-action:manipulation;
  cursor:pointer;
  outline:none;
}

.wk-game-overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  visibility:hidden;
  opacity:0;
  background:rgba(4,22,32,.22);
  backdrop-filter:blur(2px);
  transition:opacity .18s ease,visibility .18s ease;
}

.wk-game-overlay.is-visible{
  visibility:visible;
  opacity:1;
}

.wk-game-overlay-card{
  width:min(100%,460px);
  padding:27px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  color:#fff;
  text-align:center;
  background:rgba(7,29,42,.91);
  box-shadow:0 25px 60px rgba(0,0,0,.28);
}

.wk-game-overline{
  color:#55b8ff;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.14em;
}

.wk-game-overlay-card h2{
  margin-top:8px;
  color:#fff;
  font-size:2rem;
}

.wk-game-overlay-card p{
  max-width:360px;
  margin:10px auto 19px;
  color:#bfd0d9;
  line-height:1.55;
}

.wk-game-overlay-card small{
  display:block;
  margin-top:13px;
  color:#7894a4;
  font-size:.64rem;
}

.wk-game-controls{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:20px;
  align-items:center;
  padding:14px 16px;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  background:#0a2231;
}

.wk-game-jump-btn,
.wk-game-secondary-btn{
  border:0;
  cursor:pointer;
}

.wk-game-jump-btn{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:145px;
  padding:11px 17px;
  border-radius:11px;
  color:#fff;
  background:#108cff;
  font-weight:900;
}

.wk-game-jump-btn span{font-size:1.15rem}

.wk-game-secondary-btn{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  color:#c8d9e2;
  background:rgba(255,255,255,.035);
  font-weight:800;
}

.wk-game-help{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#7994a3;
  font-size:.62rem;
}

.wk-game-help strong{color:#cbdce5}

.wk-game-noscript{
  margin:0;
  padding:15px;
  color:#fff;
  background:#8a312b;
}

@media(max-width:700px){
  .wk-game-topbar{align-items:flex-start}
  .wk-game-brand small{display:none}
  .wk-game-stats{gap:12px}
  .wk-game-controls{grid-template-columns:1fr 1fr}
  .wk-game-help{grid-column:1/-1;grid-row:2}
  .wk-game-jump-btn{min-width:0;justify-content:center}
}

@media(max-width:480px){
  .wk-game-stats>div:first-child{display:none}
  .wk-game-overlay-card{padding:22px 17px}
  .wk-game-overlay-card h2{font-size:1.7rem}
}

@media(prefers-reduced-motion:reduce){
  .wk-game-overlay{transition:none!important}
}
