/* Sakaido Quiz - Stylesheet matching GIRLDLE & gender-id */
@import url('../fonts/fonts.css');

/* CSS Variables for Premium Light Theme - Identical to GIRLDLE & gender-id */
:root {
  --primary: #d946ef;
  /* Fuchsia */
  --secondary: #8b5cf6;
  /* Violet */
  --accent: #0284c7;
  /* Sky Blue */
  --background: #f8fafc;
  /* Slate 50 */
  --surface: #ffffff;
  --glass-border: #e2e8f0;
  /* Slate 200 */
  --text-main: #0f172a;
  /* Slate 900 */
  --text-dim: #64748b;
  /* Slate 500 */
  --success: #10b981;
  /* Emerald */
  --error: #ef4444;
  /* Red */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --card-radius: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--background);
}

html {
  background-color: var(--background);
  background-image: radial-gradient(at 0% 0%, rgba(217, 70, 239, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.05) 0px, transparent 50%);
  background-attachment: fixed;
}

/* Mobile-First Shell */
.app-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 28px;
}

/* Header & Status */
.app-topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 6px;
  margin-bottom: 8px;
}

body.grader-body .app-topbar {
  justify-content: space-between;
}

body.on-landing .app-topbar {
  display: none !important;
}

.brand-badge {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-main);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.reset-icon-btn {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.reset-icon-btn:hover {
  background: #fee2e2;
  color: var(--error);
  border-color: #fca5a5;
}

/* Screen Transitions */
.screen {
  display: none;
  flex-direction: column;
  flex: 1;
  width: 100%;
  animation: fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.screen.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Premium Card (Light) - Identical to gender-id */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 24px 20px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Headings */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-main);
}

/* Buttons - Identical to gender-id */
.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: white;
  border: none;
  padding: 16px 24px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(217, 70, 239, 0.28);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  user-select: none;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 70, 239, 0.38);
  filter: brightness(1.05);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ====================================================
   SCREEN 1: START SCREEN (Landing Screen)
   ==================================================== */
#screen-start {
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
  min-height: 80vh;
}

.start-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  text-align: center;
}

.start-title {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-main);
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.25;
}

#btn-start {
  max-width: 280px;
}

/* ====================================================
   SCREEN 2: WHEEL SCREEN
   ==================================================== */
#screen-wheel {
  align-items: center;
  gap: 16px;
}

.wheel-header {
  text-align: center;
}

.wheel-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
}

.wheel-progress-pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: #f1f5f9;
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  padding: 4px 14px;
  border-radius: 999px;
  margin-top: 6px;
}

.wheel-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wheel-canvas {
  width: 320px;
  height: 320px;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.08));
}

/* Pointer at Top */
.wheel-pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 26px solid #fbbf24;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
  z-index: 10;
  transition: transform 0.1s ease;
}

.wheel-pointer::after {
  content: '';
  position: absolute;
  top: -26px;
  left: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #f59e0b;
}

.wheel-pointer.tick {
  transform: translateX(-50%) scale(1.15) rotate(4deg);
}

/* Wheel Controls */
.wheel-controls {
  width: 100%;
  margin-top: 8px;
}

/* Topics Legend */
.topics-legend {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.topic-badge {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.topic-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.topic-badge.completed {
  opacity: 0.45;
  background: #f1f5f9;
  text-decoration: line-through;
  border-color: #e2e8f0;
  color: var(--text-dim);
}

.topic-badge.completed .topic-badge-dot {
  background-color: #94a3b8 !important;
}

.topic-badge-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ====================================================
   SCREEN 3: QUESTION SCREEN
   ==================================================== */
#screen-question {
  gap: 16px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topic-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #ffffff;
}

.q-order-badge {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
}

.question-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--secondary);
}

.question-prompt {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-main);
}

.ans-input-wrapper {
  margin-top: 8px;
}

.ans-input-field {
  width: 100%;
  padding: 16px;
  font-size: 1.05rem;
  font-family: var(--font-body);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: #f1f5f9;
  color: var(--text-main);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.ans-input-field:focus {
  border-color: var(--secondary);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

/* Choice options */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text-main);
}

.choice-option:hover {
  border-color: var(--secondary);
  background: #ffffff;
}

.choice-option.selected {
  background: rgba(139, 92, 246, 0.08);
  border-color: var(--secondary);
  color: var(--secondary);
  font-weight: 700;
}

/* Submit Safety / 0.5s lockout spinner */
.submit-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
}

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

/* ====================================================
   SCREEN 4: GRADING SHEET SCREEN
   ==================================================== */
#screen-grading {
  gap: 16px;
}

.grading-header {
  text-align: center;
}

.grading-header h2 {
  font-size: 1.6rem;
  color: var(--text-main);
  margin-bottom: 4px;
}

.grading-header p {
  color: var(--text-dim);
  font-size: 0.9rem;
}

.grading-topics-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 90px;
}

.grading-topic-group {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.04);
}

.grading-topic-title {
  padding: 12px 16px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grading-q-list {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grading-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.grading-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.grading-item-details {
  flex: 1;
}

.grading-q-prompt {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.grading-user-ans {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-main);
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--secondary);
}

/* Score Input box [ ] as in wireframe */
.grading-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.grading-score-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}

.score-select {
  width: 54px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  border: 2px solid var(--secondary);
  background: #ffffff;
  color: var(--secondary);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.score-select:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

.score-select:disabled {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

.locked-score-badge {
  width: 54px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdf4ff;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  border-radius: 10px;
  user-select: none;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Sticky Grading Bottom Action Bar */
.grading-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-border);
  padding: 12px 16px;
  z-index: 50;
  display: flex;
  justify-content: center;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.grading-footer-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.grading-total-tally {
  color: var(--text-main);
  font-family: var(--font-heading);
}

.grading-total-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.grading-total-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--secondary);
}

/* ====================================================
   SCREEN 5: FINAL SCORE SCREEN
   ==================================================== */
#screen-final {
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

.celebration-burst {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sunburst-rays {
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    rgba(217, 70, 239, 0.18) 0deg 20deg,
    transparent 20deg 40deg,
    rgba(139, 92, 246, 0.18) 40deg 60deg,
    transparent 60deg 80deg,
    rgba(56, 189, 248, 0.18) 80deg 100deg,
    transparent 100deg 120deg,
    rgba(217, 70, 239, 0.18) 120deg 140deg,
    transparent 140deg 160deg,
    rgba(139, 92, 246, 0.18) 160deg 180deg,
    transparent 180deg 200deg,
    rgba(56, 189, 248, 0.18) 200deg 220deg,
    transparent 220deg 240deg,
    rgba(217, 70, 239, 0.18) 240deg 260deg,
    transparent 260deg 280deg,
    rgba(139, 92, 246, 0.18) 280deg 300deg,
    transparent 300deg 320deg,
    rgba(56, 189, 248, 0.18) 320deg 340deg,
    transparent 340deg 360deg
  );
  border-radius: 50%;
  animation: rotateRays 20s linear infinite;
  mask-image: radial-gradient(circle, black 40%, transparent 70%);
}

@keyframes rotateRays {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.final-score-circle {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  background: var(--surface);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(217, 70, 239, 0.2);
  border: 4px solid #fdf4ff;
}

.final-score-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  font-weight: 700;
}

.final-score-val {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.final-score-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 600;
}

.birthday-banner {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pulseScale 2s ease-in-out infinite;
}

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

.credits-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 16px;
  color: var(--text-main);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.credits-title {
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.credits-body {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-main);
}

/* Confetti canvas */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
}