/* 商店（第一期）：類型分頁 → 遊戲卡 → 同一頁上的選項區＋合計；陪玩名片、複製訂單用 <dialog>（沿用全站 .frame 面板與 .dlg-close）。
   class 一律 sx- 開頭，避免跟舊的 .plan、.shop-card 撞名 */
.sx { --g: var(--c1); position: relative; isolation: isolate; display: grid; gap: 18px; padding-block: 28px 56px; } /* 商店頁沒有標題區了，一進來就是遊戲橫幅 */
/* 大螢幕把商店頁整頁放寬（頁首、標題、分隔線、商品區一起），陪玩師的照片才放得大；左右各留約 100px 給側邊 HUD 字與右下角的電台播放鍵 */
@media (min-width: 1460px) { body:has(#sx) .wrap { max-width: calc(100vw - 200px); } body:has(#sx) .hud .wrap { max-width: 1240px; } } /* 頁首導覽維持跟其他頁一樣寬，換頁時標誌和選單不會跳位置；跑馬燈與頁尾跟著放寬 */
/* 背景封面圖往左右延伸到整個視窗，切掉超出的部分，不出現橫向捲軸（clip 不會影響右邊合計的 sticky） */
body:has(#sx) main { overflow-x: clip; }
/* 選到的遊戲有封面圖時，鋪滿整個視窗寬度當裝飾背景：圖片靠右（主角在右、封面左側本來就暗），只有下方淡出。
   用真的 <img>（shop.js 的 .sx-backdrop）而不是 CSS 背景圖：深色模式擴充、省流量模式常會拿掉 CSS 背景圖，客人就看不到封面 */
.sx-backdrop { position: absolute; z-index: -1; top: 0; left: calc(50% - 50vw); width: 100vw; height: 680px; max-width: none; object-fit: cover; object-position: right 25%; pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent 96%); mask-image: linear-gradient(180deg, #000 15%, transparent 96%); }
.sx-backdrop[hidden] { display: none; }
/* 換遊戲時背景淡入 */
.sx.swap .sx-backdrop { animation: sxBgIn .6s ease; } /* 不用 both：瀏覽器沒播動畫時封面也照常顯示 */
@keyframes sxBgIn { from { opacity: 0; transform: scale(1.03); } to { opacity: .55; transform: none; } }
:where(.sx, .sx-dialog .fi, .sx-lb, .sx-sticky) .i { width: 1em; height: 1em; flex: none; } /* 權重壓低，全站按鈕與彈窗關閉鈕的圖示尺寸照舊 */

/* 舞台：商品區最上方的留白，讓遊戲封面完整露出來；左下角放遊戲名稱 */
.sx-stage { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: clamp(150px, 24vh, 300px); padding: 0 0 8px; pointer-events: none; }
.sx-stage:empty { display: none; }
.sx-stage p { margin: 0; color: var(--g); font: 700 13px var(--f-mono); letter-spacing: .2em; text-shadow: 0 1px 8px var(--bg); }
.sx-stage h2 { margin: 0; font: 900 clamp(32px, 4vw, 52px)/1.1 var(--f-body); letter-spacing: .04em; text-shadow: 0 2px 18px var(--bg), 0 0 2px var(--bg); }
.sx-stage span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; text-shadow: 0 1px 8px var(--bg); }
.sx-stage .sx-dot { width: 8px; height: 8px; }
.sx.swap .sx-stage > * { animation: sxRise .5s cubic-bezier(.2, .8, .2, 1) both; }
.sx.swap .sx-stage h2 { animation-delay: .06s; }
.sx.swap .sx-stage span { animation-delay: .12s; }

/* 類型分頁：大塊、兩個字 */
.sx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); gap: 8px; }
.sx-tabs:empty { display: none; }
.sx-tabs button { display: flex; align-items: center; justify-content: center; gap: 12px; height: 64px; border: 2px solid var(--line); background: var(--panel); color: var(--dim); cursor: pointer;
  font: 900 20px var(--f-body); letter-spacing: .24em; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: color .15s ease, background .15s ease; }
.sx-tabs button span { margin-right: -.24em; }
.sx-tabs .i { font-size: 32px; }
.sx-tabs button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--c1) 60%, var(--line)); }
.sx-tabs button[aria-selected="true"] { background: var(--c1); border-color: var(--c1); color: var(--c1-ink); }

