/* THE GUILD BANK (guild-bank.html, js/guild-bank.js): frosted glass panels on the violet void, a gold purse that
   counts itself up, a gold-over-time chart, the bank tabs as a 14 x 7 grid of glass slots with quality glows,
   the Ledger of offerings and the board of the Generous. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root { --gb-gold: #f3d98f; --gb-gold-2: #e2b955; --gb-silver: #dcdcec; --gb-copper: #e0915a; --gb-in: #7ee0a8; --gb-out: #ff8fb0; }

/* ---------- hero and the purse ---------- */
.gb-hero { padding-bottom: 40px; }
.gb-hero > p, .gb-hero > h1 { text-shadow: 0 0 6px #08050f, 0 0 14px #08050f, 0 0 24px rgba(8, 5, 15, .9); }   /* clear of the falling coins */
/* "The Guild Bank" in flat gold: no shimmering gradient, just the coin's own colour */
.page-head.gb-hero > h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none; filter: none;
  color: var(--gb-gold-2); -webkit-text-fill-color: var(--gb-gold-2); }
.gb-purse { position: relative; z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 22px auto 0; padding: 18px 34px 16px;
  border-radius: 22px; border: 1px solid rgba(243, 217, 143, .32);
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 45%, rgba(226, 185, 85, .08)), rgba(22, 13, 38, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 40px rgba(226, 185, 85, .22), 0 0 80px rgba(138, 77, 255, .25); }
.gb-purse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .25) 50%, transparent 65%) 150% 0 / 280% 100% no-repeat; animation: gb-sheen 7s ease-in-out 2s infinite; }
@keyframes gb-sheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.gb-purse-label { font: 600 .66rem var(--serif-display); letter-spacing: .3em; text-transform: uppercase; color: var(--gb-gold); opacity: .85; }
.gb-gold { min-height: 1.3em; font: 600 clamp(1.9rem, 5.4vw, 3.3rem)/1.2 var(--serif-display); letter-spacing: .02em; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .45em;
  font-variant-numeric: tabular-nums; }
.gb-gold .gb-c { text-shadow: 0 0 24px currentColor; }
.gb-gold.done .gb-c.g { animation: gb-glint 3.6s ease-in-out infinite; }
@keyframes gb-glint { 0%, 100% { text-shadow: 0 0 22px rgba(243, 217, 143, .55); } 50% { text-shadow: 0 0 34px rgba(243, 217, 143, .95), 0 0 70px rgba(226, 185, 85, .5); } }
.gb-synced { margin: 2px 0 0; font-size: .98rem; color: var(--bone-dim); }
.gb-empty-gold { font-size: .5em; color: var(--bone-dim); letter-spacing: .08em; }
.gb-sk { display: inline-block; width: 7em; height: .9em; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.16), rgba(255,255,255,.06)) 0 0 / 200% 100%; animation: gb-sk 1.4s linear infinite; }
@keyframes gb-sk { to { background-position: -200% 0; } }

/* coins: gold, silver and copper, each with a little coin before it */
.gb-c { white-space: nowrap; }
.gb-c i { font-style: normal; font-size: .62em; margin-left: .08em; opacity: .85; }
.gb-c::before { content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .22em; border-radius: 50%; vertical-align: .02em;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, currentColor 45%, rgba(0, 0, 0, .35) 100%); box-shadow: 0 0 8px currentColor; }
.gb-c.g { color: var(--gb-gold); } .gb-c.s { color: var(--gb-silver); } .gb-c.c { color: var(--gb-copper); }

/* ---------- glass panels ---------- */
.gb-panel { position: relative; margin: 28px 0; padding: 24px clamp(16px, 3vw, 30px); border-radius: 18px; border: 1px solid rgba(228, 212, 255, .17);
  background: linear-gradient(155deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 38%, rgba(255, 255, 255, 0) 60%, rgba(166, 107, 255, .07)), rgba(20, 12, 36, .58);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -18px 30px -24px rgba(166, 107, 255, .35), 0 14px 34px -16px rgba(0, 0, 0, .75); }
.gb-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 32%, rgba(236, 222, 255, .12) 49%, rgba(255, 255, 255, .16) 50%, transparent 64%) 150% 0 / 280% 100% no-repeat;
  animation: gb-sheen 12s cubic-bezier(.45, 0, .25, 1) infinite; }
