/* Message collage only: shared navigation and activity logic stay unchanged. */
.listening-view.messages{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:34px;padding:30px 3% 25px;isolation:isolate}
.messages>.listening-back{grid-column:1/-1;margin-bottom:25px}
.messages>.message-accessible-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.message-collage{grid-column:1;grid-row:2/8;min-width:0;position:relative}
.message-collage-title{font:700 clamp(40px,5.6vw,86px)/1.12 'Oswald',Impact,sans-serif;transform:rotate(-5deg);margin:15px 0 50px;letter-spacing:-2px;position:relative;z-index:1}
.message-collage-title span{display:inline-block;padding:0 16px 8px;background:#da93a1;color:#062b50;box-shadow:3px 2px 0 #d0919866}
.message-collage-title span+br+span{background:#e7bf5f;margin-left:20px}
.message-handwriting{font:22px/1.3 'Permanent Marker',cursive;color:#103e70;transform:rotate(-8deg);text-align:right;margin:0 15px 0 0}
.message-machine{position:relative;aspect-ratio:880/560;overflow:hidden;margin:10px -20px 0 -30px;z-index:-1}
.message-machine img{position:absolute;max-width:none;width:174.545%;height:auto;left:0;top:-85.714%}
.message-machine{mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
.message-collage-title{word-spacing:.08em;letter-spacing:.015em}
.message-photo{position:absolute;right:-1%;top:-22px;width:18%;aspect-ratio:265/282;overflow:hidden;z-index:2;pointer-events:none;transform:rotate(2deg)}
.message-photo img{position:absolute;max-width:none;width:579.62%;height:auto;left:-479.24%;top:-12.06%}
.messages>.instruction,.messages>.translation{grid-column:2;width:70%;margin-right:0;position:relative;z-index:3}
.messages>.instruction{margin-top:45px;font:500 17px/1.5 'DM Mono',monospace}
.messages>.listening-meta{grid-column:2;font-size:12px;margin-top:10px}
.messages>.listening-meta>span{display:none}
.messages>.listening-status{grid-column:2}
.messages .listening-deck{grid-column:2;margin:10px 0 20px;padding:28px;background:#f4e8d1de;border:1px solid #9a8d7a;border-radius:5px;box-shadow:3px 5px 10px #493b2820}
.messages .listening-deck:before{content:'';position:absolute;top:-15px;left:32%;width:90px;height:30px;background:#cf859b99;transform:rotate(2deg)}
.messages .message-readout{background:none;padding:0 0 14px;color:#a52d54;font:14px/1.6 'DM Mono',monospace;letter-spacing:0;border-bottom:1px solid #ad9d86}
.messages .listening-audio{background:#e5dac6;padding:14px;border:1px solid #aa9d88;border-radius:7px}
.messages .listening-audio button{background:#103e70;color:#fff0d2;border-radius:4px}
.messages .listening-fields{grid-template-columns:1fr;gap:17px}
.messages .listening-fields input{padding:12px;border:1px solid #647086;border-radius:4px;background:#fbf0dc99}
.messages .action{display:block;margin:22px auto 0;background:#d886a2;color:#082c50;border:1px solid #103e70;border-bottom:4px solid #103e70;min-height:48px}
.messages>#listening-result{grid-column:2}
.messages>.listening-notice,.messages>.ear-report-local{grid-column:1/-1}
@media(max-width:800px){.listening-view.messages{grid-template-columns:1fr;padding:24px 5%}.message-photo{width:23%;top:30px}.message-collage{grid-column:1;grid-row:auto}.message-collage-title{font-size:clamp(42px,9vw,70px);margin-bottom:25px}.message-handwriting{display:none}.message-machine{max-height:300px;margin:0;aspect-ratio:880/560}.messages>.instruction,.messages>.translation,.messages>.listening-meta,.messages>.listening-status,.messages .listening-deck,.messages>#listening-result{grid-column:1}.messages>.instruction{margin-top:16px;margin-right:0}.messages .listening-deck{padding:22px}.message-machine img{top:-80.357%}}
/* Illustrated reference: crop only artwork, never the sample player or answers. */
.listening-view.messages{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:20px;padding-left:0;padding-right:3%;background:#f1e7d0}
.messages>.listening-back{margin-left:5%}
.message-collage{grid-row:2/8;align-self:start}
.message-collage-title,.message-handwriting{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.message-machine{margin:0;aspect-ratio:895/879;max-height:none;mask-image:none;z-index:0}
.message-machine img{width:171.62%;top:-16.496%;left:0}
.message-machine:after{content:'';position:absolute;left:0;top:0;width:35%;height:4.5%;background:#f1e7d0;pointer-events:none}
.message-machine:before{content:'';position:absolute;z-index:1;left:71.4%;top:34.8%;width:20%;aspect-ratio:1270/1230;background:url('assets/message-phone-meerkat.webp') center/contain no-repeat;transform:rotate(-8deg);pointer-events:none}
.message-photo{width:13%;right:0;top:0;aspect-ratio:226/306;transform:none}
.message-photo img{width:679.646%;left:-579.646%;top:0}
.messages>.instruction{margin-top:10px;font-size:15px;width:65%}
.messages>.translation{width:75%}
.messages .listening-deck{border:2px solid #635a49;border-radius:0;background:#f5ead4;box-shadow:2px 3px #51493225;padding:26px}
.messages .listening-deck:before{background:#dc87a4b0;height:32px;width:100px;left:32%}
.messages .message-readout{color:#103e70}
.messages .listening-audio{background:#ded2bc88;border-radius:5px}
.messages .listening-audio button:first-child{border-radius:30px}
.messages .action{background:#dd95b4;min-height:52px;font-family:'Permanent Marker',cursive}
.messages>.listening-notice,.messages>.ear-report-local{margin-left:4%}
/* Keep the activity as one independent column, aligned with the artwork. */
.messages .message-collage{grid-row:2;grid-column:1}
.message-activity-column{grid-column:2;grid-row:2;min-width:0;align-self:start;padding-top:10px}
.message-activity-column>.instruction{font:500 16px/1.5 'DM Mono',monospace;margin:0 0 4px;max-width:72%}
.message-activity-column>.translation{max-width:72%;margin:0 0 24px}
.message-activity-column>.listening-meta{margin:0 0 18px;padding-left:16px;font-size:12px}
.message-activity-column>.listening-meta>span{display:none}
.message-activity-column>.listening-meta label{margin-left:0}
.message-activity-column .listening-deck{margin:0 0 20px}
.messages>.listening-notice{margin-top:20px}
@media(max-width:800px){.messages .message-collage{grid-row:2}.message-activity-column{grid-column:1;grid-row:3;padding-top:20px}.message-activity-column>.instruction,.message-activity-column>.translation{max-width:100%}}
@media(max-width:800px){.listening-view.messages{grid-template-columns:1fr;padding:20px 4%}.message-collage{grid-row:auto;grid-column:1}.message-machine{aspect-ratio:895/879;max-height:none;margin:0}.message-machine img{top:-16.496%}.message-photo{display:none}.messages>.instruction{margin-top:12px;width:100%}.messages>.translation{width:100%}.messages .listening-deck{padding:20px}.messages>.listening-notice,.messages>.ear-report-local{margin-left:0}}