.verb-banner { display: flex; align-items: center; gap: 28px; margin-top: 30px; padding: 28px 32px; border: 1px solid #cfb777; border-radius: 4px 36px 4px 4px; background: radial-gradient(ellipse at 0 0, #f8dea2, transparent 70%), #f3ecd9; }
.verb-banner-art { display: flex; align-items: center; flex: 0 0 auto; }
.verb-banner-art span { display: grid; width: 56px; height: 70px; place-items: center; color: var(--cream); background: var(--forest); border-radius: 4px; box-shadow: 3px 4px 0 #cebc97; font-size: 2rem; transform: rotate(-8deg); }
.verb-banner-art span:last-child { color: var(--forest); background: var(--cream); transform: rotate(8deg); }
.verb-banner-art i { z-index: 1; margin: 0 -3px; color: #94412e; font-size: 1.6rem; font-style: normal; }
.verb-banner-copy { flex: 1; }
.verb-banner-copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.verb-banner-copy > p:not(.eyebrow) { max-width: 520px; margin: 12px 0; font-size: .85rem; line-height: 1.65; }
.verb-banner-copy .eyebrow { color: #934029; font-size: .64rem; }
.verb-banner-progress { color: #53644b; font-size: .73rem; line-height: 1.6; }
.verb-banner-actions { display: grid; gap: 12px; flex-shrink: 0; }
.verb-banner-actions button { min-height: 44px; }
.verb-dialog { width: min(880px, calc(100% - 28px)); max-height: calc(100dvh - 28px); padding: 0; overflow: auto; overscroll-behavior: contain; color: var(--ink); border: 0; border-radius: 5px 36px 5px 5px; background: var(--cream); box-shadow: var(--shadow); }
.verb-dialog::backdrop { background: rgb(18 35 27 / 70%); backdrop-filter: blur(3px); }
body:has(.verb-dialog[open]) { overflow: hidden; }
.verb-dialog [hidden] { display: none !important; }
.verb-topbar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; border-bottom: 1px solid var(--line); background: var(--cream); }
.verb-topbar .eyebrow { display: block; margin-bottom: 5px; font-size: .6rem; }
.verb-topbar h2 { font-size: 1.5rem; letter-spacing: -.03em; }
.verb-topbar .close-button { width: 44px; height: 44px; flex-shrink: 0; }
.verb-screen { padding: 30px; }
.verb-screen h3 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.verb-screen [tabindex="-1"]:focus { outline: none; }
.verb-screen p { line-height: 1.6; }
.verb-screen button { min-height: 44px; }
.verb-screen button:disabled { cursor: default; }
.verb-intro > p:last-child, .verb-library-top > p:last-child { color: #53644b; font-size: .88rem; }
.verb-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.verb-stats div { padding: 0 16px; border-right: 1px solid var(--line); }
.verb-stats div:first-child { padding-left: 0; }
.verb-stats div:last-child { border: 0; }
.verb-stats strong { display: block; margin-bottom: 5px; color: var(--forest); font-family: var(--display); font-size: 2rem; font-weight: 500; }
.verb-stats strong small { font-size: 1rem; color: #53644b; }
.verb-stats span { color: #53644b; font-size: .72rem; }
.verb-guide { margin-bottom: 28px; padding: 0 15px; border-left: 3px solid var(--sun); background: #f5f0e2; font-size: .83rem; }
.verb-guide summary { padding: 14px 0; font-weight: 700; cursor: pointer; }
.verb-guide p { margin-bottom: 0; padding-bottom: 12px; }
.verb-fieldset { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.verb-fieldset legend { margin-bottom: 12px; color: var(--forest); font-size: .77rem; font-weight: 800; }
.verb-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.verb-stage { position: relative; padding: 14px 12px 18px; color: var(--forest); text-align: left; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); }
.verb-stage:hover, .verb-all:hover { border-color: var(--forest); }
.verb-stage.selected, .verb-all.selected { color: var(--cream); border-color: var(--forest); background: var(--forest); }
.verb-stage-number { display: block; margin-bottom: 12px; color: #a04c32; font-family: var(--display); font-style: italic; font-size: 1.3rem; }
.verb-stage.selected .verb-stage-number { color: var(--sun); }
.verb-stage strong { display: block; font-size: .84rem; line-height: 1.4; }
.verb-stage small { display: block; margin-top: 8px; font-size: .68rem; }
.verb-stage-track { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgb(99 129 96 / 20%); }
.verb-stage-track i { display: block; height: 100%; background: var(--sun); }
.verb-all { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 15px; width: 100%; margin-top: 9px; padding: 12px 14px; color: var(--forest); border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-weight: 700; font-size: .8rem; }
.verb-all span { font-size: .7rem; font-weight: 400; }
.verb-stage-detail { margin: 10px 0 0; color: #53644b; font-size: .75rem; }
.verb-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.verb-mode { display: flex; align-items: flex-start; gap: 9px; padding: 13px 10px; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.verb-mode:has(input:checked) { border-color: var(--forest); background: #eaf0df; }
.verb-mode input { margin: 2px 0 0; accent-color: var(--forest); }
.verb-mode strong, .verb-mode small { display: block; }
.verb-mode strong { font-size: .8rem; line-height: 1.4; }
.verb-mode small { margin-top: 5px; color: #53644b; font-size: .68rem; line-height: 1.5; }
.verb-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.verb-actions > button { flex: 1; padding: 14px 18px; }
.verb-screen .secondary-button { color: var(--forest); border: 1px solid var(--line); background: var(--paper); }
.verb-footnote { margin: 20px 0 0; color: #53644b; font-size: .73rem; text-align: center; }
.verb-storage-note { margin: 16px 28px 0; padding: 12px; color: #8c392a; border: 1px solid #d5ad84; background: #fff1d9; font-size: .8rem; }
.verb-round-top, .verb-round-stats { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #53644b; font-size: .75rem; }
.verb-round-top { margin-bottom: 16px; }
.verb-round-top > span { text-align: right; }
.verb-round-stats { color: var(--forest); font-weight: 700; }
.verb-round-progress { display: block; width: 100%; height: 5px; margin-top: 12px; overflow: hidden; border: 0; border-radius: 3px; background: var(--paper-deep); accent-color: var(--forest); }
.verb-round-progress::-webkit-progress-bar { background: var(--paper-deep); }
.verb-round-progress::-webkit-progress-value { background: var(--forest); }
.verb-round-progress::-moz-progress-bar { background: var(--forest); }
.verb-prompt { padding: 32px 10px 20px; text-align: center; }
.verb-prompt h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.verb-source-type { display: inline-block; margin-top: 6px; padding: 4px 10px; color: #53644b; border: 1px solid var(--line); border-radius: 20px; font-size: .7rem; }
.verb-question-word { margin: 12px 0 0; font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 700; }
.verb-question-reading { margin: 0 0 10px; color: #53644b; font-size: 1rem; }
.verb-question-meaning { margin: 8px 0 0; font-size: .95rem; }
.verb-question-sentence { margin: 25px 0; overflow-wrap: anywhere; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.verb-blank { display: inline-block; min-width: 100px; margin-inline: 6px; color: #9c432d; border-bottom: 2px dashed var(--tomato); background: #f8ecd9; }
.verb-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.verb-option { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 18px 14px; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); box-shadow: 0 3px 0 var(--paper-deep); }
.verb-option:not(:disabled):hover { border-color: var(--forest); background: #eaf0df; }
.verb-option-key { display: grid; flex: 0 0 25px; height: 25px; place-items: center; color: #53644b; border: 1px solid var(--line); border-radius: 50%; font-size: .7rem; }
.verb-option strong, .verb-option small { display: block; overflow-wrap: anywhere; }
.verb-option strong { font-size: clamp(1.2rem, 3vw, 1.7rem); }
.verb-option small { margin-top: 4px; color: #53644b; font-size: .8rem; }
.verb-option-mark { margin-left: auto; font-size: 1.2rem; font-weight: 800; }
.verb-option.is-correct { color: #234e32; border: 2px solid #487148; background: #e4efda; }
.verb-option.is-wrong { color: #943b2c; border: 2px solid #b86049; background: #fbe7dc; }
.verb-option:disabled:not(.is-correct):not(.is-wrong) { opacity: .6; }
.verb-keyboard-hint { margin: 16px 0 0; color: #53644b; text-align: center; font-size: .72rem; }
.verb-feedback { margin-top: 24px; padding-top: 18px; border-top: 2px solid #b86049; scroll-margin-top: 100px; }
.verb-feedback.is-correct { border-color: #487148; }
#verb-feedback-title { margin-bottom: 16px; color: #943b2c; font-size: .93rem; font-weight: 800; }
.is-correct > #verb-feedback-title { color: #315c35; }
.verb-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.verb-pair-side { min-width: 0; padding: 17px; overflow-wrap: anywhere; }
.verb-pair-side.intransitive { border-left: 1px solid var(--line); background: #edf1e5; }
.verb-type { display: block; margin-bottom: 10px; color: #95452f; font-size: .7rem; font-weight: 800; }
.intransitive .verb-type { color: var(--forest); }
.verb-pair-side > strong { display: block; font-size: 1.55rem; }
.verb-reading { display: block; margin-top: 5px; color: #53644b; font-size: .83rem; }
.verb-pair-side > p { margin: 10px 0; font-size: .85rem; }
.verb-pair-side .verb-example { margin: 16px 0 5px; font-size: 1rem; }
.verb-pair-side > small { display: block; color: #53644b; font-size: .76rem; line-height: 1.6; }
.verb-listen { display: block; margin-top: 9px; padding: 6px 0; color: var(--forest); border: 0; background: transparent; font-size: .75rem; font-weight: 700; }
.verb-feedback-tip { margin: 12px 0; color: #53644b; font-size: .77rem; }
#verb-next { display: block; width: 100%; margin-top: 18px; padding: 14px; }
.verb-result { text-align: center; }
.verb-stars { display: flex; justify-content: center; gap: 14px; margin: 20px 0 25px; color: var(--paper-deep); font-size: 3.5rem; }
.verb-stars .earned { color: #b07900; animation: verb-star-in .4s ease both; }
.verb-stars span:nth-child(2) { animation-delay: .12s; }
.verb-stars span:nth-child(3) { animation-delay: .24s; }
.verb-result > p:not(.eyebrow) { color: #53644b; font-size: .88rem; }
.verb-result-score { margin: 25px 0; color: var(--forest); font-family: var(--display); font-size: 4.5rem; }
.verb-result-score span { display: block; color: #53644b; font-family: var(--body); font-size: .78rem; }
.verb-missed { margin-top: 30px; }
.verb-missed h4 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; }
.verb-missed .verb-pair-grid + .verb-pair-grid { margin-top: 12px; }
.verb-library-top .text-button { margin-bottom: 20px; }
.verb-library-filters { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin: 24px 0 18px; }
.verb-library-filters label { min-width: 0; color: var(--forest); font-size: .75rem; font-weight: 700; }
.verb-library-filters input, .verb-library-filters select { display: block; width: 100%; min-width: 0; height: 46px; margin-top: 8px; padding: 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-size: 1rem; }
#verb-library-count { color: #53644b; font-size: .8rem; }
.verb-library-card { margin-bottom: 22px; }
.verb-library-card-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #53644b; font-size: .63rem; font-weight: 700; }
.verb-empty { padding: 24px; text-align: center; background: var(--paper); }
@keyframes verb-star-in { from { opacity: 0; transform: translateY(12px) rotate(-12deg) scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 800px) {
  .verb-banner { flex-wrap: wrap; gap: 20px; padding: 24px; }
  .verb-banner-art span { width: 42px; height: 60px; font-size: 1.6rem; }
  .verb-banner-copy { flex-basis: calc(100% - 130px); }
  .verb-banner-actions { display: flex; align-items: center; flex-wrap: wrap; width: 100%; gap: 20px; }
}
@media (max-width: 560px) {
  .verb-banner { gap: 16px; padding: 22px 20px; }
  .verb-banner-art { display: none; }
  .verb-banner-copy .eyebrow { font-size: .6rem; letter-spacing: .11em; }
  .verb-banner-actions > button { flex: 1; font-size: .8rem; }
  .verb-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .verb-topbar { padding: calc(12px + env(safe-area-inset-top)) 18px 12px; }
  .verb-topbar h2 { font-size: 1.3rem; }
  .verb-screen { padding: 24px 18px calc(28px + env(safe-area-inset-bottom)); }
  .verb-stats strong { font-size: 1.7rem; }
  .verb-stats div { padding-inline: 10px; }
  .verb-stats span { font-size: .65rem; }
  .verb-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verb-stage-number { margin-bottom: 6px; }
  .verb-modes { grid-template-columns: 1fr; }
  .verb-mode { align-items: center; padding: 12px; }
  .verb-mode small { margin-top: 3px; }
  .verb-actions { flex-direction: column; }
  .verb-round-top { font-size: .66rem; }
  .verb-round-stats { gap: 8px; font-size: .7rem; }
  .verb-prompt { padding: 24px 0 20px; }
  .verb-options { gap: 9px; }
  .verb-option { gap: 7px; padding: 15px 10px; }
  .verb-option-key { display: none; }
  .verb-option strong { font-size: 1.4rem; }
  .verb-option small { font-size: .74rem; }
  .verb-keyboard-hint { display: none; }
  .verb-pair-side { padding: 13px 10px; }
  .verb-pair-side > strong { font-size: 1.4rem; }
  .verb-pair-side .verb-example { font-size: .93rem; }
  .verb-library-filters { grid-template-columns: 1fr; }
  .verb-library-card-heading { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .verb-stars .earned { animation: none; }
}