:root {
  color-scheme: light;
  font-family: ui-monospace, "SFMono-Regular", "PingFang SC", "Microsoft YaHei", monospace;
  background: #a9aaa3;
  color: #171817;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }

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

body {
  min-height: 100dvh;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 18px),
    #a9aaa3;
}

button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app {
  width: min(100%, 480px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  background: #d7d7d0;
  border-inline: 2px solid #333;
}

.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.top-actions { display: flex; gap: 5px; }
.eyebrow { margin: 0 0 4px; color: #555752; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(23px, 7vw, 30px); line-height: 1; letter-spacing: -.06em; }
.text-button { border: 1px solid #333; background: transparent; min-height: 44px; padding: 0 10px; font-size: 10px; }
.text-button[aria-pressed="false"] { color: #666; background: #c6c6bf; }
.text-button:focus-visible, .jump:focus-visible, .primary:focus-visible, .secondary:focus-visible {
  outline: 3px solid #e8e868;
  outline-offset: 3px;
}

.hud {
  display: grid;
  grid-template-columns: 1.45fr .78fr .86fr;
  margin: 12px 0 8px;
  border: 2px solid #222;
  background: #ecece6;
}

.hud div { min-width: 0; padding: 7px 8px; border-right: 1px solid #777; }
.hud div:last-child { border-right: 0; }
.hud small { display: block; font-size: 9px; color: #666; }
.hud strong { font-size: 17px; line-height: 1; white-space: nowrap; }
.hud .distance-live strong { font-size: 23px; letter-spacing: -.05em; }
.hud em { margin-left: 3px; font-size: 10px; font-style: normal; letter-spacing: 0; }

.game-shell {
  position: relative;
  height: clamp(330px, 52dvh, 470px);
  overflow: hidden;
  border: 2px solid #222;
  background: #8d9d80;
  user-select: none;
  touch-action: none;
  cursor: pointer;
}

canvas { width: 100%; height: 100%; display: block; }

.message {
  position: absolute;
  inset: 14px 14px auto;
  padding: 10px 12px;
  border: 2px solid #111;
  background: rgba(238,238,230,.92);
  transform: rotate(-.5deg);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.message strong, .message span { display: block; }
.message strong { font-size: 19px; }
.message span { margin-top: 2px; font-size: 12px; color: #555; }
.message.dismissed { opacity: 0; transform: translateY(-10px) rotate(-.5deg); }

.event-caption {
  position: absolute;
  left: 50%;
  top: 26%;
  width: max-content;
  max-width: 84%;
  transform: translate(-50%, -50%) rotate(-1deg);
  padding: 9px 12px;
  border: 2px solid #111;
  background: #e8e868;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.effect {
  position: absolute;
  left: 8px;
  bottom: 7px;
  padding: 5px 7px;
  border: 1px solid #111;
  background: #ef7c45;
  color: #111;
  font-size: 10px;
  font-weight: 900;
  pointer-events: none;
}

.next-challenge {
  position: absolute;
  right: 8px;
  bottom: 7px;
  padding: 5px 7px;
  background: rgba(20,20,20,.82);
  color: #fff;
  font-size: 10px;
  pointer-events: none;
}

.jump {
  width: 100%;
  min-height: 104px;
  margin-top: 9px;
  border: 3px solid #171817;
  border-radius: 0;
  background: #ef7c45;
  color: #171817;
  box-shadow: 0 6px 0 #171817;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  user-select: none;
  touch-action: manipulation;
}

.jump strong { font-size: 34px; line-height: 1; }
.jump span { font-size: 11px; }
.jump:active, .jump.pressed { transform: translateY(5px); box-shadow: 0 1px 0 #171817; background: #e4e463; }
.jump:disabled { filter: grayscale(.75); opacity: .65; }

.game-line {
  margin: 13px 4px 0;
  color: #41423f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
}

.result {
  position: fixed;
  z-index: 10;
  inset: max(10px, env(safe-area-inset-top)) max(10px, calc((100vw - 460px) / 2 + 10px)) max(10px, env(safe-area-inset-bottom));
  overflow: auto;
  padding: 22px 18px;
  border: 3px solid #111;
  background: #eeeee6;
  box-shadow: 8px 8px 0 rgba(0,0,0,.35);
}

.result h2 { margin: 4px 0 14px; font-size: 34px; line-height: .98; letter-spacing: -.06em; }
.score { display: flex; align-items: baseline; gap: 6px; padding: 14px 0; border-block: 2px solid #222; }
.score strong { font-size: clamp(62px, 20vw, 96px); letter-spacing: -.08em; line-height: .8; }
.score span { font-weight: 900; }
.result-line { min-height: 40px; margin: 15px 0 8px; font-weight: 900; text-wrap: pretty; }
.best-line { margin: 0 0 18px; color: #555752; font-size: 12px; text-wrap: pretty; }
.map-code {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 9px 10px;
  border: 1px dashed #555752;
  color: #555752;
  font-size: 11px;
}
.map-code strong { color: #171817; font-size: 18px; letter-spacing: .08em; }

.primary, .secondary { width: 100%; min-height: 54px; border: 2px solid #111; font-weight: 900; }
.primary { background: #ef7c45; box-shadow: 0 4px 0 #111; font-size: 19px; }
.secondary { margin-top: 10px; background: transparent; }
.entrance-link {
  display: grid;
  place-items: center;
  color: #171817;
  text-decoration: none;
}
.copied { text-align: center; font-size: 11px; color: #315c38; }

[hidden] { display: none !important; }

@media (max-height: 700px) {
  .game-shell { height: 305px; }
  .jump { min-height: 82px; }
  .game-line { display: none; }
  .result { padding-block: 16px; }
  .result h2 { margin-bottom: 10px; font-size: 29px; }
  .score { padding-block: 10px; }
  .score strong { font-size: clamp(54px, 18vw, 76px); }
  .result-line { min-height: 0; margin-block: 11px 6px; }
  .best-line, .map-code { margin-bottom: 12px; }
  .primary, .secondary { min-height: 48px; }
}

@media (max-width: 360px) {
  .app { padding-inline: 9px; }
  .topbar { gap: 7px; }
  .top-actions { gap: 4px; }
  .text-button { padding-inline: 8px; }
  .hud div { padding-inline: 6px; }
  .message { inset-inline: 10px; }
  .message strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}