/* 遊戲卡：代表色＋大圖示浮水印；後台有上傳封面時用封面。桌機排成左側直欄（遊戲再多也是往下排），手機才橫向滑動 */
.sx-groups { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
@media (min-width: 1100px) {
  /* 最上面是舞台（遊戲封面），下面三欄：左欄遊戲、中間分頁＋方案＋陪玩師、右欄合計（跟方案那一列對齊，不擋到封面右側的主角）。
     合計區和選項區原本包在 .sx-board 裡，這裡把 .sx-board 攤平（display: contents）直接放進三欄 */
  .sx { grid-template-columns: 230px minmax(0, 1fr) 340px; grid-template-areas: "stage stage stage" "games tabs tabs" "games opts sum"; grid-template-rows: auto auto 1fr; column-gap: 20px; align-items: start; }
  .sx-stage { grid-area: stage; }
  .sx-tabs { grid-area: tabs; }
  .sx > .sx-board { display: contents; } /* 權重要高過下面 .sx-board 的 grid 設定 */
  .sx-opts, .sx-board > .sx-empty { grid-area: opts; }
  .sx-sum { grid-area: sum; }
  .sx-groups { grid-area: games; flex-direction: column; overflow: visible; padding: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .sx:has(.sx-groups:empty) { grid-template-areas: "stage stage stage" "tabs tabs tabs" "opts opts sum"; }
  .sx-groups .sx-game { width: 100%; height: 76px; }
  /* 中間方案列與右邊合計往下對齊左欄第二個遊戲（一格 76px＋間距 10px，扣掉空分頁列留下的 18px），封面主角露出多一點（2026-10-20 負責人要求）。
     有「陪玩／周邊」分頁列時，分頁列本身就佔了這個高度，不用再推 */
  :is(.sx-opts, .sx-sum, .sx-board > .sx-empty) { margin-top: 4px; }
  .sx:has(.sx-tabs:empty) :is(.sx-opts, .sx-sum, .sx-board > .sx-empty) { margin-top: 68px; }
}
.sx-groups:empty { display: none; }
.sx-game { --g: var(--c1); position: relative; overflow: hidden; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-content: center;
  width: 200px; height: 80px; padding: 0 14px; border: 2px solid color-mix(in srgb, var(--g) 32%, var(--line)); color: var(--ink); text-align: left; cursor: pointer;
  background: var(--cover, none) center / cover, linear-gradient(120deg, color-mix(in srgb, var(--g) 24%, var(--panel)), var(--panel) 72%); }
.sx-game::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 70%, transparent), transparent); pointer-events: none; }
.sx-game-ico { position: relative; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; color: var(--g); background: color-mix(in srgb, var(--g) 15%, var(--bg)); border: 2px solid color-mix(in srgb, var(--g) 45%, transparent); font-size: 26px; }
.sx-game b { position: relative; align-self: end; font-size: 15px; }
.sx-game small { position: relative; display: inline-flex; align-items: center; gap: 5px; color: var(--dim); font: 11px var(--f-mono); letter-spacing: .1em; }
.sx-game small .sx-dot { width: 7px; height: 7px; }
.sx-game-bg { position: absolute; right: -16px; bottom: -20px; width: 92px; height: 92px; color: var(--g); opacity: .14; }
.sx-game.has-cover::before { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 60%, color-mix(in srgb, var(--bg) 45%, transparent)); }
.sx-game.has-cover b, .sx-game.has-cover small { text-shadow: 0 1px 6px var(--bg), 0 0 2px var(--bg); }
.sx-game.has-cover .sx-game-bg { display: none; }
.sx-game:hover { border-color: color-mix(in srgb, var(--g) 70%, var(--line)); }
.sx-game[aria-pressed="true"] { border-color: var(--g); box-shadow: inset 0 -3px 0 var(--g); }
.sx-game[aria-pressed="true"] b { color: var(--g); }

/* 選項區（左）＋合計（右） */
.sx-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sx-opts { display: grid; gap: 16px; min-width: 0; }
.sx-empty { margin: 0; padding: 28px; border: 1px dashed var(--line); color: var(--dim); text-align: center; grid-column: 1 / -1; }
.sx-empty a { color: var(--c1); }
.sx-ico { display: grid; place-items: center; flex: none; width: 56px; height: 56px; color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, var(--bg)); font-size: 34px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.sx-ico.sm { width: 40px; height: 40px; font-size: 24px; }

