/* 星光競技場：全遊戲共用的呈現主題，沿用既有元件與輸入介面。 */
/* 點擊盒保持大，縮小不透明底板；不以縮小觸控判定換取乾淨畫面。 */
.arena-ui { --touch-target:72px; --touch-inset:9px; }
.arena-ui[data-touch-size=small] { --touch-target:64px; --touch-inset:7px; }
.arena-ui[data-touch-size=large] { --touch-target:84px; --touch-inset:12px; }
.arena-ui .touch-controls { padding:8px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
.arena-ui .move-pad,.arena-ui .action-pad { grid-template-columns:repeat(2,var(--touch-target)); gap:6px; width:calc(var(--touch-target)*2 + 6px); }
.arena-ui .touch-controls button:not(.power-control) { position:relative; isolation:isolate; width:var(--touch-target); min-width:var(--touch-target); height:var(--touch-target); min-height:var(--touch-target); padding:4px; border:0; background:transparent; box-shadow:none; opacity:1; filter:none; transform:none; gap:3px; }
.arena-ui .touch-controls button:not(.power-control)::before { content:''; position:absolute; z-index:-1; inset:var(--touch-inset); border:1px solid #d0e9ff99; border-radius:18px; background:linear-gradient(145deg,#24456899,#303d6ea6); box-shadow:inset 0 1px 0 #ffffff30,0 2px 5px #10213e33; transition:background .1s,transform .1s,box-shadow .1s; }
.arena-ui .touch-controls button:not(.power-control) .touch-icon { color:#f4faff; font-size:26px; text-shadow:0 1px 3px #11203e; }
.arena-ui .touch-controls button:not(.power-control) small { color:#fff; font-size:10px; text-shadow:0 1px 3px #11203e; }
.arena-ui .touch-controls button[data-control=smash]::before { border-color:#ffe1a0b0; background:linear-gradient(145deg,#785776a6,#6e496399); }
.arena-ui .touch-controls button:not(.power-control).pressed::before { transform:scale(.93); background:linear-gradient(145deg,#4aa7cabf,#567ad9d9); border-color:#fff0b8; box-shadow:inset 0 0 8px #fff9,0 0 7px #8ce9ff70; }
.arena-ui .touch-controls button[data-control=smash].pressed::before { background:linear-gradient(145deg,#eaa964e6,#d9758be6); }
.arena-ui .status.quiet-status { visibility:hidden; }
#pause-modal .touch-size-setting { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 8px; font-size:14px; }
#pause-modal .touch-size-setting select { min-height:44px; min-width:110px; padding:6px 10px; color:#eff8ff; background:#294467; border:1px solid #adcbef70; border-radius:12px; font:inherit; }
#pause-modal .preference-note { padding:0 8px; color:#bfd5ea; line-height:1.5; font-size:11px; }
.arena-ui.reduced-motion .touch-controls button,.arena-ui.reduced-motion .touch-controls button::before,.arena-ui.reduced-motion .result-card { animation:none !important; transition:none !important; }
.arena-ui #pause-button { gap:0; grid-template-rows:18px 12px; align-content:center; line-height:1; }
.arena-ui #pause-button > span { font-size:18px; }
.arena-ui #pause-button > small { font-size:10px; font-weight:900; }
#pause-modal { padding:12px; }
#pause-modal .hidden { display:none; }
#pause-modal .pause-card { width:min(540px,100%); max-width:540px; max-height:calc(100dvh - 24px); overflow:auto; box-sizing:border-box; padding:24px; }
#pause-modal .pause-card h2 { font-size:28px; margin:8px 0; }
#pause-modal .pause-summary { margin:6px 0 16px; color:#d7e8ff; font-size:15px; }
#pause-modal .pause-actions-grid { margin:0; gap:12px; }
#pause-modal .pause-btn { min-height:48px; padding:10px 12px; font-size:15px; }
#pause-modal #resume-game { background:linear-gradient(145deg,#ff87ab,#f76996); color:#fff; box-shadow:0 4px 0 #b9436a; font-size:19px; min-height:54px; border:1px solid #ffd2e3; }
#pause-modal .pause-secondary-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#pause-modal .pause-secondary-row .pause-btn { background:#334b71; border:1px solid #abc7e566; box-shadow:none; color:#eff8ff; }
#pause-modal #pause-confirm-yes { background:#f8759f; color:#fff; }
#pause-modal .pause-settings { text-align:left; border:1px solid #a9c5e644; border-radius:15px; background:#172c4a55; }
#pause-modal .pause-settings summary { min-height:44px; padding:10px 16px; box-sizing:border-box; cursor:pointer; font-size:14px; font-weight:800; }
#pause-modal .pause-settings-options { display:grid; gap:8px; padding:0 10px 10px; }
#pause-modal .pause-settings-options .pause-btn { background:#294467; color:#e4f3ff; border:1px solid #adcbef44; box-shadow:none; }
#pause-modal .pause-key-hint { font-size:12px; color:#bfd5ea; margin:14px 0 0; }
#pause-modal .pause-confirm h3 { font-size:24px; margin:12px 0; }
#pause-modal .pause-confirm p { line-height:1.6; font-size:15px; margin:0 0 18px; }
@media (max-height:480px) {
  #pause-modal .pause-card { padding:14px 18px; }
  #pause-modal .pause-card h2 { font-size:22px; margin:4px 0; }
  #pause-modal .result-kicker { font-size:11px; }
  #pause-modal .pause-summary { font-size:13px; margin:4px 0 10px; }
  #pause-modal .pause-actions-grid { gap:8px; }
  #pause-modal .pause-btn,#pause-modal #resume-game { min-height:44px; padding:8px; font-size:14px; }
  #pause-modal .pause-key-hint { margin-top:8px; font-size:11px; }
}
.arena-ui .pause-button,.arena-ui .fullscreen-button,.arena-ui #record-toggle { border-radius:50%; border-color:#ffdf9899; background:linear-gradient(145deg,#304c76e8,#454478d9); box-shadow:inset 0 1px 0 #ffffff40,0 3px 8px #10213e30; }
.arena-ui .question-card { border:2px solid #f2d78d; box-shadow:0 16px 44px #10213e66,inset 0 1px 0 #fff; }
.arena-ui .question-kicker { color:#85602d; letter-spacing:.08em; }
.arena-ui .question-prompt { line-height:1.45; }
.arena-ui { --game-paper:#f5faff; --game-muted:#bed3eb; --game-gold:#ffe0a0; --game-line:#93bae442; background:radial-gradient(ellipse at top,#315781,#101d38 72%); color:#eff8ff; }
.arena-ui button { font-family:inherit; }
.arena-ui button:focus-visible,.arena-ui summary:focus-visible,.arena-ui select:focus-visible { outline:3px solid #ffe5a5; outline-offset:3px; }
.arena-ui button:disabled { cursor:not-allowed; }
.arena-ui .main-menu-shade { background:linear-gradient(90deg,#091b48a6,#101b3a08 85%); }
.arena-ui .main-menu { justify-items:start; padding:clamp(16px,4vw,64px); }
.arena-ui .main-menu .main-menu-card { width:min(590px,100%); padding:26px 32px 18px; border:1px solid #ffe5a573; border-radius:32px; background:linear-gradient(145deg,#1e3a63ed,#232c52ed); box-shadow:0 25px 80px #08102e6b,inset 0 1px 0 #ffffff33; color:#eff8ff; }
.arena-ui .main-menu .main-menu-kicker { color:var(--game-gold); font-size:11px; }
.arena-ui .home-game-logo { width:min(420px,100%); }
.arena-ui .main-menu .main-menu-subtitle { color:#f5faff; font-size:17px; }
.arena-ui .main-menu .main-menu-story p { color:var(--game-muted); font-size:14px; }
.arena-ui .main-menu .main-menu-story-en { color:#bed3eb !important; font-size:12px !important; opacity:1; }
.arena-ui .main-menu-actions #enter-game { min-height:64px; background:linear-gradient(#ff91b4,#fa6b99); border:1px solid #ffc5d8; text-shadow:0 1px 1px #ac4061; }
.arena-ui .main-menu-actions .main-menu-secondary { background:#ffffff0d; border:1px solid #b5d5ed55; color:#dbefff; box-shadow:none; }
.arena-ui .main-menu-actions .main-menu-secondary:hover { background:#ffffff20; }
.arena-ui .main-menu-actions #exit-game { background:transparent; color:#b9cee4; }
.arena-ui .main-menu-actions #open-instructions { grid-column:1/-1; }
.arena-ui .settings-card { width:min(560px,100%); }
.arena-ui .settings-card .keybind-section { margin:18px 0; }
.arena-ui .menu-setting-options { display:grid; gap:8px; }
.arena-ui .menu-setting-options button { min-height:48px; padding:10px 14px; border:1px solid #9acbd9; border-radius:14px; color:#173b58; background:#e2f3f8; font:700 15px inherit; cursor:pointer; }
.arena-ui .menu-setting-options button[aria-pressed="true"] { border-color:#bc953b; background:#fff4d9; }
.arena-ui .settings-card .main-menu-kicker { color:#926629; }
@media (max-width:400px) { .arena-ui .settings-card { padding:24px 14px 16px; } .arena-ui .settings-card .keybind-grid { grid-template-columns:1fr 1fr; } }
.arena-ui .main-menu-privacy { color:#aec3dc; font-size:11px; }
.arena-ui .main-menu-exit-note { background:#33476e; color:#edf7ff; }
.arena-ui .character-select { background:linear-gradient(#101e3cae,#102845d9),url('assets/story/scene-05-let-match-begin.webp') center/cover; padding:16px; }
.arena-ui .character-select-card { width:min(1200px,100%); padding:18px 24px 12px; position:relative; border:1px solid #ffe0a05e; border-radius:28px; background:linear-gradient(145deg,#233c5ff5,#252e51f5); box-shadow:0 22px 70px #0005; color:#f5faff; }
.arena-ui .character-select-card > .eyebrow { display:none; }
.arena-ui .character-select-card #menu-title { font-size:28px; margin:8px 170px 6px; color:#fff5da; }
.arena-ui .setup-brand { position:absolute; top:18px; left:24px; width:145px; display:flex; flex-direction:column; align-items:center; }
.setup-brand img { width:145px; height:55px; object-fit:contain; }
.setup-brand span { font-size:10px; color:#b4d0e6; }
.arena-ui .character-select .character-select-card .menu-home { position:absolute; top:22px; left:auto; right:24px; min-height:44px; font-size:11px; border:1px solid #aac7e14d; background:#ffffff0b; color:#d9eafa; box-shadow:none; }
.arena-ui .menu-progress { margin:4px 0 14px; display:flex; justify-content:center; gap:5px; }
.arena-ui .menu-progress span { color:#b2c9e0; background:#ffffff0c; padding:8px 22px; font-size:13px; border:1px solid transparent; }
.arena-ui .menu-progress span.active { color:#fff1c9; background:#886ab04d; border-color:#ffdb8d75; box-shadow:none; }
.arena-ui .setup-context { margin:0 0 8px; text-align:center; color:#aac3dd; font-size:12px; min-height:18px; }
.arena-ui .step-actions { background:#233a5b; border-top:1px solid #93bae432; padding:12px 4px 4px; }
.arena-ui #menu-step-character .step-actions { background:#233a5b; border-color:#93bae432; }
.arena-ui .step-actions .menu-back { background:#ffffff0f; color:#cee4f8; border:1px solid #aac7e14d; box-shadow:none; }
.arena-ui .step-actions .menu-next,.arena-ui .step-actions .start-match { background:linear-gradient(#ff92b4,#f56a98); color:#fff; border:1px solid #ffc8dc73; box-shadow:0 4px 0 #ad4267; }
.arena-ui #menu-step-mode .step-content { display:block; padding:8px; }
.arena-ui .game-mode-options { display:block; width:100%; max-width:980px; margin:0 auto 18px; padding:0; background:none; border:none; }
.arena-ui .game-mode-options > label { display:none; }
.arena-ui .mode-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; }
.arena-ui .mode-card-grid .mode-button { display:flex; flex-direction:column; align-items:center; position:relative; padding:20px 12px 16px; min-height:258px; border-radius:24px; background:linear-gradient(160deg,#f6fbff,#dceff7); border:2px solid #adc9de; color:#294964; box-shadow:0 7px 0 #112c4255; letter-spacing:0; }
.arena-ui .mode-card-grid .mode-button.selected { border-color:#ffe0a0; background:linear-gradient(155deg,#fffcdf,#fae5a9); box-shadow:0 0 0 3px #fff3cc22,0 7px 0 #0f253d55; }
.arena-ui .mode-card-grid .mode-button.selected::after { content:'✓ 已選'; position:absolute; top:10px; right:10px; border-radius:20px; padding:4px 9px; background:#f5bf57; color:#523716; font-size:11px; }
.arena-ui .mode-card-grid .mode-button:disabled::after { content:'鍵盤限定'; position:absolute; top:8px; right:6px; border-radius:12px; padding:3px 5px; background:#314765; color:#fff; font-size:9px; }
.mode-art { display:flex; justify-content:center; align-items:end; height:116px; margin-bottom:12px; }
.mode-art img { width:84px; height:112px; object-fit:contain; filter:drop-shadow(0 5px 3px #204f6325); }
#mode-series .mode-art img { width:69px; }
.mode-title { font-size:24px; }
.mode-en { font-size:10px; letter-spacing:1.5px; margin:6px 0 12px; opacity:.7; }
.arena-ui .mode-card-grid .mode-description { color:#547083; font-size:13px; line-height:1.5; }
.arena-ui .game-mode-options > small { display:block; font-size:13px; line-height:1.6; color:#c6daee; margin:14px 0 0; }
.arena-ui .cpu-difficulty-options { padding:16px 20px; background:#ffffff0a; border:1px solid #93bae42e; border-radius:18px; }
.arena-ui .cpu-difficulty-options > label { display:block; color:#d3e8fa; margin:0 0 10px; font-size:13px; }
.arena-ui #difficulty-buttons { display:flex; gap:10px; justify-content:center; }
.arena-ui #difficulty-buttons .mode-button { min-height:48px; flex:1; max-width:230px; background:#ffffff0c; color:#c7dff4; border:1px solid #93bae44d; border-radius:14px; box-shadow:none; }
.arena-ui #difficulty-buttons .mode-button.selected { background:#57739d; color:#fff8de; border-color:#ffe0a090; }
.arena-ui .arena-option { border:2px solid #7596b465; border-radius:20px; background:#ffffff0d; color:#e9f7ff; padding:8px; box-shadow:0 4px 0 #12264155; overflow:hidden; }
.arena-ui .arena-option.selected { border-color:#ffe0a0; background:#ffe0a013; }
.arena-ui .arena-option strong { color:#eff9ff; font-size:17px; }
.arena-ui .arena-option small { color:#b5cae2; font-size:11px; }
.arena-ui .arena-thumb { border-radius:12px; box-shadow:inset 0 0 0 1px #fff2; }
.arena-ui .advanced-settings { margin:14px 0; padding:12px 16px; border:1px solid #93bae435; border-radius:16px; background:#ffffff08; color:#c4dbed; }
.arena-ui .advanced-settings summary { min-height:44px; display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.arena-ui .advanced-settings summary::before { content:'＋'; color:#ffe0a0; font-size:20px; }
.arena-ui .advanced-settings[open] summary::before { content:'−'; }
.arena-ui .learning-options { color:#c5ddf2; }
.arena-ui .learning-options select { background:#ecf5fd; border:1px solid #b2d1ea; color:#294964; min-height:44px; }
.arena-ui .learning-options small { color:#ffdfa1; }
.arena-ui #menu-step-character .pet-choice-guide { background:#ffffff09; border:1px solid #9bb6d63b; color:#e5f4ff; }
.arena-ui #pet-choice-step { background:#7969a4; color:#fff4d7; }
.arena-ui #pet-choice-hint { color:#b8cfe5; }
.arena-ui #menu-step-character .select-side { background:#ffffff08; border-color:#92b5d14d; }
.arena-ui #menu-step-character .select-side.is-picking { border-color:#ffdfa186; background:#ffe2a010; box-shadow:none; }
.arena-ui #menu-step-character .selected-pet-info strong { color:#eaf6ff; }
.arena-ui #menu-step-character .selected-pet-detail { background:#ffffff08; color:#cfe5f5; border:1px solid #a6c6e142; }
.arena-ui #menu-step-character .pet-picker-switch .picker-tab { background:#ffffff0d; color:#bfd7ef; border:1px solid #a6c6e14a; box-shadow:none; }
.arena-ui #menu-step-character .pet-picker-switch .picker-tab.active { background:#8b69aa65; color:#fff1cb; border-color:#ffe0a090; }
.arena-ui #menu-step-character .pet-filter-bar button { background:#ffffff08; color:#bed6ed; border:1px solid #93bae43a; }
.arena-ui #menu-step-character .pet-filter-bar button.active { color:#fff4d2; border-color:#ffe0a083; background:#ffe0a019; }
.arena-ui #menu-step-character .shared-pet-options { background:none; border:0; }
.arena-ui #menu-step-character .pet-hero { background:radial-gradient(ellipse at 50% 20%,#fff4cf,#dcecf8); border:2px solid #ffe0a073; color:#294964; }
.arena-ui #menu-step-character .shared-pet-options .pet-option { background:linear-gradient(145deg,#eaf5fd,#d9eaf6); border-color:#a6c8df; box-shadow:0 4px 0 #11284433; }
.arena-ui #menu-step-character .shared-pet-options .pet-option.selected { border-color:#ffd469; background:linear-gradient(#fff8d9,#ffe9af); box-shadow:0 0 0 2px #ffeda729,0 4px 0 #11284433; }
.arena-ui .pet-team-slot { background:#ffffff0b; border-color:#c5a56c88; color:#edf6ff; }
.arena-ui .character-select[data-team-mode=true] #menu-step-character .pet-picker-switch { display:none; }
.arena-ui .character-select[data-team-mode=true] #menu-step-character .pet-team-slots { grid-column:1/-1; grid-row:3; }
.arena-ui .game-shell { max-width:1480px; }
.arena-ui #result-card .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* 招式鍵固定可辨識；未集滿仍顯示進度，不讓按鈕突然出現。 */
.arena-ui .touch-controls .power-control { font-size:14px; line-height:1.2; font-weight:900; padding:5px; opacity:1; border:2px solid #ffdc8b; color:#fff4ce; background:linear-gradient(145deg,#364664,#534166); }
.arena-ui .touch-controls .power-control.ready { color:#263451; background:linear-gradient(145deg,#fff0aa,#ffc45c); border-color:#fff5cc; box-shadow:0 0 14px #ffd77780; }
@media (orientation:landscape) and (max-height:540px) {
  .arena-ui .action-pad .power-control { left:auto; right:max(10px,env(safe-area-inset-right)); top:64px; width:92px; min-width:92px; height:48px; min-height:48px; border-radius:15px; }
}
/* 動態搖桿：扣球靠內，蓄能在右上，兩個觸控區保留間距。 */
@media (orientation:landscape) and (pointer:coarse) {
  .arena-ui.gesture-mode:not(.training-active) .action-pad { position:relative; width:calc(var(--touch-target) + 44px); height:calc(var(--touch-target) + 68px); display:block; pointer-events:none; }
  .arena-ui.gesture-mode:not(.training-active) .action-pad [data-control="smash"] { position:absolute; left:0; bottom:0; pointer-events:auto; }
  .arena-ui.gesture-mode:not(.training-active) .action-pad .power-control { position:absolute; left:auto; right:0; top:0; width:92px; min-width:92px; height:56px; min-height:56px; border-radius:16px; pointer-events:auto; }
}
.arena-ui .topbar { align-items:center; padding:0 6px 6px; height:48px; }
.match-logo { width:124px; height:44px; object-fit:contain; }
.match-rule { margin-left:auto; color:#bdd3ec; font-size:12px; letter-spacing:.04em; }
.arena-ui .topbar > div,.arena-ui .topbar .hint { display:none; }
.arena-ui .stage-wrap { border:2px solid #e5c99380; border-radius:22px; background:linear-gradient(#10243ae8,#142d49ed),url('assets/runtime/star-arena/arena/star-arena-grandstand.webp') center/cover; box-shadow:0 14px 48px #060f2b80; }
.arena-ui .status { font-size:11px; color:#a5bdd7; }
.arena-ui .learning-strip { position:absolute; z-index:7; top:82px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); min-height:44px; box-sizing:border-box; gap:8px; padding:5px 8px; border:1px solid #8fd3ed70; border-radius:16px; background:#20395df2; color:#e7f8ff; box-shadow:0 3px 12px #071a2d40; }
.arena-ui #learning-icon { border:0; cursor:pointer; width:36px; height:36px; flex:0 0 36px; padding:2px; border-radius:10px; background:#fff7e8; }
.arena-ui #learning-icon:focus-visible { outline:3px solid #ffe6a6; outline-offset:2px; }
.arena-ui .learning-copy { flex:none; column-gap:7px; }
.arena-ui #learning-word { font-size:19px; max-width:150px; }
.arena-ui #learning-translation { font-size:13px; }
.arena-ui #learning-progress { display:none; max-width:220px; font-size:11px; }
.arena-ui .learning-strip.expanded #learning-progress { display:block; }
.arena-ui .learning-voice-status { display:none; }
.arena-ui .learning-strip.expanded .learning-voice-status:not(:empty) { display:block; max-width:120px; font-size:11px; }
@media (max-height:540px) and (orientation:landscape) {
  body.arena-ui { padding:0; overflow:hidden; }
  .arena-ui .game-shell { width:100%; height:100dvh; margin:0; padding:0; }
  .arena-ui .topbar,.arena-ui .status { display:none; }
  .arena-ui .stage-wrap { width:100%; height:100%; min-height:0; max-height:100dvh; box-sizing:border-box; }
  .arena-ui .stage-wrap canvas { width:100%; height:100%; object-fit:contain; }
  .arena-ui .learning-strip { top:76px; max-width:310px; gap:5px; padding:3px 6px; }
  .arena-ui #learning-word { font-size:17px; max-width:128px; }
  .arena-ui #learning-translation { font-size:12px; }
  .arena-ui .learning-strip.expanded .learning-voice-status:not(:empty) { position:absolute; top:100%; left:0; max-width:100%; padding:3px 8px; border-radius:8px; background:#20395df2; }
}
.arena-ui .learning-copy strong { color:#eafaff; }
/* 實際可視範圍包含瀏覽器工具列變動，覆蓋舊版 100vh／全螢幕規則。 */
body.arena-ui.mobile-viewport { padding:0; overflow:hidden; }
.arena-ui.mobile-viewport .game-shell { position:fixed; left:var(--visible-left,0px); top:var(--visible-top,0px); width:var(--visible-width,100vw); height:var(--visible-height,100dvh); max-width:none; margin:0; padding:0; }
.arena-ui.mobile-viewport .stage-wrap { width:100% !important; height:100% !important; min-height:0; max-height:var(--visible-height,100dvh) !important; box-sizing:border-box; }
.arena-ui.mobile-viewport .stage-wrap canvas { width:100%; height:100%; object-fit:contain; }
.arena-ui.mobile-viewport .topbar,.arena-ui.mobile-viewport .status { display:none !important; }
.arena-ui.mobile-landscape .learning-strip { top:62px; max-width:min(310px,calc(100% - 24px)); }
.arena-ui.mobile-landscape .learning-strip:not(.expanded) { min-height:44px; }
.arena-ui .learning-copy span,.arena-ui .learning-copy small { color:#bddeed; }
.arena-ui .learning-strip button { background:#e9f8ff; color:#315775; min-height:44px; }
.arena-ui .modal,.arena-ui .question-layer,.arena-ui .instructions-panel,.arena-ui .storybook-layer,.arena-ui .pet-detail-layer { background:#09172ec9; }
.arena-ui .result-card,.arena-ui .pause-card { background:radial-gradient(ellipse at top,#3b5682,#202d51 75%); border:1px solid #ffe0a080; border-radius:28px; color:#f0f8ff; box-shadow:0 25px 80px #02081780; }
.arena-ui .result-card h2 { color:#f5faff; }
.arena-ui .result-kicker { color:#ffe0a0; }
.arena-ui .result-animate .result-kicker { animation:menuFadeUp .4s .18s ease both; }
.arena-ui .final-score { color:#ffebbb; text-shadow:0 3px 0 #ae8544; }
.arena-ui .result-pets { background:radial-gradient(ellipse,#a6c6ff18,transparent); }
.arena-ui .result-pets div,.arena-ui .result-pets span { color:#c5dff3; }
.arena-ui .stats { gap:8px; }
.arena-ui .stats > span { border:1px solid #b4d3f42a; background:#ffffff09; border-radius:16px; padding:12px 8px; color:#b8d0e9; font-size:12px; }
.arena-ui .stats b { color:#fff6da; margin-top:8px; }
.arena-ui .play-again { background:linear-gradient(#ff92b4,#f56a98); border:1px solid #ffd0df55; }
.arena-ui .back-pawlish { background:#ffffff0b; border:1px solid #abc9e66b; color:#daedff; box-shadow:none; }
.arena-ui .instructions-card,.arena-ui .storybook-card,.arena-ui .pet-detail-card,.arena-ui .question-card,.arena-ui .training-card { border-width:2px; border-color:#e6c783; box-shadow:0 20px 60px #03102d66; }
.arena-ui .instruction-grid > div { border:1px solid #b5d3e4; background:linear-gradient(#eefaff,#d8edf9); }
.arena-ui .question-card { background:linear-gradient(150deg,#fbf8e9,#e3f5fb); border-radius:28px; }
.arena-ui .answer-grid button { min-height:52px; box-shadow:0 4px 0 #a2bccb55; border-radius:16px; }

/* 題卡優先放大實際圖片與答案；窄螢幕保留完整操作區。 */
.arena-ui .question-card { width:min(620px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; overflow:auto; padding:24px; }
.arena-ui .question-kicker { font-size:16px; letter-spacing:.04em; }
.arena-ui .question-prompt { font-size:24px; line-height:1.35; }
.arena-ui #question-icon { font-size:100px; margin:12px auto; }
.arena-ui #question-icon:has(.steps-word-card-image) { width:160px; height:160px; }
.arena-ui .answer-grid { gap:12px; }
.arena-ui .answer-grid button { min-height:64px; font-size:22px; padding:12px 8px; overflow-wrap:anywhere; }
.arena-ui .word-replay,.arena-ui .question-close { font-size:16px; min-height:48px; }
@media (max-width:480px) {
  .arena-ui .question-card { padding:18px 14px; }
  .arena-ui .question-prompt { font-size:21px; }
  .arena-ui .answer-grid { grid-template-columns:1fr; gap:10px; }
  .arena-ui .answer-grid button { min-height:52px; font-size:21px; }
  .arena-ui #question-icon:has(.steps-word-card-image) { width:128px; height:128px; }
}
@media (orientation:landscape) and (max-height:540px) {
  .arena-ui .question-card { display:grid; grid-template-columns:104px minmax(0,1fr); grid-template-areas:'kicker kicker' 'prompt prompt' 'icon answers' 'replay close'; gap:8px 12px; padding:12px 16px; max-height:calc(100dvh - 16px); }
  .arena-ui .question-kicker { grid-area:kicker; font-size:13px; }
  .arena-ui .question-prompt { grid-area:prompt; font-size:19px; margin:0; }
  .arena-ui #question-icon { grid-area:icon; font-size:72px; align-self:center; margin:0 auto; }
  .arena-ui #question-icon:has(.steps-word-card-image) { width:100px; height:100px; }
  .arena-ui .answer-grid { grid-area:answers; grid-template-columns:repeat(3,minmax(0,1fr)); align-self:center; gap:8px; margin:0; }
  .arena-ui .answer-grid button { min-height:58px; padding:8px 4px; font-size:18px; }
  .arena-ui .word-replay { grid-area:replay; }
  .arena-ui .question-close { grid-area:close; justify-self:end; }
  .arena-ui .word-replay,.arena-ui .question-close { margin:0; min-height:44px; padding:6px 8px; font-size:12px; }
}

@media (max-width:700px) {
  .arena-ui .main-menu { justify-items:center; padding:12px; }
  .arena-ui .main-menu .main-menu-card { padding:22px 18px 16px; }
  .arena-ui .character-select { padding:8px; }
  .arena-ui .character-select-card { padding:12px 12px 8px; border-radius:22px; }
  .arena-ui .setup-brand { display:none; }
  .arena-ui .character-select-card #menu-title { font-size:22px; margin:52px 0 8px; }
  .arena-ui .character-select .character-select-card .menu-home { top:10px; left:12px; right:auto; }
  .arena-ui .mode-card-grid { gap:8px; }
  .arena-ui .mode-card-grid .mode-button { padding:18px 6px 10px; min-height:184px; }
  .mode-art { height:74px; margin:8px 0; }
  .mode-art img { width:40px; height:72px; }
  #mode-series .mode-art img { width:27px; }
  .mode-title { font-size:16px; }
  .mode-en { font-size:8px; letter-spacing:.5px; margin:6px 0; }
  .arena-ui .mode-card-grid .mode-description { font-size:11px; }
  .arena-ui #difficulty-buttons .mode-button { font-size:12px; }
  .arena-ui .cpu-difficulty-options { padding:12px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .arena-ui .main-menu { justify-items:center; padding:10px; }
  .arena-ui .main-menu .main-menu-card { width:min(750px,100%); padding:14px 20px; }
  .arena-ui .character-select { padding:6px; }
  .arena-ui .character-select-card { padding:8px 12px 6px; }
  .arena-ui .setup-brand,.arena-ui .setup-context { display:none; }
  .arena-ui .character-select-card #menu-title { display:none; }
  .arena-ui .character-select .character-select-card .menu-home { top:6px; left:12px; right:auto; }
  .arena-ui .menu-progress { margin:2px 0 8px; }
  .arena-ui .menu-progress span { padding:6px 10px; font-size:12px; }
  .arena-ui #menu-step-character .step-content { gap:4px 8px; padding-top:0; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option { height:122px; min-height:122px; max-height:122px; padding:6px 4px; gap:2px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:66px; height:66px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; max-width:94px; }
  .arena-ui #menu-step-character .pet-hero { grid-template-rows:24px 24px auto auto; padding:4px 6px; }
  .arena-ui #menu-step-character .pet-hero > img { height:50px; }
  .arena-ui .character-select[data-team-mode=true] #menu-step-character .pet-picker-switch { display:none; }
  .arena-ui .character-select[data-team-mode=true] #menu-step-character .pet-team-slots { grid-column:1/-1; grid-row:1; gap:6px; min-height:44px; }
  .arena-ui #menu-step-mode .step-content { display:grid; grid-template-columns:minmax(0,2fr) minmax(170px,1fr); gap:12px; }
  .arena-ui .mode-card-grid { gap:7px; }
  .arena-ui .mode-card-grid .mode-button { min-height:168px; padding:14px 4px 10px; }
  .mode-art { height:64px; margin:6px 0; }
  .mode-art img { width:39px; height:62px; }
  #mode-series .mode-art img { width:27px; }
  .mode-title { font-size:16px; }
  .mode-en { font-size:8px; margin:5px 0; letter-spacing:.5px; }
  .arena-ui .mode-card-grid .mode-description { font-size:10px; }
  .arena-ui .game-mode-options { margin-bottom:0; }
  .arena-ui .game-mode-options > small { margin-top:8px; font-size:10px; }
  .arena-ui .cpu-difficulty-options { padding:10px; }
  .arena-ui #difficulty-buttons { gap:5px; flex-direction:column; }
  .arena-ui #difficulty-buttons .mode-button { width:100%; min-height:44px; flex:initial; font-size:12px; }
  .arena-ui .cpu-difficulty-options > label { font-size:11px; }
  .arena-ui .step-actions,.arena-ui #menu-step-character .step-actions { padding:6px 0 0; }
  .arena-ui .topbar { display:none; }
  .arena-ui .stage-wrap { border-width:1px; border-radius:12px; }
  .arena-ui .stats > span { padding:5px; font-size:10px; border-radius:10px; }
  .arena-ui .stats b { margin-top:2px; }
}
@media (prefers-reduced-motion:no-preference) {
  .arena-ui button { transition:background .15s,box-shadow .15s,border-color .15s; }
  .arena-ui .mode-card-grid .mode-button:hover:not(:disabled),.arena-ui .arena-option:hover { border-color:#ffdfa1; }
}

/* 選角減法：對戰摘要就是切換鈕，角色列表優先，特性集中於下方。 */
.trait-icon { width:18px; height:18px; flex-shrink:0; vertical-align:middle; color:#7bccef; }
.trait-label { display:inline-flex; align-items:center; gap:5px; font-weight:800; white-space:nowrap; }
.trait-power { color:#f6b656; }
.trait-defense { color:#69cabc; }
.trait-jump,.trait-air { color:#bc9ce7; }
.trait-float { color:#9ed3e4; }
.trait-balance { color:#dfb550; }
.arena-ui #menu-step-character .pet-name small { display:flex; align-items:center; justify-content:center; gap:4px; }
.arena-ui #menu-step-character .pet-name .trait-icon { width:15px; height:15px; color:#39718f; }
.arena-ui #menu-step-character .pet-hero-copy > span .trait-icon { width:14px; height:14px; }
.arena-ui .pet-detail-traits > span { display:inline-flex; align-items:center; gap:5px; }
.arena-ui .pet-detail-traits .trait-icon,.arena-ui #pet-detail-role .trait-icon { color:#39718f; }
.arena-ui .character-select[data-step=character] .setup-brand,
.arena-ui .character-select[data-step=character] .setup-context { display:none; }
.arena-ui .character-select[data-step=character] .character-select-card { padding:14px 22px 10px; }
.arena-ui .character-select[data-step=character] #menu-title { display:block; margin:4px 160px 14px; font-size:26px; }
.arena-ui .character-select[data-step=character] .menu-home { left:22px; right:auto; top:12px; font-size:0; }
.arena-ui .character-select[data-step=character] .menu-home::after { content:'← 主選單'; font-size:13px; }
.arena-ui .character-select[data-step=character] .menu-progress { position:absolute; right:22px; top:16px; margin:0; }
.arena-ui .character-select[data-step=character] .menu-progress span { display:none; }
.arena-ui .character-select[data-step=character] .menu-progress [data-step-indicator=character] { display:block; font-size:0; padding:8px 12px; }
.arena-ui .character-select[data-step=character] .menu-progress [data-step-indicator=character]::after { content:'3 / 3'; font-size:13px; }
.arena-ui #menu-step-character .step-content { display:flex; flex-direction:column; gap:10px; padding:4px 3px 10px; scrollbar-gutter:auto; }
.arena-ui #menu-step-character .pet-choice-guide { position:absolute; width:1px; height:1px; padding:0; margin:0; overflow:hidden; clip-path:inset(50%); border:0; }
.arena-ui #menu-step-character .select-versus { display:grid; grid-template-columns:1fr 36px 1fr; width:min(740px,100%); gap:8px; margin:0 auto; flex-shrink:0; }
.arena-ui #menu-step-character .select-side { display:block; position:relative; padding:0; min-height:72px; border-radius:16px; }
.arena-ui #menu-step-character .select-side.is-picking::after { display:none; }
.arena-ui #menu-step-character .matchup-picker { display:grid; grid-template-columns:58px minmax(0,1fr); grid-template-rows:auto auto; gap:2px 12px; align-content:center; align-items:center; width:100%; min-height:72px; margin:0; padding:8px 48px 8px 14px; border:0; border-radius:15px; background:transparent; box-shadow:none; color:#d7e9fc; text-align:left; }
.arena-ui #menu-step-character .matchup-picker > img { grid-column:1; grid-row:1/3; width:54px; height:54px; margin:0; object-fit:contain; }
.arena-ui #menu-step-character .matchup-picker .picker-caption { grid-column:2; grid-row:1; font-size:12px; color:#bdd2e7; }
.arena-ui #menu-step-character .matchup-picker .select-label { display:none; }
.arena-ui #menu-step-character .matchup-picker .selected-pet-info { grid-column:2; grid-row:2; margin:0; padding:0; }
.arena-ui #menu-step-character .matchup-picker .selected-pet-info strong { font-size:19px; }
.arena-ui #menu-step-character .selected-pet-detail { position:absolute; right:4px; top:14px; width:44px; min-height:44px; padding:0; margin:0; border:0; background:transparent; font-size:0; }
.arena-ui #menu-step-character .selected-pet-detail::after { content:'ⓘ'; font-size:21px; }
.arena-ui #menu-step-character .pet-team-slots:not([hidden]) { display:flex; width:min(740px,100%); margin:0 auto; gap:8px; flex-shrink:0; }
.arena-ui #menu-step-character .pet-team-slot { flex:1; min-width:0; width:auto; min-height:44px; font-size:12px; }
.arena-ui #menu-step-character .pet-team-slot img { width:32px; height:32px; }
.arena-ui #menu-step-character .pet-filter-bar { display:flex; align-items:flex-start; flex-wrap:wrap; overflow:visible; gap:6px; width:100%; flex-shrink:0; }
.arena-ui #menu-step-character .pet-filter-bar > button { min-height:44px; font-size:13px; }
.pet-filter-details { flex:1; min-width:140px; text-align:right; }
.pet-filter-details summary { display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; cursor:pointer; color:#c8ddf2; font-size:13px; border-radius:12px; }
.pet-filter-details summary::after { content:'⌄'; margin-left:8px; }
.pet-filter-details[open] summary::after { content:'⌃'; }
.pet-filter-choices { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; padding:4px 0; }
.arena-ui #menu-step-character .shared-pet-options { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; max-width:none; padding:3px; gap:10px; margin:0; overflow:visible; flex-shrink:0; }
.arena-ui #menu-step-character .shared-pet-options .pet-option { flex:none; min-height:112px; height:clamp(112px,17vh,154px); max-height:none; padding:8px 6px; gap:3px; }
.arena-ui #menu-step-character .shared-pet-options .pet-option img { width:clamp(58px,8.5vh,82px); height:clamp(58px,8.5vh,82px); }
.arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:17px; }
.arena-ui #menu-step-character .shared-pet-options .pet-name small { display:block; font-size:11px; white-space:nowrap; }
.arena-ui #menu-step-character .pet-hero { display:block; position:relative; padding:10px 14px; width:100%; border:1px solid #a2c1e445; border-radius:16px; background:#ffffff08; color:#d9eafa; flex-shrink:0; }
.arena-ui #menu-step-character .pet-hero > img { display:none; }
.arena-ui #menu-step-character .pet-hero-copy { display:grid; grid-template-columns:1fr minmax(280px,1fr) auto; gap:4px 18px; text-align:left; align-items:center; }
.arena-ui #menu-step-character .pet-hero-copy h3 { grid-column:1; grid-row:1; margin:0; font-size:18px; color:#fff0c5; }
.arena-ui #menu-step-character .pet-hero-copy > span { grid-column:1; grid-row:2; padding:0; color:#bed3e8; font-size:12px; }
.arena-ui #menu-step-character .pet-hero-copy > span::after { content:none; }
.arena-ui #menu-step-character .pet-hero-copy p { display:none; }
.arena-ui #menu-step-character .pet-hero-stats { grid-column:2; grid-row:1/3; display:flex; justify-content:space-between; gap:12px; margin:0; }
.arena-ui #menu-step-character .pet-hero-stats > span { display:grid; justify-items:start; gap:5px; font-size:12px; }
.arena-ui #menu-step-character .pet-hero-stats .stat-bars i { width:12px; height:7px; }
.arena-ui #menu-step-character .pet-hero-copy > strong { grid-column:3; grid-row:1; color:#ffe0a0; font-size:12px; }
.arena-ui #menu-step-character #pet-hero-detail { position:static; grid-column:3; grid-row:2; min-height:44px; width:auto; margin:0; padding:4px; color:#bedaf0; font-size:12px; }
.arena-ui #menu-step-character #pet-hero-detail::after { content:none; }
.arena-ui #menu-step-character .pet-scroll-hint { display:none; }
.arena-ui #menu-step-character .step-actions { padding:10px 0 4px; }
.arena-ui #menu-step-character .step-actions button { min-height:48px; font-size:16px; }
@media (max-width:900px) {
  .arena-ui #menu-step-character .shared-pet-options { display:flex !important; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; padding:4px 3px 10px; gap:8px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option { flex:0 0 116px; height:138px; scroll-snap-align:start; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:72px; height:72px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:16px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name small { font-size:10px; }
  .arena-ui #menu-step-character .pet-hero-copy { grid-template-columns:1fr auto; gap:4px 8px; }
  .arena-ui #menu-step-character .pet-hero-copy > span { font-size:11px; }
  .arena-ui #menu-step-character .pet-hero-stats { grid-column:1/-1; grid-row:3; justify-content:flex-start; gap:18px; }
  .arena-ui #menu-step-character .pet-hero-copy > strong { grid-column:2; grid-row:1; }
  .arena-ui #menu-step-character #pet-hero-detail { grid-column:2; grid-row:2; }
}
@media (max-width:500px) {
  .arena-ui .character-select[data-step=character] .character-select-card { padding:10px 10px 6px; }
  .arena-ui .character-select[data-step=character] #menu-title { font-size:20px; margin:6px 66px 14px; }
  .arena-ui .character-select[data-step=character] .menu-home { left:10px; top:8px; }
  .arena-ui .character-select[data-step=character] .menu-home::after { content:'← 返回'; font-size:12px; }
  .arena-ui .character-select[data-step=character] .menu-progress { right:10px; top:12px; }
  .arena-ui #menu-step-character .select-versus { grid-template-columns:1fr 20px 1fr; gap:4px; }
  .arena-ui #menu-step-character .matchup-picker { grid-template-columns:32px minmax(0,1fr); gap:2px 5px; padding:6px 6px 6px 8px; min-height:70px; }
  .arena-ui #menu-step-character .matchup-picker > img { width:32px; height:40px; }
  .arena-ui #menu-step-character .matchup-picker .picker-caption { font-size:10px; }
  .arena-ui #menu-step-character .matchup-picker .selected-pet-info strong { font-size:14px; }
  .arena-ui #menu-step-character .selected-pet-detail { display:none; }
  .arena-ui #menu-step-character .versus-mark { font-size:13px; }
  .arena-ui #menu-step-character .step-actions { gap:6px; }
  .arena-ui #menu-step-character .step-actions button { font-size:13px; padding:8px 12px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .arena-ui .character-select[data-step=character] .character-select-card { padding:8px 12px 6px; }
  .arena-ui .character-select[data-step=character] #menu-title { font-size:19px; margin:0 120px 8px; }
  .arena-ui .character-select[data-step=character] .menu-home { top:6px; left:12px; }
  .arena-ui .character-select[data-step=character] .menu-progress { right:12px; top:9px; }
  .arena-ui #menu-step-character .step-content { gap:6px; }
  .arena-ui #menu-step-character .select-versus { width:100%; }
  .arena-ui #menu-step-character .matchup-picker { min-height:48px; grid-template-columns:34px 1fr; padding:4px 48px 4px 8px; gap:0 8px; }
  .arena-ui #menu-step-character .select-side { min-height:48px; }
  .arena-ui #menu-step-character .matchup-picker > img { width:34px; height:40px; }
  .arena-ui #menu-step-character .matchup-picker .selected-pet-info strong { font-size:16px; }
  .arena-ui #menu-step-character .selected-pet-detail { top:2px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option { height:118px; min-height:118px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:58px; height:58px; }
  .arena-ui #menu-step-character .pet-hero-stats { grid-column:2; grid-row:1/3; gap:6px; }
  .arena-ui #menu-step-character .pet-hero-copy { grid-template-columns:minmax(0,1fr) minmax(170px,1fr) auto; }
  .arena-ui #menu-step-character .pet-hero-copy > strong,.arena-ui #menu-step-character #pet-hero-detail { grid-column:3; }
  .arena-ui #menu-step-character .pet-hero { padding:6px 8px; }
  .arena-ui #menu-step-character .step-actions { padding:6px 0 0; }
  .arena-ui #menu-step-character .step-actions button { min-height:44px; font-size:13px; padding:6px 12px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .arena-ui #menu-step-character .step-content { display:grid; grid-template-columns:minmax(0,1fr) 184px; grid-template-rows:auto auto auto; gap:4px 8px; padding:2px 2px 4px; }
  .arena-ui #menu-step-character .select-versus { grid-column:1; grid-row:1; grid-template-columns:1fr 20px 1fr; gap:3px; }
  .arena-ui #menu-step-character .matchup-picker { padding:4px 6px; gap:0 4px; }
  .arena-ui #menu-step-character .matchup-picker .selected-pet-info strong { font-size:14px; }
  .arena-ui #menu-step-character .matchup-picker .picker-caption { font-size:10px; }
  .arena-ui #menu-step-character .selected-pet-detail { display:none; }
  .arena-ui #menu-step-character .versus-mark { font-size:14px; }
  .arena-ui #menu-step-character .pet-filter-bar { grid-column:2; grid-row:1; flex-wrap:nowrap; align-items:center; gap:3px; }
  .arena-ui #menu-step-character .pet-filter-bar > button { padding:5px 6px; font-size:11px; flex-shrink:0; }
  .arena-ui #menu-step-character .pet-filter-details { min-width:0; }
  .arena-ui #menu-step-character .pet-filter-details summary { padding:4px; font-size:11px; white-space:nowrap; }
  .arena-ui #menu-step-character .pet-filter-details summary::after { margin-left:3px; }
  .arena-ui #menu-step-character .pet-filter-details[open] .pet-filter-choices { position:absolute; right:12px; top:90px; width:220px; padding:8px; border-radius:12px; background:#203557; border:1px solid #adc7e36b; box-shadow:0 8px 24px #0006; z-index:5; }
  .arena-ui #menu-step-character .shared-pet-options { grid-column:1/-1; grid-row:2; padding:3px 2px 6px; min-height:102px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option { height:92px; min-height:92px; padding:5px 4px; gap:2px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:42px; height:42px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:15px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name small { font-size:9px; }
  .arena-ui .character-select[data-step=character] #menu-title { margin-bottom:4px; }
  .arena-ui #menu-step-character .pet-hero { grid-column:1/-1; grid-row:3; padding:3px 8px; }
  .arena-ui #menu-step-character .pet-hero-copy { gap:2px 8px; }
  .arena-ui #menu-step-character .pet-hero-copy h3 { font-size:15px; }
  .arena-ui #menu-step-character .pet-hero-copy > span { font-size:10px; }
  .arena-ui #menu-step-character .pet-hero-copy > strong { font-size:10px; }
  .arena-ui #menu-step-character #pet-hero-detail { min-height:44px; font-size:11px; padding:0; grid-row:1/3; }
  .arena-ui #menu-step-character .pet-hero-copy > strong { display:block; grid-column:1; grid-row:3; font-size:9px; }
  .arena-ui #menu-step-character .pet-hero-stats { grid-row:1/4; }
  .arena-ui #menu-step-character #pet-hero-detail { grid-row:1/4; }
  .arena-ui #menu-step-character .pet-hero-stats .stat-bars { gap:2px; }
  .arena-ui #menu-step-character .pet-hero-stats .stat-bars i { width:8px; height:6px; }
  .arena-ui #menu-step-character .pet-hero-stats > span { font-size:11px; }
  .arena-ui .character-select[data-team-mode=true] #menu-step-character .select-versus { display:none; }
  .arena-ui .character-select[data-team-mode=true] #menu-step-character .pet-team-slots { grid-column:1; grid-row:1; gap:4px; }
  .arena-ui #menu-step-character .pet-team-slot { gap:3px; font-size:10px; }
  .arena-ui #menu-step-character .pet-team-slot img { width:26px; height:30px; }
  .arena-ui #menu-step-character .step-actions { padding:0; }
  .arena-ui #menu-step-character .trait-label { gap:3px; }
  .arena-ui #menu-step-character .trait-label .trait-icon { width:12px; height:12px; }
  .arena-ui #menu-step-character .pet-name .trait-icon { width:10px; height:10px; }
  .arena-ui #menu-step-character .pet-hero-copy > span .trait-icon { width:11px; height:11px; }
}

/* 玩法與難度同屏：只調整第一步，不影響場地／角色流程。 */
.arena-ui .character-select[data-step=mode] .character-select-card { width:min(1080px,100%); padding:14px 20px 10px; }
.arena-ui .character-select[data-step=mode] #menu-title { font-size:26px; margin:4px 0; }
.arena-ui .character-select[data-step=mode] .setup-brand { width:110px; top:12px; left:16px; }
.arena-ui .character-select[data-step=mode] .setup-brand img { width:110px; height:42px; }
.arena-ui .character-select[data-step=mode] .setup-brand span,.arena-ui .character-select[data-step=mode] .setup-context { display:none; }
.arena-ui #menu-step-mode .step-content { display:grid; grid-template-columns:1fr; gap:12px; padding:8px 2px 12px; scrollbar-gutter:auto; }
.arena-ui #menu-step-mode .game-mode-options { width:100%; margin:0; padding:0; box-sizing:border-box; }
.arena-ui #menu-step-mode .mode-card-grid { gap:12px; }
.arena-ui #menu-step-mode .mode-card-grid .mode-button { min-height:0; padding:12px 8px; gap:4px; border-radius:20px; }
.arena-ui #menu-step-mode .mode-art { height:82px; margin:0 0 4px; }
.arena-ui #menu-step-mode .mode-art img { height:80px; width:64px; }
.arena-ui #menu-step-mode #mode-series .mode-art img { width:52px; }
.arena-ui #menu-step-mode .mode-title { font-size:22px; }
.arena-ui #menu-step-mode .mode-en { margin:0; font-size:10px; }
.arena-ui #menu-step-mode .mode-description { font-size:12px; margin:4px 0 0; }
.arena-ui #menu-step-mode #series-hint { display:none; }
.arena-ui #menu-step-mode .cpu-difficulty-options { padding:10px 12px; }
.arena-ui #menu-step-mode .cpu-difficulty-options > label { margin:0 0 6px; }
.arena-ui #menu-step-mode #difficulty-hint { margin:6px 0 0; font-size:12px; }
.arena-ui #menu-step-mode .step-actions { padding:8px 0 4px; }
@media (max-width:600px) and (orientation:portrait) {
  .arena-ui .character-select[data-step=mode] { padding:8px; }
  .arena-ui .character-select[data-step=mode] .character-select-card { padding:12px 10px 8px; }
  .arena-ui .character-select[data-step=mode] #menu-title { font-size:21px; margin:44px 0 6px; }
  .arena-ui .character-select[data-step=mode] .setup-brand { display:none; }
  .arena-ui .character-select[data-step=mode] .menu-home { top:8px; right:10px; min-height:44px; padding:6px 10px; font-size:11px; }
  .arena-ui .character-select[data-step=mode] .menu-progress { margin:0 0 4px; }
  .arena-ui .character-select[data-step=mode] .menu-progress span { padding:6px 14px; }
  .arena-ui #menu-step-mode .step-content { gap:10px; padding:6px 2px 10px; }
  .arena-ui #menu-step-mode .mode-card-grid { grid-template-columns:1fr; gap:8px; }
  .arena-ui #menu-step-mode .mode-card-grid .mode-button { display:grid; grid-template-columns:94px 1fr; grid-template-rows:auto auto auto; text-align:left; padding:8px 10px; gap:2px 10px; }
  .arena-ui #menu-step-mode .mode-art { grid-column:1; grid-row:1/4; height:60px; margin:0; }
  .arena-ui #menu-step-mode .mode-art img { height:58px; width:40px; }
  .arena-ui #menu-step-mode #mode-series .mode-art img { width:29px; }
  .arena-ui #menu-step-mode .mode-title { font-size:19px; padding-right:34px; }
  .arena-ui #menu-step-mode .mode-en { font-size:9px; }
  .arena-ui #menu-step-mode .mode-description { margin:0; font-size:11px; }
  .arena-ui #menu-step-mode .mode-button.selected::after { content:'✓'; top:8px; right:8px; padding:3px 6px; }
  .arena-ui #menu-step-mode #difficulty-buttons { flex-direction:row; gap:6px; }
  .arena-ui #menu-step-mode #difficulty-buttons button { min-height:44px; padding:6px 4px; font-size:12px; }
}
@media (max-height:600px) and (orientation:landscape) {
  .arena-ui .character-select[data-step=mode] { padding:6px; }
  .arena-ui .character-select[data-step=mode] .character-select-card { padding:6px 10px; max-height:calc(100dvh - 12px); }
  .arena-ui .character-select[data-step=mode] #menu-title,.arena-ui .character-select[data-step=mode] .setup-brand { display:none; }
  .arena-ui .character-select[data-step=mode] .menu-progress { margin:0 0 6px; }
  .arena-ui .character-select[data-step=mode] .menu-progress span { padding:5px 12px; font-size:12px; }
  .arena-ui .character-select[data-step=mode] .menu-home { min-height:44px; top:4px; right:8px; padding:4px 8px; font-size:10px; }
  .arena-ui #menu-step-mode .step-content { grid-template-columns:minmax(0,1fr) 180px; gap:8px; padding:6px 0 10px; align-items:center; }
  .arena-ui #menu-step-mode .mode-card-grid { gap:6px; }
  .arena-ui #menu-step-mode .mode-card-grid .mode-button { padding:12px 4px 8px; gap:3px; }
  .arena-ui #menu-step-mode .mode-art { height:52px; margin:0; }
  .arena-ui #menu-step-mode .mode-art img { height:50px; width:35px; }
  .arena-ui #menu-step-mode #mode-series .mode-art img { width:25px; }
  .arena-ui #menu-step-mode .mode-title { font-size:16px; }
  .arena-ui #menu-step-mode .mode-en { font-size:8px; letter-spacing:.5px; }
  .arena-ui #menu-step-mode .mode-description { font-size:10px; }
  .arena-ui #menu-step-mode .mode-button.selected::after { content:'✓'; top:3px; right:4px; padding:1px 4px; font-size:10px; }
  .arena-ui #menu-step-mode .cpu-difficulty-options { padding:6px; }
  .arena-ui #menu-step-mode #difficulty-buttons { flex-direction:column; gap:4px; }
  .arena-ui #menu-step-mode #difficulty-buttons button { min-height:44px; flex:none; padding:4px; font-size:12px; }
  .arena-ui #menu-step-mode #difficulty-hint { font-size:10px; line-height:1.3; }
  .arena-ui #menu-step-mode .step-actions button { min-height:44px; padding:6px 16px; }
}
@media (max-height:360px) and (orientation:landscape) {
  .arena-ui #menu-step-mode #difficulty-hint,.arena-ui #menu-step-mode .mode-description { display:none; }
  .arena-ui #menu-step-mode .step-content { padding:2px 0 6px; }
  .arena-ui #menu-step-mode .step-actions { padding:4px 0 0; }
}

@font-face { font-family:'Pawlish Huninn'; src:url('assets/runtime/ui/fonts/jf-openhuninn-2.1.ttf') format('truetype'); font-weight:400; font-display:swap; }
.arena-ui #menu-step-character .pet-name strong,.arena-ui #menu-step-character .pet-hero-copy h3,.arena-ui #menu-step-character .selected-pet-info strong { font-family:'Pawlish Huninn',ui-rounded,'Microsoft JhengHei',sans-serif; font-weight:900; letter-spacing:.04em; }
.arena-ui #menu-step-character .shared-pet-options .pet-option { height:clamp(148px,20vh,184px); min-height:148px; padding:6px; gap:3px; }
.arena-ui #menu-step-character .shared-pet-options .pet-option img { width:clamp(86px,13vh,122px); height:clamp(86px,13vh,122px); object-fit:contain; filter:drop-shadow(0 4px 3px #203d5324); }
.arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:22px; color:#284a65; line-height:1.15; text-shadow:0 1px 0 #fff; }
.arena-ui #menu-step-character .shared-pet-options .pet-name small { font-size:11px; }
@media (max-width:700px) and (orientation:portrait) {
  .arena-ui #menu-step-character .shared-pet-options .pet-option { flex-basis:138px; height:174px; min-height:174px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:110px; height:110px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:20px; }
}
@media (max-height:600px) and (orientation:landscape) {
  .arena-ui #menu-step-character .shared-pet-options .pet-option { height:132px; min-height:132px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:78px; height:78px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:18px; }
}
@media (max-height:420px) and (orientation:landscape) {
  .arena-ui #menu-step-character .shared-pet-options .pet-option { height:112px; min-height:112px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:62px; height:62px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:16px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name small { font-size:9px; }
}

/* 結算專用樣式，不套用到暫停選單。 */
.arena-ui #result-modal { padding:12px; background:#08142dbd; }
.arena-ui #result-card { display:flex; flex-direction:column; gap:10px; width:min(720px,100%); max-height:calc(100dvh - 24px); overflow:auto; padding:22px 24px; box-sizing:border-box; border:2px solid #ffe1a08c; border-radius:32px; background:radial-gradient(ellipse at 50% 18%,#47648c,#233657 65%,#1b2948); }
.arena-ui #result-card > * { grid-area:auto; margin:0; flex-shrink:0; }
.arena-ui #result-card .result-kicker { color:#ffe1a0; font-size:16px; letter-spacing:.12em; }
.arena-ui #result-card h2 { font-family:'Pawlish Huninn',ui-rounded,sans-serif; font-size:30px; line-height:1.2; }
.arena-ui #result-card .result-pets { height:auto; min-height:0; display:flex; align-items:end; justify-content:center; gap:44px; padding:4px 0; background:none; }
.arena-ui #result-card .result-pets > div { position:relative; gap:6px; font-size:12px; letter-spacing:0; }
.arena-ui #result-card .result-pets img { width:144px; height:144px; object-fit:contain; }
.arena-ui #result-card .result-pets img.winner { filter:drop-shadow(0 0 12px #ffe69870); }
.arena-ui #result-card .result-pets img.loser { width:116px; height:116px; opacity:.8; }
.arena-ui #result-card .result-pets > div:has(img.winner)::before { content:'★ 勝方'; position:absolute; top:0; right:-24px; padding:3px 8px; border-radius:20px; background:#ffe4a2; color:#705321; font-size:11px; }
.arena-ui #result-card .result-score-block { text-align:center; }
.arena-ui #result-card .result-score-caption { font-size:11px; letter-spacing:.08em; color:#bdd2ea; }
.arena-ui #result-card .final-score { margin:0; font-family:'Pawlish Huninn',ui-rounded,sans-serif; font-size:72px; line-height:1.15; color:#ffe8ab; text-shadow:0 3px 0 #a8753950; }
.arena-ui #result-card { overflow-x:hidden; }
.arena-ui #result-card .stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.arena-ui #result-card .stats > span { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; padding:12px 4px; background:#ffffff08; border:1px solid #b2d2ec30; border-radius:16px; font-size:13px; }
.arena-ui #result-card .stats small { font-size:9px; color:#a8bdd6; }
.arena-ui #result-card .stats b { margin:0; color:#fff0c9; font-size:27px; line-height:1.15; }
.arena-ui #result-card .result-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:4px; }
.arena-ui #result-card .result-actions button { min-height:48px; margin:0; padding:10px 8px; font-size:13px; line-height:1.3; }
.arena-ui #result-card #play-again { grid-column:1/-1; min-height:56px; font-size:19px; border-radius:18px; }
.arena-ui #result-card #change-pets,.arena-ui #result-card #back-to-pawlish { background:#ffffff06; box-shadow:none; border:1px solid #b2d2ec50; }
.arena-ui #result-card .series-result-pets { gap:16px; }
.arena-ui #result-card .result-team { width:48%; }
.arena-ui #result-card .result-team-members { display:flex; flex-direction:row; justify-content:center; gap:4px; }
.arena-ui #result-card .result-team-member { min-width:0; }
.arena-ui #result-card .result-team-member img { width:76px; height:80px; }
@media (max-width:600px) and (orientation:portrait) {
  .arena-ui #result-card { padding:14px 12px; border-radius:24px; gap:6px; }
  .arena-ui #result-card h2 { font-size:25px; }
  .arena-ui #result-card .result-pets { gap:26px; }
  .arena-ui #result-card .result-pets img { width:112px; height:112px; }
  .arena-ui #result-card .result-pets img.loser { width:94px; height:94px; }
  .arena-ui #result-card .final-score { font-size:58px; }
  .arena-ui #result-card .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .arena-ui #result-card .stats > span { padding:6px 4px; gap:2px; }
  .arena-ui #result-card .stats b { font-size:23px; }
  .arena-ui #result-card .result-actions button { font-size:11px; }
  .arena-ui #result-card .series-result-pets { flex-direction:row; gap:6px; }
  .arena-ui #result-card .result-team-member img { width:42px; height:56px; }
  .arena-ui #result-card .result-team-member span { font-size:9px; }
}

/* 選角同屏：詳細數值仍可由上方資訊鈕開啟，字幕取代重複詳情面板。 */
.arena-ui #menu-step-character .pet-hero { display:none; }
.arena-ui #menu-step-character .step-content { gap:8px; padding:2px 3px 8px; }
.arena-ui #menu-step-character .select-side,.arena-ui #menu-step-character .matchup-picker { min-height:60px; }
.arena-ui #menu-step-character .matchup-picker { padding-top:4px; padding-bottom:4px; }
.arena-ui #menu-step-character .pet-filter-bar { margin:0; }
.arena-ui #menu-step-character .pet-filter-bar > button { min-height:44px; padding:6px 12px; }
.arena-ui #menu-step-character .shared-pet-options { gap:8px; }
.arena-ui #menu-step-character .shared-pet-options .pet-option { height:clamp(130px,17dvh,158px); min-height:130px; gap:2px; }
.arena-ui #menu-step-character .shared-pet-options .pet-option img { width:clamp(78px,10dvh,102px); height:clamp(78px,10dvh,102px); }
.arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:20px; }
.arena-ui .pet-selection-caption { display:flex; align-items:center; flex-shrink:0; gap:14px; min-height:56px; padding:8px 14px; box-sizing:border-box; border:1px solid #9dcce65c; border-radius:16px; background:#ffffff08; text-align:left; }
.arena-ui .pet-selection-caption > strong { color:#ffe6ac; font-family:'Pawlish Huninn',sans-serif; white-space:nowrap; font-size:18px; }
.arena-ui .pet-selection-caption > div { min-width:0; display:grid; gap:3px; }
.arena-ui #pet-caption-en { color:#f3faff; font-size:16px; line-height:1.3; }
.arena-ui #pet-caption-zh { color:#bdd4e9; font-size:12px; line-height:1.3; }
.arena-ui .pet-selection-caption.speaking { border-color:#ffe1a0; background:#ffe1a00c; }
@media (max-width:700px) and (orientation:portrait) {
  .arena-ui #menu-step-character .shared-pet-options .pet-option { flex-basis:138px; height:166px; min-height:166px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:104px; height:104px; }
  .arena-ui .pet-selection-caption { gap:8px; padding:8px; align-items:start; }
  .arena-ui .pet-selection-caption > strong { font-size:14px; }
  .arena-ui #pet-caption-en { font-size:14px; }
  .arena-ui #pet-caption-zh { font-size:11px; }
}
@media (max-height:600px) and (orientation:landscape) {
  .arena-ui #menu-step-character .select-side,.arena-ui #menu-step-character .matchup-picker { min-height:44px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option { height:120px; min-height:120px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:70px; height:70px; }
  .arena-ui .pet-selection-caption { min-height:40px; gap:8px; padding:4px 8px; grid-column:1/-1; grid-row:3; }
  .arena-ui .pet-selection-caption > strong { font-size:14px; }
  .arena-ui #pet-caption-en { font-size:13px; }
  .arena-ui #pet-caption-zh { font-size:10px; }
}
@media (max-height:420px) and (orientation:landscape) {
  .arena-ui #menu-step-character .step-content { gap:4px; padding-bottom:4px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option { height:102px; min-height:102px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-option img { width:58px; height:58px; }
  .arena-ui #menu-step-character .shared-pet-options .pet-name strong { font-size:16px; }
}

/* 首頁只保留一個主行動，以標語、Logo 和背景角色建立焦點。 */
.arena-ui .main-menu .main-menu-card { width:min(570px,100%); box-sizing:border-box; padding:24px 28px 16px; border-radius:30px; background:linear-gradient(145deg,#233d62f2,#202d50f0); }
.arena-ui .main-menu .main-menu-kicker { font-size:9px; letter-spacing:.09em; color:#c4d7e9; }
.arena-ui .main-menu .home-game-logo { width:min(400px,100%); height:auto; margin:16px auto 12px; }
.arena-ui .main-menu .main-menu-subtitle { font-family:'Pawlish Huninn',ui-rounded,sans-serif; font-size:27px; line-height:1.35; color:#fff0c6; font-weight:900; margin:0 0 16px; }
.arena-ui .home-tagline-break { display:none; }
.arena-ui .home-tagline-en { display:block; font-family:ui-rounded,'Trebuchet MS',sans-serif; font-size:13px; line-height:1.4; font-weight:600; color:#c2daed; margin-top:8px; }
.arena-ui .main-menu .main-menu-story { padding:0; margin:0 0 18px; border:0; background:none; text-align:center; }
.arena-ui .main-menu .main-menu-story p { font-size:13px !important; margin:0; font-weight:500; }
.arena-ui .main-menu .main-menu-story-en { display:none; }
.arena-ui .main-menu .main-menu-story-heading { display:none; }
.arena-ui .main-menu .main-menu-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; }
.arena-ui .main-menu-actions #enter-game { grid-column:1/-1; min-height:64px; font-family:'Pawlish Huninn',sans-serif; font-size:25px; border-radius:20px; margin:0 0 6px; box-shadow:0 5px 0 #b54870,0 6px 18px #fa6b9928; }
.arena-ui .main-menu-actions #enter-game span { padding-left:14px; }
.arena-ui .main-menu-actions #open-settings,.arena-ui .main-menu-actions #open-storybook,.arena-ui .main-menu-actions #open-instructions { grid-column:auto; min-height:54px; font-size:12px; line-height:1.4; padding:8px 6px; border-radius:14px; }
.arena-ui .main-menu-actions #exit-game { grid-column:1/-1; min-height:44px; border:0; padding:6px; font-size:12px; margin:0; }
.arena-ui .main-menu-actions #pwa-install { grid-column:1/-1; }
.arena-ui .main-menu .main-menu-privacy { min-height:44px; margin:0; padding:6px 12px; box-sizing:border-box; font-size:10px; color:#9eb7d1; }
@media (max-width:600px) and (orientation:portrait) {
  .arena-ui .main-menu { padding:12px; justify-items:center; }
  .arena-ui .main-menu .main-menu-card { padding:20px 16px 10px; }
  .arena-ui .main-menu .main-menu-subtitle { font-size:24px; margin-bottom:12px; }
  .arena-ui .home-tagline-break { display:block; }
  .arena-ui .home-tagline-en { font-size:11px; }
  .arena-ui .main-menu .main-menu-story { margin-bottom:14px; }
  .arena-ui .main-menu .main-menu-story p { font-size:12px !important; }
  .arena-ui .main-menu-actions #enter-game { min-height:58px; font-size:23px; }
  .arena-ui .main-menu .main-menu-actions { gap:7px; }
  .arena-ui .main-menu-actions #open-settings,.arena-ui .main-menu-actions #open-storybook,.arena-ui .main-menu-actions #open-instructions { font-size:11px; min-height:54px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .arena-ui .main-menu .main-menu-card { display:grid; grid-template-columns:1fr 1fr; width:min(820px,100%); gap:4px 18px; padding:12px 18px; }
  .arena-ui .main-menu .main-menu-kicker { grid-column:1; grid-row:1; font-size:8px; }
  .arena-ui .main-menu .home-game-logo { grid-column:1; grid-row:2; margin:4px auto; max-width:260px; }
  .arena-ui .main-menu .main-menu-subtitle { grid-column:1; grid-row:3; font-size:20px; margin:0; }
  .arena-ui .home-tagline-en { font-size:10px; margin-top:4px; }
  .arena-ui .main-menu .main-menu-story { display:none; }
  .arena-ui .main-menu .main-menu-actions { grid-column:2; grid-row:1/5; gap:6px; align-self:center; }
  .arena-ui .main-menu-actions #enter-game { min-height:50px; font-size:21px; margin:0 0 4px; }
  .arena-ui .main-menu-actions #open-settings,.arena-ui .main-menu-actions #open-storybook,.arena-ui .main-menu-actions #open-instructions { min-height:48px; font-size:10px; }
  .arena-ui .main-menu .main-menu-privacy { grid-column:1; grid-row:4; padding:0; }
}
@media (max-height:540px) and (orientation:landscape) {
  .arena-ui #result-card { display:grid; grid-template-columns:210px minmax(0,1fr); gap:6px 16px; width:min(820px,100%); padding:12px 16px; border-radius:22px; }
  .arena-ui #result-card .result-kicker { grid-column:2; grid-row:1; font-size:12px; }
  .arena-ui #result-card h2 { grid-column:2; grid-row:2; font-size:22px; }
  .arena-ui #result-card .result-pets { grid-column:1; grid-row:1/6; align-self:center; gap:8px; }
  .arena-ui #result-card .result-pets img { width:102px; height:110px; }
  .arena-ui #result-card .result-pets img.loser { width:86px; height:94px; }
  .arena-ui #result-card .result-pets > div { font-size:10px; }
  .arena-ui #result-card .result-pets > div:has(img.winner)::before { right:0; top:-16px; }
  .arena-ui #result-card .result-score-block { grid-column:2; grid-row:3; }
  .arena-ui #result-card .final-score { font-size:46px; }
  .arena-ui #result-card .result-score-caption { display:none; }
  .arena-ui #result-card .stats { grid-column:2; grid-row:4; gap:4px; }
  .arena-ui #result-card .stats > span { padding:5px 2px; font-size:10px; gap:2px; }
  .arena-ui #result-card .stats small { display:none; }
  .arena-ui #result-card .stats b { font-size:20px; }
  .arena-ui #result-card .result-actions { grid-column:2; grid-row:5; gap:5px; }
  .arena-ui #result-card .result-actions button { min-height:44px; padding:5px 3px; font-size:10px; }
  .arena-ui #result-card #play-again { min-height:44px; font-size:16px; }
  .arena-ui #result-card .series-result-pets { flex-direction:column; }
  .arena-ui #result-card .result-team { width:100%; }
  .arena-ui #result-card .result-team-member img { width:46px; height:48px; }
  .arena-ui #result-card .result-team-member span { font-size:9px; }
}