/* Practice-hall drills: sentence building and word matching. They stand on the lesson stage and reuse its frame. */
.drill-cabinet{margin:22px 0}
.drill-doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 20px}
.drill-door{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;min-height:74px;padding:13px 15px;text-align:left;font:inherit;color:#714623;background:#fff1d4;border:2px solid #c8a368;border-radius:12px;box-shadow:0 4px 0 #79552d;text-decoration:none}
.drill-door:active{transform:translateY(2px);box-shadow:0 2px 0 #79552d}
.drill-door-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px double #ffe083;background:#ba3a2e;color:#fff3d2;font-size:20px;font-weight:900}
.drill-door strong{display:block;font-size:17px}
.drill-door small{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:#9d7e4f}
.drill-door .icon{width:20px;height:20px;color:#b0884d}

.drill-card{position:relative;border:6px double #c49d62;border-radius:9px;background:linear-gradient(110deg,#fff9e7,#fff0cc);padding:22px 22px 24px;margin:20px 0 18px;text-align:center;box-shadow:0 6px 0 #50351d66}
.drill-card .category{display:block;color:#b0884d;letter-spacing:3px;font-size:11px}
.drill-prompt{margin:14px 0 18px;font-size:24px;font-weight:800;line-height:1.5;color:#a65331;overflow-wrap:anywhere}
/* The sentence's own voice: a round button beside its meaning, there from the start. */
.drill-prompt-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 18px}
.drill-prompt-row .drill-prompt{margin:0;min-width:0}
.drill-play{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;background:#fff1cf;border:3px solid #d8b778;color:#a3622a;box-shadow:0 3px 0 #79552d;cursor:pointer}
.drill-play .icon{width:24px;height:24px}
.drill-play:active{transform:translateY(2px);box-shadow:0 1px 0 #79552d}
.drill-slots{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:8px;min-height:64px;padding:10px 8px;border-top:2px dashed #d8bb81}
.drill-slot{width:74px;height:56px;border-bottom:3px solid #c8a368;border-radius:4px;background:#f4e3bb80}
.drill-card .audio-button{margin-top:14px}
.drill-period{align-self:flex-end;font-size:26px;font-weight:800;color:#714623;line-height:56px}
.drill-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 22px}
.drill-tile{min-width:58px;min-height:56px;padding:6px 14px 8px;font:inherit;font-size:22px;font-weight:800;color:#714623;background:#fff1d4;border:2px solid #c8a368;border-radius:11px;box-shadow:0 4px 0 #79552d}
.drill-tile ruby,.match-card ruby{ruby-align:center}
.drill-tile rt,.match-card rt{font-size:11px;font-weight:700;color:#a28151}
.drill-tile:active,.match-card:active{transform:translateY(2px)}
/* A tile that has moved up leaves its outline behind, so the bank does not reshuffle under the finger. */
.drill-bank .drill-tile:disabled{color:transparent;background:#5c3e2555;border-color:#c8a36855;box-shadow:none}
.drill-bank .drill-tile:disabled rt{color:transparent}
.drill-tile.right{background:#e5eccb;border-color:#94a86b;color:#637443;opacity:1}
.drill-tile.wrong{background:#ffd9c2;border-color:#c18961;color:#a4613a;opacity:1}
.drill-stage.is-correct .drill-card{border-color:#edb942;box-shadow:0 0 0 3px #ffe59755,0 12px 26px #2d170b40}
.drill-stage.is-correct .drill-tile.right,.drill-stage.is-correct .match-card.is-matched{animation:learning-right .42s ease-out}

.match-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.match-column{display:grid;gap:11px}
.match-card{display:grid;place-items:center;min-height:66px;padding:8px 10px;font:inherit;font-size:17px;font-weight:800;color:#714623;background:#fff1d4;border:2px solid #c8a368;border-radius:11px;box-shadow:0 4px 0 #79552d;overflow-wrap:anywhere}
.match-card ruby{font-size:24px}
.match-card.is-picked{background:#ffe9a8;border-color:#d89b1d;box-shadow:0 4px 0 #a8720f,0 0 0 3px #ffd76688}
.match-card.is-matched{background:#e5eccb;border-color:#94a86b;color:#637443;box-shadow:none;opacity:.72}
.match-card.is-wrong{background:#ffd9c2;border-color:#c18961;color:#a4613a;animation:drill-shake .34s ease-out}
@keyframes drill-shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.reduce-motion .match-card.is-wrong,.reduce-motion .drill-stage .drill-tile,.reduce-motion .drill-stage .match-card{animation:none!important}
@media(prefers-reduced-motion:reduce){.match-card.is-wrong,.drill-stage .drill-tile,.drill-stage .match-card{animation:none!important}}
@media(max-width:700px){
 .drill-doors{grid-template-columns:1fr;gap:11px;padding:14px}
 .drill-card{padding:18px 12px 20px}
 .drill-prompt{font-size:20px}
 .drill-tile{font-size:20px;padding:6px 11px 8px}
 .drill-slot{width:62px}
 .match-columns{gap:10px}
 .match-card{font-size:15px;min-height:62px}
 .match-card ruby{font-size:21px}
}
@media(max-width:359px){
 .drill-tile{font-size:18px;min-width:50px;padding:6px 8px 8px}
 .drill-slot{width:52px}
 .match-card{font-size:13px;padding:8px 6px}
 .match-card ruby{font-size:19px}
}

/* drills-voice.html: every sentence and tile as a button, for checking the clips by ear. */
.voice-check{margin:0;padding:22px 16px 60px;font-family:'Noto Sans JP',sans-serif;line-height:1.7;color:#49341f;background:#f6ebd6}
.voice-check main{max-width:760px;margin:0 auto}
.voice-check h1{margin:4px 0 8px;font-size:24px}
.voice-check h2{margin:26px 0 12px;padding-bottom:6px;font-size:16px;border-bottom:2px solid #c8a368}
.voice-check a{color:#bd3b2f;font-weight:700}
.voice-kicker{margin:0;font-size:12px;letter-spacing:2px;color:#86725a}
.voice-check .drill-bank{justify-content:flex-start;margin:0}
.voice-check .drill-tile{cursor:pointer}
.voice-check .drill-tile small{display:block;margin-top:2px;font-size:11px;font-weight:700;color:#a4613a}
.voice-check .drill-tile.is-flagged{border-color:#c18961;background:#ffe9d9}
/* English course: a blank in a word's example, and a word spelt letter by letter. */
.cloze-sentence{font-size:22px;line-height:1.6;color:#5c3a1d;text-align:left;overflow-wrap:normal}
.cloze-blank{display:inline-block;min-width:4.5em;border-bottom:3px solid #c8a368;color:#a65331;text-align:center}
.cloze-word{padding:0 5px;border-radius:6px;background:#e5eccb;color:#637443}
.cloze-translation{margin:-8px 0 14px;font-size:15px;font-weight:700;line-height:1.6;color:#86725a}
.drill-spell .drill-slots{gap:5px}
.drill-spell .drill-slot{width:40px}
.drill-spell .drill-tile{min-width:42px;padding:6px 8px 8px}
@media(max-width:480px){.cloze-sentence{font-size:19px}.drill-spell .drill-slot{width:30px}.drill-spell .drill-tile{min-width:32px;padding:6px 5px 8px;font-size:19px}}