/* =========================================================
   TABLET (tablet.html) – Bedienung fuer die Kinder
========================================================== */
.tablet-mode {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

.tab-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: max(16px, 2.5vh) 16px 24px;
  text-align: center;
}

.tab-logo {
  width: min(70vw, 360px, 26vh);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 157, 61, 0.5));
}

/* Ansichten: immer nur eine sichtbar */
.tab-view {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}

.tab-view.show {
  display: flex;
  animation: tabIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes tabIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Verbindungsanzeige ---------- */
.conn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 10, 36, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.9rem;
  color: var(--text-dim);
}

.conn-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e63956;
  box-shadow: 0 0 8px #e63956;
}

.conn.ok .conn-dot { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }

/* ---------- Fledermaus ueber dem Knopf ---------- */
.tab-bat {
  --size: min(78vw, 560px, 44vh);
  position: relative;
  width: var(--size);
  aspect-ratio: 1188 / 532;
  margin-bottom: calc(var(--size) * -0.17); /* Knopf verdeckt Bauch und Beine, Gesicht bleibt sichtbar */
  pointer-events: none;
}

.tab-bat-part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tab-wing-l { transform-origin: 41.4% 48.1%; animation: tabFlapL 2.4s ease-in-out infinite; }
.tab-wing-r { transform-origin: 58.7% 48.1%; animation: tabFlapR 2.4s ease-in-out infinite; }

@keyframes tabFlapL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes tabFlapR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }

/* ---------- Grosser Dreh-Knopf (im Stil der JUMPHOUSE-Nabe) ---------- */
.tab-spin {
  position: relative;
  z-index: 2;
  width: min(66vw, 400px, 36vh);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #4b1a63 0%, #1f0a2c 55%, #0b0412 100%);
  box-shadow:
    0 0 0 6px #5a3000,
    0 0 0 13px #f0b93a,
    0 0 0 17px #7a4300,
    0 0 50px 18px rgba(255, 120, 20, 0.5),
    0 14px 26px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(0, 0, 0, 0.85);
  animation: tabSpinPulse 1.6s ease-in-out infinite;
  transition: transform 0.12s ease;
}

.tab-spin:active { transform: scale(0.92); }
.tab-spin:disabled { animation: none; filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; }

@keyframes tabSpinPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.tab-spin-text {
  position: relative;
  display: block;
  font-family: 'Creepster', 'Lilita One', 'Arial Black', sans-serif;
  font-size: calc(min(66vw, 400px, 36vh) * 0.16);
  line-height: 0.95;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, #ffe08a 0%, #ff9a1f 45%, #e2410b 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 110, 0, 0.85)) drop-shadow(0 3px 0 #2a0700);
}

.tab-hint,
.tab-sub {
  margin: 3vh 0 0;
  max-width: 34em;
  color: #fff3c4;
  font-size: max(1rem, 2.4vh);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* ---------- Warten ---------- */
.tab-wait-wheel {
  width: min(40vw, 240px, 24vh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#ff8c2e 0 51deg, #5b2a86 0 103deg, #1fae6b 0 154deg, #e63956 0 206deg,
    #2b2142 0 257deg, #1b8f86 0 309deg, #ffd54a 0 360deg);
  box-shadow: 0 0 0 8px #5a0f1e, 0 0 0 12px #f3c04a, 0 0 40px rgba(255, 140, 40, 0.5);
  animation: tabWheel 0.8s linear infinite;
}

@keyframes tabWheel { to { transform: rotate(360deg); } }

.tab-big {
  margin: 4vh 0 0;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: max(2rem, 6vh);
  line-height: 1.05;
  color: #ffd84a;
  -webkit-text-stroke: 0.05em #4a1408;
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 #a0381c, 0 0 22px rgba(255, 190, 60, 0.5);
}

/* ---------- Gewinn ---------- */
.tab-eyebrow {
  margin: 0;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-size: max(1.2rem, 3vh);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 0 #3a1650, 0 0 18px rgba(0, 0, 0, 0.8);
}

.tab-prize-icon {
  font-size: max(5rem, 16vh);
  line-height: 1.1;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
  animation: tabIconPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both, tabIconFloat 2.2s ease-in-out 0.7s infinite;
}

@keyframes tabIconPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
@keyframes tabIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.08em); } }

.tab-prize {
  margin: 1vh 0 0;
  max-width: 92vw;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: max(2.2rem, 7vh);
  line-height: 1.05;
  background: linear-gradient(180deg, #fffcc2 0%, #f9e135 35%, #f6b01c 70%, #e0560c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.05em #4a1408;
  paint-order: stroke fill;
  filter: drop-shadow(0 0.07em 0 #a0381c) drop-shadow(0 0 22px rgba(255, 190, 60, 0.5));
}

.tab-warn {
  min-height: 1.2em;
  margin: 2vh 0 0;
  color: #ffb4c0;
  font-size: max(0.95rem, 2vh);
}

.tab-next {
  margin-top: 3vh;
  padding: 2vh 5vh;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Lilita One', 'Arial Black', sans-serif;
  font-size: max(1.2rem, 3.2vh);
  color: #2a0d00;
  background: linear-gradient(180deg, var(--gold), var(--orange));
  box-shadow: 0 0.8vh 0 #b85c00, 0 1.4vh 3vh rgba(0, 0, 0, 0.45);
}

.tab-next:active { transform: translateY(3px); box-shadow: 0 3px 0 #b85c00; }

.tool-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #ffe3a3;
  background: rgba(255, 190, 60, 0.12);
  border: 1px solid rgba(255, 190, 60, 0.45);
}

/* Querformat-Tablet: Fledermaus+Knopf links, Text rechts waere zu klein -> einfach kompakter */
@media (min-aspect-ratio: 4/3) {
  .tab-logo { width: min(36vw, 22vh); }
  .tab-bat { --size: min(56vw, 46vh); }
  .tab-spin { width: min(40vw, 38vh); }
  .tab-spin-text { font-size: calc(min(40vw, 38vh) * 0.16); }
}