/* ---------- Word Drill (v18) ---------- */
:root { --drill: #ff9f43; }

/* home: the Word Drill button under Word Roots */
.drill-btn { position: relative; text-align: left; padding: 9px 14px; border-radius: 16px; font-weight: 800; font-size: 16px;
  border: 1px solid rgba(255,159,67,.55); background: linear-gradient(90deg, rgba(58,32,8,.88), rgba(16,24,44,.85)); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.drill-btn:hover { box-shadow: 0 0 20px rgba(255,159,67,.45); }
.drill-btn em { margin-left: auto; font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 12px; background: var(--red); color: #fff; box-shadow: 0 0 10px rgba(255,93,115,.5); }
.drill-btn em.go { background: var(--drill); color: #2a1300; box-shadow: 0 0 12px rgba(255,159,67,.7); }
.drill-btn small { margin-left: auto; color: var(--muted); font-weight: 700; }
@media (max-height: 920px) { .drill-btn { padding: 6px 12px; font-size: 14px; } }

/* the Word Drill panel */
.dr-wrap { height: auto; min-height: 100%; }
.dr-card .rc-t { color: var(--drill); }
.dr-card .btn { white-space: normal; line-height: 1.25; }
.dr-l { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }
.dr-l input, .dr-l textarea { font: inherit; font-weight: 600; font-size: 16px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(0,0,0,.35); color: var(--text); user-select: text; -webkit-user-select: text; resize: vertical; }
.dr-l input:focus, .dr-l textarea:focus { outline: none; border-color: var(--drill); }
.dr-l textarea { min-height: 150px; line-height: 1.4; }
.dr-tog { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-right: 14px; }
.dr-tog input { width: 20px; height: 20px; accent-color: var(--drill); }
.dr-err { color: var(--red); font-weight: 800; min-height: 0; }
.dr-err:empty { display: none; }
.dr-b { display: flex; gap: 8px; flex-wrap: wrap; }
.dr-lists { min-width: 0; }
.dr-lists h3 { margin: 0 0 8px; font-family: var(--head); font-weight: 400; color: var(--drill); }
.dr-row { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px 14px; margin-bottom: 6px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel); transition: transform .1s, border-color .15s; }
.dr-row:hover { transform: translateX(3px); border-color: rgba(255,159,67,.6); }
.dr-row.run { border-color: var(--drill); box-shadow: 0 0 14px rgba(255,159,67,.3); }
.dr-ic { font-size: 22px; }
.dr-nm { display: flex; flex-direction: column; min-width: 0; }
.dr-nm b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-nm small, .dr-st small { color: var(--muted); font-weight: 600; }
.dr-st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.dr-st em, .rc-big.dr-v { font-style: normal; font-weight: 800; }
.dr-st em { font-size: 13px; padding: 3px 9px; border-radius: 10px; background: rgba(255,255,255,.08); }
.dr-st em.go { background: var(--drill); color: #2a1300; }
.dr-st em.ready, .dr-v.ready { color: var(--gold); }
.dr-st em.almost, .dr-v.almost { color: var(--cyan); }
.dr-st em.more, .dr-v.more { color: #ffb0bc; }
.dr-st em.new { color: var(--drill); }

/* a list's words, and how each one went */
.dr-words { display: flex; flex-direction: column; gap: 6px; }
.dr-w { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); }
.dr-w.miss { border-color: rgba(255,93,115,.5); }
.dr-w.clean .dr-ws { color: var(--green); }
.dr-w.miss .dr-ws { color: var(--red); }
.dr-wt b { font-size: 17px; }
.dr-wt small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.dr-wt .spk { font-size: 14px; padding: 0 4px; }
.dr-wd { color: var(--muted); font-weight: 600; line-height: 1.35; }
.dr-wd i { opacity: .7; }
.dr-ws { font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.dr-fix { margin-top: 4px; color: var(--gold); font-weight: 700; }
.dr-res { text-align: center; }
.dr-vi { font-size: 56px; line-height: 1; }

/* in the quiz: the progress bar in place of the pips (it keeps the pips' place and class) */
.quiz-pips.quiz-bar { display: block; }
.dr-bar { position: relative; height: 12px; border-radius: 6px; background: rgba(255,255,255,.12); margin: 6px 12px 0 0; }
.dr-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ffd166, var(--drill)); box-shadow: 0 0 8px rgba(255,159,67,.6); transition: width .4s; }
.dr-bar span { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 20px; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.dr-bar span.got { filter: none; opacity: 1; text-shadow: 0 0 12px var(--sc); }
.dr-count { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.dr-count b { color: var(--text); }
.dr-got { font-weight: 800; color: var(--drill); margin-top: 4px; }

@media (max-width: 900px) {
  .dr-wrap { grid-template-columns: 1fr; }
  .dr-w { grid-template-columns: 1fr; gap: 2px; }
}
/* phones: a button big enough to tap, like Word Roots */
@media (max-width: 600px), (max-height: 500px) {
  #home .drill-btn { flex-wrap: wrap; row-gap: 4px; min-height: 44px; padding: 8px 12px; font-size: 15px; white-space: normal; }
}
@media (max-height: 500px) and (orientation: landscape) { #home .drill-btn { padding: 8px 10px; } }