/* Section 11.2 — the Gallery of Deeds and the unlock pop-up.
   Tight-layout rules: the gallery parchment is capped to the viewport, its grid
   scrolls inside a bounded frame, and the pop-up is fixed to the frame so no
   page ever grows. The page itself never scrolls because of either. */

/* ── The gallery parchment ─────────────────────────────────────────────── */

.gallery-dialog { width: min(46rem, calc(100vw - 1.25rem)); max-height: min(94dvh, 44rem); padding: .8rem 1rem; overflow: hidden; }
.gallery-dialog .dialog-heading { margin-bottom: .1rem; }
.gallery-dialog h2 { margin: .05rem 0 .05rem; font-size: clamp(1.4rem, 4.5vw, 1.9rem); }
.gallery-dialog .dialog-intro { margin: 0 0 .4rem; font-size: .82rem; }
.gallery-count { font-variant-numeric: tabular-nums; font-size: .78rem; color: #593c2a; white-space: nowrap; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .28rem; margin: 0 0 .45rem; }
.gallery-chip { min-height: 1.7rem; padding: .12rem .5rem; font-size: .72rem; border: 1px solid rgba(91, 51, 26, .45); border-radius: 999px; background: transparent; color: #48291b; cursor: pointer; }
.gallery-chip:hover { background: rgba(91, 51, 26, .12); }
.gallery-chip--active { background: #48291b; border-color: #48291b; color: #f5e6c8; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .34rem; max-height: min(66dvh, 30rem); overflow-y: auto; overscroll-behavior: contain; padding: .1rem .35rem .35rem .1rem; border: 1px solid rgba(91, 51, 26, .22); scrollbar-width: thin; }

.gallery-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: .1rem .45rem; min-height: 2.6rem; padding: .3rem .45rem; border: 1px solid rgba(91, 51, 26, .3); border-radius: 3px; background: rgba(255, 252, 240, .55); }
.gallery-tile--earned { border-color: #a87b3b; background: linear-gradient(160deg, rgba(255, 226, 148, .38), rgba(255, 252, 240, .55)); }
.gallery-tile--hidden { background: rgba(48, 34, 24, .07); }
.gallery-tile__seal { grid-row: 1 / 3; font-size: 1.05rem; color: #8b6a2f; }
.gallery-tile--earned .gallery-tile__seal { color: #7c5a10; }
.gallery-tile__body { min-width: 0; display: grid; gap: .06rem; }
.gallery-tile__body strong { font-size: .8rem; line-height: 1.15; }
.gallery-tile--hidden .gallery-tile__body strong { color: #6b5b48; }
.gallery-tile__body small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .68rem; line-height: 1.2; color: #593c2a; }
.gallery-tile__score { grid-row: 1; grid-column: 3; font-size: .68rem; font-variant-numeric: tabular-nums; color: #593c2a; }
.gallery-tile__progress { grid-row: 2; grid-column: 3; align-self: center; display: block; width: 3.4rem; height: .28rem; border-radius: 2px; background: rgba(91, 51, 26, .2); overflow: hidden; }
.gallery-tile__progress span { display: block; height: 100%; background: #8b6a2f; }
.gallery-tile--earned .gallery-tile__progress span { background: #b8860b; }

.gallery-status { margin: .4rem 0 0; font-size: .74rem; }
@media (max-width: 620px) { .gallery-dialog { max-height: 96dvh; } .gallery-grid { grid-template-columns: 1fr; max-height: 70dvh; } }

/* Wide windows: the whole parchment stays inside one screen — the frame keeps
   the heading, chips, a short grid window and the status line visible at once. */
@media (min-width: 1051px) {
  .gallery-dialog { width: min(52rem, calc(100vw - 3rem)); max-height: min(92dvh, 40rem); padding: .7rem .9rem; }
  .gallery-dialog h2 { font-size: 1.5rem; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: min(58dvh, 26rem); gap: .3rem; }
  .gallery-tile { min-height: 2.4rem; padding: .26rem .4rem; }
}

/* ── The unlock pop-up: fixed, above the toasts, no layout shift ───────── */

.achievement-popup { position: fixed; z-index: 26; top: calc(max(3.9rem, env(safe-area-inset-top)) + 5.4rem); right: max(.8rem, env(safe-area-inset-right)); width: min(21rem, calc(100vw - 1.6rem)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: center; padding: .5rem .6rem; border: 1px solid #d4a843; border-radius: 4px; background: linear-gradient(165deg, #2a1a10, #1c100a); color: #f5e6c8; box-shadow: 0 12px 34px rgba(7, 3, 1, .55), inset 0 0 0 1px rgba(212, 168, 67, .25); opacity: 0; translate: 0 -.4rem; visibility: hidden; pointer-events: auto; cursor: pointer; transition: opacity .28s var(--ease, ease-out), translate .28s var(--ease, ease-out), visibility 0s .28s; }
.achievement-popup--show { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .28s var(--ease, ease-out), translate .28s var(--ease, ease-out); }
.achievement-popup__seal { font-size: 1.5rem; color: #ffcf5b; text-shadow: 0 0 14px rgba(255, 207, 91, .5); }
.achievement-popup__body { display: grid; gap: .08rem; min-width: 0; }
.achievement-popup__body small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #d4a843; }
.achievement-popup__body strong { font-size: .88rem; line-height: 1.15; color: #ffe2a1; }
.achievement-popup__detail { font-size: .74rem; line-height: 1.25; color: #e6d5b5; }
@media (max-width: 610px) { .achievement-popup { top: calc(max(3.65rem, env(safe-area-inset-top)) + 5.6rem); right: .4rem; width: min(19rem, calc(100vw - .8rem)); } }

@media (prefers-reduced-motion: reduce) { .achievement-popup { transition: none; translate: 0 0; } }
:root[data-motion="reduced"] .achievement-popup { transition: none; translate: 0 0; }