/* Dialogue composition traced from the approved three-state reference. */
#battle-frame{container-type:inline-size}
#lesson-panel{all:unset;position:absolute;inset:0;z-index:30;pointer-events:none;isolation:isolate;font-family:Barlow,Arial,sans-serif;color:#fff}
#lesson-panel[hidden]{display:none!important}
#lesson-panel #lesson-portrait{all:unset;position:absolute;left:0;bottom:-28px;width:min(290px,42%);height:min(305px,68%);object-fit:contain;object-position:left bottom;pointer-events:none;z-index:1}
#lesson-panel .lesson-copy{all:unset;position:absolute;left:min(235px,36%);bottom:170px;box-sizing:border-box;width:fit-content;max-width:min(470px,calc(100% - min(235px,36%) - 12px));padding:32px 30px 34px;pointer-events:auto;isolation:isolate;z-index:2}
#lesson-panel .lesson-copy::before,#lesson-panel .lesson-copy::after{content:'';position:absolute;inset:0;z-index:-2;background:#fff;clip-path:polygon(7% 0,88% 0,100% 13%,100% 80%,91% 91%,16% 91%,0 100%,7% 76%,0 69%,0 12%)}
#lesson-panel .lesson-copy::after{inset:4px;z-index:-1;background:#21172f}
#lesson-panel .speech-tail{display:none!important}
#lesson-panel #lesson-speaker{all:unset;position:absolute;left:25px;top:-12px;padding:3px 12px;background:#fff;color:#20172e;font-size:18px;font-weight:900;line-height:1.25;transform:rotate(-4deg)}
#lesson-panel #lesson-title,#lesson-panel #lesson-sources{display:none!important}
#lesson-panel #lesson-note{all:unset;display:block;margin-top:10px;color:#f4d99a;font-size:14px;font-weight:800;line-height:1.3}
#lesson-panel #lesson-note[hidden],#lesson-panel #lesson-note:empty{display:none!important}
#lesson-panel #lesson-text{all:unset;display:block;max-width:31ch;color:#fff;font-size:20px;font-weight:700;line-height:1.35}
#lesson-panel .lesson-actions{all:unset;display:flex;justify-content:flex-end;margin-top:10px}
#lesson-panel #lesson-continue{all:unset;padding:4px 2px 0 14px;color:#fff;cursor:pointer;font-size:16px;font-weight:900;text-transform:uppercase;pointer-events:auto}
#lesson-panel #lesson-continue::after{content:' ▸'}
#lesson-panel #lesson-continue[hidden]{display:none!important}
#lesson-panel.responding .lesson-copy{left:min(245px,38%);bottom:300px;max-width:360px;padding:29px 29px 31px}
#lesson-panel.responding #lesson-text{font-size:20px;white-space:nowrap}
#lesson-panel.responding .lesson-actions{display:none}
#lesson-panel.responding.answered .lesson-actions{display:flex;justify-content:flex-end;margin-top:10px}
#lesson-panel.responding.answered #lesson-continue{display:block!important}
#lesson-panel #lesson-choices{all:unset;position:absolute;left:min(250px,39%);bottom:20px;display:grid;grid-template-columns:minmax(0,400px) minmax(0,210px);gap:11px 6px;align-items:center;width:min(610px,calc(100% - min(250px,39%) - 10px));pointer-events:auto;z-index:3}
#lesson-panel #lesson-choices[hidden]{display:none!important}
#lesson-panel .lesson-choice{all:unset;box-sizing:border-box;position:relative;grid-column:1;isolation:isolate;width:100%;max-width:100%;min-width:230px;min-height:48px;padding:11px 28px 11px 58px;color:#111831;cursor:pointer;font-size:16px;font-weight:900;line-height:1.18;pointer-events:auto}
#lesson-panel .lesson-choice::before,#lesson-panel .lesson-choice::after{content:'';position:absolute;inset:0;z-index:-2;background:#17234b;clip-path:polygon(97% 0,11% 0,14% 20%,0 50%,14% 80%,11% 100%,97% 100%,100% 80%,98% 50%,100% 20%)}
#lesson-panel .lesson-choice::after{inset:3px;z-index:-1;background:#fff}
#lesson-panel .lesson-choice.incorrect{color:#fff}
#lesson-panel .lesson-choice.incorrect::before{background:#fff}
#lesson-panel .lesson-choice.incorrect::after{background:#c91b35}
#lesson-panel .lesson-choice.answered{color:#fff}
#lesson-panel .lesson-choice.answered::before{background:#fff}
#lesson-panel .lesson-choice.answered::after{background:#23785a}
#lesson-panel .lesson-choice:focus-visible,#lesson-panel #lesson-continue:focus-visible{outline:3px solid #35dcff;outline-offset:3px}
#lesson-panel #lesson-feedback{all:unset;box-sizing:border-box;position:relative;grid-column:2;grid-row:var(--feedback-row,1)!important;isolation:isolate;padding:13px 17px;color:#fff;font-size:14px;font-weight:800;line-height:1.25;white-space:pre-line;pointer-events:auto}
#lesson-panel #lesson-feedback:empty{display:none}
#lesson-panel #lesson-feedback::before,#lesson-panel #lesson-feedback::after{content:'';position:absolute;inset:0;z-index:-2;background:#fff;clip-path:polygon(0 0,90% 0,100% 50%,90% 100%,0 100%)}
#lesson-panel #lesson-feedback::after{inset:3px;z-index:-1;background:#c91b35}
#lesson-panel #lesson-feedback.correct-feedback::after{background:#23785a}
@container (max-width:700px){
 #lesson-panel #lesson-portrait{width:260px;height:275px}
 #lesson-panel .lesson-copy{left:220px;max-width:calc(100% - 230px)}
 #lesson-panel.responding .lesson-copy{left:230px;bottom:285px}
 #lesson-panel #lesson-choices{left:235px;width:calc(100% - 243px);grid-template-columns:minmax(0,1fr)}
 #lesson-panel #lesson-feedback{grid-column:1;grid-row:auto!important;margin-left:28px}
 #lesson-panel .lesson-choice{width:100%;min-width:0;font-size:15px}
}
@container (max-width:520px){
 #lesson-panel #lesson-portrait{width:185px;height:215px;bottom:-18px}
 #lesson-panel .lesson-copy{left:160px;bottom:145px;max-width:calc(100% - 168px);padding:28px 22px 29px}
 #lesson-panel #lesson-text{font-size:17px}
 #lesson-panel.responding .lesson-copy{left:170px;bottom:270px;padding:27px 22px 29px}
 #lesson-panel.responding #lesson-text{font-size:17px}
 #lesson-panel #lesson-choices{left:180px;width:calc(100% - 188px);bottom:12px;gap:8px}
 #lesson-panel .lesson-choice{min-height:44px;padding:9px 20px 9px 42px;font-size:14px}
 #lesson-panel #lesson-feedback{font-size:13px}
}