/* Valforge — objets peints, matières réalistes et commandes discrètes. */
#vf-icon-atlas { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.vf-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -.2em;
  fill: none;
  stroke: none;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #05050bae);
}
.vf-icon use { pointer-events: none; }
.vf-icon-art { width: 1.35em; height: 1.35em; vertical-align: -.28em; filter: drop-shadow(0 2px 2px #03050ac0); }
.vf-icon-check, .vf-icon-close, .vf-icon-back, .vf-icon-next,
.vf-icon-up, .vf-icon-down, .vf-icon-chevron { filter: none; }
.vf-icon-star, .vf-icon-star-empty, .vf-icon-moon { width: 1em; height: 1em; vertical-align: -.12em; }
[data-vf-icon] { display: inline-flex; align-items: center; justify-content: center; }
.hub-bottom-bar .bottom-menu-item > span { display: grid; place-items: center; height: 30px; }
.hub-bottom-bar .bottom-menu-item .vf-icon { width: 30px; height: 30px; }
.bottom-menu-item.active .vf-icon { filter: drop-shadow(0 0 5px #d5b36865); }
.menu-tile > span { display: grid; place-items: center; width: 52px; height: 49px; }
.menu-tile .vf-icon { width: 46px; height: 46px; transition: filter .2s ease; }
.menu-tile:hover .vf-icon { filter: drop-shadow(0 0 6px #d5b36850); }
.currency-pill .vf-icon, .sheet-wallet .vf-icon { width: 24px; height: 24px; }
.royal-icon .vf-icon { width: 20px; height: 20px; }
.hub-power-icon .vf-icon { width: 24px; height: 28px; }
.portal-core { display: grid; place-items: center; }
.portal-core .vf-icon { width: 92px; height: 92px; filter: drop-shadow(0 0 20px #aa80db65); }
.login-icon .vf-icon { width: 20px; height: 20px; }
.shield-badge .vf-icon { width: 13px; height: 13px; margin-right: 2px; }
.float-num .vf-icon { width: .85em; height: .85em; }
.skill-banner .vf-icon, .toast .vf-icon { margin-inline: .12em; }
.stat-icon .vf-icon { width: 24px; height: 24px; }
.ranking-portrait-fallback .vf-icon { width: 65%; height: 65%; }
.faction-emblem .vf-icon { width: 100%; height: 100%; }
.btn-back .vf-icon { width: 18px; height: 18px; }
.btn .vf-icon { vertical-align: -.22em; }
.boss-defeated .vf-icon { width: 1em; height: 1em; }

/* Masques embarqués pour les cadres, y compris en ouverture locale file://. */
:root {
  --vf-mask-royal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%203%2019%2012%2028%2016%2019%2019%2016%2029%2013%2019%204%2016%2013%2012Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m16%207%203%209-3%209-3-9Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8%2016h16%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-wings: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2022C6%2023%201%2015%202%205l9%207%204%207%201-9%201%209%204-7%209-7c1%2010-4%2018-13%2017l-1%208Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5%2012l6%206M27%2012l-6%206M8%2021l4%201m12-1-4%201%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-beast: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2013c-4%200-4%203-8%206-10%2010%200%2014%208%208%208%206%2018%202%208-8-4-3-4-6-8-6Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M3%209%206%203l3%207-3%204Zm8-5%203-3%201%208-3%203Zm7%205%201-8%203%203%201%208Zm5%201%203-7%203%206-3%205Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-leaf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M28%203C5%200-2%2018%2010%2026%2022%2034%2031%2019%2028%203Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%2030%2025%207M10%2024l-1-9m7%203%209-2m-5-4V7%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-axe: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%203%204%202L11%2030l-4-2Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%202c4%205%2010%205%2015%206l-6%2010C6%2017%201%2013%203%209Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m6%207%204%205%208%202%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-forge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010h26l-4%206h-5v6l5%203v3H7v-3l5-3v-6H7Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M3%208h26v4H3Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M14%2017v6m4-6v6M10%2026h12%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-core: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%202%2012%207v14l-12%207-12-7V9Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m16%205%209%205v12l-9%205-9-5V10Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m16%209%206%207-6%207-6-7Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M16%202v7m12%200-6%207m6%207-6-7M16%2023v7M4%2023l6-7M4%209l6%207%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-skull: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2023C-7-2%2039-2%2025%2023l-3%201v6H10v-6Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M7%2012h7l-1%206H8Zm11%200h7l-1%206h-5Zm-2%207%203%204h-6Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M14%2026v4m4-4v4%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --vf-mask-shadow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M21%206C8%206%208%2024%2021%2026%204%2030-2%203%2021%206Z%22%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m18%2011%202%204%204%201-4%201-2%204-1-4-3-1%203-1Z%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.hero-race-frame { --race-mask: var(--vf-mask-royal); }
.hero-race-frame[data-faction="Néphilim"] { --race-mask: var(--vf-mask-wings); }
.hero-race-frame[data-faction="Bête"] { --race-mask: var(--vf-mask-beast); }
.hero-race-frame[data-faction="Elfe"] { --race-mask: var(--vf-mask-leaf); }
.hero-race-frame[data-faction="Orc"] { --race-mask: var(--vf-mask-axe); }
.hero-race-frame[data-faction="Nain"] { --race-mask: var(--vf-mask-forge); }
.hero-race-frame[data-faction="Ombre"] { --race-mask: var(--vf-mask-shadow); }
.hero-race-frame[data-faction="Mort-Vivant"] { --race-mask: var(--vf-mask-skull); }
.hero-race-frame[data-faction="Divinité"] { --race-mask: var(--vf-mask-royal); }
.hero-race-frame::after {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--race-accent);
  -webkit-mask: var(--race-mask) center / contain no-repeat;
  mask: var(--race-mask) center / contain no-repeat;
}
.nephilim-moon-track::before, .nephilim-moon-track::after {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: currentColor;
  -webkit-mask: var(--vf-mask-royal) center / contain no-repeat;
  mask: var(--vf-mask-royal) center / contain no-repeat;
}
.elf-card .nephilim-moon-track::before, .elf-card .nephilim-moon-track::after { content: ''; -webkit-mask-image: var(--vf-mask-leaf); mask-image: var(--vf-mask-leaf); }
.orc-card .nephilim-moon-track::before, .orc-card .nephilim-moon-track::after { content: ''; -webkit-mask-image: var(--vf-mask-axe); mask-image: var(--vf-mask-axe); }
.dwarf-card .nephilim-moon-track::before, .dwarf-card .nephilim-moon-track::after { content: ''; -webkit-mask-image: var(--vf-mask-forge); mask-image: var(--vf-mask-forge); }
.shadow-card .nephilim-moon-track::before, .shadow-card .nephilim-moon-track::after { content: ''; -webkit-mask-image: var(--vf-mask-shadow); mask-image: var(--vf-mask-shadow); }
.undead-card .nephilim-moon-track::before, .undead-card .nephilim-moon-track::after { content: ''; -webkit-mask-image: var(--vf-mask-skull); mask-image: var(--vf-mask-skull); }
.divine-card .nephilim-moon-track::before, .divine-card .nephilim-moon-track::after { content: ''; -webkit-mask-image: var(--vf-mask-royal); mask-image: var(--vf-mask-royal); }
@media (max-width: 700px), (orientation: landscape) and (max-height: 700px) {
  .hub-bottom-bar .bottom-menu-item > span { height: 26px; }
  .hub-bottom-bar .bottom-menu-item .vf-icon { width: 26px; height: 26px; }
  .menu-tile > span { height: 43px; }
  .menu-tile .vf-icon { width: 40px; height: 40px; }
}