.gb-panel:nth-of-type(2n)::after { animation-delay: -5s; animation-duration: 14s; }
.gb-panel h2 { margin: 0; }
.gb-panel .kicker { margin: 0 0 4px; font: 600 .66rem var(--serif-display); letter-spacing: .26em; text-transform: uppercase; color: var(--scale-bright); }
.gb-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.gb-blank { color: var(--bone-dim); font-style: italic; text-align: center; padding: 26px 10px; margin: 0; list-style: none; }

/* ---------- stats ---------- */
.gb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.gb-stat { position: relative; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(228, 212, 255, .16); text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 45%), rgba(20, 12, 36, .55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.gb-stat .lbl { display: block; font: 600 .62rem var(--serif-display); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dim); }
.gb-stat b { display: block; margin: 4px 0 2px; font: 600 1.7rem var(--serif-display); color: #fff; text-shadow: 0 0 18px rgba(166, 107, 255, .7); }
.gb-stat:nth-child(3) b { color: var(--gb-in); text-shadow: 0 0 18px rgba(126, 224, 168, .5); }
.gb-stat:nth-child(4) b { color: var(--gb-out); text-shadow: 0 0 18px rgba(255, 143, 176, .45); }
.gb-stat small { color: var(--bone-dim); font-size: .92rem; }

/* ---------- gold over time ---------- */
.gb-chart-read { margin: 0; font: 600 1.05rem var(--serif-display); color: var(--bone); min-height: 1.4em; }
.gb-chart { position: relative; height: 260px; cursor: crosshair; }
.gb-chart svg { width: 100%; height: 100%; overflow: visible; }
.gb-chart .gl { stroke: rgba(228, 212, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gb-chart .gy, .gb-chart .gx { fill: var(--bone-dim); font: 600 13px var(--serif-display); letter-spacing: .06em; }
.gb-chart .gy { text-anchor: end; dominant-baseline: middle; }
.gb-chart .gx { text-anchor: middle; }
.gb-chart .ln { fill: none; stroke: url(#gbLine); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(243, 217, 143, .7)) drop-shadow(0 0 14px rgba(166, 107, 255, .6));
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: gb-draw 2.2s cubic-bezier(.3, .7, .2, 1) .2s forwards; }
.gb-chart .ar { opacity: 0; animation: gb-fade 1.6s ease .9s forwards; }
.gb-chart .pt { fill: #fff; stroke: var(--gb-gold); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--gb-gold)); }
.gb-chart .cur { stroke: rgba(243, 217, 143, .6); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
@keyframes gb-draw { to { stroke-dashoffset: 0; } }
@keyframes gb-fade { to { opacity: 1; } }

/* ---------- the vault: tabs and slots ---------- */
.gb-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.gb-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; fill: none; stroke: var(--violet-hot); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.gb-search input { width: 100%; box-sizing: border-box; padding: 10px 14px 10px 38px; border-radius: 999px; border: 1px solid rgba(228, 212, 255, .22); color: var(--bone);
  background: rgba(8, 5, 15, .55); font: 1.05rem var(--serif-body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.gb-search input:focus { outline: none; border-color: var(--violet-hot); box-shadow: 0 0 0 3px rgba(166, 107, 255, .25), 0 0 20px rgba(166, 107, 255, .35); }
.gb-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.gb-tabs button { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; cursor: pointer; color: var(--bone-dim);
  border: 1px solid rgba(228, 212, 255, .16); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01)), rgba(14, 8, 26, .6);
  font: 600 .74rem var(--serif-display); letter-spacing: .1em; text-transform: uppercase; transition: color .25s, border-color .25s, box-shadow .3s, transform .25s; }
.gb-tabs button .gl { color: var(--violet-hot); font-size: .9rem; text-shadow: 0 0 8px currentColor; }
.gb-tabs button .ct { font: 1rem var(--serif-body); letter-spacing: 0; text-transform: none; color: var(--bone-dim); opacity: .8; }
.gb-tabs button:hover { color: #fff; border-color: rgba(201, 162, 255, .5); transform: translateY(-1px); }
.gb-tabs button[aria-selected="true"] { color: #fff; border-color: var(--violet-hot);
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(166, 107, 255, .14) 50%, rgba(138, 77, 255, .3)), rgba(30, 16, 54, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 18px rgba(166, 107, 255, .6), 0 0 40px rgba(138, 77, 255, .3); }
.gb-tabs button.locked { opacity: .6; }
.gb-tabs button:focus-visible { outline: 2px solid var(--violet-hot); outline-offset: 2px; }

.gb-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; padding: 12px; border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(166, 107, 255, .12), transparent 70%), rgba(6, 4, 12, .55); border: 1px solid rgba(228, 212, 255, .1);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); }
.gb-grid > .gb-blank { grid-column: 1 / -1; }
.gb-slot { --qc: rgba(228, 212, 255, .25); position: relative; aspect-ratio: 1; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--qc); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 55%), rgba(16, 10, 28, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 12px color-mix(in srgb, var(--qc) 35%, transparent), 0 0 10px -2px color-mix(in srgb, var(--qc) 70%, transparent);
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s, opacity .3s, filter .3s; }
.gb-slot.empty { cursor: default; border-color: rgba(228, 212, 255, .07); box-shadow: inset 0 0 14px rgba(0, 0, 0, .7); background: rgba(10, 6, 18, .7); }
.gb-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gb-slot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 40%); mix-blend-mode: screen; }
.gb-noicon { display: grid; place-items: center; width: 100%; height: 100%; font: 600 1.1rem var(--serif-display); color: var(--qc); text-shadow: 0 0 10px currentColor;
  background: radial-gradient(circle, color-mix(in srgb, var(--qc) 25%, transparent), transparent 70%); }
.gb-count { position: absolute; right: 3px; bottom: 1px; font: 700 .78rem var(--serif-body); color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 0 #000; }
.gb-slot:not(.empty):hover, .gb-slot:not(.empty):focus-visible { z-index: 2; transform: scale(1.18); outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px var(--qc), 0 0 18px var(--qc), 0 0 34px color-mix(in srgb, var(--qc) 60%, transparent); }
.gb-slot.dim { opacity: .18; filter: grayscale(.8); }
.gb-slot.hit { animation: gb-hit 1.6s ease-in-out infinite; }
@keyframes gb-hit { 50% { box-shadow: 0 0 0 1px var(--qc), 0 0 22px var(--qc), 0 0 40px color-mix(in srgb, var(--qc) 60%, transparent); } }
/* item quality colours, as the game paints them */
.q0 { --qc: #9d9d9d; } .q1 { --qc: #f2f2f2; } .q2 { --qc: #1eff00; } .q3 { --qc: #2b8cff; } .q4 { --qc: #b64dff; } .q5 { --qc: #ff8000; } .q6 { --qc: #e6cc80; } .q7 { --qc: #00ccff; }
.gb-slot.q1 { --qc: rgba(242, 242, 242, .45); }
/* the slots arrive in a wave, row by row */
.gb-grid.in .gb-slot { animation: gb-slot-in .6s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: calc(var(--d, 0) * 22ms); }
.gb-grid.in .gb-slot.hit { animation: gb-slot-in .6s cubic-bezier(.2, .9, .3, 1.2) backwards, gb-hit 1.6s ease-in-out .6s infinite; }
@keyframes gb-slot-in { from { opacity: 0; transform: scale(.6) translateY(8px); filter: brightness(2.4) blur(3px); } }
.gb-grid-note { margin: 10px 2px 0; color: var(--bone-dim); font-size: .98rem; }

/* the item tooltip */
.gb-tip { position: fixed; z-index: 90; max-width: 280px; padding: 10px 14px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 18, 54, .97), rgba(10, 6, 20, .97)); border: 1px solid var(--qc, rgba(228, 212, 255, .3));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .7), 0 0 22px color-mix(in srgb, var(--qc, #a66bff) 45%, transparent); }
.gb-tip b { display: block; font: 600 1.05rem var(--serif-display); color: var(--qc); text-shadow: 0 0 10px color-mix(in srgb, var(--qc) 50%, transparent); }
.gb-tip.q1 b { color: #fff; }
.gb-tip span { display: block; color: var(--bone); font-size: .98rem; }
.gb-tip .ql { color: var(--qc); font-size: .9rem; }
.gb-tip .where, .gb-tip .wh { color: var(--bone-dim); font-size: .88rem; }
.gb-tip .wh { color: var(--violet-hot); }

/* ---------- the ledger and the generous ---------- */
.gb-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.gb-split > .gb-panel { margin: 0; }
.gb-filters { display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid rgba(228, 212, 255, .18); background: rgba(8, 5, 15, .5); }
.gb-filters button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--bone-dim); cursor: pointer;
  font: 600 .7rem var(--serif-display); letter-spacing: .14em; text-transform: uppercase; transition: color .25s, background .3s, box-shadow .3s; }
.gb-filters button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(138, 77, 255, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 16px rgba(166, 107, 255, .55); }
.gb-entries { list-style: none; margin: 0; padding: 0; }
.gb-day { margin: 18px 0 8px; font: 600 .66rem var(--serif-display); letter-spacing: .24em; text-transform: uppercase; color: var(--gb-gold); }
.gb-day:first-child { margin-top: 0; }
.gb-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 6px; border-radius: 12px;
  border: 1px solid rgba(228, 212, 255, .08); background: linear-gradient(90deg, var(--tint, rgba(166, 107, 255, .08)), rgba(255, 255, 255, .015) 60%);
  border-left: 2px solid var(--edge, rgba(166, 107, 255, .5)); animation: gb-row .5s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 35ms);
  transition: background .3s, transform .3s; }
.gb-entry:hover { transform: translateX(3px); background: linear-gradient(90deg, var(--tint), rgba(255, 255, 255, .04) 70%); }
@keyframes gb-row { from { opacity: 0; transform: translateX(-12px); } }
.gb-entry.in { --tint: rgba(126, 224, 168, .1); --edge: var(--gb-in); }
.gb-entry.out { --tint: rgba(255, 143, 176, .09); --edge: var(--gb-out); }
.gb-entry.mv { --tint: rgba(166, 107, 255, .08); --edge: var(--violet-hot); }
.gb-entry p { margin: 0; line-height: 1.35; }
.gb-entry .who { color: #fff; font-weight: 600; }
.gb-entry .it { color: var(--qc); text-shadow: 0 0 8px color-mix(in srgb, var(--qc) 40%, transparent); }
.gb-entry .it.q1 { color: #fff; }
.gb-entry .where { color: var(--bone-dim); }
.gb-entry .amt .gb-c { font-weight: 600; }
.gb-entry time { color: var(--bone-dim); font-size: .9rem; white-space: nowrap; }
.gb-entry img, .gb-entry .gb-noicon.sm { width: 36px; height: 36px; border-radius: 7px; border: 1px solid var(--qc); box-shadow: 0 0 10px -2px var(--qc); }
.gb-coin { width: 30px; height: 30px; margin: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8e0 0 10%, var(--gb-gold) 40%, #8a6420 100%);
  box-shadow: 0 0 12px rgba(243, 217, 143, .7), inset 0 -3px 6px rgba(0, 0, 0, .35); }
.gb-entry.out .gb-coin { filter: hue-rotate(-30deg) saturate(.8); }
.gb-more { display: block; margin: 16px auto 0; }
.gb-more[hidden] { display: none; }

.gb-givers h2 { margin-bottom: 6px; }
.gb-givers-note { font-size: 1rem; margin: 0 0 16px; }
.gb-board { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.gb-board li:not(.gb-blank) { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px 14px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid rgba(243, 217, 143, .14); background: rgba(8, 5, 15, .45); overflow: hidden; animation: gb-row .6s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i) * 70ms); }
.gb-board .rk { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 600 .8rem var(--serif-display); color: #12081f;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gb-gold) 60%, #9b7428); box-shadow: 0 0 10px rgba(243, 217, 143, .6); }
.gb-board li:nth-child(n + 4) .rk { background: radial-gradient(circle at 35% 30%, #fff, #b98cff 60%, #5a2ad0); color: #fff; box-shadow: 0 0 10px rgba(166, 107, 255, .6); }
.gb-board .nm { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-board .v { font-size: .98rem; }
.gb-board .bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.gb-board .bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: inherit;
  background: linear-gradient(90deg, #b98cff, var(--gb-gold)); box-shadow: 0 0 10px rgba(243, 217, 143, .6); transform-origin: left; animation: gb-bar 1.4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.3s + var(--i) * 90ms); }
@keyframes gb-bar { from { transform: scaleX(0); } }

.gb-how p { max-width: 62em; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) { .gb-split { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .gb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 8px; }
  .gb-chart { height: 200px; }
  .gb-chart .gy, .gb-chart .gx { font-size: 11px; }
  .gb-purse { padding: 14px 18px; }
  .gb-entry { grid-template-columns: 34px minmax(0, 1fr); }
  .gb-entry time { grid-column: 2; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-purse::after, .gb-panel::after, .gb-gold.done .gb-c.g, .gb-slot.hit, .gb-grid.in .gb-slot, .gb-entry, .gb-board li, .gb-board .bar::after, .gb-chart .ar { animation: none !important; }
  .gb-chart .ln { animation: none; stroke-dashoffset: 0; } .gb-chart .ar { opacity: 1; }
}