.ending-overlay{
  --ending-ink:#294c34;
  --ending-accent:#2d6a4f;
  position:absolute;
  inset:0;
  z-index:14;
  overflow:hidden;
  color:var(--ending-ink);
  background:#f7efb8;
  isolation:isolate;
}
.ending-overlay[hidden],.ending-coins[hidden],.ending-recipe-panel[hidden]{display:none!important}
.stage:has(> .ending-overlay:not([hidden])) > :is(#game,#headband-layer,.camera-background,.hud,.bottom-hud,#status){visibility:hidden}
.ending-overlay.is-failed{--ending-ink:#383343;--ending-accent:#5d566a;background:#d9d5e0}
.ending-visual{position:absolute;inset:0;overflow:hidden}
#ending-scene{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.result-selfie-layer{position:absolute;z-index:3;inset:auto;left:3%;right:auto;top:30%;bottom:auto;width:30%;height:auto;aspect-ratio:3/2;border:clamp(2px,.32cqw,5px) solid rgba(255,255,238,.92);border-radius:clamp(8px,1.1cqw,16px);background:#183e32;box-shadow:0 8px 24px rgba(25,44,31,.3);pointer-events:none}
.result-selfie-layer[hidden]{display:none!important}
.ending-copy{
  position:absolute;
  z-index:4;
  left:7%;
  right:7%;
  bottom:4.3%;
  max-height:31%;
  display:grid;
  grid-template-columns:1.35fr .65fr .72fr;
  grid-template-areas:
    "dialogue message message"
    "facts toggle toggle"
    "recipe recipe recipe"
    "retry retry retry";
  align-items:center;
  gap:clamp(4px,.58cqw,8px) clamp(6px,.8cqw,12px);
  overflow-y:auto;
  padding:clamp(4px,.55cqw,8px);
  scrollbar-width:thin;
}
#ending-title{margin:0}
.ending-dialogue{grid-area:dialogue;margin:0;padding:.42cqw .72cqw;border-radius:9px;color:var(--ending-ink);background:rgba(255,255,238,.82);font-size:clamp(10px,1.12cqw,15px);font-weight:750;line-height:1.35}
.ending-overlay.is-failed .ending-dialogue{background:rgba(239,236,242,.9)}
.ending-facts{grid-area:facts;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.48cqw}
.ending-facts p{display:flex;align-items:baseline;justify-content:center;gap:.35cqw;min-width:0;margin:0;padding:.45cqw .35cqw;border:1px solid rgba(45,106,79,.32);border-radius:9px;background:rgba(255,255,238,.84);text-align:center}
.ending-overlay.is-failed .ending-facts p{border-color:rgba(83,76,99,.34);background:rgba(239,236,242,.9)}
.ending-facts span{font-size:clamp(7px,.78cqw,10px);font-weight:750;white-space:nowrap}
.ending-facts strong{color:var(--ending-accent);font-size:clamp(13px,1.55cqw,21px);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.ending-message{grid-area:message;margin:0;padding:.42cqw .72cqw;border-radius:9px;color:var(--ending-ink);background:rgba(255,255,238,.82);font-size:clamp(9px,1.02cqw,14px);font-weight:700;line-height:1.35}
.ending-overlay.is-failed .ending-message{background:rgba(239,236,242,.9)}
.ending-recipe-toggle,.ending-retry{min-height:clamp(32px,3.5cqw,48px);font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;font-size:clamp(9px,1.02cqw,14px);font-weight:750;cursor:pointer}
.ending-recipe-toggle{grid-area:toggle;width:100%;border:1px solid rgba(45,106,79,.5);border-radius:10px;color:var(--ending-accent);background:rgba(255,255,238,.8)}
.ending-overlay.is-failed .ending-recipe-toggle{border-color:rgba(83,76,99,.48);background:rgba(239,236,242,.9)}
.ending-recipe-panel{grid-area:recipe;padding:.48cqw;border:1px solid rgba(45,106,79,.3);border-radius:9px;background:rgba(255,255,238,.94)}
.ending-overlay.is-failed .ending-recipe-panel{border-color:rgba(83,76,99,.34);background:rgba(239,236,242,.96)}
.ending-recipe-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.38cqw}
.ending-recipe-list span{display:flex;justify-content:space-between;gap:.4cqw;padding:.3cqw .48cqw;border-radius:6px;color:var(--ending-ink);background:rgba(226,235,197,.78);font-size:clamp(8px,.88cqw,12px)}
.ending-overlay.is-failed .ending-recipe-list span{background:rgba(216,211,224,.8)}
.ending-tip-row{grid-area:tip;display:flex;align-items:center;justify-content:center;gap:.55cqw;min-width:0;color:var(--ending-accent)}
.ending-tip-row[hidden]{display:none!important}
#ending-tip{font-size:clamp(10px,1.18cqw,16px);white-space:nowrap}
.ending-retry{grid-area:retry;justify-self:center;width:33.6%;min-width:210px;min-height:clamp(50px,7.2cqw,88px);border:0;border-radius:12px;color:#214a32;background:transparent;box-shadow:none}
.ending-overlay.is-failed .ending-retry{color:#383343;background:transparent}
.ending-retry:focus-visible{outline:4px solid var(--ending-accent);outline-offset:2px}
.ending-retry:active{transform:translateY(2px) scale(.985)}
.ending-overlay:not([hidden])~.game-controls{left:1.2%;right:auto;z-index:16}
.result-memento-controls{position:absolute;z-index:7;top:31%;right:3%;width:30%;padding:12px;border:2px solid rgba(45,106,79,.42);border-radius:16px;color:#1b1b1b;background:rgba(245,240,232,.95);box-shadow:0 8px 24px rgba(25,44,31,.22)}
.result-memento-controls p{margin:0 0 9px;font-size:clamp(14px,1.25cqw,18px);font-weight:700;line-height:1.4;text-align:center}
.result-memento-actions,.result-memento-preview-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.result-memento-actions button,.result-memento-preview-actions button{min-height:48px;padding:9px 16px;border:1px solid #2d6a4f;border-radius:11px;color:#2d6a4f;background:#fff;font:800 clamp(16px,1.25cqw,19px)/1.2 "PingFang TC","Noto Sans TC",sans-serif;cursor:pointer}
#result-memento-capture,#result-memento-download{color:#fff;background:#2d6a4f}
.result-memento-actions button:focus-visible,.result-memento-preview-actions button:focus-visible{outline:4px solid #dab040;outline-offset:2px}
.result-memento-preview{position:absolute;z-index:24;inset:3%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;padding:16px;border:3px solid #dab040;border-radius:20px;color:#1b1b1b;background:#f5f0e8;box-shadow:0 18px 52px rgba(8,24,17,.48)}
.result-memento-preview[hidden]{display:none!important}
.result-memento-preview h3,.result-memento-preview p{margin:0;text-align:center}
.result-memento-preview h3{font-size:clamp(22px,2.2cqw,32px)}
.result-memento-preview p{color:#5a5347;font-size:clamp(14px,1.2cqw,18px)}
.result-memento-preview img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;border-radius:12px;background:#183e32}
.stage.memento-preview-open>.game-controls,.stage.memento-preview-open>.costume-picker{visibility:hidden;pointer-events:none}

.ending-coins{position:absolute;inset:0;z-index:2;pointer-events:none}
.ending-sprite{position:absolute;display:block;background-image:url("./assets/coin-bag-atlas-v2.png");background-repeat:no-repeat}
.ending-coin{--coin-mid-x:0px;--coin-mid-y:0px;--coin-x:0px;--coin-y:0px;--coin-fall-y:0px;z-index:2;width:clamp(24px,4%,48px);aspect-ratio:1;left:var(--coin-left);top:var(--coin-top);opacity:0;background-size:349.886% 233.257%;background-position:2.188% 50.94%;filter:drop-shadow(0 3px 2px rgba(116,76,3,.25));transform-origin:50% 50%}
.ending-coin-one{--coin-left:55%;--coin-top:34%;--coin-delay:0ms}
.ending-coin-two{--coin-left:62%;--coin-top:37%;--coin-delay:170ms}
.ending-coin-three{--coin-left:69%;--coin-top:33%;--coin-delay:340ms}
.ending-bag{width:clamp(44px,8.8%,104px);aspect-ratio:512/586;right:8.5%;top:49%;background-size:300% 174.744%;transform-origin:50% 84%;filter:drop-shadow(0 6px 4px rgba(96,64,9,.22))}
.ending-bag-back{z-index:1;background-position:48.047% 46.804%}
.ending-bag-front{z-index:3;background-position:100% 46.804%}
.ending-coins.is-playing .ending-coin{animation:ending-coin-into-bag 660ms cubic-bezier(.22,.66,.28,1) var(--coin-delay) both}
.ending-coins.is-playing .ending-bag{animation:ending-bag-catch 1100ms ease-out both}
@keyframes ending-coin-into-bag{0%{opacity:0;transform:translate(0,0) rotate(-20deg) scale(.76)}10%{opacity:1}58%{opacity:1;transform:translate(var(--coin-mid-x),var(--coin-mid-y)) rotate(220deg) scale(1.06)}88%{opacity:1;transform:translate(var(--coin-x),var(--coin-y)) rotate(410deg) scale(.82)}100%{opacity:0;transform:translate(var(--coin-x),var(--coin-fall-y)) rotate(450deg) scale(.66)}}
@keyframes ending-bag-catch{0%,26%{transform:scale(1)}45%{transform:scale(1.04,.96) rotate(-2deg)}64%{transform:scale(.97,1.04) rotate(2deg)}82%,100%{transform:scale(1) rotate(0)}}

@media(max-width:650px){
  .stage:has(.ending-overlay:not([hidden])){height:calc(66.667vw + 165px);min-height:0;aspect-ratio:auto}
  .ending-overlay{overflow-y:auto}
  .ending-visual{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;overflow:visible}
  #ending-scene{object-fit:contain;object-position:center top}
  .result-selfie-layer{inset:auto;left:3%;right:auto;top:30%;bottom:auto;width:34%}
  .ending-copy{display:contents}
  .ending-dialogue,.ending-message,.ending-recipe-toggle,.ending-recipe-panel,.ending-tip-row{position:relative;z-index:4;width:calc(100% - 28px);margin-right:14px;margin-left:14px}
  .ending-dialogue{margin-top:8px;margin-bottom:4px}
  .ending-message{margin-top:0;margin-bottom:4px}
  .ending-recipe-toggle{margin-top:0;margin-bottom:4px}
  .ending-recipe-panel{margin-top:0;margin-bottom:4px}
  .ending-tip-row{margin-top:0;margin-bottom:4px}
  .ending-dialogue,.ending-message{font-size:12px}
  .ending-facts{position:absolute;z-index:5;top:45.333cqw;left:7%;right:7%;gap:4px}
  .ending-facts p{min-height:34px;padding:4px 3px}
  .ending-facts span{font-size:8px}
  .ending-facts strong{font-size:16px}
  .ending-recipe-toggle,.ending-retry{min-height:44px;font-size:13px}
  .ending-recipe-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .ending-recipe-list span{padding:5px 7px;font-size:11px}
  .ending-tip-row{min-height:44px}
  .ending-retry{position:absolute;z-index:5;top:55.333cqw;left:33.2%;width:33.6%;min-width:0;height:44px}
  .ending-bag{width:11%;right:8.5%;top:47.5%}
  .ending-coin{width:6%}
}

@media(max-width:820px){
  .result-memento-preview{position:fixed;inset:8px;grid-template-rows:auto auto auto auto;align-content:start;overflow-y:auto;padding:12px;border-radius:16px}
  .result-memento-preview img{justify-self:center;width:min(100%,75vh);height:auto;aspect-ratio:3/2;object-fit:contain}
  .result-memento-preview-actions button,#result-memento-close{min-height:52px}
}
@media(prefers-reduced-motion:reduce){.ending-coins.is-playing .ending-coin,.ending-coins.is-playing .ending-bag{animation:none}}

/* v7 readability pass: preserve the illustrated 3:2 scene and enlarge live result data. */
.ending-copy{bottom:1.5%;max-height:38%;gap:6px 10px}
.ending-dialogue,.ending-message{font-size:16px;line-height:1.4}
.ending-facts{gap:6px}
.ending-facts p{min-height:38px;padding:3px 5px}
.ending-facts span{font-size:16px}
.ending-facts strong{font-size:clamp(24px,2cqw,28px)}
.ending-recipe-toggle,.ending-retry{min-height:44px;font-size:18px}
.ending-recipe-list span{padding:6px 8px;font-size:16px;line-height:1.3}
#ending-tip{font-size:clamp(18px,1.4cqw,22px)}

@media(max-width:650px){
  .stage:has(.ending-overlay:not([hidden])){height:calc(66.667vw + 250px)}
  .ending-overlay{padding-bottom:56px}
  .ending-dialogue,.ending-message{min-height:44px;padding:9px 11px;font-size:16px}
  .ending-facts{position:relative;z-index:4;top:auto;left:auto;right:auto;width:calc(100% - 28px);margin:0 14px 4px;gap:4px}
  .ending-facts p{flex-direction:column;align-items:center;min-height:54px;padding:4px;gap:0;line-height:1.15}
  .ending-facts span{font-size:16px}
  .ending-facts strong{max-width:100%;font-size:24px;line-height:1.1;white-space:normal;overflow-wrap:anywhere}
  .ending-recipe-toggle,.ending-retry{font-size:18px}
  .ending-recipe-list span{font-size:16px}
  .ending-tip-row{min-height:44px;flex-wrap:wrap;gap:8px;padding:4px}
  .result-memento-controls{position:relative;top:auto;right:auto;z-index:6;width:calc(100% - 28px);margin:4px 14px;padding:10px}
  .result-memento-controls p{font-size:16px}
  .result-memento-actions button,.result-memento-preview-actions button{flex:1 1 128px;min-height:52px;font-size:18px}
  .result-memento-preview{position:fixed;inset:8px;padding:12px;border-radius:16px}
  .result-memento-preview h3{font-size:24px}
  .ending-overlay:not([hidden])~.game-controls{left:8px;bottom:8px}
}

@media(max-width:650px){
  body:has(.ending-overlay:not([hidden])){
    justify-content:flex-start;
    padding-top:12px;
    padding-bottom:12px;
  }
  .stage:has(.ending-overlay:not([hidden])){
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    align-content:start;
    height:auto;
    min-height:0;
    aspect-ratio:auto;
  }
  .stage:has(.ending-overlay:not([hidden])) .ending-overlay{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:1;
    overflow:visible;
    padding-bottom:0;
  }
  .stage:has(.ending-overlay:not([hidden])) .game-controls{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:2;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:4px 8px 8px;
  }
  .stage:has(.ending-overlay:not([hidden])) .game-controls button{
    flex:0 0 auto;
    min-height:44px;
    padding:5px 8px;
    font-size:15px;
    white-space:nowrap;
  }
}

@media(min-width:651px){
  .ending-copy{
    top:67%;
    bottom:auto;
    max-height:31%;
    overflow:visible;
  }
  .ending-facts p{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:2px 5px;
    gap:0;
    line-height:1.1;
  }
  .ending-facts strong{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .ending-recipe-panel{
    position:absolute;
    z-index:6;
    grid-area:auto;
    left:0;
    right:0;
    bottom:calc(100% + 8px);
  }
  .ending-retry{
    position:absolute;
    z-index:5;
    grid-area:auto;
    top:12cqw;
    left:50%;
    width:33.6%;
    min-width:210px;
    height:44px;
    min-height:44px;
    transform:translateX(-50%);
  }
  .ending-retry:active{
    transform:translateX(-50%) translateY(2px) scale(.985);
  }
}