/* Pawlish 選單呈現層；不改 Canvas 比例、操作判定與玩法。 */
:root { --ui-ink:#183951; --ui-pink:#ff729b; --ui-gold:#efb953; }
.main-menu .main-menu-card { width:min(680px,100%); padding:28px 36px 20px; border:2px solid #fff9; background:linear-gradient(145deg,#fffaf0ed,#eaf9faed); box-shadow:0 24px 80px #061a4266,inset 0 0 32px #fff9; }
.home-game-logo { display:block; width:min(450px,100%); height:auto; margin:8px auto; object-fit:contain; filter:drop-shadow(0 8px 8px #28476722); }
.main-menu-card h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.main-menu .main-menu-kicker { font-size:12px; letter-spacing:2px; }
.main-menu .main-menu-subtitle { font-size:17px; margin:8px 0 16px; }
.main-menu .main-menu-story { border:0; background:none; padding:0 12px; margin:0 0 20px; }
.main-menu-story-heading { display:none; }
.main-menu .main-menu-story p { font-size:15px; line-height:1.65; margin:4px 0; }
.main-menu .main-menu-story-en { font-size:13px !important; font-weight:500; }
.main-menu .main-menu-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; }
.main-menu-actions #enter-game { grid-column:1/-1; min-height:66px; font-size:22px; box-shadow:0 6px 0 #cb4a72,0 10px 24px #fa709b33; }
.main-menu-actions .main-menu-secondary { min-height:50px; font-size:15px; background:#ffffffc9; box-shadow:0 3px 0 #aacfd555; border-width:1px; }
.main-menu-actions #exit-game { grid-column:1/-1; justify-self:center; min-height:44px; width:auto; padding:8px 24px; background:none; border:0; box-shadow:none; color:#617c8e; font-size:13px; }
.main-menu-actions #pwa-install:not(.hidden) { grid-column:1/-1; }
.main-menu-privacy { display:inline-block; margin-top:10px; }
button:focus-visible { outline:3px solid #236fb3; outline-offset:3px; }

/* 上方只保留對戰摘要，詳細特性集中到正在選取的 Pet。 */
#menu-step-character .step-content { display:grid; grid-template-columns:240px minmax(0,1fr); grid-template-rows:repeat(6,auto); gap:8px 18px; align-content:start; }
#menu-step-character .step-content > * { grid-row:auto; }
#menu-step-character .pet-choice-guide { grid-column:1/-1; margin:0; padding:8px 12px; background:#e5f4f7; border-radius:14px; }
#menu-step-character .pet-choice-guide small { font-size:12px; }
#menu-step-character .select-versus { grid-column:1/-1; display:grid; grid-template-columns:1fr 40px 1fr; gap:10px; margin:0; }
#menu-step-character .select-side { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:8px; padding:8px 12px; min-height:62px; border-radius:16px; background:#ffffff90; }
#menu-step-character .select-side > img { grid-column:1; grid-row:1/3; width:44px; height:44px; margin:0; }
#menu-step-character .select-label { grid-column:2; grid-row:1; text-align:left; font-size:12px; }
#menu-step-character .selected-pet-info { grid-column:2; grid-row:2; text-align:left; padding:0; }
#menu-step-character .selected-pet-info strong { font-size:16px; }
#menu-step-character .selected-pet-info > :not(strong) { display:none; }
#menu-step-character .selected-pet-detail { grid-column:3; grid-row:1/3; min-height:44px; padding:6px 10px; font-size:11px; }
#menu-step-character .versus-mark { align-self:center; font-size:20px; }
#menu-step-character .pet-picker-switch { grid-column:1/-1; margin:0; }
#menu-step-character .picker-tab { min-height:44px; padding:8px 24px; }
#menu-step-character .pet-filter-bar { grid-column:1/-1; margin:0; display:flex; flex-wrap:wrap; gap:6px; padding:0; }
#menu-step-character .pet-filter-bar > span { display:none; }
#menu-step-character .pet-filter-bar button { min-height:44px; font-size:13px; padding:6px 12px; }
#menu-step-character .pet-hero { grid-column:1; display:flex; flex-direction:column; align-items:center; min-width:0; padding:12px 18px; border-radius:24px; background:radial-gradient(ellipse at 50% 25%,#fff6cf,#e4f4f7 70%); border:1px solid #cfdee4; }
.pet-hero > img { width:140px; height:140px; object-fit:contain; filter:drop-shadow(0 9px 8px #204f6325); }
.pet-hero-copy { width:100%; text-align:center; }
.pet-hero-copy h3 { font-size:26px; margin:4px 0; color:var(--ui-ink); }
.pet-hero-copy > span { font-size:12px; font-weight:800; color:#608196; }
.pet-hero-copy p { font-size:13px; line-height:1.5; margin:8px 0; }
.pet-hero-stats { display:grid; gap:7px; margin:12px 0; }
.pet-hero-stats > span { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:800; }
#menu-step-character .pet-hero-stats .stat-bars { gap:4px; }
#menu-step-character .pet-hero-stats .stat-bars i { width:18px; height:8px; }
.pet-hero-copy > strong { display:block; font-size:13px; color:#9b651b; }
#pet-hero-detail { margin-top:8px; min-height:44px; border:0; background:transparent; color:#2b6d94; font-weight:800; }
#menu-step-character .shared-pet-options { grid-column:2; grid-row:5; display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0; max-height:none; overflow:auto; align-content:start; padding:4px; }
#menu-step-character .pet-option[hidden] { display:none !important; }
#menu-step-character .shared-pet-options .pet-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:164px; padding:10px 6px; background:#ffffffae; border:2px solid #dae7e9; border-radius:18px; box-shadow:0 3px 0 #bdd3d329; }
#menu-step-character .shared-pet-options .pet-option img { width:82px; height:82px; margin:0; object-fit:contain; }
#menu-step-character .shared-pet-options .pet-name { text-align:center; }
#menu-step-character .shared-pet-options .pet-name strong { display:block; font-size:16px; }
#menu-step-character .shared-pet-options .pet-name small { font-size:11px; }
#menu-step-character .shared-pet-options .pet-skill,#menu-step-character .shared-pet-options .pet-strength { display:none; }
#menu-step-character .shared-pet-options .selected-check { top:4px; right:5px; font-size:10px; }
#menu-step-character .shared-pet-options .pet-option.selected { border-color:#f0b648; background:linear-gradient(150deg,#fff8d8,#fff1bd); box-shadow:0 0 0 2px #fff,0 5px 12px #d9aa3b30; }
#menu-step-character .pet-scroll-hint { display:none; }
#menu-step-character .pet-team-slots:not([hidden]) { grid-column:1/-1; display:flex; justify-content:center; gap:12px; }
.pet-team-slot { display:flex; align-items:center; justify-content:center; gap:8px; width:180px; min-height:52px; border:1px dashed #d8b777; border-radius:12px; background:#fff5d9; font-size:13px; }
.pet-team-slot img { width:40px; height:40px; object-fit:contain; }
.pet-team-slot b { color:#b88c44; }
#menu-step-character .step-actions { padding:10px 4px 0; border-top:1px solid #dce8e8; background:linear-gradient(#f3fafa,#f9fbf6); }
#menu-step-character .start-match { min-height:52px; font-size:18px; border-radius:18px; }
@media (min-width:1001px) and (min-height:541px) {
  .character-select[data-step=character] .character-select-card { position:relative; }
  .character-select[data-step=character] .menu-home { position:absolute; top:22px; left:24px; font-size:12px; }
  .character-select[data-step=character] #menu-title { font-size:28px; margin:8px 0; }
}
.touch-controls button { background:linear-gradient(150deg,#f4ffffda,#9fd8edce); border:2px solid #eefaffbd; box-shadow:0 4px 0 #37648470,inset 0 1px 0 #fff; color:#183951; }
.touch-controls [data-control=smash] { background:linear-gradient(150deg,#ffdae5ea,#f678a2db); color:#61203f; }
.touch-controls [data-control=jump] { background:linear-gradient(150deg,#d2f7ffe8,#72cde6d9); }
.touch-controls button.pressed { transform:translateY(3px) scale(.96); filter:brightness(1.12); box-shadow:0 1px 0 #37648470; }
.pause-button,.fullscreen-button,#record-toggle { border:1px solid #ffdf98a0; background:linear-gradient(130deg,#244775c9,#574b80b9); box-shadow:0 3px 10px #14243e30; }

@media (max-width:1000px) {
  #menu-step-character .step-content { grid-template-columns:210px minmax(0,1fr); gap:8px 10px; }
  #menu-step-character .shared-pet-options { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
  #menu-step-character .shared-pet-options .pet-option { min-height:142px; }
  #menu-step-character .shared-pet-options .pet-option img { width:66px; height:66px; }
}
@media (max-width:700px) and (orientation:portrait) {
  .main-menu .main-menu-card { padding:20px 18px; border-radius:28px; }
  .main-menu .main-menu-subtitle { font-size:14px; }
  .main-menu .main-menu-story { padding:0; }
  .main-menu .main-menu-story p { font-size:13px; }
  .main-menu-actions #enter-game { font-size:19px; min-height:60px; }
  .main-menu .main-menu-actions .main-menu-secondary { font-size:13px; }
  #menu-step-character .step-content { display:flex; flex-direction:column; gap:10px; }
  #menu-step-character .select-side { grid-template-columns:30px 1fr; padding:6px; gap:4px; }
  #menu-step-character .select-side > img { width:30px; height:30px; }
  #menu-step-character .selected-pet-detail { grid-column:1/-1; grid-row:auto; }
  #menu-step-character .pet-choice-guide small { display:none; }
  #menu-step-character .pet-hero { flex-direction:row; padding:10px; gap:10px; }
  .pet-hero > img { width:100px; height:130px; }
  .pet-hero-copy h3 { font-size:22px; }
  .pet-hero-copy p { display:none; }
  .pet-hero-stats { margin:8px 0; gap:4px; }
  #menu-step-character .shared-pet-options { display:flex !important; flex-shrink:0; overflow-x:auto; padding:4px 4px 12px; scroll-snap-type:x proximity; }
  #menu-step-character .shared-pet-options .pet-option { flex:0 0 104px; min-height:142px; scroll-snap-align:start; }
  #menu-step-character .pet-filter-bar { flex-wrap:nowrap; overflow-x:auto; flex-shrink:0; }
  #menu-step-character .pet-filter-bar button { flex-shrink:0; }
  #menu-step-character .start-match { font-size:15px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .main-menu .main-menu-card { width:min(740px,100%); padding:16px 22px; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; }
  .main-menu .main-menu-kicker { grid-column:1; font-size:10px; }
  .home-game-logo { grid-column:1; grid-row:2; width:100%; margin:0; max-height:110px; }
  .main-menu .main-menu-subtitle { grid-column:1; margin:0; font-size:12px; }
  .main-menu .main-menu-story { grid-column:1; grid-row:4; margin:0; padding:0; }
  .main-menu .main-menu-story p { font-size:11px; }
  .main-menu .main-menu-story-en { font-size:10px !important; }
  .main-menu .main-menu-actions { grid-column:2; grid-row:1/5; align-self:center; gap:8px; }
  .main-menu-actions #enter-game { min-height:54px; font-size:18px; }
  .main-menu .main-menu-actions .main-menu-secondary { min-height:44px; padding:6px; font-size:12px; }
  .main-menu .main-menu-privacy { grid-column:1/-1; margin:0; font-size:10px; }
  #menu-step-character .step-content { grid-template-columns:170px minmax(0,1fr); gap:5px 8px; grid-template-rows:44px 44px auto auto; }
  #menu-step-character .pet-choice-guide { display:none; }
  #menu-step-character .pet-choice-guide small { display:none; }
  #menu-step-character .pet-choice-guide strong { font-size:14px; }
  #menu-step-character .select-versus { display:none; }
  #menu-step-character .pet-picker-switch { grid-column:1/-1; grid-row:1; display:flex; flex-direction:row; gap:8px; }
  #menu-step-character .picker-tab { min-height:44px; font-size:12px; padding:6px; }
  #menu-step-character .pet-filter-bar { grid-column:1/-1; grid-row:2; align-self:start; flex-wrap:nowrap; overflow-x:auto; gap:4px; }
  #menu-step-character .pet-filter-bar button { min-height:44px; padding:5px 8px; font-size:12px; flex-shrink:0; }
  #menu-step-character .pet-hero { grid-column:1; grid-row:3; padding:6px; position:relative; display:grid; grid-template-columns:58px 1fr; grid-template-rows:28px 28px auto auto; gap:2px 4px; align-content:start; align-self:start; }
  .pet-hero > img { width:58px; height:58px; grid-column:1; grid-row:1/3; }
  .pet-hero-copy { display:contents; }
  .pet-hero-copy h3 { grid-column:2; grid-row:2; font-size:16px; margin:0; align-self:start; }
  .pet-hero-copy > span { grid-column:2; grid-row:1; font-size:0; padding-top:20px; }
  .pet-hero-copy > span::after { content:attr(data-short-role); font-size:10px; }
  .pet-hero-copy p { display:none; }
  .pet-hero-stats { grid-column:1/-1; margin:4px 2px; gap:3px; }
  .pet-hero-stats > span { font-size:11px; }
  #menu-step-character .pet-hero-stats .stat-bars i { width:12px; height:5px; }
  .pet-hero-copy > strong { grid-column:1/-1; font-size:10px; text-align:center; }
  #pet-hero-detail { position:absolute; right:0; top:0; width:44px; min-height:44px; margin:0; font-size:0; }
  #pet-hero-detail::after { content:'ⓘ'; font-size:18px; }
  #menu-step-character .shared-pet-options { grid-column:2; grid-row:3; display:flex !important; align-items:stretch; overflow-x:auto; overflow-y:hidden; gap:8px; scroll-snap-type:x proximity; }
  #menu-step-character .shared-pet-options .pet-option { flex:0 0 102px; min-height:134px; height:134px; max-height:134px; padding:8px 4px; scroll-snap-align:start; }
  #menu-step-character .shared-pet-options .pet-option img { width:76px; height:76px; }
  #menu-step-character .shared-pet-options .pet-name strong { font-size:15px; }
  #menu-step-character .pet-team-slots:not([hidden]) { grid-column:1/-1; grid-row:4; gap:5px; }
  .pet-team-slot { min-height:36px; font-size:10px; gap:3px; }
  .pet-team-slot img { width:26px; height:26px; }
  .character-select[data-team-mode=true] #shared-pet-options { grid-row:3; }
  #menu-step-character .step-actions { padding:6px 0 0; gap:8px; }
  #menu-step-character .start-match { min-height:44px; padding:8px 12px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .pet-option.selection-burst,.home-game-logo { animation:none !important; }
  .touch-controls button { transition:none; }
}