/* Account level (src/account-ui.js): the start-menu strip, the end-screen XP block and the weapon-unlock cards.
   Tokens from styles.css (:root). Animations touch transform / opacity only. */

/* weapon medallions outside the menu / builder (the end screen is in #modal) — same look as styles.css "weapon identity" */
.acct .wmed { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 8px; border-radius: 50%; color: #fff8ec;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cc, #e8701e) 55%, #fff) 0%, var(--cc, #e8701e) 42%, color-mix(in srgb, var(--cc, #e8701e) 30%, #000) 100%); box-shadow: 0 0 0 2px #000, inset 0 2px 0 rgba(255, 255, 255, .25); }
.acct .wmed > svg.gi { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
.acct .wbadge { position: absolute; right: -4px; bottom: -4px; width: 46%; height: 46%; padding: 1px; border-radius: 50%; background: #0b1114; box-shadow: 0 0 0 1.5px var(--cc2, #ffb35a); }
.acct .wbadge svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acct .wbadge svg .f { fill: #fff; stroke: none; }
.wmed.xs { width: 20px; height: 20px; padding: 3px; margin: 0 4px 0 2px; vertical-align: -5px; box-shadow: 0 0 0 1.5px #000 !important; }
.wmed.xs .wbadge { display: none; }

/* level badge (the HUD's teal level ring, smaller) */
.acct-lv { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 50% 30%, #23434a 0%, #12262b 55%, var(--ink-0) 100%);
  border: 3px solid var(--teal); box-shadow: 0 0 0 2px #000, 0 0 14px rgba(63, 224, 200, .4), inset 0 2px 0 rgba(255, 255, 255, .12); }
.acct-lv small { font: 800 10px/1 var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--teal); margin-bottom: 1px; }
.acct-lv b { font: 400 24px/1 var(--f-num); color: #fff; text-shadow: var(--outline); }

/* XP bar: the HUD XP bar's teal fill; animates from --a to --b */
.acct-bar { position: relative; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(7, 11, 13, .85); box-shadow: inset 0 0 0 1px var(--line); }
.acct-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--b)); border-radius: 5px;
  background: linear-gradient(180deg, #b8fff2 0%, #3fe0c8 40%, #14a596 100%); box-shadow: 0 0 10px rgba(63, 224, 200, .7);
  animation: acctFill 1.1s .25s cubic-bezier(.3, .8, .3, 1) backwards; }
.acct-bar.still i { animation: none; }
.acct-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, transparent 50%, rgba(0, 0, 0, .2) 100%); pointer-events: none; }
@keyframes acctFill { from { transform: scaleX(var(--a)); } to { transform: scaleX(var(--b)); } }

/* ---- start menu strip (under "Your wretch") */
.apanel { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 14px 9px 18px; border-radius: 14px; text-align: left;
  background: var(--panel-bg); border: 2px solid var(--line); box-shadow: var(--panel-shadow); overflow: hidden; }
.apanel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--teal), #14a596); }
.apanel .acct-lv { width: 46px; height: 46px; }
.apanel .acct-lv b { font-size: 21px; }
.ainfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.atop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 800 12px var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.atop small { font: 600 12px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.anext, .anew { font: 600 13.5px/1.3 var(--f-ui); color: var(--text-dim); }
.anext b, .anew b { color: #fff; font-weight: 700; }
.anew { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.anew > span { padding: 1px 7px 0; border-radius: 6px; font: 800 10.5px/1.6 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; color: #2a1800; background: var(--gold); box-shadow: 0 0 10px rgba(255, 210, 63, .45); }
.anew small { font: 600 12.5px var(--f-ui); color: var(--text-dim); }
.wlock { flex-basis: 100%; font: 700 12.5px/1.25 var(--f-ui); color: #ffd9a0; }
.wlock::before { content: 'Locked'; margin-right: 6px; padding: 0 5px; border-radius: 4px; font: 800 9.5px/1.6 var(--f-ui); letter-spacing: 1.3px; text-transform: uppercase; color: #2a1800; background: var(--ember); }

/* ---- end screen block */
.acct { display: flex; flex-direction: column; gap: 10px; width: min(640px, 86vw); padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); text-align: left; }
.acct.up { border-color: rgba(63, 224, 200, .6); box-shadow: 0 0 22px rgba(63, 224, 200, .18); }
.acct-top { display: flex; align-items: center; gap: 12px; }
.acct-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.acct-title { display: flex; align-items: baseline; gap: 10px; font: 800 12px var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.acct-title em { margin-left: auto; font: 400 22px/1 var(--f-num); font-style: normal; letter-spacing: 0; color: var(--gain); text-shadow: var(--outline); }
.acct-ding { font: 400 20px/1 var(--f-num); letter-spacing: .5px; text-transform: none; color: #fff; text-shadow: 0 0 12px rgba(63, 224, 200, .9), var(--outline); animation: acctDing .5s .9s var(--pop) backwards; }
@keyframes acctDing { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.acct-sub { font: 600 13px/1.3 var(--f-ui); color: var(--text-dim); }
.acct-sub b { color: #fff; }
.acct-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr) auto auto); gap: 3px 10px; font: 600 14px/1.35 var(--f-ui); color: var(--text-dim); }
.acct-rows em { font-style: normal; color: var(--text); text-align: right; }
.acct-rows b { font: 400 16px/1.3 var(--f-num); color: var(--gain); text-align: right; min-width: 3.2em; }
@media (max-width: 620px) { .acct-rows { grid-template-columns: minmax(0, 1fr) auto auto; } }

/* one card per weapon this run unlocked: gold rim, slow rays, pop-in */
.acct-unlocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.acct-card { position: relative; flex: 0 1 190px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 12px 12px; border-radius: 14px; overflow: hidden; text-align: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cc, var(--gold)) 28%, rgba(15, 23, 27, .96)), rgba(10, 15, 18, .97) 70%);
  border: 2px solid var(--gold); box-shadow: 0 0 0 2px #000, 0 0 26px rgba(255, 210, 63, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: acctCard .45s var(--d, 300ms) var(--pop) backwards; }
@keyframes acctCard { from { transform: scale(.6) translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.acct-rays { position: absolute; left: 50%; top: 46px; width: 220px; height: 220px; margin: -110px 0 0 -110px; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 55%, transparent) 0deg 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%); mask: radial-gradient(circle, #000 0%, transparent 62%); animation: acctRays 9s linear infinite; }
@keyframes acctRays { to { transform: rotate(360deg); } }
.acct-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); animation: acctShine 2.6s 1s ease-in-out infinite; transform: translateX(-120%); }
@keyframes acctShine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(320%); } }
.acct-card .wmed { width: 60px; height: 60px; padding: 12px; margin-bottom: 4px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold), 0 0 18px rgba(255, 210, 63, .7); }
.acct-card small { position: relative; font: 800 10.5px var(--f-ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.acct-card b { position: relative; font: 400 21px/1.05 var(--f-num); color: #fff; text-shadow: var(--outline); }
.acct-card span { position: relative; font: 800 11.5px var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--cc, var(--ember)); }
.acct-card p { position: relative; margin: 4px 0 0; font: 500 12.5px/1.3 var(--f-ui); color: var(--text-dim); }

/* ---- builder: locked weapons stay visible (icon greyed) with the level that unlocks them */
.wcard.locked { position: relative; cursor: help; border-style: dashed; }
.wcard.locked .wmed { filter: grayscale(.85) brightness(.6); }
.wcard.locked span { color: #6f8582; }
.wcard.locked em { position: absolute; top: 4px; right: 4px; padding: 0 5px; border-radius: 5px; font: 800 10px/1.5 var(--f-ui); font-style: normal; letter-spacing: .6px; color: #2a1800; background: var(--gold); opacity: .85; }
.wcard.locked:hover { transform: none; }
.wcard.locked.on { border-color: var(--blood); }
.wcard .wnew { position: absolute; top: 4px; left: 4px; padding: 0 5px; border-radius: 5px; font: 800 9.5px/1.5 var(--f-ui); font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: #2a1800; background: var(--gold); box-shadow: 0 0 8px rgba(255, 210, 63, .6); }
.wcard { position: relative; }
.bdetail .wlockd { display: block; margin-top: 6px; font: 700 13.5px/1.3 var(--f-ui); color: #ffc0c6; }