:root {
  --bg1: #0b1021;
  --bg2: #131b34;
  --card:  #ffffff;
  --text:  #1c2333;
  --muted: #667085;
  --border: #e2e6f0;
  --primary:       #2f6fed;
  --primary-dark:  #1f52c4;
  --correct:   #1f9d55;
  --incorrect: #e2483d;
  --timeout:   #9e6a0f;
  --warn:   #f59e0b;
  --urgent: #ef4444;
  --r: 16px;
  --shadow: 0 20px 50px rgba(6,10,25,.4);
}

*{ box-sizing:border-box; }

body{
  margin:0; min-height:100vh;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(circle at top left,var(--bg2),var(--bg1) 70%);
  color:var(--text);
  display:flex; flex-direction:column; align-items:center;
  padding:24px 14px 10px;
}

.app{ width:100%; max-width:640px; display:flex; flex-direction:column; align-items:center; flex:1; }

.screen{ display:none; width:100%; }
.screen.active{ display:block; }

.card{
  background:var(--card); border-radius:var(--r);
  box-shadow:var(--shadow); padding:28px 24px; width:100%;
}

/* ─── Intro ─── */
.intro{ text-align:center; }
.logo{ font-size:3rem; margin-bottom:6px; }
.intro h1{ margin:0 0 8px; font-size:1.9rem; }
.subtitle{ color:var(--text); font-size:1.05rem; margin:0 0 4px; }
.hint{ color:var(--muted); font-size:.88rem; margin:0 0 22px; }

.btn{
  border:none; border-radius:999px; padding:13px 26px;
  font-size:.97rem; font-weight:600; cursor:pointer;
  transition:transform .12s,box-shadow .12s,background .12s,opacity .15s;
}
.btn-primary{
  background:var(--primary); color:#fff;
  box-shadow:0 8px 18px rgba(47,111,237,.35);
}
.btn-primary:hover{ background:var(--primary-dark); transform:translateY(-1px); }
.hidden{ display:none !important; }

/* ─── Difficulty ─── */
.difficulty-card{ text-align:center; }
.difficulty-card h2{ margin:0 0 4px; }
.difficulty-card .hint{ margin-bottom:20px; }

.diff-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.diff-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 12px; border-radius:12px;
  border:2px solid var(--border); background:#f7f8fb;
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s,box-shadow .15s;
}
.diff-btn:hover{
  border-color:var(--primary); background:#eef4ff;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(47,111,237,.18);
}
.diff-btn.selected{ border-color:var(--primary); background:#eef4ff; }
.diff-icon{ font-size:1.8rem; }
.diff-name{ font-weight:700; font-size:.98rem; }
.diff-desc{ font-size:.78rem; color:var(--muted); text-align:center; line-height:1.3; }

/* ─── Quiz header ─── */
.quiz-header{
  display:flex; align-items:center; gap:10px;
  font-size:.85rem; color:var(--muted); margin-bottom:12px;
}
#progress-label,#score-label{ flex-shrink:0; font-weight:700; }
.progress-bar{
  flex:1; height:6px; background:#e7eaf1; border-radius:999px; overflow:hidden;
}
.progress-fill{
  height:100%; width:10%; background:var(--primary);
  border-radius:999px; transition:width .3s ease;
}

/* ─── Image + timer ─── */
.image-wrap{
  position:relative; width:100%; aspect-ratio:1/1;
  border-radius:12px; overflow:hidden;
  background:#0e1830; margin-bottom:16px;
}
.image-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .25s;
}
.image-loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#cdd6f4; font-size:.9rem; background:#0e1830;
}
.image-loading.hidden{ display:none; }

/* Timer circle in corner */
.timer-overlay{
  position:absolute; top:10px; right:10px;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
}
#timer-ring{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg);  /* start at top */
}
.ring-bg{
  fill:none;
  stroke:rgba(255,255,255,.2);
  stroke-width:5;
}
.ring-fill{
  fill:none;
  stroke:#22c55e;          /* green default */
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:175.93;  /* 2π*28 */
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1s linear, stroke .5s;
}
.ring-fill.warn   { stroke:var(--warn); }
.ring-fill.urgent { stroke:var(--urgent); }

#timer-text{
  position:relative; z-index:1;
  font-size:.9rem; font-weight:700; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
#timer-text.warn   { color:var(--warn); }
#timer-text.urgent { color:var(--urgent); }

/* ─── Options ─── */
.options{ display:grid; grid-template-columns:1fr; gap:9px; }
@media(min-width:460px){ .options{ grid-template-columns:1fr 1fr; } }

