/*
  Final Fantasy Menu CSS (ff-menus.css)
  ------------------------------------------------------------
  Styles to give your site a classic Final Fantasy menu look.
*/

:root {
  --ff-font-ui: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  --ff-font-pixel: monospace;

  --ff-win-bg-top: #0b1e3c;
  --ff-win-bg-bot: #0a2047;
  --ff-win-edge-dark: #081327;
  --ff-win-edge-mid: #1b3b73;
  --ff-win-edge-light: #74b6ff;
  --ff-text: #e8f4ff;
  --ff-subtext: #b6d0f5;
  --ff-accent: #33ccff;
  --ff-danger: #ff5656;
  --ff-success: #9be564;
  --ff-gold: #ffd700;

  --ff-unit: 8px;
  --ff-radius: 6px;
  --ff-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  --ff-inset-shadow: inset 0 0 0 2px var(--ff-win-edge-mid), inset 0 0 0 4px var(--ff-win-edge-dark);

  --ff-speed-fast: 120ms;
  --ff-speed-blink: 700ms;
}

.ff {
  font-family: var(--ff-font-ui);
  color: var(--ff-text);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.ff-window {
  background: linear-gradient(180deg, var(--ff-win-bg-top), var(--ff-win-bg-bot));
  border: 2px solid var(--ff-win-edge-light);
  box-shadow: var(--ff-inset-shadow), var(--ff-shadow);
  border-radius: var(--ff-radius);
  padding: calc(var(--ff-unit) * 2);
  margin-bottom: calc(var(--ff-unit) * 2);
}

.ff-titlebar {
  display: flex;
  align-items: center;
  gap: var(--ff-unit);
  background: linear-gradient(90deg, var(--ff-win-edge-mid), var(--ff-win-edge-light));
  color: #0a1a33;
  font-weight: 700;
  border-radius: calc(var(--ff-radius) - 2px);
  padding: calc(var(--ff-unit) * 1) calc(var(--ff-unit) * 1.5);
  margin-bottom: calc(var(--ff-unit) * 1.5);
  text-shadow: none;
}

.ff-body { font-size: 0.95rem; line-height: 1.55; color: var(--ff-text); }
.ff-body--muted { color: var(--ff-subtext); }

.ff-list { list-style: none; margin: 0; padding: 0; }
.ff-list li {
  position: relative;
  padding: calc(var(--ff-unit) * 0.75) calc(var(--ff-unit) * 1.5);
  border-radius: 4px;
  transition: background var(--ff-speed-fast) ease-out;
}
.ff-list li:hover { background: rgba(255, 255, 255, 0.06); }
.ff-list li.is-active,
.ff-list li:focus-within { background: rgba(51, 204, 255, 0.18); }

.ff-cursor {
  position: absolute;
  left: calc(var(--ff-unit) * 0.25);
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--ff-accent);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
  animation: ff-blink var(--ff-speed-blink) steps(1, end) infinite;
}

@keyframes ff-blink { 50% { opacity: 0.35; } }

.ff-dialog {
  background: linear-gradient(180deg, var(--ff-win-bg-top), var(--ff-win-bg-bot));
  border: 2px solid var(--ff-win-edge-light);
  box-shadow: var(--ff-inset-shadow), var(--ff-shadow);
  border-radius: var(--ff-radius);
  padding: calc(var(--ff-unit) * 1.5) calc(var(--ff-unit) * 2);
  line-height: 1.6;
}

.ff-dialog__name { color: var(--ff-accent); font-weight: 700; margin-bottom: calc(var(--ff-unit) * 0.5); }

.ff-status { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: calc(var(--ff-unit) * 1); align-items: center; }
.ff-status__name { font-weight: 700; letter-spacing: 0.4px; }
.ff-status__stat { text-align: right; }
.ff-status__gil { color: var(--ff-gold); font-weight: 700; }

.ff-gauge {
  --value: 0%;
  --track: rgba(255,255,255,0.15);
  --fill: var(--ff-accent);
  height: 10px; width: 100%;
  background: var(--track);
  border: 1px solid var(--ff-win-edge-light);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  border-radius: 999px;
  overflow: hidden;
}
.ff-gauge__bar { height: 100%; width: var(--value); background: linear-gradient(90deg, rgba(255,255,255,0.65), var(--fill)); }
.ff-gauge--danger { --fill: var(--ff-danger); }
.ff-gauge--ok { --fill: var(--ff-success); }

.ff-scanlines {
  pointer-events: none; position: fixed; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: soft-light;
}

.ff-theme--x { --ff-win-bg-top: #144a7f; --ff-win-bg-bot: #0f335a; --ff-win-edge-mid: #2a78c8; --ff-win-edge-light: #9dd6ff; --ff-accent: #8ee7ff; }
.ff-theme--xiv { --ff-win-bg-top: #1b1f2a; --ff-win-bg-bot: #141824; --ff-win-edge-mid: #2b3346; --ff-win-edge-light: #6a7aa1; --ff-accent: #5cc6ff; }
.ff-window--gold { border-color: var(--ff-gold); box-shadow: inset 0 0 0 2px #c9a300, inset 0 0 0 4px #6e5a00, var(--ff-shadow); }

:root { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.ff * { box-sizing: border-box; }
.ff-stack { display: grid; gap: calc(var(--ff-unit) * 1.25); }
.ff-right { margin-left: auto; }
.ff-muted { color: var(--ff-subtext); }

.ff-table {
  border-collapse: separate;
  border-spacing: 0 0.75rem; /* vertical gap between rows */
}

.ff-table th,
.ff-table td {
  background: #0b0f26; /* FF menu dark background */
  border: 1px solid #5aaaff; /* blue grid lines */
  padding: 0.6rem 0.8rem;
}