/* =====================================================================================================
   STYLE B, "CELESTIAL GLASS" - a switchable layer over style C ("i want to also try style B, celestial glass now,
   and in case i dont like it i want to switch back"). Everything here is scoped to html.ui-b: Settings ->
   Interface flips the class (and remembers it as ab_ui), ?ui=b / ?ui=c in the URL sets it too, and with the class
   off this file does nothing - C is exactly as it was.
   The look, from the HUD Directions page: frosted glass you can see the world through, a starlit edge (ice blue ->
   white -> violet) along the top of every sheet, a few specks of stars inside, Cormorant Garamond for names and
   titles, ice blue where C used champagne, and a glowing orb for keys and seals.
   ===================================================================================================== */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-latin.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2'); }

/* ---------- the glass, shared ---------- */
html.ui-b {
  --b-edge: linear-gradient(90deg, rgba(159, 228, 255, 0), #9fe4ff 28%, #fff 50%, #c6a4ff 72%, rgba(198, 164, 255, 0));
  --b-specks:
    radial-gradient(1px 1px at 12% 16%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 76% 10%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(190, 220, 255, .85), transparent 60%),
    radial-gradient(1px 1px at 32% 84%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 57% 44%, rgba(220, 200, 255, .6), transparent 60%),
    radial-gradient(1px 1px at 6% 66%, rgba(255, 255, 255, .45), transparent 60%);
  --b-glass: linear-gradient(160deg, rgba(42, 50, 108, .74), rgba(12, 14, 40, .84));
  --b-glass-light: linear-gradient(160deg, rgba(48, 58, 120, .52), rgba(14, 16, 44, .64));
  --b-ring: 0 0 0 1px rgba(200, 222, 255, .28);
  --b-ice: #9fe4ff;
  --b-ice-soft: #a9cbff;
  --b-text: #dfe6f7;
}
html.ui-b :is(#hud, #select-screen, #entry-modal, #about-panel, #sort-menu, #item-menu, #inspect-card, #friends-panel, #party-panel) {
  --b-name: 'Cormorant Garamond', Georgia, serif; }

/* ---------- panels: frosted glass with a starlit top edge ---------- */
html.ui-b :is(#stats-panel, #quest-log, #inv-panel, #bank-panel, #shop-panel, #map-panel, #dialogue, #item-menu, #inspect-card,
  #settings-panel, #help-panel, #cook-panel, #home-panel, #forge-panel, #mkt-panel, #friends-panel, #party-panel,
  .entry-card, .about-card, #sort-menu, .su-card) {
  border-radius: 18px; border-color: transparent;
  background: var(--b-edge) top / 100% 1px no-repeat border-box, var(--b-specks), var(--b-glass) border-box;
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--b-ring), 0 18px 44px rgba(4, 6, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
  color: var(--b-text); }
html.ui-b :is(#stats-name, #set-title, #help-title, #map-title, #inv-title, #cook-title, #home-title, #forge-title, #bank-title,
  #shop-title, #mkt-title, #ql-head, #dlg-name, #cine-name, #cine-name-text, #tf-name, #zt-name, #im-name, #ic-name, .fr-head,
  #sel-name, #entry-charname, #about-panel h2, .su-lead) {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: #fff;
  text-shadow: 0 0 14px rgba(150, 200, 255, .5), 0 1px 2px rgba(0, 0, 0, .6); }
html.ui-b :is(#set-title, #help-title, #map-title, #inv-title, #cook-title, #home-title, #forge-title, #bank-title,
  #shop-title, #mkt-title, #ql-head, .fr-head) { font-size: 19px; letter-spacing: .3px; }
html.ui-b .fr-head { background: rgba(26, 32, 72, .96); }
html.ui-b .stat-row b { color: #fff; }

/* tabs: glass, and the chosen one lit from beneath in ice */
html.ui-b :is(.stab, .mtab, .ivtab, .shtab, .fgtab, .hmtab, .mkt-tab, .mkt-mode, .tt-tab, .chip) {
  background: rgba(150, 190, 255, .06); border-color: rgba(200, 222, 255, .18); color: #b9c6e6; }
html.ui-b :is(.stab, .mtab, .ivtab, .shtab, .fgtab, .hmtab, .mkt-tab, .mkt-mode, .tt-tab, .chip):hover { color: #fff; border-color: rgba(220, 235, 255, .4); }
html.ui-b :is(.stab.active, .mtab.active, .ivtab.active, .shtab.active, .fgtab.active, .hmtab.active, .mkt-tab.on, .mkt-mode.on, .tt-tab.active, .chip.on) {
  color: #fff; background: rgba(150, 210, 255, .14); border-color: rgba(200, 235, 255, .6);
  box-shadow: inset 0 -2px 0 var(--b-ice), 0 0 14px rgba(140, 200, 255, .28); }
html.ui-b .tt-tab.active b { color: var(--b-ice); }
html.ui-b .chip.chip-free.on { border-color: #63b077; color: #8fe0a4; background: rgba(99, 176, 119, .12); box-shadow: none; }
html.ui-b .chip.chip-hon.on { border-color: #b98fe0; color: #dcc4ff; background: rgba(150, 110, 210, .14); box-shadow: none; }

/* buttons: glass; the thing you came to do glows ice */
html.ui-b :is(#dialogue button, #item-menu button, .shop-buy, .hint-skip, #alias-roll, .sync-row button, #wallet-btn, #wallet-list button, .su-step) {
  background: rgba(150, 190, 255, .07); border: 1px solid rgba(200, 222, 255, .22); color: #eef3ff; }
html.ui-b :is(#dialogue #dlg-shop, #dialogue #dlg-bank, #dialogue #dlg-forge, #dialogue #dlg-cook, #item-menu #im-act, .shop-buy, #respawn-btn, #entry-go) {
  background: rgba(150, 210, 255, .16); border: 1px solid rgba(200, 235, 255, .7); color: #fff;
  box-shadow: 0 0 14px rgba(140, 200, 255, .3); text-shadow: 0 0 10px rgba(150, 210, 255, .6); }
html.ui-b :is(#dialogue #dlg-shop, #dialogue #dlg-bank, #dialogue #dlg-forge, #dialogue #dlg-cook, #item-menu #im-act, .shop-buy, #respawn-btn, #entry-go):hover {
  background: rgba(150, 210, 255, .26); box-shadow: 0 0 22px rgba(140, 200, 255, .5); }
html.ui-b #item-menu #im-drop { background: rgba(120, 30, 50, .35); border-color: rgba(255, 140, 160, .5); color: #ffb3c0; }

/* ---------- the act-here prompts: a glass pill, the key a glowing orb ---------- */
html.ui-b :is(#wp-prompt, #door-prompt, #mkt-prompt) {
  border-radius: 999px; padding: 7px 18px 7px 7px;
  background: var(--b-edge) top / 70% 1px no-repeat border-box, var(--b-specks), var(--b-glass-light);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: var(--b-ring), 0 10px 26px rgba(4, 6, 24, .5);
  font: 600 18px/1.1 'Cormorant Garamond', Georgia, serif; letter-spacing: .3px; color: #fff;
  text-shadow: 0 0 10px rgba(150, 200, 255, .6); }
html.ui-b :is(#wp-prompt, #door-prompt, #mkt-prompt):not(:has(.pr-key)) { padding-left: 18px; }
html.ui-b :is(#wp-prompt, #door-prompt, #mkt-prompt):hover { background-color: transparent; filter: brightness(1.12); }
html.ui-b .pr-label::after { color: var(--b-ice); }
html.ui-b .pr-key { width: 28px; height: 28px; font: 700 14px/1 'Cormorant Garamond', Georgia, serif; color: #0d1640;
  background: radial-gradient(circle at 40% 35%, #fff, #bfe6ff 55%, #7fb6ff); box-shadow: 0 0 12px rgba(160, 220, 255, .9); }
html.ui-b #wp-prompt .pr-key { animation: b-orb 2.4s ease-in-out infinite; }
@keyframes b-orb { 0%, 100% { box-shadow: 0 0 8px rgba(160, 220, 255, .6); } 50% { box-shadow: 0 0 20px rgba(190, 235, 255, 1); } }

/* ---------- the quest tracker: a glass card, an orb for its seal ---------- */
html.ui-b #quest-tracker { border-radius: 16px; padding: 11px 42px 12px 11px; gap: 11px; align-items: center;
  background: var(--b-specks), var(--b-glass-light) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: var(--b-ring), 0 12px 30px rgba(4, 6, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
html.ui-b #quest-tracker::before { left: 14%; right: 14%; top: -1px; height: 1px; background: var(--b-edge);
  box-shadow: 0 0 8px 1px rgba(160, 220, 255, .7); }
html.ui-b #quest-tracker::after { content: none; }
html.ui-b #qt-seal { width: 30px; height: 30px; margin: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .95), rgba(150, 215, 255, .75) 28%, rgba(90, 110, 230, .35) 60%, transparent 72%); }
html.ui-b #qt-seal::after { content: '\2727'; width: auto; height: auto; transform: none; background: none; box-shadow: none;
  font-size: 16px; line-height: 1; color: #fff; text-shadow: 0 0 8px var(--b-ice); }
html.ui-b #quest-tracker.turnin #qt-seal::after { animation: none; text-shadow: 0 0 14px #fff, 0 0 6px var(--b-ice); }
html.ui-b #quest-tracker.ready #qt-seal { background: radial-gradient(circle at 50% 45%, rgba(255, 250, 230, .95), rgba(255, 220, 150, .7) 30%, rgba(200, 150, 60, .3) 60%, transparent 72%); }
html.ui-b #quest-tracker.ready #qt-seal::after { background: none; box-shadow: none; text-shadow: 0 0 8px #ffe3a0; }
html.ui-b #qt-title { font: 600 11px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: 4px; color: var(--b-ice-soft) !important; }
html.ui-b #qt-name { font: 700 20px/1.15 'Cormorant Garamond', Georgia, serif; color: #fff; margin: 3px 0 1px;
  text-shadow: 0 0 12px rgba(150, 200, 255, .55), 0 1px 2px rgba(0, 0, 0, .6); }
html.ui-b #qt-progress { font: italic 500 15px/1.25 'Cormorant Garamond', Georgia, serif; color: #d2ddff; }
html.ui-b #qt-progress::before { content: none; }
html.ui-b #quest-tracker.turnin #qt-progress { color: #fff; }
html.ui-b #qt-bar { width: 100%; height: 2px; background: rgba(200, 220, 255, .18); }
html.ui-b #qt-fill { background: linear-gradient(90deg, #6f8cff, #9fe4ff 70%, #fff); box-shadow: 0 0 8px var(--b-ice); }
html.ui-b #qt-hide { color: rgba(220, 235, 255, .7); }
@media (max-width: 600px) {
  html.ui-b #quest-tracker { padding: 7px 28px 8px 8px; gap: 7px; }
  html.ui-b #qt-seal { width: 24px; height: 24px; }
  html.ui-b #qt-name { font-size: 16px; }
  html.ui-b #qt-progress { font-size: 12.5px; }
}

/* ---------- the portrait: a luminous ring, the xp in ice, a glass level badge ---------- */
html.ui-b #portrait { border: 1px solid rgba(225, 238, 255, .85); box-shadow: 0 0 14px rgba(140, 200, 255, .55), 0 4px 14px rgba(0, 0, 0, .4); }
html.ui-b #portrait-wrap::before {
  background: conic-gradient(from 0turn, #6f8cff 0, #9fe4ff calc(var(--xp, 0) * .6turn), #fff calc(var(--xp, 0) * 1turn), rgba(200, 220, 255, .16) 0);
  filter: drop-shadow(0 0 4px rgba(160, 220, 255, .6)); }
html.ui-b #lvl-badge { background: rgba(30, 40, 90, .72); color: #fff; border: 1px solid rgba(220, 235, 255, .6);
  font: 700 13px/1.15 'Cormorant Garamond', Georgia, serif; letter-spacing: .4px;
  box-shadow: 0 0 10px rgba(140, 200, 255, .5), 0 2px 6px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.ui-b #hp-bar2 { background: rgba(20, 28, 60, .58); border: 1px solid rgba(220, 235, 255, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.ui-b #hp-fill2 { background: linear-gradient(90deg, #2fc391, #7bf0c4 70%, #d8fff0); box-shadow: 0 0 10px rgba(120, 255, 200, .55); }
html.ui-b #hp-fill2.low { background: linear-gradient(90deg, #e2463c, #ff7a7a 60%, #ffd0d0); box-shadow: 0 0 10px rgba(255, 110, 110, .6); }

/* ---------- the minimap, the rail, the hotbar ---------- */
html.ui-b #mini-dock::after { border: 1.5px solid rgba(232, 242, 255, .9); box-shadow: 0 0 16px rgba(140, 200, 255, .55), inset 0 0 10px rgba(0, 0, 0, .4); }
html.ui-b #mini-dock::before { border-color: rgba(160, 210, 255, .55); }
html.ui-b .hud-btn { background: rgba(30, 40, 90, .5); border: 1px solid rgba(220, 235, 255, .42);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 10px rgba(140, 200, 255, .22), 0 4px 12px rgba(0, 0, 0, .35); }
html.ui-b .hud-btn:hover { border-color: #fff; box-shadow: 0 0 16px rgba(160, 220, 255, .55), 0 4px 12px rgba(0, 0, 0, .35); }
html.ui-b :is(body.fpv #mini-fpv, #cam-clip.on) { border-color: var(--b-ice); color: #fff; }
html.ui-b .hb-slot { box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(220, 235, 255, .16), 0 0 12px rgba(140, 200, 255, .18); }
html.ui-b .hb-cd { color: #dff4ff; }

/* ---------- target, cast bars, zone name, toasts ---------- */
html.ui-b #target-frame { border-radius: 14px; border-color: transparent;
  background: linear-gradient(90deg, rgba(255, 120, 140, 0), rgba(255, 150, 170, .9) 50%, rgba(255, 120, 140, 0)) top / 100% 1px no-repeat, var(--b-glass-light);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--b-ring), 0 10px 24px rgba(4, 6, 24, .45); }
html.ui-b #tf-name { font-size: 18px; }
html.ui-b #tf-hp { background: rgba(10, 12, 30, .55); border-color: rgba(220, 235, 255, .3); }
html.ui-b #tf-fill { background: linear-gradient(90deg, #c0283f, #ff5f7a 60%, #ffc2cc); box-shadow: 0 0 8px rgba(255, 110, 140, .55); }
html.ui-b #cast-bar { border-color: rgba(220, 235, 255, .5); background: rgba(14, 18, 44, .6); }
html.ui-b #cast-fill { background: linear-gradient(90deg, #6f8cff, #9fe4ff 60%, #fff); box-shadow: 0 0 10px rgba(159, 228, 255, .8); }
html.ui-b #zt-name { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: #fff;
  text-shadow: 0 0 22px rgba(150, 200, 255, .65), 0 2px 10px rgba(0, 0, 0, .7); }
html.ui-b #zt-sub { color: var(--b-ice-soft); }
html.ui-b .zt-rule { background: var(--b-edge); box-shadow: 0 0 8px rgba(160, 220, 255, .6); }
html.ui-b .toast { background: var(--b-glass-light); border-color: rgba(200, 222, 255, .25); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; }
html.ui-b .xp-drop { background: var(--b-glass-light); border-color: rgba(200, 222, 255, .25); color: #cfeeff; border-radius: 999px; }
html.ui-b #dlg-name { font-size: 21px; }
html.ui-b #death-flash span { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }

/* ---------- the level dial in ice (CSS stop-color beats the SVG's own attribute) ---------- */
html.ui-b #dial-arc-g stop:nth-child(1) { stop-color: #5f7cf0; }
html.ui-b #dial-arc-g stop:nth-child(2) { stop-color: #9fe4ff; }
html.ui-b #dial-arc-g stop:nth-child(3) { stop-color: #ffffff; }
html.ui-b :is(.dial-rim, .dial-tick, .dial-inner) { stroke: #bcd8ff; }
html.ui-b .dial-halo { stroke: #bfe6ff; }
html.ui-b .dial-tip { fill: #fff; stroke: var(--b-ice); }
html.ui-b #level-orb::before { background: radial-gradient(circle, rgba(140, 200, 255, .3) 0%, rgba(140, 200, 255, .12) 52%, rgba(140, 200, 255, 0) 72%); }
html.ui-b .orb-mid b { background: linear-gradient(180deg, #ffffff 20%, #cfeeff 60%, #8fbfff 100%); -webkit-background-clip: text; background-clip: text;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }

/* ---------- the select screen: the roster frosted over the night sky ---------- */
html.ui-b #sel-panel { background: var(--b-specks), linear-gradient(180deg, rgba(38, 44, 96, .5), rgba(12, 14, 38, .7));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-left: 1px solid rgba(200, 222, 255, .22); box-shadow: -18px 0 44px rgba(4, 6, 24, .45); }
html.ui-b #panel-head h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; letter-spacing: 7px;
  background: linear-gradient(180deg, #ffffff 25%, #cfeeff 65%, #8fbfff 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 0 12px rgba(150, 200, 255, .45)); }
html.ui-b .tagline, html.ui-b #sel-sub { color: #aebbdc; }
html.ui-b #sel-name { font-size: clamp(26px, 3.9vw, 44px); letter-spacing: .5px; }
html.ui-b #sel-name::after { background: var(--b-edge); box-shadow: 0 0 8px rgba(160, 220, 255, .6); }
html.ui-b #sel-rarity { color: var(--b-ice-soft); }
html.ui-b #sel-traits-fold summary::before { background: radial-gradient(circle, #fff, #9fe4ff 60%); border-radius: 50%; transform: none; }
html.ui-b #sel-traits { background: var(--b-edge) top / 100% 1px no-repeat, var(--b-specks), var(--b-glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--b-ring), 0 12px 28px rgba(4, 6, 24, .45); color: #d6def5; }
html.ui-b :is(#roster-search, #alias-input, #world-select, #sync-input, #sync-code) {
  background: rgba(14, 18, 44, .55); border-color: rgba(200, 222, 255, .24); color: #fff; }
html.ui-b :is(#roster-search, #alias-input, #world-select, #sync-input):focus { border-color: rgba(200, 235, 255, .75); box-shadow: 0 0 0 3px rgba(150, 210, 255, .16), 0 0 14px rgba(140, 200, 255, .3); }
html.ui-b :is(#sel-random, #sel-sort, #about-mini) { background: rgba(30, 40, 90, .45); border-color: rgba(220, 235, 255, .35); }
html.ui-b :is(#sel-random, #sel-sort, #about-mini):hover { border-color: #fff; box-shadow: 0 0 12px rgba(160, 220, 255, .45); }
html.ui-b .rt { border-color: rgba(200, 222, 255, .16); }
html.ui-b :is(.rt.sel, .rt[data-tier].sel) { border-color: #fff;
  box-shadow: 0 0 0 1px #fff, 0 0 16px rgba(160, 220, 255, .75), 0 0 32px rgba(140, 180, 255, .35); }
html.ui-b .rt .rt-save { background: rgba(30, 40, 90, .8); color: #fff; box-shadow: 0 0 8px rgba(140, 200, 255, .6); border: 1px solid rgba(220, 235, 255, .55);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11px; }
html.ui-b #sel-play { border: 1px solid rgba(225, 238, 255, .75); border-radius: 999px;
  background: var(--b-edge) top / 70% 1px no-repeat border-box, var(--b-specks), var(--b-glass-light);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: b-play 3.2s ease-in-out infinite; }
html.ui-b #sel-play::after { border-radius: 999px; border-color: rgba(220, 235, 255, .16); }
html.ui-b #play-label { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 22px; letter-spacing: 7px;
  color: #fff; text-shadow: 0 0 14px rgba(150, 210, 255, .8), 0 1px 2px rgba(0, 0, 0, .6); }
@keyframes b-play {
  0%, 100% { box-shadow: 0 0 14px rgba(140, 200, 255, .3), 0 10px 26px rgba(4, 6, 24, .5); }
  50% { box-shadow: 0 0 30px rgba(170, 225, 255, .65), 0 10px 26px rgba(4, 6, 24, .5); } }
html.ui-b #entry-thumb { border-color: #fff; box-shadow: 0 0 0 4px rgba(150, 210, 255, .35), 0 0 22px rgba(150, 210, 255, .55); }
html.ui-b #entry-charname::after { background: var(--b-edge); }
html.ui-b .entry-label { color: var(--b-ice-soft); }
html.ui-b .world-row { background: rgba(150, 190, 255, .05); border-color: rgba(200, 222, 255, .16); }
html.ui-b .world-row.sel { background: rgba(150, 210, 255, .12); border-color: rgba(200, 235, 255, .6); box-shadow: inset 0 -2px 0 var(--b-ice); }
html.ui-b .w-bar i { background: linear-gradient(90deg, #6f8cff, #9fe4ff); }
html.ui-b .sort-item.on { background: rgba(150, 210, 255, .14); color: #fff; box-shadow: inset 2px 0 0 var(--b-ice); }

/* the panels are glass now: a phone with the reduced-motion or low-power wish gets them a little more solid */
@media (prefers-reduced-transparency: reduce) {
  html.ui-b :is(#stats-panel, #quest-log, #inv-panel, #bank-panel, #shop-panel, #map-panel, #dialogue, #settings-panel, #help-panel,
    #cook-panel, #home-panel, #forge-panel, #mkt-panel, #quest-tracker, #sel-panel) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* the prompt's words are their own span, which the HUD-wide font rule names directly - hand them the pill's font */
html.ui-b :is(#wp-prompt, #door-prompt, #mkt-prompt) .pr-label { font: inherit; }