/* 字母送信（sample，導演 2026-11-03 選模式 B）：版面沿用注音輸送帶 belt.css，下方改成不會動的字母郵票盤（不限時） */
.sp-slots{display:flex;gap:clamp(8px,2.4vw,18px);align-items:center}
.sp-box{display:grid;place-items:center;width:var(--box);height:var(--box);padding:0;border:3px dashed #fffdf299;border-radius:14px;background:#ffffff1a;color:var(--ink);font-size:calc(var(--box) * .7);font-weight:1000;line-height:1}
.sp-box.is-now{border:4px solid #ffd35c;background:#fff6d633;box-shadow:0 0 0 5px #ffd35c44;animation:slotPulse 1s ease-in-out infinite alternate}
.sp-box.is-filled{border:3px solid var(--gold);background:var(--cream);box-shadow:0 4px 0 #c89c52;animation:slotIn .4s cubic-bezier(.2,1.6,.4,1)}
.sp-box.is-vowel.is-filled{color:#2f86c4}
.sp-box.is-say{transform:translateY(-8px) scale(1.12);transition:transform .15s}
.zb-question.sp-question{--n:3;--box:min(clamp(56px,13svh,112px),calc((100vw - 80px) / var(--n) - 12px))}   /* 4 字在手機上要縮格 */
@media (max-width:560px){.zb-question.sp-question{flex-direction:column;gap:14px}}

.sp-tray{flex:none;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:clamp(8px,2.4vw,16px);min-height:clamp(118px,19svh,190px);padding:12px;border:4px solid #f0d79b;border-radius:22px;background:linear-gradient(#3b4a43,#2b3833);box-shadow:inset 0 6px 0 #ffffff14,0 6px 0 #0b3324}
.sp-tile{--t:clamp(62px,min(17vw,12svh),100px);position:relative;display:grid;place-items:center;width:var(--t);height:var(--t);padding:0;border:0;background:none;touch-action:manipulation}
.sp-tile .zb-stamp{font-size:calc(var(--t) * .66)}
.sp-tile.is-vowel .zb-stamp{color:#2f86c4;box-shadow:inset 0 0 0 5px #fffdf2,inset 0 0 0 8px #2f86c455}
.sp-tile.is-wrong .zb-stamp{background:#ffe1d8;animation:wobble .4s}
.sp-tile.is-taken{visibility:hidden}
.sp-tile:active .zb-stamp{transform:scale(.94)}
.sp-finish-words li{font-size:1.3em;letter-spacing:.06em}

/* 四種模式（2026-11-03） */
.sp-pick{flex-wrap:wrap;justify-content:center;max-width:min(94vw,560px);border-radius:28px}
.sp-pick button{display:flex;align-items:center;min-width:0;padding:4px 10px;white-space:nowrap}
.sp-tray.is-off{visibility:hidden}
.sp-box.is-heard{border:4px solid #7fcf86;background:#7fcf8655;animation:slotIn .35s cubic-bezier(.2,1.6,.4,1)}
.sp-box.is-given{opacity:.85}
.sp-box.is-wrong{animation:wobble .4s}
.sp-tile.is-hint .zb-stamp{animation:hintGlow .8s ease-in-out infinite alternate}
@keyframes hintGlow{to{background:#fff2a8;box-shadow:inset 0 0 0 5px #fffdf2,inset 0 0 0 8px #f2b945,0 0 18px #ffd35c}}
.sp-mystery{color:#c89c52;font-family:inherit;font-weight:1000}
.sp-slots.is-listen .sp-box{position:relative}
.sp-slots.is-listen .sp-box.is-filled:not(.is-heard):not(.is-now){opacity:.55}
.sp-slots.is-listen .sp-box.is-now::after{content:'👆';position:absolute;left:50%;top:100%;font-size:calc(var(--box) * .5);transform:translateX(-50%);animation:pointTap .8s ease-in-out infinite alternate;pointer-events:none}
@keyframes pointTap{to{transform:translate(-50%,-14px)}}
.sp-slots.is-listen .sp-box.is-now{border:4px solid #ffd35c;box-shadow:0 4px 0 #c89c52,0 0 0 7px #ffd35c88}
/* 一起念的郵票（sh、ee…）字小一點；尾巴不發音的 e 淡一點（導演 2026-11-04） */
.sp-box.is-multi{font-size:calc(var(--box) * .46);letter-spacing:-.02em}
.sp-tile.is-multi .zb-stamp{font-size:calc(var(--t) * .42);letter-spacing:-.02em}
.sp-box.is-silent.is-filled{color:#9aa49f;border-style:dashed}
.zb-flyer.is-multi{letter-spacing:-.02em}
.sp-tier{margin-top:8px}
.sp-tier{gap:6px;padding:6px 10px}
.sp-tier button{min-width:42px;padding:4px 6px;justify-content:center}
.sp-tier-label{align-self:center;padding:0 6px;font-weight:900}

/* ===== bolder（導演 2026-11-04）：出題區＝航空信封、圖＝齒孔大郵票、郵票盤＝郵票冊；標題列不動 =====
   只用本遊戲已有的郵務元素：紅 #e0473a／藍 #2f86c4 郵票框、金邊、米色紙 */
:root{--air:repeating-linear-gradient(-45deg,#e0473a 0 14px,#fffdf2 14px 22px,#2f86c4 22px 36px,#fffdf2 36px 44px);--envelope:#fff8e8;--sheet:#f6ead0}
/* 信封：航空斜條紋邊＋淡淡的信封摺線 */
.zb-question.sp-question{position:relative;border:11px solid transparent;border-radius:20px;color:var(--ink);
  background:linear-gradient(to bottom right,#0000 49.7%,#ead9b4 50%,#0000 50.3%) 0 0/50% 46% no-repeat padding-box,
    linear-gradient(to bottom left,#0000 49.7%,#ead9b4 50%,#0000 50.3%) 100% 0/50% 46% no-repeat padding-box,
    linear-gradient(#fffcf3,var(--envelope)) padding-box,var(--air) border-box;
  box-shadow:0 14px 26px #04180f73,0 3px 0 #0b3324}
/* 圖片＝一張齒孔大郵票，微微歪著貼 */
.sp-question .zb-picture{border:0;border-radius:0;background:none;box-shadow:none;transform:rotate(-3deg);filter:drop-shadow(0 8px 9px #5a3d1a4d)}
.sp-question .zb-picture::before,.sp-question .zb-picture::after{content:"";position:absolute;z-index:-1}
.sp-question .zb-picture::before{inset:-13px;background:#fffdf2;
  -webkit-mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 0 0/16px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 0 100%/16px 51% repeat-x;
  mask:radial-gradient(circle 6px at 50% 0,#0000 97%,#000) 0 0/16px 51% repeat-x,radial-gradient(circle 6px at 50% 100%,#0000 97%,#000) 0 100%/16px 51% repeat-x}
.sp-question .zb-picture::after{inset:0;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 3px #e0473a,inset 0 0 0 7px #fff,inset 0 0 0 8px #e0473a55}
.sp-question .zb-picture.is-new{animation:stampIn .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes stampIn{from{opacity:0;transform:translateY(-30px) rotate(-14deg) scale(.85)}}
.sp-question .zb-replay{left:-18px;bottom:-18px}
/* 地址格：寫在信封上的格子 */
.sp-question .sp-box{border:3px dashed #17593f59;background:#17593f0d;color:var(--ink);box-shadow:none}
.sp-question .sp-box.is-now{border:4px solid #f2b945;background:#fff3c4;box-shadow:0 0 0 5px #f2b94540;animation:slotPulse 1s ease-in-out infinite alternate}
.sp-question .sp-box.is-filled{border:3px solid #e3bd70;background:#fff;box-shadow:0 5px 0 #d8b06a,0 8px 10px #5a3d1a26}
.sp-question .sp-box.is-vowel.is-filled{color:#2f86c4}
.sp-question .sp-box.is-given{opacity:1;background:#fffdf6;color:#17593fcc;box-shadow:0 3px 0 #e3cf9f}
.sp-question .sp-box.is-silent.is-filled{border:3px dashed #b8b2a2;background:#f4f0e6;color:#9a958a;box-shadow:none}
.sp-slots.is-listen .sp-box.is-heard{border-color:#7fcf86;background:#e9f8ea}
/* 郵票盤＝郵票冊：米色紙＋淡格線，郵票放大、各自歪一點 */
.sp-tray{border:4px solid var(--gold);background:radial-gradient(circle,#d9c49a 1.2px,#0000 1.8px) 0 0/18px 18px,linear-gradient(#fbf3e0,var(--sheet));
  box-shadow:inset 0 3px 0 #fffdf5,0 10px 22px #04180f66,0 3px 0 #0b3324;gap:clamp(10px,3vw,20px)}
.sp-tile{--t:clamp(68px,min(19vw,13svh),112px);filter:drop-shadow(0 5px 4px #5a3d1a47);transition:transform .15s cubic-bezier(.2,1.4,.4,1)}
.sp-tile:nth-child(3n+1){transform:rotate(-4deg)}
.sp-tile:nth-child(3n+2){transform:rotate(3deg)}
.sp-tile:nth-child(3n){transform:rotate(-1.5deg)}
.sp-tile:hover{transform:rotate(0) translateY(-4px) scale(1.04)}
.sp-tile:active .zb-stamp{transform:scale(.92)}
.sp-tile .zb-stamp{box-shadow:inset 0 0 0 5px #fffdf2,inset 0 0 0 9px #e0473a,inset 0 0 0 11px #fffdf2}
.sp-tile.is-vowel .zb-stamp{box-shadow:inset 0 0 0 5px #fffdf2,inset 0 0 0 9px #2f86c4,inset 0 0 0 11px #fffdf2}
.sp-tile.is-hint .zb-stamp{animation:hintGlow .8s ease-in-out infinite alternate}
/* 開始選單：把後面的遊戲壓暗，選單看得清楚 */
.ready-tap{background:radial-gradient(circle at 50% 58%,#0e3a28a6 0 110px,#082519eb 72%)}
/* 完成卡也用航空信封邊 */
.finish-card{border:11px solid transparent;background:linear-gradient(#fffcf3,var(--envelope)) padding-box,var(--air) border-box;box-shadow:0 18px 32px #04180f80}
.sp-finish-words li{padding:2px 10px;border:2px dashed #e0473a66;border-radius:8px;background:#fff}
/* 玩法框預覽：航空信封缺一格，c 郵票飛進去 */
.howto-stage .pv-spell{background:#e6f2dc}
/* 上方角色區（導演 2026-11-04）：進度＝6 封小信；寄出變航空信封，一次答對蓋郵戳；目前這封亮起來 */
.zb-host{--flap:linear-gradient(to bottom right,#0000 47%,#d8c49a 49% 53%,#0000 55%) 0 0/50% 62% no-repeat,linear-gradient(to bottom left,#0000 47%,#d8c49a 49% 53%,#0000 55%) 100% 0/50% 62% no-repeat}
.zb-host .zb-progress{gap:clamp(6px,1.6vw,12px);align-items:flex-end;padding:0 0 6px}
.zb-host .zb-progress li{position:relative;flex:1;max-width:52px;height:clamp(22px,3.2svh,30px);border:2px dashed #fffdf280;border-radius:5px;background:#fffdf214;transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.zb-host .zb-progress li.is-now{border:3px solid #f2b945;background:var(--flap),#fff8e8;box-shadow:0 4px 0 #b9792b,0 8px 12px #04180f59;transform:translateY(-4px) scale(1.08);animation:letterBob 1s ease-in-out infinite alternate}
.zb-host .zb-progress li.is-done{border:3px solid transparent;background:var(--flap) padding-box,linear-gradient(#fffcf3,#fff8e8) padding-box,repeating-linear-gradient(-45deg,#e0473a 0 5px,#fffdf2 5px 8px,#2f86c4 8px 13px,#fffdf2 13px 16px) border-box;box-shadow:0 3px 6px #04180f59}
.zb-host .zb-progress li.is-star::after{content:"";position:absolute;right:-9px;top:-11px;width:26px;height:26px;background:url(assets/dinopost-workmark-stamp-transparent-v1.webp) center/contain no-repeat;transform:rotate(14deg);animation:stampDown .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes letterBob{to{transform:translateY(-7px) scale(1.08) rotate(-2deg)}}
.zb-host .zb-bubble{font-size:clamp(19px,4.8vw,30px);padding:8px 18px 10px;box-shadow:0 5px 0 #c89c52,0 10px 16px #04180f40}
/* 泡泡＝簡潔白泡泡（導演 2026-11-04：雲朵不好看，選 B）：純白圓角、細邊、柔和陰影；注音與聲調同色不用紅 */
.zb-host .zb-bubble{margin:0 0 6px 12px;padding:10px 20px 12px;border:2px solid #17593f1f;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 6px 16px #04180f33,0 1px 2px #04180f1f}
.zb-host .zb-bubble::before{left:-10px;bottom:14px;width:18px;height:18px;border:0;border-left:2px solid #17593f1f;border-bottom:2px solid #17593f1f;border-radius:0 0 0 4px;background:#fff;transform:rotate(45deg)}
.zb-host .zb-bubble .bpm-column,.zb-host .zb-bubble .bpm-tone,.zb-host .zb-bubble .bpm-tone-dot{color:#4d8f6e}
/* 長標題（原「字母郵票貼貼樂」7 字，11-04 改「郵票貼字母」5 字）＋右邊兩顆按鈕：手機上標題字小一點，按鈕才不會被擠出去 */
@media(max-width:680px){.gh .gh-title{font-size:clamp(14px,4.1vw,24px)}}