#replay-gallery[hidden]{display:none}
#replay-gallery{position:absolute;inset:0;z-index:90;display:grid;place-items:center;padding:18px;background:rgba(12,34,34,.84);backdrop-filter:blur(4px)}
.replay-gallery-card{width:min(760px,100%);max-height:calc(100% - 16px);overflow:auto;padding:24px}
.replay-gallery-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:16px}
.replay-gallery-head h2{margin:2px 0 0}
.replay-gallery-count{font-weight:800;letter-spacing:.08em;white-space:nowrap}
.replay-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.replay-ending{min-height:82px;border:1px solid rgba(240,211,145,.28);border-radius:10px;padding:10px;background:rgba(255,248,224,.055);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-content:center}
.replay-ending.found{border-color:rgba(240,211,145,.58);background:rgba(255,238,184,.09)}
.replay-ending-index{grid-row:1/3;align-self:center;font-size:.72rem;opacity:.55}
.replay-ending strong{font-size:.84rem;letter-spacing:.055em;line-height:1.15}
.replay-ending small{opacity:.7;margin-top:4px}
.replay-ending:not(.found) strong{opacity:.46;letter-spacing:0}
.replay-gallery-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}
.replay-gallery-foot span{font-size:.78rem;opacity:.68}
@media(max-width:620px){
 #replay-gallery{padding:10px}
 .replay-gallery-card{padding:16px}
 .replay-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .replay-ending{min-height:70px;padding:8px}
 .replay-gallery-head{align-items:start}
 .replay-gallery-head h2{font-size:1.35rem}
}
/* The shelf is modal: the touch deck sits outside #stage, so it steps out of the way (and is made
   inert by replay-layer.js) instead of offering A = "Mirror" underneath. visibility keeps its space,
   so the stage doesn't resize under the card. */
#game.gallery-open #touch-controls{visibility:hidden}
/* Small phones: tighter shelf so nine found endings plus the coda fit, and when they don't, the card
   scrolls with room under "Back to Leo" instead of cropping it at the edge. */
@media(max-width:420px){
 #game .replay-gallery-card{padding:14px 14px 22px;overscroll-behavior:contain}
 .replay-gallery-head{margin-bottom:10px}
 #game .replay-gallery-head h2{font-size:1.2rem;line-height:1.15}
 .replay-gallery-grid{gap:7px}
 .replay-ending{min-height:58px;padding:7px 8px}
 .replay-ending small{margin-top:2px}
 .replay-gallery-foot{margin-top:12px}
 #game .replay-gallery-coda p{font-size:15px}
}