/* ============================================
   OFFSET WIZARD — CLEAN RESTYLE
   ============================================ */

#offset-wizard-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 5000 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

#offset-wizard-modal.hidden {
  display: none !important;
}

.offset-wizard-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 1.5vh, 2rem) clamp(8px, 3vw, 120px);
  background: var(--bg-color, #ffffff);
  color: var(--text-color, #111111);
  text-align: center;
  box-sizing: border-box;
  border-radius: 0;
  box-shadow: none;
  position: relative;
}

.wizard-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 28px 24px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 0;
  width: 100%;
  position: relative;
}

.wizard-dots {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  min-height: 20px;
  z-index: 10;
}

.wizard-dot-item {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfcfcf;
  transition: background 0.25s, transform 0.25s;
}

.wizard-dot-item.active {
  background: #fb6354;
  transform: scale(1.4);
}

/* Slides System */
.wizard-slides {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wizard-slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.wizard-slide.active {
  display: flex;
  animation: wizard-slide-in 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.wizard-slide.from-left.active {
  animation: wizard-slide-in-left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes wizard-slide-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes wizard-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wizard-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vh, 20px);
  width: 100%;
}

.wizard-main:not(.wizard-hidden) {
  animation: wizard-fade-in 0.4s ease forwards;
}

@keyframes wizard-fade-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.wizard-icon {
  width: clamp(90px, 24vw, 130px);
  height: auto;
  max-width: 70%;
  display: block;
  opacity: 0.9;
  animation: wizard-robot-bob 2.5s ease-in-out infinite;
  margin-bottom: 10px;
}

@keyframes wizard-robot-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(0deg); }
}

.wizard-title {
  font-size: clamp(1rem, 3vw, 1.45rem);
  letter-spacing: 0.22em;
  font-weight: 800;
  margin-bottom: 10px;
  color: #fb6354;
  text-transform: uppercase;
}

.wizard-desc,
#wizard-instructions {
  margin: 0;
  opacity: 0.85;
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  line-height: 1.6;
  max-width: min(62ch, 86vw);
  min-height: 3.2em;
}

.wizard-status {
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  font-weight: 700;
  min-height: 1.6em;
  margin-top: 15px;
  letter-spacing: 0.05em;
}

.wizard-tap-btn {
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  padding: 1.2rem 3.5rem;
  height: auto;
  min-width: min(480px, 88vw);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-radius: 16px;
  background: #fb6354;
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(251, 99, 84, 0.3);
  transition: transform 0.1s, background 0.2s;
}

.wizard-tap-btn:active {
  transform: scale(0.95);
  background: #e55a4c;
}

.wizard-tap-btn.is-hidden {
  display: none;
}

/* Match howtoplay.css navigation positioning */
.wizard-bottom {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 10% 16px;
  margin-top: 16px;
  box-sizing: border-box;
  z-index: 20;
}

.wizard-link-btn {
  background: none;
  border: none;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-color, #111);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s, color 0.2s;
}

.wizard-link-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Match guide-next-btn from howtoplay.css */
.wizard-right-btn-styled {
  font-size: clamp(0.88rem, 2.3vw, 1rem);
  padding: 0.68rem 1.9rem;
  height: auto;
  letter-spacing: 0.12em;
  min-width: 105px;
}

.wizard-hidden {
  display: none !important;
}

.wizard-finish {
  position: absolute;
  inset: 0;
  background: var(--bg-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.wizard-finish-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  padding: 2.5rem;
}

.wizard-check {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid #fb6354;
  color: #fb6354;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  animation: wizard-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes wizard-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.wizard-finish-title {
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.wizard-finish-text {
  margin: 0;
  opacity: 0.85;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  max-width: min(56ch, 82vw);
  line-height: 1.6;
}

/* Dark Mode Overrides */
body.dark-mode #offset-wizard-modal,
[data-theme="dark"] #offset-wizard-modal {
  background: var(--bg-color, #1a1a1a) !important;
  color: var(--text-color, #ffffff);
}

body.dark-mode .offset-wizard-content,
body.dark-mode .wizard-finish,
[data-theme="dark"] .offset-wizard-content,
[data-theme="dark"] .wizard-finish {
  background: var(--bg-color, #1a1a1a) !important;
  color: var(--text-color, #ffffff);
}

[data-theme="dark"] .wizard-link-btn {
  color: var(--text-color, #f3f3f3);
}

[data-theme="dark"] .wizard-link-btn.secondary {
  color: #ffffff;
  background: #fb6354;
}

[data-theme="dark"] .wizard-dot-item {
  background: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .wizard-link-btn:not(.secondary) {
  color: rgba(255, 255, 255, 0.6);
}