.assessment-panel { position:fixed; inset:0; z-index:50; overflow:auto; background:#f5f6ed; color:#20392e; padding:12px 24px 104px; font-family:system-ui,sans-serif; }
.assessment-panel[hidden] { display:none; }
.assessment-heading { padding:0; margin:0 0 10px; }
.assessment-heading h1 { font-size:clamp(22px,3vw,32px); margin:4px 0; }
.assessment-footer { position:fixed; bottom:0; left:0; right:0; padding:14px 28px; background:#f5f6ed; border-top:1px solid #d4ddd6; z-index:2; }
.assessment-footer button { min-height:72px; min-width:200px; font-size:24px; }
.assessment-writing { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.66fr); align-items:center; gap:20px; max-width:1180px; margin:auto; }
.assessment-paper { position:relative; width:min(100%,calc(100dvh - 180px)); aspect-ratio:1; border:2px solid #a4b5a6; border-radius:12px; background:#fffef8; justify-self:center; overflow:hidden; }
.freehand-ink { display:block; width:100%; height:100%; aspect-ratio:1; touch-action:none; user-select:none; -webkit-user-select:none; }
.assessment-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.assessment-controls .button { min-height:64px; font-size:24px; line-height:1.25; padding:8px; }
.assessment-controls .primary { min-height:72px; grid-column:1/-1; }
.assessment-controls>p,.assessment-controls>img,.assessment-controls>nav { grid-column:1/-1; }
.assessment-timer { grid-column:1/-1; text-align:center; font-size:26px; font-variant-numeric:tabular-nums; line-height:1.2; }
.assessment-completed { position:absolute; right:10px; bottom:10px; border-radius:8px; padding:2px 10px; font-size:18px; color:#214b3b; background:#e9eddf; }
.assessment-choice-card:disabled { opacity:1; }
.assessment-controls .assessment-status:empty { display:none; }
.assessment-status { min-height:1.5em; margin:4px 0; font-size:16px; }
.assessment-controls .assessment-status { font-size:clamp(28px,3vw,34px); font-weight:700; line-height:1.3; }
.assessment-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:22px 0; }
.assessment-panel:has(> .word-cards) { display:flex; flex-direction:column; gap:8px; padding:10px 16px max(10px,env(safe-area-inset-bottom)); }
.assessment-panel:has(> .word-cards) .assessment-heading { flex:none; margin:0; }
.assessment-panel:has(> .word-cards) .assessment-heading h1 { margin:0; line-height:1.2; }
.assessment-panel:has(> .word-cards) .assessment-status:empty { display:none; }
.assessment-panel:has(> .word-cards) .assessment-footer { position:static; flex:none; padding:8px 0 0; }
.assessment-choices.word-cards { flex:1; min-height:0; grid-auto-rows:minmax(0,1fr); gap:10px; margin:0; }
.assessment-choices .word-card { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:6px; min-height:0; min-width:0; padding:8px; }
.assessment-choices .word-card .word-name { grid-column:1; grid-row:1; flex-wrap:wrap; white-space:normal; overflow-wrap:anywhere; font-size:clamp(32px,calc(180px / var(--word-length)),100px); line-height:1.35; align-self:center; }
.assessment-choices .word-card .word-photo { grid-column:1; grid-row:2; width:min(100%,max(140px,calc(100svh - 440px)),240px); height:auto; aspect-ratio:1; object-fit:contain; align-self:center; }
.assessment-choices .assessment-choice-listen { container-type:size; grid-template-rows:minmax(0,1fr); }
.assessment-choices .assessment-choice-listen .word-name { grid-column:1/-1; font-size:min(96px,calc(100cqi / 5),50cqb); }
.review-answers { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.review-paper { width:100%; max-width:280px; aspect-ratio:1; border:1px solid #d4ddd6; background:white; }
.review-answer label { display:block; margin:12px 0; }
.review-answer select { font:inherit; min-height:44px; }
.teacher-correct { color:#16752f; font-size:22px; font-weight:700; }
.assessment-board { margin:24px 0; }
@media (min-width:600px) and (orientation:portrait) {
  .assessment-choices.word-cards { grid-template-columns:minmax(0,1fr); }
  .assessment-choices .word-card { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
  .assessment-choices .word-card .word-name { font-size:clamp(32px,calc(280px / var(--word-length)),min(160px,calc((100svh - 420px) / 5))); }
  .assessment-choices .word-card .word-photo { grid-column:2; grid-row:1; width:min(100%,calc((100svh - 360px) / 3),280px); }
  .assessment-choices .assessment-choice-listen .word-name { font-size:min(96px,calc(100cqi / 5),50cqb); }
}
.assessment-choices:has(> .word-card:nth-child(4)) .word-card .word-name { font-size:clamp(24px,calc(120px / var(--word-length)),60px); }
.assessment-choices:has(> .word-card:nth-child(4)) .word-card .word-photo { width:min(100%,max(80px,calc((100svh - 240px) / 4)),110px); }
@media (min-width:600px) and (orientation:portrait) {
  .assessment-choices:has(> .word-card:nth-child(4)) .word-card .word-name { font-size:clamp(24px,calc(180px / var(--word-length)),80px); }
  .assessment-choices:has(> .word-card:nth-child(4)) .word-card .word-photo { width:min(100%,calc((100svh - 260px) / 6),120px); }
}
@media (max-width:650px) {
  .assessment-panel { padding:12px 14px 94px; }
  .assessment-writing { grid-template-columns:minmax(0,1fr) minmax(260px,1fr); gap:12px; }
  .assessment-controls { gap:8px; }
  .assessment-footer { padding:10px 14px; }
  .assessment-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  .assessment-writing { grid-template-columns:1fr; }
  .assessment-paper { width:min(100%,calc(100dvh - 390px)); }
  .assessment-status { grid-column:1 / -1; }
  .assessment-choices { grid-template-columns:1fr; }
}
@media (max-width:599px) {
  .assessment-choices.word-cards { flex:1 0 auto; grid-template-columns:minmax(0,1fr); grid-auto-rows:minmax(160px,1fr); }
  .assessment-choices .word-card { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
  .assessment-choices .word-card .word-name { font-size:clamp(32px,calc(150px / var(--word-length)),100px); }
  .assessment-choices .word-card .word-photo { grid-column:2; grid-row:1; width:min(100%,140px); }
}

.review-answer { border:1px solid #bac9b9; border-radius:12px; padding:16px; background:#fffef8; }
.assessment-writer { position:absolute; inset:0; touch-action:none; user-select:none; -webkit-user-select:none; }
.assessment-writer>svg { position:absolute; inset:0; width:100%; height:100%; }
.assessment-writer .start-overlay { pointer-events:none; z-index:1; }
.assessment-correct { color:#16752f; font-size:64px; font-weight:700; margin:0; text-align:center; }
.assessment-board table { width:100%; max-width:900px; margin:auto; border-collapse:collapse; font-size:24px; }
.assessment-board th,.assessment-board td { padding:12px; text-align:left; border-bottom:1px solid #d4ddd6; }
.assessment-board .is-me { background:#e4eddd; }
@media (min-width:600px) and (orientation:portrait) {
  .assessment-writing { grid-template-columns:1fr; gap:10px; }
  .assessment-paper { width:min(100%,calc(100dvh - 400px)); }
  .assessment-controls { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .assessment-controls .primary { grid-column:auto; }
  .assessment-controls .assessment-correct { grid-column:auto; line-height:1; }
  .assessment-controls .assessment-status { grid-column:2/-1; align-self:center; }
}