/* Worldfall's look on worldfall3d.com: dark fantasy, old school. Steel and ember colors taken from the chrome logo, iron
   frames on a faint stone ground, Alagard (pixel gothic, by Hewett Tsoi) for headings, Alegreya for reading, Alegreya SC
   for labels and buttons. Linked AFTER a page's own <style>, so it sets the look over the page's layout rules; the old
   token names (--sea, --sun, --foam...) are kept as aliases so a page's own rules take the new colors too.
   Used by the home page (gh-pages index.html) and /modding/. */

@font-face {
  font-family: "Alagard";
  src: url("fonts/alagard.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0a0c0f;
  --bg-2: #0f1216;
  --panel: #13171c;
  --panel-2: #191e24;
  --panel-3: #20262d;
  --iron: #2f363e;          /* frame bars */
  --iron-hi: #59646f;       /* the lit edge of a bevel */
  --iron-lo: #040608;       /* the outline round a frame */
  --steel: #c3cfdb;         /* the logo's highlight */
  --steel-2: #8a97a4;
  --text: #e9e5db;
  --text-2: #b9b4a9;
  --text-3: #838076;
  --ember: #e2742b;
  --ember-hi: #ff9b4d;
  --ember-ink: #1b0c02;
  --ember-glow: rgba(255, 126, 40, 0.38);
  --ok: #93bf6c;
  --danger: #d95a4e;
  --rule: rgba(195, 207, 219, 0.14);

  --gothic: "Alagard", "Alegreya SC", Georgia, serif;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --caps: "Alegreya SC", "Alegreya", Georgia, serif;
  --mono: ui-monospace, Consolas, "Cascadia Mono", monospace;

  /* The pages' older names, pointed at the new colors and type. */
  --sea-deep: var(--bg);
  --sea: var(--panel);
  --sea-lift: var(--panel-3);
  --foam: var(--text);
  --mist: var(--text-2);
  --sun: var(--ember);
  --grass: var(--ember-hi);
  --red: var(--danger);
  --blue: #7fa7cf;
  --shade: rgba(4, 6, 8, 0.78);
  --line: var(--rule);
  --display: var(--gothic);
  --body: var(--serif);
  --pixel: var(--caps);

  /* An iron frame: dark outline, the bar, a lit top-left edge and a shadowed bottom-right one, square corners. */
  --frame: 0 0 0 2px var(--iron-lo), inset 0 0 0 2px var(--iron), inset 3px 3px 0 0 rgba(255, 255, 255, 0.05), inset -3px -3px 0 0 rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.5);
  --frame-thin: 0 0 0 1px var(--iron-lo), inset 0 0 0 1px var(--iron), 0 6px 16px rgba(0, 0, 0, 0.4);
  --rivets: radial-gradient(circle at 7px 7px, #6c7782 0 1.6px, #11151a 2.4px, transparent 3px),
            radial-gradient(circle at calc(100% - 7px) 7px, #6c7782 0 1.6px, #11151a 2.4px, transparent 3px),
            radial-gradient(circle at 7px calc(100% - 7px), #6c7782 0 1.6px, #11151a 2.4px, transparent 3px),
            radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #6c7782 0 1.6px, #11151a 2.4px, transparent 3px);
  /* Stone: two layers of grain, fine and coarse, very faint. */
  --stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .74 0 0 0 0 .8 0 0 0 .055 0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .6 0 0 0 0 .66 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---- ground and type ---- */
html { background: var(--bg); }
body {
  background: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(120, 140, 160, 0.10), transparent 60%), var(--stone), var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
}
h1, h2, h3 {
  font-family: var(--gothic);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--steel);
  text-shadow: 2px 2px 0 #000;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-wrap: balance;
}
h2 { font-size: 48px; line-height: 1.05; }
h3 { font-size: 32px; line-height: 1.1; }
@media (max-width: 640px) { h2 { font-size: 32px; } h3 { font-size: 32px; } }
a { color: var(--ember-hi); text-decoration-color: rgba(255, 155, 77, 0.45); text-underline-offset: 3px; }
a:hover { color: #ffc08a; text-shadow: 0 0 10px var(--ember-glow); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 3px; }
code { font-family: var(--mono); background: #0b0e11; border: 1px solid var(--iron); border-radius: 0; color: #f0d9c0; }
kbd { font-family: var(--caps); font-size: 0.82em; letter-spacing: 0.02em; background: var(--panel-3); border: 1px solid var(--iron-lo); border-bottom-width: 3px; border-radius: 0; color: var(--text); }
pre { background: #080a0d !important; border: 0 !important; border-radius: 0 !important; box-shadow: var(--frame-thin); }
pre .k { color: #ffb070 !important; }
pre .s { color: #b9d39a !important; }
.eyebrow, .tag, .facts li, .tagline span, th, .where, .kind dt, .dial span, .strip figcaption, .ver .d, .ver-body h4, .foot-links a, .bar nav a, .settings .where {
  font-family: var(--caps) !important;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
}
.eyebrow { color: var(--ember-hi); font-size: 0.95rem; }
.quiet, .head p, figcaption { color: var(--text-2); }
figcaption { font-size: 0.95rem; font-style: italic; }
hr { border: 0; height: 2px; background: var(--iron); box-shadow: 0 1px 0 var(--iron-lo); }

/* ---- the top bar ---- */
.bar {
  background: linear-gradient(to bottom, rgba(6, 8, 11, 0.96), rgba(10, 12, 15, 0.9));
  border-bottom: 2px solid var(--iron);
  box-shadow: 0 2px 0 var(--iron-lo), 0 8px 22px rgba(0, 0, 0, 0.5);
  backdrop-filter: none;
}
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--steel); }
.mark img { height: 34px; width: auto; display: block; filter: drop-shadow(0 2px 0 #000); }
.tag-alpha {
  font-family: var(--caps); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: none;
  background: linear-gradient(#f0904a, #b8561c); color: var(--ember-ink); border-radius: 0;
  box-shadow: 0 0 0 1px var(--iron-lo), inset 0 1px 0 rgba(255, 220, 180, 0.6); padding: 4px 7px 3px;
}
.bar nav a { color: var(--text-2); font-size: 0.9rem; opacity: 1; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--ember-hi); text-shadow: 0 0 10px var(--ember-glow); }

/* ---- buttons ---- */
.btn {
  font-family: var(--caps); font-weight: 700; letter-spacing: 0.05em; font-size: 1rem;
  border-radius: 0; color: var(--ember-ink);
  background: linear-gradient(#f28d43, #c95f1f 55%, #a84b14);
  box-shadow: 0 0 0 2px var(--iron-lo), inset 0 2px 0 rgba(255, 214, 170, 0.55), inset 0 -3px 0 rgba(60, 20, 0, 0.45), 0 4px 0 #000;
  text-shadow: 0 1px 0 rgba(255, 210, 160, 0.35);
  transition: box-shadow 0.15s, transform 0.08s, filter 0.15s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 0 0 2px var(--iron-lo), inset 0 2px 0 rgba(255, 214, 170, 0.6), inset 0 -3px 0 rgba(60, 20, 0, 0.45), 0 5px 0 #000, 0 0 18px var(--ember-glow); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--iron-lo), inset 0 -2px 0 rgba(255, 214, 170, 0.4), inset 0 3px 0 rgba(60, 20, 0, 0.5), 0 1px 0 #000; }
.btn.ghost {
  color: var(--steel); text-shadow: 0 1px 0 #000;
  background: linear-gradient(var(--panel-3), var(--panel));
  box-shadow: 0 0 0 2px var(--iron-lo), inset 0 0 0 1px var(--iron), inset 0 2px 0 rgba(255, 255, 255, 0.07), 0 4px 0 #000;
}
.btn.ghost:hover { color: #fff; box-shadow: 0 0 0 2px var(--iron-lo), inset 0 0 0 1px var(--iron-hi), inset 0 2px 0 rgba(255, 255, 255, 0.09), 0 5px 0 #000, 0 0 16px var(--ember-glow); }

/* ---- sections ---- */
.band + .band { border-top: 0; }
.band { position: relative; }
.band + .band::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1100px, 92%); height: 10px;
  background:
    linear-gradient(var(--iron), var(--iron)) center 4px / 100% 2px no-repeat,
    linear-gradient(var(--iron-lo), var(--iron-lo)) center 6px / 100% 1px no-repeat,
    radial-gradient(circle, var(--ember) 0 3px, var(--iron-lo) 3.5px 5px, transparent 5.5px) center / 12px 10px no-repeat;
}
footer { border-top: 2px solid var(--iron); box-shadow: inset 0 1px 0 var(--iron-lo); background: rgba(5, 7, 9, 0.6); color: var(--text-3); }
footer .credit { font-size: 0.85rem; color: var(--text-3); margin-top: 6px; }

/* ---- framed pictures and panels ---- */
.shot, .cmp, .clip, .hours .stack, .diagram, .blend {
  border: 0 !important; border-radius: 0 !important; box-shadow: var(--frame);
  background: #07090b;
}
.shot img, .cmp img, .clip, .hours .stack img { border-radius: 0; }
.diagram { background: radial-gradient(ellipse at 50% 45%, #2a323b 0%, #0d1014 75%) !important; }
.pair .blend { width: fit-content; max-width: 100%; }
.safe, .ver, .socials a, details, .kind, .settings, .table-wrap, .note, .facts li, .tagline span, .tabs button {
  border: 0 !important; border-radius: 0 !important;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--frame-thin);
}
.safe, .kind, .ver, .settings { box-shadow: var(--frame); background: var(--rivets), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.note { border-left: 0 !important; box-shadow: var(--frame-thin), inset 4px 0 0 var(--ember); color: var(--text-2); }
.note.warn { box-shadow: var(--frame-thin), inset 4px 0 0 var(--danger); }
.socials a:hover, details:hover, .tabs button:hover { box-shadow: var(--frame-thin), 0 0 14px var(--ember-glow); }
.socials b { font-family: var(--gothic); font-weight: 400; font-size: 1.1rem; color: var(--steel); }
.tabs button { font-family: var(--caps); color: var(--text-2); }
.tabs button[aria-selected="true"] { background: linear-gradient(var(--panel-3), var(--panel-2)); color: var(--ember-hi); box-shadow: var(--frame-thin), inset 0 -3px 0 var(--ember); }
.steps li::before, .steps > li::before { font-family: var(--gothic) !important; font-weight: 400 !important; font-size: 32px !important; color: var(--ember-hi) !important; text-shadow: 2px 2px 0 #000; -webkit-font-smoothing: none; }
.ver summary::before, summary::before { color: var(--ember-hi) !important; }
.ver .v { font-family: var(--gothic); font-weight: 400; color: var(--ember-hi); font-size: 1.4rem; }
.lately li::before { background: var(--ember); box-shadow: 0 0 6px var(--ember-glow); }
.cmp .rule { background: var(--ember); }
.cmp .rule::after { background: var(--ember-hi); }
.cmp .tag { font-family: var(--caps); background: rgba(4, 6, 8, 0.82); border-radius: 0; box-shadow: var(--frame-thin); }
table { font-family: var(--serif); }
th { color: var(--steel-2); }
td { border-top-color: var(--rule) !important; }
.keys td { border-top-color: var(--rule); }
.grid h3, .kind h3 { font-size: 32px; }

/* ---- the home page's hero ---- */
.dive .intro { gap: 18px; }
.intro .logo-h1 { margin: 0; line-height: 0; text-shadow: none; }
.intro .logo-h1 img { width: min(640px, 82vw); height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(0, 0, 0, 0.6)); }
.intro .lede { font-family: var(--serif); font-size: 1.4rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.scrim {
  background:
    linear-gradient(to top, rgba(6, 8, 11, 0.92) 0%, rgba(6, 8, 11, 0) 45%),
    linear-gradient(to right, rgba(6, 8, 11, 0.7) 0%, rgba(6, 8, 11, 0) 50%),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.45) 100%) !important;
}

@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none; transition: none; } }

/* ---- the looks switcher (home page, graphics settings) ---- */
.looks { margin: 0; display: grid; gap: 14px; }
.looks-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.looks-tabs button {
  font-family: var(--caps); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; padding: 9px 14px; cursor: pointer;
  color: var(--text-2); border: 0; border-radius: 0; background: linear-gradient(var(--panel-3), var(--panel)); box-shadow: var(--frame-thin);
}
.looks-tabs button[aria-selected="true"] { color: var(--ember-hi); box-shadow: var(--frame-thin), inset 0 -3px 0 var(--ember); }
.looks-tabs button:hover { color: var(--text); box-shadow: var(--frame-thin), 0 0 14px var(--ember-glow); }
.looks-stack img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.looks-stack img.pixel { image-rendering: pixelated; }