/* 方案：跟遊戲卡一樣橫排 */
.sx-plans { display: flex; flex-wrap: wrap; gap: 8px; } /* 方案多時換行，不要藏在看不到的橫向捲動裡 */
.sx-plan { position: relative; flex: none; display: flex; align-items: center; gap: 10px; min-width: 168px; padding: 10px 18px 10px 10px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; }
.sx-plan b { display: block; font-size: 15px; }
.sx-plan small { display: block; color: var(--dim); font: 12px var(--f-mono); font-variant-numeric: tabular-nums; }
.sx-plan:hover { border-color: color-mix(in srgb, var(--c1) 60%, var(--line)); }
.sx-plan[aria-pressed="true"] { border-color: var(--c1); background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 14%, var(--panel)), var(--panel)); box-shadow: inset 0 -3px 0 var(--c1); }
.sx-plan[aria-pressed="true"] small { color: var(--c1); }
.sx-plan[aria-disabled="true"], .sx-good[aria-disabled="true"] { opacity: .5; cursor: default; }
/* 方案列右邊：價格排序、男女篩選（一顆按鈕，點一下換一種） */
.sx-bar { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sx-bar .sx-plans { flex: 1; min-width: 0; }
.sx-tools { display: flex; gap: 6px; flex: none; }
.sx-tool { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 2px solid var(--line); background: var(--panel); color: var(--dim); font: 700 14px var(--f-body); cursor: pointer; white-space: nowrap; }
.sx-tool .i { font-size: 20px; color: var(--c1); }
.sx-tool:hover { border-color: color-mix(in srgb, var(--c1) 60%, var(--line)); color: var(--ink); }
.sx-tool[aria-pressed="true"] { border-color: var(--c1); color: var(--c1); background: color-mix(in srgb, var(--c1) 10%, var(--panel)); }
.sx-badge { position: absolute; top: -1px; right: -1px; padding: 0 7px; background: var(--c2); color: var(--c1-ink); font: 700 11px/18px var(--f-body); }

/* 陪玩師：直式大照片卡。點卡片打開名片（在名片裡選他）；選中的發光、其他變暗；左上是語音條 */
.sx-cps { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
@media (min-width: 1460px) { .sx-cps { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } }
.sx-cp { position: relative; min-width: 0; transition: opacity .2s ease; }
.sx-cps:has(.sx-cp.on:not(.auto)) .sx-cp:not(.on) { opacity: .5; }
.sx-cps:has(.sx-cp.on:not(.auto)) .sx-cp:not(.on):hover { opacity: .85; }
.sx-cp-main { position: relative; width: 100%; display: grid; padding: 0; border: 2px solid var(--line); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: border-color .15s ease, box-shadow .15s ease; }
.sx-cp-main:hover { border-color: color-mix(in srgb, var(--c1) 70%, var(--line)); }
.sx-ph { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 62%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--c1) 6%, transparent) 0 2px, transparent 2px 12px), var(--panel-2); }
.sx-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sx-cp-main:hover .sx-ph img { transform: scale(1.04); }
.sx-ph-fallback { color: color-mix(in srgb, var(--c1) 70%, var(--ink)); font: 900 clamp(56px, 6vw, 84px)/1 var(--f-body); text-shadow: 0 0 24px color-mix(in srgb, var(--c1) 60%, transparent); }
.sx-ph-ico { width: 72px !important; height: 72px !important; color: var(--c1); }
.sx-cp-info { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 34px 12px 12px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 92%, transparent) 46%); }
.sx-cp-info b { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
.sx-cp-info small { color: var(--c1); font: 700 15px var(--f-display); font-variant-numeric: tabular-nums; text-align: right; }
.sx-cp.auto .sx-cp-main { border-style: dashed; border-color: color-mix(in srgb, var(--c1) 50%, var(--line)); }
.sx-cp.auto .sx-cp-info small { grid-column: 1 / -1; color: var(--dim); font: 12px var(--f-body); text-align: left; }
.sx-cp.off .sx-ph img, .sx-cp.off .sx-ph-fallback { filter: grayscale(.6) brightness(.8); }
.sx-cp-check { position: absolute; top: 10px; right: 10px; display: none; align-items: center; gap: 4px; padding: 2px 10px; background: var(--c1); color: var(--c1-ink); font: 900 13px/22px var(--f-body); }
.sx-cp-check .i { font-size: 16px; }
.sx-cp-check::after { content: "已選"; }
.sx-cp.on .sx-cp-main { border-color: var(--c1); box-shadow: inset 0 0 0 2px var(--c1), inset 0 -60px 60px -40px color-mix(in srgb, var(--c1) 45%, transparent); }
.sx-cp.on .sx-cp-check { display: inline-flex; }
.sx-cp.on { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c1) 55%, transparent)); }
.sx-sex { position: relative; top: 1px; display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: #fff; font-style: normal; }
/* 女生符號的圖形本身偏下（16 格裡佔 2.7～14.7），往上挪回正中間 */
.sx-sex.f .i { transform: translateY(-.7px); }
.sx-sex .i { width: 16px !important; height: 16px !important; }
.sx-sex.m { background: #3d8bff; }
.sx-sex.f { background: var(--c2); }
.sx-cp-info .sx-tier, .sx-pc-name .sx-tier { position: relative; top: 1px; }
.sx-pc-name .sx-sex { top: 2px; width: 24px; height: 24px; }
.sx-pc-name .sx-tier { top: 2px; }

/* 語音條：像聊天軟體的語音訊息，播放鍵＋聲波＋「語音」 */
.sx-voice { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1) 60%, transparent);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--c1); font: 700 13px var(--f-body); cursor: pointer; }
.sx-voice > .i { font-size: 16px; }
.sx-voice:hover, .sx-voice.playing { background: var(--c1); color: var(--c1-ink); }
.sx-wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.sx-wave i { width: 3px; height: 100%; background: currentColor; transform-origin: center; }
.sx-wave i:nth-child(1) { transform: scaleY(.4); } .sx-wave i:nth-child(2) { transform: scaleY(.85); } .sx-wave i:nth-child(3) { transform: scaleY(.55); }
.sx-wave i:nth-child(4) { transform: scaleY(1); } .sx-wave i:nth-child(5) { transform: scaleY(.45); }
.sx-voice.playing .sx-wave i { animation: sxWave .8s ease-in-out infinite; }
.sx-voice.playing .sx-wave i:nth-child(2) { animation-delay: -.2s; } .sx-voice.playing .sx-wave i:nth-child(3) { animation-delay: -.4s; }
.sx-voice.playing .sx-wave i:nth-child(4) { animation-delay: -.6s; } .sx-voice.playing .sx-wave i:nth-child(5) { animation-delay: -.1s; }
@keyframes sxWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.sx-av { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; object-fit: cover; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background: color-mix(in srgb, var(--c1) 22%, var(--bg)); color: var(--c1); font: 900 17px var(--f-body); }
.sx-av.sm { width: 38px; height: 38px; font-size: 15px; }
.sx-av.sx-av-rel { width: 52px; height: 52px; font-size: 20px; }
.sx-av.xl { width: 100%; height: 100%; font-size: 40px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.sx-av.any { color: var(--c1); font-size: 26px; }
.sx-av.sm.any { font-size: 22px; }

/* 商品卡 */
.sx-goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sx-good { display: grid; border: 2px solid var(--line); background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; padding: 0; min-width: 0; }
.sx-good:hover { border-color: color-mix(in srgb, var(--c1) 60%, var(--line)); }
.sx-good[aria-pressed="true"] { border-color: var(--c1); box-shadow: inset 0 0 0 1px var(--c1), 0 0 18px color-mix(in srgb, var(--c1) 30%, transparent); }
.sx-good-img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; display: grid; place-items: center; overflow: hidden; color: var(--c1); font-size: 64px;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 62%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--c1) 7%, transparent) 0 2px, transparent 2px 12px), var(--panel-2); }
.sx-good-img img { width: 100%; height: 100%; object-fit: cover; }
.sx-tag { position: absolute; left: 8px; top: 8px; padding: 1px 8px; background: var(--bg); border: 2px solid currentColor; color: var(--c1); font: 12px var(--f-body); }
.sx-tag.low { color: var(--warn); }
.sx-good-body { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px; }
.sx-good-body b { font-size: 15px; }
.sx-price { font: 700 20px/1.1 var(--f-display); color: var(--c1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-price small { color: var(--dim); font: 400 12px var(--f-body); }

/* 合計：桌機固定在右邊，內容短到不需要自己捲動 */
.sx-sum { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: grid; gap: 12px; padding: 16px; border: 2px solid var(--c1); background: var(--panel); }
.sx-sum-empty { margin: 0; color: var(--dim); text-align: center; }
.sx-sum-head { display: flex; align-items: center; gap: 10px; }
.sx-sum-head b { display: block; font-size: 17px; }
.sx-sum-head small { color: var(--dim); font-size: 12px; }
.sx-sum-desc { margin: -4px 0 0; color: var(--dim); font-size: 13px; }
.sx-sum-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--line); background: var(--bg); }
.sx-sum-who b { font-size: 15px; }
.sx-sum-x { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--dim); font-size: 20px; cursor: pointer; }
.sx-sum-x:hover { color: var(--c2); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-chips button { display: inline-flex; align-items: center; gap: 6px; min-width: 52px; justify-content: center; padding: 7px 14px; border: 2px solid var(--line); background: transparent; color: var(--dim); font: 700 14px var(--f-body); cursor: pointer; }
.sx-chips button em { font: 11px var(--f-body); font-style: normal; }
.sx-chips button[aria-pressed="true"] { border-color: var(--c1); color: var(--c1); background: color-mix(in srgb, var(--c1) 10%, transparent); }
.sx-chips button:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.sx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.sx-step { display: grid; gap: 6px; padding: 8px; border: 2px solid var(--line); }
.sx-step-label { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font: 700 13px var(--f-body); }
.sx-step-label .i { font-size: 18px; color: var(--c1); }
.sx-step-ctl { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; }
.sx-step-ctl button { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--line); background: transparent; color: var(--c1); font-size: 18px; cursor: pointer; }
.sx-step-ctl button:hover { border-color: var(--c1); }
.sx-step-ctl b { font: 700 20px var(--f-display); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-note { padding: 8px 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 14px var(--f-body); }
.sx-note:focus-visible { outline: 2px solid var(--c1); outline-offset: 1px; }
.sx-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--dim); }
.sx-total b { font: 700 28px var(--f-display); color: var(--c1); font-variant-numeric: tabular-nums; }
.sx-total b small { font-size: 14px; color: var(--dim); }
.sx-cta { width: 100%; }
.sx-cta:disabled { opacity: .45; cursor: not-allowed; }

