@font-face {
  font-family: 'Ziffy';
  src: url(data/ui/font.ttf) format('truetype');
  font-display: block;
}
:root {
  --bg: #14121c;
  --px: 3px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: #f4efe4;
  font: 16px/1.4 'Trebuchet MS', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

#world, .pxt, .ico, .arrow, .emblem, .card, .btn, .ghost, .tip, .tag, .classes button, #rail a {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#world { position: fixed; left: 0; top: 0; pointer-events: none; }

.pxt { display: block; flex: none; }

.t {
  display: block;
  margin: 0;
  font: 18px/1.3 'Ziffy', 'Trebuchet MS', sans-serif;
  letter-spacing: 0.5px;
}
.t.big { font-size: 32px; line-height: 1.1; letter-spacing: 0; }
.t.huge { font-size: 64px; line-height: 1; }
.t.ol { text-shadow: 2px 0 #262626, -2px 0 #262626, 0 2px #262626, 0 -2px #262626, 2px 2px #262626, -2px 2px #262626, 2px -2px #262626, -2px -2px #262626; }
.t.big.ol { text-shadow: 3px 0 #262626, -3px 0 #262626, 0 3px #262626, 0 -3px #262626, 3px 3px #262626, -3px 3px #262626, 3px -3px #262626, -3px -3px #262626; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.dmg {
  position: absolute;
  transform: translate(-50%, -50%);
  animation: dmg 0.8s steps(8) forwards;
}
@keyframes dmg {
  to { transform: translate(-50%, -260%); opacity: 0; }
}

.btn, .ghost, .tip, .tag, .classes button {
  border-style: solid;
  border-color: transparent;
  border-width: calc(var(--px) * 3);
  background: none;
}
.btn, .ghost {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--px) * 2);
  padding: var(--px) calc(var(--px) * 3);
  cursor: pointer;
  text-decoration: none;
}
.btn { border-image: url(data/ui/btn_primary.png) 3 fill stretch; }
.ghost { border-image: url(data/ui/btn_dark.png) 3 fill stretch; }
.ghost[aria-pressed='true'] { border-image-source: url(data/ui/btn_gold.png); }
.btn:hover, .btn:focus-visible, .ghost:hover, .ghost:focus-visible { filter: brightness(1.15); outline: none; }
.btn:active, .ghost:active { transform: translateY(var(--px)); }
.btn.big { padding: calc(var(--px) * 2) calc(var(--px) * 6); }

.ico { display: block; flex: none; width: calc(var(--px) * 5); height: calc(var(--px) * 5); background: url(data/ui/icon_play.png) 0 0 / 100% 100%; }
.ico.stop { background-image: url(data/ui/icon_stop.png); }

.emblem {
  display: block;
  flex: none;
  width: calc(var(--px) * 64);
  height: calc(var(--px) * 64);
  background: url(data/ui/emblem.png) 0 0 / 1500% 100% no-repeat;
  animation: emblem 1920ms step-end infinite;
}
.emblem.small { width: 64px; height: 64px; }
@keyframes emblem {
  0% { background-position-x: 0%; }
  8.33% { background-position-x: 7.143%; }
  10.42% { background-position-x: 14.286%; }
  12.5% { background-position-x: 21.429%; }
  14.58% { background-position-x: 28.571%; }
  16.67% { background-position-x: 35.714%; }
  18.75% { background-position-x: 42.857%; }
  20.83% { background-position-x: 50%; }
  22.92% { background-position-x: 57.143%; }
  31.25% { background-position-x: 64.286%; }
  33.33% { background-position-x: 71.429%; }
  35.42% { background-position-x: 78.571%; }
  37.5% { background-position-x: 85.714%; }
  39.58% { background-position-x: 92.857%; }
  41.67% { background-position-x: 100%; }
}
.wordmark {
  --u: calc(var(--px) - 1px);
  display: block;
  flex: none;
  width: calc(var(--u) * var(--w));
  height: calc(var(--u) * var(--h));
  background: url(data/ui/wordmark.png) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.wordmark.small { --u: 1px; }
.crest h2 { margin: calc(var(--px) * 2) 0 0; }
.crest { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--px) * 4); }

#top {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--px) * 2);
  padding: calc(var(--px) * 3 + env(safe-area-inset-top)) calc(var(--px) * 4) 0;
  pointer-events: none;
}
#top > * { pointer-events: auto; }
#top nav { display: flex; align-items: center; gap: calc(var(--px) * 2); }
.logo { display: flex; align-items: center; gap: calc(var(--px) * 2); text-decoration: none; }