.option-btn{
  text-align:left; padding:13px 15px;
  border-radius:10px; border:2px solid var(--border);
  background:#f7f8fb; color:var(--text);
  font-size:.95rem; cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s;
}
.option-btn:hover:not(:disabled){
  border-color:var(--primary); transform:translateY(-1px);
}
.option-btn:disabled{ cursor:default; }
.option-btn.correct{
  background:rgba(31,157,85,.12); border-color:var(--correct); font-weight:600;
}
.option-btn.incorrect{
  background:rgba(226,72,61,.12); border-color:var(--incorrect);
}

/* ─── Feedback ─── */
.feedback-row{
  margin-top:14px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.feedback-text{ margin:0; font-weight:600; min-height:1.3em; font-size:.95rem; }
.feedback-text.correct  { color:var(--correct); }
.feedback-text.incorrect{ color:var(--incorrect); }
.feedback-text.timeout  { color:var(--timeout); }

/* ─── Results ─── */
.results{ text-align:center; }
.results h2{ margin:0 0 4px; font-size:1.4rem; }
.score-big{ font-size:3.2rem; font-weight:800; margin:4px 0 4px; color:var(--primary); }
.score-denom{ font-size:1.8rem; font-weight:600; color:var(--muted); }

.diff-badge{
  display:inline-block; margin:0 0 6px;
  font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:#eef4ff; color:var(--primary); padding:3px 12px; border-radius:999px;
}
.results-message{ color:var(--muted); margin:0 0 16px; font-size:1rem; }

/* Share box */
.share-box{
  background:#f7f8fb; border-radius:12px; padding:16px 16px 12px;
  margin-bottom:18px;
}
.emoji-grid{
  font-size:1.8rem; letter-spacing:2px; margin-bottom:12px;
  word-break:break-all;
}
.share-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.btn-x{
  background:#000; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.btn-x:hover{ background:#333; transform:translateY(-1px); }

.btn-copy{
  background:#f0f2f5; color:var(--text); border:1.5px solid var(--border);
}
.btn-copy:hover{ background:var(--border); }

.btn-native{
  background:var(--primary); color:#fff;
  box-shadow:0 4px 12px rgba(47,111,237,.3);
}

.copy-confirm{
  margin:8px 0 0; font-size:.83rem; color:var(--correct); font-weight:600;
}

/* Review list */
.review-list{
  text-align:left; display:flex; flex-direction:column; gap:7px;
  margin-bottom:18px; max-height:300px; overflow-y:auto; padding-right:2px;
}
.review-item{
  display:flex; align-items:baseline; gap:8px;
  padding:9px 12px; border-radius:8px; background:#f7f8fb; font-size:.9rem;
}
.review-item.correct  { border-left:4px solid var(--correct); }
.review-item.incorrect{ border-left:4px solid var(--incorrect); }
.review-item.timeout  { border-left:4px solid var(--timeout); }
.review-mark{ font-weight:700; flex-shrink:0; }
.review-item.correct   .review-mark{ color:var(--correct); }
.review-item.incorrect .review-mark{ color:var(--incorrect); }
.review-item.timeout   .review-mark{ color:var(--timeout); }
.review-answer{ color:var(--muted); }

.credit{ color:#7c88ab; font-size:.73rem; text-align:center; padding:12px 8px 4px; }

/* ─── Challenge banner (viral loop teaser) ─── */
.challenge-banner{
  background:#eef4ff; border:1.5px solid #cfe0ff; color:var(--primary-dark);
  border-radius:10px; padding:12px 16px; font-size:.92rem; font-weight:600;
  margin-bottom:18px;
}

/* ─── Share buttons ─── */
.share-label{
  font-size:.82rem; color:var(--muted); font-weight:600;
  margin:0 0 8px; text-align:left;
}
.share-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:8px; }
.share-btns-secondary{ margin-top:2px; }

.btn-social{ color:#fff; padding:10px 18px; font-size:.9rem; }
.btn-x       { background:#000; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.btn-x:hover { background:#333; transform:translateY(-1px); }
.btn-fb      { background:#1877f2; box-shadow:0 4px 12px rgba(24,119,242,.35); }
.btn-fb:hover{ background:#145dc4; transform:translateY(-1px); }
.btn-wa      { background:#25d366; box-shadow:0 4px 12px rgba(37,211,102,.35); }
.btn-wa:hover{ background:#1ca750; transform:translateY(-1px); }
.btn-threads      { background:#000; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.btn-threads:hover{ background:#333; transform:translateY(-1px); }

.btn-copy{
  background:#f0f2f5; color:var(--text); border:1.5px solid var(--border);
  padding:10px 16px; font-size:.87rem;
}
.btn-copy:hover{ background:var(--border); }

.btn-native{
  background:var(--primary); color:#fff; padding:10px 18px; font-size:.9rem;
  box-shadow:0 4px 12px rgba(47,111,237,.3);
}

#share-canvas{ position:absolute; left:-9999px; top:-9999px; }