/* ============================================================
   Friendship Quiz - Fixed & Merged Dark Theme CSS
   Page bg: #1E1E1E | Container bg: #202026 | Text: white
   Max width (desktop): 728px
   Preserves original selectors; adds quiz-area fixes (title hide,
   full-width options, image+text grid).
   ============================================================ */

/* Variables (kept simple) */
:root{
  --page-bg: #1E1E1E;
  --card-bg: #202026;
  --card-bg-2: #2a2a2a;
  --muted: #9b9b9b;
  --text: #ffffff;
  --accent: #ff4757;      /* primary action */
  --accent-2: #0073aa;    /* secondary accent */
  --success: #28a745;
  --danger: #dc3545;
  --border: #323235;
}

/* ============================================================
   Base / Page
   ============================================================ */
html,body { height:100%; }
body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.5;
}

/* Page wrapper & content width */
.quiz-page-wrapper {
  width: 100%;
  padding: 3px;
  box-sizing: border-box;
}

.quiz-page-content {
  max-width: 728px;
  margin: 20px auto;
  box-sizing: border-box;
}

/* Generic quiz containers (card style) */
.quiz-container,
.quiz-hero,
.quiz-body,
.quiz-body-content,
.quiz-scoreboard,
.quiz-result,
.quiz-share {
  background: var(--card-bg);
  padding: 20px;
  color: var(--text);
  box-sizing: border-box;
  border-radius: 30px;
}

/* Global container */
.quiz-container {
  width: 100%;
  max-width: 728px;
  margin: 20px auto;
  padding: 20px;
  background: #202026;
  color: #fff;
  border-radius: 12px;
  box-sizing: border-box;
}

/* Add a light drop shadow to hero to help separation */
.quiz-hero {
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  margin: 20px auto;
}

*margin: 20px auto;*

/* Add spacing between stacked containers */
.quiz-hero + .quiz-body,
.quiz-hero + .quiz-body-content,
.quiz-hero + .quiz-scoreboard {
  margin-top: 18px;
}

.m60{
margin: 60px;    
}

/* Hide inner quiz title (we keep only page title) */
.quiz-container .quiz-title {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ============================================================
   Typography / Titles / small text
   ============================================================ */
.quiz-title,
.quiz-hero h1,
.quiz-result h2,
.quiz-scoreboard h3 {
  color: var(--text);
  margin: 0 0 10px 0;
  line-height: 1.2;
  font-weight: 600;
}

.quiz-hero h1 { font-size: 2.4rem; font-weight: 600; text-align: center;}
.quiz-title { font-size: 2.4rem; text-align:center; }

.quiz-excerpt {
  color: #cfcfcf;
  margin-bottom: 14px;
  font-size: 0.98rem;
  text-align: center;
}

.quiz-ten {
  color: #cfcfcf;
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 0.98rem;
  text-align: center;
}


.creator-note {
  color: #ddd;
  margin: 10px 0;
  text-align: center;
}

/* ============================================================
   Forms (start form / name input / general inputs)
   ============================================================ */
.quiz-hero form,
.start-quiz form,
#friend-name-step,
.quiz-body form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /*margin-top: 25px;*/
}

/* Inputs */
.quiz-hero input[type="text"],
.start-quiz input[type="text"],
#friend-name-step input[type="text"],
.quiz-body input[type="text"],
.share-box input {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: #171718;
  color: var(--text);
  font-size: 1rem;
  box-sizing: border-box;
}

.quiz-hero input[type="text"]:focus {
  color: #fff;
  background-color:#202026;
  border: 1px solid #a19fb1;
}

/* Placeholder color */
.quiz-hero input::placeholder,
.start-quiz input::placeholder {
  color: #8f8f8f;
}

/* Buttons - unified */
button,
.refresh-btn,
.back-btn,
.delete-quiz-btn,
.quiz-skip,
.quiz-next,
.quiz-submit,
/*#start-quiz-btn,*/
.share-box button,
#modal-close-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  transition: background .18s ease, transform .08s ease;
  text-decoration: none;
}

