@font-face {
  font-family: 'VT323';
  src: url(assets/font/VT323-Regular.ttf) format('truetype');
  font-display: swap;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  --u: clamp(1.7px, calc(100vw / 190), 2.6px);
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #1a1016 url(assets/img/bg_title.png) center top / cover no-repeat fixed;
  image-rendering: pixelated;
  font-family: 'VT323', monospace;
  color: #2b1a1e;
  display: flex;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom, 0px));
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #1a101666;
  pointer-events: none;
}

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

.wrap {
  position: relative;
  width: 100%;
  max-width: calc(var(--u) * 176);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: calc(var(--u) * 150);
  height: auto;
  margin: calc(var(--u) * 6) 0 calc(var(--u) * 4);
  filter: drop-shadow(0 calc(var(--u) * 2) 0 #0008);
}

.box {
  width: 100%;
  padding: calc(var(--u) * 4);
  font-size: calc(var(--u) * 9);
  border-style: solid;
  border-width: calc(var(--u) * 6);
  border-image: url(assets/img/ui_paper.png) 6 fill / calc(var(--u) * 6) stretch;
}

h1 {
  margin: 0 0 calc(var(--u) * 2);
  font-weight: normal;
  font-size: calc(var(--u) * 11);
  color: #7e2224;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  border-bottom: calc(var(--u) * 1) dashed #c08448;
  padding-bottom: calc(var(--u) * 2);
}

h1 img {
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
}

.body p {
  margin: calc(var(--u) * 2) 0;
  line-height: 1.1;
}

.body b {
  color: #b23a2c;
  font-weight: normal;
}

.steps span {
  color: #7e2224;
}

.ico {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  vertical-align: middle;
}

.small {
  font-size: calc(var(--u) * 7.5);
  color: #5a3528;
}

.save {
  margin: calc(var(--u) * 3) 0;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: #fff4d8;
  border: calc(var(--u) * 1) solid #c08448;
  font-size: calc(var(--u) * 8.5);
  line-height: 1.1;
}

.save b {
  color: #7e2224;
  font-weight: normal;
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 3);
}

.btn {
  flex: 1 1 45%;
  font-family: inherit;
  font-size: calc(var(--u) * 8.5);
  line-height: 1;
  color: #fff8ea;
  cursor: pointer;
  border-style: solid;
  border-width: calc(var(--u) * 4);
  border-image: url(assets/img/ui_btn_gold.png) 4 fill / calc(var(--u) * 4) stretch;
  background: none;
  padding: calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 2);
  min-height: calc(var(--u) * 18);
  text-shadow: 0 calc(var(--u) * 1) 0 #0008;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

.btn:active {
  transform: translateY(calc(var(--u) * 1));
}

.btn.gold {
  color: #3b2322;
  text-shadow: 0 calc(var(--u) * 1) 0 #fff6;
}

.btn.gold:active {
  border-image-source: url(assets/img/ui_btn_gold_p.png);
}

.btn.green {
  border-image-source: url(assets/img/ui_btn_green.png);
}

.btn.green:active {
  border-image-source: url(assets/img/ui_btn_green_p.png);
}

.btn.blue {
  border-image-source: url(assets/img/ui_btn_blue.png);
}

.btn.blue:active {
  border-image-source: url(assets/img/ui_btn_blue_p.png);
}

.btn.wide {
  flex-basis: 100%;
}

.btn:disabled {
  filter: grayscale(1) brightness(.85);
  opacity: .6;
  transform: none;
  cursor: default;
}

footer {
  margin: calc(var(--u) * 5) 0 0;
  font-size: calc(var(--u) * 7);
  color: #fff8ea;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}

footer a {
  color: #f8dc6a;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: 90vw;
  background: #2b1a1e;
  color: #fff8ea;
  border: 2px solid #f8dc6a;
  padding: 8px 14px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  text-align: center;
  z-index: 9;
}

.toast.good {
  border-color: #8cc458;
}

.toast.bad {
  border-color: #dc5a36;
}

.hidden {
  display: none !important;
}

.plat {
  margin: calc(var(--u) * 4) 0 0;
  padding-top: calc(var(--u) * 3);
  border-top: calc(var(--u) * 1) dashed #c08448;
}

.plat h2 {
  margin: 0;
  font-weight: normal;
  font-size: calc(var(--u) * 10);
  color: #7e2224;
}

.plat .btns {
  margin-top: calc(var(--u) * 2);
}

.btn.dim {
  filter: grayscale(.7) brightness(.9);
}
.code {
  display: block; width: 100%; height: 96px; margin-top: 8px; box-sizing: border-box; padding: 6px;
  font: 12px/1.3 monospace; word-break: break-all; resize: none;
  background: #fff8ea; color: #3b2322; border: 2px solid #9c6436;
}
.code.hidden { display: none; }

.embed-help {
  border-color: #7e2224;
}

.embed-help p {
  margin: 6px 0 0;
}