/* Gemeinsames Spiel-Layout: Bühne oben, Bedienleiste unten (Daumenreichweite). */

.game-root {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.game-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-dim);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-sm);
}

.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

.game-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.game-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
}

.game-controls {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3) calc(var(--s3) + var(--safe-right)) calc(var(--s3) + var(--safe-bottom)) calc(var(--s3) + var(--safe-left));
  background: linear-gradient(180deg, rgba(20, 11, 36, 0.92), rgba(11, 6, 20, 0.98));
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}

.ctrl-group {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  justify-content: center;
}

.ctrl-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  line-height: 1.1;
}

.ctrl-label small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.ctrl-label strong {
  font-size: var(--fs-lg);
  font-weight: 900;
}

.ctrl-label.gold strong { color: var(--gold); }
.ctrl-label.lime strong { color: var(--lime); }
.ctrl-label.cyan strong { color: var(--cyan); }

.status-line {
  width: 100%;
  min-height: 1.4em;
  text-align: center;
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--ink-dim);
}

/* Tischfilz (DOM-Spiele) */
.felt {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
    radial-gradient(100% 100% at 50% 50%, var(--felt), var(--felt-dark));
  box-shadow: inset 0 0 0 10px #4a2414, inset 0 0 0 12px #9a5a36, inset 0 0 80px rgba(0, 0, 0, 0.55);
}

@media (max-height: 520px) and (orientation: landscape) {
  .game-controls {
    padding-top: var(--s2);
    padding-bottom: calc(var(--s2) + var(--safe-bottom));
  }
}

/* Digitale Anzeige (Slots, Arcade) */
.slot-display {
  flex: 1;
  padding: 6px 10px;
  border-radius: 10px;
  background: #07040e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1.1;
  min-width: 0;
}

.slot-display small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

.slot-display strong {
  display: block;
  font-size: clamp(1rem, 4.5vw, 1.4rem);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 197, 61, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-display.msg strong {
  color: var(--cyan);
  font-size: clamp(0.8rem, 3.4vw, 1rem);
  text-shadow: none;
  padding-top: 3px;
}