/* ---- ORNAMENT TIERS ---------------------------------------------------------------------------
   VIL · Hierarchy asks how a primary surface differs from a secondary one WITHOUT using size alone.
   The answer the plate gives is ORNAMENT COMPLETENESS: the hotbar and the open panels are heavier
   assemblies - a second inner rail, full-size flourishes, gems in settings - while the tracker card
   and other glanceable furniture carry a plain frame and no gems at all.
   Uniform ornament everywhere is itself a tell: it says one style was applied, not that a set was
   designed. `--quiet` is the secondary tier. */
.v-page--quiet .v-page__corners { inset: 4px; }
.v-page--quiet .v-page__corners::before, .v-page--quiet .v-page__corners::after,
.v-page--quiet .v-page__corners > i::before, .v-page--quiet .v-page__corners > i::after {
  width: 20px; height: 20px; opacity: .72; filter: none; }
.v-page--quiet { box-shadow:
    0 0 0 1px rgba(198,160,104,.55),
    inset 0 1px 0 rgba(255,236,198,.14),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 12px 30px -12px rgba(0,0,0,.8); }

/* The PRIMARY tier's second, inner rail — set in from the frame, the way the plate's hotbar and
   panels are. This is the single clearest "this surface matters more" signal that is not size. */
.v-page--primary::before, .hud-hotbar::before {
  content: ''; position: absolute; inset: 4px; border-radius: 9px; pointer-events: none;
  border: 1px solid rgba(198,160,104,.30);
  box-shadow: inset 0 1px 0 rgba(255,236,198,.10); }

/* An inset cell — where a recorded value sits on the page. Contents, not chrome.
   CUT INTO the page rather than drawn on it: the light catch is on the BOTTOM inner edge and the
   shadow on the top, which is the inverse of the page's own bevel and is what makes a recess read
   as a recess. A flat dark rectangle with a violet outline was the single most "generated"-looking
   element in the set, because nothing in a real Ledger is a flat rectangle of colour. */
.v-slot { border-radius: var(--r-2, 8px);
  background: linear-gradient(180deg, #120e2a 0%, #1a1439 70%, #221a48 100%);
  border: 1px solid #0c0920;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.75),                /* the lip casting into the well */
    inset 0 -1px 0 rgba(198,160,104,.22),           /* light catching the far inner edge */
    inset 0 0 0 1px rgba(154,134,232,.14),
    0 1px 0 rgba(198,160,104,.10); }                /* the page surface just below the cut */

/* The circular button family: nav, close, minimap controls. Gold as a RIM, never as a fill. */
.v-round { display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: linear-gradient(180deg, #2b2360, #16113a);
  border: 1px solid var(--gold-deep); color: var(--gold-hi);
  transition: border-color .15s, box-shadow .15s, color .15s; }
.v-round:hover { border-color: var(--gold); color: #fff4de;
  box-shadow: 0 0 14px -2px var(--gold-glow, rgba(201,164,110,.4)); }
.v-round.is-active { border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow, rgba(201,164,110,.4)); }

/* THE INDEX — the row of tabs down the edge of the Ledger.
   RIGHT-ALIGNED, beside the minimap. It was moved to top-CENTRE on the argument that centre is the
   one region nothing else claims; that was tried in play and reverted, because centre is also
   directly above the character you are looking at, so the index sat in the middle of the thing it
   is meant to be peripheral to.
   The 196px clears the minimap assembly with 14px to spare: the assembly is MINIMAP_SIZE (168) at
   right:14px, so its left edge is at 182. The zoom controls hang at right:-2px — OUTWARD, into the
   margin — so they widen the assembly to the right, not toward this bar. Recompute this number if
   MINIMAP_SIZE changes; it is 14 + MINIMAP_SIZE + 14.
   Each button is a glyph with its LABEL beneath: five abstract glyphs in a row is a memory test,
   and the one thing an index must never be is a puzzle (VIL — the Ledger reveals, it does not
   make you guess). */
.rpg-actionbar { position: absolute; top: 14px; right: 196px; left: auto; bottom: auto;
  transform: none;
  display: flex; gap: 14px; align-items: flex-start; pointer-events: auto; }
.rpg-actionbar .rpg-btn { width: 46px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink-soft); transition: color .15s; }
/* The disc is the glyph's own box, so the label sits OUTSIDE the circle rather than inside it. */
.rpg-actionbar .rpg-btn-glyph { width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--font-banner); font-size: 19px; line-height: 1;
  background: linear-gradient(180deg, #2b2360, #16113a);
  border: 1px solid var(--gold-deep); color: inherit;
  /* NO backdrop-filter: a page is a surface, not an opening (VIL · Substance). The old square
     buttons blurred the world through themselves. */
  transition: border-color .15s, box-shadow .15s, transform .1s; }
.rpg-actionbar .rpg-btn-label { font-family: var(--font-banner); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: .78; }
.rpg-actionbar .rpg-btn:hover { color: var(--gold-hi); }
.rpg-actionbar .rpg-btn:hover .rpg-btn-glyph { border-color: var(--gold);
  box-shadow: 0 0 14px -2px var(--gold-glow); transform: translateY(-2px); }
.rpg-actionbar .rpg-btn.is-active { color: var(--gold); }
.rpg-actionbar .rpg-btn.is-active .rpg-btn-glyph { border-color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow); }
.rpg-actionbar .rpg-btn.is-active .rpg-btn-label { opacity: 1; }

/* The account button's old square-glass treatment is GONE: GameUI now builds it with the same
   glyph+label markup as the other index tabs, and this rule kept painting the retired 42px glass
   square behind the round glyph — the "old menu item" peeking out behind Account. The generic
   .rpg-actionbar .rpg-btn rules above are the whole treatment now. */