/* Shared pixel-art UI for bygbanggames.com, built from Elemental Shifter's own UI kit.
   Frames, divider and cursors are the game's sprites (Assets/Art/UI) pre-scaled x3 by nearest neighbour, so every
   art pixel is 3 CSS px. Fonts are the game's: m3x6 (main UI) and Alagard (titles/tooltips); both are 16 px per em
   at 1x, so sizes stay on multiples of 16 to land each font pixel on whole screen pixels. */

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

:root {
  /* Palette sampled from the game's UI Panel sprite, plus element colours from the absorb strikes. */
  --ink: #14141b;
  --bg: #14141b;
  --bg-2: #1b1e26;
  --gold: #dbb661;
  --gold-hi: #ece3b3;
  --gold-lo: #d39b46;
  --text: #e8ece9;
  --muted: #9da1ad;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 32px/32px "m3x6", monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  cursor: url("img/ui/cursor.png") 13 13, crosshair;
}
a, button, label, summary, [data-t] { cursor: url("img/ui/cursor-active.png") 13 13, pointer; }
input { cursor: text; }
img { image-rendering: pixelated; }
::selection { background: var(--gold); color: var(--ink); }

a { color: var(--gold); text-decoration: none; border-bottom: 3px solid var(--gold-lo); }
a:hover { color: var(--gold-hi); border-bottom-color: var(--gold-hi); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }

.wrap { max-width: 1056px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3, .studio, .title {
  font-family: "Alagard", serif; font-weight: normal; color: var(--gold-hi);
  /* Hard 1-art-pixel drop shadow, like the in-game titles; no blur. */
  text-shadow: 3px 3px 0 var(--ink);
}
h1 { font-size: 64px; line-height: 64px; }
h2 { font-size: 48px; line-height: 48px; }
h3 { font-size: 32px; line-height: 32px; }

/* Game UI Panel: 8 px gold frame with the checkered dark fill. 'round' tiles whole 4 px periods, so the stud
   pattern on the edges never gets cut in half next to a corner. */
.panel {
  border: 24px solid transparent;
  border-image: url("img/ui/panel.png") 24 fill / 24px round;
  image-rendering: pixelated;
  padding: 4px 8px;
}
.panel-sm {
  border: 12px solid transparent;
  border-image: url("img/ui/panel-sm.png") 12 fill / 12px round;
  image-rendering: pixelated;
}
.row-frame {
  border: 12px solid transparent;
  border-image: url("img/ui/row.png") 12 fill / 12px round;
  image-rendering: pixelated;
}
.divider {
  display: block; height: 9px; margin: 0; border: solid transparent; border-width: 0 6px;
  border-image: url("img/ui/divider.png") 0 6 fill / 0 6px round;
  image-rendering: pixelated;
}

/* Buttons: one art pixel of highlight on top, two of shade below; pressing drops the face by one art pixel. */
.btn {
  display: inline-block; padding: 6px 24px 12px; font: 48px/48px "m3x6", monospace; text-decoration: none;
  border: solid transparent; border-width: 6px 6px 9px;
  border-image: url("img/ui/btn-gold.png") 6 6 9 fill / 6px 6px 9px stretch;
  image-rendering: pixelated; color: var(--ink);
}
.btn:hover { border-image-source: url("img/ui/btn-gold-hover.png"); color: var(--ink); }
.btn:active { transform: translateY(3px); }
.btn.dark { border-image-source: url("img/ui/btn-dark.png"); color: var(--gold-hi); }
.btn.dark:hover { border-image-source: url("img/ui/btn-dark-hover.png"); color: #fff6d0; }
.btn.small { font-size: 32px; line-height: 32px; padding: 3px 15px 9px; }

header.top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 0; gap: 0 16px; }
.studio { font-size: 32px; line-height: 32px; color: var(--gold-hi); border: 0; white-space: nowrap; }
.studio:hover { color: #fff6d0; }
.studio span { color: var(--gold); }
nav a { color: var(--muted); border: 0; margin-left: 24px; }
nav a:hover { color: var(--gold-hi); }

footer { padding: 32px 0 48px; text-align: center; color: var(--muted); }
/* Spaced links instead of '·' separators: m3x6's middle dot renders as a stray raised tick. */
footer a { color: var(--muted); border: 0; margin: 0 12px; display: inline-block; }
footer a:hover { color: var(--gold-hi); }
footer .credits { font-size: 32px; color: #6d717c; margin: 8px 0 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }