/* Galaxium account site. Same tokens, typography and controls as galaxium.games
   (website/dist: styles.css, portal.css, contact.css), written mobile first.
   No inline styles anywhere: the CSP allows only this file. */

@font-face { font-family: Ubuntu; src: url('/assets/fonts/Ubuntu-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Ubuntu; src: url('/assets/fonts/Ubuntu-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #0a0e18;
  --surface: #121a28;
  --ink: #f4f7fc;
  --muted: #a3afc0;
  --soft: #b8c6d6;
  --line: #ffffff19;
  --accent: #6accea;
  --accent-soft: #a7e4f6;
  --button: #b3e9f5;
  --danger: #ff7b6b;
  --danger-soft: #ffb3a8;
  --ok: #7dedb0;
  --warn: #dbb985;
  --font: Ubuntu, Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  background:
    radial-gradient(1500px 820px at 12% -10%, #1d4a7a4d, transparent 66%),
    radial-gradient(1200px 720px at 88% -4%, #15525e40, transparent 64%),
    radial-gradient(1000px 640px at 60% 18%, #2a215936, transparent 68%),
    radial-gradient(1.7px 1.7px at 38px 52px, #dbe9ff9e, transparent),
    radial-gradient(1.5px 1.5px at 196px 148px, #cfe2ff7a, transparent),
    radial-gradient(1.4px 1.4px at 118px 238px, #bcd8ff6b, transparent),
    radial-gradient(1.1px 1.1px at 28px 96px, #c8dcff52, transparent),
    radial-gradient(1.1px 1.1px at 122px 34px, #b9d2f44a, transparent),
    radial-gradient(1px 1px at 74px 122px, #aec8ec42, transparent),
    var(--bg);
  background-size:
    100% 820px, 100% 720px, 100% 640px,
    280px 280px, 280px 280px, 280px 280px,
    150px 150px, 150px 150px, 150px 150px,
    auto;
  background-repeat:
    no-repeat, no-repeat, no-repeat,
    repeat, repeat, repeat,
    repeat, repeat, repeat,
    no-repeat;
}

/* Until i18n.js has applied the visitor's language the page stays hidden, so
   it never flashes English first. Without JavaScript it appears after 3 s. */
html:not(.i18n-ready) body { opacity: 0; animation: reveal-untranslated 0s 3s forwards; }
@keyframes reveal-untranslated { to { opacity: 1; } }

a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
h1, h2, h3 { line-height: 1.15; }
::selection { background: #4276b7; color: #fff; }
:focus-visible { outline: 2px solid #b3dcff; outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }

.container { width: min(1040px, calc(100% - 32px)); margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px; background: #fff; color: #000; }
.skip-link:focus { top: 10px; }

.eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); }

/* --- Header --- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(1200px, calc(100% - 32px));
  margin-inline: auto;
  padding: 16px 0;
  border-bottom: 1px solid #c7deff21;
}

.wordmark {
  display: block;
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  color: #f4f8ff;
  text-shadow: 0 2px 16px #6fb9ff29;
}

.wordmark-mark { display: block; height: 1em; width: auto; max-width: none; }

.brand-subline {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .12em;
  white-space: nowrap;
  color: #8eafc9;
}

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

.header-logout {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #ffffff24;
  border-radius: 6px;
  background: #ffffff0c;
  color: #e8eef6;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  transition: background .2s ease, border-color .2s ease;
}
.header-logout:hover { background: #ffffff16; border-color: #afecff73; color: #fff; }
.header-logout:disabled { opacity: .6; cursor: progress; }

/* Language selector: identical to galaxium.games. */
.lang-switch { position: relative; flex-shrink: 0; z-index: 12; }

.lang-switch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px 0 14px;
  border: 1px solid #ffffff24;
  border-radius: 6px;
  background: #ffffff0c;
  color: #e8eef6;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lang-switch-toggle:hover,
.lang-switch.is-open .lang-switch-toggle { background: #ffffff16; border-color: #afecff73; color: #fff; }

.lang-switch-chevron {
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.lang-switch.is-open .lang-switch-chevron { margin-top: 2px; transform: rotate(225deg); }

.lang-switch-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  background: #101826f5;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px #00000073;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.lang-switch.is-open .lang-switch-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .18s ease, transform .18s ease; }
.lang-switch-menu li + li { margin-top: 2px; }
.lang-switch-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #c5d0dc;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
}
.lang-switch-menu button[aria-current="true"] { color: #b3e9f5; background: #b3e9f516; }
.lang-switch-menu button:hover { background: #ffffff12; color: #fff; }

/* --- Buttons and links --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid #afecff;
  border-radius: 3px;
  background: var(--button);
  color: #10202c;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .015em;
  text-align: center;
  box-shadow: 0 3px 20px #0003;
  transition: background .2s, transform .2s, border-color .2s, color .2s;
}
.button:hover { background: #d7f5ff; transform: translateY(-1px); }
.button:disabled { opacity: .65; cursor: progress; transform: none; }
.button-small { min-height: 44px; padding: 8px 16px; font-size: .9375rem; }
.button-block { width: 100%; }
.button-outline { background: #182433; border-color: #66849b; color: #fff; box-shadow: none; }
.button-outline:hover { background: #24384a; }
.button-ghost { background: transparent; border-color: transparent; color: var(--soft); box-shadow: none; }
.button-ghost:hover { background: #ffffff0f; color: #fff; }
.button-danger { background: #d9534a; border-color: #ff8f84; color: #fff; }
.button-danger:hover { background: #ec6157; }
.button-danger-outline { background: transparent; border-color: #ff7b6b8c; color: var(--danger-soft); box-shadow: none; }
.button-danger-outline:hover { background: #ff7b6b1a; color: #fff; }

/* A request in progress: buttons are disabled and the form is aria-busy. */
[aria-busy="true"] .button[type="submit"]::after,
.button.is-busy::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-button {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.link-button:hover { color: #fff; }
.link-button:disabled { color: #7d8b9c; text-decoration: none; cursor: default; }

.text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.text-link:hover { color: #fff; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent);
  font-size: .9375rem;
}
.back-link::before {
  content: '';
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.back-link:hover { color: #fff; }

/* --- Layout --- */
.account-main { flex: 1; padding-block: 24px 64px; }
.account-main:focus { outline: none; }

.app-message:not(:empty),
.form-message:not(:empty) {
  padding: 12px 14px;
  border-left: 2px solid var(--danger);
  background: #ff7b6b14;
  color: #ffd2cc;
  font-size: .9375rem;
}
.app-message:not(:empty) { margin-bottom: 20px; }

.flash:not(:empty) {
  padding: 12px 14px;
  border-left: 2px solid var(--ok);
  background: #7dedb012;
  color: #d3f8e4;
  font-size: .9375rem;
}
.view-dashboard > .flash:not(:empty) { margin-bottom: 20px; }

.card {
  min-width: 0;
  padding: 22px 18px;
  border: 1px solid #81cae438;
  background: #0c1728cf;
  box-shadow: 0 16px 50px #02071340;
}

.card h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: 0; }

/* --- Start-up and farewell --- */
.boot-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 520px;
  margin: 48px auto;
  padding: 36px 20px;
  border: 1px solid #81cae438;
  background: #0c1728cf;
  text-align: center;
}
.boot-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.boot-title { color: var(--soft); }
.boot-card p { color: var(--soft); }
.boot-noscript, .boot-error { color: #ffd2cc; }

.spinner {
  width: 30px;
  height: 30px;
  border: 2px solid #6accea40;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* --- Log in --- */
.login-panel {
  display: grid;
  gap: 24px;
  padding: 24px 16px;
  border: 1px solid #7e9dbf39;
  border-bottom: 2px solid var(--accent);
  background: linear-gradient(100deg, #0a1424f5, #0a1424c4), url('/assets/hero-earth.webp') center / cover;
}
.login-intro h1 { margin: 14px 0 16px; font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.login-intro > p:last-child { max-width: 460px; color: #bdcad9; font-size: 1.0625rem; }

/* --- Forms --- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label, .verify-form label { font-size: .9375rem; font-weight: 700; color: #dce5ef; }

.field input, .verify-form input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #7e9dbf59;
  border-radius: 3px;
  background: #08111ee6;
  color: var(--ink);
  font-size: 1rem;
  transition: border-color .2s ease, background .2s ease;
}
.field input:hover, .verify-form input:hover { border-color: #9fc4dd8c; }
.field input:focus, .verify-form input:focus { border-color: var(--accent); background: #0a1626; outline: none; box-shadow: 0 0 0 3px #6accea33; }
.field input[aria-invalid="true"], .verify-form input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px #ff7b6b26; }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 84px; }
.reveal {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: 72px;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid #7e9dbf33;
  background: transparent;
  color: var(--accent);
  font-size: .875rem;
  font-weight: 700;
}
.reveal:hover { color: #fff; }

.field-hint, .form-note, .card-note { color: var(--muted); font-size: .875rem; }
.form-note .text-link { white-space: nowrap; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.current-value { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.current-label { font-size: .8125rem; letter-spacing: .04em; color: var(--muted); }

.email-address { overflow-wrap: anywhere; }

/* --- Change password / email / delete --- */
.view-form { max-width: 620px; margin-inline: auto; }
.view-form h1 { margin: 8px 0 12px; font-size: clamp(1.875rem, 6vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; }
.view-intro { margin-bottom: 22px; color: var(--soft); }

.danger-note {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
  padding: 18px;
  border-left: 2px solid var(--danger);
  background: #ff7b6b0f;
  color: #f1d8d4;
}
.danger-note ul { padding-left: 20px; }
.danger-note li + li { margin-top: 6px; }
.danger-note li::marker { color: var(--danger); }
.danger-note .text-link { justify-self: start; padding-block: 4px; }

/* --- Overview --- */
.profile-hero { display: grid; gap: 10px; margin: 8px 0 24px; }
.profile-hero h1 {
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 3px 12px;
  border: 1px solid #7e9dbf47;
  border-radius: 999px;
  background: #0c1728b3;
  color: #dce5ef;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.faction-name { display: inline-flex; align-items: center; gap: 8px; }
.faction-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #8ea3b8; }
[data-faction="solaris"] .faction-dot { background: #ff6a3c; box-shadow: 0 0 10px #ff6a3c80; }
[data-faction="earth"] .faction-dot { background: #3d9fff; box-shadow: 0 0 10px #3d9fff80; }
[data-faction="vega"] .faction-dot { background: #7dedb0; box-shadow: 0 0 10px #7dedb080; }

.verify-banner {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
  padding: 18px;
  border-left: 2px solid var(--warn);
  background: #b68c3f17;
}
.verify-banner h2 { font-size: 1.125rem; font-weight: 700; color: #f3e3c8; }
.verify-banner > p:not(.flash):not(.form-message) { color: #d7c8b1; }
.verify-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.verify-form { display: grid; gap: 8px; }
.verify-row { display: flex; gap: 8px; }
.verify-row input { flex: 1; min-width: 0; max-width: 220px; font-size: 1.25rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.verify-form .field-hint { color: #c9bba5; }
.verify-form .link-button { justify-self: start; }

.dash-grid { display: grid; gap: 16px; }

.profile-list { display: grid; margin-top: 12px; }
.profile-list > div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.profile-list > div:first-child { border-top: 0; }
.profile-list dt { font-size: .8125rem; letter-spacing: .04em; color: var(--muted); }
.profile-list dd { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.email-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.badge.is-verified { background: #7dedb01f; color: var(--ok); }
.badge.is-unverified { background: #dbb98521; color: #f0d2a2; }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head .link-button { min-height: 40px; }

.balance-list { display: grid; gap: 10px; margin: 12px 0 14px; padding: 0; list-style: none; }
.balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--balance, var(--accent));
  background: #08111e99;
}
.balance-credits { --balance: #f2c94c; }
.balance-nova { --balance: #6accea; }
.balance-prisma { --balance: #c08cff; }
.balance-label { color: var(--soft); font-size: .9375rem; }
.balance-value {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}

.settings { margin-top: 32px; }
.settings h2 { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 700; letter-spacing: -.025em; }
.settings-list { margin-top: 12px; padding: 0; list-style: none; }
.settings-row {
  display: grid;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.settings-copy h3 { margin-bottom: 4px; font-size: 1.0625rem; }
.settings-copy p { color: var(--soft); font-size: .9375rem; }
.settings-row .button { justify-self: start; }
.settings-danger h3 { color: var(--danger-soft); }

/* --- Footer (same as galaxium.games) --- */
.site-footer { padding: 44px 0 28px; border-top: 1px solid #ffffff10; background: #05080f; }
.footer-inner { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 32px; }
.footer-wordmark { font-size: .95rem; line-height: 1; color: #f2f7ff; }
.footer-mark { height: .95em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { display: inline-block; padding-block: 6px; font-size: .8125rem; color: #c5ced8; }
.footer-links a:hover { color: #fff; }
.footer-bar { padding-top: 22px; border-top: 1px solid #ffffff10; color: #6d7a8c; font-size: .75rem; }

/* --- Narrow phones (320-380px): the logout label must fit beside the logo --- */
@media (max-width: 380px) {
  .wordmark { font-size: 1rem; }
  .brand-subline { font-size: .625rem; letter-spacing: .1em; }
  .lang-switch-toggle { gap: 6px; padding: 0 9px 0 11px; }
  .header-logout { padding: 0 10px; font-size: .75rem; }
}

/* --- Wider screens --- */
@media (min-width: 541px) {
  .container { width: min(1040px, calc(100% - 48px)); }
  .site-header, .footer-inner { width: min(1200px, calc(100% - 48px)); }
  .site-header { padding: 20px 0; gap: 20px; }
  .wordmark { font-size: 1.4rem; }
  .brand-subline { font-size: .75rem; letter-spacing: .16em; margin-top: 8px; }
  .header-actions { gap: 12px; }
  .header-logout { padding: 0 16px; font-size: .875rem; }
  .card { padding: 26px 24px; }
  .login-panel { padding: 32px; }
  .settings-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
  .settings-row .button { justify-self: end; }
  .verify-banner { padding: 22px 24px; }
}

@media (min-width: 801px) {
  .account-main { padding-block: 36px 88px; }
  .login-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 48px; }
  .dash-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
  .profile-list > div { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .footer-bar { display: flex; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .spinner { animation: none; }
}