.utopia-wordmark { font-family: var(--font-mark); font-size: 1.15rem; font-weight: 500; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--pale); white-space: nowrap; }
.utopia-auth-intro { display:grid; gap:1rem; }
.utopia-auth-language { position:absolute; top:max(1rem, env(safe-area-inset-top)); right:max(1rem, env(safe-area-inset-right)); z-index:30; display:flex; align-items:center; gap:clamp(.6rem, 2vw, 1.25rem); }
.utopia-auth-site { color:var(--dim); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.utopia-auth-site:hover, .utopia-auth-site:focus-visible { color:var(--pale); }
.fi-simple-layout:has(.utopia-auth-language) { position:relative; padding-top:4rem; }
.fi-simple-layout:has(.fi-simple-layout-header) > .utopia-auth-language { right:calc(max(1rem, env(safe-area-inset-right)) + 3.5rem); min-height:2.5rem; display:flex; align-items:center; }
.fi-simple-layout:has(.utopia-auth-language) > .fi-simple-layout-header { top:max(1rem, env(safe-area-inset-top)); right:max(1rem, env(safe-area-inset-right)); height:2.5rem; padding:0; z-index:30; }
.fi-simple-layout:has(.utopia-auth-language) .fi-simple-layout-header .fi-user-menu-trigger { width:2.5rem; height:2.5rem; display:flex; align-items:center; justify-content:center; }
.utopia-auth-switch { display:flex; padding:4px; border:1px solid rgba(232,180,92,.2); border-radius:4px; gap:4px; }
.utopia-auth-switch a { flex:1; padding:.65rem 1rem; border-radius:3px; text-align:center; font-weight:600; color:var(--dim); transition:background .15s,color .15s; }
.utopia-auth-switch a.is-active { background:#e8b45c; color:#18181b; }
.utopia-auth-switch a:not(.is-active):hover { background:rgba(232,180,92,.08); color:var(--pale); }
.fi-sidebar-header { background: #0b0b12; }
.utopia-site-links { --gold: #e8b45c; --gold-soft: rgba(232,180,92,.22); --pale: var(--pale); display:flex; align-items:center; gap:clamp(.9rem, 2.5vw, 2rem); }
.utopia-site-links > a { color:var(--dim);  font-size:.82rem !important; font-weight:400 !important; line-height:1.25; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.utopia-site-links > a:hover, .utopia-site-links > a:focus-visible { color:var(--pale); }
.utopia-site-links .utopia-discord-link { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; letter-spacing:0; }
.utopia-site-links .utopia-discord-link:hover { color:var(--pale); background:rgba(232,180,92,.1); }
.fi-topbar .fi-user-menu-trigger { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border:1px solid transparent; border-radius:3px; color:var(--dim); transition:color .2s ease, border-color .2s ease; }
.fi-topbar .fi-user-menu-trigger .fi-avatar { width:1.5rem; height:1.5rem; border:0; border-radius:.25rem; padding:0; box-shadow:none; }
.fi-body { --topbar-height:4.25rem; }
.fi-topbar { min-height:4.25rem; background:rgba(5,5,10,.82) !important; border-bottom:1px solid rgba(232,180,92,.1); box-shadow:none !important; backdrop-filter:blur(10px); }
.fi-topbar .fi-avatar { border:0 !important; box-shadow:none !important; }
.fi-topbar .fi-user-menu-trigger { background:transparent !important; box-shadow:none !important; }
.fi-topbar .fi-user-menu-trigger:hover, .fi-topbar .fi-user-menu-trigger:focus-visible, .fi-topbar .fi-user-menu-trigger[aria-expanded='true'] { color:var(--pale); border-color:rgba(232,180,92,.22); }
.fi-topbar .fi-user-menu .fi-dropdown-panel { background:rgba(8,8,12,.96); border:1px solid rgba(232,180,92,.22); border-radius:4px; backdrop-filter:blur(10px); }
.fi-topbar .fi-user-menu .fi-dropdown-list-item { color:var(--dim); }
.fi-topbar .fi-user-menu .fi-dropdown-list-item:hover { background:rgba(232,180,92,.1); color:var(--pale); }
@media(max-width:480px) { .utopia-site-links { gap:.9rem; } .utopia-site-links > a:not(.utopia-discord-link) { font-size:.7rem; letter-spacing:.08em; } }/* Shared Utopia tokens also apply to record actions outside the top bar. */
:root { --gold: #e8b45c; --gold-soft: rgba(232,180,92,.22); --pale: var(--pale); }
html { scrollbar-gutter: stable; }
html.dark .fi-body { background-color:#05050a; min-height:100vh; isolation:isolate; }
html.dark .fi-body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /* Quasi nero: l'illustrazione si intuisce dietro le schede invece di
     competere con quello che c'e' scritto sopra. */
  background:linear-gradient(180deg, rgba(5,5,10,.985), rgba(5,5,10,.995)), url('../images/lineage-background.jpg') center center / cover no-repeat;
}
.fi-topbar .fi-avatar { width:2.25rem; height:2.25rem; border:1px solid rgba(232,180,92,.6); border-radius:3px; padding:2px; background:#05050a; box-shadow:0 0 0 3px rgba(232,180,92,.08); }
.utopia-site-links svg { flex-shrink:0; position:relative; z-index:1; }

.utopia-language-switcher { position:relative; }
.utopia-language-toggle { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; background:transparent; border:1px solid transparent; border-radius:3px; color:var(--dim); font:inherit; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:color .2s ease,border-color .2s ease; }
.utopia-language-toggle:hover, .utopia-language-toggle[aria-expanded='true'] { color:var(--pale); border-color:rgba(232,180,92,.22); }
.utopia-language-toggle svg { transition:transform .2s ease; }
.utopia-language-toggle[aria-expanded='true'] svg { transform:rotate(180deg); }
.utopia-language-menu { position:absolute; top:calc(100% + .5rem); right:0; z-index:30; display:grid; min-width:11rem; padding:.3rem; background:rgba(8,8,12,.96); border:1px solid rgba(232,180,92,.22); border-radius:4px; backdrop-filter:blur(10px); }
[x-cloak] { display:none !important; }
.utopia-language-menu a { display:flex; align-items:baseline; gap:.6rem; padding:.5rem .6rem; border-radius:3px; color:var(--dim); text-decoration:none; font-size:.82rem; }
.utopia-language-menu a:hover { background:rgba(232,180,92,.1); color:var(--pale); }
.utopia-language-menu a.is-current { color:#e8b45c; }
.utopia-language-menu a span { min-width:2.2rem; font-size:.7rem; letter-spacing:.16em; }
.utopia-language-menu a small { font-size:.82rem; }
.fi-sidebar-nav .fi-sidebar-item:has(> a[href$="/rankings"]),
.fi-sidebar-nav .fi-sidebar-item:has(> a[href$="/profile"]) { margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(232,180,92,.14); }

/* Keep the simple login card readable on narrow screens. */
.utopia-mobile-drawer { display:none; }
@media (max-width:1023px) {
  .fi-topbar .fi-topbar-start { display:flex; margin-inline:0; }
  .fi-topbar .fi-topbar-start .fi-logo { margin-inline:0; }
  .fi-topbar .utopia-wordmark { font-size:1rem; letter-spacing:.26em; }
  .fi-sidebar:has(.utopia-mobile-drawer) { width:min(20rem, calc(100vw - 2.5rem)); background:#0b0b12; }
  .fi-sidebar:has(.utopia-mobile-drawer) .fi-sidebar-header { background:#0b0b12; box-shadow:none; }
  .fi-sidebar:has(.utopia-mobile-drawer) .fi-sidebar-nav { padding:1.25rem 1.5rem; }
  .fi-topbar .utopia-site-links, .fi-topbar .fi-user-menu { display:none; }
  .utopia-mobile-drawer { display:grid; gap:.75rem; padding:0 1rem max(1rem, env(safe-area-inset-bottom)); margin-top:auto; background:#0b0b12; }
  .utopia-drawer-links { display:grid; gap:.25rem; }
  .utopia-drawer-links a { display:flex; align-items:center; gap:.75rem; min-height:44px; padding:.625rem .75rem; color:var(--dim); font-size:.875rem; text-decoration:none; border-radius:4px; }
  .utopia-drawer-links a:hover, .utopia-drawer-links a:focus-visible { background:rgba(232,180,92,.06); color:var(--pale); }
  .utopia-drawer-links svg { width:1.25rem; height:1.25rem; flex-shrink:0; }
  .utopia-drawer-arrow { margin-left:auto; color:var(--dim); }
  .utopia-drawer-language { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 .75rem; font-size:.8125rem; color:var(--dim); }
  .utopia-mobile-drawer > .fi-user-menu { background:rgba(232,180,92,.04); border-radius:4px; }
  .utopia-mobile-drawer .utopia-site-links { display:flex; justify-content:space-between; gap:.75rem; }
  .utopia-mobile-drawer .utopia-language-menu { top:auto; bottom:calc(100% + .5rem); }
  .utopia-mobile-drawer .fi-user-menu-trigger { display:flex; align-items:center; gap:.75rem; width:100%; min-height:44px; padding:.5rem .6rem; background:transparent; border:1px solid transparent; border-radius:3px; color:var(--dim); }
  .utopia-mobile-drawer .fi-user-menu-trigger:hover, .utopia-mobile-drawer .fi-user-menu-trigger:focus-visible { border-color:rgba(232,180,92,.22); color:var(--pale); }
  .utopia-mobile-drawer .fi-avatar { width:2rem; height:2rem; border:0; border-radius:3px; }
  .utopia-mobile-drawer .fi-dropdown-panel { background:rgba(8,8,12,.98); border:1px solid rgba(232,180,92,.22); border-radius:4px; }
}
@media (max-width: 639px) {
  .fi-simple-layout .fi-simple-main {
    width: calc(100% - 2rem);
    margin-inline: 1rem;
    padding-inline: 1.25rem;
    border-radius: 4px;
  }

  .fi-simple-layout .fi-simple-main .fi-form {
    width: 100%;
  }

  .fi-page-content {
    padding-inline: .75rem;
  }

  .fi-ta-ctn {
    border-radius: 4px;
  }
  .fi-ta-table-stacked-on-mobile .fi-ta-cell-character-identity {
    grid-column: 1 / -1;
  }
  .fi-ta-cell-character-identity > .fi-ta-cell-label { display: none; }
}

/* Admin: the navigation groups (Utopia, Coin e voti, Gioco) in the site's
   small spaced capitals, so they read as headings and not as links. */
.fi-sidebar-group-label { font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.fi-sidebar-group + .fi-sidebar-group { margin-top: .5rem; }
/* The stats cards: the number in the display font, like the balance on the
   account pages. */
.fi-wi-stats-overview-stat-value { font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
html.dark .fi-wi-stats-overview-stat { background: rgba(8, 8, 12, 0.92); box-shadow: inset 0 0 0 1px var(--gold-faint); }
/* A widget's group (Server, Utopia, Gioco) is a heading over its cards, not
   a card itself: no frame, and the heading the size of a section title. */
html.dark .fi-section.fi-section-not-contained { background: transparent; box-shadow: none; }
.fi-section-not-contained > .fi-section-header .fi-section-header-heading { font-size: 1.35rem; }
.fi-page-main { row-gap: 2rem; }
/* Figures in tables line up like the site's: lining, same width. */
.fi-ta-text { font-variant-numeric: lining-nums tabular-nums; }
/* I titoli col carattere del sito: sulle pagine il grassetto sans di Filament
   era la differenza che si notava di piu' fra pannello e l2utopia.com. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

.fi-header-heading { font-size: 2rem; line-height: 1.15; color: var(--pale); }

@media (max-width: 640px) {
  .fi-header-heading { font-size: 1.6rem; }
}

/* Pagina di accesso: il titolo col carattere del sito e la scheda nel nero di
   l2utopia.com, con il filo d'oro al posto del grigio di serie. */
.fi-simple-header-heading {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--pale);
}

.fi-simple-main {
  background: rgba(8, 8, 12, 0.92);
  border: 1px solid rgba(232, 180, 92, 0.18);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Bottoni come la chiamata all'azione del sito: fondo scuro, filo e scritta
   d'oro, maiuscoletto spaziato. Filament li dipinge pieni d'ambra, che nel
   nero del pannello urla piu' di quanto serva.
   Non tocca i bottoni di pericolo o di conferma, che restano riconoscibili. */
html.dark .fi-btn.fi-color-primary {
  background: rgba(232, 180, 92, 0.08);
  box-shadow: inset 0 0 0 1px rgba(232, 180, 92, 0.45);
  color: #e8b45c;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

html.dark .fi-btn.fi-color-primary:hover,
html.dark .fi-btn.fi-color-primary:focus-visible {
  background: rgba(232, 180, 92, 0.16);
  box-shadow: inset 0 0 0 1px #e8b45c;
  color: var(--pale);
}

html.dark .fi-btn.fi-color-primary .fi-icon { color: currentColor; }

/* Sul telefono saldo e pulsante stanno sulla stessa riga, ai due capi: due
   righe per due cose cosi' corte sono uno spreco di schermo. */

/* The sign-in and register card, as on the site: the frame in the corners,
   the two pages as quiet tabs, and the one thing to press drawn as the site's
   call to action, so it is the loudest thing on the card. */
.fi-simple-main { position: relative; }
.fi-simple-main::after {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  opacity: 0.6;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 0 / 1px 10px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / 1px 10px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 1px 10px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 1px 10px no-repeat;
}

.fi-simple-header-heading { font-size: 1.9rem; }

.utopia-auth-switch { padding: 0; gap: 0; border: 0; border-bottom: 1px solid var(--gold-faint); border-radius: 0; }
.utopia-auth-switch a { margin-bottom: -1px; padding: .6rem 0; border-radius: 0; border-bottom: 1px solid transparent; font-size: .72rem; font-weight: 400; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: var(--dim); }
.utopia-auth-switch a.is-active { background: transparent; color: var(--pale); border-bottom-color: var(--gold); }
.utopia-auth-switch a:not(.is-active):hover { background: transparent; color: var(--text); }
.utopia-auth-intro > p { font-size: .9rem; color: var(--dim); }

.fi-simple-main .fi-fo-field-label-content { color: var(--text); font-weight: 500; }
.fi-simple-main .fi-link { font-weight: 400; }
html.dark .fi-simple-main .fi-input-wrp { border-radius: 3px; background: rgba(5, 5, 10, 0.7); }

html.dark .fi-simple-main .fi-form-actions .fi-btn.fi-color-primary,
html.dark .fi-simple-main .fi-ac .fi-btn.fi-color-primary {
  position: relative;
  padding: 1rem 1.5rem;
  border-radius: 0;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  background: radial-gradient(120% 150% at 50% 50%, rgba(232, 180, 92, 0.18), rgba(5, 5, 10, 0.88) 68%);
  box-shadow: inset 0 0 0 1px var(--gold-soft), inset 0 0 22px rgba(232, 180, 92, 0.12);
}

html.dark .fi-simple-main .fi-form-actions .fi-btn.fi-color-primary::after,
html.dark .fi-simple-main .fi-ac .fi-btn.fi-color-primary::after {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  opacity: 0.75;
  transition: inset 0.3s ease, opacity 0.3s ease;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 0 / 1px 10px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / 1px 10px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 1px 10px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 10px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 1px 10px no-repeat;
}

html.dark .fi-simple-main .fi-form-actions .fi-btn.fi-color-primary:hover,
html.dark .fi-simple-main .fi-ac .fi-btn.fi-color-primary:hover {
  color: var(--pale);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 30px rgba(232, 180, 92, 0.22), 0 0 46px rgba(232, 180, 92, 0.25);
}

html.dark .fi-simple-main .fi-btn.fi-color-primary:hover::after { inset: 3px; opacity: 1; }

/* Filament's cards and fields, on the site's corners. */
html.dark .fi-section, html.dark .fi-ta-ctn, html.dark .fi-wi-stats-overview-stat { border-radius: 4px; }
html.dark .fi-input-wrp { border-radius: 3px; }
/* The switch and its line run the width of the form, flush left like it:
   the header centres its children, which shrank the tabs to their words. */
.utopia-auth-intro { align-self: stretch; }
.utopia-auth-intro > p { text-align: left; }
.utopia-auth-switch a { flex: 1 1 0; }

/* Cards in the site's black with a gold hairline, not Filament's grey: on
   l2utopia.com a panel is darker than the page around it, never lighter. */
html.dark .fi-section,
html.dark .fi-ta-ctn,
html.dark .fi-wi-chart .fi-section {
  background: rgba(8, 8, 12, 0.92);
  box-shadow: inset 0 0 0 1px var(--gold-faint);
}
html.dark .fi-section-header { border-color: var(--gold-faint); }
html.dark .fi-sidebar-item-btn:hover,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: rgba(232, 180, 92, 0.06); border-radius: 3px; }

/* The card's second button (Back on the settings) as the site's quiet one,
   the same height as the call to action beside it. */
html.dark .fi-simple-main .fi-form-actions .fi-btn:not(.fi-color-primary),
html.dark .fi-simple-main .fi-ac .fi-btn:not(.fi-color-primary) {
  padding: 1rem 1.5rem;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--gold-faint);
  color: var(--dim);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
}
html.dark .fi-simple-main .fi-ac .fi-btn:not(.fi-color-primary):hover { color: var(--pale); box-shadow: inset 0 0 0 1px var(--gold-soft); }

/* Filament's notices (password reset sent, settings saved) in the site's
   dress: the dark card with a gold hairline, the title in the display font. */
html.dark .fi-no-notification {
  background: rgba(8, 8, 12, .97);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  --tw-ring-shadow: 0 0 #0000;
}
html.dark .fi-no-notification-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--pale); }
html.dark .fi-no-notification-body { margin-top: .3rem; color: var(--text); font-size: .88rem; line-height: 1.55; }
html.dark .fi-no-notification-icon.fi-color-success { color: #7ab894; }
html.dark .fi-no-notification-icon.fi-color-danger { color: #c2685c; }
html.dark .fi-no-notification-close-btn { color: var(--dim); }