/* 圖庫：大圖＋左右切換＋縮圖（商品在合計區、陪玩師在名片裡） */
.sx-gal { display: grid; gap: 6px; }
.sx-gal-main { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; color: var(--c1); font-size: 64px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 62%), var(--panel-2); }
.sx-gal-main img { width: 100%; height: 100%; object-fit: cover; }
.sx-gal-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border: 2px solid color-mix(in srgb, var(--c1) 50%, transparent);
  background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--c1); font-size: 20px; cursor: pointer; }
.sx-gal-nav:hover { background: var(--c1); color: var(--c1-ink); }
.sx-gal-nav.prev { left: 8px; }
.sx-gal-nav.next { right: 8px; }
.sx-gal-count { position: absolute; right: 8px; bottom: 8px; padding: 0 7px; background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--ink); font: 11px/18px var(--f-mono); }
.sx-gal-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sx-gal-thumbs button { flex: none; width: 50px; height: 50px; padding: 0; border: 2px solid var(--line); background: var(--panel-2); cursor: pointer; opacity: .6; }
.sx-gal-thumbs button[aria-pressed="true"] { border-color: var(--c1); opacity: 1; }
.sx-gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 彈窗：外框、關閉鈕用全站的 .frame（fx.js 會加上 2077 標籤頁）與 .dlg-close */
.sx-dialog { width: min(900px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.sx-dialog::backdrop { background: rgba(0, 4, 8, .86); }
.sx-dialog > .frame { --cut: 20px; position: relative; background: var(--c1); }
.sx-dialog .fi { max-height: calc(100dvh - 34px - var(--tab, 0px)); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.sx-dialog .fi::-webkit-scrollbar { display: none; }
.sx-dot { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--dim); }
.sx-dot.online { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.sx-dot.idle { background: var(--warn); }
.sx-dot.dnd { background: var(--crit); }
.sx-tier { display: inline-flex; align-items: center; gap: 3px; width: max-content; padding: 0 7px; border: 2px solid currentColor; font: 700 11px/19px var(--f-body); font-style: normal; color: var(--dim); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.sx-tier .i { font-size: 13px; }
.sx-tier.t2 { color: var(--c1); }
.sx-tier.t3 { color: var(--c2); }

/* 陪玩名片：右上一排小圖示（送禮、讚、投訴、分享）；頭像旁只放名字＋等級、一行狀態與 Discord、語音條；
   下面依序是數據、簡介、圖片、成就、關係、角色、禮物牆；底部價格與「選他」固定，避開右下斜角 */
.sx-dialog.sx-card { width: min(620px, calc(100% - 32px)); }
.sx-pc { position: relative; display: grid; gap: 20px; padding: 26px 24px 0; }
.sx-pc-acts { position: absolute; top: 18px; right: 76px; display: flex; gap: 6px; }
.sx-pc-acts :is(button, a) { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 36px; height: 36px; padding: 0 9px; border: 0; background: var(--panel-2); color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line); font: 700 13px var(--f-display); text-decoration: none; cursor: pointer; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sx-pc-acts :is(button, a) .i { font-size: 18px; }
.sx-pc-acts > :first-child .i { color: var(--c1); }
.sx-pc-acts > :nth-child(2) .i { color: var(--c2); }
.sx-pc-acts button:disabled { cursor: default; }
.sx-pc-acts :is(button:not(:disabled), a):hover { color: var(--c1); box-shadow: inset 0 0 0 1px var(--c1); }
/* 名片禮物牆：圖還沒畫好的先顯示禮物圖示 */
.sx-gift .gift-art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.sx-gift .gift-art > .i { width: 60%; height: 60%; opacity: .45; filter: none; }
.sx-gift .gift-art > img { position: absolute; inset: 0; }
.sx-pc-more { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; color: var(--c1); font-size: 13px; text-decoration: none; }
.sx-pc-more:hover { text-decoration: underline; }
.sx-share.done { color: var(--ok) !important; }
.sx-pc-head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; padding-top: 34px; }
.sx-pc-av { --tc: var(--c1); position: relative; display: block; width: 112px; height: 112px; padding: 3px; background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 30%, transparent)); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tc) 55%, transparent)); }
.sx-pc-av.t1 { --tc: color-mix(in srgb, var(--c1) 55%, var(--dim)); } .sx-pc-av.t3 { --tc: var(--c2); }
.sx-pc-id { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.sx-pc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sx-pc-name b { font: 900 28px/1.15 var(--f-body); }
.sx-pc-name .sx-tier { font-size: 12px; line-height: 21px; }
.sx-pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--dim); font-size: 13px; }
.sx-pc-meta span { padding-left: 10px; border-left: 1px solid var(--line); font-family: var(--f-mono); letter-spacing: .04em; }
.sx-pc .sx-voice.wide { position: static; height: 34px; padding: 0 14px 0 10px; font-size: 13px; }
.sx-pc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-pc-full { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 12px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1) 35%, var(--line)); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.sx-pc-full .i { font-size: 16px; color: var(--c1); }
.sx-pc-full:hover { background: var(--c1); color: var(--c1-ink); }
.sx-pc-full:hover .i { color: inherit; }
/* 從名片去完整主頁：名片先往下收、背景淡掉，再換頁 */
#sx-card.leaving > .frame { animation: sxCardOut .26s cubic-bezier(.4, 0, .8, .4) both; }
#sx-card.leaving::backdrop { animation: sxFadeOut .26s ease both; }
@keyframes sxCardOut { to { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes sxFadeOut { to { opacity: 0; } }
.sx-pc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 0; border-block: 1px solid var(--line); text-align: center; }
.sx-pc-stats div + div { border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sx-pc-stats b { display: block; font: 700 26px/1.1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sx-pc-stats small { color: var(--dim); font-size: 12px; }
.sx-pc-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ink); font: 900 15px var(--f-body); letter-spacing: .04em; }
.sx-pc-sec h3::before { content: ""; width: 4px; height: 14px; background: var(--c1); }
.sx-pc-none { margin: 0; color: var(--dim); font-size: 13px; opacity: .7; }
.sx-tagline { margin: 0 0 4px; color: var(--c1); font-size: 15px; font-weight: 700; }
.sx-pc-bio { margin: 0; color: color-mix(in srgb, var(--ink) 86%, var(--dim)); font-size: 15px; line-height: 1.8; white-space: pre-line; }
.sx-pc-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sx-pc-photos button { aspect-ratio: 1; padding: 0; border: 0; background: var(--panel-2); cursor: zoom-in; overflow: hidden; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.sx-pc-photos button:hover img { transform: scale(1.05); }
.sx-pc-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
/* 成就：發光徽章 */
.sx-achs { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-ach { --a: var(--c1); display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; color: var(--a);
  background: linear-gradient(90deg, color-mix(in srgb, var(--a) 26%, transparent), color-mix(in srgb, var(--a) 6%, transparent)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--a) 60%, transparent); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sx-ach .i, .sx-ach img { width: 28px; height: 28px; filter: drop-shadow(0 0 6px var(--a)); }
.sx-ach b { color: var(--ink); font-size: 13px; }
.sx-ach.gold { --a: #ffc75a; } .sx-ach.pink { --a: var(--c2); } .sx-ach.green { --a: var(--ok); }
/* 關係：只有頭像＋關係標籤，好奇是誰就點開；不同關係不同顏色 */
.sx-rels { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.sx-rel { --r: var(--c1); position: relative; display: block; width: 76px; padding: 0 0 16px; border: 0; background: none; cursor: pointer; } /* 不設固定高度：按鈕會把內容垂直置中，頭像就被往下推 */
.sx-rel:disabled { cursor: default; }
.sx-rel .sx-av { width: 76px; height: 76px; font-size: 26px; background: color-mix(in srgb, var(--r) 22%, var(--panel-2)); color: var(--ink); box-shadow: inset 0 0 0 2px var(--r); }
.sx-rel img.sx-av { padding: 2px; background: var(--r); }
.sx-rel em { position: absolute; left: 50%; bottom: 0; min-width: 52px; padding: 0 10px; transform: translateX(-50%); background: var(--r); color: var(--c1-ink); font: 900 14px/26px var(--f-body); letter-spacing: .06em; font-style: normal; text-align: center; white-space: nowrap; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.sx-rel:not(:disabled):hover .sx-av { filter: brightness(1.15); }
.sx-rel.cp { --r: var(--c2); } .sx-rel.friend { --r: var(--c1); } .sx-rel.bro { --r: #ffc75a; } .sx-rel.mentor { --r: var(--ok); }
.sx-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-roles a { --g: var(--c1); display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none;
  background: color-mix(in srgb, var(--g) 12%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g) 45%, var(--line)); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sx-roles a:hover { box-shadow: inset 0 0 0 1px var(--g); }
.sx-roles .i { font-size: 18px; color: var(--g); }
.sx-roles em { font-style: normal; color: var(--g); }
/* 禮物牆：之後換成 GPT 生成的禮物圖 */
.sx-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.sx-gift { display: grid; justify-items: center; gap: 4px; padding: 14px 6px 10px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c2) 18%, transparent), transparent 65%), var(--panel-2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.sx-gift .i, .sx-gift img { width: 64px; height: 64px; color: var(--c2); object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c2) 60%, transparent)); }
.sx-gift b { font-size: 13px; }
.sx-gift small { color: var(--c1); font: 700 15px var(--f-display); }
.sx-pc-buy { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 16px; margin: 0 -24px; padding: 14px 30px 16px 24px; border-top: 1px solid color-mix(in srgb, var(--c1) 40%, var(--line)); background: var(--panel); }
.sx-pc-price { font: 700 30px/1 var(--f-display); color: var(--c1); font-variant-numeric: tabular-nums; }
.sx-pc-price small { display: block; margin-top: 5px; color: var(--dim); font: 400 12px var(--f-body); }
.sx-pc-pick { margin-left: auto; }
.sx-pc > :last-child:not(.sx-pc-buy) { margin-bottom: 26px; }
/* 看大圖：蓋住整個名片，只換圖片 */
.sx-lb { position: absolute; inset: var(--tab, 0px) 0 0; z-index: 7; display: grid; place-items: center; padding: 48px 56px; background: rgb(0 4 8 / .94); }
.sx-lb[hidden] { display: none; }
.sx-lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sx-lb-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--ink); font-size: 30px; cursor: pointer; }

/* 複製訂單 */
.sx-dialog.sx-copied { width: min(440px, calc(100% - 32px)); }
.sx-copied .fi { display: grid; gap: 12px; padding: 22px; }
.sx-copied-head { display: flex; align-items: center; gap: 10px; margin: 0; padding-right: 56px; }
.sx-copied-head .i { font-size: 30px; color: var(--ok); }
.sx-copied-head b { font-size: 20px; }
.sx-copied-sub { margin: -6px 0 4px 40px; color: var(--dim); font-size: 14px; }
.sx-copied-text { margin: 0; padding: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 13px/1.7 var(--f-mono); white-space: pre-wrap; user-select: all; }

/* 圖片保護：不能選取、拖曳；圖片本身不接滑鼠事件，右鍵點到的是外框，就不會出現「另存圖片」 */
:is(.sx-ph, .sx-pc, .sx-lb, .sx-gal, .sx-good-img) img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.sx-pc-photos button, .sx-lb, .sx-ph { user-select: none; -webkit-tap-highlight-color: transparent; }
.sx-pc-photos button:focus:not(:focus-visible) { outline: none; }
.sx-lb { cursor: zoom-out; }

/* 動畫：按鈕換狀態要順、按下有回饋；換方案／遊戲時陪玩卡片依序淡入（同一份清單重畫時不重播） */
:is(.sx-tabs button, .sx-game, .sx-plan, .sx-tool, .sx-cp-main, .sx-good, .sx-chips button, .sx-step-ctl button) { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease, opacity .2s ease; }
:is(.sx-tabs button, .sx-game, .sx-plan, .sx-tool, .sx-good, .sx-chips button, .sx-step-ctl button):active { transform: scale(.97); }
.sx-game:hover, .sx-plan:hover { transform: translateY(-2px); }
.sx-cps.enter .sx-cp, .sx-goods.enter .sx-good { animation: sxRise .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.sx-plans.enter .sx-plan { animation: sxRise .3s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes sxRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sx-sum { transition: box-shadow .3s ease; }
.sx-sum.bump { animation: sxBump .35s ease; }
@keyframes sxBump { 40% { box-shadow: 0 0 0 2px var(--c1), 0 0 24px color-mix(in srgb, var(--c1) 45%, transparent); } }
/* 名片：開啟或從關係切到別人時，內容滑入 */
.sx-pc { position: relative; animation: sxCard .35s cubic-bezier(.2, .8, .2, 1) both; }
/* 從關係切到別人：像切換訊號——掃描線由上往下掃過、內容從上往下解碼出現，中間帶一點錯位閃爍（跟全站的 glitch 同一套語言） */
/* 彈窗內容預設套 fx.css 的淡入；從關係切換時要蓋過它，所以選擇器要比 html.fx dialog[open] > .frame > .fi > * 更具體 */
.sx-pc.from-rel, html.fx #sx-card[open] > .frame > .fi > .sx-pc.from-rel { animation: sxDecode .55s linear both, sxSlice .55s cubic-bezier(.2, .8, .2, 1) both; }
.sx-pc.from-rel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 28%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c1) 35%, transparent) 70%, var(--c1) 98%, transparent);
  box-shadow: 0 2px 18px var(--c1); animation: sxScanDown .55s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes sxSlice { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sxDecode {
  0% { transform: translateX(-6px); filter: drop-shadow(3px 0 var(--c2)) drop-shadow(-3px 0 var(--c1)); }
  18% { transform: translateX(5px); }
  32% { transform: translateX(-2px); filter: drop-shadow(-2px 0 var(--c2)); }
  48%, 100% { transform: none; filter: none; }
}
@keyframes sxScanDown { from { transform: translateY(-100%); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(360%); opacity: 0; } }
@keyframes sxCard { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 禮物：滑過時浮起、發光，禮物左右晃 */
.sx-gift { transition: transform .2s ease, filter .2s ease; cursor: default; }
.sx-gift:hover { transform: translateY(-4px); filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c2) 45%, transparent)); }
.sx-gift:hover :is(img, .i) { animation: sxWiggle .7s ease-in-out infinite; }
@keyframes sxWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg) scale(1.06); } 75% { transform: rotate(9deg) scale(1.06); } }
.sx-rel { transition: transform .2s ease; }
.sx-rel:not(:disabled):hover { transform: translateY(-3px); }
.sx-ach { transition: transform .2s ease; }
.sx-ach:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .sx-cps.enter .sx-cp, .sx-goods.enter .sx-good, .sx-plans.enter .sx-plan, .sx-pc, html.fx #sx-card[open] > .frame > .fi > .sx-pc.from-rel, .sx-pc.from-rel::before, .sx.swap .sx-backdrop, .sx-sum.bump, .sx-gift:hover :is(img, .i) { animation: none; }
}