/* special variants */
.delete-quiz-btn { background: var(--danger); }
.quiz-next   { background: #0073aa; }
.quiz-submit { background: var(--success); }
.quiz-skip   { background: #6a5acd; }

button.quiz-skip:Hover{
    background: #6a5acd;
}

/* Hover states */
button:hover,
.refresh-btn:hover,
.back-btn:hover,
.delete-quiz-btn:hover { filter: brightness(.94); }

/* Small button adjustments */
.scoreboard-actions .refresh-btn,
.scoreboard-actions .back-btn,
.scoreboard-actions .delete-quiz-btn {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .95rem;
}

button.startbtn{
  background-image: linear-gradient(to right top, #673de6, #8462eb, #a98dff);
  color: #ffffff !important;
  border: 0px !important;
  border-radius: 100px;
  width: 60%;
  font-weight: 600;
}

/* ============================================================
   Progress Bar
   ============================================================ */
.quiz-progress {
  width: 100%;
  background: #2f2f33;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  height: 20px;
  box-sizing: border-box;
  margin-top: 0;   /* no gap above */
}
.quiz-progress-fill {
  background: #6a5acd;
  height: 100%;
  width: 0%;
  transition: width .4s ease;
}
.quiz-progress-text {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  color: #fff;
  font-weight:700;
  font-size: .88rem;
  pointer-events: none;
}

/* ============================================================
   Questions / Options (both column and grid variants)
   ============================================================ */

.quiz-question {
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
}

#quiz-questions {
   width: 100%; 
}


/* Question Text */
.quiz-question h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 20px 0;
  text-align: left;
  color: #fff;
}

/* Default: no images → flex */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 15px 0;
  box-sizing: border-box;
}

/* If any option has an image → switch to grid */
.quiz-options:has(.quiz-option img) {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 per row */
  gap: 12px;
}


/* When option has image, align nicely */
.quiz-option:has(img) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}


/* Option base styling */
.quiz-option,
.quiz-options-grid .quiz-option,
.option-box {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s;
  color: var(--text);
  box-sizing: border-box;
  width: 100%;
}


/* Hide native radio input (keeps accessible to JS) */
.quiz-option input[type="radio"], .quiz-option input {
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}


/* Hover / selected states */
.quiz-option:hover,
.quiz-options-grid .quiz-option:hover {
  border-color: var(--accent);
  background: rgba(71,111,255,0.12);
}
.quiz-option.selected {
  border-color: var(--accent);
  background: rgba(71,111,255,0.15);
  transform: translateY(-1px);
}

/* Correct / wrong states - subtle colored backgrounds */
.quiz-option.correct,
.quiz-options-grid .quiz-option.correct,
.option-box.correct,
.answer-card.correct {
  background: rgba(40,167,69,0.07);
  border-color: rgba(40,167,69,0.35);
}
.quiz-option.wrong,
.quiz-options-grid .quiz-option.wrong,
.option-box.wrong,
.answer-card.wrong {
  background: rgba(220,53,69,0.06);
  border-color: rgba(220,53,69,0.35);
}

/* Friend highlight styles (when showing friend answers) */
.option-bubble.friend,
.option-box.friend,
.quiz-option.friend {
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  font-weight:700;
}

/* small text inside option */
.quiz-option .opt-text,
.quiz-options-grid .opt-text {
  flex:1;
  color: var(--text);
  font-size: 0.98rem;
}

/* ============================================================
   Answer Cards (modal & static)
   ============================================================ */
