/* Menu/dashboard retheme — retro itch.io look (dark olive + parchment gold +
   'Press Start 2P'). Scoped ENTIRELY to .menus so the in-game HUD keeps its
   own styling. Loaded after ui.css. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.menus {
  /* re-point the shared palette inside menus only */
  --panel: #232912;
  --panel-dark: #1d2210;
  --panel-darker: #15190b;
  --border: #b8963e;
  --text: #e3d491;
  --dim: #a89b62;
  --accent: #c9a03c;
  --accent2: #ffd95e;
  --gold: #ffd95e;
  --focus: #9ac04a;

  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 10px;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(154,192,74,.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.14) 3px 6px),
    radial-gradient(ellipse at 50% 30%, #242c11 0%, #171b0c 55%, #0f120a 100%);
}
.menus::before { display: none; }

/* ---- type scale (Press Start 2P is much wider than Courier) ---- */
.menus .xs { font-size: 8px; }
.menus .panel h1 { font-size: 15px; letter-spacing: 2px; color: var(--gold);
  text-shadow: 2px 2px 0 #7a3a10, 3px 3px 0 #000; border-bottom-color: #4a481f; }
.menus .panel h3 { font-size: 10px; color: var(--gold); letter-spacing: 1px; text-shadow: 2px 2px 0 #000; }
.menus b { color: #f4ea9e; }

/* ---- panels: ornate gold frames ---- */
.menus .panel {
  border: 3px solid var(--accent);
  outline: 2px solid #000;
  box-shadow: 0 0 0 5px #7a6222, 0 0 0 7px #000, 0 8px 34px rgba(0,0,0,.65), inset 0 0 0 2px #000;
}
.menus .logo { font-size: 26px; letter-spacing: 2px; color: var(--gold);
  text-shadow: 2px 2px 0 #7a3a10, 3px 3px 0 #000; }
.menus .logo span { color: #ff9822; }
.menus .logo.sm { font-size: 15px; }

/* ---- buttons ---- */
.menus .mc-btn {
  font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: 1px;
  padding: 11px 16px;
  background: linear-gradient(#4c521f, #363c14 55%, #2a2f0e);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.14), inset -2px -2px 0 rgba(0,0,0,.45), 0 3px 0 #000;
  color: var(--text);
}
.menus .mc-btn:active { box-shadow: inset 2px 2px 0 rgba(0,0,0,.4); }
.menus .mc-btn.primary { background: linear-gradient(#ff6a42, #d4482a 55%, #a83318); color: #fff; }
.menus .mc-btn.danger { background: linear-gradient(#8a2020, #6a1414 55%, #4a0c0c); color: #ffd0c0; }
.menus .mc-btn.brego { background: linear-gradient(#b0d060, #7a9a34 55%, #5a7a20); color: #182002; }
.menus .mc-btn.small { padding: 8px 10px; font-size: 8px; }
.menus .mc-btn.tab { background: var(--panel-darker); }
.menus .mc-btn.tab.active { background: linear-gradient(#ffd95e, #c9a03c 55%, #8a6d24); color: #241a02; }
.menus .mc-btn:disabled { opacity: .4; }
.menus .big-play { font-size: 15px; letter-spacing: 3px; padding: 18px;
  box-shadow: 0 0 22px rgba(212,72,42,.4), inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.4), 0 3px 0 #000; }

/* ---- dashboard ---- */
.menus .dash-top { border-bottom: 2px solid #4a481f; }
.menus .chip { font-size: 8px; padding: 7px 10px; background: var(--panel-darker); }
.menus .chip.brego { color: #b0d060; border-color: #4a5a1e; }
.menus .chip.addr { color: var(--gold); }
.menus .chip.user-static { color: var(--gold); border-color: #5a4a18; cursor: default; }
.menus .chip.user { color: var(--gold); }
.menus .username-box h3 { text-align: center; }
.menus .uname-input { font-size: 12px; }
.menus .uname-err { font-size: 8px; }
.menus .dash-card { background: var(--panel-dark); box-shadow: inset 2px 2px 0 rgba(255,255,255,.05), inset -2px -2px 0 rgba(0,0,0,.35); }
.menus .dash-card h3 { font-size: 9px; }
.menus .dash-stats > div { font-size: 9px; padding: 8px 9px; }
.menus .dash-stats .xs { font-size: 7px; }
.menus .exp-hint { font-size: 8px; line-height: 1.8; }
.menus .hint { font-size: 8px; color: var(--dim); }
.menus .tagline { font-size: 9px; }
.menus .profile-chip { font-size: 9px; box-shadow: inset 0 0 12px rgba(201,160,60,.12); }

/* ---- mining rig ---- */
.menus .mining-panel { box-shadow: inset 0 0 14px rgba(154,192,74,.08); }
.menus .mining-ready { font-size: 10px; }

/* ---- treasury wallet ---- */
.menus .tw-bal-cell b { font-size: 10px; }
.menus .tw-actions .mc-btn { font-size: 8px; padding: 10px 12px; }
.menus .tw-tx-row { font-size: 8px; }
.menus .tw-modal-box h3 { font-size: 10px; }

/* ---- leaderboard ---- */
.menus .lb-pool-banner { font-size: 8px; line-height: 1.8; }
.menus .lb-pool-amt { font-size: 12px; }
.menus .lb-head, .menus .lb-row { font-size: 8px; padding: 8px 6px; grid-template-columns: 28px 1fr 58px 58px 88px; gap: 4px; }
.menus .lb-head { font-size: 7px; }
.menus .lb-pool { font-size: 7px; }
.menus .lb-you-label { font-size: 8px; }
.menus .mining-site b { font-size: 10px; }
.menus .bar-fill.mining { background: linear-gradient(#c0e070, #9ac04a 60%, #6a8a2c); }
.menus .bar-fill.xp { background: linear-gradient(#c0e070, #9ac04a 60%, #6a8a2c); }

/* ---- exchange ---- */
.menus .brego-big { color: #b0d060; font-size: 16px; }
.menus .wallet-big { font-size: 16px; color: var(--gold); }
.menus .wallet-summary { font-size: 9px; }
.menus .wallet-summary > div { box-shadow: inset 0 0 10px rgba(201,160,60,.08); }
.menus .swap-widget { border-color: #4a5a1e; box-shadow: inset 0 0 16px rgba(154,192,74,.06); }
.menus .swap-input { font-family: 'Press Start 2P', monospace; font-size: 14px; background: #0f120a; }
.menus .swap-input:focus { outline-color: #9ac04a; }
.menus .swap-quote { font-size: 9px; }
.menus .exchange-note { background: rgba(201,160,60,.1); border-color: var(--accent); font-size: 9px; line-height: 1.9; }
.menus .tx-row { font-size: 8px; }
.menus .pos { color: #b0d060; }

/* ---- cards & lists ---- */
.menus .shop-card, .menus .ency-card, .menus .char-card, .menus .map-row,
.menus .quest-row, .menus .tx-row, .menus .slot-row, .menus .setting-row {
  background: var(--panel-dark);
  border-color: #000;
  text-shadow: 2px 2px 0 #000;
}
.menus .shop-card b, .menus .ency-card b { font-size: 8px; line-height: 1.5; }
.menus .shop-card .xs, .menus .ency-card .xs { font-size: 7px; line-height: 1.6; }
.menus .shop-balance { font-size: 8px; line-height: 1.8; }
.menus .shop-tabs .mc-btn.tab { font-size: 7px; padding: 9px 6px; line-height: 1.5; }
.menus .shop-level-label { font-size: 7px; }
.menus .shop-level-value { font-size: 16px; }
.menus .shop-desc { min-height: 32px; }
.menus .shop-next { min-height: 34px; }
.menus .skin-perk { font-size: 7px; min-height: 36px; }
.menus .shop-card .mc-btn.small { font-size: 7px; padding: 9px 5px; }
.menus .equip-badge { font-size: 7px; padding: 9px 5px; }
.menus .shop-card.skin { min-height: 240px; }
.menus .shop-gacha-panel h3 { font-size: 9px; }
.menus .gacha-btns .mc-btn { font-size: 7px; padding: 10px 6px; }
.menus .gacha-tier-badge { font-size: 7px; }
.menus .maintenance-panel h2 { font-size: 11px; }
.menus .maintenance-panel p { font-size: 8px; line-height: 1.7; }
.menus .shop-card.premium { border-color: #4a5a1e; box-shadow: inset 0 0 12px rgba(154,192,74,.08); }
.menus .shop-card.skin.equipped { border-color: #9ac04a; box-shadow: 0 0 14px rgba(154,192,74,.35); }
.menus .rank-pips { color: var(--gold); }
.menus .badge { background: #4a5a1e; color: #d8f0a0; font-size: 7px; }
.menus .badge.nm { background: #6a1414; color: #ffd0c0; }
.menus .char-card b { font-size: 10px; }
.menus .char-card .lore { font-size: 7px; line-height: 1.7; }
.menus .map-row b { font-size: 10px; }
.menus .map-row .xs { font-size: 7px; line-height: 1.7; }
.menus .quest-row { font-size: 8px; }
.menus .quest-row .tag { background: #4c521f; color: #d8f0a0; font-size: 7px; }
.menus .stats-grid .stat-row { font-size: 9px; background: var(--panel-dark); }
.menus .result-grid > div { font-size: 9px; }
.menus .results h1.win { color: var(--gold); }
.menus .levelup-note { font-size: 9px; }
.menus .locked-hint { font-size: 7px; }

/* ---- mining picker modal ---- */
.menus .modal-back { background: rgba(10,12,5,.85); }
.menus .mining-picker h3 { text-align: center; }

/* ---- dashboard banner ---- */
.menus .dash-banner {
  position: relative; height: 92px; margin: -8px 0 12px; overflow: hidden;
  border: 3px solid var(--accent); outline: 2px solid #000;
  box-shadow: 0 0 0 5px #7a6222, 0 0 0 7px #000, inset 0 0 0 2px #000;
  background: radial-gradient(ellipse at 50% 130%, #33411a 0%, #1c2410 55%, #12180a 100%);
  display: flex; align-items: center; justify-content: center;
}
.menus .dash-voxels { position: absolute; inset: 0; width: 100%; height: 100%; }
.menus .dash-banner-inner { position: relative; text-align: center; }
.menus .dash-banner .logo.sm { font-size: 22px; }
.menus .dash-tagline { font-size: 7px; color: var(--dim); letter-spacing: 3px; margin-top: 7px; }

.menus .dash-top { justify-content: center; margin-bottom: 14px; padding-bottom: 10px; }
.menus .chip.price { color: var(--dim); }

/* ---- hero head ---- */
.menus .hero-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px;
  background: var(--panel-darker); border: 2px solid #000; padding: 9px; }
.menus .hero-head .portrait { border: 2px solid #000; outline: 2px solid #7a6222; image-rendering: pixelated; flex: none; }
.menus .hero-id { display: flex; flex-direction: column; gap: 4px; }
.menus .hero-id b { font-size: 10px; }
.menus .skin-tag { color: #b0d060; }
.menus .dash-card h3.sub { margin-top: 14px; }

/* ---- realm conquest strip ---- */
.menus .realm-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.menus .realm-cell {
  aspect-ratio: 1; border: 2px solid #000; font-size: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--c) 40%, color-mix(in srgb, var(--c) 45%, #000));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.25);
  color: #fff; text-shadow: 1px 1px 0 #000;
}
.menus .realm-cell.cleared { outline: 2px solid var(--gold); }
.menus .realm-cell.nm { outline-color: #ff6a42; }
.menus .realm-cell.locked { filter: grayscale(.9) brightness(.4); }
.menus .realm-cell.open { animation: realm-glow 2s infinite; }
@keyframes realm-glow { 50% { box-shadow: inset 1px 1px 0 rgba(255,255,255,.25), 0 0 8px rgba(255,217,94,.6); } }

/* ---- box collection strip ---- */
.menus .coll-strip { display: flex; gap: 5px; flex-wrap: wrap; min-height: 40px; align-items: center; }
.menus .coll-cell { position: relative; width: 40px; height: 40px; background: var(--panel-darker); border: 2px solid #000;
  display: flex; align-items: center; justify-content: center; }
.menus .coll-cell .box-icon { width: 24px; height: 24px; }
.menus .coll-cell .count { position: absolute; bottom: 0; right: 1px; font-size: 7px; text-shadow: 1px 1px 0 #000; }
.menus .coll-cell.rarity-2 { box-shadow: 0 0 7px rgba(56,189,248,.5); }
.menus .coll-cell.rarity-3 { box-shadow: 0 0 9px rgba(192,132,252,.65); }

/* ---- PLAY button pulse ---- */
.menus .big-play { animation: play-pulse 2.4s infinite; }
@keyframes play-pulse {
  50% { box-shadow: 0 0 34px rgba(212,72,42,.75), inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.4), 0 3px 0 #000; }
}

/* ---- quest board ---- */
.menus .quest-board { background: var(--panel-darker); border: 2px solid #000; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: inset 0 0 14px rgba(201,160,60,.07); }
.menus .qb-row { display: flex; align-items: center; gap: 8px; background: var(--panel-dark); border: 2px solid #000; padding: 7px 9px; font-size: 8px; }
.menus .qb-row .qb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menus .qb-row .tag { background: #4c521f; color: #d8f0a0; padding: 1px 5px; border: 1px solid #000; }
.menus .qb-row .bar.mini { width: 70px; flex: none; }
.menus .qb-row.done { border-color: #4a5a1e; box-shadow: 0 0 8px rgba(154,192,74,.3); }
.menus .qb-row.claimed { opacity: .55; }
.menus .qb-count { flex: none; }
.menus .qb-reward { flex: none; color: var(--gold); }

/* ---- featured skin promo ---- */
.menus .skin-promo { margin-top: 12px; background: var(--panel-darker); border: 2px solid #000; outline: 1px solid #4a5a1e;
  padding: 12px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform .1s, box-shadow .1s; }
.menus .skin-promo:hover { transform: translateY(-2px); box-shadow: 0 0 14px rgba(154,192,74,.35); }
.menus .skin-promo .portrait { border: 2px solid #000; outline: 2px solid #7a6222; }
.menus .promo-label { color: var(--gold); letter-spacing: 1px; animation: promo-blink 1.6s infinite; }
@keyframes promo-blink { 50% { opacity: .55; } }

/* ---- news ticker ---- */
.menus .ticker { display: flex; align-items: center; margin-top: 14px; border: 2px solid #000; background: var(--panel-darker); overflow: hidden; }
.menus .ticker-label { flex: none; background: linear-gradient(#ffd95e, #c9a03c 55%, #8a6d24); color: #241a02; font-size: 8px;
  padding: 8px 10px; border-right: 2px solid #000; letter-spacing: 1px; }
.menus .ticker-clip { overflow: hidden; flex: 1; }
.menus .ticker-track { display: inline-flex; gap: 44px; white-space: nowrap; font-size: 8px; padding: 8px 0;
  animation: ticker-scroll 40s linear infinite; }
.menus .ticker-track span { color: var(--dim); }
.menus .ticker-track b { color: var(--gold); }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ---- scrollbars ---- */
.menus ::-webkit-scrollbar-thumb { background: #7a6222; }
.menus ::-webkit-scrollbar-track { background: #15190b; }

/* ---- hero 3D viewer (dashboard) ---- */
.menus .hero-showcase {
  position: relative; margin-bottom: 12px; border: 2px solid #000; outline: 2px solid #7a6222;
  background: #0c0f08; box-shadow: inset 0 0 24px rgba(201,160,60,.08);
}
.menus .hero-viewer {
  width: 100%; height: 220px; display: block; touch-action: none; background: transparent;
}
.menus .viewer-hint {
  position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  font-size: 7px; pointer-events: none; opacity: .8; color: var(--dim);
}
.menus .hero-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px;
  background: var(--panel-darker); border: 2px solid #000; padding: 9px; }

/* ---- character select 3D preview ---- */
.menus .char-select-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .menus .char-select-layout { grid-template-columns: 1fr; } }
.menus .char-preview-panel {
  position: sticky; top: 0; border: 2px solid #000; outline: 2px solid #7a6222;
  background: #0c0f08; padding: 10px; text-align: center;
}
.menus .char-preview-panel h3 { font-size: 9px; margin-bottom: 8px; }
.menus .char-preview-viewer { width: 100%; height: 200px; display: block; touch-action: none; }
.menus .char-preview-name { margin-top: 8px; line-height: 1.6; }