/*
 * Dreams of the Fallen — Astralis Pixel World
 * Shared, namespaced appearance for the Sites marketing pages and /client/.
 * The matching Flutter palette lives in companion/lib/core/companion_theme.dart.
 * These rules never target the native MUD/game text engine or unrelated pages.
 */

:root {
  --dotf-night: #05091d;
  --dotf-surface: #0a1835;
  --dotf-surface-raised: #11254c;
  --dotf-blue: #326ab7;
  --dotf-border: #b88b45;
  --dotf-gold: #f6cb72;
  --dotf-cyan: #66daff;
  --dotf-violet: #c276ff;
  --dotf-teal: #65f2df;
  --dotf-text: #f8f1dd;
  --dotf-muted: #c9d8f1;
  --dotf-danger: #f47f9d;
}

.dotf-app, .dotf-app * { box-sizing: border-box; }
.dotf-app {
  color: var(--dotf-text);
  background:
    radial-gradient(circle at 83% 4%, #2d3681 0, transparent 32%),
    radial-gradient(circle at 11% 61%, #1f356b 0, transparent 30%),
    var(--dotf-night);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  line-height: 1.5;
  isolation: isolate;
}

.dotf-app::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 7% 13%, #fff8d5 99%, transparent),
    radial-gradient(2px 2px at 25% 39%, #72e6ff 99%, transparent),
    radial-gradient(1px 1px at 63% 16%, #fff8d5 99%, transparent),
    radial-gradient(2px 2px at 87% 65%, #b37aff 99%, transparent);
  background-size: 313px 241px, 431px 317px, 383px 359px, 491px 427px;
}

/* Designed for actual hand-authored pixel art; don't pixelate UI text/icons. */
.dotf-pixel-art, .dotf-scene img, .dotf-hero-art {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  object-fit: cover;
}
.dotf-app h1, .dotf-app h2, .dotf-app h3, .dotf-heading {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .005em;
  color: var(--dotf-text);
  text-wrap: balance;
}
.dotf-app h1 { font-size: clamp(2.1rem, 5vw, 4.8rem); }
.dotf-app h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
.dotf-kicker {
  color: var(--dotf-cyan);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.dotf-muted { color: var(--dotf-muted); }
.dotf-gold { color: var(--dotf-gold); }

/* A double ruled fantasy border with cut-out diamond heraldry. */
.dotf-frame {
  position: relative;
  border: 2px solid var(--dotf-gold);
  outline: 1px solid #6c85bd;
  outline-offset: 4px;
  box-shadow:
    inset 0 0 0 3px #08142c,
    inset 0 0 0 4px #7f643b,
    0 0 22px #1b76c535;
}
.dotf-frame::before,
.dotf-frame::after {
  content: "◆";
  color: var(--dotf-gold);
  position: absolute;
  z-index: 3;
  font-size: 16px;
  line-height: 1;
  background: var(--dotf-night);
  text-shadow: 0 0 9px #66daff99;
  pointer-events: none;
}
.dotf-frame::before { top: -10px; left: -8px; }
.dotf-frame::after { bottom: -10px; right: -8px; }

.dotf-panel {
  color: var(--dotf-text);
  background: linear-gradient(155deg, #143063 0%, var(--dotf-surface) 33%, #060e27 100%);
  border: 1px solid var(--dotf-border);
  border-radius: 5px;
  box-shadow: inset 0 0 0 3px #07122b, 0 12px 38px #0009;
}
.dotf-panel-header {
  color: var(--dotf-gold);
  padding: .7rem 1rem;
  font-size: .7rem;
  letter-spacing: .15em;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 1px solid #b88b4575;
}
.dotf-panel-body { padding: clamp(1rem, 2.8vw, 2rem); }
.dotf-ornament-rule {
  height: 14px;
  margin: 1.5rem 0;
  border-top: 1px solid #b88b456e;
  position: relative;
}
.dotf-ornament-rule::after {
  content: "◆";
  position: absolute;
  top: -12px;
  left: calc(50% - 8px);
  font-size: 14px;
  background: var(--dotf-surface);
  color: var(--dotf-gold);
  padding: 0 5px;
}
.dotf-action, .dotf-app button.dotf-action, .dotf-app a.dotf-action {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: .62rem 1.2rem;
  border: 1px solid var(--dotf-cyan);
  border-radius: 4px;
  background: linear-gradient(#173c75, #0a224c);
  color: var(--dotf-cyan);
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  letter-spacing: .045em;
  box-shadow: inset 0 0 0 2px #08162e, 0 0 12px #66daff24;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.dotf-action:hover { border-color: var(--dotf-gold); color: var(--dotf-text); box-shadow: 0 0 17px #66daff4d; }
.dotf-action:focus-visible, .dotf-app input:focus-visible, .dotf-app a:focus-visible {
  outline: 3px solid var(--dotf-gold);
  outline-offset: 3px;
}
.dotf-action:disabled { opacity: .45; cursor: not-allowed; }
.dotf-action-secondary { border-color: var(--dotf-border); color: var(--dotf-gold); }
.dotf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: #07132cef;
  border-bottom: 1px solid var(--dotf-border);
}
.dotf-nav a { color: var(--dotf-muted); text-decoration: none; font-weight: 700; font-size: .85rem; }
.dotf-nav a:hover, .dotf-nav a[aria-current="page"] { color: var(--dotf-gold); }
.dotf-hero { position: relative; min-height: 470px; display: grid; align-items: center; overflow: hidden; }
.dotf-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-position: center; }
.dotf-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #040918e6 0%, #040918b8 43%, #04091811 100%); }
.dotf-hero-content { position: relative; z-index: 1; width: min(620px, 92vw); padding: clamp(2rem, 6vw, 5rem); }
.dotf-layout { width: min(1320px, calc(100% - 36px)); margin: 0 auto; }
.dotf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dotf-scene { min-height: 180px; overflow: hidden; position: relative; border: 1px solid var(--dotf-border); background: var(--dotf-surface); }
.dotf-scene img { display: block; width: 100%; height: 100%; }

/* Decorative art glyphs exported from the same 16-pixel layout as Flutter. */
.dotf-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: middle;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}
.dotf-nav .dotf-icon { width: 17px; height: 17px; }
.dotf-pixel-label { display: inline-flex; align-items: center; gap: .5rem; }

.dotf-vitals { display: grid; gap: 8px; }
.dotf-vital { height: 12px; border: 1px solid #4986b6; background: #070f27; padding: 2px; }
.dotf-vital > span { display: block; width: var(--value, 0%); height: 100%; background: var(--fill, var(--dotf-cyan)); }
.dotf-app input, .dotf-app select, .dotf-app textarea {
  background: #07132d;
  color: var(--dotf-text);
  border: 1px solid var(--dotf-blue);
  border-radius: 4px;
  padding: .7rem .8rem;
  max-width: 100%;
  font: inherit;
}
.dotf-terminal {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #e9f3ff;
  background: #050b1b;
  border: 1px solid #326ab7;
  border-radius: 4px;
  padding: 1rem;
  line-height: 1.55;
  font-size: 14px;
  /* Terminal content is text. No text shadows, blur, pixelating, or transforms. */
}
@media (max-width: 760px) {
  .dotf-grid { grid-template-columns: 1fr; }
  .dotf-nav { gap: .7rem 1rem; }
  .dotf-hero { min-height: 430px; }
  .dotf-hero-shade { background: linear-gradient(90deg, #040918ec, #04091885); }
  .dotf-frame { outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .dotf-app *, .dotf-app *::before, .dotf-app *::after { transition: none !important; animation: none !important; }
}