/* Dawn - FFXI private server
   Theme: the moment before sunrise over Vana'diel. Deep indigo night at the
   top of the page warming to amber at the horizon. */

:root {
  --radius: 10px;
  --wrap:   1120px;
}

/* Theme 1 - Dawn. Sunrise over Vana'diel. The default. */
:root,
[data-theme="dawn"] {
  --night:   #0a0d16;
  --night-2: #10141f;
  --panel:   #151a28;
  --panel-2: #1b2131;
  --line:    #262e42;
  --text:    #dbe0ec;
  --muted:   #8790a6;
  --gold:    #f0b657;
  --ember:   #ff8a4c;
  --online:  #5ad48a;
  --offline: #ff6b6b;

  --hero-bg:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(240, 182, 87, .20), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 108%, rgba(255, 138, 76, .28), transparent 70%),
    linear-gradient(180deg, #0a0d16 0%, #121829 60%, #1c2135 100%);
}

/* Theme 2 - Dusk. Deep evening, crystal blues and violet. */
[data-theme="dusk"] {
  --night:   #0c0a16;
  --night-2: #12101f;
  --panel:   #191527;
  --panel-2: #201b31;
  --line:    #2e2745;
  --text:    #e0dcec;
  --muted:   #948aad;
  --gold:    #b89dff;
  --ember:   #ff7bc8;
  --online:  #6ae0c0;
  --offline: #ff6b8f;

  --hero-bg:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(184, 157, 255, .22), transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 106%, rgba(255, 123, 200, .20), transparent 70%),
    linear-gradient(180deg, #0c0a16 0%, #16122a 60%, #221a3a 100%);
}

/* Theme 3 - Menu. The site rendered as FFXI's own interface.
 *
 * The palette is not invented: these are the game's chat-log colours. White
 * for system text, yellow for names and NPC speech, green for item names.
 * Panels are the translucent blue menu window every player knows on sight. */
[data-theme="vanadiel"] {
  /* Environment colours sampled from the Anima key art: storm violet base,
     steel blue mids, bone neutrals, ice blue highlight. The red is used at
     almost nothing, which is exactly why it reads. */
  --night:   #14121f;   /* storm violet, darkened from #232139 */
  --night-2: #1b1930;
  --panel:   #1e2b4d;   /* steel blue window */
  --panel-2: #2a457a;
  --line:    #4f73bb;
  --text:    #eef0f6;
  --muted:   #8c8b6e;   /* bone - the unusual note that stops this reading generic */

  /* UI colours stay FFXI's own chat-log code. The world is Anima; the
     interface is still Vana'diel. */
  --gold:    #ffd45e;   /* name yellow */
  --ember:   #8ae06a;   /* item green */
  --online:  #afcea5;
  --offline: #d95564;   /* the eye. Used here and nowhere else. */

  --menu-edge:  #82c9fe;
  --menu-glow:  rgba(130, 201, 254, .22);

  /* MUST stay translucent. The live sky is a fixed canvas at z-index -1, so
     an opaque hero paints straight over it and the theme looks dead. This is
     a scrim for text contrast, nothing more. */
  --hero-bg: linear-gradient(180deg,
               rgba(20, 18, 31, .58) 0%,
               rgba(20, 18, 31, .18) 55%,
               rgba(20, 18, 31, .62) 100%);
}

