:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color: #fff0d7;
  background: #1a120f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

canvas {
  display: block;
  width: min(100vw, 177.7778dvh);
  height: auto;
  aspect-ratio: 16 / 9;
  outline: none;
  touch-action: none;
}

#intro {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 1.25rem;
  overflow: auto;
  background:
    radial-gradient(ellipse at 70% 5%, #9d6139 0%, transparent 56%),
    linear-gradient(125deg, #2c2017, #1c1512 75%);
}

.card {
  width: min(100%, 37rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid #ab7952;
  border-radius: 1.3rem;
  background: #2e2119ed;
  box-shadow: 0 1.25rem 5rem #160d08ab;
}

.edition { color: #f3c687; font-size: .84rem; letter-spacing: .15em; margin: 0 0 1rem; }
.edition span { margin-right: .3rem; }
h1 { font-size: clamp(2.15rem, 7vw, 3.5rem); letter-spacing: .04em; margin: 0; }
.subtitle, #status, .controls { color: #e5c8a8; line-height: 1.65; }
.subtitle { margin: .8rem 0 1.6rem; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
button {
  border: 1px solid #f2c68b;
  border-radius: .55rem;
  background: #f2c68b;
  color: #342117;
  padding: .7rem 1.25rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button.secondary { background: transparent; color: #ffe2b9; border-color: #ad896a; }
button:focus-visible { outline: .18rem solid #ffedc8; outline-offset: .2rem; }
progress { width: 100%; height: .65rem; accent-color: #f2c68b; }
#status { min-height: 1.65em; font-size: .89rem; margin: .8rem 0; }
.controls { border-top: 1px solid #795e49; margin: 1.3rem 0 0; padding-top: .9rem; font-size: .83rem; }
kbd { display: inline-block; color: #ffebcb; margin-left: .35em; font-family: inherit; font-weight: 700; }
kbd:first-child { margin-left: 0; }
#look {
  pointer-events: none;
  position: absolute;
  top: .9rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border: 1px solid #be926c;
  border-radius: .6rem;
  padding: .45rem .85rem;
  background: #251b15e8;
  font-size: .85rem;
}

#touch-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  touch-action: none;
}

.touch-menu, .touch-actions, #touch-stick {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.touch-menu {
  top: max(.75rem, env(safe-area-inset-top));
  left: max(.75rem, env(safe-area-inset-left));
  display: flex;
  gap: .4rem;
}

.touch-actions {
  right: max(.8rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: .42rem;
}

#touch-hud button {
  min-width: clamp(2.8rem, 8vw, 4rem);
  min-height: 2.65rem;
  padding: .35rem .55rem;
  color: #fff1db;
  background: #2c211cda;
  border-color: #f3c687b8;
  font-size: clamp(.72rem, 2.3vw, .95rem);
}

#touch-hud button[data-held] { background: #a46f46; }
#touch-stick {
  left: max(.8rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: clamp(5rem, 17vmin, 8rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #f3c687b8;
  background: #2c211c99;
}

#touch-stick span {
  position: absolute;
  inset: 29%;
  border-radius: 50%;
  background: #f3c687bf;
  pointer-events: none;
  transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
}

#touch-tip {
  position: absolute;
  top: max(3.65rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .65rem;
  border-radius: .45rem;
  background: #241a14c9;
  font-size: .8rem;
  white-space: nowrap;
}

#touch-hud[data-paused] #touch-stick,
#touch-hud[data-paused] .touch-actions,
#touch-hud[data-paused] #touch-tip { display: none; }

@media (orientation: landscape) and (max-height: 480px) {
  .card { padding-block: 1.25rem; }
  .subtitle { margin-bottom: .8rem; }
  .controls { margin-top: .6rem; }
}