/* 矮螢幕（筆電＋瀏覽器工具列）：橫幅和合計區收緊一點，進來就看得到「複製訂單」 */
@media (min-width: 1100px) and (max-height: 820px) {
  .sx-stage { min-height: 140px; } /* 矮螢幕還是留一段封面；複製訂單按鈕需要時往下捲一點 */
  .sx-tabs button { height: 50px; }
  .sx { row-gap: 14px; }
  .sx-stage h2 { font-size: 34px; }
  .sx-sum { gap: 8px; padding: 12px 14px; }
  .sx-sum-head .sx-ico.sm { width: 34px; height: 34px; font-size: 20px; }
  .sx-step { padding: 6px; gap: 4px; }
  .sx-total { padding-top: 6px; }
}
/* 商店頁的電台播放鍵靠到最右邊，不要壓到右欄的合計區 */
@media (min-width: 1100px) {
  body:has(#sx) .radio { right: 14px; width: 58px; grid-template-columns: 58px; justify-items: end; } /* 只有播放鍵那麼寬；標籤和面板從右邊往左長 */
  body:has(#sx) .radio-panel { justify-self: end; margin-left: 0; }
}

/* 說明小圖示：滑過或按 Tab 顯示說明框 */
.sx-tip { position: relative; display: inline-grid; place-items: center; margin-left: 2px; color: var(--dim); cursor: help; outline: none; }
.sx-tip > .i { font-size: 15px; color: inherit !important; }
.sx-tip:hover, .sx-tip:focus-visible { color: var(--c1); }
.sx-tip-box { position: absolute; z-index: 20; right: -10px; bottom: calc(100% + 10px); width: 240px; padding: 10px 12px; background: var(--panel-2); color: var(--ink); font: 400 13px/1.6 var(--f-body);
  box-shadow: inset 0 0 0 2px var(--c1), 0 10px 28px rgb(0 0 0 / .6); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.sx-tip:hover .sx-tip-box, .sx-tip:focus-visible .sx-tip-box { opacity: 1; transform: none; }

/* 小提示（複製連結等） */
.sx-toast { position: fixed; left: 50%; bottom: 96px; z-index: 120; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 18px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ok); font: 700 14px var(--f-body); transition: opacity .2s ease, transform .2s ease; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.sx-toast .i { width: 18px; height: 18px; color: var(--ok); }
.sx-toast.show { opacity: 1; transform: translate(-50%, 0); }
dialog .sx-toast { position: absolute; bottom: 90px; }

/* 手機：選項一欄往下排，合計跟在後面；底部固定一條總價列可以直接複製 */
.sx-sticky { display: none; }
@media (max-width: 860px) {
  .sx-board { grid-template-columns: minmax(0, 1fr); }
  .sx-sum { position: static; }
  .sx-stage { min-height: 200px; }
  .sx-tabs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .sx-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .sx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-plan { min-width: 0; padding-right: 10px; }
  .sx-game b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sx-tools .sx-tool { flex: 1; justify-content: center; height: 40px; }
  .sx-tabs button { height: 56px; gap: 8px; font-size: 18px; }
  .sx-tabs .i { font-size: 26px; }
  .sx-game { width: 150px; height: 66px; }
  .sx-game-ico { width: 36px; height: 36px; font-size: 21px; }
  .sx-cps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sx-cp-info { padding: 28px 10px 10px; }
  .sx-cp-info b { font-size: 15px; }
  .sx-goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-good-body { flex-direction: column; gap: 2px; }
  .sx-pc { gap: 16px; padding: 18px 16px 0; }
  .sx-pc-acts { top: 14px; right: 66px; }
  .sx-pc-head { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding-top: 40px; }
  .sx-pc-av { width: 88px; height: 88px; }
  .sx-pc-name b { font-size: 22px; }
  .sx-pc-stats b { font-size: 22px; }
  .sx-pc-buy { margin: 0 -16px; padding: 12px 26px 14px 16px; }
  .sx-pc-price { font-size: 24px; }
  .sx-lb { padding: 48px 12px; }
  .sx-sticky:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; align-items: center; gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--c1); background: var(--panel); color: var(--dim); }
  .sx-sticky b { font: 700 22px var(--f-display); color: var(--c1); }
  .sx-sticky b small { font-size: 13px; color: var(--dim); }
  .sx-sticky .btn { margin-left: auto; min-height: 44px; }
  body:has(.sx-sticky:not([hidden])) footer { padding-bottom: 76px; }
  body:has(.sx-sticky:not([hidden])) .radio { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sx-voice.playing .sx-wave i { animation: none; } .sx-ph img, .sx-backdrop { transition: none; } }

/* 切角按鈕的斜角也要有邊框：clip-path 裁掉的斜角不會畫框線，支援 corner-shape 的瀏覽器（Chrome、Edge、Brave）改用 bevel 切角，
   框線、hover／選取的顏色都會沿著斜角走；不支援的瀏覽器照舊用 clip-path。overflow: hidden 讓裡面的圖片一樣被切角 */
@supports (corner-shape: bevel) {
  .sx-tabs button, .sx-cp-main, .sx-voice, .sx-pc-acts :is(button, a), .sx-pc-full, .sx-pc-photos button, .sx-ach, .sx-roles a, .sx-tip-box, .sx-toast { clip-path: none; corner-shape: bevel; overflow: hidden; }
  .sx-tabs button, .sx-cp-main { border-radius: 0 14px 0 14px; }
  .sx-pc-photos button, .sx-tip-box { border-radius: 0 10px 0 10px; }
  .sx-voice, .sx-pc-acts :is(button, a), .sx-ach, .sx-roles a, .sx-toast { border-radius: 0 8px 0 8px; }
  .sx-pc-full { border-radius: 0 7px 0 7px; }
}

/* 禮物圖的預留圖示：只有圖片載入失敗（.miss）才顯示 */
.gift-art > .i { display: none; }
.gift-art.miss > .i { display: block; }

/* 成就小卡：真資料用 achievements.js 的圖（有圖用圖，沒圖用暫時圖示） */
.sx-ach-ico { display: inline-block; width: 28px; height: 28px; flex: none; }
.sx-ach-ico .ach-art > .i { inset: 0; width: 100%; height: 100%; }

/* ───── 網站下單（第二期） ───── */
.sx-tiers { display: grid; gap: 6px; }
.sx-tiers small { color: var(--dim); font-size: 12px; }
.sx-chips button em { font: 12px var(--f-body); font-style: normal; color: var(--dim); }
.sx-chips button[aria-pressed="true"] em { color: inherit; }
.sx-alt { justify-self: center; padding: 4px 8px; border: 0; background: none; color: var(--dim); font: 13px var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sx-alt:hover:not(:disabled) { color: var(--ink); }
.sx-alt:disabled { opacity: .4; cursor: not-allowed; }
.sx-rate { font-style: normal; color: var(--c2); }
.sx-dialog.sx-order { width: min(480px, calc(100% - 32px)); }
.sx-order .fi { display: grid; gap: 12px; padding: 22px; }
.sx-order h3 { margin: 0; padding-right: 56px; font-size: 20px; }
.sx-od-rows { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 2px solid var(--line); background: var(--bg); }
.sx-od-rows div { display: flex; gap: 12px; align-items: baseline; }
.sx-od-rows dt { flex: none; width: 3.5em; color: var(--dim); font-size: 13px; }
.sx-od-rows dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.sx-od-time { display: grid; gap: 8px; }
.sx-od-time input[type="datetime-local"] { width: 100%; padding: 9px 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: 15px var(--f-body); color-scheme: dark; }
.sx-od-time input:focus-visible { outline: 2px solid var(--c1); outline-offset: 1px; }
.sx-od-hint { margin: 0; color: var(--dim); font-size: 13px; }
.sx-od-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--dim); }
.sx-od-total b { font: 700 28px var(--f-display); color: var(--c1); font-variant-numeric: tabular-nums; }
.sx-od-total b small { font-size: 14px; color: var(--dim); }
.sx-od-bal { margin: -6px 0 0; color: var(--dim); font-size: 13px; text-align: right; }
.sx-od-bal:empty { display: none; }
.sx-od-bal.short { color: var(--c2); font-weight: 700; }
.sx-od-rules { margin: 0; padding-left: 1.2em; color: var(--dim); font-size: 12.5px; display: grid; gap: 4px; }
.sx-od-error { margin: 0; padding: 8px 10px; border: 2px solid var(--c2); color: var(--c2); font-size: 14px; }

/* 語音條旁邊的音量（2026-10-20，整站共用，companion-card.js）：每個語音條旁邊一顆喇叭；滑桿只有一個，打開時放在最上層（popover），用畫面座標定位，不會被卡片切掉 */
.sx-voice-row { display: inline-flex; align-items: center; gap: 6px; }
.sx-voice-row:not(.wide) { position: absolute; top: 10px; left: 10px; z-index: 1; }
.sx-voice-row:not(.wide) .sx-voice { position: static; }
.sx-voice-row:not(.wide) .sx-vol-btn { width: 32px; height: 32px; background: rgb(2 8 11 / .72); }
.sx-vol-btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: var(--c1); cursor: pointer;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1) 40%, transparent); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.sx-vol-btn .i { font-size: 18px; }
.sx-vol-btn:hover, .sx-vol-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--c1) 16%, var(--panel, #0b1418)); }
.sx-vol-btn.muted { color: var(--dim); }
.sx-vol-btn.muted .i { opacity: .5; }
.sx-vol-pop { position: fixed; inset: auto; z-index: 1000; display: flex; align-items: center; gap: 10px; width: max-content; margin: 0; padding: 10px 12px; border: 0; overflow: visible;
  background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 60%, var(--line)), 0 10px 24px rgb(0 0 0 / .5); }
.sx-vol-pop[popover]:not(:popover-open), .sx-vol-pop[hidden] { display: none; }
.sx-vol-pop input { width: 150px; accent-color: var(--c1); cursor: pointer; }
.sx-vol-pop output { min-width: 38px; color: var(--ink); font: 12px var(--f-mono); text-align: right; }