/* Hall of Fame — a view of the map app (tab "Hall of Fame"): the stone fills
   the big view where the map is; the Book and the chase are the sidebar panel.
   Uses the app's tokens (--paper, --ink, --muted, --line, --accent, --serif). */

/* the big view: the same grid cell as the map, shown instead of it */
#hallView { position:relative; overflow:hidden; background:var(--paper); container-type:size; }
#hallView[hidden] { display:none; }
body.view-hall #map { display:none; }

/* Two pictures of the stone: light (pale granite, dark cut letters, used now)
   and dark (golden hour, gilt; kept for a future dark mode, <html data-theme="dark">).
   Each gives its proportions, where the stone stands (--cx, centred when the
   view is narrower than the picture) and where its erased lines were (--n-*). */
#hallView { --pic-ar:1536 / 1024; --cx:58.6%; --n-l:48.3%; --n-r:29.2%; --n-t:53%; --n-h:8.4%; }
:root[data-theme="dark"] #hallView { --pic-ar:1312 / 1199; --cx:50.6%; --n-l:36.6%; --n-r:34.8%; --n-t:49.2%; --n-h:8.4%; }
.hv-scene { position:absolute; left:50%; top:0; height:100%; aspect-ratio:var(--pic-ar); transform:translateX(calc(-1 * var(--cx)));
  container-type:inline-size; }
/* a view wider than the picture: centre it and let its edges dissolve into paper */
@container (min-aspect-ratio: 1536/1024) {
  :root:not([data-theme="dark"]) .hv-scene { --cx:50%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}
@container (min-aspect-ratio: 1312/1199) {
  :root[data-theme="dark"] .hv-scene { --cx:50%; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
}
.hv-drift { position:absolute; inset:0; animation:hv-drift 38s ease-in-out infinite alternate; transform-origin:55% 50%; }
@keyframes hv-drift { from { transform:scale(1); } to { transform:scale(1.04); } }
.hv-scene img { position:absolute; inset:0; width:100%; height:100%; display:block; }
#hallView::after { content:""; position:absolute; left:0; right:0; bottom:0; height:90px; background:linear-gradient(0deg, var(--paper), transparent); pointer-events:none; }

/* the names, cut into the stone where the picture's own lines were erased */
.hv-names { position:absolute; left:var(--n-l); right:var(--n-r); top:var(--n-t); height:var(--n-h); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:.18em; font-size:clamp(8px, 1.28cqw, 20px); }
.hv-cut { font-family:var(--serif); font-weight:600; text-transform:uppercase; letter-spacing:.2em; line-height:1.15; white-space:nowrap;
  /* cut dark into pale granite, the lower lip catching light */
  background:linear-gradient(180deg, #4d463d 0%, #2a251f 60%, #1b1814 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 #ffffffb0) drop-shadow(0 -1px 0 #0000003d); }
:root[data-theme="dark"] .hv-cut { background:linear-gradient(180deg, #f6e1b2 0%, #d6b273 45%, #9c7a42 100%); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 -1px 0 #0009) drop-shadow(0 1px 0 #ffe7b455); }
.hv-cut.big { font-size:1.35em; }
.hv-cut.small { font-size:.78em; letter-spacing:.26em; }

/* the view's own title, in the empty sky above the stone */
.hv-title { position:absolute; left:0; right:0; top:4.5%; z-index:1; text-align:center; pointer-events:none; }
.hv-title h2 { font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem, 3.2cqw, 2.4rem); margin:0; line-height:1; color:var(--ink); }
.hv-title p { margin:.2rem 0 0; font-family:var(--serif); font-style:italic; color:#7d5f22; font-size:clamp(.95rem, 1.6cqw, 1.2rem); }

/* ---- the sidebar panel: the Book and the chase ---- */
#panel-hall .hlead { color:var(--muted); font-size:var(--fs-m); line-height:1.5; margin:0 0 14px; }
#panel-hall .mysec small { color:var(--muted); letter-spacing:0; text-transform:none; font-family:var(--sans); }
.hbook { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.hplate { border:1px solid #d9c39a; border-radius:var(--r); padding:9px 12px; background:linear-gradient(180deg, var(--card), #fbf6ea);
  box-shadow:inset 0 0 0 2px var(--card), inset 0 0 0 3px #eee0bd; display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:baseline; }
.hplate .no { font-family:var(--serif); font-weight:600; letter-spacing:.14em; color:#7d5f22; font-size:var(--fs-s); grid-row:1 / 3; align-self:center; }
.hplate .who { font-family:var(--serif); font-weight:600; font-size:var(--fs-l); }
.hplate .who a, .hrow .nm a { color:var(--ink); text-decoration:none; }
.hplate .who a:hover, .hrow .nm a:hover { color:var(--accent); }
.hplate .when { color:var(--muted); font-size:var(--fs-s); }
.hwait { font-family:var(--serif); color:var(--ink); font-size:var(--fs-b); margin:0 0 6px; }
.hwait small { font-family:var(--sans); font-weight:600; font-size:var(--fs-xs); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); display:block; margin-top:3px; }
.hrow { display:grid; grid-template-columns:1.6rem minmax(0,1fr) auto; gap:2px 10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.hrow:last-child { border-bottom:0; }
.hrow .rk { font-family:var(--serif); font-weight:600; color:#7d5f22; text-align:center; grid-row:1 / 3; }
.hrow .nm { font-family:var(--serif); font-size:var(--fs-b); overflow-wrap:anywhere; }
.hrow .mt { text-align:right; font-size:var(--fs-s); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hrow .mt b { color:var(--ink); font-weight:600; }
.hrow .hb { grid-column:2 / 4; height:5px; border-radius:var(--r-pill); background:#efe6d3; overflow:hidden; }
.hrow .hb i { display:block; height:100%; min-width:3px; background:linear-gradient(90deg, var(--accent), #b8923f); border-radius:var(--r-pill); }
.hrow .pill { display:inline-block; font-size:var(--fs-xs); color:#7d5f22; background:#f7eccf; border:1px solid #b8923f; border-radius:var(--r-pill); padding:0 7px; margin-left:4px; vertical-align:1px; }
.htotals { color:var(--muted); font-size:var(--fs-s); margin:10px 0 0; }

@media (max-width:780px) {
  .hv-title { top:3%; }
}
@media (prefers-reduced-motion:reduce) { .hv-drift { animation:none; } }