.mail-page { width:100%; max-width:1150px; min-width:0; margin:auto; padding:10px 0 20px; }
.mail-controls { display:flex; align-items:end; justify-content:center; gap:8px; flex-wrap:wrap; }
.mail-controls label { display:flex; flex-direction:column; gap:3px; min-width:0; font-size:12px; }
.mail-controls :is(select,.btn) { min-height:44px; }
.mail-status { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:10px 0; }
#mailProgress { color:var(--accent); font-size:16px; font-weight:800; }
#mailVoice { min-height:44px; }
#mailPrompt { text-align:center; font-size:clamp(24px,3vw,34px); margin:12px 0; }
.mail-workspace { display:grid; grid-template-columns:minmax(180px,.65fr) minmax(0,1.6fr); align-items:center; gap:20px; }
.mail-source { touch-action:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin:auto; min-width:130px; min-height:170px; padding:10px; color:#244157; background:#fff5df; border:2px dashed #dfac4a; border-radius:22px; font-weight:800; cursor:grab; }
.mail-source img { width:160px; height:160px; object-fit:contain; pointer-events:none; }
.mail-letter { font-size:110px; line-height:1.25; pointer-events:none; }
.mail-word { font-size:20px; pointer-events:none; }
.mail-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-width:0; }
.mail-choices:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.mail-box { position:relative; background:#fff5df; border:3px solid #667f93; border-radius:24px; padding:8px; min-width:44px; cursor:pointer; transition:transform .15s; }
.mail-box img { width:100%; height:auto; max-height:210px; object-fit:contain; display:block; pointer-events:none; }
.mail-box span { position:absolute; top:58%; left:50%; transform:translate(-50%,-50%); color:white; font-size:clamp(38px,5vw,68px); font-weight:900; pointer-events:none; text-shadow:0 2px 2px #10243a; }
.mail-box:focus-visible { outline:4px solid #ffcb50; outline-offset:2px; }
.mail-box.is-wrong { opacity:.4; }
.mail-box.is-correct { border-color:#55d6be; box-shadow:0 0 0 4px #55d6be; }
.mail-box:disabled { cursor:default; }
.mail-box.is-correct img { animation:mail-post .35s ease-out; }
@keyframes mail-post { 50% { transform:scale(.92) rotate(-3deg); } }
.mail-ghost { position:fixed; width:110px; height:110px; min-width:0; min-height:0; padding:4px; transform:translate(-50%,-50%); z-index:1000; pointer-events:none; opacity:.9; display:grid; place-items:center; border:0; background:#fff7e5; border-radius:12px; }
.mail-ghost img { width:90px; height:90px; object-fit:contain; }.mail-ghost .mail-letter { font-size:70px; }.mail-ghost .mail-word { display:none; }
.mail-footer { min-height:100px; text-align:center; margin-top:12px; }
#mailFeedback { min-height:38px; font-size:17px; line-height:1.4; }
#mailFeedback.error { color:#ffabab; }#mailFeedback.success,#mailFeedback.victory { color:#89e3cc; font-weight:800; }
.mail-note { font-size:12px; color:var(--muted); line-height:1.5; text-align:center; margin:10px 0; }
@media(max-width:759px){
 .mail-controls { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
 .mail-controls label,.mail-controls select { width:100%; }
 .mail-workspace { display:flex; flex-direction:column; gap:12px; }
 .mail-source { min-height:110px; padding:6px; }.mail-source img { width:100px; height:100px; }.mail-letter { font-size:76px; }.mail-word { font-size:16px; }
 .mail-choices { width:100%; gap:6px; }.mail-box { padding:3px; border-radius:16px; }.mail-box img { max-height:130px; }.mail-box span { font-size:38px; }
 .mail-choices:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns:repeat(2,minmax(0,1fr)); }
 #mailPrompt { font-size:22px; margin:8px 0; }#mailFeedback { font-size:15px; }
}