:root{
  --bg:#f0f4ff;--card:#fff;--text:#1f2937;--sub:#6b7280;
  --primary:#2563eb;--primary-h:#1d4ed8;--success:#059669;
  --danger:#dc2626;--border:#dbe3ee;--gold:#f59e0b;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  display:flex;align-items:flex-start;justify-content:center;padding:20px;
}
/* ── Layout ── */
.layout{width:100%;max-width:1000px;display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start;}
@media(max-width:740px){.layout{grid-template-columns:1fr;}}

/* ── Card ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.07);}

/* ── Header ── */
.header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.badge{font-size:13px;font-weight:700;color:var(--primary);background:#e8f0ff;
  padding:6px 12px;border-radius:999px;}
.prog{margin-left:auto;font-size:13px;color:var(--sub);font-weight:600;}

/* ── Sentence ── */
.sentence-box{background:#f8fafc;border:1px solid var(--border);border-radius:16px;
  padding:20px;margin-bottom:20px;}
.sent-label{font-size:12px;color:var(--sub);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:8px;}
.sentence{font-size:28px;font-weight:800;line-height:1.4;margin-bottom:8px;}
.meaning{font-size:15px;color:#374151;line-height:1.6;}

/* Light verb highlight */
.lv{color:var(--primary);background:#dbeafe;border-radius:4px;padding:0 3px;}

/* ── Attempts ── */
.attempts{display:flex;gap:6px;margin-bottom:8px;align-items:center;}
.attempts-label{font-size:13px;color:var(--sub);margin-right:4px;}
.encourage-msg{font-size:12px;color:var(--sub);margin-bottom:12px;text-align:center;opacity:.75;}
.dot{width:14px;height:14px;border-radius:50%;background:#e5e7eb;transition:background .3s;}
.dot.fail{background:var(--danger);}
.dot.ok{background:var(--success);}

/* ── Speak button ── */
.speak-btn{width:100%;border:0;border-radius:16px;padding:20px;font-size:22px;
  font-weight:800;color:#fff;background:var(--primary);cursor:pointer;
  transition:transform .12s,background .12s;display:flex;align-items:center;
  justify-content:center;gap:8px;}
.speak-btn:hover{background:var(--primary-h);}
.speak-btn:active{transform:scale(.98);}
.speak-btn:disabled{background:#94a3b8;cursor:not-allowed;}
.speak-btn.listening{background:#7c3aed;animation:pulse-btn 1.2s ease-in-out infinite;}
@keyframes pulse-btn{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.4);}
  50%{box-shadow:0 0 0 14px rgba(124,58,237,0);}}

/* ── Status / result ── */
.status{margin-top:12px;font-size:15px;font-weight:700;min-height:22px;}
.status.listening{color:#7c3aed;}
.status.success{color:var(--success);}
.status.error{color:var(--danger);}
.result-box{margin-top:14px;background:#f8fafc;border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;}
.result-label{font-size:12px;color:var(--sub);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:6px;}
.result-text{font-size:20px;min-height:28px;line-height:1.4;}

/* ── Next btn ── */
.tts-btn{width:100%;margin-top:10px;margin-bottom:24px;padding:14px;border:0;border-radius:14px;
  background:#f0fdf4;color:#065f46;font-size:16px;font-weight:700;cursor:pointer;
  border:1px solid #6ee7b7;transition:background .12s,opacity .12s;display:flex;
  align-items:center;justify-content:center;gap:6px;}
.tts-btn:hover{background:#dcfce7;}
.tts-btn:disabled{opacity:.5;cursor:not-allowed;}
.tts-btn.speaking{background:#dcfce7;border-color:#34d399;}

.next-btn{width:100%;margin-top:12px;padding:14px;border:0;border-radius:14px;
  background:#f59e0b;color:#fff;font-size:16px;font-weight:800;cursor:pointer;
  display:none;transition:background .12s;}
.next-btn:hover{background:#d97706;}
.next-btn.show{display:block;}

/* ── Score chip ── */
.score-chip{display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;
  border:1px solid #6ee7b7;border-radius:999px;padding:6px 14px;
  font-size:15px;font-weight:700;color:#065f46;margin-top:14px;}
.score-chip .score-num{font-size:22px;font-weight:900;}

/* ── Ranking panel ── */
.rank-panel{background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.07);position:sticky;top:20px;}
.rank-title{font-size:16px;font-weight:800;margin-bottom:4px;}
.rank-date{font-size:12px;color:var(--sub);margin-bottom:14px;}
.rank-list{list-style:none;}
.rank-item{display:flex;align-items:center;gap:8px;padding:8px 4px;
  border-bottom:1px solid var(--border);font-size:14px;position:relative;
  transition:background .3s;}
.rank-item:last-child{border-bottom:0;}
.rank-item.me{background:#eff6ff;border-radius:10px;}
.rank-num{width:22px;text-align:center;font-weight:800;font-size:13px;color:var(--sub);}
.rank-num.gold{color:#f59e0b;}
.rank-num.silver{color:#94a3b8;}
.rank-num.bronze{color:#b45309;}
.rank-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rank-score{font-weight:800;color:var(--primary);}
.rank-change{position:absolute;right:4px;top:4px;font-size:11px;font-weight:700;
  animation:fadeUp .8s ease forwards;}
.rank-change.up{color:#059669;}
.rank-change.down{color:#dc2626;}
@keyframes fadeUp{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-16px);}}
.rank-empty{color:var(--sub);font-size:13px;text-align:center;padding:16px 0;}
.rank-me-badge{font-size:10px;background:var(--primary);color:#fff;padding:1px 5px;
  border-radius:999px;vertical-align:middle;margin-left:4px;}

/* ── Top history panel ── */
.top-history{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.top-history-title{font-size:14px;font-weight:800;margin-bottom:10px;color:var(--text);}
.top-history-list{list-style:none;}
.top-history-item{display:flex;align-items:center;gap:8px;padding:6px 4px;
  border-bottom:1px solid var(--border);font-size:13px;}
.top-history-item:last-child{border-bottom:0;}
.top-history-date{width:54px;font-size:11px;color:var(--sub);font-weight:600;flex-shrink:0;}
.top-history-name{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-history-score{font-weight:800;color:var(--primary);font-size:12px;}

/* ── User info bar ── */
.user-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;
  background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:10px 14px;}
/* .user-avatar → avatar.css의 .avatar-display.avatar-sm 으로 대체됨 */
.user-name{font-weight:700;font-size:15px;cursor:pointer;border-bottom:1.5px dashed var(--primary);transition:color .15s;}
.user-name:hover{color:var(--primary);}
/* ── Rename modal ── */
#renameModal .modal h2{font-size:19px;margin-bottom:6px;}
#renameModal .modal p{margin-bottom:16px;}
.user-score{font-size:13px;color:var(--sub);}
.store-link-btn{
  margin-left:auto; text-decoration:none;
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff; font-size:12px; font-weight:800;
  padding:5px 12px; border-radius:999px;
  transition:opacity .15s; white-space:nowrap;
}
.store-link-btn:hover{opacity:.85;}
.weapon-link-btn{
  margin-left:auto; text-decoration:none;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff; font-size:12px; font-weight:800;
  padding:5px 12px; border-radius:999px;
  transition:opacity .15s; white-space:nowrap;
}
.weapon-link-btn:hover{opacity:.85;}
.weapon-link-btn + .store-link-btn{margin-left:0;}

/* ── Registration modal ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
  align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px);}
.modal{background:#fff;border-radius:24px;padding:32px;width:90%;max-width:420px;
  box-shadow:0 24px 60px rgba(0,0,0,.2);}
.modal h2{font-size:22px;margin-bottom:8px;}
.modal p{color:var(--sub);font-size:14px;margin-bottom:20px;line-height:1.6;}
.modal input{width:100%;border:1.5px solid var(--border);border-radius:12px;
  padding:12px 14px;font-size:16px;outline:none;transition:border .2s;}
.modal input:focus{border-color:var(--primary);}
.modal-btn{width:100%;margin-top:14px;padding:14px;border:0;border-radius:12px;
  background:var(--primary);color:#fff;font-size:17px;font-weight:800;cursor:pointer;
  transition:background .12s;}
.modal-btn:hover{background:var(--primary-h);}
.modal-warn{font-size:13px;color:var(--danger);margin-top:8px;display:none;}

/* ── Info modal (daily prize notice) ── */
.info-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;
  align-items:center;justify-content:center;z-index:600;backdrop-filter:blur(5px);}
.info-modal{background:#fff;border-radius:24px;padding:32px 28px;width:90%;max-width:420px;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.25);position:relative;overflow:hidden;}
.info-modal::before{content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,#eff6ff 0%,#fef9c3 100%);z-index:0;opacity:.5;}
.info-modal > *{position:relative;z-index:1;}
.info-icon{font-size:56px;display:block;margin-bottom:10px;}
.info-title{font-size:22px;font-weight:900;color:#1e3a8a;margin-bottom:6px;}
.info-subtitle{font-size:15px;font-weight:700;color:#d97706;margin-bottom:18px;}
.info-rules{background:#fff;border:1.5px solid #bfdbfe;border-radius:16px;
  padding:18px 16px;text-align:left;margin-bottom:20px;}
.info-rule{display:flex;gap:10px;align-items:flex-start;padding:8px 0;
  border-bottom:1px solid #eff6ff;font-size:14px;line-height:1.6;color:#1f2937;}
.info-rule:last-child{border-bottom:0;padding-bottom:0;}
.info-rule-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.info-rule b{color:#1d4ed8;}
.info-rule .warn{color:#dc2626;font-weight:700;}
.info-close-btn{width:100%;padding:14px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;
  font-size:17px;font-weight:800;cursor:pointer;transition:transform .12s,box-shadow .12s;
  box-shadow:0 6px 18px rgba(37,99,235,.4);margin-bottom:10px;}
.info-close-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,99,235,.5);}
.info-skip-btn{background:none;border:none;font-size:13px;color:#9ca3af;
  cursor:pointer;padding:6px 12px;transition:color .12s;}
.info-skip-btn:hover{color:#6b7280;}

/* ── No-speech warning ── */
.no-speech{background:#fef2f2;border:1.5px solid #fca5a5;border-radius:16px;
  padding:24px;text-align:center;}
.no-speech h2{color:var(--danger);font-size:18px;margin-bottom:8px;}
.no-speech p{color:#7f1d1d;font-size:14px;line-height:1.7;}

/* ── Success overlay ── */
.success-overlay{position:fixed;inset:0;pointer-events:none;z-index:200;
  display:flex;align-items:center;justify-content:center;}
.success-bang{font-size:72px;animation:bangPop .6s cubic-bezier(.17,.67,.38,1.4) forwards;
  filter:drop-shadow(0 0 20px gold);}
@keyframes bangPop{
  0%{opacity:0;transform:scale(.3) rotate(-20deg);}
  60%{opacity:1;transform:scale(1.2) rotate(5deg);}
  100%{opacity:0;transform:scale(1) rotate(0);}
}
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:199;overflow:hidden;}
.confetto{position:absolute;width:8px;height:8px;top:-10px;
  animation:confettiFall linear forwards;}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0);}
  100%{transform:translateY(110vh) rotate(720deg);}
}

/* ── Rank up toast ── */
.rank-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
  background:#1f2937;color:#fff;border-radius:999px;padding:12px 24px;
  font-size:15px;font-weight:700;z-index:300;white-space:nowrap;
  animation:toastIn .4s ease,toastOut .4s ease 2.6s forwards;pointer-events:none;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;}}

/* ── Permission help box ── */
.perm-help{margin-top:12px;background:#fffbeb;border:1.5px solid #fcd34d;
  border-radius:14px;padding:16px;display:none;}
.perm-help.show{display:block;}
.perm-help-title{font-size:14px;font-weight:800;color:#92400e;margin-bottom:10px;}
.perm-help ol{padding-left:18px;margin:0;}
.perm-help li{font-size:13px;color:#78350f;line-height:1.8;}
.perm-help .perm-os{font-size:12px;font-weight:700;color:#b45309;margin-top:10px;margin-bottom:4px;}
.perm-help a{color:var(--primary);text-decoration:underline;}

/* ── Quiz ── */
.quiz-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.quiz-badge{font-size:13px;font-weight:800;color:#7c3aed;background:#ede9fe;
  padding:6px 14px;border-radius:999px;letter-spacing:.03em;}
.quiz-sub{font-size:13px;color:var(--sub);}
.quiz-sentence-box{background:#f8fafc;border:1px solid var(--border);border-radius:16px;
  padding:20px;margin-bottom:16px;}
.quiz-sentence{font-size:26px;font-weight:800;line-height:1.5;margin-bottom:8px;}
.quiz-blank{display:inline-block;min-width:64px;border-bottom:3px solid #7c3aed;
  background:#ede9fe;border-radius:4px;padding:2px 10px;color:#7c3aed;
  font-style:italic;letter-spacing:.05em;}
.quiz-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.quiz-choice-btn{width:100%;padding:14px 18px;border:2px solid var(--border);border-radius:14px;
  background:#fff;font-size:19px;font-weight:700;cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s,transform .1s;}
.quiz-choice-btn:hover:not(:disabled){background:#f0f4ff;border-color:var(--primary);}
.quiz-choice-btn:active:not(:disabled){transform:scale(.98);}
.quiz-choice-btn.correct{background:#ecfdf5!important;border-color:#10b981!important;color:#065f46;}
.quiz-choice-btn.wrong{background:#fef2f2!important;border-color:#ef4444!important;color:#991b1b;}
.quiz-choice-btn:disabled{cursor:default;opacity:.85;}
.quiz-feedback{font-size:15px;font-weight:700;min-height:22px;text-align:center;padding:6px 0 10px;}
.quiz-feedback.correct{color:#059669;}
.quiz-feedback.wrong{color:#dc2626;}
.quiz-next-btn{width:100%;padding:14px;border:0;border-radius:14px;
  background:#7c3aed;color:#fff;font-size:16px;font-weight:800;cursor:pointer;
  transition:background .12s;}
.quiz-next-btn:hover{background:#6d28d9;}

/* ── Accessibility ── */
@media(max-width:480px){
  .sentence{font-size:22px;}
  .speak-btn{font-size:18px;padding:16px;}
}

/* ── Winner modal ── */
.winner-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;
  align-items:flex-start;justify-content:center;z-index:500;backdrop-filter:blur(6px);
  overflow-y:auto;padding:20px 0;}
.winner-modal{background:#fff;border-radius:28px;padding:36px 28px;width:90%;max-width:440px;
  text-align:center;box-shadow:0 32px 80px rgba(0,0,0,.35);position:relative;overflow:hidden;
  margin:auto;flex-shrink:0;}
.winner-modal::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#fef9c3 0%,#fef3c7 50%,#fff9c4 100%);z-index:0;opacity:.4;}
.winner-modal > *{position:relative;z-index:1;}
.winner-crown{font-size:72px;display:block;margin-bottom:8px;
  animation:crownBounce 1s ease-in-out infinite alternate;}
@keyframes crownBounce{from{transform:translateY(0) rotate(-5deg);}to{transform:translateY(-10px) rotate(5deg);}}
.winner-title{font-size:26px;font-weight:900;color:#92400e;margin-bottom:6px;}
.winner-prize{font-size:20px;font-weight:800;color:#d97706;margin-bottom:20px;}
.winner-desc{font-size:14px;color:#78350f;line-height:1.7;margin-bottom:24px;
  background:#fef3c7;border-radius:12px;padding:14px;}
.apply-field-label{font-size:12px;color:#78350f;margin-bottom:4px;font-weight:600;}
.apply-input{width:100%;font-size:14px;border:1.5px solid #fde68a;border-radius:10px;
  padding:9px 12px;background:#fff;color:#1f2937;box-sizing:border-box;outline:none;
  transition:border .15s;}
.apply-input:focus{border-color:#f59e0b;}
.winner-sms-btn{width:100%;padding:16px;border:0;border-radius:16px;
  background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;
  font-size:18px;font-weight:900;cursor:pointer;
  box-shadow:0 6px 20px rgba(245,158,11,.5);transition:transform .12s,box-shadow .12s;
  margin-bottom:12px;}
.winner-sms-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(245,158,11,.6);}
.winner-sms-btn:active{transform:scale(.97);}
.winner-close{background:none;border:1px solid #d1d5db;border-radius:12px;padding:10px 24px;
  font-size:14px;color:#6b7280;cursor:pointer;transition:background .12s;}
.winner-close:hover{background:#f3f4f6;}
.winner-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.sparkle{position:absolute;font-size:20px;animation:sparkleFly linear infinite;opacity:.7;}
@keyframes sparkleFly{
  0%{transform:translateY(100%) rotate(0deg);opacity:.8;}
  100%{transform:translateY(-120%) rotate(360deg);opacity:0;}
}