/* Pixel Roam, shared styling.
   Palette is lifted straight off the logo: deep violet structure, pale mint
   stone for type, and the gold→magenta heat of the ROAM lettering for accents.
   Rules of the look: no border-radius, no blurred shadows, hard pixel edges. */

@import url("fonts.css");

:root {
  --bg:      #170d29;
  --panel:   #241640;
  --panel-2: #301e58;
  --edge:    #5a309c;
  --edge-2:  #3d1a6b;
  --ink:     #eaf2e8;
  --dim:     #a68ccc;
  --accent:  #ffd44a;   /* ROAM gold      */
  --accent-2:#f05fa8;   /* ROAM magenta   */
  --rare:    #ff6b3d;   /* ROAM orange    */
  --stone:   #cfe0d4;   /* PIXEL letters  */
  --shadow:  #0c0518;
  --px: 4px;

  --font-display: "PressStart2P", "Impact", "Arial Black", sans-serif;
  --font-ui: "Silkscreen", ui-monospace, "Courier New", monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%,
                    rgba(140, 66, 224, .38), transparent 72%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
}

img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- scrollbars ----------
   Square, chunky, bevelled like a raised pixel button. Firefox only exposes
   width + two colours, so it gets the closest approximation it can render. */

* { scrollbar-color: var(--edge) var(--bg); scrollbar-width: thin; }

::-webkit-scrollbar { width: 16px; height: 16px; }

::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 3px solid var(--edge-2);
}

::-webkit-scrollbar-thumb {
  background: var(--edge);
  border: 3px solid var(--bg);
  box-shadow:
    inset 3px 3px 0 var(--panel-2),      /* light top-left bevel */
    inset -3px -3px 0 var(--shadow);     /* dark bottom-right    */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-2);
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, .35),
    inset -3px -3px 0 var(--shadow);
}
::-webkit-scrollbar-thumb:active { background: var(--accent); }

/* the end caps get the same bevel, drawn as little stud blocks */
::-webkit-scrollbar-button:single-button {
  background: var(--panel-2);
  border: 3px solid var(--bg);
  box-shadow:
    inset 2px 2px 0 var(--edge),
    inset -2px -2px 0 var(--shadow);
  height: 16px; width: 16px;
}
::-webkit-scrollbar-button:single-button:hover { background: var(--edge); }
::-webkit-scrollbar-corner { background: var(--bg); }

/* thin scanline wash, subtle, switched off on small screens */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  z-index: 60;
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px 80px; }

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

header.hero {
  text-align: center;
  border-bottom: var(--px) solid var(--edge);
  margin-bottom: 30px;
  padding: 34px 0 26px;
}

header.hero h1 { margin: 0; line-height: 0; }

.logo {
  width: min(430px, 82vw);
  height: auto;
  display: block;
  margin: 0 auto;
  /* the logo carries its own hard outline; this just lifts it off the field */
  filter: drop-shadow(0 6px 0 rgba(12, 5, 24, .55));
}

.tagline {
  margin: 20px auto 0;
  color: var(--dim);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---------- form controls (used by the scene picker) ---------- */

input[type=search] {
  appearance: none;
  background: var(--panel);
  border: 3px solid var(--edge);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 9px 10px;
  width: 100%;
}
input[type=search]::placeholder { color: var(--dim); opacity: .75; }
input[type=search]:focus { outline: none; border-color: var(--accent); }

.spacer { flex: 1 1 auto; }

.empty {
  border: 3px dashed var(--edge);
  padding: 40px 20px;
  text-align: center;
  color: var(--dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---------- modal shell ---------- */

dialog#picker {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  color: var(--ink);
}
dialog#picker::backdrop { background: rgba(12, 5, 24, .9); }

.sheet {
  background: var(--panel);
  border: var(--px) solid var(--accent);
  box-shadow: 10px 10px 0 var(--shadow);
  max-height: 92vh;
  overflow: auto;
}

footer {
  margin-top: 60px;
  border-top: 3px solid var(--edge);
  padding-top: 18px;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .03em;
  line-height: 1.8;
}

@media (max-width: 760px) {
  body::after { display: none; }
  header.hero { padding: 22px 0 20px; }
}