/* 大廳 / 收藏(M 線)。手機橫式優先(844×390),桌機與直式也能用。 */
body.meta-on #landing { display: none !important; }
#metaLayer { position: fixed; inset: 0; z-index: 20; display: none; color: var(--ink, #1D2133);
  background: radial-gradient(circle at 20% 110%, #7CC25A 0 18%, transparent 18.2%), radial-gradient(circle at 85% 115%, #7CC25A 0 22%, transparent 22.2%),
    linear-gradient(#BFE8FF 0, #D9F2FF 34%, #8FD16A 34.2%, #8FD16A 100%);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; overflow: hidden; }
#metaLayer.on { display: block; }
#metaLayer * { box-sizing: border-box; }
#metaLayer button { font: inherit; color: inherit; cursor: pointer; }
:where(.ic) { width: 1.2em; height: 1.2em; vertical-align: -.22em; flex: none; }

.m-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.m-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
.m-bar h2 { margin: 0; font-size: 22px; white-space: nowrap; text-shadow: 0 2px 0 #fff; }
.m-sp { flex: 1; }
.m-back { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ink, #1D2133); background: #fff; box-shadow: 0 3px 0 #1D2133; display: grid; place-items: center; padding: 0; flex: none; }
.m-back:active, .m-btn:active, .m-chip:active, .m-round:active { transform: translateY(2px); box-shadow: 0 1px 0 #1D2133; }
.m-chip { display: inline-flex; align-items: center; gap: 5px; border: 2.5px solid #1D2133; background: #fff; border-radius: 999px; padding: 4px 11px 4px 8px; font-weight: 700; font-size: 15px; box-shadow: 0 3px 0 #1D2133; white-space: nowrap; }
.m-chip.name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.m-chip canvas { margin: -6px 0 -6px -4px; }
.m-main { flex: 1; min-height: 0; overflow: auto; padding: 4px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); -webkit-overflow-scrolling: touch; }

.m-btn { border: 3px solid #1D2133; border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: 17px; background: #FFD84A; box-shadow: 0 4px 0 #1D2133; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.m-btn.alt { background: #fff; color: #1D2133; }
.m-btn.pink { background: #FF8FB1; }
.m-btn.blue { background: #7FD4FF; }
.m-btn.green { background: #7ED957; }
.m-btn[disabled] { opacity: .45; cursor: default; transform: none; }
.m-btn small { font-weight: 400; font-size: 12px; opacity: .75; }
/* 加深第 7 批:輕鬆模式切換(關 = 白底;開 = 淡綠底 + 打勾邊) */
.m-easy { flex-wrap: wrap; justify-content: flex-start; text-align: left; font-size: 15px; padding: 8px 12px; }
.m-easy small { flex-basis: 100%; }
.m-easy.on { background: #D9F5C5; }
.m-card { background: #FFF6E0; border: 3px solid #1D2133; border-radius: 18px; box-shadow: 0 5px 0 #1D2133; }
.m-muted { color: #5A5F70; font-size: 13px; }
.m-row { display: flex; gap: 8px; align-items: center; }
.m-col { display: flex; flex-direction: column; gap: 8px; }
.m-input { font: inherit; font-size: 18px; border: 3px solid #1D2133; border-radius: 12px; padding: 8px 10px; min-width: 0; background: #fff; }
.m-code { letter-spacing: .25em; text-transform: uppercase; width: 6.5em; }

/* 標題 */
.m-title { align-items: center; justify-content: center; text-align: center; cursor: pointer; }
.m-logo { font-size: clamp(40px, 11vh, 76px); font-weight: 700; margin: 0; line-height: 1; color: #fff; letter-spacing: .04em;
  -webkit-text-stroke: 3px #1D2133; paint-order: stroke fill; text-shadow: 0 6px 0 #1D2133; }
.m-logo span { color: #FFD84A; }
.m-tsub { font-weight: 700; margin-top: 10px; font-size: 16px; }
.m-tap { margin-top: 10px; font-weight: 700; font-size: 20px; background: #fff; color: #1D2133; border: 3px solid #1D2133; border-radius: 999px; padding: 8px 28px; box-shadow: 0 4px 0 #1D2133; animation: mBreath 1.8s ease-in-out infinite; }
@keyframes mBreath { 0%, 100% { transform: scale(1); box-shadow: 0 4px 0 #1D2133, 0 0 0 0 rgba(255,255,255,.7); } 50% { transform: scale(1.06); box-shadow: 0 4px 0 #1D2133, 0 0 0 10px rgba(255,255,255,0); } }

/* 選遊戲 */
.m-games.three .m-game { width: min(300px, 30vw); }
.m-games { display: flex; gap: 16px; justify-content: center; align-items: stretch; flex-wrap: wrap; padding-top: 4px; }
.m-game { width: min(330px, 44vw); min-width: 200px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; }
.m-game h3 { margin: 0; font-size: 22px; }
.m-game canvas { border-radius: 12px; background: #9ED97A; border: 2.5px solid #1D2133; width: 100%; height: auto; }
.m-game.soon { background: #EDEFF5; border-style: dashed; cursor: default; box-shadow: none; }
.m-game.soon canvas { background: #DDE2EE; }
.m-dock { display: flex; gap: 14px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.m-round { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid #1D2133; background: #fff; border-radius: 18px; padding: 8px 12px 6px; box-shadow: 0 4px 0 #1D2133; font-weight: 700; font-size: 14px; min-width: 76px; }
.m-round .ic { width: 30px; height: 30px; }
.m-badge { position: absolute; top: -8px; right: -8px; background: #EE4B3E; color: #fff; border: 2px solid #1D2133; border-radius: 999px; font-size: 12px; padding: 0 6px; font-weight: 700; }

/* 鋪路餐車大廳 */
.m-hub { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr); gap: 12px; height: 100%; min-height: 0; }
.m-map { padding: 8px 10px 10px; display: flex; flex-direction: column; min-height: 0; }
.m-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.m-tab { border: 2.5px solid #1D2133; border-radius: 999px; background: #fff; padding: 4px 11px; font-weight: 700; font-size: 14px; }
.m-tab.on { background: #FFD84A; box-shadow: 0 3px 0 #1D2133; }
.m-tab .n { font-weight: 400; font-size: 11px; opacity: .7; margin-left: 3px; }
.m-path { position: relative; flex: 1; min-height: 190px; border-radius: 12px; overflow: hidden; border: 2.5px solid #1D2133; }
.m-path canvas.bgc { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; padding: 0; }
.m-node .dot { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #1D2133; background: #FFD84A; box-shadow: 0 4px 0 #1D2133; display: grid; place-items: center; font-weight: 700; font-size: 20px; }
.m-node.done .dot { background: #7ED957; }
.m-node.lock .dot { background: #C9CED9; }
.m-node .stars { display: flex; gap: 0; }
.m-node.boss .dot { width: 68px; height: 68px; background: #E5443A; box-shadow: 0 5px 0 #1D2133, 0 0 0 5px rgba(255,201,40,.55); }
.m-node.boss.done .dot { background: #A55EEA; }
.m-node.boss.lock .dot { background: #9AA0B4; }
.m-node.boss .dot .sk { width: 52px; height: 52px; }
.m-node .crown { position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-8deg); z-index: 2; }
.m-node .crown .ic { width: 34px; height: 22px; }
.m-node.cur .dot { animation: mNodePulse 1.4s ease-in-out infinite; }
@keyframes mNodePulse { 50% { box-shadow: 0 4px 0 #1D2133, 0 0 0 8px rgba(255,255,255,.55); } }
.m-path[data-biome=night] .m-node .nm { background: rgba(29,33,51,.8); color: #FFF6E0; }
.m-node .stars .ic { width: 16px; height: 16px; }
.m-node .nm { font-size: 12px; font-weight: 700; background: rgba(255,255,255,.85); border-radius: 8px; padding: 0 6px; white-space: nowrap; }
.m-node .gift { position: absolute; top: -12px; right: -18px; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; animation: mBob 1.4s ease-in-out infinite; }
.m-node .gift .ic { width: 28px; height: 28px; }
@keyframes mBob { 50% { transform: translateY(-3px) rotate(6deg); } }
.m-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.m-side .m-btn { justify-content: flex-start; text-align: left; padding: 8px 12px; }
.m-side .m-btn span.t { display: flex; flex-direction: column; line-height: 1.15; }
.m-join { padding: 8px 10px; }
.m-join .m-row { flex-wrap: nowrap; }

/* 衣櫃 */
.m-closet { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(0, 1.6fr); gap: 12px; height: 100%; min-height: 0; }
.m-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; min-height: 0; overflow: auto; }
.m-stage canvas { max-width: 100%; }
.m-stage .lbl { font-weight: 700; min-height: 1.3em; text-align: center; line-height: 1.3; }
/* 衣櫃左欄高度固定、內容超過就捲:子元素一律不壓縮(.lbl 的 min-height 會蓋掉 flex 的自動最小高度,說明字換行時第二行會壓到顏色鈕) */
.m-stage > * { flex-shrink: 0; }
.m-stage .lbl .sub { display: block; font-size: 12px; font-weight: 700; color: #6A6F80; line-height: 1.3; margin-top: 1px; }
.m-swatch { display: flex; gap: 8px; }
.m-swatch button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #1D2133; }
.m-swatch button.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1D2133; }
.m-wardrobe { display: flex; flex-direction: column; min-height: 0; padding: 8px 10px; }
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; overflow: auto; padding: 4px 2px 8px; min-height: 0; flex: 1; align-content: start; grid-auto-rows: max-content; } /* 件數少(眼睛 8 件)時不要把一排卡片拉成整欄高 */
.m-item { position: relative; border: 2.5px solid #1D2133; border-radius: 12px; background: #fff; padding: 4px 3px 5px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center; }
.m-item .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0 0 9px 9px; }
.m-item .src { font-weight: 400; font-size: 10.5px; color: #5A5F70; }
.m-item.lock { background: #EEF0F5; }
.m-item.on { background: #FFF3C4; box-shadow: 0 0 0 3px #FFD84A inset; }
.m-item.on::after { content: '✓'; position: absolute; top: 2px; right: 5px; font-size: 15px; color: #27A85F; }
.m-item.sel { outline: 3px solid #4B7BEC; outline-offset: 1px; }
/* 衣櫃分類 + 外觀用在哪(2026-10,ui.js SLOT_CATS):分類鍵兩行(名字 + 用在哪)、卡片左上角小標、預覽 / 扭蛋結果的一整行 */
.m-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; flex: none; min-width: 0; }
.m-cat { display: inline-flex; align-items: center; gap: 4px; border: 2.5px solid #1D2133; border-radius: 12px; background: #fff; padding: 2px 8px 2px 5px; font-weight: 700; min-height: 44px; text-align: left; flex: none; color: #1D2133; }
.m-cat .ic { flex: none; }
.m-cat .tx { display: flex; flex-direction: column; line-height: 1.15; }
.m-cat b { font-size: 14px; white-space: nowrap; }
.m-cat small { font-size: 10.5px; font-weight: 700; color: #6A6F80; white-space: nowrap; }
.m-cat .n { font-weight: 400; font-size: 10px; opacity: .7; margin-left: 3px; }
.m-cat.on { background: #FFD84A; box-shadow: 0 3px 0 #1D2133; }
.m-cat.u-road small, .m-use.u-road, .m-useline.u-road { color: #A85A12; }
.m-cat.u-ghost small, .m-use.u-ghost, .m-useline.u-ghost { color: #5E43B8; }
.m-cat.u-room small, .m-use.u-room, .m-useline.u-room { color: #B5306F; }
.m-cat.on small { color: #4A3D00; }
.m-use { position: absolute; left: 3px; top: 3px; z-index: 1; display: inline-flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 700; line-height: 1; padding: 1px 5px 1px 2px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1.5px solid #C3C8D4; color: #6A6F80; pointer-events: none; white-space: nowrap; }
.m-use.u-road { border-color: #E58A2E; background: #FFF1DE; }
.m-use.u-ghost { border-color: #8E6BE8; background: #F1EBFF; }
.m-use.u-room { border-color: #E5559A; background: #FFE8F3; }
.m-useline { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 3px 11px 3px 6px; border-radius: 999px; background: #EEF0F5; color: #4A4F60; border: 2px solid #C3C8D4; max-width: 100%; }
.m-useline.u-road { background: #FFF1DE; border-color: #E58A2E; }
.m-useline.u-ghost { background: #F1EBFF; border-color: #8E6BE8; }
.m-useline.u-room { background: #FFE8F3; border-color: #E5559A; }
.m-res { position: relative; }

/* 扭蛋 */
.m-gacha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr); gap: 12px; height: 100%; min-height: 0; }
.m-machine { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; gap: 6px; min-height: 0; }
.m-gside { display: flex; flex-direction: column; gap: 8px; }
.m-pity { padding: 8px 10px; font-size: 14px; }
.m-pbar { height: 10px; border-radius: 6px; background: #E4DCC8; border: 2px solid #1D2133; overflow: hidden; margin: 3px 0 6px; }
.m-pbar i { display: block; height: 100%; background: #4B7BEC; }
.m-pbar.leg i { background: #F7B731; }
.m-note { font-size: 12px; color: #5A5F70; text-align: center; }
.m-reelwrap { position: fixed; inset: 0; z-index: 40; background: rgba(23,26,40,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.m-reelwrap canvas { max-width: 100vw; }
.m-reelwrap > .m-btn[data-t=skip] { position: absolute; right: 14px; bottom: 14px; }
.m-results { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(760px, 94vw); }
.m-res { border-radius: 12px; border: 2.5px solid #1D2133; background: #2A2F45; color: #fff; padding: 4px 2px 6px; display: flex; flex-direction: column; align-items: center; font-size: 11.5px; font-weight: 700; text-align: center; opacity: 0; transform: scale(.6) rotateY(80deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.m-res.show { opacity: 1; transform: none; }
.m-res .tag { font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 6px; margin-top: 2px; }
.m-res .tag.new { background: #FFD84A; color: #1D2133; }
.m-res .tag.dup { background: #39405C; color: #BFE3F5; }

/* 彈窗 */
.m-modal { position: fixed; inset: 0; z-index: 60; background: rgba(29,33,51,.55); display: grid; place-items: safe center; padding: 12px; overflow: auto; }
.m-mcard { position: relative; background: #FFF6E0; border: 3px solid #1D2133; border-radius: 20px; box-shadow: 0 8px 0 #1D2133; padding: 14px 16px; max-width: min(640px, 96vw); max-height: calc(94vh / (var(--fs, 1) * var(--ui, 1))); max-height: calc(94dvh / (var(--fs, 1) * var(--ui, 1))); overflow: auto; /* 卡片有 zoom(大螢幕放大),vh 也會被放大 → 除回去,不然超出畫面、頂端被切掉又捲不動 */ width: 100%; animation: mPop .28s cubic-bezier(.3,1.6,.5,1); }
.m-mcard h3 { margin: 0 0 8px; font-size: 21px; padding-right: 34px; }
@keyframes mPop { from { transform: scale(.7); opacity: 0; } }
.m-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #1D2133; background: #fff; font-size: 22px; line-height: 1; padding: 0; }
.m-dark .m-mcard { background: #262B42; color: #fff; }
.m-dark .m-x { background: #39405C; color: #fff; }
.m-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 8px; }
.m-table th, .m-table td { border-bottom: 1.5px solid rgba(29,33,51,.15); padding: 5px 6px; text-align: left; }
.m-table td.r, .m-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.m-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; border: 1.5px solid #1D2133; vertical-align: -1px; }
.m-mini { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.m-mini span { font-size: 12px; background: #fff; border: 1.5px solid rgba(29,33,51,.25); border-radius: 8px; padding: 1px 6px; }
.m-rules { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.m-toast { position: fixed; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 56px)); transform: translate(-50%, -20px); opacity: 0; z-index: 90; background: #1D2133; color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; transition: .25s; pointer-events: none; max-width: 92vw; text-align: center; }
.m-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 成就 */
.m-achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.m-ach { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border: 2.5px solid #1D2133; border-radius: 14px; background: #fff; align-items: center; }
.m-ach.done { background: #E9F9DF; }
.m-ach b { font-size: 15px; }
.m-ach .d { font-size: 12.5px; color: #5A5F70; grid-column: 1; }
.m-ach .rw { grid-row: 1 / span 3; grid-column: 2; display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 700; }
.m-ach .pb { grid-column: 1; height: 9px; border-radius: 6px; background: #E4DCC8; border: 1.5px solid #1D2133; overflow: hidden; }
.m-ach .pb i { display: block; height: 100%; background: #7ED957; }
.m-ach .pv { font-size: 11px; color: #5A5F70; }

/* 設定 */
.m-set { max-width: 560px; margin: 0 auto; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.m-set label { font-weight: 700; }
.m-set input[type=range] { width: 100%; accent-color: #EE4B3E; }
.m-seg { justify-self: start; display: inline-flex; border: 2.5px solid #1D2133; border-radius: 999px; overflow: hidden; }
.m-seg button { border: 0; background: #fff; padding: 5px 14px; font-weight: 700; }
.m-seg button.on { background: #FFD84A; }

/* 獎勵彈窗 */
.m-rw { text-align: center; }
.m-rw .cols { display: flex; gap: 14px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.m-rw .col { display: flex; flex-direction: column; align-items: center; min-width: 220px; flex: 1; max-width: 360px; }
.m-rw .lines { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; width: 100%; }
.m-rw .ln { display: flex; justify-content: space-between; background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 10px; padding: 2px 10px; font-weight: 700; opacity: 0; transform: translateX(-20px); transition: .3s; }
.m-rw .ln.show { opacity: 1; transform: none; }
.m-rw .items { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.m-rw .it { border: 3px solid #1D2133; border-radius: 16px; background: #fff; padding: 6px 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; box-shadow: 0 0 0 4px #20BF6B55; }
.m-rw .total { font-size: 21px; font-weight: 700; margin: 4px 0 0; }
.m-rw h3 { margin-bottom: 4px; padding: 0 34px; }
.m-rw .m-rwteam { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 8px; padding: 3px 12px; border-radius: 999px; background: #E6F7EC; border: 2px solid #20BF6B; color: #14532D; font-weight: 700; font-size: 14px; }
.m-rw .achs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0; }
.m-rw .achs span { background: #E9F9DF; border: 2px solid #1D2133; border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 13px; }

/* 等人畫面的每個人 */
#slots .slot.meta { padding: 2px 4px 6px; min-height: 96px; }
#slots .slot.meta canvas { margin: 0 auto; display: block; }
#slots .slot.meta span { font-size: 12px; }

@media (max-height: 460px) {
  .m-bar { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .m-bar h2 { font-size: 19px; }
  .m-back { width: 38px; height: 38px; }
  .m-chip { font-size: 14px; padding: 3px 9px 3px 7px; }
  .m-game { padding: 8px 10px 10px; }
  .m-game h3 { font-size: 19px; }
  .m-dock { margin-top: 10px; gap: 10px; }
  .m-round { padding: 5px 10px 4px; min-width: 66px; font-size: 13px; }
  .m-round .ic { width: 24px; height: 24px; }
  .m-side .m-btn { padding: 6px 10px; font-size: 15px; }
  .m-node .dot { width: 46px; height: 46px; font-size: 17px; }
  .m-btn { padding: 8px 12px; font-size: 16px; }
}
@media (max-width: 640px) {
  .m-hub, .m-closet, .m-gacha { grid-template-columns: 1fr; height: auto; }
  .m-path { min-height: 240px; }
  .m-grid { max-height: none; overflow: visible; }
  .m-chip.name { display: none; }
  .m-chip .lbl { display: none; }
  .m-bar { gap: 6px; }
  .m-game { width: 100%; }
}

/* ---- 第二輪 ---- */
.m-devtag { font-size: 11px; font-weight: 700; background: #FF9F43; color: #fff; border: 2px solid #1D2133; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 3px; }
#slots .slot.meta.clickable { cursor: pointer; }
#slots .slot.meta.clickable:hover { background: #FFF3C4; }
/* 每日任務 */
.m-quests h3 { margin-bottom: 2px; }
.m-quest { display: flex; gap: 10px; align-items: center; background: #fff; border: 2.5px solid #1D2133; border-radius: 14px; padding: 8px 10px; margin-top: 8px; }
.m-quest.done { background: #FFF3C4; }
.m-quest.claimed { background: #EEF0F5; opacity: .75; }
.m-quest .qt { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; }
.m-quest .qt b { grid-column: 1 / span 2; }
.m-quest .pb { height: 10px; border-radius: 6px; background: #E4DCC8; border: 1.5px solid #1D2133; overflow: hidden; }
.m-quest .pb i { display: block; height: 100%; background: #7ED957; }
.m-quest .pv { font-size: 12px; color: #5A5F70; }
.m-quest .m-btn { padding: 6px 10px; font-size: 15px; }
.m-qdone { font-weight: 700; color: #27A85F; white-space: nowrap; }
/* 名片 */
.m-namecard .nc-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.m-namecard .nc-top canvas { background: radial-gradient(circle at 50% 70%, #FFF3C4, #FFE08A); border: 3px solid #1D2133; border-radius: 16px; }
.m-namecard .nc-info { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 3px; }
.m-namecard .nc-name { font-size: 26px; font-weight: 700; }
.m-namecard .nc-fav { display: flex; align-items: center; gap: 5px; font-size: 14px; background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 10px; padding: 3px 8px; }
.m-namecard .nc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-namecard .nc-stats div { background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 10px; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; }
.m-namecard .nc-stats b { font-size: 20px; }
.m-namecard .nc-stats span { font-size: 12px; color: #5A5F70; }
/* 解鎖演出 */
.m-cele { position: fixed; inset: 0; z-index: 80; cursor: pointer; transition: opacity .2s; }
.m-cele.out { opacity: 0; }
.m-cele canvas { position: absolute; inset: 0; }
.m-cele-txt { position: absolute; left: 0; right: 0; top: 7%; text-align: center; color: #fff; pointer-events: none; animation: mPop .4s cubic-bezier(.3,1.6,.5,1) .15s both; }
.m-cele-txt .k { font-weight: 700; font-size: clamp(16px, 4vh, 22px); color: #FFD84A; }
.m-cele-txt .t { font-weight: 700; font-size: clamp(30px, 9vh, 56px); -webkit-text-stroke: 3px #1D2133; paint-order: stroke fill; text-shadow: 0 5px 0 #1D2133; }
.m-cele-txt .s { font-weight: 700; font-size: 16px; margin-top: 2px; }
.m-cele-tap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-weight: 700; font-size: 14px; animation: mPulse 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes mPulse { 50% { opacity: .35; } }
/* 套裝 */
.m-presets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.m-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2.5px solid #1D2133; border-radius: 12px; background: #fff; padding: 3px 4px 4px; font-size: 11px; font-weight: 700; }
.m-preset .bt { display: flex; gap: 3px; }
.m-preset .bt button { border: 2px solid #1D2133; border-radius: 8px; background: #FFD84A; font-size: 11px; font-weight: 700; padding: 1px 6px; }
.m-preset .bt button.s { background: #fff; }
.m-preset .bt button[disabled] { opacity: .4; }
/* 拍照亭 */
.m-photo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 12px; height: 100%; min-height: 0; }
.m-photo .stage { padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.m-photo .stage canvas { max-width: 100%; max-height: 100%; border-radius: 12px; border: 3px solid #1D2133; touch-action: none; cursor: grab; }
.m-photo .ctl { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0; }
.m-photo .lbl { font-size: 12px; font-weight: 700; color: #5A5F70; }
.m-photo .chips { display: flex; gap: 5px; flex-wrap: wrap; }
.m-photo .chips button { border: 2.5px solid #1D2133; border-radius: 999px; background: #fff; padding: 3px 10px; font-weight: 700; font-size: 13px; }
.m-photo .chips button.on { background: #FFD84A; box-shadow: 0 2px 0 #1D2133; }
.m-photo .who button { display: inline-flex; align-items: center; gap: 4px; }
.m-photo .who button i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1D2133; display: inline-block; }
.m-photo .cols { display: flex; gap: 6px; flex-wrap: wrap; }
.m-photo .cols button { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #1D2133; }
.m-photo .cols button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1D2133; }
.m-photo .slotrow { display: grid; grid-template-columns: 3.2em 28px 1fr 28px; gap: 4px; align-items: center; font-size: 13px; }
.m-photo .slotrow button { width: 28px; height: 26px; border: 2px solid #1D2133; border-radius: 8px; background: #fff; font-weight: 700; padding: 0; }
.m-photo .slotrow span.v { text-align: center; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-photo .shoot { font-size: 20px; }
.m-flash { position: fixed; inset: 0; background: #fff; z-index: 70; pointer-events: none; animation: mFlash .45s ease-out forwards; }
@keyframes mFlash { from { opacity: .95; } to { opacity: 0; } }
@media (max-width: 640px) { .m-photo { grid-template-columns: 1fr; height: auto; } }

@media (max-width: 640px) { .m-games.three .m-game { width: 100%; } }

/* ---- 第三輪:選遊戲頁 ---- */
canvas.fitw { width: 100% !important; height: auto !important; display: block; }
.m-game canvas { max-width: 100%; }
.m-games.three .m-game { width: auto; flex: 1 1 0; min-width: 0; max-width: 420px; }
.m-game h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-themetag { font-size: 11px; font-weight: 700; background: #FFD84A; border: 2px solid #1D2133; border-radius: 999px; padding: 0 7px; }
[data-screen=games] { background: transparent; }
.m-gamesmain { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
canvas.m-walkers { position: absolute; left: 0; bottom: 0; z-index: 0; pointer-events: none; }
.m-hubrow { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 12px; max-width: 1060px; width: 100%; margin: 0 auto; }
.m-quick { justify-content: flex-start; gap: 10px; background: #7ED957; font-size: 20px; padding: 8px 14px; }
.m-quick .play { width: 40px; height: 40px; border-radius: 50%; background: #27A85F; border: 3px solid #1D2133; display: grid; place-items: center; flex: none; animation: mBreath 1.8s ease-in-out infinite; }
.m-quick .play .ic { width: 22px; height: 22px; margin-left: 3px; }
.m-quick .t { display: flex; flex-direction: column; text-align: left; line-height: 1.15; min-width: 0; }
.m-quick small { font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-news { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-width: 0; }
.m-news .nb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; text-align: left; padding: 0; }
.m-news .nb.in { animation: mSlide .35s ease-out; }
@keyframes mSlide { from { opacity: 0; transform: translateX(24px); } }
.m-news .ico { width: 46px; height: 46px; display: grid; place-items: center; background: #fff; border: 2px solid #1D2133; border-radius: 12px; flex: none; }
.m-news .ico .ic { width: 30px; height: 30px; }
.m-news .nb canvas { border-radius: 12px; border: 2px solid #1D2133; background: #9ED97A; flex: none; }
.m-news .tx { display: flex; flex-direction: column; min-width: 0; }
.m-news .tx b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-news .tx small { font-size: 12px; color: #5A5F70; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-news .dots { display: flex; gap: 4px; flex: none; }
.m-news .dots button { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #1D2133; background: #fff; padding: 0; }
.m-news .dots button.on { background: #1D2133; }
.emo { font-size: 26px; line-height: 1; }
.m-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-modes .m-btn { justify-content: flex-start; text-align: left; }
.m-modes .mi { font-size: 24px; }
.m-modes .t { display: flex; flex-direction: column; line-height: 1.2; }
.m-themebar { background: #FFF3C4; border: 2px solid #1D2133; border-radius: 12px; padding: 4px 10px; flex-wrap: wrap; }
@media (max-height: 460px) {
  .m-gamesmain { gap: 7px; }
  .m-game { padding: 6px 8px 8px; gap: 3px; }
  .m-game h3 { font-size: 17px; }
  .m-game .m-muted { font-size: 12px; }
  .m-quick { font-size: 17px; padding: 5px 10px; }
  .m-quick .play { width: 32px; height: 32px; }
  .m-news .ico, .m-news .nb canvas { width: 38px !important; height: 38px !important; }
}
@media (max-width: 640px) {
  .m-games.three .m-game { max-width: none; flex: none; width: 100%; }
  .m-hubrow { grid-template-columns: 1fr; }
  .m-modes { grid-template-columns: 1fr; }
}

@media (min-height: 601px) and (min-width: 641px) {
  .m-gamesmain { gap: 16px; padding-top: 10px; }
  .m-hubrow { max-width: 1300px; }
  .m-game h3 { font-size: 24px; }
}
@media (max-width: 640px) {
  .m-game .m-muted { display: none; }
  .m-game h3 { font-size: 18px; }
  .m-dock { gap: 8px; }
  .m-round { min-width: 0; flex: 1 1 30%; padding: 6px 4px 4px; font-size: 12px; }
}

canvas.m-walkers.inflow { position: static; flex: none; margin: -4px -12px 0; width: calc(100% + 24px) !important; }
@media (max-width: 640px) { .m-game.soon[data-t=game-soon] canvas { display: none; } .m-game.soon[data-t=game-soon] h3::after { content: ' ?'; } }

/* 第三輪:逐頁截圖修正 */
.m-rw .ln > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.m-mcard .m-row { flex-wrap: wrap; }
[data-screen=settings] .m-main { display: flex; flex-direction: column; }
[data-screen=settings] .m-set { margin: auto; }
@media (max-width: 640px) {
  .m-set { grid-template-columns: 1fr; gap: 4px 0; }
  .m-set label { margin-top: 6px; }
  .m-path { min-height: 340px; }
}

/* ---- 第四輪 ---- */
.m-main, .m-mcard, .m-bar { zoom: calc(var(--fs, 1) * var(--ui, 1)); } /* --ui:大螢幕等比放大(1280×720 為 1) */
html.pg-reduce *, html.pg-reduce *::before, html.pg-reduce *::after { animation: none !important; transition: none !important; }
.m-sethead { grid-column: 1 / -1; font-size: 16px; border-top: 2px dashed rgba(29,33,51,.2); padding-top: 8px; }
.m-shop { display: flex; flex-direction: column; gap: 10px; max-width: 1100px; margin: 0 auto; }
.m-rot, .m-packs { padding: 10px 12px; }
.m-rotgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.m-rotitem { padding: 6px 4px 8px; }
.m-rotitem .bt { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 3px; }
.m-rotitem .m-btn { padding: 3px 8px; font-size: 13px; }
.m-rotitem s { opacity: .55; font-size: 11px; }
.m-packgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 6px; }
.m-pack { background: #fff; border: 2.5px solid #1D2133; border-radius: 14px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-pack canvas { background: linear-gradient(#FFE8F2, #FFF6E0); border-radius: 10px; }
.m-pack .m-btn { padding: 4px 10px; font-size: 14px; }
.m-pack.sel { outline: 4px solid #FFD84A; outline-offset: 1px; }
.m-pack b { display: flex; align-items: center; gap: 5px; }
.m-pdot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #1D2133; display: inline-block; }
.m-pdesc { font-size: 12px; color: #5A5F70; text-align: center; line-height: 1.3; min-height: 2.6em; }
.m-prule { font-size: 12.5px; font-weight: 700; background: #FFF6D6; border: 2px dashed #E0B23A; border-radius: 10px; padding: 4px 10px; margin: 4px 0; }
.m-packpick { align-items: center; gap: 6px; }
.m-packpick > canvas { border: 2.5px solid #1D2133; border-radius: 12px; max-width: 100%; }
.m-pinfo { font-size: 13.5px; text-align: center; max-width: 440px; }
.m-packmodal .m-mcard { max-width: min(760px, 96vw); }
.m-packpick > .m-packgrid { align-self: stretch; }
.m-phead { position: sticky; top: -14px; z-index: 2; background: #FFF6E0; padding: 4px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; border-bottom: 2px dashed #E6D3A8; }
.m-phead > canvas { border: 2.5px solid #1D2133; border-radius: 12px; max-width: 100%; }
.m-dark .m-phead { background: #262B42; }
@media (max-height: 520px) { .m-phead { position: static; } }
.m-packbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; font-weight: 700; }
.m-packbar span { background: #FFD84A; border: 2px solid #1D2133; border-radius: 999px; padding: 2px 10px; }
.m-season { display: flex; flex-direction: column; gap: 10px; }
.m-shead { display: flex; align-items: center; gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
.m-shead .lv { width: 58px; height: 58px; border-radius: 50%; background: #FFC928; border: 3px solid #1D2133; display: grid; place-items: center; font-size: 26px; font-weight: 700; box-shadow: 0 4px 0 #1D2133; flex: none; }
.m-shead .info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.m-trackwrap { overflow-x: auto; padding: 8px; }
.m-track { display: flex; gap: 6px; width: max-content; }
.m-track .lab { width: 62px; text-align: center; display: grid; grid-template-rows: 20px 88px 70px; gap: 6px; align-items: center; font-size: 13px; position: sticky; left: 0; background: #FFF6E0; z-index: 1; padding-right: 4px; }
.m-track .lab .paid { color: #A55EEA; font-size: 11px; line-height: 1.2; }
.m-track .col { display: grid; grid-template-rows: 20px 88px 70px; gap: 6px; width: 72px; text-align: center; }
.m-track .col .n { font-weight: 700; font-size: 13px; background: #E4DCC8; border-radius: 999px; }
.m-track .col.reach .n { background: #FFC928; }
.m-track .col.cur .n { background: #FF7AA8; color: #fff; }
.m-track .free, .m-track .paid { background: #fff; border: 2px solid #1D2133; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; font-size: 12px; font-weight: 700; }
.m-track .free.got { background: #E9F9DF; }
.m-track .free .m-btn { padding: 1px 10px; font-size: 12px; }
.m-track .free .ok { color: #27A85F; font-weight: 700; }
.m-track .paid { background: #F1EAFE; border-style: dashed; opacity: .85; }
.m-track .paid .lock { position: absolute; right: 3px; top: 3px; }
.m-track .paid .lock .ic { width: 14px; height: 14px; }
.m-track .rw { display: flex; align-items: center; gap: 2px; }
.m-onboard .m-mcard { max-width: 560px; }
.m-onboard .ob-body { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; min-height: 130px; }
.m-onboard .ob-body > .m-col { flex: 1; min-width: 220px; }
.m-onboard .ob-foot { margin-top: 10px; align-items: center; }
.m-onboard .ob-dots { display: flex; gap: 5px; }
.m-onboard .ob-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E4DCC8; border: 1.5px solid #1D2133; }
.m-onboard .ob-dots i.on { background: #1D2133; }
.m-onboard .ob-gifts { display: flex; gap: 8px; }
.m-onboard .ob-gifts .m-item { width: 88px; }
.m-onboard .ob-game { display: flex; gap: 10px; align-items: center; background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 12px; padding: 6px 10px; font-size: 13px; }
.m-recent .m-rp { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 12px; padding: 3px 8px; margin-top: 4px; }
.m-recent .m-rp .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-recent .m-rp small { color: #5A5F70; }
.m-recent .m-chip { font-size: 12px; padding: 2px 8px; box-shadow: 0 2px 0 #1D2133; }
@media (max-width: 640px) {
  .m-rotgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-onboard .ob-body canvas { display: none; }
}
@media (max-height: 460px) {
  .m-track .lab, .m-track .col { grid-template-rows: 18px 74px 60px; }
  .m-shead .lv { width: 46px; height: 46px; font-size: 20px; }
}

/* ---- 第五輪:派對房、表情輪盤 ---- */
.m-round.party { background: #FFD84A; }
.p-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 12px; }
.p-left, .p-right, .p-hist { padding: 10px 12px; }
.p-top { display: flex; gap: 12px; align-items: center; }
.p-qr { width: 118px; height: 118px; flex: none; background: #fff; border: 3px solid #1D2133; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.p-qr svg { width: 108px; height: 108px; }
.p-top .code { font-size: 38px; font-weight: 700; letter-spacing: .16em; line-height: 1; }
.p-top .url { font-size: 12px; color: #5A5F70; word-break: break-all; margin: 4px 0; }
.p-packline { font-weight: 700; font-size: 13px; color: #C0306A; min-height: 1em; }
.p-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.p-slot { position: relative; border: 2.5px solid #1D2133; border-radius: 14px; background: #fff; padding: 2px 2px 6px; display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 700; min-width: 0; }
.p-slot .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-slot.empty { border-style: dashed; opacity: .6; background: transparent; }
.p-slot.off { opacity: .55; }
.p-slot .bb { position: absolute; top: -34px; left: 50%; transform: translate(-50%, 8px) scale(.6); opacity: 0; transition: .25s cubic-bezier(.3,1.6,.5,1); pointer-events: none; z-index: 3; }
.p-slot .bb.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.p-right h3 { margin: 0 0 6px; }
.p-modes { margin: 8px 0; }
.p-right select { width: 100%; }
.p-go { font-size: 19px; }
.p-wait { display: grid; place-items: center; height: 90px; }
.p-wait .emo { font-size: 44px; animation: mBreath 1.6s ease-in-out infinite; }
.p-hist { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.p-hrow { display: flex; gap: 8px; align-items: center; background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 10px; padding: 3px 10px; font-size: 14px; }
.p-hrow .n { width: 22px; height: 22px; border-radius: 50%; background: #FFD84A; border: 2px solid #1D2133; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.p-hrow .l { flex: 1; font-weight: 700; min-width: 0; }
.p-hrow .r { color: #C98A1A; font-weight: 700; white-space: nowrap; }
.p-hsq { font-weight: 700; color: #8A5A00; }
.pg-wheel { display: flex; flex-direction: column; gap: 8px; }
.pg-says { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pg-says button { border: 2.5px solid #1D2133; border-radius: 12px; background: #fff; padding: 7px 6px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 3px 0 #1D2133; }
.pg-says b { color: #8A8D99; font-size: 11px; margin-right: 4px; }
.pg-emos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.pg-emos button { border: 2.5px solid #1D2133; border-radius: 12px; background: #FFF3C4; padding: 2px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 #1D2133; }
.pg-says button:active, .pg-emos button:active { transform: translateY(2px); box-shadow: 0 1px 0 #1D2133; }
.pg-bubble { background: #fff; border: 2.5px solid #1D2133; border-radius: 14px; padding: 4px 10px; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 3px 0 #1D2133; position: relative; color: #1D2133; }
.pg-bubble.emote { padding: 0 2px; border-radius: 50%; background: #FFF6E0; }
.pg-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -7px; border: 7px solid transparent; border-top-color: #1D2133; border-bottom: 0; }
.pg-backparty { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 90; font-size: 20px; background: #FFD84A; animation: mBreath 1.8s ease-in-out infinite; }
@media (max-width: 640px) {
  .p-grid { grid-template-columns: 1fr; }
  .p-top .code { font-size: 30px; }
  .p-qr { width: 96px; height: 96px; } .p-qr svg { width: 88px; height: 88px; }
  .pg-says { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-emos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 460px) {
  .p-qr { width: 92px; height: 92px; } .p-qr svg { width: 84px; height: 84px; }
  .p-top .code { font-size: 30px; }
  .p-slots { margin-top: 6px; }
}
.p-slot.me { background: #FFF3C4; box-shadow: 0 0 0 3px #FFD84A inset; }
.ic.cv { vertical-align: -.22em; display: inline-block; }
.p-hrow .r .ic { width: 14px; height: 14px; }
/* 全站靜音鈕(喇叭,跟遊戲內音樂開關同一個 rt-muted) */
.m-chip.m-sound { padding: 5px 9px; min-width: 44px; justify-content: center; }
.m-chip.m-sound .ic { vertical-align: 0; }
.m-chip.m-sound.off { background: #FFD6DE; }
.m-tcorner { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
/* 派對房:選項多(鬼校舍 5 關 + 隨機)時排成 3 欄的格子,不要擠成一個字一行 */
.m-seg.p-modes.many { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); border-radius: 14px; max-width: 100%; }
.m-seg.p-modes.many button { white-space: normal; padding: 5px 8px; min-width: 0; line-height: 1.2; border-right: 1.5px solid rgba(29,33,51,.25); border-bottom: 1.5px solid rgba(29,33,51,.25); }
/* 設定:政策連結、刪除帳號清單 */
.m-link { color: #4B5BD6; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-right: 14px; }
.m-dellist { margin: 4px 0 6px; padding-left: 20px; line-height: 1.6; }

/* Google 登入合併確認:兩欄對照 */

/* 選遊戲:高度夠的畫面把內容(卡片 + 快速開始 + 選單 + 花園步道)當一組垂直置中 */
.m-gamesmain.centered { justify-content: safe center; }
.m-gamesmain.centered canvas.m-walkers.path { position: static; flex: none; align-self: center; max-width: 100%; margin-top: 2px; }

/* 標題畫面也跟著大螢幕等比放大 */
.m-title > * { zoom: var(--ui, 1); }

/* 第九輪:寬螢幕 / 逐頁補豐富度 */
.m-starcard { display: flex; gap: 10px; align-items: center; padding: 8px 12px; }
.m-starcard .tx { flex: 1; display: grid; gap: 3px; min-width: 0; }
.m-starcard .sum { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.m-starcard .sum .ic { width: 22px; height: 22px; }
.m-achhead { display: flex; gap: 12px; align-items: center; padding: 8px 14px; margin: 0 0 8px; }
.m-achhead .tx { flex: 1; display: grid; gap: 4px; }
.m-achhead b { font-size: 17px; }
.m-feat-card { display: grid; gap: 4px; padding: 8px 10px; }
.m-featgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; margin-top: 4px; }
.m-feat { border: 2.5px solid #C9CED9; border-radius: 12px; background: #F4F6FA; padding: 2px; display: grid; place-items: center; }
.m-feat.own.legend { border-color: #FF9F1C; background: #FFF3C4; }
.m-feat.own.epic { border-color: #A78BFA; background: #F1EBFF; }
.m-feat { position: relative; }
/* 剛抽到(或換到)的大獎:格子彈一下 + 一圈亮光 + 斜斜掃過的光 */
.m-feat.pop { animation: mFeatPop .9s cubic-bezier(.3,1.6,.5,1) both; z-index: 1; }
.m-feat.pop::before { content: ''; position: absolute; inset: -4px; border-radius: 14px; pointer-events: none; animation: mFeatRing 1.6s ease-out 2 both; }
.m-feat.pop.legend::before { --fc: #FF9F1C; } .m-feat.pop.epic::before { --fc: #A78BFA; }
.m-feat.pop::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%) no-repeat; background-size: 250% 100%; animation: mFeatShine 1.1s ease-out .25s both; }
@keyframes mFeatPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes mFeatRing { 0% { box-shadow: 0 0 0 0 var(--fc, #FFD84A), 0 0 16px 4px var(--fc, #FFD84A); opacity: 1; } 100% { box-shadow: 0 0 0 10px transparent, 0 0 22px 8px transparent; opacity: 0; } }
@keyframes mFeatShine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .m-feat.pop, .m-feat.pop::before, .m-feat.pop::after { animation: none; } }
.m-shop.wide { display: grid; grid-template-columns: 1fr 1fr; align-items: start; max-width: 1400px; width: 100%; }
.m-seasonshow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; }
.m-sshow { display: flex; gap: 8px; align-items: center; background: #fff; border: 2.5px solid #1D2133; border-radius: 14px; padding: 6px 10px; min-width: 0; }
.m-sshow.paid { background: #FFF3C4; }
.m-sshow b { display: block; font-size: 15px; } .m-sshow small { display: block; } .m-sshow .nm { display: block; font-weight: 700; color: #8D6BE8; }
@media (max-width: 640px) { .m-seasonshow { grid-template-columns: 1fr; } .m-sshow canvas { width: 110px !important; height: auto !important; } }

/* 金幣經濟 */
.m-coinchip { position: relative; padding-bottom: 6px; }
.m-coinchip .wk { position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; border-radius: 2px; background: rgba(29,33,51,.15); overflow: hidden; }
.m-coinchip .wk b { display: block; height: 100%; background: #FFC928; }
.m-firstwin { position: absolute; right: 10px; top: -10px; background: #FFE680; border: 2px solid #1D2133; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; display: inline-flex; gap: 3px; align-items: center; box-shadow: 0 2px 0 #1D2133; animation: mBreath 1.8s ease-in-out infinite; }
.m-quick { position: relative; }
.m-buyrow { margin-top: 6px; justify-content: center; }
.m-buyrow .m-btn { font-size: 14px; padding: 5px 12px; }
.m-coinbox { background: #FFF3C4; border: 2.5px solid #1D2133; border-radius: 14px; padding: 8px 12px; display: grid; gap: 2px; margin-bottom: 6px; }
.m-coinbox .hd { display: flex; gap: 6px; align-items: center; font-size: 20px; }
.m-coinbox .hd .ic { width: 26px; height: 26px; }
.m-coinbox .cl { display: flex; justify-content: space-between; font-weight: 700; opacity: 0; transform: translateX(-8px); transition: .25s; }
.m-coinbox .cl.show { opacity: 1; transform: none; }
.m-coinbox .cl.fw { color: #C9303F; }
.m-weekq { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; font-size: 13px; font-weight: 700; background: #FFF3C4; border: 2px solid #1D2133; border-radius: 12px; padding: 4px 10px; margin: 4px 0; }
.m-weekq .m-pbar { grid-column: 1 / -1; }

/* 累積任務、累計登入月曆、輪替商店金幣格 */
.m-qback { margin: 8px 0 2px; font-weight: 700; color: #8D6BE8; font-size: 14px; }
.m-login { margin-top: 10px; background: #F0FFE8; border: 2.5px solid #1D2133; border-radius: 14px; padding: 8px 10px; display: grid; gap: 6px; }
.m-login .hd { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.m-login .strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.m-login .cell { border: 2px solid #C9CED9; border-radius: 12px; background: #fff; padding: 4px 2px; display: grid; justify-items: center; gap: 1px; font-size: 12px; font-weight: 700; }
.m-login .cell.ready { border-color: #1D2133; background: #FFE680; box-shadow: 0 3px 0 #1D2133; animation: mBreath 1.8s ease-in-out infinite; }
.m-login .cell.claimed { opacity: .6; }
.m-login .cell .rw { display: inline-flex; gap: 2px; align-items: center; }
.m-login .cell .ok { color: #27A85F; } .m-login .cell .go { color: #C9303F; }
.m-rotitem { position: relative; }
.m-rotitem.coin { background: #FFF3C4; }
.m-rotcoin { position: absolute; left: 6px; top: 6px; display: inline-flex; gap: 2px; align-items: center; font-size: 11px; font-weight: 700; background: #FFE680; border: 1.5px solid #1D2133; border-radius: 999px; padding: 0 6px; }
/* 5 款遊戲:卡片變 5 欄(手機直式照舊一張一排) */
.m-games.three.n5 .m-game, .m-games.three.n4 .m-game { max-width: 300px; }
.m-games.three.n5 .m-game h3 { font-size: 18px; }
@media (max-height: 460px) { .m-games.three.n5 .m-game .m-muted, .m-games.three.n4 .m-game .m-muted { display: none; } .m-games.three.n5 .m-game h3 { font-size: 15px; } }

/* 開場登入選擇(訪客 / Google) */
.m-authpick .m-mcard { max-width: 560px; text-align: center; display: grid; justify-items: center; gap: 4px; }
.m-authpick h3 { margin: 0; padding: 0; }
.m-authpick .ap-invite { display: inline-flex; align-items: center; gap: 6px; background: #FFD84A; border: 2px solid #1D2133; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 14px; }
.m-authpick .ap-invite .ic { width: 18px; height: 18px; flex: none; }
.m-authpick .ap-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.m-authpick .ap-opt { display: grid; justify-items: center; align-content: start; gap: 6px; background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 14px; padding: 10px 8px; }
.m-authpick .ap-guest { min-width: 180px; min-height: 42px; font-size: 16px; }
.m-authpick .ap-google { align-items: center; gap: 6px; min-height: 42px; }
.m-authpick small { font-size: 11.5px; line-height: 1.3; }
.m-authpick.busy { pointer-events: none; opacity: .7; }
@media (max-width: 560px) { .m-authpick .ap-opts { grid-template-columns: 1fr; } }
/* 登入過:用既有登入繼續(主按鈕,兩行:說明 + 身分)/ 改用 Google 或訪客 / 登出 */
.m-authpick .ap-cont { display: grid; justify-items: center; gap: 2px; width: min(100%, 380px); min-height: 58px; padding: 8px 16px; font-size: 18px; margin-top: 4px; }
.m-authpick .ap-cont-who { font-size: 13.5px; font-weight: 600; opacity: .9; max-width: 100%; overflow-wrap: anywhere; }
.m-authpick .ap-or { font-size: 12px; margin-top: 2px; }
.m-authpick .ap-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.m-authpick .ap-alt .m-btn { min-height: 40px; }
.m-leavemodal .m-mcard { max-width: 460px; }
.m-leave h3 { padding-right: 34px; }
.m-leave-note { line-height: 1.45; background: #fff; border: 2px solid rgba(29,33,51,.18); border-radius: 12px; padding: 8px 10px; }
.m-leave-note.warn { border-color: #EE4B3E; background: #FFECE8; font-weight: 600; }
.m-leave-note.safe { border-color: #4F9A34; background: #EDF8E6; }
.m-acct-who { font-weight: 700; overflow-wrap: anywhere; }
@media (max-height: 430px) { .m-authpick[data-mode=back] .m-mcard { padding-top: 10px; } .m-authpick[data-mode=back] .ap-cont { min-height: 50px; } }
@media (max-height: 430px) { .m-authpick canvas { display: none; } }

/* 碎片商店:依部位分頁(頁籤橫向捲動)、只看沒擁有的、價格 / 碎片不夠標示 */
.m-shopm .m-mcard { max-width: min(880px, 96vw); padding-top: 0; }
.m-shophead { position: sticky; top: 0; z-index: 2; background: #FFF6E0; padding: 14px 0 6px; margin: 0 -2px; box-shadow: 0 6px 6px -6px rgba(29,33,51,.25); }
.m-shoprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.m-shoptabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.m-shoptabs .m-tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; min-height: 36px; }
.m-shoptabs .m-tab.done .n { color: #1E8A4C; opacity: 1; font-weight: 700; }
.m-shopnew { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; cursor: pointer; }
.m-shopnew .box { width: 18px; height: 18px; border: 2px solid #1D2133; border-radius: 5px; background: #fff; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.m-shopnew.on { background: #FFD84A; }
.m-shopgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); margin-top: 8px; overflow: visible; }
.m-shopitem { cursor: pointer; gap: 3px; padding-bottom: 10px; }
.m-shopitem .nm { min-height: 2.3em; display: flex; align-items: center; }
.m-shopitem .m-btn { padding: 3px 10px; font-size: 13px; min-height: 32px; }
.m-shopitem.own { background: #F1FBF3; opacity: .78; }
.m-shopitem.poor .m-btn { opacity: .75; }
.m-short { color: #C0392B; font-size: 11px; font-weight: 700; }
@media (max-width: 480px) { .m-shopgrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
.m-shopm .m-x { position: sticky; top: 8px; float: right; z-index: 3; margin: 8px -4px -42px 0; }
@media (max-height: 500px) { /* 橫式手機:標頭壓扁一點,留多一點給商品 */
  .m-shophead { padding-top: 8px; }
  .m-shophead h3 { font-size: 18px; margin-bottom: 0; }
  .m-shophead > .m-muted { display: none; }
  .m-shoprow { margin: 2px 0; }
  .m-shoptabs .m-tab { min-height: 32px; padding: 2px 10px; }
}

/* ---- 開派對 / 加入派對:每一頁的上方列、標題畫面都有 ---- */
.m-bar h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-pbtns { display: flex; gap: 6px; flex: none; }
.m-pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 2.5px solid #1D2133; border-radius: 999px; padding: 4px 12px 4px 8px; font: inherit; font-weight: 700; font-size: 15px; box-shadow: 0 3px 0 #1D2133; white-space: nowrap; cursor: pointer; color: #1D2133; }
.m-pbtn.host { background: #FFD84A; }
.m-pbtn.join { background: #6FCBFF; }
.m-pbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1D2133; }
.m-pbtn .ic { width: 22px; height: 22px; }
@media (max-width: 640px) {
  /* 直式:標題列換成兩排,第二排是兩顆大按鈕 */
  .m-bar { flex-wrap: wrap; row-gap: 6px; }
  .m-bar .m-pbtns { order: 99; flex: 1 1 100%; }
  .m-bar .m-pbtn { flex: 1; font-size: 16px; padding: 6px 10px; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  /* 手機橫式:讓位子給兩顆派對按鈕(暱稱在設定頁看得到) */
  .m-bar .m-chip.name { display: none; }
  .m-bar .m-chip .lbl { display: none; }
}
.m-onboard .ob-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.m-onboard .ob-head h3 { margin: 0; padding-right: 0; }
.m-onboard .ob-join { font-size: 14px; }

/* ---- 加入派對:全螢幕輸入房號 ---- */
.m-joinscr { position: fixed; inset: 0; z-index: 80; display: flex; overflow: auto; background: linear-gradient(#D8F1FF, #FFF6E0); color: #1D2133; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); animation: jIn .2s ease-out; }
.m-joinscr .j-in { zoom: calc(var(--fs, 1) * var(--ui, 1)); margin: auto; position: relative; width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 4px 0; }
.m-joinscr .j-close { position: absolute; left: 0; top: 0; }
.m-joinscr .j-title { margin: 6px 0 0; font-size: 30px; display: flex; gap: 8px; align-items: center; text-shadow: 0 2px 0 #fff; }
.m-joinscr .j-title .ic { width: 34px; height: 34px; }
.m-joinscr .j-sub { font-size: 16px; color: #4A4F60; max-width: 420px; font-weight: 700; }
.m-joinscr .j-code { position: relative; display: flex; gap: 10px; cursor: text; margin-top: 4px; }
.m-joinscr .j-box { width: 72px; height: 88px; border: 3.5px solid #1D2133; border-radius: 16px; background: #fff; box-shadow: 0 5px 0 #1D2133; display: grid; place-items: center; font-size: 52px; font-weight: 700; line-height: 1; transition: background .15s; }
.m-joinscr .j-box.full { background: #FFF3C4; }
.m-joinscr .j-box.on { border-color: #2F80ED; box-shadow: 0 5px 0 #1D2133, 0 0 0 4px rgba(47,128,237,.35); }
.m-joinscr .j-box.on:empty::after { content: ''; width: 3px; height: 50%; background: #2F80ED; animation: jBlink 1s steps(2) infinite; }
.m-joinscr[data-state=err] .j-box { border-color: #E0445E; }
.m-joinscr .j-inp { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; padding: 0; margin: 0; background: transparent; color: transparent; caret-color: transparent; cursor: text; }
.m-joinscr .j-code.shake { animation: jShake .4s; }
.m-joinscr .j-msg { min-height: 1.4em; font-weight: 700; font-size: 16px; max-width: 460px; }
.m-joinscr .j-msg.err { color: #fff; background: #E0445E; border: 2.5px solid #1D2133; border-radius: 12px; padding: 8px 12px; box-shadow: 0 3px 0 #1D2133; }
.m-joinscr .j-msg.busy { color: #2F80ED; }
.m-joinscr .j-msg.ok { color: #1E8E3E; }
.m-joinscr .j-acts { display: flex; gap: 10px; }
.m-joinscr .j-go { font-size: 20px; min-width: 150px; }
.m-joinscr .j-qr { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.8); border: 2.5px dashed rgba(29,33,51,.35); border-radius: 14px; padding: 8px 12px; font-size: 14px; font-weight: 700; max-width: 520px; text-align: left; }
.m-joinscr .j-qr .ic { flex: none; }
@keyframes jIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes jBlink { 50% { opacity: 0; } }
@keyframes jShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-height: 460px) {
  .m-joinscr .j-in { gap: 6px; }
  .m-joinscr .j-title { font-size: 24px; margin-top: 0; }
  .m-joinscr .j-sub { font-size: 14px; }
  .m-joinscr .j-box { width: 60px; height: 70px; font-size: 42px; }
  .m-joinscr .j-msg { font-size: 14px; }
  .m-joinscr .j-msg.err { padding: 5px 10px; }
  .m-joinscr .j-go { font-size: 18px; }
  .m-joinscr .j-qr { font-size: 13px; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) { .m-joinscr, .m-joinscr .j-code.shake { animation: none; } }

/* ---- 派對房:大房號、分享連結 ---- */
.p-top .code { font-size: 54px; letter-spacing: .14em; }
.p-qr { width: 140px; height: 140px; } .p-qr svg { width: 130px; height: 130px; }
.p-codebox { min-width: 0; }
.p-share { font-size: 16px; padding: 6px 14px; margin: 2px 0 4px; display: inline-flex; align-items: center; gap: 6px; background: #6FCBFF; }
.p-invite { font-size: 13px; font-weight: 700; margin-top: 6px; }
@media (max-width: 640px) {
  .p-top .code { font-size: 44px; }
  .p-qr { width: 112px; height: 112px; } .p-qr svg { width: 104px; height: 104px; }
}
@media (max-height: 460px) {
  .p-top .code { font-size: 40px; }
  .p-qr { width: 104px; height: 104px; } .p-qr svg { width: 96px; height: 96px; }
  .p-share { padding: 4px 12px; font-size: 15px; }
  .p-invite { margin-top: 3px; }
}

/* v0:開場三顆登入(訪客 / Google / LINE)、LINE 按鈕、App 內建瀏覽器提示、登入中的裝置 */
.m-authpick .m-mcard.n3 { max-width: 760px; }
.m-authpick .ap-opts.n3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .m-authpick .ap-opts.n3 { grid-template-columns: 1fr; gap: 8px; } .m-authpick .ap-opts.n3 .ap-opt { padding: 8px; } }
@media (max-height: 430px) { .m-authpick .ap-opts.n3 .ap-opt small { display: none; } }
.m-btn.ap-line { background: #06C755; color: #fff; border-color: #1D2133; min-width: 180px; min-height: 42px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.m-btn.ap-line .ln-logo { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; background: #fff; color: #06C755; font: 800 9px/1 system-ui, sans-serif; letter-spacing: 0; }
.m-btn.ap-line[disabled] { background: #B9C2B8; color: #fff; cursor: not-allowed; }
.m-inapp { background: #FFF3C4; border: 2px solid #E0A400; border-radius: 12px; padding: 8px 10px; font-size: 13px; line-height: 1.4; text-align: left; width: 100%; box-sizing: border-box; }
.m-authpick .ap-google.blocked { opacity: .55; }
.m-sess { display: grid; gap: 4px; }
.m-sess .m-muted { font-size: 12px; }
.m-rwrule { font-size: 12px; line-height: 1.4; margin-top: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(29,33,51,.06); }
.m-rwlocked { font-size: 13px; font-weight: 700; color: #B5402A; margin: 4px 0; }

/* 這場賺到多少金幣(結算畫面共用,第 22 件) */
.m-coinbar { position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; top: max(6px, env(safe-area-inset-top)); z-index: 55; max-width: min(560px, 92vw); background: #FFF3C4; border: 2.5px solid #1D2133; border-radius: 16px; box-shadow: 0 3px 0 #1D2133; padding: 4px 14px 5px; text-align: center; font-weight: 700; color: #1D2133; pointer-events: none; animation: mPop .3s cubic-bezier(.3,1.6,.5,1); }
.m-coinbar .hd { display: inline-flex; gap: 6px; align-items: center; font-size: 17px; }
.m-coinbar .hd .ic, .m-coinbar .hd svg { width: 22px; height: 22px; }
.m-coinbar .sub { font-size: 11.5px; color: #6B5A2E; line-height: 1.25; }
.m-coinbar.zero { background: #EFEAD9; }
.m-coinbar .nn { display: none; }
/* 第 27 件:會壓到結算合照時縮成右上角一顆小金幣(點一下展開明細) */
.m-coinbar.mini { left: auto; right: max(8px, env(safe-area-inset-right)); margin: 0; min-height: 44px; min-width: 44px; padding: 4px 10px; border-radius: 22px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; max-width: min(360px, 70vw); }
.m-coinbar.mini:not(.open) .hd b, .m-coinbar.mini:not(.open) .sub { display: none; }
.m-coinbar.mini:not(.open) .nn { display: inline; font-size: 16px; }
/* ==================== RWD(手機橫式 / 直式用滿畫面、觸控目標 ≥ 44px、安全區) ====================
   原則:版面大小交給 flex / grid(內容撐滿可用高度),不是固定大小再整體 zoom。
   --ui 只在比 1280×720 大的螢幕放大;手機一律是 1(不會縮小),所以下面的 media query 用的就是真實的 CSS px。
   三種版面:
     直式手機        (max-width: 640px)
     橫式矮螢幕      (max-height: 520px) and (min-width: 641px)   ← 手機橫式 360–430 高
     高螢幕          其他(平板、桌機)
   檢查工具:proto/tools/rwd-shots.mjs(CHECK=1)。 */

/* ---------- 上方列 ---------- */
.m-bar { flex-wrap: nowrap; }
.m-bar h2 { flex: 0 1 auto; }
.m-back { width: 44px; height: 44px; }
.m-pbtn { min-height: 44px; }
.m-pbtn.friends { min-width: 46px; }
.m-bar .m-chip { min-height: 44px; }
.m-chip.m-sound { min-width: 44px; min-height: 44px; padding: 5px 9px; flex: none; }
.m-extra { display: flex; gap: 6px; flex: none; }
.m-extra .m-chip { min-width: 44px; justify-content: center; padding-left: 9px; padding-right: 9px; }
/* 金幣 / 券 / 碎片:一個膠囊三格(外框用 box-shadow 畫,裡面每一格才有完整的 44px 高) */
.m-wallet { display: inline-flex; align-items: stretch; flex: none; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2.5px #1D2133, 0 3px 0 2.5px #1D2133; overflow: hidden; margin: 0 2.5px; }
.m-wallet .m-chip { border: 0; border-radius: 0; box-shadow: none; background: transparent; min-width: 46px; min-height: 44px; padding: 4px 10px 4px 9px; justify-content: center; font-variant-numeric: tabular-nums; }
.m-wallet .m-chip + .m-chip { border-left: 1.5px solid rgba(29,33,51,.16); }
.m-wallet .m-chip:active { transform: none; box-shadow: none; background: #FFF3C4; }
.m-wallet .m-coinchip { padding-bottom: 4px; }
.m-wallet .m-coinchip .wk { left: 12px; right: 8px; bottom: 5px; }
@media (max-height: 460px) { .m-back { width: 44px; height: 44px; } }

/* 手機橫式(含有瀏海的機種:可用寬度比視窗少 100 多 px)→ 按鈕和膠囊緊一點 */
@media (min-width: 641px) and (max-width: 900px) {
  .m-bar { gap: 6px; }
  #metaLayer .m-pbtn { font-size: 15px; padding: 4px 10px 4px 7px; gap: 4px; }
  #metaLayer .m-pbtn.friends { padding: 4px 10px; min-width: 46px; }
  #metaLayer .m-wallet .m-chip { font-size: 14.5px; padding: 4px 7px 4px 6px; gap: 3px; min-width: 44px; }
  .m-wallet .m-chip .ic { width: 1.1em; height: 1.1em; }
  .m-bar h2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.05; min-width: 3.2em; } /* 放不下就折成兩行,不要「…」 */
  html:lang(en) .m-bar h2 { font-size: 16px; }
  .m-bar.has-extra h2 { display: none; } /* 有額外捷徑的頁(鋪路餐車地圖):標題讓位給派對按鈕,地圖本身就看得出是哪一頁 */
}
/* 直式:第一排 = 返回 + 標題 + 錢包;第二排 = 開派對 / 加入派對 / 好友 + 喇叭(派對房 = 喇叭 + 聊天 + 表情) */
@media (max-width: 640px) {
  .m-bar { flex-wrap: wrap; row-gap: 4px; gap: 6px; }
  .m-bar > .m-sp { order: 50; flex: 0 0 100%; height: 0; }
  .m-bar > .m-wallet { order: 10; margin-left: auto; }
  .m-bar > .m-pbtns { order: 60; flex: 1 1 0; min-width: 0; }
  .m-bar > .m-chip, .m-bar > .m-btn { order: 61; }
  .m-bar > .m-chip.m-sound { order: 62; }
  .m-bar > .m-extra { display: none; } /* 衣櫃 / 扭蛋捷徑:選遊戲頁下面的功能鈕就有,直式不重複放 */
  #metaLayer .m-bar .m-pbtn { flex: 1 1 auto; min-width: 0; font-size: 15.5px; padding: 5px 8px; }
  .m-bar h2 { font-size: 21px; }
  #metaLayer .m-wallet .m-chip { font-size: 15px; padding: 4px 8px 4px 7px; gap: 4px; min-width: 44px; }
  /* 派對房的第二排:聊天、表情平分寬度 */
  [data-screen=party] .m-bar > .m-chip:not(.m-sound), [data-screen=party] .m-bar > .m-btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 640px) { html:lang(en) .m-bar .m-pbtn .ic { display: none; } html:lang(en) #metaLayer .m-bar .m-pbtn { font-size: 14.5px; padding: 5px 6px; } } /* 英文字比較長:第二排只留文字 */
html:lang(en) #metaLayer .m-gamesmain .m-round { hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 380px) { #metaLayer .m-bar .m-pbtn { font-size: 14.5px; padding: 5px 6px; gap: 4px; } .m-bar .m-pbtn .ic { width: 20px !important; height: 20px !important; } }

/* ---------- 跟著外框走的畫布(ui.js fitCanvas) ---------- */
.m-fit { position: relative; min-width: 0; min-height: 0; }
.m-fit > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }

/* ---------- 選遊戲 ---------- */
.m-gamesmain { display: flex; flex-direction: column; }
.m-gamesmain > * { flex: none; }
.m-gamesmain .m-games.three { --n: 5; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 14px; align-items: stretch; justify-content: normal;
  width: 100%; max-width: 1300px; margin: 0 auto; padding-top: 4px; flex: 0 1 auto; min-height: 150px; }
.m-gamesmain .m-games.three.n3 { --n: 3; max-width: 1100px; } .m-gamesmain .m-games.three.n4 { --n: 4; }
.m-gamesmain .m-games.three .m-game { width: auto; min-width: 0; max-width: none; flex: none; min-height: 0; position: relative; }
.m-game .m-gart { flex: 1 1 auto; width: 100%; aspect-ratio: 1.45; border-radius: 12px; border: 2.5px solid #1D2133; background: #9ED97A; overflow: hidden; }
.m-game .m-gart > canvas { border: 0; border-radius: 0; background: none; max-width: none; }
.m-game.soon .m-gart { background: #DDE2EE; }
.m-game h3, .m-game .m-muted { flex: none; }
@media (min-height: 700px) and (min-width: 641px) { .m-game .m-gart { aspect-ratio: 1.2; } }
/* 沙路展示帶(手機橫式 / 直式;meta.js roadStrip):接在功能鈕下面,不縮、不被蓋住 */
.m-roadbox { flex: none; width: 100%; height: 64px; pointer-events: none; }
.m-roadbox > canvas.m-walkers { z-index: auto; }
/* 功能鈕:等寬等高排成一排(直式 5 × 2) */
.m-gamesmain .m-dock { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 1060px; margin: 0 auto; }
#metaLayer .m-gamesmain .m-round { min-width: 0; min-height: 62px; justify-content: center; font-size: 14px; line-height: 1.12; word-break: keep-all; overflow-wrap: anywhere; text-align: center; position: relative; }
.m-hubrow .m-quick, .m-hubrow .m-news { min-height: 52px; }
.m-news .nb { min-height: 44px; }
/* 副標放不下就換行,不要用「…」截掉 */
.m-quick small, .m-news .tx b, .m-news .tx small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
.m-gamesmain .m-game .m-muted { min-height: 2.3em; }
.m-news .dots { align-self: stretch; align-items: center; justify-content: center; cursor: pointer; }
/* 高螢幕(平板直式):五張卡排成 3 + 2 */
@media (min-width: 641px) and (max-aspect-ratio: 1/1) {
  .m-gamesmain .m-games.three.n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .m-gamesmain .m-games.three.n5 .m-game { grid-column: span 2; }
  .m-gamesmain .m-games.three.n5 .m-game:nth-child(n+4) { grid-column: span 3; }
  .m-gamesmain .m-games.three.n4 { --n: 2; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .m-gamesmain .m-game .m-gart { aspect-ratio: auto; height: clamp(120px, 17vh, 240px); }
  .m-gamesmain .m-dock { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 680px; } /* 11 顆(多了信箱):6 + 5 */
}
/* 橫式矮螢幕:卡片那一排吃掉剩下的高度;最底下留一條草地給散步的麻糬仔 */
@media (max-height: 520px) and (min-width: 641px) {
  .m-gamesmain { gap: 6px; padding-top: 2px; overflow-x: hidden; }
  .m-gamesmain.strip { padding-bottom: max(7px, env(safe-area-inset-bottom) * .7); }
  .m-roadbox { height: clamp(52px, 16vh, 68px); }
  .m-hubrow .m-news .ico, .m-hubrow .m-news .nb canvas { width: 34px !important; height: 34px !important; }
  .m-gamesmain .m-games.three { flex: 1 1 0; min-height: 104px; gap: 8px; padding-top: 0; max-width: none; }
  .m-gamesmain .m-games.three .m-game { padding: 6px 7px 6px; gap: 3px; border-radius: 15px; box-shadow: 0 4px 0 #1D2133; }
  .m-game .m-gart { aspect-ratio: auto; flex: 1 1 0; border-radius: 9px; }
  .m-gamesmain .m-game h3 { font-size: 15.5px; line-height: 1.12; flex-wrap: nowrap; }
  .m-gamesmain .m-game .m-muted { display: none; }
  .m-gamesmain .m-game .m-themetag, .m-gamesmain .m-game .m-devtag { position: absolute; top: 11px; right: 11px; margin: 0; z-index: 1; }
  .m-gamesmain .m-hubrow { grid-template-columns: minmax(190px, 1fr) minmax(0, 1.7fr); gap: 8px; max-width: none; }
  .m-hubrow .m-quick, .m-hubrow .m-news { min-height: 48px; box-shadow: 0 4px 0 #1D2133; }
  .m-hubrow .m-news { padding: 3px 8px; }
  .m-gamesmain .m-dock { gap: 6px; max-width: none; margin-top: 0; }
  #metaLayer .m-gamesmain .m-round { min-height: 50px; padding: 4px 0 3px; font-size: clamp(10.5px, 1.65vw, 13.5px); letter-spacing: -.03em; border-radius: 14px; box-shadow: 0 3px 0 #1D2133; gap: 1px; } /* 11 顆一排:四個字要放得下一行 */
  #metaLayer .m-hubrow .m-quick { font-size: 17px; }
  .m-hubrow .m-firstwin { font-size: 11px; padding: 0 7px; top: -11px; right: 8px; }
  .m-gamesmain .m-round .ic { width: 23px; height: 23px; }
  .m-gamesmain .m-round .ic.cv { width: 23px !important; height: 23px !important; }
  .m-gamesmain .m-badge { top: -6px; right: -3px; }
}
/* 直式手機:鋪路餐車一張大卡,其他兩欄;功能鈕 5 × 2。內容比畫面矮時卡片長高把畫面撐滿,比畫面高就往下捲 */
@media (max-width: 640px) {
  .m-gamesmain { gap: 8px; }
  .m-gamesmain .m-games.three { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.25fr); grid-auto-rows: minmax(0, 1fr); gap: 8px; flex: 1 1 0; min-height: 290px; max-width: none; padding-top: 2px; } /* 卡片吃掉剩下的高度:一般手機整頁(含最下面的沙路)一個畫面看完,特別矮的才往下捲 */
  .m-gamesmain .m-games.three .m-game { padding: 7px 8px 8px; gap: 4px; border-radius: 16px; box-shadow: 0 4px 0 #1D2133; }
  .m-gamesmain .m-games.three .m-game:first-child, .m-gamesmain .m-games.three .m-game:last-child:nth-child(even) { grid-column: 1 / -1; }
  .m-game .m-gart { aspect-ratio: auto; flex: 1 1 0; min-height: 40px; border-radius: 10px; }
  .m-gamesmain .m-game h3 { font-size: 17px; line-height: 1.15; }
  .m-game.soon[data-t=game-soon] .m-gart { display: block; }
  .m-gamesmain .m-hubrow { gap: 8px; }
  .m-gamesmain .m-dock { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px 5px; margin-top: 0; } /* 11 顆(多了信箱):6 + 5 */
  #metaLayer .m-gamesmain .m-round { flex: none; min-height: 58px; padding: 5px 0 4px; font-size: clamp(10.5px, 3.05vw, 12.5px); letter-spacing: -.02em; border-radius: 15px; box-shadow: 0 3px 0 #1D2133; } /* 6 欄:四個字(每日任務、我的名片)要放得下一行 */
  .m-gamesmain .m-round .ic { width: 26px; height: 26px; }
  .m-gamesmain .m-round .ic.cv { width: 26px !important; height: 26px !important; }
  .m-gamesmain .m-badge { top: -6px; right: -3px; }
  .m-roadbox { height: 68px; }
}

/* ---------- 鋪路餐車地圖、衣櫃:手機的分頁排成一排、左右滑(不要吃掉地圖 / 格子的高度) ---------- */
@media (max-height: 520px) and (min-width: 641px), (max-width: 640px) {
  .m-map > .m-tabs, .m-wardrobe > .m-tabs, .m-wardrobe > .m-cats { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; flex: none; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 1px 22px 5px 1px; margin-right: -4px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .m-map > .m-tabs .m-tab, .m-wardrobe > .m-tabs .m-tab { flex: none; white-space: nowrap; }
  .m-map, .m-wardrobe { min-width: 0; }
}
@media (max-width: 640px) { .m-hub, .m-closet, .m-gacha, .m-photo { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 520px) and (min-width: 641px) {
  .m-path { min-height: 150px; }
  .m-closet { grid-template-columns: minmax(250px, 1fr) minmax(0, 1.55fr); }
  /* 衣櫃左欄窄:套裝改成一列一個(縮圖 + 名稱 + 存 / 穿),按鈕才放得下 44px */
  .m-stage > .m-row { flex-wrap: wrap !important; justify-content: center; }
  .m-presets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 100%; }
  .m-preset { flex-direction: row; align-items: center; gap: 8px; padding: 2px 6px 2px 4px; }
  .m-preset > span { flex: 1; text-align: left; font-size: 13px; }
  .m-preset .bt { gap: 5px; }
}
.m-tabs::-webkit-scrollbar, .m-cats::-webkit-scrollbar { display: none; }
.m-stage { overflow-x: hidden; }
.m-presets { max-width: 100%; }

/* ---------- 季票:橫式把獎勵軌道撐滿剩下的高度 ---------- */
@media (min-width: 641px) {
  [data-screen=season] .m-main { display: flex; flex-direction: column; }
  [data-screen=season] .m-season { flex: 1 1 auto; min-height: 0; max-height: 620px; }
  [data-screen=season] .m-season > * { flex: none; }
  [data-screen=season] .m-trackwrap { flex: 1 1 0; min-height: 190px; display: flex; }
  [data-screen=season] .m-track { min-height: 100%; }
  [data-screen=season] .m-track .lab, [data-screen=season] .m-track .col { grid-template-rows: 20px minmax(74px, 1.25fr) minmax(60px, 1fr); }
}

/* ---------- 設定:窄螢幕的列可以換行,不要撐出水平捲動 ---------- */
.m-set { min-width: 0; }
.m-set > * { min-width: 0; }
.m-set .m-row { flex-wrap: wrap; }
.m-set .m-seg { max-width: 100%; flex-wrap: wrap; border-radius: 22px; }
.m-set .m-input { flex: 1 1 120px; }
.m-main { overflow-x: hidden; }

/* ---------- 安全區(瀏海 / 動態島 / 底部橫條):彈窗、浮動按鈕 ---------- */
.m-modal { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.m-mcard { max-height: calc((100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .97 / (var(--fs, 1) * var(--ui, 1))); max-height: calc((100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .97 / (var(--fs, 1) * var(--ui, 1))); }
.m-reelwrap { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.m-reelwrap > .m-btn[data-t=skip] { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
.pg-backparty { bottom: max(14px, env(safe-area-inset-bottom)); }
.m-cele-tap { bottom: max(14px, env(safe-area-inset-bottom)); }

/* ---------- 觸控裝置:可點的東西至少 44 × 44 ---------- */
@media (pointer: coarse) {
  .m-btn, .m-tap { min-height: 44px; }
  .m-chip { min-height: 44px; }
  .m-input { min-height: 44px; }
  .m-tab { min-height: 44px; min-width: 44px; padding: 6px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
  .m-seg button { min-height: 44px; min-width: 44px; padding: 6px 15px; }
  .m-x { width: 44px; height: 44px; font-size: 26px; }
  .m-mcard:has(> .m-x) h3 { padding-right: 46px; }
  .m-authpick .ap-guest, .m-authpick .ap-google, .m-authpick .ap-alt .m-btn, .m-btn.ap-line { min-height: 44px; }
  .m-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .m-quest .m-btn, .m-rotitem .m-btn, .m-pack .m-btn, .m-shopitem .m-btn, .m-track .free .m-btn, .m-buyrow .m-btn, .m-side .m-btn, .m-recent .m-chip { min-height: 44px; min-width: 44px; }
  .m-track .free .m-btn { padding: 1px 6px; }
  /* 小圓鈕(顏色):看起來不用太大,點擊範圍用 ::after 往外擴到 44 */
  .m-swatch { gap: 8px; }
  .m-swatch button { width: 36px; height: 36px; position: relative; flex: none; }
  .m-swatch button::after { content: ''; position: absolute; inset: -6.5px; }
  .m-photo .cols { gap: 10px; }
  .m-photo .cols button { width: 34px; height: 34px; position: relative; flex: none; }
  .m-photo .cols button::after { content: ''; position: absolute; inset: -7.5px; }
  .m-photo .chips { gap: 6px; }
  .m-photo .chips button { min-height: 44px; min-width: 44px; padding: 3px 12px; font-size: 14px; justify-content: center; }
  .m-photo .slotrow { grid-template-columns: 3.2em 44px 1fr 44px; }
  .m-photo .slotrow button { width: 44px; height: 44px; border-radius: 12px; }
  .m-photo .lbl .m-chip { min-height: 44px; font-size: 13px !important; padding: 2px 12px !important; }
  /* 套裝的「存 / 穿」 */
  .m-preset { padding: 3px 3px 5px; }
  .m-preset .bt { gap: 2px; }
  .m-preset .bt button { min-width: 44px; min-height: 36px; font-size: 13px; position: relative; }
  .m-preset .bt button::after { content: ''; position: absolute; inset: -5px 0; }
  /* 公告輪播的小圓點:手指點不準 → 整塊變成「下一則」 */
  .m-news .dots { min-width: 44px; min-height: 44px; padding: 0 4px; }
  .m-news .dots button { pointer-events: none; }
  /* 表情輪盤 */
  .pg-says button { min-height: 44px; }
  .pg-emos button { min-height: 44px; min-width: 44px; }
  /* 好友 / 聊天(樣式在 friends.css,這裡只補觸控大小) */
  .fr-tab { min-height: 44px; min-width: 44px; }
  .fr-row .m-btn.fr-more { min-width: 44px; }
  .fr-row .m-btn, .fr-guest .m-btn, .fr-note .m-btn, .ch-reasons .m-btn, .ch-more { min-height: 44px; min-width: 44px; }
  .ch-q { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .ch-inp, .ch-send { min-height: 44px; }
  .m-bar .ch-btn { min-height: 44px; }
  .fr-corner { width: 46px; height: 46px; }
  .m-shopnew { min-height: 44px; }
  .m-shoptabs .m-tab { min-height: 44px; }
  .m-shopm .m-x { margin-bottom: -52px; }
  .m-shoprow { padding-right: 0; }
  .m-set input[type=range] { min-height: 44px; }
  .m-rw .it .m-btn { min-height: 44px; }
  #mPackBar .m-chip { min-height: 44px; }
}
@media (pointer: coarse) and (max-height: 500px) { .m-shoptabs .m-tab { min-height: 44px; padding: 2px 12px; } }

/* ---------- 其他頁面的小修 ---------- */
/* 扭蛋(橫式矮螢幕):機台的畫布可以縮,下面的說明才不會被擠出卡片 */
@media (max-height: 520px) and (min-width: 641px) {
  .m-machine { padding: 6px 10px; gap: 4px; justify-content: space-between; }
  .m-machine > canvas { flex: 1 1 0; min-height: 84px; width: auto !important; height: auto !important; max-width: 100%; object-fit: contain; }
  .m-note { font-size: 11.5px; line-height: 1.25; }
  /* 第 24 件:說明搬到右欄、大獎一覽排成一列橫捲 */
  .m-machine > .m-note { display: none; }
  .m-gside .m-note-side { display: block; text-align: left; }
  .m-gside { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  .m-gside > :not(.m-btn) { grid-column: 1 / -1; } /* 機率表 / 碎片商店並排,省下一列給大獎一覽 */
  .m-feat-card { padding: 6px 8px; gap: 2px; }
  .m-feat-card > small { display: none; }
  .m-featgrid { display: flex; overflow-x: auto; gap: 6px; margin-top: 2px; padding-bottom: 2px; }
  .m-featgrid .m-feat { flex: 0 0 48px; height: 48px; }
}
.m-note-side { display: none; }
/* 扭蛋:「買 1 張券 / 買 10 張券」放不下就換行排,不要把字折成兩行 */
.m-buyrow { flex-wrap: wrap; }
.m-buyrow .m-btn { white-space: nowrap; }
/* 派對房:成員區(.p-slots / .p-slot)由 feat/roomcos 那條線重做,這裡不動;只收窄兩側卡片的內距 */
@media (max-width: 480px) { .p-right, .p-hist { padding-left: 10px; padding-right: 10px; } }
/* 派對房(手機橫式):房號區和右邊的選遊戲區壓緊,左右兩張卡一個畫面看完不用捲。成員舞台的大小在 roomfx.css,這裡不動 */
@media (max-height: 520px) and (min-width: 641px) {
  .p-grid { gap: 10px; align-items: start; grid-template-columns: minmax(0, 1.2fr) minmax(270px, 1fr); }
  .p-left, .p-right { padding: 8px 12px; }
  .p-top { gap: 10px; }
  .p-top .url { display: none; } /* 網址很長會折成兩三行;有 QR、房號和「分享連結」就夠 */
  .p-top .code { font-size: 34px; }
  .p-codebox .m-btn { padding: 4px 10px; margin: 3px 4px 1px 0; }
  #metaLayer .p-codebox .m-btn { font-size: 15px; }
  .p-left .p-invite { margin-top: 2px; font-size: 12.5px; }
  .p-right h3 { margin: 0 0 4px; font-size: 18px; }
  /* 遊戲分頁、選項很多的模式列(鬼校舍 8 張地圖):一排左右滑;選中的那一顆排到最前面,重畫後不用找 */
  .p-right > .m-tabs, .p-right > .m-seg.p-modes.many { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .p-right > .m-tabs { padding: 1px 22px 5px 1px; margin: 0 -4px 2px 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .p-right > .m-tabs .m-tab, .p-right > .m-seg.p-modes.many button { flex: none; white-space: nowrap; }
  .p-right > .m-tabs .m-tab.on, .p-right > .m-seg.p-modes.many button.on { order: -1; }
  .p-right > .m-seg.p-modes.many { border-radius: 999px; }
  .p-right .p-modes { margin: 2px 0 4px; justify-self: start; max-width: 100%; }
  .p-right .m-seg button { white-space: nowrap; padding-left: 11px; padding-right: 11px; }
  /* 按鈕排成:「大家一起開始」一整排、「開派對包 + 散會」一排(原本窄螢幕會疊成三排) */
  .p-right { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-content: start; }
  .p-right > * { grid-column: 1 / -1; min-width: 0; }
  .p-right > .m-row { display: contents; }
  .p-right > .m-row > .p-go { grid-column: 1 / -1; margin-top: 4px; }
  .p-right > .m-row > .m-btn.alt { grid-column: 1; margin-top: 6px; justify-self: start; }
  .p-right > .m-btn.pink { grid-column: 2; margin-top: 6px !important; }
  .p-right > select.m-input { margin-top: 2px; }
}
.p-right > .m-seg::-webkit-scrollbar { display: none; }
@media (max-height: 520px) and (min-width: 641px) and (max-width: 720px) { .p-codebox .m-btn .ic { display: none; } } /* 最窄的橫式:「分享連結 / 邀請好友」只留字,兩顆才排得進同一排 */
/* 好友列表:一列放不下「名字 + 三顆按鈕」時按鈕換到下一排,名字不要被擠成「…」 */
.fr-row { flex-wrap: wrap; }
.fr-row .fr-who { flex: 1 1 118px; }
@media (max-width: 480px) {
  .fr-row .fr-who { flex: 1 1 calc(100% - 80px); }
  .fr-row .m-btn { flex: 1 1 auto; justify-content: center; }
  .fr-row .m-btn.fr-more, .fr-row .ch-btn { flex: 0 0 auto; }
}

/* ---------- 各遊戲的入口頁 / 等人畫面(鋪路、宴會、鬼校舍、搬家共用 #lobbyCard / .overlay / .big;三秒亂鬥是 .panel) ----------
   這些頁面自己的 <style> 在 meta.css 之後,所以這裡用 html body 開頭把優先序拉高 */
html body .overlay, html body .panel { padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
html body .panel { grid-template-columns: minmax(0, 1fr); }
html body .panel > .card { min-width: 0; max-width: 100%; justify-self: center; grid-template-columns: minmax(0, 1fr); }
html body .panel > .card > * { min-width: 0; }
@media (max-width: 640px) { html body .panel { padding-bottom: max(66px, env(safe-area-inset-bottom)); } } /* 右下角的音樂鈕不要蓋到最後一顆按鈕 */
html body .panel .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html body .panel .row2 button { min-width: 0; white-space: normal; }
@media (pointer: coarse) {
  html body .overlay .big, html body .panel .card button, html body #lvPick button { min-height: 44px; }
  html body #lvPick button { padding: 3px 14px; }
  html body .overlay input, html body .panel .card input { min-height: 44px; }
  html body #lvPick { gap: 6px; }
}
@media (max-height: 520px) and (min-width: 561px) {
  html body #lobbyCard { gap: 14px; padding-top: 10px; padding-bottom: 10px; }
  html body #slots .slot.meta { min-height: 78px; padding: 0 4px 4px; }
  html body #lobbyCard .slots { margin: 5px 0 7px; }
  html body #lobbyCard .url { margin: 2px 0 4px; }
  html body #lobbyCard .code { font-size: 30px; }
  /* 關卡選擇:一排左右滑(不然 12 關 × 44px 高會把等人畫面撐出螢幕) */
  html body #lvPick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 2px 0 4px; padding-right: 20px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  html body #lvPick button { flex: none; white-space: nowrap; }
  /* 開始 / 開派對包 / 回大廳排成一排,整張卡才塞得進手機橫式的高度 */
  html body #lobbyCard > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
  html body #lobbyCard > div:last-child > * { flex: 1 1 100%; min-width: 0; }
  html body #lobbyCard > div:last-child > #bStart, html body #lobbyCard > div:last-child > .row, html body #lobbyCard > div:last-child > .m-packbar { flex: 0 1 auto; order: 5; margin: 0; }
  html body #lobbyCard > div:last-child > #bStart ~ *, html body #lobbyCard > div:last-child > .row ~ * { order: 6; }
  html body #lobbyCard > div:last-child > #bStart ~ .gm-lobby, html body #lobbyCard > div:last-child > .row ~ .gm-lobby { flex: 0 0 auto; order: 5; margin: 0; }
  html body #lobbyCard > div:last-child > #lWait { margin: 4px 0 0 !important; }
}
#lvPick::-webkit-scrollbar { display: none; }
/* 入口頁(宴會 / 搬家 12 關):手機橫式把關卡格壓扁一點、排成 6 欄兩排,下面那排按鈕才不會被擠出螢幕 */
@media (max-height: 520px) and (min-width: 641px) {
  html body .overlay#landing .card { padding: 8px 14px 10px; }
  html body .overlay#landing h1 { font-size: 23px; margin: 0; }
  html body .overlay#landing .card > .sub, html body .overlay#landing #lSub { display: none; }
  html body .overlay #lvRow { gap: 6px; margin: 4px 0 8px; }
  html body .overlay #lvRow:has(> :nth-child(10)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html body .overlay #lvRow .lv { padding: 3px 3px 4px; gap: 1px; }
  html body .overlay #lvRow .lv canvas.th { height: clamp(34px, 11.5vh, 52px); width: auto; max-width: 100%; }
  html body .overlay #lvRow .lv b { font-size: 13px; }
}

/* ---------- 第 33 件:五款共用的大廳彈窗(gamemodal.js)---------- */
.m-gmodal .m-mcard { max-width: min(720px, 96vw); padding: 12px 14px; }
.m-gm { gap: 8px; }
.m-gm .gm-head h3 { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m-gm .gm-head .m-muted { font-size: 13px; }
.m-gm .gm-note { font-size: 13px; }
.m-gm .gm-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-gm .gm-main, .m-gm .gm-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-gq { justify-content: flex-start; gap: 12px; background: #7ED957; font-size: 22px; padding: 12px 16px; width: 100%; min-height: 72px; }
.m-gq .play { width: 46px; height: 46px; border-radius: 50%; background: #27A85F; border: 3px solid #1D2133; display: grid; place-items: center; flex: none; animation: mBreath 1.8s ease-in-out infinite; }
.m-gq .play .ic { width: 26px; height: 26px; margin-left: 3px; }
.m-gq .t { display: flex; flex-direction: column; text-align: left; line-height: 1.15; min-width: 0; }
.m-gq small { font-size: 13px; font-weight: 400; }
.m-gm .gm-lvt { font-size: 12px; font-weight: 700; color: #5A5F70; margin: 0 0 3px 2px; }
.m-gm .gm-lvs { padding: 8px 2px 6px; }
.m-gm .lvc { width: 96px; }
/* 鬼校舍重做第一階段:收集徽章「?」改相機(拍到過才亮) */
.lvc .gm-mark canvas, .m-gm .gm-mark canvas { filter: grayscale(1); opacity: .55; }
.lvc .gm-mark.on canvas, .m-gm .gm-mark.on canvas { filter: none; opacity: 1; }
.m-gm .gm-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.m-gm .gm-sec .m-btn { justify-content: flex-start; text-align: left; padding: 7px 10px; font-size: 15px; box-shadow: 0 3px 0 #1D2133; min-height: 48px; }
.m-gm .gm-sec .mi { display: grid; place-items: center; width: 26px; flex: none; }
.m-gm .gm-sec .mi .emo { font-size: 22px; }
.m-gm .gm-sec .t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.m-gm .gm-sec small { font-size: 11px; font-weight: 400; }
.m-gm .gm-sec.n1 { grid-template-columns: 1fr; }
.m-gm .gm-sec.n3 > :first-child, .m-gm .gm-sec.n5 > :first-child { grid-column: 1 / -1; }
.m-gm .gm-set { border: 2px dashed rgba(29,33,51,.35); border-radius: 12px; padding: 4px 10px; background: rgba(255,255,255,.5); }
.m-gm .gm-set summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 4px 0; min-height: 44px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.m-gm .gm-set summary small { font-weight: 400; font-size: 12px; color: #5A5F70; margin-left: 6px; }
.m-gm .gm-set .m-easy { width: 100%; margin: 4px 0 6px; }
.m-gm .gm-setbody { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.m-gm .gm-pooll { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.m-gm .gm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-gm .gm-chip { border: 2px solid #1D2133; border-radius: 999px; padding: 3px 12px; min-height: 44px; background: #fff; font-size: 13px; font-weight: 700; }
.m-gm .gm-chip.on { background: #FFD84A; }
.m-gm .gm-chip.all.on { background: #7ED957; }
.m-gm .gm-sens { display: flex; flex-direction: column; gap: 6px; }
.m-gm .gm-srow { background: #fff; border: 2px solid rgba(29,33,51,.2); border-radius: 10px; padding: 5px 8px; }
.m-gm .gm-sh { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; }
.m-gm .gm-st { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.m-gm .gm-st.on { background: #D8F5C8; color: #1E7A3C; }
.m-gm .gm-st.no { background: #EEE; color: #5A5F70; }
.m-gm .gm-ask { min-height: 44px; padding: 3px 12px; font-size: 13px; box-shadow: 0 2px 0 #1D2133; border-width: 2px; }
.m-gm .gm-sl { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; margin-top: 3px; }
.m-gm .gm-sg small { color: #5A5F70; margin-left: 3px; }
.m-gm .gm-snote { font-size: 11px; }
/* 手機橫拿(矮螢幕):左邊快速開始 + 關卡、右邊次要按鈕 + 設定 —— 667×375 不用捲就看得到快速開始 */
@media (min-width: 560px) and (max-height: 520px) {
  .m-gmodal .m-mcard { max-width: min(760px, 98vw); padding: 8px 12px; }
  .m-gm { gap: 5px; }
  .m-gm .gm-head h3 { font-size: 18px; }
  .m-gm .gm-head .m-muted { display: none; }
  .m-gm .gm-head { min-height: 36px; padding-right: 40px; } /* 右上角 × 34px:右欄第一顆按鈕從 × 下面開始,不重疊 */
  .m-gm .gm-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 10px; align-items: start; }
  .m-gq { min-height: 64px; font-size: 20px; padding: 8px 12px; }
  .m-gm .gm-sec .m-btn { padding: 4px 8px; font-size: 14px; min-height: 44px; }
  .m-gm .gm-sec small { display: none; }
  .m-gm .m-themebar { padding: 2px 8px; font-size: 13px; }
  .m-gm .m-themebar .m-muted { display: none; }
}
@media (max-width: 380px) { .m-gm .gm-sec { grid-template-columns: 1fr; } .m-gq { font-size: 19px; } }

/* ---------- 選關卡:縮圖卡(lvpick.js;大廳彈窗 + 派對房的選關卡彈窗共用)---------- */
.lvc-row { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 6px; scroll-snap-type: x proximity; }
.lvc { flex: none; position: relative; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 112px; min-height: 44px; padding: 4px 4px 5px; border: 2px solid #1D2133; border-radius: 12px; background: #fff; font: inherit; font-size: 13px; line-height: 1.15; color: #1D2133; cursor: pointer; text-align: center; }
.lvc .thw { position: relative; display: block; width: 100%; aspect-ratio: 132 / 78; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #E9E3D3, #D7CFBC); }
.lvc .th { width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .2s; }
.lvc .th[src] { opacity: 1; }
.lvc b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvc small { font-size: 11px; color: #5A5F70; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvc .sts { display: flex; gap: 1px; }
.lvc .st { width: 13px; height: 13px; fill: #E4DCC8; stroke: #1D2133; stroke-width: 1.6; }
.lvc .st.on { fill: #FFD84D; }
.lvc.on { background: #FFD84A; box-shadow: 0 3px 0 #1D2133, 0 0 0 3px rgba(255,216,74,.6); }
.lvc.lock { background: #EEF0F5; }
.lvc.lock .thw::after { content: ''; position: absolute; inset: 0; background: rgba(29,33,51,.45); }
.lvc .lk { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.lvc .lk .ic { width: 26px; height: 26px; }
.lvc:focus-visible { outline: 3px solid #4B5BD6; outline-offset: 2px; }
.lvc .gm-tag { position: absolute; top: -7px; right: -4px; z-index: 2; font-size: 10px; font-weight: 700; border: 1.5px solid #1D2133; border-radius: 999px; padding: 0 5px; background: #7ED957; line-height: 1.4; }
.lvc .gm-tag.boss, .lvc .gm-tag.final { background: #FF6B6B; color: #fff; }
.lvc .gm-mark { position: absolute; top: -7px; left: -4px; z-index: 2; font-size: 10px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #1D2133; background: #E4DCC8; color: #5A5F70; font-weight: 700; }
.lvc .gm-mark.on { background: #8D6BE8; color: #fff; }
/* 派對房的縮圖卡彈窗:直式三欄(寬的話更多欄)往下捲;手機橫拿兩列左右滑 */
.m-lvpmodal .m-mcard { max-width: min(600px, 96vw); }
.lvp { gap: 4px; }
.lvp h3, .rmap h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; min-height: 44px; } /* 跟右上角的 × 一樣高:下面的卡片 / 世界分頁不會被 × 壓到 */
.lvp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); overflow: visible; }
.lvp-grid .lvc { width: auto; }
.lvp-msg { min-height: 1.35em; font-weight: 700; font-size: 13px; color: #5A5F70; text-align: center; }
.lvp-msg.bad { color: #C0306A; }
.lvp-msg.flash { animation: mPop .3s; }
@media (min-width: 560px) and (max-height: 520px) {
  .m-lvpmodal .m-mcard { max-width: 96vw; padding: 8px 12px; }
  .lvp h3 { font-size: 17px; }
  .lvp-grid { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 112px; overflow-x: auto; padding-bottom: 8px; }
}
/* 派對房的鋪路餐車世界地圖彈窗(跟大廳的關卡地圖同一套節點 / 地圖) */
.m-rmmodal .m-mcard { max-width: min(780px, 96vw); }
.rmap { gap: 6px; }
.rm-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rm-bar { display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 2px; }
.rm-bar .m-tabs { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 2px 2px 5px; scrollbar-width: none; }
.rm-bar .m-tab { flex: none; white-space: nowrap; min-height: 40px; }
.rm-arrow { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #1D2133; background: #fff; font-size: 26px; font-weight: 700; line-height: 1; padding: 0 0 3px; box-shadow: 0 3px 0 #1D2133; color: #1D2133; }
.rm-arrow:disabled { opacity: .3; box-shadow: none; }
.rmap .rm-path { flex: none; min-height: 0; height: clamp(230px, calc(48vh / (var(--fs, 1) * var(--ui, 1))), 380px); }
.rmap .m-node { cursor: pointer; }
.rmap .m-node.sel .dot { box-shadow: 0 4px 0 #1D2133, 0 0 0 6px #4B5BD6; }
.rmap .m-node.sel .nm { background: #4B5BD6; color: #fff; }
.rmap .m-node:focus-visible { outline: none; }
.rmap .m-node:focus-visible .dot { outline: 3px solid #4B5BD6; outline-offset: 4px; }
.rmap .m-node.shake { animation: rmShake .35s; }
@keyframes rmShake { 25% { transform: translate(calc(-50% - 6px), -50%); } 75% { transform: translate(calc(-50% + 6px), -50%); } }
@media (max-width: 480px) {
  .rmap .m-node .dot { width: 46px; height: 46px; font-size: 17px; }
  .rmap .m-node.boss .dot { width: 56px; height: 56px; }
  .rmap .m-node .nm { font-size: 11px; padding: 0 4px; }
}
@media (min-width: 560px) and (max-height: 520px) {
  .m-rmmodal .m-mcard { padding: 6px 10px; }
  .rmap { gap: 3px; }
  .rmap h3 { font-size: 17px; padding-right: 0; flex: none; margin: 0; min-height: 0; }
  .rmap .rm-head { flex-direction: row; align-items: center; gap: 8px; padding-right: 48px; } /* 標題和世界分頁同一排,右邊留給 × */
  .rmap .rm-path { height: max(170px, calc((100vh - 150px) / (var(--fs, 1) * var(--ui, 1)))); height: max(170px, calc((100dvh - 150px) / (var(--fs, 1) * var(--ui, 1)))); }
  .rmap .m-node .dot { width: 46px; height: 46px; font-size: 17px; }
  .rmap .m-node.boss .dot { width: 54px; height: 54px; }
}
/* 派對房右欄:選關卡按鈕、非房主的「房主正在選:」 */
.p-lvbtn { width: 100%; justify-content: flex-start; gap: 10px; text-align: left; margin: 6px 0 4px; padding: 6px 12px; background: #FFF3C4; min-height: 52px; }
.p-lvbtn .t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.p-lvbtn .t small { font-size: 12px; font-weight: 700; color: #5A5F70; }
.p-lvbtn .t b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-lvbtn .go { font-size: 22px; font-weight: 700; }
.p-lvbtn.thumb .th { width: 76px; height: 45px; border-radius: 7px; border: 2px solid #1D2133; flex: none; object-fit: cover; background: #E9E3D3; }
.p-watch { border: 2.5px solid #1D2133; border-radius: 14px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.p-watch.flash { animation: pwFlash 1.2s ease-out; }
@keyframes pwFlash { 0% { box-shadow: 0 0 0 0 rgba(255,216,74,.95); transform: scale(1.03); } 100% { box-shadow: 0 0 0 14px rgba(255,216,74,0); transform: none; } }
.pw-game { display: flex; align-items: center; gap: 8px; font-size: 19px; flex-wrap: wrap; }
.pw-mode { font-weight: 700; color: #5A5F70; font-size: 14px; }
.pw-opt { font-size: 14px; font-weight: 700; }
.pw-changed { display: none; font-weight: 700; font-size: 14px; color: #fff; background: #4B5BD6; border-radius: 999px; padding: 3px 12px; margin: 0 0 6px; justify-self: start; width: fit-content; }
.pw-changed.on { display: block; animation: pwBanner 3s ease forwards; }
@keyframes pwBanner { 0% { opacity: 0; transform: translateY(-6px) scale(.9); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pw-sub { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .p-watch.flash, .pw-changed.on, .rmap .m-node.shake { animation: none; } }
.mm-safety { gap: 6px; }
.mm-safety .m-btn { flex: 1; min-height: 44px; }
/* 派對房(手機橫式):多了選關卡按鈕之後右邊還是要一個畫面看完 —— 按鈕壓成一行、輕鬆模式的說明收起來(點開彈窗 / 大廳彈窗看得到) */
@media (max-height: 520px) and (min-width: 641px) {
  .p-right h3 { font-size: 16px; margin: 0 0 2px; }
  .p-right h3:has(+ .m-tabs) { display: none; } /* 房主:遊戲分頁本身就是「選下一款遊戲」,標題省下來 */
  .p-right .p-modes { margin: 0 0 3px; }
  .p-lvbtn { min-height: 44px; margin: 2px 0 3px; padding: 3px 10px; }
  .p-lvbtn .t small { display: none; }
  .p-lvbtn .t b { font-size: 16px; }
  .p-lvbtn.thumb .th { width: 58px; height: 34px; }
  .p-right .m-easy { padding: 4px 12px; min-height: 44px; }
  .p-right .m-easy small { display: none; }
  .p-watch { padding: 6px 10px; gap: 2px; }
  .pw-game { font-size: 17px; }
}

/* ---------- 信箱(mailbox.js) ---------- */
.m-mailbox .m-mcard { max-width: min(560px, 96vw); }
.m-mail-hd { display: flex; align-items: center; gap: 8px; }
.m-mail-hd .ic { width: 28px; height: 28px; }
.m-mail-list { display: flex; flex-direction: column; gap: 8px; }
#metaLayer .m-mail-row, .m-mail-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; text-align: left; border: 2.5px solid #1D2133; border-radius: 14px; background: #fff; color: #1D2133; padding: 6px 10px; box-shadow: 0 3px 0 #1D2133; font: inherit; font-size: 15px; cursor: pointer; }
.m-mail-row:active { transform: translateY(2px); box-shadow: 0 1px 0 #1D2133; }
.m-mail-row .ki, .m-letter .ki { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #FFF6E0; border: 2px solid #1D2133; }
.m-mail-row .ki .ic, .m-letter .ki .ic { width: 28px; height: 28px; }
.m-mail-row .tx, .m-letter .lt .tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.m-mail-row .tx b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-mail-row.unread { background: #FFFBEA; }
.m-mail-row.unread .tx b { font-weight: 800; }
.m-mail-row .tx small, .m-letter .lt small { color: #6B7086; font-size: 12.5px; }
.m-mail-row .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #EE4B3E; border: 2px solid #1D2133; }
.m-mail-row .gift { flex: none; display: grid; animation: mMailWiggle 1.6s ease-in-out infinite; }
.m-mail-row .gift .ic { width: 26px; height: 26px; }
@keyframes mMailWiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-5deg); } }
.m-mail-foot { display: flex; justify-content: center; margin-top: 12px; }
.m-mail-foot .m-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 8px 22px; font-size: 17px; }
.m-mail-foot .m-btn .ic { width: 24px; height: 24px; }
.m-mail-st { font-weight: 800; color: #27A85F; padding: 8px; }
.m-mail-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 8px; }
.m-mail-back .ic { width: 16px; height: 16px; }
.m-letter .lt { display: flex; align-items: center; gap: 10px; margin: 0 40px 10px 0; }
.m-letter .lt b { font-size: 19px; line-height: 1.2; }
.m-letter .body { background: #fff; border: 2px dashed #D9C9A0; border-radius: 12px; padding: 10px 14px; line-height: 1.55; overflow-wrap: anywhere; }
.m-letter .body p { margin: 0 0 8px; white-space: pre-wrap; }
.m-letter .body .lead { font-weight: 800; }
.m-letter .body .note { color: #27A85F; font-weight: 700; }
.m-letter .body .sign { margin: 4px 0 0; text-align: right; color: #6B7086; font-size: 13px; }
.m-mail-atth { margin: 12px 0 0; font-weight: 800; }
.m-mail-atth small { font-weight: 500; color: #6B7086; }
.m-mail-att { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.m-mail-att .cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 76px; max-width: 120px; min-height: 76px; padding: 6px 8px; background: #fff; border: 2.5px solid #1D2133; border-radius: 12px; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.15; }
.m-mail-att .cell .ic { width: 34px; height: 34px; }
.m-mail-att .cell canvas { width: 44px; height: 44px; }
.m-mail-att.done .cell { opacity: .55; }
.m-mailfly { position: fixed; z-index: 95; width: 26px; height: 26px; pointer-events: none; transition: transform .75s cubic-bezier(.45, -.35, .6, 1), opacity .75s; }
.m-mailfly .ic { width: 26px; height: 26px; }
.m-dark .m-mail-row, .m-dark .m-letter .body, .m-dark .m-mail-att .cell { background: #323852; color: #fff; }
.m-dark .m-mail-row.unread { background: #3B4262; }

/* 推播通知(CONTRACT §31):設定頁的平台說明、軟提示 */
.m-push-hint { background: #FFF1C9; border: 2px dashed rgba(29,33,51,.35); border-radius: 12px; padding: 8px 12px; }
.m-push-steps { margin: 6px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.6; }
.m-push-ask { max-width: 420px; gap: 10px; text-align: left; }
.m-push-ask .m-row { justify-content: center; flex-wrap: wrap; }
.m-dark .m-push-hint { background: #3B4262; color: #fff; }

/* ---------- 快速開始的排隊卡(mmq.js;META.md「配對」) ---------- */
.m-mmq .m-mcard { width: min(440px, 94vw); }
.mm-card { gap: 8px; align-items: stretch; }
.mm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mm-title { font-size: 21px; }
.mm-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 20px; color: #3A63C9; }
.mm-sub { margin-top: -4px; }
.mm-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mm-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 6px; border-radius: 14px; border: 2.5px dashed rgba(29,33,51,.25); background: rgba(255,255,255,.55); min-width: 0; }
.mm-slot.on { border-style: solid; border-color: #1D2133; background: #fff; animation: mmPop .35s ease-out; }
.mm-slot .nm { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.2em; }
.mm-count { text-align: center; font-weight: 700; color: #555B75; }
.mm-card.go .mm-title { color: #2E9E5B; }
#metaLayer .mm-cancel, .mm-cancel { min-height: 44px; }
@keyframes mmPop { 0% { transform: scale(.8); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (max-height: 520px) and (min-width: 641px) { .mm-card { gap: 5px; } .mm-title { font-size: 18px; } }