:root {
  --cream: #fff6e8;
  --ink: #2a2118;
  --accent: #ff8a3d;
  --mint: #6fd3b0;
  --danger: #ff5a6a;
  --card: rgba(255, 248, 236, 0.94);
  --shadow: 0 12px 40px rgba(42, 33, 24, 0.18);
  font-family: "Zen Maru Gothic", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #1a2430;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.app {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, #87c6ff 0%, #d9f0ff 45%, #fff6e8 100%);
}

.shake {
  position: absolute;
  inset: 0;
  will-change: transform;
}

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255, 80, 90, 0.55), transparent 55%),
    rgba(255, 255, 255, 0.35);
  opacity: 0;
  transition: opacity .08s linear;
}
.flash.is-on { opacity: 1; }

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: calc(10px + env(safe-area-inset-top)) 16px 8px;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.hud__who {
  margin: 0;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .75;
}
.hud__dist {
  margin: 2px 0 0;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 36px;
  line-height: 1;
}
.hud__dist small { font-size: 16px; margin-left: 2px; }
.hud__meta {
  margin: 4px 0 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  opacity: .85;
}
.hud__speed {
  font-weight: 700;
  color: #c45a12;
  background: rgba(255,248,236,.75);
  padding: 1px 8px;
  border-radius: 999px;
}
.hud__bar {
  margin: 8px auto 0;
  width: min(220px, 70%);
  height: 6px;
  border-radius: 99px;
  background: rgba(42,33,24,.12);
  overflow: hidden;
}
.hud__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mint), var(--accent));
  border-radius: inherit;
  transition: width .12s linear;
}
.hud__cp {
  margin: 4px 0 0;
  font-size: 11px;
  opacity: .7;
}

.welcome, .fail {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.85), transparent 55%),
    linear-gradient(180deg, rgba(135,198,255,.55), rgba(255,246,232,.96));
  text-align: center;
}
.welcome[hidden], .fail[hidden] { display: none !important; }

.fail.fail--pop {
  animation: failPop .45s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes failPop {
  0% { opacity: 0; transform: scale(.92) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.welcome__art, .fail__art {
  width: min(42vw, 180px);
  height: auto;
  border-radius: 28px;
  box-shadow: var(--shadow);
  background: var(--cream);
  object-fit: cover;
}
.welcome h1, .fail h2 {
  margin: 14px 0 8px;
  font-family: "Dela Gothic One", sans-serif;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 400;
}
.welcome__lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  opacity: .85;
}
.welcome__how {
  margin: 0 0 14px;
  padding: 10px 16px;
  list-style: none;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}
.welcome__best {
  margin: 0 0 14px;
  min-height: 1.2em;
  font-size: 13px;
  color: #7a5a2a;
}

.fail__art { width: min(36vw, 140px); }
.fail__dist { margin: 4px 0; font-size: 18px; }
.fail__best { margin: 0 0 16px; font-size: 13px; opacity: .8; }
.fail__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(260px, 100%);
}

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(180deg, #ff9a4d, var(--accent));
  box-shadow: 0 8px 0 #d86a20, var(--shadow);
  cursor: pointer;
}
.btn:active { transform: translateY(2px); box-shadow: 0 6px 0 #d86a20; }
.btn--ghost {
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 6px 0 rgba(42,33,24,.12), var(--shadow);
}
.btn--share {
  background: linear-gradient(180deg, #7be0bb, var(--mint));
  box-shadow: 0 8px 0 #3aa884, var(--shadow);
}

.hint {
  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 6;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,248,236,.88);
  font-size: 11px;
  pointer-events: none;
}
.hint[hidden] { display: none !important; }

@media (min-width: 481px) {
  .app {
    border-left: 1px solid rgba(0,0,0,.06);
    border-right: 1px solid rgba(0,0,0,.06);
  }
}

/* always-visible jump (Temple Run thumb zone, bottom-right) */
.jump-btn {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 7;
  width: 78px;
  height: 78px;
  border: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  font: inherit;
  color: #fff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), transparent 42%),
    linear-gradient(180deg, #6ecbff, #2f7fe0);
  box-shadow:
    0 10px 0 #1f5fad,
    0 14px 28px rgba(20, 50, 90, .35);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.jump-btn[hidden] { display: none !important; }
.jump-btn:active,
.jump-btn.is-press {
  transform: translateY(4px);
  box-shadow:
    0 6px 0 #1f5fad,
    0 8px 18px rgba(20, 50, 90, .3);
}
.jump-btn__ico {
  font-family: "Dela Gothic One", sans-serif;
  font-size: 26px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.jump-btn__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .95;
}
.hint {
  /* keep clear of jump button on the right */
  right: auto;
  left: 50%;
  max-width: calc(100% - 120px);
}

@media (max-width: 360px) {
  .jump-btn { width: 70px; height: 70px; }
  .jump-btn__ico { font-size: 22px; }
}