:root { color-scheme: dark; --ink:#17324a; --cream:#fff9ef; --pink:#ff7c98; --blue:#63c8ec; }
/* Safari／內嵌瀏覽器長按操作時，不選取子元素文字或顯示拷貝選單。 */
.stage-wrap, .stage-wrap * {
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent;
}
.stage-wrap img, .stage-wrap canvas { -webkit-user-drag:none; }
.character-select { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:20px; overflow-y:auto; background:linear-gradient(145deg,#102c49f5,#287c9df2); }
.character-select.hidden { display:none; }
.character-select-card { width:min(760px,100%); padding:32px 34px 36px; border:4px solid #fff; border-radius:30px; text-align:center; color:var(--ink); background:linear-gradient(145deg,#fff9ef,#eaf7f8); box-shadow:0 24px 80px #06172bcc; }
.character-select-card .eyebrow { color:#e28b22; }
.character-select-card h1 { margin:8px 0 4px; color:var(--ink); font-size:clamp(26px,5vw,46px); }
.select-subtitle { margin:0 0 22px; color:#688098; font-weight:800; }
.select-versus { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; }
.select-side { display:flex; flex-direction:column; align-items:center; gap:9px; }
.select-label { color:#e45874; font-size:13px; font-weight:1000; letter-spacing:.16em; }
.select-side img { width:min(210px,28vw); height:min(210px,28vw); object-fit:contain; filter:drop-shadow(0 10px 5px #17324a2b); }
.select-side select { width:100%; max-width:190px; border:2px solid #b2d5df; border-radius:13px; padding:10px 12px; background:#fff; color:var(--ink); font:inherit; font-weight:900; }
.select-side select { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pet-options { display:flex; flex-wrap:nowrap; gap:4px; width:100%; overflow-x:auto; padding:6px; background:rgba(255,255,255,0.15); backdrop-filter:blur(6px); border-radius:16px; scrollbar-width:none; -ms-overflow-style:none; }
.pet-options::-webkit-scrollbar { display:none; }
.pet-option { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px; border:none; border-radius:12px; background:transparent; color:var(--ink); text-align:center; cursor:pointer; opacity:0.6; transform:scale(0.75); transition:all .25s cubic-bezier(0.4,0,0.2,1); }
.pet-option:hover { transform:scale(0.85); opacity:0.85; }
.pet-option.selected { transform:scale(1); opacity:1; filter:drop-shadow(0 0 12px #ffe6a8); background:rgba(255,255,255,0.2); }
.pet-option img { width:42px; height:52px; object-fit:contain; filter:drop-shadow(0 4px 4px #223b5033); }
.pet-name { display:flex; flex-direction:column; line-height:1.1; }
.pet-name strong { font-size:10px; white-space:nowrap; }
.pet-name small { display:none; }
.pet-skill { display:none; }
.selected-check { position:absolute; right:6px; top:6px; display:none; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; background:#ef7442; font-size:12px; font-weight:900; }
.pet-option.selected .selected-check { display:grid; }
.pet-option.selection-burst img { animation:volleyPetSelectPop .58s cubic-bezier(.2,1.45,.45,1) both; }
.pet-option.selection-burst .pet-skill em { animation:volleyBadgePop .72s cubic-bezier(.2,1.55,.45,1) both; }
@keyframes volleyPetSelectPop { 0%{transform:scale(.88)} 58%{transform:scale(1.16)} 100%{transform:scale(1)} }
@keyframes volleyBadgePop { 0%{transform:scale(.7) rotate(-4deg)} 55%{transform:scale(1.2) rotate(2deg)} 100%{transform:scale(1) rotate(0)} }
.versus-mark { color:#e28b22; font-size:26px; font-weight:1000; }
.select-instructions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:22px; padding:12px 16px; border-radius:16px; background:#dff3f6; color:#35677d; font-size:12px; font-weight:900; }
.select-instructions strong { width:100%; color:#e28b22; letter-spacing:.1em; }
.select-instructions small { width:100%; color:#688098; font-size:11px; }
.game-mode-options { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-top:15px; padding:10px 14px; border-radius:14px; background:#fff3d8; color:#8f6320; font-size:11px; font-weight:900; }
.game-mode-options label { display:flex; align-items:center; gap:7px; }
.game-mode-options select { border:1px solid #e5bd68; border-radius:9px; padding:6px 8px; background:#fff; color:var(--ink); font:900 11px inherit; }
.mode-buttons { display:flex; gap:6px; }
.mode-button { border:1px solid #e5bd68; border-radius:9px; padding:7px 9px; background:#fff; color:#8f6320; font:900 10px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.mode-button.selected { background:#e28b22; color:#fff; box-shadow:0 2px 0 #b96d16; }
.game-mode-options small { width:100%; color:#a87827; font-size:10px; }
.start-match { margin-top:28px; border:0; border-radius:17px; padding:15px 38px; background:#ff7c98; color:#fff; font:900 16px ui-rounded,"Trebuchet MS",system-ui,sans-serif; letter-spacing:.06em; cursor:pointer; box-shadow:0 5px 0 #c8506d; }
.learning-options { display:flex; justify-content:center; align-items:end; gap:14px; flex-wrap:wrap; margin:18px auto 0; color:#688098; font-size:11px; font-weight:900; letter-spacing:.08em; }.learning-options label { display:grid; gap:5px; }.learning-options select { min-width:145px; border:2px solid #b7dce5; border-radius:10px; padding:8px 10px; background:#fff; color:#17324a; font-weight:900; }.learning-options small { flex-basis:100%; color:#e28b22; font-size:12px; letter-spacing:0; }
.start-match:active { transform:translateY(3px); box-shadow:0 2px 0 #c8506d; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#102c49; font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif; }
body { display:flex; justify-content:center; padding:clamp(8px,2vw,28px); }
.game-shell { width:min(1480px,100%); }
.topbar { display:flex; justify-content:space-between; align-items:end; gap:18px; color:#fff; padding:0 8px 7px; }
.pet-picker { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pet-picker label { color:#c6e6f7; font-size:11px; font-weight:900; letter-spacing:.06em; }
.pet-picker select { margin-left:4px; border:1px solid #ffffff66; border-radius:9px; padding:6px 8px; background:#17324acc; color:#fff; font:inherit; font-size:12px; }
.eyebrow { color:#ffc85b; font-weight:900; letter-spacing:.15em; font-size:12px; }
h1 { margin:4px 0 0; font-size:clamp(22px,3vw,36px); }
.hint { display:none; }
.topbar h1 { font-size:clamp(20px,2.5vw,30px); }
.stage-wrap { position:relative; width:100%; overflow:hidden; border:5px solid #fff; border-radius:26px; box-shadow:0 16px 44px #06172b99; background:#75d7ee; }
canvas { display:block; width:100%; height:auto; touch-action:none; }
.touch-controls { position:absolute; inset:0; pointer-events:none; display:none; justify-content:space-between; align-items:end; padding:18px; z-index:6; }
.move-pad,.action-pad { display:flex; gap:12px; pointer-events:auto; }
.touch-controls button { width:74px; height:62px; border:2px solid #ffffffaa; border-radius:20px; background:#17324acc; color:#fff; font-weight:900; font-size:18px; touch-action:none; user-select:none; }
.action-pad button { width:88px; font-size:13px; background:#ed6686dd; }.action-pad button:last-child { background:#e3a832ee; }
.status { color:#dbf4ff; text-align:center; margin:6px 0 0; font-size:12px; min-height:18px; }
.portrait-message { display:none; }
.portrait-message.dismissed { display:none !important; }
.modal { position:fixed; inset:0; display:grid; place-items:center; background:#071a2dcc; z-index:50; padding:20px; }
.hidden { display:none; }
.result-card { width:min(560px,100%); padding:25px 28px 28px; text-align:center; border:4px solid #fff; border-radius:30px; background:linear-gradient(145deg,#fff9eff5,#eaf7f8f5); color:var(--ink); box-shadow:0 20px 70px #0008; }
.pause-card { max-width: 440px; padding: 26px 28px; background: linear-gradient(145deg, #17324af2, #2b6d82f5); border: 3px solid #ffe6a8; color: #fff; box-shadow: 0 20px 70px rgba(0,0,0,0.6); }
.pause-card h2 { font-size: 28px; margin: 6px 0 0; color: #fff; }
.pause-actions-grid { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pause-btn { margin: 0 !important; width: 100%; border-radius: 14px; font-size: 15px; padding: 12px 18px; text-align: center; transition: all 0.15s ease; box-sizing: border-box; }
.pause-btn:active { transform: scale(0.97); }
.pause-btn.restart-btn { background: #ff9b53; box-shadow: 0 4px 0 #cf6f2a; }
.pause-btn.restart-btn:hover { background: #ffaa6b; }
.pause-btn.quit-btn { background: #264e6b; color: #d0e8f2; border: 2px solid #4a7b9d; }
.pause-btn.quit-btn:hover { background: #326488; color: #fff; }
.play-again { margin-top:24px; border:0; border-radius:16px; padding:15px 28px; background:#ff7c98; color:#fff; font-weight:900; letter-spacing:.04em; cursor:pointer; box-shadow:0 5px 0 #c8506d; }.result-pets { display:flex; justify-content:center; gap:34px; height:118px; margin:-10px 0 5px; }.result-pets div { display:flex; flex-direction:column; align-items:center; color:#688098; font-size:11px; font-weight:900; letter-spacing:.08em; }.result-pets img { width:110px; height:92px; object-fit:contain; filter:drop-shadow(0 6px 4px #17324a22); }.result-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }.back-pawlish { margin-top:24px; border:2px solid #b2d5df; border-radius:16px; padding:13px 20px; background:#fff; color:#2d83b8; font-weight:900; cursor:pointer; }
.result-animate > * { animation:result-in .34s ease both; }.result-animate > :nth-child(2){animation-delay:.12s}.result-animate > :nth-child(3){animation-delay:.22s}.result-animate > :nth-child(4){animation-delay:.32s}.result-animate > :nth-child(5){animation-delay:.42s}.result-animate > :nth-child(6){animation-delay:.52s}@keyframes result-in { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
.result-kicker { color:#ee6688; font-size:15px; font-weight:900; letter-spacing:.16em; }
.result-card h2 { margin:8px 0; font-size:28px; }
.final-score { font-size:64px; font-weight:1000; color:#2d83b8; line-height:1; margin:12px 0 20px; }
.stats { display:flex; justify-content:center; gap:24px; color:#688098; font-size:13px; }.stats b { display:block; color:var(--ink); font-size:22px; }
.play-again { margin-top:24px; border:0; border-radius:16px; padding:15px 28px; background:#ff7c98; color:#fff; font-weight:900; letter-spacing:.04em; cursor:pointer; box-shadow:0 5px 0 #c8506d; }
.question-layer { position:fixed; inset:0; z-index:4; display:grid; place-items:center; background:#102c49c2; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }.question-layer.hidden { display:none; }
.question-card { width:min(440px,calc(100% - 28px)); padding:22px 24px; text-align:center; background:linear-gradient(155deg,#fffdf7 0%,#f0f9fb 100%); color:#17324a; border:4px solid #ffc85b; border-radius:28px; box-shadow:0 18px 60px rgba(0,0,0,0.5), 0 0 30px rgba(255,200,91,0.25); }
.question-kicker { color:#e28b22; font-weight:900; font-size:13px; letter-spacing:.12em; }
.question-prompt { margin-top:6px; font-weight:900; font-size:18px; color:#123758; }
.question-icon { font-size:62px; line-height:1.1; margin:6px 0; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.12)); }
.answer-grid { counter-reset:answer-choice; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 10px; }
.answer-grid button { counter-increment:answer-choice; position:relative; min-height:48px; border:2px solid #85ceeb; border-radius:16px; padding:10px 8px; color:#10385c; background:linear-gradient(180deg,#ffffff 0%,#e6f7fc 100%); font-weight:900; font-size:15px; cursor:pointer; box-shadow:0 4px 0 #6cb2cc,0 6px 14px rgba(16,44,73,0.12); display:flex; align-items:center; justify-content:center; gap:6px; transition:transform 0.1s, box-shadow 0.1s; user-select:none; -webkit-user-select:none; }
.answer-grid button::before { content:counter(answer-choice); display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#247ea7; color:#fff; font-size:11px; font-weight:900; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.answer-grid button:hover { background:linear-gradient(180deg,#fffaf0 0%,#ffebba 100%); border-color:#ffcf6b; box-shadow:0 4px 0 #d9a029,0 6px 14px rgba(217,160,41,0.2); }
.answer-grid button:active { transform:translateY(3px); box-shadow:0 1px 0 #6cb2cc; background:#ffe185; }
.word-replay { min-height:44px; padding:8px 18px; border:2px solid #ffce63; border-radius:20px; background:linear-gradient(180deg,#fff8e0 0%,#ffeaa6 100%); color:#704403; font-size:13px; font-weight:900; cursor:pointer; box-shadow:0 3px 0 #d9a42f; margin:4px auto; display:inline-flex; align-items:center; gap:6px; transition:transform 0.1s; }
.word-replay:active { transform:translateY(2px); box-shadow:0 1px 0 #d9a42f; }
.question-close { min-height:44px; padding:8px 18px; border:2px solid #b8c7d9; border-radius:20px; background:linear-gradient(180deg,#f7f9fc 0%,#e3e8ef 100%); color:#3b5066; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #9caec4; margin-top:8px; transition:transform 0.1s; }
.question-close:active { transform:translateY(2px); box-shadow:0 1px 0 #9caec4; }
@media (max-width:900px) { body { padding:0; }.topbar { padding:10px 12px 8px; align-items:center; }.pet-picker { order:3; width:100%; justify-content:center; }.hint { display:none; }.stage-wrap { border-width:3px; border-radius:0; }.touch-controls { display:flex; padding:10px; }.touch-controls button { width:60px;height:54px; }.action-pad button { width:72px;font-size:11px; }.status { margin:7px; } }
@media (orientation:portrait) and (max-width:900px) {
  .stage-wrap { min-height:calc(100vh - 98px); background:#102c49; }
  .stage-wrap canvas { opacity:.12; filter:blur(2px); }
  .portrait-message {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:absolute;
    inset:0;
    z-index:3;
    background:radial-gradient(ellipse at center, rgba(23, 59, 104, 0.95) 0%, rgba(10, 24, 43, 0.98) 100%);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    padding:max(20px, calc(16px + env(safe-area-inset-top))) max(16px, env(safe-area-inset-right)) max(20px, calc(16px + env(safe-area-inset-bottom))) max(16px, env(safe-area-inset-left));
    box-sizing:border-box;
    text-align:center;
    pointer-events:auto;
    max-width:100%;
    overflow:hidden;
  }
  .portrait-box {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:min(320px, calc(100% - 32px));
    padding:24px 18px 20px;
    background:linear-gradient(165deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%);
    border:2px solid rgba(104, 231, 255, 0.38);
    border-radius:24px;
    box-shadow:0 12px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(104, 231, 255, 0.15);
    box-sizing:border-box;
  }
  .rotate-phone-icon {
    position:relative;
    width:64px;
    height:64px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .phone-body {
    width:34px;
    height:56px;
    border:3px solid #68e7ff;
    border-radius:9px;
    box-shadow:0 0 14px rgba(104, 231, 255, 0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:phoneRotatePulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin:center center;
  }
  .phone-screen-dot {
    font-size:18px;
    line-height:1;
    display:inline-block;
  }
  .rotate-arrow-badge {
    position:absolute;
    bottom:-2px;
    right:-2px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#ffd45c;
    color:#133552;
    font-size:15px;
    font-weight:900;
    line-height:24px;
    text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
  }
  .portrait-title {
    font-size:19px;
    font-weight:900;
    color:#fff;
    letter-spacing:0.02em;
    margin-bottom:4px;
  }
  .portrait-subtitle {
    font-size:11px;
    font-weight:800;
    letter-spacing:0.12em;
    color:#68e7ff;
    margin-bottom:10px;
  }
  .portrait-tip {
    font-size:13px;
    line-height:1.5;
    color:#cfe8f5;
    margin:0 0 16px 0;
  }
  .portrait-continue-btn {
    border:1px solid rgba(255, 255, 255, 0.25);
    border-radius:18px;
    background:rgba(255, 255, 255, 0.08);
    color:#a9d7ee;
    font-size:12px;
    font-weight:800;
    padding:8px 16px;
    min-height:44px;
    cursor:pointer;
    transition:background 0.2s, color 0.2s;
  }
  .portrait-continue-btn:hover, .portrait-continue-btn:active {
    background:rgba(255, 255, 255, 0.18);
    color:#fff;
  }
  .touch-controls { display:none; }
}

@keyframes phoneRotatePulse {
  0%, 15% { transform: rotate(0deg); }
  45%, 70% { transform: rotate(-90deg); }
  90%, 100% { transform: rotate(0deg); }
}

/* One-page gameplay layout: keep the complete arena visible without vertical scrolling. */
@media (orientation:landscape) {
  html, body { height:100%; min-height:100%; overflow:hidden; }
  body { padding:clamp(6px,1.2vh,16px) clamp(8px,1.5vw,24px); }
  .game-shell { height:100%; min-height:0; display:flex; flex-direction:column; }
  .topbar { flex:0 0 auto; padding-bottom:clamp(4px,0.8vh,8px); }
  .topbar h1 { margin-top:2px; }
  .stage-wrap { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; }
  .stage-wrap canvas { width:100%; height:100%; object-fit:contain; }
  .status { flex:0 0 auto; margin:3px 0 0; min-height:15px; }
}

/* 橫向手機極致滿版無黑邊，保留整座球場最大化。 */
@media (orientation:landscape) and (max-width:1100px) {
  html, body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
  .game-shell { width:100vw; height:100vh; margin:0; padding:0; }
  .topbar,.status { display:none !important; }
  .stage-wrap { border:0 !important; border-radius:0 !important; width:100vw; height:100vh; max-width:100vw; max-height:100vh; background:#163859; box-shadow:none !important; }
  .stage-wrap canvas { width:100%; height:100%; object-fit:contain; }
}

:fullscreen, :-webkit-full-screen {
  width:100vw !important; height:100vh !important; margin:0 !important; padding:0 !important; background:#071a2d !important;
}
:fullscreen .topbar, :-webkit-full-screen .topbar,
:fullscreen .status, :-webkit-full-screen .status {
  display:none !important;
}
:fullscreen .stage-wrap, :-webkit-full-screen .stage-wrap {
  width:100vw !important; height:100vh !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}

/* Phase 3 presentation polish: keep the arena visible behind a light Pawlish result overlay. */
.modal { background:linear-gradient(180deg,#071a2dcc,#102c49e6); backdrop-filter:blur(2px); }
.result-card { width:min(600px,calc(100% - 28px)); padding:24px 28px 27px; border:3px solid #ffe6a8; background:linear-gradient(145deg,#17324af2,#2b6d82f5 55%,#8b4968f0); color:#fff; box-shadow:0 20px 70px #000b,0 0 0 8px #ffffff12; }
.result-pets div { color:#d8f3f5; }.result-pets img { width:128px; height:104px; filter:drop-shadow(0 8px 5px #071a2d88); }
.result-pets.series-result-pets { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; height:auto; min-height:126px; margin:-4px 0 8px; }
.result-team { flex:1; min-width:0; }
.result-team-label { display:block; margin-bottom:2px; color:#ffeaa6; font-size:11px; font-weight:1000; letter-spacing:.1em; }
.result-team-members { display:flex; justify-content:center; align-items:flex-end; gap:2px; }
.result-pets .result-team-members { flex-direction:row; }
.result-team-member { display:flex; flex-direction:column; align-items:center; min-width:0; color:#d8f3f5; font-size:9px; font-weight:900; }
.result-team-member img { width:82px; height:76px; object-fit:contain; filter:drop-shadow(0 7px 4px #071a2d88); }
.result-team-member span { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-card.series-result-card { width:min(720px,calc(100% - 20px)); }
.result-kicker { color:#ffd45c; text-shadow:0 2px 0 #8e5b26; }.result-card h2 { color:#fff; text-shadow:0 2px 0 #17324a; }.final-score { color:#fff5b6; text-shadow:0 3px 0 #8e5b26; }.stats { color:#c9eaf0; }.stats b { color:#fff; }.back-pawlish { background:#ffffff12; border-color:#a9dce6; color:#e7fbff; }.play-again { background:#ff7c98; box-shadow:0 5px 0 #9f3d5c,0 0 20px #ff7c9866; }
.touch-controls button { white-space:nowrap; line-height:1.05; }
@media (max-width:900px) { .action-pad { gap:7px; }.action-pad button { width:92px; font-size:10px; padding:4px; }.move-pad { gap:7px; }.move-pad button { width:58px; } }
@media (max-width:720px) { .result-pets.series-result-pets { gap:6px; }.result-team-member img { width:58px; height:58px; }.result-team-member { font-size:8px; }.result-team-label { font-size:9px; }.result-card.series-result-card { padding:18px 12px 20px; } }

/* Main menu clarity polish: short, friendly, and easy to scan. */
.character-select { place-items:start center; padding:clamp(10px,2vh,22px); }
.character-select-card { width:min(1120px,100%); max-height:calc(100vh - 20px); overflow-y:auto; padding:22px 26px 24px; border-width:3px; }
.character-select-card h1 { margin:5px 0 3px; font-size:clamp(25px,3.5vw,40px); }
.select-subtitle { margin:0 0 14px; font-size:13px; }
.select-versus { grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr); gap:12px; align-items:start; }
.select-side { min-width:0; padding:12px 12px 10px; border:2px solid #d6e9e8; border-radius:22px; background:linear-gradient(145deg,#ffffffd9,#e8f7f5d9); }
.select-side:nth-child(3) { border-color:#efd6df; background:linear-gradient(145deg,#fffafbd9,#f8e9efd9); }
.select-label { font-size:12px; letter-spacing:.1em; }
.select-side img { width:min(82px,10vw); height:min(82px,10vw); }
.pet-options { width:100%; max-width:500px; max-height:128px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.pet-option { min-height:66px; padding:5px 6px; grid-template-columns:40px 1fr; gap:2px 5px; border-radius:12px; }
.pet-option img { width:38px; height:46px; }
.pet-name strong { font-size:11px; }.pet-name small { font-size:8px; }.pet-skill b { font-size:8px; }.pet-skill small { font-size:7px; }.pet-skill em { font-size:7px; padding:1px 4px; margin-top:2px; }
.selected-check { width:18px; height:18px; right:4px; top:4px; }
.versus-mark { align-self:center; font-size:22px; }
.select-instructions { margin-top:12px; padding:9px 13px; gap:6px 13px; font-size:11px; }
.select-instructions small { font-size:10px; }
.game-mode-options { margin-top:10px; padding:8px 12px; gap:6px 10px; }
.learning-options { margin-top:10px; gap:9px 12px; }
.start-match { margin-top:16px; padding:13px 34px; }
@media (max-width:900px) {
  .character-select { padding:8px; }
  .character-select-card { max-height:calc(100vh - 10px); padding:18px 12px 20px; border-radius:22px; }
  .select-versus { grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); gap:5px; }
  .select-side { padding:8px 5px 7px; border-radius:16px; }
  .select-side img { width:76px; height:76px; }
  .pet-options { max-height:190px; gap:4px; padding:2px; }
  .pet-option { min-height:58px; grid-template-columns:32px 1fr; padding:4px; }
  .pet-option img { width:31px; height:40px; }
  .pet-skill small,.pet-skill em { display:none; }
  .select-instructions span { font-size:10px; }
  .game-mode-options,.learning-options { font-size:10px; }
  .mode-buttons { width:100%; justify-content:center; }
  .mode-button { flex:1; padding:7px 4px; font-size:9px; }
  .learning-options label { min-width:29%; }
  .learning-options select { min-width:0; width:100%; padding:7px 5px; font-size:10px; }
}

/* Step-based menu: one clear decision per page. */
.character-select-card { width:min(1180px,100%); padding:22px 28px 26px; }
.menu-progress { display:flex; justify-content:center; gap:8px; margin:12px auto 18px; }
.menu-progress span { padding:7px 18px; border-radius:999px; background:#dceff2; color:#6a8897; font-size:12px; font-weight:1000; }
.menu-progress span.active { background:#e28b22; color:#fff; box-shadow:0 3px 0 #b96d16; }
.menu-home { border:0; border-radius:999px; padding:7px 14px; color:#52758a; background:#dff3f6; font:900 11px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.pause-button { position:absolute; top:12px; left:12px; z-index:8; width:44px; height:44px; border:2px solid #ffffffaa; border-radius:14px; background:#17324ab8; color:#fff; font-size:20px; font-weight:900; cursor:pointer; backdrop-filter:blur(5px); display:grid; place-items:center; }
.pause-button:hover { background:#17324ae6; border-color:#fff; }
.pause-button:active { transform:scale(0.95); }
@media (max-width:700px) { .pause-button { top:8px; left:8px; width:38px; height:38px; font-size:16px; border-radius:10px; } }
.fullscreen-button { position:absolute; top:12px; left:62px; z-index:8; width:44px; height:44px; border:2px solid #ffffffaa; border-radius:14px; background:#17324ab8; color:#fff; font-size:18px; font-weight:900; cursor:pointer; backdrop-filter:blur(5px); display:grid; place-items:center; }
.fullscreen-button:hover { background:#17324ae6; border-color:#fff; }
.fullscreen-button:active { transform:scale(0.95); }
html.pwa-installed .fullscreen-button, html.pwa-installed #menu-fullscreen { display:none; }
@media (max-width:700px) { .fullscreen-button { top:8px; left:52px; width:38px; height:38px; font-size:15px; border-radius:10px; } }
.gesture-layer { position:absolute; inset:0; z-index:3; touch-action:none; pointer-events:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
body:not(.gesture-mode) .gesture-layer { display:none; }
.gesture-mode:not(.training-active) .touch-controls .move-pad,
.gesture-mode:not(.training-active) .touch-controls [data-control="jump"] { display:none!important; }
.gesture-mode .touch-controls .action-pad { margin-left:auto; }
.gesture-mode .touch-controls button { opacity:.9; }
.gesture-mode .touch-controls button:active { opacity:1; }
.record-controls { position:absolute; top:12px; right:12px; z-index:8; display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:999px; background:#17324ab8; color:#fff; font:900 10px ui-rounded,"Trebuchet MS",system-ui,sans-serif; backdrop-filter:blur(5px); }
/* 題卡高於場內控制，避免錄影鈕覆蓋題目；不改變錄影生命週期。 */
.question-layer { z-index:40; }
.record-controls button { border:1px solid #ffffff66; border-radius:999px; padding:7px 10px; background:#ffffff18; color:#fff; font:inherit; cursor:pointer; }
.record-controls button:hover { background:#ffffff32; }
.record-controls button.recording { background:#e95773; border-color:#ffb2c0; animation:record-pulse 1.2s ease-in-out infinite; }
.record-controls span { min-width:70px; color:#e9f8fb; text-align:center; }
@keyframes record-pulse { 50% { box-shadow:0 0 0 4px #e9577350; } }
@media (max-width:700px) { .record-controls { top:8px; right:8px; padding:4px 5px; font-size:8px; }.record-controls button { padding:6px 7px; }.record-controls span { min-width:54px; } }
.menu-home:hover { color:#28647b; background:#ccebf0; }
.menu-step h2 { margin:0 0 5px; color:var(--ink); font-size:clamp(23px,3vw,32px); }
.step-help { margin:0 0 14px; color:#688098; font-size:13px; font-weight:800; }
.menu-step[data-menu-step="mode"] { max-width:760px; margin:0 auto; }
.menu-step[data-menu-step="mode"] .game-mode-options { padding:20px; border-radius:20px; }
.menu-step[data-menu-step="mode"] .mode-buttons { justify-content:center; gap:10px; }
.menu-step[data-menu-step="mode"] .mode-button { min-width:170px; padding:14px 15px; border-radius:14px; font-size:14px; }
.menu-step[data-menu-step="mode"] .game-mode-options small { margin-top:10px; font-size:12px; }
.menu-next,.menu-back { border:0; border-radius:15px; padding:13px 24px; font:900 14px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.menu-next { background:#ff7c98; color:#fff; box-shadow:0 4px 0 #c8506d; }
.menu-back { background:#e5f3f5; color:#2f7391; }
.menu-next:active,.menu-back:active { transform:translateY(2px); }
.step-actions { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:18px; }
.arena-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:10px auto 16px; }
.arena-option { min-width:0; padding:8px; border:2px solid #cce1e2; border-radius:17px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:.18s ease; }
.arena-option:hover { transform:translateY(-3px); border-color:#f0b84e; }
.arena-option.selected { border-color:#ffb73c; background:#fff4cf; box-shadow:inset 0 0 0 2px #fff,0 7px 16px #dc872a33; }
.arena-thumb { display:grid; place-items:center; height:92px; border-radius:11px; background:#8ed8ef center/cover; color:#fff; font-size:32px; text-shadow:0 2px 4px #17324a88; }
.arena-option strong,.arena-option small { display:block; margin:6px 3px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arena-option strong { font-size:13px; }.arena-option small { color:#688098; font-size:9px; font-weight:900; }
#arena-map { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#menu-step-arena .learning-options { margin-top:8px; }
#menu-step-character .select-versus { margin-top:4px; }
#menu-step-character .pet-options { max-height:330px; }
#menu-step-character .pet-option { min-height:92px; grid-template-columns:58px 1fr; }
#menu-step-character .pet-option img { width:56px; height:70px; }
#menu-step-character .pet-name strong { font-size:14px; }
#menu-step-character .pet-name small { font-size:10px; }
#menu-step-character .pet-detail-layer { z-index:30; }
@media (max-width:900px) {
  .character-select-card { padding:17px 12px 20px; }
  .menu-progress { margin:8px auto 13px; gap:4px; }
  .menu-progress span { padding:6px 10px; font-size:10px; }
  .menu-step[data-menu-step="mode"] .mode-buttons { flex-direction:column; align-items:stretch; }
  .menu-step[data-menu-step="mode"] .mode-button { width:100%; min-width:0; }
  .arena-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .arena-thumb { height:70px; }
  .arena-option strong { font-size:11px; }
  #menu-step-character .select-versus { grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); }
  #menu-step-character .pet-options { max-height:300px; }
  #menu-step-character .pet-option { min-height:70px; grid-template-columns:40px 1fr; }
  #menu-step-character .pet-option img { width:39px; height:52px; }
  #menu-step-character .pet-name strong { font-size:11px; }
}

/* Pet selection simplification: the selected Pet's traits are always visible. */
.character-select-card { width:min(1040px,100%); padding:18px 22px 20px; }
.character-select-card h1 { font-size:clamp(24px,3.2vw,36px); }
.select-subtitle { margin-bottom:10px; }
.select-side { padding:9px 10px 8px; }
.select-side img { width:min(72px,9vw); height:min(72px,9vw); }
.selected-pet-info { min-height:78px; width:min(320px,100%); margin:0 auto 5px; padding:7px 9px; border-radius:13px; background:#ffffffbb; text-align:left; }
.selected-pet-info strong { color:var(--ink); font-size:15px; }
.selected-pet-role { margin-left:6px; color:#e28b22; font-size:10px; font-weight:900; }
.selected-pet-info p { margin:3px 0 6px; color:#688098; font-size:10px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selected-pet-traits { display:flex; gap:4px; flex-wrap:wrap; }
.selected-pet-traits span { padding:3px 6px; border-radius:999px; background:#e8f6f7; color:#2f7391; font-size:9px; font-weight:900; }
.select-instructions { margin-top:9px; padding:7px 12px; gap:3px 12px; }
.select-instructions strong { width:auto; color:#35677d; letter-spacing:0; }
.select-instructions small { width:auto; font-size:10px; }
.game-mode-options { margin-top:8px; padding:7px 10px; }
.game-mode-options > label { display:none; }
.learning-options { margin-top:8px; }
.start-match { margin-top:13px; }
@media (max-width:900px) {
  .character-select-card { padding:15px 10px 17px; }
  .select-side img { width:64px; height:64px; }
  .selected-pet-info { min-height:72px; padding:6px 7px; }
  .selected-pet-info p { font-size:9px; }
  .selected-pet-traits span { font-size:8px; padding:2px 5px; }
}

/* Simplified Pet selection: show only the essential card details, then expand on click. */
.selected-pet-info { display:none; }
.pet-options { max-height:210px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.pet-option { min-height:76px; grid-template-columns:48px 1fr; grid-template-areas:"image name" "image role"; padding:7px; }
.pet-option img { width:46px; height:58px; }
.pet-name { grid-area:name; align-self:end; }
.pet-name strong { font-size:12px; }
.pet-name small { display:block; margin-top:3px; font-size:9px; }
.pet-skill { display:none; }
.pet-detail-layer { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:#071a2dcc; backdrop-filter:blur(3px); }
.pet-detail-layer.hidden { display:none; }
.pet-detail-card { position:relative; width:min(430px,calc(100% - 20px)); padding:24px 28px 26px; border:3px solid #ffe6a8; border-radius:28px; background:linear-gradient(145deg,#fffaf0,#eaf7f8); color:var(--ink); text-align:center; box-shadow:0 20px 70px #0009; animation:pet-detail-in .2s ease both; }
.pet-detail-close { position:absolute; top:10px; right:12px; width:32px; height:32px; border:0; border-radius:50%; background:#17324a12; color:var(--ink); font-size:25px; line-height:1; cursor:pointer; }
.pet-detail-kicker { color:#e28b22; font-size:12px; font-weight:1000; letter-spacing:.1em; }
.pet-detail-card img { display:block; width:150px; height:150px; margin:4px auto 0; object-fit:contain; filter:drop-shadow(0 10px 7px #17324a2b); }
.pet-detail-card h2 { margin:2px 0 3px; font-size:28px; }
.pet-detail-role { color:#e45874; font-size:14px; font-weight:1000; }
.pet-detail-card p { margin:10px auto 13px; color:#688098; font-size:13px; font-weight:800; }
.pet-detail-traits { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.pet-detail-traits span { padding:6px 9px; border-radius:999px; background:#dff3f6; color:#2f7391; font-size:10px; font-weight:900; }
.pet-detail-smash { margin:12px auto 0; width:100%; max-width:320px; display:flex; flex-direction:column; gap:6px; background:transparent; padding:0; }
.pet-skill-badge, .pet-passive-badge { padding:7px 11px; border-radius:12px; font-size:11px; font-weight:900; text-align:left; line-height:1.4; box-shadow:0 2px 5px rgba(0,0,0,0.04); }
.pet-skill-badge { background:#fff3d4; color:#9c5800; border:1px solid #ffe199; }
.pet-passive-badge { background:#e8f7ff; color:#186894; border:1px solid #bee3f8; }
.pet-detail-done { margin-top:14px; border:0; border-radius:14px; padding:11px 26px; background:#ff7c98; color:#fff; font:900 13px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; box-shadow:0 4px 0 #c8506d; }
@keyframes pet-detail-in { from { opacity:0; transform:translateY(10px) scale(.96); } to { opacity:1; transform:none; } }
@media (max-width:900px) {
  .pet-options { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:205px; }
  .pet-option { min-height:68px; grid-template-columns:42px 1fr; }
  .pet-option img { width:40px; height:52px; }
  .pet-detail-card { padding:20px 18px 22px; }
  .pet-detail-card img { width:118px; height:118px; }
  .pet-detail-card h2 { font-size:24px; }
}

/* Mobile touch layer: large, separated controls with safe-area support. */
.touch-controls { align-items:flex-end; gap:12px; padding:12px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
.move-pad { display:grid; grid-template-columns:repeat(2,minmax(72px,84px)); gap:10px; pointer-events:auto; }
.action-pad { display:grid; grid-template-columns:repeat(2,minmax(82px,96px)); gap:8px; width:min(204px,42vw); pointer-events:auto; }
.action-pad .power-control { grid-column:1/-1; width:100%; min-height:52px; }
.touch-controls button { min-width:72px; min-height:68px; border:2px solid #ffffffb8; border-radius:22px; background:#17324add; box-shadow:0 5px 0 #071a2d88,0 8px 20px #071a2d55; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; color:#fff; font-weight:1000; font-size:12px; touch-action:none; user-select:none; -webkit-tap-highlight-color:transparent; transition:transform 70ms ease,filter 70ms ease,box-shadow 70ms ease,opacity 150ms ease; opacity:.55; }
.touch-controls button .touch-icon { font-size:28px; line-height:1; }
.touch-controls button small { font-size:10px; font-weight:1000; line-height:1; }
.touch-controls button.power-control { background:linear-gradient(145deg,#ffd45c,#e28b22); opacity:.8; }

/* Character select clarity pass: larger previews, two-column roster, traits visible. */
#menu-step-character .select-versus { grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); gap:18px; align-items:start; }
#menu-step-character .select-side { align-items:stretch; min-width:0; padding:14px; border-radius:22px; }
#menu-step-character .select-label { align-self:center; font-size:14px; }
#menu-step-character .select-side > img { align-self:center; width:112px; height:112px; }
#menu-step-character .selected-pet-info { display:block; width:100%; min-height:88px; margin:0 0 8px; padding:10px 12px; border:1px solid #ffffffaa; box-sizing:border-box; }
#menu-step-character .selected-pet-info p { white-space:normal; line-height:1.35; }
#menu-step-character .selected-pet-traits span { font-size:10px; }
#menu-step-character .pet-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:350px; overflow-y:auto; overflow-x:hidden; gap:8px; padding:5px; background:#dff3f655; }
#menu-step-character .pet-option { min-width:0; min-height:92px; display:grid; grid-template-columns:58px minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas:"image name" "image role" "image skill"; align-items:center; gap:2px 8px; padding:8px; border:2px solid transparent; border-radius:15px; background:#ffffffb8; opacity:.72; transform:none; text-align:left; }
#menu-step-character .pet-option:hover { transform:translateY(-2px); opacity:.94; border-color:#b7dce5; }
#menu-step-character .pet-option.selected { transform:none; opacity:1; border-color:#ffb73c; background:#fff4cf; box-shadow:0 4px 12px #dc872a33; filter:none; }
#menu-step-character .pet-option img { grid-area:image; width:58px; height:70px; justify-self:center; }
#menu-step-character .pet-name { min-width:0; align-self:end; }
#menu-step-character .pet-name strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
#menu-step-character .pet-name small { display:block; margin-top:2px; overflow:hidden; color:#688098; font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
#menu-step-character .pet-skill { display:block; grid-area:skill; min-width:0; overflow:hidden; color:#2f7391; font-size:10px; font-weight:900; }
#menu-step-character .pet-skill b { display:none; }
#menu-step-character .pet-skill small { display:none; }
#menu-step-character .pet-skill em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#a5681b; font-size:10px; font-style:normal; }
#menu-step-character .versus-mark { align-self:center; font-size:22px; }

@media (max-width:900px) {
  #menu-step-character .select-versus { grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:6px; }
  #menu-step-character .select-side { padding:8px 6px; border-radius:17px; }
  #menu-step-character .select-label { font-size:11px; }
  #menu-step-character .select-side > img { width:78px; height:78px; }
  #menu-step-character .selected-pet-info { min-height:82px; padding:7px; }
  #menu-step-character .selected-pet-info strong { font-size:13px; }
  #menu-step-character .selected-pet-info p { font-size:9px; }
  #menu-step-character .selected-pet-traits { gap:3px; }
  #menu-step-character .selected-pet-traits span { font-size:8px; padding:3px 4px; }
  #menu-step-character .pet-options { max-height:285px; gap:5px; padding:3px; }
  #menu-step-character .pet-option { min-height:78px; grid-template-columns:39px minmax(0,1fr); gap:1px 5px; padding:5px; border-radius:11px; }
  #menu-step-character .pet-option img { width:39px; height:51px; }
  #menu-step-character .pet-name strong { font-size:11px; }
  #menu-step-character .pet-name small,
  #menu-step-character .pet-skill em { font-size:8px; }
}
.touch-controls button.pressed,.touch-controls button:active { transform:translateY(4px) scale(.94); filter:brightness(1.16); box-shadow:0 1px 0 #071a2d88,0 3px 10px #071a2d55; opacity:1; }
.touch-controls button.power-control.pressed { box-shadow:0 1px 0 #8e5b26,0 0 24px #ffd45caa; }
.touch-tutorial { position:absolute; inset:0; z-index:6; display:grid; place-items:center; padding:20px; background:#071a2d99; }
.touch-tutorial.hidden { display:none; }
.touch-tutorial-card { width:min(360px,calc(100% - 32px)); padding:20px; border:3px solid #ffe6a8; border-radius:24px; background:linear-gradient(145deg,#fffaf0,#eaf7f8); color:var(--ink); text-align:center; box-shadow:0 20px 60px #0008; }
.touch-tutorial-kicker { color:#e28b22; font-size:11px; font-weight:1000; letter-spacing:.08em; }
.touch-tutorial-card h2 { margin:8px 0; font-size:22px; }
.touch-tutorial-card p { margin:0 auto 16px; max-width:290px; color:#607b91; font-size:13px; font-weight:800; line-height:1.6; }
.touch-tutorial-card button { border:0; border-radius:14px; padding:11px 24px; background:#ff7c98; color:#fff; font:900 14px ui-rounded,"Trebuchet MS",system-ui,sans-serif; box-shadow:0 4px 0 #c8506d; cursor:pointer; }
@keyframes touch-power-pulse { 0%,100% { box-shadow:0 5px 0 #9c641d,0 0 8px #ffd95c; } 50% { box-shadow:0 5px 0 #9c641d,0 0 24px #ffe889; } }
.touch-controls button.power-control.ready { animation:touch-power-pulse .9s ease-in-out infinite; }
@media (max-width:1100px) and (pointer:coarse) { .touch-controls { display:flex; } .move-pad button { width:72px; height:72px; } .action-pad button { width:auto; min-height:68px; font-size:12px; } }
@media (orientation:portrait) and (max-width:900px) { .touch-controls { display:none; } .touch-tutorial-card { margin-top:env(safe-area-inset-top); } .portrait-message { padding:calc(24px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); } }

/* Pawlish Volley main menu. */
.main-menu { position:fixed; inset:0; z-index:50; display:grid; place-items:center; overflow:auto; padding:24px; background:#17324a url('assets/story/scene-05-let-match-begin.webp') center/cover no-repeat; }
.main-menu.hidden { display:none; }
.main-menu-shade { position:absolute; inset:0; background:linear-gradient(90deg,#071a2db8 0%,#071a2d66 45%,#071a2d30 100%); }
.main-menu-card { position:relative; width:min(520px,100%); padding:34px 34px 28px; border:3px solid #fff; border-radius:30px; color:#17324a; background:linear-gradient(145deg,#fffaf0f5,#eaf7f8f2); box-shadow:0 24px 80px #06172bcc; text-align:center; }
.main-menu-kicker { color:#e28b22; font-size:12px; font-weight:1000; letter-spacing:.12em; }
.main-menu-card h1 { margin:8px 0 5px; color:#17324a; font-size:clamp(32px,6vw,52px); }
.main-menu-subtitle { margin:0 auto 17px; color:#688098; font-weight:900; line-height:1.5; }
.main-menu-story { margin:0 auto 18px; padding:13px 15px 12px; border:2px solid #f1d58c; border-radius:18px; background:linear-gradient(145deg,#fff9e8e8,#fffef8d9); text-align:left; }
.main-menu-story-heading { display:flex; align-items:baseline; gap:7px; color:#c77c20; font-weight:1000; }
.main-menu-story-heading span { font-size:14px; }
.main-menu-story-heading small { color:#e2a24b; font-size:9px; letter-spacing:.12em; }
.main-menu-story p { margin:7px 0 9px; color:#607b91; font-size:12px; font-weight:800; line-height:1.6; }
.main-menu-story-en { margin-top:-3px !important; color:#607b91 !important; font-size:13px !important; font-weight:800 !important; line-height:1.55 !important; }
.story-chapters { display:flex; flex-wrap:wrap; gap:5px; }
.story-chapters span { padding:4px 7px; border-radius:999px; color:#52758a; background:#dff3f6; font-size:9px; font-weight:1000; }
.storybook-open { margin-top:10px; border:0; border-radius:999px; padding:7px 12px; color:#a5681b; background:#fff0c8; font:1000 10px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.storybook-open:hover { filter:brightness(1.04); transform:translateY(-1px); }
.main-menu-actions { display:grid; gap:11px; width:min(330px,100%); margin:0 auto; }
.main-menu-actions button { min-height:52px; border-radius:16px; padding:12px 18px; cursor:pointer; font:1000 15px ui-rounded,"Trebuchet MS",system-ui,sans-serif; transition:transform .12s ease,filter .12s ease; }
.main-menu-actions button:hover { transform:translateY(-2px); filter:brightness(1.05); }
.main-menu-actions button:active { transform:translateY(3px); }
.main-menu-primary { border:0; color:#fff; background:#ff7c98; box-shadow:0 5px 0 #c8506d; }
.main-menu-secondary { border:2px solid #9dcfdb; color:#28647b; background:#ffffffdd; box-shadow:0 3px 0 #acd4dc; }
.main-menu-exit { color:#7f6270; border-color:#e1c3cc; box-shadow:0 3px 0 #d3b1bc; }
.main-menu-story-note { margin-top:22px; color:#8f6320; font-size:11px; font-weight:900; }
.main-menu-exit-note { margin:14px auto 0; max-width:330px; color:#a35c6e; font-size:11px; font-weight:900; line-height:1.5; }
.main-menu-privacy { display:inline-flex; align-items:center; justify-content:center; min-height:36px; margin-top:12px; padding:6px 12px; border-radius:999px; color:#536f86; font-size:11px; font-weight:900; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color .15s ease,background .15s ease; }
.main-menu-privacy:hover { color:#1e5f84; background:rgba(255,255,255,.62); }
.main-menu-privacy:focus-visible { outline:3px solid #ffd45c; outline-offset:3px; }
.instructions-panel { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:#071a2dcc; backdrop-filter:blur(4px); }
.instructions-panel.hidden { display:none; }
.instructions-card { position:relative; width:min(460px,100%); padding:30px 28px 25px; border:3px solid #ffe6a8; border-radius:26px; background:linear-gradient(145deg,#fffaf0,#eaf7f8); color:#17324a; text-align:center; box-shadow:0 20px 70px #0008; }
.instructions-close { position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; border-radius:50%; color:#17324a; background:#17324a12; font-size:25px; line-height:1; cursor:pointer; }
.instructions-card h2 { margin:8px 0 18px; font-size:clamp(22px,4vw,30px); }
.instruction-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.instruction-grid div { display:grid; gap:4px; padding:12px 8px; border-radius:15px; background:#dff3f6; }
.instruction-grid b { color:#e28b22; font-size:18px; }
.instruction-grid span { color:#47738a; font-size:12px; font-weight:900; }
.instructions-card p { margin:17px auto; color:#688098; font-size:13px; font-weight:800; line-height:1.6; }
.instructions-close-button { border:0; border-radius:14px; padding:11px 25px; color:#fff; background:#ff7c98; font:900 14px ui-rounded,"Trebuchet MS",system-ui,sans-serif; box-shadow:0 4px 0 #c8506d; cursor:pointer; }
.keybind-section { margin:4px 0 13px; padding:11px 12px 10px; border:2px solid #c9e9ed; border-radius:16px; background:#f0fbfb; }
.keybind-heading { color:#e28b22; font-size:11px; font-weight:1000; letter-spacing:.08em; }
.keybind-hint { margin:4px 0 8px !important; color:#688098 !important; font-size:11px !important; line-height:1.35 !important; }
.keybind-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.keybind-button { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:38px; padding:6px 9px; border:1px solid #b7dce3; border-radius:11px; background:#fff; color:#35677d; font:900 10px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.keybind-button b { min-width:42px; padding:4px 5px; border-radius:7px; background:#dff3f6; color:#e28b22; font-size:12px; text-align:center; }
.keybind-button.waiting { border-color:#ffb15a; background:#fff7df; box-shadow:0 0 0 3px #ffd45c55; }
.keybind-button.waiting b { background:#ffd45c; color:#754c19; }
.keybind-reset { margin-top:7px; border:0; border-radius:9px; padding:6px 12px; background:#d9edf1; color:#35677d; font:900 10px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
@media (max-width:430px) { .keybind-grid { grid-template-columns:1fr; }.keybind-button { min-height:34px; } }
.storybook-layer { position:fixed; inset:0; z-index:65; display:grid; place-items:center; padding:18px; background:#071a2dcc; backdrop-filter:blur(4px); }
.storybook-layer.hidden { display:none; }
.storybook-card { position:relative; width:min(920px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:22px 30px 20px; border:3px solid #ffe6a8; border-radius:28px; background:linear-gradient(145deg,#fffaf0,#eaf7f8); color:#17324a; box-shadow:0 20px 70px #0008; text-align:center; }
.storybook-close { position:absolute; top:10px; right:13px; width:34px; height:34px; border:0; border-radius:50%; color:#17324a; background:#17324a12; font-size:25px; line-height:1; cursor:pointer; }
.storybook-progress { margin:5px 0 9px; color:#e28b22; font-size:12px; font-weight:1000; letter-spacing:.12em; }
.story-slide { display:none; grid-template-columns:minmax(0,1.5fr) minmax(220px,.8fr); gap:20px; align-items:center; text-align:left; }
.story-slide.active { display:grid; animation:storybook-in .2s ease both; }
.story-slide img { display:block; width:100%; max-height:52vh; object-fit:cover; border-radius:18px; box-shadow:0 8px 24px #17324a33; }
.story-slide h2 { margin:0 0 9px; color:#17324a; font-size:clamp(21px,3vw,32px); line-height:1.2; }
.story-slide p { margin:0; color:#607b91; font-size:14px; font-weight:800; line-height:1.7; }
.story-slide-en { display:block; margin-top:11px; color:#7891a3; font-size:11px; font-weight:700; line-height:1.55; }
.storybook-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.storybook-controls button { border:2px solid #9dcfdb; border-radius:12px; padding:9px 13px; color:#28647b; background:#fff; font:900 12px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.voice-ready { color:#a5681b; font-size:10px; font-weight:1000; letter-spacing:.05em; }
.storybook-finish { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:13px; padding:10px 12px; border-radius:15px; background:#fff0c8; color:#a5681b; }
.storybook-finish strong { font-size:12px; }
.storybook-finish button { border:0; border-radius:12px; padding:9px 13px; color:#fff; background:#ff7c98; font:1000 12px ui-rounded,"Trebuchet MS",system-ui,sans-serif; box-shadow:0 3px 0 #c8506d; cursor:pointer; }
@keyframes storybook-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@media (max-width:900px) { .main-menu { padding:16px; background-position:center; } .main-menu-card { padding:26px 19px 23px; border-radius:24px; } .main-menu-card h1 { font-size:clamp(29px,9vw,44px); } .main-menu-subtitle { margin-bottom:14px; font-size:13px; } .main-menu-story { padding:11px 12px 10px; margin-bottom:15px; } .main-menu-story p { font-size:11px; line-height:1.5; } .main-menu-story-en { font-size:11px !important; } .story-chapters span { font-size:8px; } .main-menu-actions button { min-height:50px; font-size:14px; } .instructions-card { padding:27px 18px 22px; } }
@media (max-width:700px) { .storybook-card { padding:20px 14px 16px; border-radius:22px; } .story-slide.active { display:block; } .story-slide img { max-height:42vh; margin-bottom:13px; } .story-slide h2 { font-size:22px; } .story-slide p { font-size:12px; line-height:1.55; } .story-slide-en { margin-top:8px; font-size:10px; } .storybook-controls { margin-top:12px; } .storybook-controls button { padding:8px 9px; font-size:10px; } .voice-ready { font-size:8px; } .storybook-finish { flex-direction:column; gap:8px; } }

/* P0 onboarding and readability polish. Keep this as a final override layer so
   the existing gameplay/menu styles remain intact. */
button:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline:3px solid #ffd45c; outline-offset:3px; }
.advanced-settings { width:min(720px,100%); margin:14px auto 0; padding:0 12px 10px; border:2px solid #c5e5ea; border-radius:16px; background:#effafb; text-align:left; }
.advanced-settings summary { padding:11px 4px 5px; color:#28647b; cursor:pointer; font-size:12px; font-weight:1000; list-style:none; }
.advanced-settings summary::-webkit-details-marker { display:none; }
.advanced-settings summary::before { content:'＋'; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px; border-radius:50%; color:#fff; background:#63bfd6; }
.advanced-settings[open] summary::before { content:'−'; }
.advanced-settings .learning-options { margin-top:8px; }
.arena-option { overflow:hidden; }
.arena-thumb { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16 / 9; min-height:72px; overflow:hidden; border-radius:12px; color:#fff; background:#8ed8ef center/cover no-repeat; box-shadow:inset 0 -28px 35px #17324a2b; }
.arena-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#ffffff20,transparent 50%,#17324a25); pointer-events:none; }
.arena-thumb.is-loading::before { content:'載入中…'; position:absolute; z-index:1; color:#fff; font-size:12px; font-weight:1000; text-shadow:0 1px 4px #17324acc; }
.arena-thumb.is-fallback::before { content:'PAWLISH ARENA'; position:absolute; z-index:1; color:#fff; font-size:11px; font-weight:1000; letter-spacing:.08em; text-shadow:0 1px 4px #17324acc; }
.arena-thumb.fallback-classic-court { background:linear-gradient(135deg,#75d7ee,#70b9cf 48%,#d8b56c); }
.arena-thumb.fallback-star-arena { background:linear-gradient(135deg,#324a91,#8b79c9 48%,#efb957); }
.arena-thumb.fallback-starlight-forest { background:linear-gradient(135deg,#58a982,#b8dd8c 48%,#5c9bd0); }
.arena-thumb.fallback-rainbow-cloud { background:linear-gradient(135deg,#8dddf2,#ffb8d1 48%,#ffd66e); }
.arena-thumb.fallback-moonlight-castle { background:linear-gradient(135deg,#273a78,#7083ce 48%,#9fd9e4); }
.arena-option.selected { border-color:#ffd45c; box-shadow:0 0 0 3px #ffd45c77,0 8px 20px #17324a22; }
.arena-option.selected::after { content:'✓ 已選擇'; position:absolute; right:8px; top:8px; z-index:2; padding:3px 7px; border-radius:999px; color:#fff; background:#e28b22; font-size:10px; font-weight:1000; }
.pet-picker-switch { display:flex; justify-content:center; gap:8px; margin:10px auto 8px; }
.pet-picker-switch button { min-height:40px; padding:8px 16px; border:2px solid #b7dce5; border-radius:999px; color:#35677d; background:#fff; font:1000 12px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.pet-picker-switch button.active { border-color:#ffb23f; color:#fff; background:#e28b22; box-shadow:0 3px 0 #b96d16; }
#menu-step-character #select-player-options, #menu-step-character #select-cpu-options { display:none !important; }
#menu-step-character .shared-pet-options { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; max-height:300px; overflow:auto; padding:8px; background:#ffffff80; }
#menu-step-character .shared-pet-options .pet-option { min-width:0; width:auto; transform:none; min-height:118px; padding:8px 5px; border:2px solid transparent; background:#ffffff88; opacity:.62; }
#menu-step-character .shared-pet-options .pet-option:hover { transform:translateY(-2px); opacity:.9; }
#menu-step-character .shared-pet-options .pet-option.selected { transform:translateY(-2px); border-color:#ffb23f; opacity:1; background:#fff6d7; }
#menu-step-character .shared-pet-options .pet-option img { width:58px; height:62px; }
#menu-step-character .shared-pet-options .pet-name small { display:block; color:#688098; font-size:9px; }
#menu-step-character .shared-pet-options .pet-skill { display:grid; gap:3px; width:100%; }
#menu-step-character .shared-pet-options .pet-skill b { color:#e28b22; font-size:10px; }
#menu-step-character .shared-pet-options .pet-skill em { display:block; color:var(--smash-color); font-size:9px; font-style:normal; font-weight:1000; }
.pet-stats { display:grid; gap:1px; color:#52758a; font-size:8px; font-weight:1000; line-height:1.1; }
.stat-bars { color:#e7aa32; letter-spacing:-1px; white-space:nowrap; }
.stat-bars i { font-style:normal; }
.training-overlay { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:#071a2dcc; backdrop-filter:blur(3px); }
.training-overlay.practice-active { background:transparent; backdrop-filter:none; pointer-events:none; place-items:start center; padding-top:12px; }
.training-overlay.practice-active .training-guide { pointer-events:none; width:min(520px,calc(100% - 24px)); padding:10px 16px; opacity:.94; }
.training-overlay.hidden { display:none; }
.training-card, .training-guide { width:min(520px,100%); padding:28px; border:3px solid #ffe6a8; border-radius:26px; color:#17324a; background:linear-gradient(145deg,#fffaf0,#eaf7f8); box-shadow:0 20px 70px #0009; text-align:center; }
.training-guide.hidden, .training-complete.hidden, .training-card.hidden { display:none !important; }
.training-card h2 { margin:9px 0 8px; font-size:clamp(25px,5vw,36px); }
.training-card p { margin:0 auto 19px; color:#688098; font-weight:800; line-height:1.6; }
.training-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.training-actions button { min-height:48px; padding:11px 18px; border-radius:14px; cursor:pointer; font:1000 14px ui-rounded,"Trebuchet MS",system-ui,sans-serif; }
.training-actions button:first-child { border:0; color:#fff; background:#ff7c98; box-shadow:0 4px 0 #c8506d; }
.training-actions button:last-child { border:2px solid #9dcfdb; color:#28647b; background:#fff; }
.training-guide { display:grid; gap:12px; justify-items:center; }
.training-guide > div:first-child { color:#e28b22; font-size:12px; font-weight:1000; letter-spacing:.08em; }
.training-guide strong { font-size:clamp(20px,4vw,30px); }
.training-key { min-width:150px; padding:12px 20px; border-radius:15px; color:#fff; background:#28647b; font-size:22px; font-weight:1000; letter-spacing:.08em; box-shadow:0 4px 0 #17324a; }
.training-progress { width:100%; height:10px; overflow:hidden; border-radius:999px; background:#d9eef1; }
.training-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#63c8ec,#ffca58,#ff7c98); transition:width .25s ease; }
.training-complete { display:grid; gap:12px; width:100%; padding-top:4px; }
.training-complete span { color:#688098; font-weight:800; }
.training-exit { min-height:44px; padding:8px 14px; border:1px solid #8ab8c8; border-radius:12px; background:#fff; color:#214960; font-weight:800; cursor:pointer; }
.training-exit:focus-visible,.training-actions button:focus-visible { outline:3px solid #2186b7; outline-offset:3px; }
/* 教學在球場外佔有自己的高度，提示不蓋住比分、球或觸控操作。 */
.training-guide.practice-strip { width:100%; flex:0 0 auto; display:grid; grid-template-columns:1fr auto auto; gap:4px 12px; padding:8px 14px; border-width:1px; border-radius:16px; box-shadow:none; text-align:left; }
.practice-strip .training-guide-kicker { grid-column:1; justify-self:start; }
.practice-strip #training-step-text { grid-column:1; grid-row:2; justify-self:start; font-size:18px; line-height:1.3; }
.practice-strip .training-key { grid-column:2; grid-row:1/3; align-self:center; min-width:0; padding:8px 12px; font-size:16px; }
.practice-strip .training-exit { grid-column:3; grid-row:1/3; align-self:center; }
.practice-strip .training-progress { grid-column:1/-1; height:4px; }
.training-active .gesture-layer { display:none !important; }
.training-active .touch-controls button { opacity:1; background:#214460dc; border-color:#a4dfec; }
.training-overlay { overflow:auto; }
@media (max-height:540px) and (orientation:landscape) {
  .training-guide.practice-strip { gap:2px 8px; padding:4px 10px; border-radius:0; }
  .practice-strip #training-step-text { font-size:15px; }
  .practice-strip .training-guide-kicker { font-size:11px; }
  .practice-strip .training-key { font-size:13px; padding:6px 8px; }
  .practice-strip .training-exit { font-size:12px; padding:6px 10px; }
  .training-overlay .training-guide { max-height:calc(100dvh - 24px); overflow:auto; }
}
@media (max-width:420px) and (orientation:portrait) {
  .training-guide.practice-strip { grid-template-columns:1fr auto; }
  .practice-strip .training-key { display:none; }
  .practice-strip .training-exit { grid-column:2; }
}
@media (max-width:700px) {
  #menu-step-character .shared-pet-options { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:300px; }
  #menu-step-character .shared-pet-options .pet-option { min-height:112px; }
  .advanced-settings { margin-top:10px; }
  .training-overlay { padding:12px; }
  .training-card, .training-guide { padding:22px 16px; }
}
@media (max-width:380px) {
  .main-menu { padding:8px; }
  .main-menu-card { padding:20px 12px 18px; }
  .main-menu-actions button { min-height:48px; font-size:13px; }
  .pet-picker-switch button { padding-inline:10px; font-size:11px; }
}

.touch-controls button[hidden] { display:none; }
.answer-grid button:focus-visible,.question-close:focus-visible,.word-replay:focus-visible { outline:3px solid #2d83b8; outline-offset:2px; }
@media (orientation:landscape) and (max-height:540px) and (max-width:1100px) {
  .question-card { width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 12px); overflow:auto; padding:8px 14px; box-sizing:border-box; }
  .question-kicker { font-size:12px; line-height:1.1; }
  .question-prompt { font-size:13px; line-height:1.2; margin-top:2px; }
  .question-icon { font-size:32px; margin:2px 0; line-height:1; }
  .answer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:6px 0; }
  .answer-grid button { min-height:44px; padding:6px 6px; font-size:13px; border-radius:12px; box-shadow:0 3px 0 #6cb2cc; }
  .answer-grid button::before { width:18px; height:18px; font-size:10px; }
  .word-replay, .question-close { min-height:44px; padding:6px 14px; font-size:12px; }
  .question-close { margin-top:4px; }
}
.learning-strip { display:flex; align-items:center; gap:10px; flex:0 0 auto; min-height:60px; padding:6px 12px; color:#fff; background:#173956; border-bottom:1px solid #9adce477; }
.learning-strip[hidden] { display:none; }
#learning-icon { font-size:30px; }
.steps-word-card-image { display:block; width:100%; height:100%; object-fit:contain; }
#learning-icon:has(.steps-word-card-image) { width:54px; height:54px; flex:0 0 54px; background:#fff7e8; border-radius:12px; padding:3px; }
#question-icon:has(.steps-word-card-image) { width:112px; height:112px; margin:6px auto; background:#fff7e8; border-radius:18px; padding:6px; }
@media(max-height:540px){#question-icon:has(.steps-word-card-image){width:60px;height:60px;padding:2px;margin:2px auto;}#learning-icon:has(.steps-word-card-image){width:40px;height:40px;flex-basis:40px;}}
.learning-copy { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:10px; min-width:0; }
#learning-word { font-size:19px; overflow-wrap:anywhere; }
#learning-translation { font-size:14px; }
#learning-progress { grid-column:1/-1; color:#d2eef5; font-size:12px; }
#learning-replay { min-width:48px; min-height:44px; flex:none; border:1px solid #ffdfa1; border-radius:12px; color:#15334c; background:#ffe6a6; font-size:14px; font-weight:900; cursor:pointer; }
#learning-replay:focus-visible { outline:3px solid #fff; outline-offset:2px; }
#learning-replay:disabled { opacity:.55; cursor:default; }
.learning-voice-status { font-size:12px; color:#ffe5a4; max-width:190px; }
@media (max-width:700px) {
  .learning-strip { gap:6px; padding:4px 8px; }
  .learning-copy { flex:1; column-gap:6px; }
  #learning-word { font-size:17px; }
  .learning-voice-status { max-width:90px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .touch-controls button.power-control.ready { animation:none; }
}
/* 頂部兩個 HUD 空隙：左側暫停／全螢幕，右側錄影／力量。 */
@media (orientation:landscape) {
  .stage-wrap { --hud-gap-offset:min(22.34375vw,39.722223vh); }
  .pause-button { top:6px; left:calc(50% - var(--hud-gap-offset) - 46px); width:44px; height:44px; }
  .fullscreen-button { top:6px; left:calc(50% - var(--hud-gap-offset) + 2px); width:44px; height:44px; }
  .record-controls { top:6px; right:auto; left:calc(50% + var(--hud-gap-offset) - 48px); transform:none; padding:0; }
  .record-controls #record-toggle { width:44px; min-width:44px; min-height:44px; padding:4px; font-size:0; }
  .record-controls #record-toggle::after { content:'錄影'; font-size:12px; }
  .record-controls #record-toggle.recording::after { content:'停止'; }
  .record-controls #record-status { position:absolute; width:1px; height:1px; min-width:0; overflow:hidden; clip-path:inset(50%); }
  .record-controls #record-status[data-state="error"] { top:48px; right:0; width:max-content; max-width:min(240px,55vw); height:auto; min-width:0; padding:8px 10px; overflow:visible; clip-path:none; border:1px solid #ffdf90; border-radius:12px; background:#17324af5; color:#fff; font-size:12px; line-height:1.4; pointer-events:none; }
}
@media (orientation:landscape) and (max-height:540px) and (max-width:1100px) {
  .action-pad .power-control { position:absolute; top:6px; left:calc(50% + var(--hud-gap-offset)); width:48px; min-width:48px; min-height:44px; height:44px; border-radius:14px; }
  .action-pad .power-control .touch-icon { font-size:18px; }
}
@media (orientation:landscape) and (max-height:540px) and (max-width:700px) {
  .action-pad { width:152px; grid-template-columns:repeat(2,72px); gap:8px; }
  .action-pad button { width:72px; min-width:72px; }
}
@supports (container-type:size) {
  @media (orientation:landscape) {
    .stage-wrap { container-type:size; --hud-gap-offset:min(22.34375cqw,39.722223cqh); }
  }
}

/* 窄直向三寵：每隊三隻橫排，兩隊上下排列，保留完整角色。 */
@media (orientation:portrait) and (max-width:500px) {
  #result-card .series-result-pets { flex-direction:column; align-items:center; gap:8px; }
  #result-card .series-result-pets .result-team { width:100%; }
  #result-card .series-result-pets .result-team-members { flex-direction:row; }
}

/* 短橫向結算採左右分區，比分、統計及兩個按鈕不落在螢幕外。 */
@media (orientation:landscape) and (max-height:540px) {
  #result-modal { padding:8px; place-items:center; }
  #result-card { width:min(760px,100%); max-height:calc(100dvh - 16px); padding:10px 14px; display:grid; grid-template-columns:minmax(150px,.8fr) minmax(0,1fr); grid-template-rows:auto auto auto auto auto; gap:4px 12px; overflow:auto; border-radius:22px; }
  #result-card .result-pets { grid-column:1; grid-row:1/4; align-self:center; align-items:center; height:auto; min-height:0; margin:0; gap:8px; }
  #result-card .result-pets img { width:70px; height:70px; }
  #result-card .result-pets div { font-size:10px; letter-spacing:0; }
  #result-card .result-kicker { grid-column:2; grid-row:1; font-size:14px; }
  #result-card h2 { grid-column:2; grid-row:2; margin:0; font-size:21px; line-height:1.2; }
  #result-card .final-score { grid-column:2; grid-row:3; margin:0; font-size:50px; }
  #result-card .stats { grid-column:1/-1; grid-row:4; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; font-size:11px; line-height:1.2; }
  #result-card .stats b { font-size:22px; line-height:1.2; }
  #result-card .result-actions { grid-column:1/-1; grid-row:5; flex-wrap:nowrap; gap:8px; }
  #result-card .result-actions button { flex:1; min-width:0; min-height:44px; margin:0; padding:8px; font-size:12px; line-height:1.25; }
  #result-card .series-result-pets { flex-direction:column; gap:6px; }
  #result-card .result-team-members { flex-direction:row; }
  #result-card .result-team-member img { width:38px; height:38px; }
  #result-card .result-team-member span { font-size:9px; }
  #result-card .result-team-label { font-size:9px; letter-spacing:0; }
}

/* 設定流程共用版面：只有內容捲動，主要操作保持可見。 */
.character-select { padding:12px; overflow:hidden; place-items:center; }
.character-select-card { display:flex; flex-direction:column; width:min(1120px,100%); max-height:calc(100dvh - 24px); padding:16px 24px 0; overflow:hidden; }
.character-select-card > .eyebrow { font-size:12px; }
.character-select-card > h1 { margin:6px 0; font-size:30px; line-height:1.2; outline:none; }
.character-select-card > .select-subtitle { display:none; }
.menu-progress { margin:6px 0; }
.menu-progress span { font-size:14px; padding:7px 20px; }
.menu-home { align-self:flex-start; margin:0; min-height:44px; padding:8px 12px; font-size:14px; }
.character-select-card > * { flex-shrink:0; }
#select-player-pet,#select-cpu-pet,#game-mode,#arena-map { display:none !important; }
.character-select-card > .menu-step:not(.hidden) { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%; }
.menu-step .step-content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:6px 3px; scrollbar-gutter:stable; }
.menu-step .step-content > h2,.menu-step .step-help { display:none; }
.step-actions { flex-shrink:0; display:flex; justify-content:center; gap:12px; margin:0; padding:12px 0 16px; background:linear-gradient(135deg,#fffaf0,#eaf7f8); border-top:1px solid #c9e1e7; }
.step-actions button { margin:0; min-height:50px; padding:12px 22px; font-size:17px; line-height:1.3; }
.game-mode-options { margin:6px auto 14px; padding:12px; }
.cpu-difficulty-options > label { display:block; font-size:14px; margin-bottom:8px; }
.mode-buttons { gap:10px; }
.mode-button { min-height:48px; padding:12px 18px; font-size:16px; }
.mode-button:disabled { cursor:not-allowed; opacity:.58; filter:saturate(.55); box-shadow:none; }
.game-mode-options small { font-size:14px; line-height:1.5; margin-top:10px; }
.arena-options { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:900px; gap:12px; margin:0 auto; }
.arena-option { position:relative; padding:8px; min-width:0; }
.arena-option .arena-thumb { height:auto; min-height:0; aspect-ratio:16/9; background-size:cover; background-position:center; background-repeat:no-repeat; }
.arena-option strong { font-size:16px; margin-top:8px; }
.arena-option small { font-size:12px; }
.advanced-settings { margin:12px auto; }
.advanced-settings summary { min-height:44px; font-size:14px; }
#menu-step-character .select-versus { grid-template-columns:1fr 32px 1fr; gap:12px; margin:0 auto 6px; }
#menu-step-character .select-side { display:grid; grid-template-columns:76px minmax(0,1fr); grid-template-rows:auto auto; padding:8px 12px; min-width:0; gap:3px 10px; text-align:left; }
#menu-step-character .select-side > img { grid-column:1; grid-row:1/3; width:76px; height:76px; margin:0; }
#menu-step-character .select-label { grid-column:2; align-self:end; font-size:14px; }
#menu-step-character .selected-pet-info { grid-column:2; padding:0; margin:0; min-height:0; border:0; background:none; text-align:left; }
#menu-step-character .selected-pet-info strong { font-size:18px; }
#menu-step-character .selected-pet-info .selected-pet-role { font-size:13px; }
#menu-step-character .selected-pet-info p,#menu-step-character .selected-pet-traits { display:none; }
.pet-picker-switch { margin:8px 0; gap:12px; }
.pet-picker-switch button { min-height:44px; font-size:14px; }
#menu-step-character .shared-pet-options { width:100%; max-width:none; max-height:none; overflow:visible; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:6px; margin:0; }
#menu-step-character .shared-pet-options .pet-option { display:grid; grid-template-columns:1fr; grid-template-rows:76px auto auto; grid-template-areas:'image' 'name' 'skill'; justify-items:center; align-content:start; min-height:0; padding:8px 10px; gap:4px; opacity:1; border-color:#d5e5e8; border-radius:18px; text-align:center; }
#menu-step-character .shared-pet-options .pet-option img { width:80px; height:80px; }
#menu-step-character .shared-pet-options .pet-name { align-self:start; width:100%; }
#menu-step-character .shared-pet-options .pet-name strong { font-size:17px; white-space:normal; overflow:visible; }
#menu-step-character .shared-pet-options .pet-name small { font-size:12px; white-space:normal; overflow:visible; line-height:1.4; color:#466a7e; }
#menu-step-character .shared-pet-options .pet-skill { display:flex; flex-direction:column; gap:5px; overflow:visible; }
#menu-step-character .shared-pet-options .pet-skill b { display:block; order:2; font-size:11px; line-height:1.4; color:#82531b; }
#menu-step-character .shared-pet-options .pet-skill em { display:none; }
.pet-stats { display:grid; gap:3px; font-size:13px; line-height:1.25; }
.pet-stats > span { display:flex; justify-content:space-between; gap:5px; }
.stat-bars { font-size:14px; letter-spacing:1px; color:#956315; }
#menu-step-character .select-instructions { display:none; }
.main-menu-card { max-height:calc(100dvh - 24px); overflow:auto; }
.main-menu-story p,.main-menu-story-en { font-size:14px !important; line-height:1.55; }
.main-menu-story-note { display:none; }
.main-menu-actions button { min-height:50px; font-size:16px; }
.instructions-card,.pet-detail-card { max-height:calc(100dvh - 32px); overflow:auto; }
.instructions-close,.pet-detail-close,.storybook-close { width:44px; height:44px; }
.keybind-button,.keybind-reset,.instructions-close-button,.storybook-controls button,.storybook-finish button { min-height:44px; font-size:14px; }
.instruction-grid span,.instructions-card p,.story-slide p { font-size:15px; }
.story-slide-en { font-size:16px; }
@media (max-width:700px) {
  .character-select { padding:8px; }
  .character-select-card { max-height:calc(100dvh - 16px); padding:12px 12px 0; border-radius:24px; }
  .character-select-card > h1 { font-size:24px; }
  .character-select-card > .eyebrow { display:none; }
  .menu-progress span { padding:6px 15px; }
  .step-actions { gap:8px; padding:10px 0 12px; }
  .step-actions button { min-height:48px; font-size:14px; padding:10px 12px; }
  .mode-buttons { display:grid; grid-template-columns:1fr; gap:8px; }
  #difficulty-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #difficulty-buttons button { font-size:13px; padding:10px 4px; }
  .arena-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .arena-option strong { font-size:14px; }
  .arena-option small { display:none; }
  #menu-step-character .select-versus { gap:3px; grid-template-columns:1fr 20px 1fr; }
  #menu-step-character .select-side { grid-template-columns:48px 1fr; gap:3px; padding:6px; border-radius:14px; }
  #menu-step-character .select-side > img { width:48px; height:64px; }
  #menu-step-character .select-label { font-size:11px; }
  #menu-step-character .selected-pet-info strong { font-size:14px; }
  #menu-step-character .selected-pet-info .selected-pet-role { font-size:12px; }
  #menu-step-character .selected-pet-info .selected-pet-role { display:none; }
  .pet-picker-switch { gap:8px; }
  .pet-picker-switch button { font-size:13px; padding:8px 12px; }
  #menu-step-character .shared-pet-options { display:flex !important; max-height:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; padding:8px 6px 14px; gap:10px; }
  #menu-step-character .shared-pet-options .pet-option { flex:0 0 188px; scroll-snap-align:start; padding:10px 14px; }
  .main-menu { padding:8px; }
  .main-menu-card { padding:22px 16px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .character-select { padding:6px; }
  .character-select-card { position:relative; max-height:calc(100dvh - 12px); padding:6px 12px 0; border-radius:18px; }
  .character-select-card > .eyebrow,.character-select-card > h1 { display:none; }
  .menu-progress { align-self:flex-end; margin:0; height:44px; align-items:center; }
  .menu-progress span { padding:5px 10px; font-size:13px; }
  .menu-home { position:absolute; top:6px; left:12px; font-size:12px; padding:6px; }
  .step-actions { padding:6px 0 8px; }
  .step-actions button { min-height:44px; padding:8px 16px; font-size:14px; }
  #menu-step-mode .step-content { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .game-mode-options { margin:0; padding:8px; width:100%; }
  .mode-buttons { display:flex; flex-wrap:wrap; gap:6px; }
  .mode-button { flex:1; min-height:44px; padding:6px 8px; font-size:13px; }
  .game-mode-options small { font-size:12px; line-height:1.4; }
  #difficulty-buttons { display:flex; }
  .arena-options { display:flex; overflow-x:auto; gap:10px; padding:3px; }
  .arena-option { flex:0 0 180px; }
  #menu-step-character .shared-pet-options { display:flex !important; overflow-x:auto; overflow-y:hidden; gap:10px; }
  #menu-step-character .shared-pet-options .pet-option { flex:0 0 210px; grid-template-columns:64px 1fr; grid-template-rows:auto auto; grid-template-areas:'image name' 'image skill'; padding:8px; gap:4px 8px; }
  #menu-step-character .shared-pet-options .pet-option img { width:64px; height:90px; }
  #menu-step-character .shared-pet-options .pet-name strong { font-size:15px; }
  #menu-step-character .shared-pet-options .pet-name small { font-size:11px; }
  #menu-step-character .select-side { grid-template-columns:48px 1fr; padding:3px 8px; }
  #menu-step-character .select-side > img { width:48px; height:48px; }
  #menu-step-character .step-content { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; gap:2px 6px; }
  #menu-step-character .select-versus { grid-column:1; margin:0; gap:2px; grid-template-columns:1fr 18px 1fr; }
  #menu-step-character .select-side { grid-template-columns:32px 1fr; padding:3px; }
  #menu-step-character .select-side > img { width:32px; height:42px; }
  #menu-step-character .select-label { font-size:10px; }
  #menu-step-character .pet-picker-switch { grid-column:2; margin:0; align-self:center; gap:5px; }
  #menu-step-character .pet-picker-switch button { padding:6px 8px; font-size:12px; }
  #menu-step-character .shared-pet-options { grid-column:1/-1; }
  #menu-step-character .selected-pet-info strong { font-size:14px; }
  #menu-step-character .selected-pet-info .selected-pet-role { display:none; }
  .pet-picker-switch { margin:4px 0; }
  .main-menu-card { width:min(760px,100%); padding:14px 20px; display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
  .main-menu-kicker { grid-column:1/-1; font-size:11px; }
  .main-menu-card h1 { grid-column:1; font-size:30px; margin:0; align-self:end; }
  .main-menu-subtitle { display:none; }
  .main-menu-story { grid-column:1; margin:0; padding:10px; }
  .main-menu-story-heading { display:none; }
  .main-menu-story p { margin:0; font-size:12px !important; }
  .main-menu-story-en { margin-top:8px !important; }
  .main-menu-actions { grid-column:2; grid-row:2/4; gap:8px; margin:0; align-self:center; width:100%; }
  .main-menu-actions button { min-height:46px; font-size:14px; padding:8px; }
}

/* 2026-09-27：選角流程清晰化。Pet 圖維持既有正式透明素材，僅調整資訊層級與操作。 */
.pet-choice-guide { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; width:min(900px,100%); margin:2px auto 8px; padding:9px 14px; border:1px solid #a8dce7; border-radius:16px; color:#214960; background:linear-gradient(110deg,#e8f9fb,#fff6d7); text-align:left; }
.pet-choice-step { display:grid; place-items:center; min-width:104px; min-height:34px; padding:5px 10px; border-radius:999px; color:#fff; background:#e28b22; font-size:12px; font-weight:1000; }
.pet-choice-guide strong { display:block; font-size:18px; line-height:1.25; }
.pet-choice-guide small { display:block; margin-top:2px; color:#5f7f90; font-size:12px; font-weight:800; }
#menu-step-character .select-versus { width:min(900px,100%); }
#menu-step-character .select-side { position:relative; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
#menu-step-character .select-side.is-picking { border-color:#ffb23f; background:linear-gradient(130deg,#fffaf0,#fff1c9); box-shadow:0 0 0 3px #ffd45c55; }
#menu-step-character .select-side.is-picking::after { content:'正在選擇'; position:absolute; right:9px; top:7px; padding:3px 8px; border-radius:999px; color:#fff; background:#e28b22; font-size:9px; font-weight:1000; }
#menu-step-character .selected-pet-info p { display:block; max-width:390px; margin:3px 0 0; color:#5f7f90; font-size:11px; line-height:1.35; }
#menu-step-character .selected-pet-traits { display:none; }
.selected-pet-detail { grid-column:2; justify-self:start; min-height:30px; margin-top:2px; padding:4px 10px; border:1px solid #9dcfdb; border-radius:999px; color:#28647b; background:#fff; font:900 10px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.selected-pet-detail:hover { border-color:#e28b22; color:#9b5b10; }
.pet-picker-switch { width:min(900px,100%); }
.pet-picker-switch button { flex:1; max-width:310px; min-height:46px; font-size:14px; }
.pet-picker-switch button[disabled] { cursor:not-allowed; opacity:.5; box-shadow:none; }
.pet-filter-bar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; width:min(980px,100%); margin:4px auto 7px; }
.pet-filter-bar > span { color:#5f7f90; font-size:12px; font-weight:1000; }
.pet-filter-bar button { min-height:36px; padding:6px 11px; border:1px solid #b9dbe2; border-radius:999px; color:#35677d; background:#fff; font:900 11px ui-rounded,"Trebuchet MS",system-ui,sans-serif; cursor:pointer; }
.pet-filter-bar button.active { border-color:#e28b22; color:#8b520e; background:#fff0c8; box-shadow:inset 0 0 0 1px #ffd45c; }
.pet-filter-bar .pet-random-button { margin-left:5px; border-color:#cabaf0; color:#604f91; background:#f2edff; }
#menu-step-character .shared-pet-options { width:min(1000px,100%); grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; padding:7px; border:1px solid #d7e9ec; border-radius:18px; background:#ffffff72; }
#menu-step-character .shared-pet-options .pet-option { position:relative; grid-template-rows:88px auto auto; min-height:176px; padding:10px 9px 9px; border:2px solid #d5e5e8; opacity:1; background:#fffffff2; box-shadow:0 4px 12px #17324a12; }
#menu-step-character .shared-pet-options .pet-option[hidden] { display:none !important; }
#menu-step-character .shared-pet-options .pet-option:hover { border-color:#91cdd9; box-shadow:0 7px 18px #17324a20; }
#menu-step-character .shared-pet-options .pet-option.selected { border-color:#f2a427; background:linear-gradient(145deg,#fff9e7,#ffefbd); box-shadow:0 0 0 2px #ffd45c66,0 7px 18px #b96d1622; }
#menu-step-character .shared-pet-options .pet-option img { width:92px; height:92px; }
#menu-step-character .shared-pet-options .pet-name strong { font-size:17px; }
#menu-step-character .shared-pet-options .pet-name small { font-size:11px; }
#menu-step-character .shared-pet-options .pet-skill { gap:3px; }
#menu-step-character .shared-pet-options .pet-skill > small { display:none; }
#menu-step-character .shared-pet-options .pet-skill b { font-size:10px; }
#menu-step-character .shared-pet-options .pet-stats { width:100%; gap:2px; font-size:13px; }
#menu-step-character .shared-pet-options .stat-bars { font-size:14px; letter-spacing:0; }
.pet-strength { position:absolute; left:7px; top:7px; z-index:2; padding:3px 7px; border-radius:999px; color:#fff; background:#2f7f98e8; font-size:9px; font-weight:1000; box-shadow:0 2px 5px #17324a33; }
#menu-step-character .shared-pet-options .selected-check { width:auto; min-width:23px; padding:0 7px; border-radius:999px; white-space:nowrap; font-size:9px; }

@media (max-width:700px) {
  .pet-choice-guide { grid-template-columns:auto 1fr; gap:8px; padding:7px 9px; }
  .pet-choice-step { min-width:82px; min-height:30px; padding:4px 7px; font-size:10px; }
  .pet-choice-guide strong { font-size:14px; }
  .pet-choice-guide small { font-size:10px; }
  #menu-step-character .select-side.is-picking::after { display:none; }
  #menu-step-character .selected-pet-info p,.selected-pet-detail { display:none; }
  .pet-filter-bar { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding:0 2px 5px; scrollbar-width:thin; }
  .pet-filter-bar > span { flex:0 0 auto; }
  .pet-filter-bar button { flex:0 0 auto; min-height:38px; }
  #menu-step-character .shared-pet-options .pet-option { flex-basis:196px; grid-template-rows:94px auto auto; min-height:182px; }
  #menu-step-character .shared-pet-options .pet-option img { width:96px; height:96px; }
}

@media (max-height:540px) and (orientation:landscape) {
  .pet-choice-guide { grid-column:1/-1; margin:0; padding:4px 8px; }
  .pet-choice-step { min-height:26px; }
  .pet-choice-guide strong { font-size:13px; }
  .pet-choice-guide small { display:none; }
  #menu-step-character .pet-filter-bar { grid-column:1/-1; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; margin:0; padding-bottom:3px; }
  .pet-filter-bar button { min-height:32px; padding:4px 9px; }
  #menu-step-character .shared-pet-options .pet-option { flex-basis:190px; min-height:86px; grid-template-columns:58px 1fr; grid-template-rows:auto auto; padding:5px 7px; }
  #menu-step-character .shared-pet-options .pet-option img { width:58px; height:72px; }
  #menu-step-character .shared-pet-options .pet-name strong { font-size:15px; }
  #menu-step-character .shared-pet-options .pet-name small,#menu-step-character .shared-pet-options .pet-skill b { font-size:10px; }
  #menu-step-character .shared-pet-options .pet-stats { font-size:13px; }
  #menu-step-character .shared-pet-options .stat-bars { font-size:12px; }
  #menu-step-character .shared-pet-options .pet-strength { top:3px; left:3px; font-size:8px; }
  .selected-pet-detail,#menu-step-character .selected-pet-info p { display:none; }
}

/* 2026-09-27：上架版選角導引。先選自己，再選對手；卡片保留差異但降低閱讀負擔。 */
.pet-scroll-hint { display:none; color:#638296; font-size:11px; font-weight:900; }
#menu-step-character .select-versus { margin-bottom:3px; }
#menu-step-character .select-side {
  grid-template-columns:62px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  min-height:82px;
  padding:7px 10px;
}
#menu-step-character .select-side > img { grid-column:1; grid-row:1/3; width:62px; height:68px; }
#menu-step-character .select-label { grid-column:2/4; grid-row:1; }
#menu-step-character .selected-pet-info { grid-column:2; grid-row:2; }
#menu-step-character .selected-pet-info p { display:none; }
#menu-step-character .selected-pet-traits { display:flex; flex-wrap:wrap; gap:3px 7px; margin-top:3px; }
#menu-step-character .selected-pet-traits > span { display:flex; align-items:center; gap:3px; color:#42687b; font-size:9px; font-weight:1000; }
#menu-step-character .selected-pet-traits .stat-bars { font-size:8px; letter-spacing:-1px; }
#menu-step-character .selected-pet-detail { grid-column:3; grid-row:2; align-self:center; justify-self:end; min-height:32px; margin:0; }
.pet-picker-switch { margin:4px 0; }
.pet-picker-switch button.active::after { content:' ✓'; }
.pet-filter-bar { margin:2px auto 4px; }
#menu-step-character .shared-pet-options { gap:8px; padding:6px; }
#menu-step-character .shared-pet-options .pet-option {
  grid-template-rows:68px auto auto;
  min-height:148px;
  padding:7px 8px;
  gap:2px;
}
#menu-step-character .shared-pet-options .pet-option img { width:72px; height:72px; }
#menu-step-character .shared-pet-options .pet-name strong { font-size:16px; }
#menu-step-character .shared-pet-options .pet-name small { font-size:10px; line-height:1.2; }
#menu-step-character .shared-pet-options .pet-skill { width:100%; gap:2px; }
#menu-step-character .shared-pet-options .pet-skill b { font-size:9px; line-height:1.2; }
#menu-step-character .shared-pet-options .pet-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; font-size:12px; }
#menu-step-character .shared-pet-options .pet-stats > span { display:grid; justify-items:center; gap:0; }
#menu-step-character .shared-pet-options .stat-bars { font-size:8px; letter-spacing:-1px; }
#menu-step-character .stat-bars { display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
#menu-step-character .stat-bars i { width:7px; height:5px; border-radius:999px; background:#d4e0e3; box-shadow:inset 0 0 0 1px #b7cbd0; }
#menu-step-character .stat-bars i.on { background:linear-gradient(90deg,#ffc34f,#e78b21); box-shadow:none; }
#start-match:disabled { cursor:not-allowed; opacity:.58; filter:saturate(.55); box-shadow:0 3px 0 #a76b79; }

@media (max-width:700px) {
  .pet-scroll-hint { display:block; margin:1px 0 -2px; }
  #menu-step-character .select-side { grid-template-columns:48px minmax(0,1fr); min-height:66px; }
  #menu-step-character .select-side > img { width:48px; height:54px; }
  #menu-step-character .select-label,#menu-step-character .selected-pet-info { grid-column:2; }
  #menu-step-character .selected-pet-detail { display:none; }
  #menu-step-character .selected-pet-traits { display:none; }
  #menu-step-character .shared-pet-options .pet-option { flex-basis:174px; grid-template-rows:78px auto auto; min-height:158px; }
  #menu-step-character .shared-pet-options .pet-option img { width:82px; height:82px; }
}

@media (max-height:540px) and (orientation:landscape) {
  .pet-scroll-hint { display:block; grid-column:1/-1; margin:0; font-size:9px; }
  #menu-step-character .select-side { min-height:48px; }
  #menu-step-character .selected-pet-traits { display:none; }
  #menu-step-character .shared-pet-options .pet-option { flex-basis:178px; min-height:82px; }
  #menu-step-character .shared-pet-options .pet-stats { font-size:11px; }
  #menu-step-character .shared-pet-options .stat-bars { font-size:7px; }
}

/* ═══════════════════════════════════════════════════════════════
   UI VISUAL POLISH SYSTEM 1：主選單入場動畫 (staggered fade-in)
   ═══════════════════════════════════════════════════════════════ */
@keyframes menuCardFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.main-menu-card { animation: menuCardFade .35s ease both; }
@media (prefers-reduced-motion:reduce) {
  .main-menu-card { animation:none; }
}

/* ═══════════════════════════════════════════════════════════════
   UI VISUAL POLISH SYSTEM 2：寵物卡 Hover 發光（主題色驅動）
   CSS variable --pet-glow 由 JS 注入各卡片
   ═══════════════════════════════════════════════════════════════ */
#menu-step-character .shared-pet-options .pet-option {
  --pet-glow: #ffd45c;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease,
              border-color .2s ease, opacity .15s ease;
}
#menu-step-character .shared-pet-options .pet-option:hover {
  border-color: color-mix(in srgb, var(--pet-glow) 65%, #b7dce5);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--pet-glow) 28%, transparent),
              0 0 0 1px color-mix(in srgb, var(--pet-glow) 38%, transparent);
  transform: translateY(-4px) scale(1.018);
}
#menu-step-character .shared-pet-options .pet-option.selected {
  border-color: var(--pet-glow);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--pet-glow) 10%, #fff),
    color-mix(in srgb, var(--pet-glow) 18%, #fff9e7));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pet-glow) 55%, transparent),
              0 8px 22px color-mix(in srgb, var(--pet-glow) 22%, transparent);
}
#menu-step-character .shared-pet-options .pet-option.selected .selected-check {
  background: var(--pet-glow); color:#17324a;
}
#menu-step-character .shared-pet-options .pet-option img {
  transition: filter .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
#menu-step-character .shared-pet-options .pet-option:hover img {
  filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--pet-glow) 38%, transparent))
          drop-shadow(0 3px 4px #17324a22);
  transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════════════
   UI VISUAL POLISH SYSTEM 3：寵物詳情卡個性化配色
   CSS variable --pet-theme 由 JS 注入 .pet-detail-card
   ═══════════════════════════════════════════════════════════════ */
.pet-detail-card { --pet-theme:#ffd45c; position:relative; overflow:hidden; }
.pet-detail-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in srgb, var(--pet-theme) 16%, transparent) 0%,
    transparent 62%);
  transition: background .3s ease;
}
.pet-detail-card > * { position:relative; z-index:1; }
.pet-detail-card img {
  filter: drop-shadow(0 12px 10px color-mix(in srgb, var(--pet-theme) 28%, #17324a33));
  transition: filter .3s ease;
}
.pet-detail-kicker { color: color-mix(in srgb, var(--pet-theme) 65%, #8b5200); }
.pet-detail-done {
  background: var(--pet-theme); color:#17324a;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pet-theme) 55%, #17324a);
  transition: background .3s ease, box-shadow .3s ease;
}
.pet-skill-badge {
  border-color: color-mix(in srgb, var(--pet-theme) 52%, #ffe199);
  background: color-mix(in srgb, var(--pet-theme) 10%, #fffdf7);
}

/* ═══════════════════════════════════════════════════════════════
   UI VISUAL POLISH SYSTEM 4：HUD 比分彈跳（Canvas scorePop 已存在）
   ═══════════════════════════════════════════════════════════════ */
/* Handled in game.js via state.scorePop scale interpolation */

/* ═══════════════════════════════════════════════════════════════
   UI VISUAL POLISH SYSTEM 5：結算畫面升級
   ═══════════════════════════════════════════════════════════════ */
@keyframes resultWinnerFloat {
  0%,100% { transform:translateY(0) scale(1);      filter:drop-shadow(0 0 14px #ffd45c88) drop-shadow(0 8px 5px #071a2d66); }
  50%     { transform:translateY(-8px) scale(1.04); filter:drop-shadow(0 0 24px #ffd45ccc) drop-shadow(0 14px 9px #071a2d55); }
}
@keyframes resultLoserDroop {
  from { opacity:0; transform:translateY(8px) rotate(0deg); }
  to   { opacity:.7; transform:rotate(-5deg); }
}
@keyframes resultCardIn {
  from { opacity:0; transform:translateY(22px) scale(.93); }
  to   { opacity:1; transform:none; }
}
@keyframes kickerGlow {
  0%,100% { text-shadow:0 2px 0 #8e5b26; }
  50%     { text-shadow:0 2px 18px #ffd45ccc, 0 2px 0 #8e5b26; }
}
@keyframes resultScorePop {
  0%  { opacity:0; transform:scale(.52); }
  65% { transform:scale(1.2); }
  100%{ opacity:1; transform:scale(1); }
}
.result-animate { animation:resultCardIn .5s cubic-bezier(.22,1,.36,1) both !important; }
.result-animate .result-pets { animation:resultCardIn .45s .10s ease both; }
.result-animate .result-kicker { animation:menuFadeUp .4s .18s ease both, kickerGlow 2.5s 1.1s ease-in-out infinite; }
.result-animate #result-title { animation:menuFadeUp .4s .26s ease both; }
.result-animate .final-score { animation:resultScorePop .6s .38s cubic-bezier(.22,1.5,.36,1) both; }
.result-animate .stats { animation:menuFadeUp .4s .48s ease both; }
.result-animate .result-actions { animation:menuFadeUp .4s .58s ease both; }
#result-player-pose.winner, #result-cpu-pose.winner { animation:resultWinnerFloat 2.2s ease-in-out infinite; }
#result-player-pose.loser,  #result-cpu-pose.loser  { animation:resultLoserDroop .6s .35s cubic-bezier(.22,1,.36,1) both; }
.result-animate .play-again   { animation:menuButtonPop .55s .68s cubic-bezier(.22,1.5,.36,1) both; }
.result-animate .back-pawlish { animation:menuButtonPop .55s .76s cubic-bezier(.22,1.5,.36,1) both; }
@media (prefers-reduced-motion:reduce) {
  #result-player-pose.winner,#result-cpu-pose.winner,
  #result-player-pose.loser, #result-cpu-pose.loser,
  .result-animate,.result-animate .result-pets,.result-animate .result-kicker,.result-animate #result-title,
  .result-animate .final-score,.result-animate .stats,.result-animate .result-actions,
  .result-animate .play-again,.result-animate .back-pawlish
  { animation:none !important; }
  #result-player-pose.loser,#result-cpu-pose.loser { opacity:.7; transform:rotate(-5deg); }
}