.answer-card {
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  box-sizing:border-box;
}
.answer-card .question {
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.answer-card .options-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* bubble option variants for modal */
.option-bubble {
  padding:8px;
  background: rgba(255,255,255,0.02);
  border-radius:8px;
  border:1px solid var(--border);
  min-width: 45%;
  box-sizing:border-box;
}
.option-bubble.correct-opt { background: rgba(40,167,69,0.07); border-color: rgba(40,167,69,0.35); }
.option-bubble.wrong-opt   { background: rgba(220,53,69,0.06); border-color: rgba(220,53,69,0.35); }

/* ============================================================
   Scoreboard (dark variant)
   ============================================================ */
.quiz-scoreboard {
  padding: 16px;
}
.scoreboard-table {
  width:100%;
  border-collapse: collapse;
  margin-top:10px;
}
.scoreboard-table th,
.scoreboard-table td {
  padding: 10px;
  border: 1px solid var(--border);
  text-align:center;
  color: var(--text);
}
.scoreboard-table th {
  background: var(--card-bg-2);
  font-weight:700;
  font-size: .95rem;
}

/* striped rows */
.scoreboard-table tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* highlight current friend row (keeps existing inline highlight) */
.quiz-scoreboard tr[style*="background:#e0ffe0"],
.quiz-scoreboard tr.highlight {
  background: rgba(40,167,69,0.08) !important;
}

/* rank badges - use class in PHP for reliable styling */
.badge { font-size:1.1rem; font-weight:800; display:inline-block; padding:2px 6px; border-radius:6px; }
.badge.gold   { color: #d4af37; background: rgba(212,175,55,0.06); }
.badge.silver { color: #c0c0c0; background: rgba(192,192,192,0.04); }
.badge.bronze { color: #cd7f32; background: rgba(205,127,50,0.04); }

/* scoreboard action buttons container */
.scoreboard-actions { display:flex; justify-content:space-between; gap:8px; margin: 19px 0; align-items:center; }

/* ============================================================
   Share / Copy / small UI pieces
   ============================================================ */
h1.linkhead {
    font-size: 2.2rem;
    font-weight: 600;
}   
   
.share-box {
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
}
.share-box input { flex:1; background:#171718; border:1px solid var(--border); color:var(--text); padding:10px; border-radius:8px; }
.share-box button { background:var(--accent-2); }

/* ============================================================
   Modal (friend answers popup) - dark
   ============================================================ */
#answerModal {
  display:none;
  position: fixed;
  z-index: 9999;
  inset:0;
  background: rgba(0,0,0,0.75);
  overflow-y:auto;
  padding: 28px 12px;
  box-sizing:border-box;
}
#answerModal .modal-content {
  max-width: 820px;
  margin: 30px auto;
  background: var(--card-bg);
  color: var(--text);
  padding: 18px;
  border-radius: 10px;
  position:relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
#answerModal .modal-close { position:absolute; right:14px; top:10px; font-size:22px; cursor:pointer; color:var(--text); }
#modal-close-btn { margin-top:12px; background:var(--accent-2); }

/* Answer card inside modal - keep dark variants */
#answerModal .answer-card { background: rgba(255,255,255,0.02); border:1px solid var(--border); }

/* ============================================================
   Submitting loader & small helpers
   ============================================================ */
.quiz-loading {
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  z-index:99999;
  color:var(--text);
}
.quiz-loading::before {
  content: "";
  width: 44px; height:44px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.08);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { from{transform:rotate(0)}to{transform:rotate(360deg)} }

/* ============================================================
   Misc / small components preserved from original
   ============================================================ */
.option-box { /* small alternative option box style */
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color:var(--text);
}
.option-box.highlight { border-color: var(--accent-2); background: rgba(122,0,255,0.04); }

.quiz-skip, .quiz-next, .quiz-submit {
  min-width: 110px;
  text-align:center;
  margin-top: 20px;
}

/* Buttons used on share/scoreboard (keep prominence) */
.refresh-btn { background:#3b88c3; }
.back-btn { background:#202026; color:#fff; text-decoration:none; }

/* ============================================================
   Result / share / small page-specific layouts
   ============================================================ */
.quiz-result {
  text-align:center;
  border:1px solid rgba(255,255,255,0.02);
}
.quiz-share {
  text-align:center;
  padding:18px;
}

/* ============================================================
   Accessible: hide native radio but leave label clickable
   ============================================================ */
.quiz-option input[type="radio"] {
  position:absolute;
  left:-9999px;
}

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-width: 768px) {
  .quiz-page-content { margin:7px; padding:0; }
  .quiz-container, .quiz-hero, .quiz-body, .quiz-scoreboard, .quiz-result { padding: 10px; margin: 12px 0; border-radius:30px; }
  .quiz-hero h1 { font-size: 2rem; font-weight: 600; text-align: center;}
  /*.quiz-options-grid { grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); }*/
  .quiz-hero input[type="text"], .start-quiz input[type="text"] { max-width: 100%; }
  .quiz-hero button, button, .quiz-submit { width: 100%; }
}

/* ============================================================
   Legacy light-themed fallbacks (scoped) - keep if any page forces them
   These apply only if an element uses .light-theme wrapper (so we don't globally break)
   ============================================================ */
.light-theme .quiz-container,
.light-theme .quiz-hero,
.light-theme .quiz-body,
.light-theme .quiz-scoreboard {
  background: #fff;
  color: #111;
  border-radius: 10px;
}
.light-theme .quiz-option { background:#fff; color:#111; border-color:#ddd; }

/* Ensure ALL quiz sections are centered & fixed width */
.quiz-container,
.quiz-hero,
.quiz-body,
.quiz-body-content,
.quiz-scoreboard,
.quiz-result,
.quiz-share,
.start-quiz {
  width: 100%;
  max-width: 728px;
  /*margin: 20px auto;*/
  box-sizing: border-box;
}
.start-quiz {
  text-align: center;
  margin: 20px auto;
}


.quiz-body-content{
      margin: 20px auto;
}

/* ============================================================
   Final small overrides to guarantee full-width option cards and image-grid
   (appended to be non-destructive)
   ============================================================ */
.quiz-option { width:100% !important; box-sizing:border-box !important; }
.quiz-question h3 { text-align:left !important; font-size:1.3rem !important; margin:18px 0 !important; }




/* ===== Share Buttons Styling ===== */
.share-box {
  display: flex;
  gap: 8px;
  margin: 15px 0;
}

.share-box input {
  flex: 1;
  padding: 10px;
  border-radius: 25px;
  border: none;
  background: #fff;
  color: #333;
  font-size: 0.95rem;
}

.share-box button {
  padding: 10px 16px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  background: #673de6;
  color: #fff;
  transition: background 0.2s ease;
}
.share-box button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.share-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 4 buttons per row on large screens */
  gap: 10px;
  margin: 20px 0;
}

.share-buttons a {
  text-align: center;
  padding: 12px;
  border-radius: 25px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.share-buttons a:hover {
  opacity: 0.85;
}

@media (max-width: 600px) {
  .share-buttons {
    grid-template-columns: repeat(2, 1fr); /* 2 buttons per row on small screens */
  }
}


/* Social specific colors */
.share-buttons .whatsapp { background: #25d366; }
.share-buttons .facebook { background: #1877f2; }
.share-buttons .twitter { background: #000; }
.share-buttons .telegram { background: #0088cc; }
.share-buttons .instagram { background: #e733af; }
.share-buttons .reddit { background: #ff4500; }

/* Scoreboard Button */
.scoreboard-link {
  text-align: center;
  margin-top: 15px;
}

.scoreboard-link .scoreboard-btn {
  display: inline-block;
  padding: 12px 20px;
  background: #ff9800;
  color: #fff;
  font-weight: 600;
  border-radius: 25px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.scoreboard-link .scoreboard-btn:hover {
  opacity: 0.85;
}

/* ===== Share Box (Copy Link) ===== */
.share-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 25px 0;
  flex-wrap: wrap;
}

.share-box input {
  flex: 1;
  padding: 12px 15px;
  border-radius: 25px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
}

.share-box input:focus {
  border-color: #673de6;
  box-shadow: 0 0 4px rgba(103, 61, 230, 0.5);
}

.share-box button {
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  background: linear-gradient(135deg, #673de6, #9b59ff);
  color: #fff;
  white-space: nowrap;
  transition: 0.2s ease;
}

.share-box button:hover {
  opacity: 0.9;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 600px) {
  .share-box {
    flex-direction: column;
    align-items: stretch;
  }

  .share-box input {
    width: 100%;
    font-size: 1rem;
  }

  .share-box button {
    width: 100%;
    text-align: center;
  }

  .share-buttons a {
    flex: 1 1 100%; /* one per row on mobile */
  }
}

input#quizLink {
    background-color: #161619;
    border-radius: 12px;
    color: white;
}

/* End of file */


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.refreshing-icon {
  display: inline-block;
  margin-right: 5px;
  animation: spin 1s linear infinite;
}


/* Modal base */
.modal {
  display: none;              /* hidden by default */
  position: fixed;
  z-index: 9999;
  inset: 0;                   /* shorthand for top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

/* Modal content */
.modal-content {
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.modal-content h2 {
  margin-top: 0;
  font-size: 20px;
  color: #d9534f;
}

.modal-content p {
  font-size: 14px;
  color: #444;
  margin: 15px 0;
}

/* Close button (X) */
.close {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: #888;
}

.close:hover { color: #000; }

/* Actions */
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.btn-danger {
  background: #d9534f;
  color: #fff;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-danger:hover {
  background: #c9302c;
}

.btn-secondary {
  background: #eee;
  color: #333;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #ddd;
}


/* Quiz result score */

.quiz-result {
  text-align: center;
  font-family: Arial, sans-serif;
  color: #fff;
  background: #1e1e1e;
  padding: 30px;
  border-radius: 12px;
  display: inline-block;
}

.gauge {
  position: relative;
  width: 220px;
  height: 120px;
  margin: 0 auto;
}

.gauge-arc {
  width: 100%;
  height: 100%;
}

.gauge-fill {
  transition: stroke-dasharray 1.2s ease-out;
}

.gauge-fill.glow {
  filter: drop-shadow(0px 0px 8px #ffd700) 
          drop-shadow(0px 0px 15px #ffcc33);
}

.gauge-center {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.score {
  font-size: 27px;
  font-weight: bold;
}

.label {
  font-size: 16px;
  margin-top: 5px;
}