#tips {
  position: fixed;
  z-index: 5;
  top: calc(var(--px) * 22 + env(safe-area-inset-top));
  right: calc(var(--px) * 4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--px) * 2);
  pointer-events: none;
  transition: opacity 0.3s, visibility 0s;
}
.tip { max-width: min(460px, 80vw); }
.tag { white-space: nowrap; }
.tip, .tag {
  margin: 0;
  padding: var(--px) calc(var(--px) * 3);
  border-image: url(data/ui/tag.png) 3 fill stretch;
}
body.started #tips { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
body:not(.started) #auto, body:not(.started) #lang { animation: flash 0.9s steps(1) infinite; }
@keyframes flash {
  50% { border-image-source: url(data/ui/btn_gold.png); }
}

#area {
  position: fixed;
  z-index: 3;
  left: 0;
  right: 0;
  top: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
}
#area.show { opacity: 1; }

.card {
  position: fixed;
  z-index: 4;
  left: clamp(12px, 4vw, 60px);
  top: 50%;
  padding: calc(var(--px) * 13) calc(var(--px) * 15) calc(var(--px) * 15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-50% + var(--px) * 4));
  transition: opacity 0.25s, transform 0.25s steps(4), visibility 0s 0.25s;
}
.card .sheet { position: absolute; left: 0; top: 0; z-index: -1; margin: 0; }
.card.on {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition: opacity 0.25s, transform 0.25s steps(4);
}
.card > * { margin: 0 0 calc(var(--px) * 4); }
.card > :last-child, .card > :nth-last-child(1 of :not(.sheet)) { margin-bottom: 0; }
.card .kicker { margin-bottom: calc(var(--px) * 2); }
.card ul { padding: 0; list-style: none; }
.card li { position: relative; margin: 0 0 calc(var(--px) * 2); padding-left: calc(var(--px) * 6); }
.card li::before { content: ''; position: absolute; left: var(--px); top: 0.45em; width: calc(var(--px) * 3); height: calc(var(--px) * 3); background: #a3401c; }
.card li:last-child { margin-bottom: 0; }

.classes { display: flex; gap: calc(var(--px) * 2); }
.classes button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--px);
  padding: 0 0 var(--px);
  cursor: pointer;
  border-image: url(data/ui/slot.png) 3 fill stretch;
}
.classes button[aria-pressed='true'] { border-image-source: url(data/ui/slot_on.png); }
.classes button:hover, .classes button:focus-visible { filter: brightness(1.06); outline: none; }

.cta { display: flex; flex-wrap: wrap; gap: calc(var(--px) * 3); align-items: center; }

#rail {
  position: fixed;
  z-index: 4;
  right: calc(var(--px) * 3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 2);
}
#rail a {
  position: relative;
  width: calc(var(--px) * 7);
  height: calc(var(--px) * 7);
  background: url(data/ui/dot.png) 0 0 / 100% 100%;
}
#rail a.done { background-image: url(data/ui/dot_done.png); }
#rail a.on { background-image: url(data/ui/dot_on.png); }
#rail a .tag {
  position: absolute;
  right: calc(var(--px) * 10);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
#rail a:hover .tag, #rail a:focus-visible .tag { opacity: 1; }

#hint {
  position: fixed;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--px) * 8 + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 3);
  pointer-events: none;
  transition: opacity 0.4s;
}
body.started #hint { opacity: 0; }
.arrow {
  display: block;
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 6);
  background: url(data/ui/arrow.png) 0 0 / 100% 100%;
  animation: bob 0.8s steps(2) infinite alternate;
}
@keyframes bob { to { transform: translateY(calc(var(--px) * 2)); } }

#loading {
  position: fixed;
  z-index: 9;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.4s, visibility 0s 0.4s;
}
body:not(.loading) #loading { opacity: 0; visibility: hidden; }

.noscript { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; }

@media (max-width: 860px) {
  .card {
    left: 8px;
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: translateY(calc(var(--px) * 4));
  }
  .card.on { transform: none; }
  #rail a .tag { display: none; }
  .emblem.small { width: 32px; height: 32px; }
  .wordmark.small { --u: 0.5px; }
  .t { font-size: 16px; }
  .t.big { font-size: 24px; }
  .t.huge { font-size: 48px; }
  #area { top: 13vh; }
  #hint { bottom: auto; top: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card.on, #area, #hint, #tips, body.started #tips, #loading { transition: none; }
  .arrow, .dmg, .emblem, body:not(.started) #auto, body:not(.started) #lang { animation: none; }
}