/* public/br/overlay.css: the Blockrealm layer over the game client (start screen, purchase sheet, toasts). Classes are br-*: the
   client's own styles never reach them and theirs never reach the client. */
:root { --br-bg: #120e0a; --br-panel: #1d1712; --br-panel2: #261e17; --br-line: #4a3c2e; --br-line2: #6b5640; --br-ink: #f3ead8; --br-ink2: #c9b99c; --br-ink3: #8d7b62;
  --br-gold: #f2c14e; --br-gold2: #c8932b; --br-green: #7fd36a; --br-red: #ff6b57; --br-sky: #7cc4ff;
  --br-disp: 'Silkscreen', 'Pixelify Sans', 'Press Start 2P', ui-monospace, monospace; --br-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --br-mono: 'JetBrains Mono', ui-monospace, monospace;
  --br-ease: cubic-bezier(.2, .7, .2, 1); }
.br-start { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 190, 90, .10), transparent 60%), linear-gradient(180deg, rgba(10, 14, 28, .55), rgba(8, 6, 4, .82));
  font: 14px/1.45 var(--br-text); color: var(--br-ink); transition: opacity .25s var(--br-ease); }
.br-start.br-hide { opacity: 0; pointer-events: none; visibility: hidden; }
.br-card { width: min(460px, 100%); padding: 26px 26px 18px; background: linear-gradient(180deg, var(--br-panel2), var(--br-panel));
  box-shadow: 0 0 0 2px #0a0806, 0 0 0 4px var(--br-line), inset 0 2px 0 rgba(255, 230, 180, .08), 0 30px 80px -20px rgba(0, 0, 0, .9); image-rendering: pixelated; }
.br-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.br-logo img { width: 56px; height: 56px; image-rendering: pixelated; }
.br-logo h1 { margin: 0; font: 400 clamp(28px, 6vw, 40px)/1 var(--br-disp); letter-spacing: .02em; color: var(--br-gold); text-shadow: 0 3px 0 #6b4410, 0 6px 0 rgba(0, 0, 0, .45); text-align: center; }
.br-line { margin: 12px auto 0; max-width: 40ch; text-align: center; color: var(--br-ink2); }
.br-season { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 4px; padding: 8px 10px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--br-line); font: 12px/1.3 var(--br-mono); color: var(--br-ink2); }
.br-season b { color: var(--br-ink); font-weight: 600; } .br-season .br-gold { color: var(--br-gold); } .br-dot { color: var(--br-ink3); }
.br-actions { display: grid; gap: 10px; margin-top: 14px; }
.br-btn { appearance: none; border: 0; cursor: pointer; height: 48px; padding: 0 18px; font: 400 15px/1 var(--br-disp); letter-spacing: .04em; color: var(--br-ink);
  background: #3a2f25; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .10), 0 0 0 2px #0a0806; transition: transform .12s var(--br-ease), filter .12s; }
.br-btn:hover { filter: brightness(1.12); } .br-btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 0 2px #0a0806; }
.br-btn:focus-visible { outline: 2px solid var(--br-sky); outline-offset: 3px; }
.br-primary { background: linear-gradient(180deg, #5fae3e, #3f8a2a); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); font-size: 17px; height: 54px; }
.br-ghost { background: #2a221b; color: var(--br-ink2); }
.br-who { text-align: center; color: var(--br-ink2); font-size: 13px; } .br-who b { color: var(--br-ink); }
.br-mono { font-family: var(--br-mono); font-size: 12px; }
.br-link { appearance: none; border: 0; background: none; padding: 0; color: var(--br-gold); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.br-help { margin: 2px 0 0; color: var(--br-ink3); font-size: 12.5px; text-align: center; }
.br-form { display: grid; gap: 8px; } .br-lab { font: 400 16px/1.2 var(--br-disp); color: var(--br-ink); text-align: center; } .br-form .br-help { margin: 0 0 6px; }
.br-input { height: 48px; padding: 0 14px; border: 0; background: #0d0a07; color: var(--br-ink); font: 600 17px var(--br-mono); text-align: center; box-shadow: inset 0 0 0 2px var(--br-line); outline: none; }
.br-input:focus { box-shadow: inset 0 0 0 2px var(--br-gold); }
.br-err { min-height: 18px; margin: 10px 0 0; color: var(--br-red); text-align: center; font-size: 13px; }
.br-nav { display: flex; justify-content: center; gap: 18px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 230, 180, .08); }
.br-nav a { color: var(--br-ink3); text-decoration: none; font: 12px var(--br-mono); letter-spacing: .08em; text-transform: uppercase; } .br-nav a:hover { color: var(--br-ink); }
/* modals: the wallet picker and the purchase sheet (centred over the game) */
.br-modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 3, .62); font: 14px/1.45 var(--br-text); color: var(--br-ink); }
.br-box { width: min(420px, 100%); padding: 18px 18px 16px; background: linear-gradient(180deg, var(--br-panel2), var(--br-panel)); box-shadow: 0 0 0 2px #0a0806, 0 0 0 4px var(--br-line), 0 30px 80px -20px rgba(0, 0, 0, .9); }
.br-hd { display: flex; align-items: center; gap: 10px; } .br-hd h3 { margin: 0; font: 400 20px/1.15 var(--br-disp); color: var(--br-gold); }
.br-x { margin-left: auto; width: 32px; height: 32px; border: 0; background: none; color: var(--br-ink3); font-size: 24px; line-height: 1; cursor: pointer; } .br-x:hover { color: var(--br-ink); }
.br-sub { margin: 8px 0 0; color: var(--br-ink2); font-size: 13px; }
.br-list { display: grid; gap: 8px; margin-top: 14px; }
.br-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; background: #2a221b; color: var(--br-ink); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--br-line); font: inherit; }
.br-row:hover, .br-row:focus-visible { box-shadow: inset 0 0 0 2px var(--br-gold); outline: none; }
.br-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: #0d0a07; color: var(--br-gold); font: 400 16px var(--br-disp); }
.br-tx { display: grid; gap: 1px; min-width: 0; flex: 1; } .br-tx b { font-weight: 600; } .br-tx small { color: var(--br-ink3); font-size: 12px; }
.br-tag { flex: none; padding: 4px 7px; background: rgba(242, 193, 78, .12); color: var(--br-gold); font: 600 10px/1 var(--br-mono); letter-spacing: .08em; text-transform: uppercase; }
.br-foot { margin: 12px 0 0; color: var(--br-ink3); font-size: 12px; } .br-foot a, .br-note a { color: var(--br-gold); }
.br-price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; } .br-price b { font: 700 28px/1 var(--br-mono); color: var(--br-ink); letter-spacing: -.02em; }
.br-price span { font: 400 14px var(--br-disp); color: var(--br-gold); } .br-price small { margin-left: auto; color: var(--br-ink3); font: 12px var(--br-mono); }
.br-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.br-steps li { position: relative; padding-top: 10px; font: 600 10px/1.2 var(--br-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--br-ink3); }
.br-steps li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(255, 230, 180, .08); }
.br-steps li.br-d { color: var(--br-ink2); } .br-steps li.br-d::before { background: var(--br-green); }
.br-steps li.br-n::before { background: linear-gradient(90deg, var(--br-gold), rgba(242, 193, 78, .15)); background-size: 200% 100%; animation: br-run 1.1s linear infinite; }
@keyframes br-run { to { background-position: -200% 0; } }
.br-note { min-height: 20px; margin: 12px 0 0; color: var(--br-ink2); font-size: 13px; } .br-note.br-bad { color: var(--br-red); }
.br-foot2 { display: flex; gap: 8px; margin-top: 14px; } .br-foot2 .br-btn { flex: 1; height: 44px; font-size: 14px; }
.br-toasts { position: fixed; right: 12px; top: 12px; z-index: 9600; display: grid; gap: 8px; pointer-events: none; }
.br-toast { padding: 10px 14px; background: var(--br-panel2); box-shadow: 0 0 0 2px #0a0806, 0 0 0 3px var(--br-line); color: var(--br-ink); font: 13px var(--br-text); transition: opacity .35s, transform .35s var(--br-ease); }
.br-toast.br-out { opacity: 0; transform: translateY(-6px); }
.br-start *::-webkit-scrollbar, .br-modal *::-webkit-scrollbar { width: 6px; height: 6px; } .br-start *::-webkit-scrollbar-thumb, .br-modal *::-webkit-scrollbar-thumb { background: var(--br-line2); border-radius: 6px; }
.br-start *::-webkit-scrollbar-button, .br-modal *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@media (max-width: 520px) { .br-card { padding: 20px 16px 14px; } .br-btn { height: 46px; } }
@media (prefers-reduced-motion: reduce) { .br-start, .br-btn, .br-toast { transition: none; } .br-steps li.br-n::before { animation: none; } }