/**
 * Triptico Lesson Player Styles
 * Player-specific UI only. Slide styling comes from lesson-creator.css
 */

/* ========================================
   CSS Variables (Player-specific)
   ======================================== */

:root {
  --player-bg: #1a1a1a;
  --player-nav-bg: rgba(0, 0, 0, 0.5);
  --player-btn-bg: rgba(255, 255, 255, 0.1);
  --player-btn-hover: rgba(255, 255, 255, 0.2);
  --dark-colour: #3498db; /* For simpleButton background */
}

/* ========================================
   Base Reset & Layout
   ======================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--player-bg);
  color: white;
  overflow: hidden;
}

.lesson-builder-btn {
  color: var(--slide-text-colour);
  border-color: var(--slide-text-colour);
  font-family: inherit;
}

/* ========================================
   Loading State
   ======================================== */

/* Ensure hidden attribute works with fixed positioning */
[hidden] {
  display: none !important;
}

.player-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.loader-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.player-loading p {
  margin: 0;
  opacity: 0.7;
}

/* ========================================
   Error State
   ======================================== */

.player-error {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

.error-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #c0392b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
}

.player-error h2 {
  margin: 0;
  font-size: 1.5rem;
}

.player-error p {
  margin: 0;
  opacity: 0.7;
}

.back-link {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--player-btn-bg);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.back-link:hover {
  background: var(--player-btn-hover);
}

/* ========================================
   Player Container
   ======================================== */

.player-container {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ========================================
   Slide Display Area
   ======================================== */

.slide-display {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 0;
}

.slide-display .slide-preview {
  width: 100%;
  max-width: calc((100vh - 100px) * 16 / 9);
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  container-type: inline-size;
}

.slide-display .slide-wrapper {
  position: absolute;
  inset: 0;
}

/* ========================================
   Navigation Controls
   ======================================== */

.player-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  padding: 1.5vmin;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#prev-btn,
#next-btn {
  background-color: var(--slide-text-colour);
}

#prev-btn svg,
#next-btn svg {
  fill: var(--slide-bg-colour);
}

.slide-counter {
  font-size: 1.5vmin;
  text-align: center;
  width: fit-content;
  padding: 0 2vmin;
}

/* ========================================
   Fullscreen Button
   ======================================== */

.fullscreen-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: var(--player-nav-bg);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s;
}

.fullscreen-btn:hover {
  opacity: 1;
  background: var(--player-btn-hover);
}

:fullscreen .player-nav,
:fullscreen .fullscreen-btn {
  transition: opacity 0.3s;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
  .slide-display {
    padding: 0.5rem;
  }

  .nav-btn {
    width: 44px;
    height: 44px;
  }

  .fullscreen-btn {
    top: 0.5rem;
    right: 0.5rem;
  }
}

/* ========================================
   Player-specific Interactive Styles
   .player-mode on body overrides Builder styles
   Uses high specificity to beat .slide-preview rules
   ======================================== */

/* Hidden text - actually hidden until clicked */
.player-mode .slide-preview .hidden-text,
.player-mode .slide-preview .hidden-text:not(.revealed) {
  display: inline-block; /* Required for transform/animation to work */
  background: rgba(255, 255, 255, 0.2) !important;
  color: transparent !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
  border: 1px dashed var(--slide-text-colour);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1.5vmin 0.25vmin -0.75vmin;
}

.player-mode .slide-preview .hidden-text.revealed {
  background: transparent !important;
  color: inherit !important;
  border: none;
  box-shadow: none;
  border: 1px solid transparent;
}

/* Hidden images - dashed border with reveal button */
.player-mode .slide-preview .slide-image-container.image-hidden {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1vmin;
  border: 1px dashed var(--slide-text-colour);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1.5vmin 0.25vmin -0.75vmin;
  cursor: pointer;
  width: 75%;
  height: 75%;
  background-color: rgba(255, 255, 255, 0.1);
}

.player-mode .slide-preview .slide-image-container.image-hidden .slide-image {
  display: none;
}

.player-mode
  .slide-preview
  .slide-image-container.image-hidden
  .image-reveal-btn {
  pointer-events: none; /* Container handles click */
}

/* Revealed state */
.player-mode .slide-preview .slide-image-container.image-hidden.revealed {
  border: none;
  min-height: auto;
  cursor: default;
  box-shadow: none;
  background-color: transparent;
}

.player-mode
  .slide-preview
  .slide-image-container.image-hidden.revealed
  .slide-image {
  display: block;
}

.player-mode
  .slide-preview
  .slide-image-container.image-hidden.revealed
  .image-reveal-btn {
  display: none;
}

/* Checklist items - clickable with check mark */
.player-mode .slide-preview .checkListSlide_text p {
  cursor: pointer;
  transition: opacity 0.2s;
}

.player-mode .slide-preview .checkListSlide_text p.checked::before {
  background: currentColor;
  border-color: currentColor;
}

.player-mode .slide-preview .checkListSlide_text p.checked::after {
  content: '';
  position: absolute;
  left: 0.35em;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 0.4em;
  height: 0.7em;
  border: solid var(--slide-bg-colour, #3498db);
  border-width: 0 0.15em 0.15em 0;
}

.wobble-horizontal-bottom-fade-in {
  animation: wobble-horizontal-bottom-fade-in 0.8s linear both;
}
@keyframes wobble-horizontal-bottom-fade-in {
  0% {
    transform: translateX(0);
    transform-origin: 50% 50%;
    opacity: 0;
  }
  15% {
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3.6deg);
    opacity: 1;
  }
  60% {
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(-1.2deg);
  }
  100% {
    transform: translateX(0);
    transform-origin: 50% 50%;
    opacity: 1;
  }
}