/* ================================================================
   POWERPOINT 2003 / CAPCUT FREE TRIAL EDITION — MOBILE KIOSK MODE
   Cíleně strašné, cíleně nádherné. Boomer certified.
   ================================================================ */

@keyframes bg-drift {
  0% { background-position: 0% 0%, 100% 100%; }
  50% { background-position: 100% 50%, 0% 50%; }
  100% { background-position: 0% 0%, 100% 100%; }
}

html, body.pptx-body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

/* [hidden] muze byt prebito jinym pravidlem se stejnou specificitou
   (napr. .mute-btn { display: flex }), takze to vynucujeme natvrdo */
[hidden] {
  display: none !important;
}

.pptx-body {
  font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', cursive, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 209, 102, 0.25), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255, 77, 109, 0.25), transparent 40%),
    linear-gradient(135deg, #0b0e1c 0%, #1b1035 50%, #0b0e1c 100%);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: bg-drift 12s ease-in-out infinite;
  color: #fff;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.pptx-stage {
  position: fixed;
  inset: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ---------- WordArt ---------- */

@keyframes wordart-rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes wordart-bounce-in {
  0% { transform: scale(0.2) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  80% { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.wordart {
  font-weight: 900;
  text-align: center;
  background: linear-gradient(90deg, #ff0040, #ff8c00, #ffee00, #26e026, #00c8ff, #a020f0, #ff0040);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wordart-rainbow 3s linear infinite, wordart-bounce-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    wordart-shift 4s linear infinite;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5)) drop-shadow(-2px -2px 0 rgba(255, 255, 255, 0.15));
}

@keyframes wordart-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.big-wordart {
  font-size: clamp(2.6rem, 12vw, 5.5rem);
  line-height: 1.05;
  padding: 0 12px;
}

.subtitle-wordart {
  margin-top: 14px;
  text-align: center;
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  font-weight: bold;
  color: #ffe066;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 18px rgba(255, 224, 102, 0.8);
  animation: wordart-bounce-in 1.2s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  padding: 0 24px;
}

.title-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  cursor: pointer;
  width: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing: border-box;
}

@keyframes blink-hard {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

.click-hint {
  margin-top: 44px;
  font-size: clamp(1rem, 4.5vw, 1.3rem);
  color: #7CFC00;
  font-weight: bold;
  text-shadow: 0 0 8px #7CFC00;
  text-align: center;
  padding: 0 20px;
}

.blink {
  animation: blink-hard 1.1s steps(1) infinite;
}

/* ---------- Clipart ---------- */

@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes pulse-clip {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

.clipart {
  position: absolute;
  font-size: 2.6rem;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

.clip-tl { top: 5%; left: 6%; }
.clip-tr { top: 5%; right: 6%; }
.clip-bl { bottom: 10%; left: 8%; }
.clip-br { bottom: 10%; right: 8%; }

.spin-slow { animation: spin-cw 6s linear infinite; }
.spin-slow-rev { animation: spin-ccw 5s linear infinite; }
.pulse { animation: pulse-clip 1.6s ease-in-out infinite; }
.pulse-rev { animation: pulse-clip 1.6s ease-in-out infinite reverse; }

/* ---------- Slide stage: FULLSCREEN, edge to edge, telefon-first ---------- */

.slide-wrap {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  visibility: hidden;
}

.slide.is-active {
  visibility: visible;
  z-index: 2;
}

.slide .slide-caption-wrap {
  position: relative;
  width: 100%;
  padding: 30px 20px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 20%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.0) 100%);
  box-sizing: border-box;
}

.slide-caption {
  display: inline-block;
  font-weight: 900;
  font-size: clamp(1.6rem, 7.2vw, 2.6rem);
  line-height: 1.2;
  background: linear-gradient(90deg, #ff0040, #ff8c00, #ffee00, #26e026, #00c8ff, #a020f0, #ff0040);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.75);
  animation: wordart-rainbow 3s linear infinite, wordart-shift 4s linear infinite;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.8));
}

.slide-caption.no-caption {
  background: none;
  -webkit-text-stroke: 0;
  color: #ddd;
  font-style: italic;
  font-weight: normal;
  font-size: clamp(1rem, 4vw, 1.2rem);
  animation: none;
  filter: none;
}

/* ---------- Flash pulse on every transition (CapCut-tier trash) ---------- */

.flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

/* ---------- Entrance transitions (applied to incoming .slide) ---------- */

@keyframes tr-spin-zoom {
  0% { transform: scale(0.1) rotate(540deg); opacity: 0; }
  70% { transform: scale(1.12) rotate(-15deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.tr-spin-zoom { animation: tr-spin-zoom 0.85s cubic-bezier(0.22, 1.4, 0.36, 1) both; }

@keyframes tr-flip3d {
  0% { transform: perspective(1200px) rotateY(110deg) scale(0.7); opacity: 0; }
  100% { transform: perspective(1200px) rotateY(0deg) scale(1); opacity: 1; }
}
.tr-flip3d { animation: tr-flip3d 0.8s ease-out both; transform-style: preserve-3d; }

@keyframes tr-iris {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(150% at 50% 50%); }
}
.tr-iris { animation: tr-iris 0.9s ease-in-out both; }

@keyframes tr-slide-bounce {
  0% { transform: translateX(120%) rotate(8deg); opacity: 0; }
  55% { transform: translateX(-4%) rotate(-2deg); opacity: 1; }
  75% { transform: translateX(2%) rotate(1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
.tr-slide-bounce { animation: tr-slide-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes tr-glitch {
  0% { filter: hue-rotate(0deg) saturate(3) contrast(1.4); transform: translate(0, 0) skewX(0deg); opacity: 0; }
  10% { transform: translate(-8px, 2px) skewX(8deg); opacity: 1; }
  20% { transform: translate(6px, -3px) skewX(-6deg); }
  30% { transform: translate(-4px, 3px) skewX(4deg); filter: hue-rotate(120deg) saturate(3); }
  45% { transform: translate(5px, -2px) skewX(-3deg); }
  60% { transform: translate(-2px, 1px) skewX(1deg); filter: hue-rotate(280deg) saturate(2); }
  80% { transform: translate(1px, 0) skewX(0deg); filter: hue-rotate(0deg) saturate(1.2); }
  100% { transform: translate(0, 0) skewX(0deg); filter: none; opacity: 1; }
}
.tr-glitch { animation: tr-glitch 0.7s steps(2, end) both; }

@keyframes tr-newsflash {
  0% { transform: scale(2.4) rotate(-20deg); opacity: 0; filter: blur(6px); }
  40% { transform: scale(0.85) rotate(6deg); opacity: 1; filter: blur(0); }
  60% { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.tr-newsflash { animation: tr-newsflash 0.9s ease-out both, shake-end 0.35s 0.55s; }

@keyframes shake-end {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -8px; }
  75% { margin-left: 8px; }
}

/* ---------- Blinds / Checkerboard wipe overlays (JS-generated tiles) ---------- */

.wipe-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  pointer-events: none;
}

.wipe-overlay.blinds {
  flex-direction: row;
}

.wipe-bar {
  flex: 1 1 0;
  background: #0b0e1c;
  transform: scaleY(1);
  transform-origin: top;
  border-right: 2px solid rgba(212, 175, 55, 0.4);
  transition: transform 0.5s ease;
}

.wipe-bar.wipe-hide {
  transform: scaleY(0);
}

.wipe-overlay.checkerboard {
  flex-wrap: wrap;
}

.wipe-tile {
  background: #0b0e1c;
  border: 1px solid rgba(212, 175, 55, 0.25);
  transform: scale(1);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.wipe-tile.wipe-hide {
  transform: scale(0);
  opacity: 0;
}

/* ---------- Tap zones for manual nav (invisible, phone story-style) ---------- */

.tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34%;
  z-index: 6;
}
.tap-zone.left { left: 0; }
.tap-zone.right { right: 0; }

/* ---------- Mute button: tiny, unobtrusive, always reachable on a phone ---------- */

.mute-btn {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 9;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(255, 224, 102, 0.6);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.mute-btn:active {
  transform: scale(0.92);
}

@media (max-width: 640px) {
  .clipart { font-size: 1.8rem; }
}

/* ---------- Puzzle gate: skladacka pred vstupem ---------- */

.puzzle-gate {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing: border-box;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 209, 102, 0.25), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255, 77, 109, 0.25), transparent 40%),
    linear-gradient(135deg, #0b0e1c 0%, #1b1035 50%, #0b0e1c 100%);
}

.puzzle-box {
  width: min(480px, 90vw);
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(212, 175, 55, 0.6);
  border-radius: 16px;
  padding: 28px 20px;
  box-sizing: border-box;
}

.puzzle-title {
  font-size: clamp(1.8rem, 8vw, 2.6rem);
}

.puzzle-hint {
  color: #ffe066;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
  margin: 10px 0 20px;
  font-size: clamp(0.95rem, 4vw, 1.1rem);
}

.puzzle-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.puzzle-word {
  font-weight: 900;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  color: #fff;
  text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 255, 255, 0.3);
}

.puzzle-op {
  font-weight: 900;
  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  color: #7cfc00;
  text-shadow: 0 0 8px #7cfc00;
}

.puzzle-input {
  width: 130px;
  max-width: 40vw;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  text-align: center;
  text-transform: uppercase;
  color: #1b1035;
  background: #ffe066;
  border: 3px solid #d4af37;
  border-radius: 8px;
  padding: 8px 6px;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.puzzle-input:focus {
  outline: 3px solid #7cfc00;
}

.puzzle-submit {
  font-size: 1rem;
  padding: 12px 22px;
}

.puzzle-error {
  margin-top: 16px;
  color: #ff6b6b;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}

@keyframes puzzle-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
}

.puzzle-box.puzzle-shake {
  animation: puzzle-shake 0.4s ease;
}