[data-theme="vanadiel"] .card,
[data-theme="vanadiel"] .table-wrap,
[data-theme="vanadiel"] .form-card {
  background: linear-gradient(180deg, #223154 0%, #1a2440 100%);
}

/* Window chrome: an outer dark rule, a pale inner edge, and a soft inner
   glow. That triple is what makes an FFXI menu read as an FFXI menu. */
[data-theme="vanadiel"] .card,
[data-theme="vanadiel"] .table-wrap,
[data-theme="vanadiel"] .form-card {
  border: 1px solid var(--menu-edge);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(4, 7, 15, .9),
              inset 0 0 22px var(--menu-glow),
              0 2px 10px rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, #0f2850 0%, #0a1c3c 100%);
}

[data-theme="vanadiel"] .status-chip {
  border: 1px solid var(--menu-edge);
  border-radius: 3px;
  background: #0d2246;
}

/* Chrome stays translucent too, so the sky reads continuously behind the
   whole page rather than only in the gaps between cards. */
[data-theme="vanadiel"] .site-header { background: rgba(9, 8, 18, .80); }
[data-theme="vanadiel"] .site-footer { background: rgba(9, 8, 18, .86); }

/* Menu headers are small, wide-tracked and uppercase, like the game's. */
[data-theme="vanadiel"] .card h3,
[data-theme="vanadiel"] .section-head h2,
[data-theme="vanadiel"] th {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  color: var(--menu-edge);
}
[data-theme="vanadiel"] .card h3 { font-size: .85rem; }

/* Item names take the game's green, exactly as they do in the log. */
[data-theme="vanadiel"] .prose code { color: var(--ember); }

/* ---- SIGNATURE: the selection cursor ----------------------------------
   In FFXI a small arrow sits to the left of whichever menu row is selected.
   Every interactive row here grows the same cursor on hover and focus, and
   the label shifts to the game's name-yellow. This is the one bold move;
   everything else in this theme stays quiet. */
[data-theme="vanadiel"] .nav a,
[data-theme="vanadiel"] .footer-grid a,
[data-theme="vanadiel"] tbody tr td:first-child,
[data-theme="vanadiel"] a.card {
  position: relative;
}
[data-theme="vanadiel"] .nav a::before,
[data-theme="vanadiel"] .footer-grid a::before,
[data-theme="vanadiel"] tbody tr td:first-child::before,
[data-theme="vanadiel"] a.card::before {
  content: "\25B6";
  position: absolute;
  left: -1.05em;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
[data-theme="vanadiel"] .nav a:hover::before,
[data-theme="vanadiel"] .nav a:focus-visible::before,
[data-theme="vanadiel"] .footer-grid a:hover::before,
[data-theme="vanadiel"] .footer-grid a:focus-visible::before,
[data-theme="vanadiel"] tbody tr:hover td:first-child::before,
[data-theme="vanadiel"] a.card:hover::before,
[data-theme="vanadiel"] a.card:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}
[data-theme="vanadiel"] .nav a:hover,
[data-theme="vanadiel"] .footer-grid a:hover,
[data-theme="vanadiel"] tbody tr:hover td:first-child a,
[data-theme="vanadiel"] a.card:hover h3 { color: var(--gold); }

/* a.card sits in a grid, so its cursor needs room rather than overhang. */
[data-theme="vanadiel"] a.card::before { left: .8em; top: 1.35rem; }
[data-theme="vanadiel"] a.card:hover::before { transform: translateX(0); }
[data-theme="vanadiel"] a.card h3 { padding-left: 1.1em; }

/* FFXI menus open by expanding vertically. One page-load moment, once. */
[data-theme="vanadiel"] .hero .wrap { animation: menu-open .34s ease-out both; }
@keyframes menu-open {
  from { opacity: 0; transform: scaleY(.94); }
  to   { opacity: 1; transform: scaleY(1); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.main { padding: 40px 20px 72px; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }

/* ------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 13, 22, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 62px; }

.brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--gold); font-size: 1.3rem; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--muted); font-size: .93rem; font-weight: 500; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav-cta {
  background: var(--gold); color: #1a1206 !important;
  padding: 7px 16px; border-radius: 6px; font-weight: 650;
}
.nav-cta:hover { background: #ffc978; }

.nav-toggle, .nav-burger { display: none; }

/* -------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: 92px 20px 76px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: var(--hero-bg);
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  margin-bottom: .3em;
  background: linear-gradient(180deg, #fff 30%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.tagline { font-size: 1.15rem; color: var(--muted); max-width: 620px; margin: 0 auto 32px; }

.btn {
  display: inline-block; padding: 12px 28px; border-radius: 7px;
  font-weight: 650; font-size: 1rem; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--gold); color: #1a1206; }
.btn-primary:hover { background: #ffc978; text-decoration: none; }
.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------- status strip */

.status-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; margin-top: 34px; font-size: .9rem;
}
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(21, 26, 40, .7); border: 1px solid var(--line);
  padding: 7px 15px; border-radius: 999px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-on  { background: var(--online); box-shadow: 0 0 9px var(--online); }
.dot-off { background: var(--offline); }

/* ------------------------------------------------------------- cards */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.card h3 { color: var(--gold); }
.card ul { margin: 0; padding-left: 18px; }
.card li { margin: .3em 0; }

.stat { text-align: center; }
.stat .n { font-size: 2rem; font-weight: 700; color: var(--gold); display: block; line-height: 1.2; }
.stat .l { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }

.section { margin: 56px 0; }
.section-head { margin-bottom: 22px; }
.section-head p { color: var(--muted); margin: 0; }

/* ------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
td { padding: 11px 12px; border-bottom: 1px solid rgba(38, 46, 66, .5); }
tbody tr:hover td { background: var(--panel-2); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }

.pill {
  display: inline-block; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 9px; font-size: .75rem; color: var(--gold);
}
.rank-num { color: var(--muted); font-variant-numeric: tabular-nums; width: 2.2rem; }
.rank-1 .rank-num { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------------- forms */

.form-card { max-width: 420px; margin: 0 auto; }
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=search] {
  width: 100%; padding: 11px 13px; margin-bottom: 16px;
  background: var(--night-2); border: 1px solid var(--line);
  border-radius: 7px; color: var(--text); font-size: 1rem;
}
input:focus { outline: none; border-color: var(--gold); }

.flash { padding: 12px 16px; border-radius: 7px; margin-bottom: 20px; border: 1px solid; }
.flash-error { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .4); color: #ffb3b3; }
.flash-info  { background: rgba(240, 182, 87, .1); border-color: rgba(240, 182, 87, .4); color: var(--gold); }

.linkish { background: none; border: 0; color: var(--gold); cursor: pointer; padding: 0; font: inherit; }
.linkish:hover { text-decoration: underline; }

/* ------------------------------------------------------------- prose */

.prose { max-width: 760px; }
.prose h2 { margin-top: 1.8em; color: var(--gold); }
.prose h3 { margin-top: 1.4em; }
.prose code {
  background: var(--night-2); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 4px; font-size: .88em;
}
.prose pre {
  background: var(--night-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; overflow-x: auto;
}
.prose pre code { border: 0; padding: 0; background: none; }
.prose blockquote {
  border-left: 3px solid var(--gold); margin: 1.2em 0;
  padding: .2em 0 .2em 16px; color: var(--muted);
}
.prose table { margin: 1.2em 0; }

/* ------------------------------------------------------------ footer */

.site-footer { border-top: 1px solid var(--line); background: var(--night-2); padding: 44px 0 32px; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-grid h4 { color: var(--text); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.footer-grid a, .footer-grid .linkish { display: block; color: var(--muted); font-size: .9rem; margin: .35em 0; }
.footer-grid a:hover { color: var(--gold); }
.footer-about { grid-column: span 2; }

/* ------------------------------------------------------ the Vana'diel sky */

/* Only painted on the Vana'diel theme. Fixed so it never scrolls, and
   pointer-events:none so it can never swallow a click. */
#vana-sky {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -2; pointer-events: none; display: none;
}
[data-theme="vanadiel"] #vana-sky { display: block; }
[data-theme="vanadiel"] body { background: transparent; }

/* A single scrim across the whole viewport, between the sky and the content.
   Without it the hero sits on a dimmed sky while everything below sits on the
   raw canvas, and the seam between the two is very visible. */
[data-theme="vanadiel"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
                rgba(9, 8, 18, .30) 0%,
                rgba(9, 8, 18, .52) 55%,
                rgba(9, 8, 18, .70) 100%);
}

/* The clock readout. This is the signature: real in-game time, the elemental
   day, and the true moon phase. Hidden on the two static themes, where it
   would be a claim the background does not back up. */
.vana-clock { display: none; }
[data-theme="vanadiel"] .vana-clock {
  display: inline-block;
  margin-top: 26px;
  padding: 7px 18px;
  border: 1px solid var(--menu-edge);
  border-left: 3px solid var(--day-color, var(--menu-edge));
  border-radius: 3px;
  background: rgba(6, 14, 30, .72);
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- theme switch */

.theme-switch { display: flex; gap: 4px; align-items: center; }
.theme-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  transition: transform .15s ease, border-color .15s ease;
}
.theme-btn:hover { transform: scale(1.15); }
.theme-btn[aria-pressed="true"] { border-color: var(--text); }
.theme-btn-dawn     { background: linear-gradient(135deg, #1c2135, #f0b657); }
.theme-btn-dusk     { background: linear-gradient(135deg, #221a3a, #b89dff); }
.theme-btn-vanadiel { background: linear-gradient(135deg, #060912, #5ad4d4 60%, #ffcb6b); }

/* -------------------------------------------------------- hero portrait */

/* The character face, framed the way FFXI frames your character in the
   status menu: a hard pale edge over the window blue. Renders only when a
   portrait is actually installed - no placeholder, because an empty
   decorative shape is exactly the templated filler this design avoids. */
.hero-portrait {
  display: inline-block;
  margin-bottom: 26px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  line-height: 0;
}
[data-theme="vanadiel"] .hero-portrait {
  border-color: var(--menu-edge);
  background: linear-gradient(180deg, #0f2850, #0a1c3c);
  box-shadow: inset 0 0 0 1px rgba(4, 7, 15, .9), 0 3px 14px rgba(0, 0, 0, .55);
}
.hero-portrait img,
.hero-portrait .sprite {
  display: block;
  border-radius: 2px;
  image-rendering: pixelated;
}

/* A multi-frame sheet animates; a single-frame portrait sits still. */
.hero-portrait .sprite {
  background-repeat: no-repeat;
  background-size: calc(var(--frames) * 100%) 100%;
  animation: sprite-cycle steps(var(--frames)) var(--duration, 1s) infinite;
}
@keyframes sprite-cycle {
  from { background-position:    0% 0; }
  to   { background-position: -100% 0; }
}

/* Anyone who has asked their OS for less motion gets a still page. The
   Vana'diel clock text still renders - that is information, not animation. */
@media (prefers-reduced-motion: reduce) {
  #vana-sky { display: none !important; }
  .hero-portrait .sprite { animation: none; }
  [data-theme="vanadiel"] .hero .wrap { animation: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------- profile chart */

.chart { margin: 0; }
.chart figcaption {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; margin-bottom: 12px;
}
.job-chart { width: 100%; height: auto; display: block; overflow: visible; }

/* Text wears text tokens, never the series colour - the bar carries identity. */
.job-chart .job-label {
  font: 600 10px ui-monospace, Consolas, monospace;
  fill: var(--text);
}
.job-chart .job-value {
  font: 10px ui-monospace, Consolas, monospace;
  fill: var(--muted);
}
.job-chart .job-ml {
  font: 600 9px ui-monospace, Consolas, monospace;
  fill: var(--gold);
}
.job-chart g:hover rect { filter: brightness(1.25); }

/* ---------------------------------------------------------- equipment */

.equip-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.equip-slot {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; border-radius: 5px;
  background: var(--night-2); border: 1px solid var(--line);
  min-width: 0;
}
.equip-slot.empty { opacity: .4; }
.equip-label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
}
.equip-item {
  font-size: .84rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="vanadiel"] .equip-item { color: var(--ember); }  /* item green */

/* ------------------------------------------------------------ mobile */

@media (max-width: 780px) {
  .nav-burger {
    display: block; margin-left: auto; font-size: 1.5rem;
    color: var(--text); cursor: pointer; user-select: none;
  }
  .nav {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--night-2); border-bottom: 1px solid var(--line); padding: 8px 20px 16px;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { text-align: center; margin-top: 12px; border-bottom: 0; }
  .footer-about { grid-column: span 1; }
  .hero { padding: 62px 20px 54px; }
}