/* 黃色結算介面；角色保留 3D 材質，操作與圖示保持平面。 */
:root { scrollbar-gutter:stable; }
.l2-quiz[data-quiz-view="results"],.l2-quiz[data-quiz-view="results"] .quiz-shell { background:#fff; }
.l2-quiz #quiz-results { --result-ink:#172D46; padding:28px 0 48px; color:#172D46; }
.l2-quiz .result-layout { grid-template-columns:minmax(0,42fr) minmax(0,58fr); gap:28px; align-items:stretch; }
.l2-quiz #result-character { min-width:0; }
.game-role { color:#172D46; position:relative; display:flex; flex-direction:column; min-width:0; height:100%; padding:28px; border:1px solid #E4CF73; border-bottom:6px solid #FFD400; border-radius:24px; background:#FFF2B2; overflow:hidden; }
.game-role-heading { position:relative; z-index:1; }
.game-major { display:inline-block; margin:0 0 10px; padding:3px 10px; border:1px solid #172D46; border-radius:6px; font-size:.85rem; font-weight:700; line-height:1.5; }
.game-title,.l2-quiz #quiz-results .game-title { margin:0; font-size:clamp(1.9rem,3.5vw,2.85rem); line-height:1.25; font-weight:850; letter-spacing:0; text-wrap:balance; overflow-wrap:anywhere; }
.game-stage { display:flex; align-items:center; justify-content:center; height:370px; width:100%; min-width:0; margin:8px 0; }
.character-image { display:block; height:100%; width:100%; max-width:100%; object-fit:contain; }
.game-stage[data-portraits="2"] .character-image { width:50%; }
.game-effect { margin:auto 0 0; padding-top:16px; font-size:1.05rem; font-weight:600; line-height:1.8; letter-spacing:0; overflow-wrap:break-word; line-break:strict; }
.role-switches { display:flex; gap:6px; flex-wrap:wrap; margin:4px 0; }
.role-switches button { background:#fff8; border:1px solid #B5A151; border-radius:8px; color:#172D46; min-height:44px; padding:6px 10px; font:inherit; font-size:.82rem; cursor:pointer; }
.role-switches button small { display:block; font-size:.72rem; }
.role-switches button[aria-pressed="true"] { background:#172D46; border-color:#172D46; color:#fff; }
.l2-quiz .result-layout[data-mode="multi"] .game-major { display:none; }
.l2-quiz .result-layout[data-mode="multi"] .game-stage { height:270px; }
.l2-quiz .result-layout[data-mode="empty"] { max-width:560px; grid-template-columns:minmax(0,1fr); }
.l2-quiz .ability-panel { border:1px solid #DCE5ED; border-radius:24px; padding:24px; background:#fff; min-width:0; }
.l2-quiz .ability-panel h2 { margin:0 0 14px; font-size:1.5rem; letter-spacing:0; }
.l2-quiz .ability-row { display:grid; grid-template-columns:38px minmax(0,1fr) 36px 60px; grid-template-rows:auto 7px; gap:7px 12px; align-items:center; width:100%; min-height:56px; padding:10px 8px; border:0; border-bottom:1px solid #E9EDF0; border-radius:0; background:#fff; color:#172D46; font:inherit; text-align:left; cursor:pointer; }
.l2-quiz .ability-row:last-child { border-bottom:0; }
.l2-quiz .ability-row:hover { background:#FFF9DD; }
.l2-quiz .ability-icon { grid-column:1; grid-row:1 / 3; width:38px; height:38px; object-fit:contain; filter:none; box-shadow:none; }
.l2-quiz .ability-name { font-size:.95rem; font-weight:700; }
.l2-quiz .ability-value { font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
.l2-quiz .ability-tag { font-size:.7rem; text-align:center; line-height:1.4; }
.l2-quiz .ability-tag small { display:block; font-size:.65rem; color:#586675; }
.l2-quiz .ability-track { grid-column:2 / 5; height:7px; background:#E9EDF0; border-radius:3px; overflow:hidden; }
.l2-quiz .ability-track > span { display:block; height:100%; background:#8898A8; transform-origin:left; }
.l2-quiz .ability-row[data-tone="primary"] .ability-track > span { background:#FFD400; box-shadow:inset 0 0 0 1px #8C7400; }
.l2-quiz .ability-row[data-tone="primary"] .ability-tag { background:#FFD400; border-radius:4px; padding:2px; }
.l2-quiz .ability-row[data-tone="secondary"] .ability-track > span { background:#172D46; }
.l2-quiz .result-evidence,.l2-quiz .result-library { margin:32px 0 0; }
.l2-quiz :is(.result-evidence,.result-library)>h2 { font-size:1.45rem; margin:0 0 16px; letter-spacing:0; }
.l2-quiz #result-reasons { gap:14px; }
.l2-quiz .answer-fragment { border-radius:12px; }
.l2-quiz .answer-fragment > summary { min-height:76px; }
.l2-quiz .fragment-majors button,.l2-quiz .major-buttons button { min-height:46px; padding:10px 14px; color:#172D46; background:#fff; border:1px solid #CCD4DB; border-radius:10px; font:inherit; font-size:.95rem; font-weight:600; cursor:pointer; }
.l2-quiz .fragment-majors button { min-height:40px; padding:5px 10px; font-size:.8rem; }
.l2-quiz .major-buttons { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.l2-quiz :is(.fragment-majors,.major-buttons) button:hover { background:#FFF2B2; border-color:#A88B00; }
.l2-quiz #quiz-results :is(a,button,summary):focus-visible,.game-role button:focus-visible { outline:3px solid #172D46; outline-offset:3px; }
.l2-quiz .result-bottom { margin-top:30px; }
.major-modal-open { overflow:hidden; }
.major-dialog { color:#172D46; background:#fff; border:0; border-top:6px solid #FFD400; border-radius:18px; padding:0; width:min(760px,calc(100vw - 40px)); max-width:none; max-height:86vh; max-height:86dvh; overflow:hidden; }
.major-dialog::backdrop { background:#172D4699; }
.major-dialog-frame { display:flex; flex-direction:column; max-height:calc(86vh - 6px); max-height:calc(86dvh - 6px); }
.major-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 28px 18px; }
.major-dialog-head h2 { margin:0; font-size:1.55rem; letter-spacing:0; }
.major-dialog-head button { flex:none; padding:8px 12px; min-height:44px; border:1px solid #CCD4DB; border-radius:8px; background:#fff; color:#172D46; font:inherit; cursor:pointer; }
.major-dialog-tabs { display:flex; padding:0 28px; gap:8px; border-bottom:1px solid #DCE5ED; }
.major-dialog-tabs button { flex:1; min-height:48px; padding:8px 4px; border:0; border-bottom:3px solid transparent; border-radius:0; background:#fff; color:#52606E; font:inherit; font-weight:600; cursor:pointer; }
.major-dialog-tabs button[aria-selected="true"] { border-bottom-color:#FFD400; color:#172D46; background:#FFF9DD; }
.major-dialog-body { padding:24px 28px 32px; overflow-y:auto; overscroll-behavior:contain; line-height:1.85; min-height:180px; }
.major-dialog-body h3 { font-size:1.08rem; letter-spacing:0; margin:24px 0 8px; }
.major-dialog-body h3:first-child { margin-top:0; }
.major-dialog-body ul { padding-left:1.4em; }
.major-dialog-body li { margin:7px 0; }
.major-dialog-body p { margin:10px 0; }
.major-dialog-body details { margin:20px 0; padding:0 16px; border:1px solid #DCE5ED; border-radius:10px; }
.major-dialog-body details summary { padding:12px 0; font-weight:600; }
.major-dialog-body .major-intro { font-size:1.05rem; }
.major-source { font-size:.85rem; }
.choice-list { list-style:none; padding:0; margin:0; }
.choice-list li { padding:0 0 14px; margin:0 0 18px; border-bottom:1px solid #E4E8EB; }
.choice-list li > span { font-size:.8rem; font-weight:700; color:#596675; }
.major-dialog :is(button,a,summary,[role="tabpanel"]):focus-visible { outline:3px solid #172D46; outline-offset:3px; }
.role-gallery-page { margin:0; color:#172D46; background:#fff; }
.gallery-header { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1440px; margin:0 auto; padding:28px; }
.gallery-header h1 { margin:0; font-size:1.75rem; }
.role-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:24px; max-width:1440px; padding:0 28px 28px; margin:0 auto; }
.role-gallery .game-title { font-size:2rem; min-height:2.5em; }
.role-gallery .game-stage { height:330px; }
.role-gallery-page[data-gallery-count="1"] .gallery-header { display:none; }
.role-gallery-page[data-gallery-count="1"] .role-gallery { display:block; max-width:540px; padding:20px; }
.role-gallery-page[data-gallery-count="1"] .game-stage { height:400px; }
@media (prefers-reduced-motion:no-preference) {
  .l2-quiz .game-stage { animation:game-reveal .65s cubic-bezier(.2,.65,.25,1) both; }
  .l2-quiz .ability-track > span { animation:game-bar .5s ease-out both; }
  .l2-quiz .major-buttons button { transition:background .15s,border-color .15s,transform .15s; }
  .l2-quiz .major-buttons button:active { transform:translateY(2px); }
}
@keyframes game-reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes game-bar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (max-width:1000px) {
  .l2-quiz .result-layout { gap:18px; }
  .game-role { padding:22px; }
  .l2-quiz .ability-panel { padding:20px 14px; }
  .l2-quiz .ability-row { column-gap:8px; }
  .l2-quiz .major-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .role-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .l2-quiz .result-layout { grid-template-columns:1fr; }
  .l2-quiz #quiz-results { padding-top:20px; }
  .l2-quiz .result-toolbar { margin-bottom:18px; }
  .l2-quiz .result-wordmark { display:none; }
  .l2-quiz .game-stage { height:340px; }
  .game-title,.l2-quiz #quiz-results .game-title { font-size:2.1rem; }
  .game-role { height:auto; }
  .l2-quiz .ability-panel { padding:22px 16px; }
  .l2-quiz .ability-row { padding:11px 4px; }
  .l2-quiz .ability-panel h2 { font-size:1.35rem; }
}
@media (max-width:600px) {
  .l2-quiz #result-reasons { grid-template-columns:1fr; }
  .l2-quiz .answer-fragment > summary { min-height:68px; padding:14px 16px; }
  .l2-quiz .major-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .l2-quiz .major-buttons button { padding:12px 8px; }
  .major-dialog { width:100%; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; margin:0; border-radius:0; }
  .major-dialog-frame { height:100%; max-height:100%; }
  .major-dialog-head { padding:16px 18px 12px; }
  .major-dialog-tabs { padding:0 12px; gap:0; }
  .major-dialog-tabs button { font-size:.9rem; }
  .major-dialog-body { padding:18px 20px 28px; flex:1; }
  .role-gallery { grid-template-columns:1fr; padding:0 18px 18px; }
  .gallery-header { padding:20px 18px; }
  .role-gallery .game-title { min-height:0; }
}
@media (max-width:360px) {
  .game-role { padding:18px; }
  .game-title,.l2-quiz #quiz-results .game-title { font-size:1.85rem; }
  .game-effect { font-size:1rem; }
  .l2-quiz .game-stage { height:285px; }
  .l2-quiz .ability-row { grid-template-columns:30px minmax(0,1fr) 28px 52px; column-gap:6px; }
  .l2-quiz .ability-icon { width:30px; height:30px; }
  .l2-quiz .ability-name { font-size:.85rem; }
}
@media print {
  .l2-quiz #quiz-results { padding:0; }
  .l2-quiz .result-layout { display:block; }
  .l2-quiz .game-role { border:1px solid #999; padding:18px; break-inside:avoid; }
  .l2-quiz .game-stage { height:190px; }
  .l2-quiz .game-title { font-size:24pt; }
  .l2-quiz .game-effect { font-size:11pt; }
  .l2-quiz .ability-panel { margin-top:18px; break-inside:avoid; padding:14px; }
  .l2-quiz .ability-row { min-height:0; padding:5px; grid-template-rows:auto 5px; }
  .l2-quiz .ability-icon { width:26px; height:26px; }
  .l2-quiz .ability-track { print-color-adjust:exact; -webkit-print-color-adjust:exact; border:1px solid #777; }
  .l2-quiz .ability-track > span { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .l2-quiz .result-library,.major-dialog,.l2-quiz .role-switches,.l2-quiz .fragment-majors { display:none !important; }
  .l2-quiz #result-reasons { display:block; }
  .l2-quiz .answer-fragment { margin:12px 0; break-inside:avoid; }
  .role-gallery { display:grid; grid-template-columns:repeat(3,1fr); }
}