:root {
  --ink: #070b12;
  --foam: #e7f4f2;
  --gold: #e3c27a;
  --muted: #9bb8b4;
  --btn-navy: rgba(5, 22, 29, 0.94);
  --btn-teal: rgba(31, 111, 105, 0.54);
  --btn-line: rgba(106, 213, 193, 0.34);
  --btn-gold-line: rgba(227, 194, 122, 0.42);
  --safe-t: max(10px, env(safe-area-inset-top, 0px));
  --safe-r: max(14px, env(safe-area-inset-right, 0px));
  --safe-b: max(10px, env(safe-area-inset-bottom, 0px));
  --safe-l: max(14px, env(safe-area-inset-left, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

button {
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 2px solid rgba(109, 225, 205, 0.92);
  outline-offset: 2px;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #070b12;
  color: var(--foam);
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

#shell,
#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070b12;
}

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

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.safe {
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

#hud { z-index: 4; }
#screens { z-index: 5; }
#screens .screen.active { pointer-events: auto; }
#screens .screen.home.active { pointer-events: none; }
#screens .screen.home.active .home-top,
#screens .screen.home.active .home-bottom { pointer-events: auto; }
#rotate-gate { z-index: 30; pointer-events: auto; }

.hud-top,
.hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.hud-top {
  top: 0;
  justify-content: space-between;
  padding-top: calc(var(--safe-t) + 4px);
  min-height: calc(var(--safe-t) + 52px);
}

.hud-bottom {
  bottom: 0;
  justify-content: center;
  padding-bottom: calc(var(--safe-b) + 6px);
  transition: opacity 140ms ease, transform 160ms ease;
}

#hud.in-flight .hud-bottom {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.hud-hit,
.hud-upg,
.hud-coins {
  min-height: 44px;
  min-width: 44px;
}

#btn-pause {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--foam);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: transform 100ms ease, filter 140ms ease;
}

#btn-pause img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: 0.92;
  pointer-events: none;
}

#btn-pause span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.hud-distance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 2px 10px;
  text-align: center;
  text-shadow: 0 2px 10px #000;
}

#val-distance {
  font-size: clamp(20px, 4.6vh, 28px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

#val-best {
  font-size: clamp(9px, 2vh, 12px);
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}

#objective {
  position: absolute;
  top: calc(var(--safe-t) + 55px);
  left: 50%;
  max-width: min(72vw, 360px);
  margin: 0;
  padding: 5px 11px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid rgba(104, 184, 166, 0.28);
  border-radius: 999px;
  background: rgba(4, 18, 24, 0.62);
  color: rgba(226, 242, 237, 0.9);
  font-size: clamp(9px, 1.9vh, 11px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

#objective.done {
  border-color: rgba(227, 194, 122, 0.48);
  color: #ffe9a8;
}

#objective:empty { display: none; }

.hud-coins {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  text-shadow: 0 2px 8px #000;
}

.hud-coins img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.hud-coins span {
  font-size: clamp(15px, 3.2vh, 20px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hud-dock {
  display: flex;
  align-items: stretch;
  min-height: 58px;
  padding: 2px;
  gap: clamp(4px, 1vw, 8px);
}

.hud-upg {
  display: flex;
  align-items: center;
  gap: 8px;
  width: clamp(112px, 18vw, 140px);
  min-height: 56px;
  padding: 7px clamp(9px, 1.4vw, 13px);
  border: 1px solid var(--btn-line);
  background: linear-gradient(180deg, rgba(12, 42, 47, 0.82), var(--btn-navy));
  color: var(--foam);
  cursor: pointer;
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 5px 14px rgba(0, 0, 0, 0.22);
  transition: transform 100ms ease, filter 140ms ease, border-color 140ms ease;
}

.hud-upg-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 40px;
  overflow: hidden;
  line-height: 1;
}

.hud-upg img {
  width: clamp(24px, 4.2vh, 30px);
  height: clamp(24px, 4.2vh, 30px);
  object-fit: contain;
}

.hud-upg em {
  font-style: normal;
  font-size: clamp(9px, 1.9vh, 11px);
  letter-spacing: 0.12em;
  color: var(--gold);
  line-height: 1.05;
}

.hud-upg strong {
  font-size: clamp(13px, 2.7vh, 16px);
  line-height: 1.05;
}

.hud-upg small {
  font-size: clamp(10px, 2.1vh, 12px);
  color: #d2e5df;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.hud-upg.insufficient {
  border-color: rgba(155, 184, 177, 0.08);
}

.hud-upg.insufficient small { color: rgba(155, 184, 177, 0.62); }
.hud-upg.maxed { opacity: 0.72; }

.hud-upg.pulse,
.upg-chip.pulse {
  animation: tap-pulse 0.2s ease;
}

@keyframes tap-pulse {
  50% { transform: scale(0.96); filter: brightness(1.2); }
}

#hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-b) + 70px);
  width: max-content;
  max-width: calc(100vw - 28px);
  margin: 0 auto;
  padding: 7px 12px;
  text-align: center;
  color: rgba(231, 244, 242, 0.94);
  background: rgba(5, 14, 19, 0.58);
  border-radius: 999px;
  font-size: clamp(10px, 2.45vh, 13px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#hint span { color: var(--gold); padding: 0 3px; }

#tutorial-guide {
  position: absolute;
  z-index: 34;
  left: 50%;
  bottom: calc(var(--safe-b) + 76px);
  width: min(60vw, 390px);
  min-width: 310px;
  min-height: 104px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 54px 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(238, 203, 119, 0.36);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 50%, rgba(66, 201, 184, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(5, 22, 27, 0.95), rgba(9, 34, 38, 0.9));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.06);
  color: #effaf6;
  pointer-events: none;
  transform: translate(-50%, 10px);
  opacity: 0;
}

#tutorial-guide.show {
  animation: guide-enter 0.32s ease-out forwards;
}

@keyframes guide-enter {
  to { opacity: 1; transform: translate(-50%, 0); }
}

.guide-motion {
  position: relative;
  width: 82px;
  height: 78px;
}

.guide-target {
  position: absolute;
  left: 10px;
  top: 11px;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(101, 222, 203, 0.52);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(101, 222, 203, 0.28);
  animation: guide-target 3.2s ease-in-out infinite;
}

.guide-power {
  position: absolute;
  right: 0;
  top: 6px;
  width: 9px;
  height: 66px;
  overflow: hidden;
  border: 1px solid rgba(239, 248, 244, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.32);
}

.guide-power i {
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  background: linear-gradient(to top, #42c9b8 0 54%, #f0c96e 54% 78%, #e7705b 78%);
  transform: scaleY(0.08);
  transform-origin: bottom;
  animation: guide-charge 3.2s ease-in-out infinite;
}

.guide-power b {
  position: absolute;
  left: -3px;
  right: -3px;
  top: 19%;
  height: 2px;
  background: #fff3b7;
  box-shadow: 0 0 6px rgba(255, 229, 150, 0.9);
}

.guide-finger {
  position: absolute;
  left: 28px;
  top: 26px;
  width: 17px;
  height: 34px;
  border: 2px solid #fff1cb;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(#f5d99d, #c99561);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.42));
  transform-origin: center bottom;
  animation: guide-finger 3.2s ease-in-out infinite;
}

.guide-finger::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: -5px;
  width: 31px;
  height: 17px;
  border: 2px solid #fff1cb;
  border-radius: 12px 12px 8px 8px;
  background: #c99561;
}

.guide-finger i {
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 5px;
  width: 3px;
  height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.54);
}

.guide-shot {
  position: absolute;
  left: 46px;
  top: 29px;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fff5b5, rgba(111, 227, 211, 0));
  transform-origin: left;
  opacity: 0;
  animation: guide-shot 3.2s ease-in-out infinite;
}

@keyframes guide-finger {
  0%, 8%, 100% { opacity: 0; transform: translateY(-13px) scale(1); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  24%, 62% { opacity: 1; transform: translateY(2px) scale(0.94); }
  72% { opacity: 1; transform: translateY(-15px) scale(1); }
  80% { opacity: 0; transform: translateY(-18px) scale(1); }
}

@keyframes guide-target {
  0%, 14%, 72%, 100% { transform: scale(0.86); opacity: 0.32; box-shadow: 0 0 0 0 rgba(101, 222, 203, 0); }
  24%, 62% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 9px rgba(101, 222, 203, 0.08); }
}

@keyframes guide-charge {
  0%, 18%, 100% { transform: scaleY(0.08); }
  62%, 69% { transform: scaleY(0.78); }
  74% { transform: scaleY(0.04); }
}

@keyframes guide-shot {
  0%, 68%, 100% { opacity: 0; transform: scaleX(0.1) translateX(0); }
  73% { opacity: 1; transform: scaleX(1) translateX(0); }
  83% { opacity: 0; transform: scaleX(1.8) translateX(18px); }
}

.guide-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.guide-copy small {
  color: #e8c77c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.guide-copy strong {
  color: #f7fff9;
  font-size: clamp(15px, 3.2vh, 19px);
  line-height: 1.05;
  letter-spacing: 0.055em;
}

.guide-copy span {
  color: rgba(222, 239, 234, 0.8);
  font-size: clamp(10px, 2.1vh, 12px);
  line-height: 1.3;
}

#btn-skip-guide {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 5px 7px;
  border: 1px solid rgba(231, 244, 239, 0.2);
  border-radius: 7px;
  background: rgba(17, 55, 56, 0.66);
  color: rgba(229, 241, 237, 0.8);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: auto;
}

#tutorial-guide.release .guide-target {
  border-color: rgba(240, 201, 110, 0.86);
}

@media (prefers-reduced-motion: reduce) {
  #tutorial-guide.show { animation: none; opacity: 1; transform: translate(-50%, 0); }
  .guide-target, .guide-power i, .guide-finger, .guide-shot { animation: none; }
  .guide-target { opacity: 1; transform: none; }
  .guide-power i { transform: scaleY(0.72); }
  .guide-finger { opacity: 1; transform: none; }
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
}

.screen.active { display: flex; }

.screen.home {
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    to bottom,
    rgba(6, 10, 16, 0.22) 0%,
    transparent 20%,
    transparent 64%,
    rgba(6, 10, 16, 0.28) 86%,
    rgba(6, 10, 16, 0.48) 100%
  );
  pointer-events: none;
}

.home-top {
  display: flex;
  justify-content: center;
  padding-top: calc(var(--safe-t) + 0.6vh);
}

.home-brand {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  margin: 0;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.42));
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

.brand-overline,
.brand-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  width: 100%;
}

.brand-overline b {
  color: #f2f8f5;
  font-size: clamp(15px, 3.1vh, 23px);
  font-weight: 900;
  letter-spacing: clamp(0.22em, 0.7vw, 0.38em);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.68);
}

.brand-overline i,
.brand-tagline i {
  display: block;
  width: clamp(24px, 5vw, 58px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 194, 122, 0.9));
}

.brand-overline i:last-child,
.brand-tagline i:last-child {
  transform: scaleX(-1);
}

.brand-title {
  color: var(--gold);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: clamp(36px, 9.5vh, 68px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: clamp(0.1em, 0.55vw, 0.18em);
  text-indent: 0.16em;
  text-shadow:
    0 1px 0 #fff0b8,
    0 3px 0 rgba(87, 53, 14, 0.72),
    0 6px 14px rgba(0, 0, 0, 0.52);
  -webkit-text-stroke: 1px rgba(77, 47, 12, 0.5);
}

.brand-tagline {
  margin-top: 5px;
}

.brand-tagline b {
  color: rgba(225, 239, 235, 0.88);
  font-size: clamp(7px, 1.45vh, 10px);
  font-weight: 800;
  letter-spacing: clamp(0.16em, 0.4vw, 0.25em);
  white-space: nowrap;
}

.brand-tagline i {
  width: clamp(18px, 3vw, 36px);
  background: linear-gradient(90deg, transparent, rgba(89, 211, 194, 0.72));
}

.home-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.2vh, 10px);
  padding-bottom: calc(var(--safe-b) + 2.4vh);
}

.cta-play {
  width: clamp(210px, 40vw, 260px);
  height: auto;
  aspect-ratio: 640 / 219;
}

.cta-play span { font-size: clamp(17px, 4vh, 23px); }
.home #btn-play {
  width: clamp(225px, 41vw, 270px);
  filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.36));
}

.home #btn-play img {
  filter: saturate(0.96) contrast(1.04) brightness(1.04);
}

.home #btn-play span {
  color: #fff4ce;
  font-size: clamp(19px, 4.4vh, 25px);
  letter-spacing: clamp(0.12em, 0.35vw, 0.18em);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
}

.home #btn-range {
  min-width: clamp(166px, 27vw, 204px);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px clamp(22px, 3.5vw, 30px);
  border-color: rgba(227, 194, 122, 0.58);
  background: linear-gradient(180deg, rgba(18, 61, 62, 0.92), rgba(4, 22, 29, 0.96));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.07),
    inset 0 -1px rgba(0, 0, 0, 0.32),
    0 6px 15px rgba(0, 0, 0, 0.28);
  color: #edf7f4;
  font-size: clamp(11px, 2.35vh, 14px);
}

.home #btn-range::before,
.home #btn-range::after {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border: 1px solid rgba(227, 194, 122, 0.82);
  transform: rotate(45deg);
}

.home-link {
  min-height: 44px;
  min-width: clamp(122px, 20vw, 168px);
  padding: clamp(10px, 2vh, 13px) clamp(24px, 4vw, 32px);
  border: 1px solid var(--btn-gold-line);
  background: linear-gradient(180deg, rgba(14, 47, 51, 0.78), rgba(5, 20, 27, 0.88));
  color: rgba(239, 248, 245, 0.96);
  border-radius: 10px;
  font-size: clamp(11px, 2.25vh, 14px);
  font-weight: 800;
  letter-spacing: clamp(0.08em, 0.25vw, 0.14em);
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 100ms ease, filter 140ms ease, border-color 140ms ease;
}

.cta {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: var(--foam);
  transition: transform 100ms ease, filter 140ms ease;
}

.cta:active, .home-link:active, .hud-upg:active, #btn-pause:active {
  transform: scale(0.97) translateY(1px);
}

.cta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.cta span {
  position: absolute;
  inset: 16% 16% 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  line-height: 1;
  letter-spacing: clamp(0.08em, 0.3vw, 0.14em);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

.cta:disabled,
.home-link:disabled,
.hud-upg:disabled {
  opacity: 0.48;
  cursor: default;
  filter: saturate(0.45);
}

.screen.overlay {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background: rgba(5, 8, 14, 0.42);
}

.screen.result {
  background: rgba(5, 10, 16, 0.38);
}

.result-card {
  width: min(74vw, 348px);
  max-height: min(86vh, 480px);
  overflow: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 14px 9px;
  background: rgba(7, 16, 22, 0.78);
  border: 1px solid rgba(227, 194, 122, 0.22);
  border-radius: 16px;
}

.result-card .cta-play {
  width: min(72%, 220px);
  height: auto;
  aspect-ratio: 640 / 219;
}

.result-card .cta-play span {
  white-space: nowrap;
  font-size: clamp(14px, 2.8vh, 18px);
  letter-spacing: clamp(0.07em, 0.2vw, 0.11em);
}

.result-coins {
  margin: 0;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tagline.best {
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(12px, 2.7vh, 15px);
  font-weight: 800;
}

.result-progress {
  min-height: 14px;
  margin: 0;
  color: #d8ebe6;
  font-size: clamp(10px, 2.2vh, 12px);
  font-weight: 700;
  text-align: center;
}

.result-upg {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: center;
  margin: 4px 0 6px;
}

.upg-chip {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--btn-line);
  background: linear-gradient(180deg, rgba(11, 38, 43, 0.82), rgba(4, 17, 23, 0.9));
  color: var(--foam);
  cursor: pointer;
  border-radius: 10px;
  padding: 5px clamp(5px, 1vw, 9px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 4px 10px rgba(0, 0, 0, 0.16);
  transition: transform 100ms ease, filter 140ms ease, border-color 140ms ease;
}

.upg-chip img { width: 22px; height: 22px; object-fit: contain; }
.upg-chip .name {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(8px, 1.65vh, 9px);
  letter-spacing: 0.08em;
  color: var(--gold);
  line-height: 1.2;
  white-space: nowrap;
}
.upg-chip .lv { font-size: 13px; font-weight: 800; }
.upg-chip .cost {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(9px, 1.8vh, 10px);
  color: #d2e5df;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.upg-chip.insufficient {
  opacity: 0.54;
  border-color: rgba(155, 184, 177, 0.08);
}
.upg-chip:disabled {
  opacity: 0.52;
  color: rgba(231, 244, 242, 0.78);
  cursor: default;
  filter: saturate(0.52);
}

#toast {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 12;
  padding: 8px 14px;
  background: rgba(8, 14, 18, 0.78);
  color: var(--foam);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 10px;
}

#toast.show { animation: tap-pulse 0.2s ease; }

#unlock-toast {
  position: absolute;
  top: calc(var(--safe-t) + 12px);
  right: calc(var(--safe-r) + 12px);
  z-index: 14;
  width: min(270px, calc(100vw - var(--safe-l) - var(--safe-r) - 24px));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(227, 194, 122, 0.42);
  border-radius: 12px;
  background: rgba(5, 17, 22, 0.94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

#unlock-toast.show { animation: unlock-in 0.28s ease-out; }
#unlock-toast > span {
  grid-column: 1 / -1;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}
#unlock-toast > strong {
  min-width: 0;
  color: var(--foam);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#btn-view-unlock {
  min-height: 44px;
  min-width: 104px;
  padding: 11px 16px;
  border: 1px solid var(--btn-gold-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(28, 102, 96, 0.62), var(--btn-navy));
  color: var(--foam);
  font: 800 clamp(9px, 1.8vh, 11px)/1 "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 100ms ease, filter 140ms ease, border-color 140ms ease;
}

@keyframes unlock-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen.panel {
  justify-content: flex-start;
  gap: clamp(4px, 1vh, 10px);
  padding: var(--safe-t) 0 var(--safe-b);
  background: rgba(5, 10, 16, 0.54);
  overflow: hidden;
}

.boot-logo {
  width: auto;
  height: min(16vh, 96px);
  object-fit: contain;
}

.load-track {
  width: min(46vw, 320px);
  height: 6px;
  background: rgba(255,255,255,0.12);
}

#load-fill {
  width: 0%;
  height: 100%;
  background: #e3c27a;
}

.tagline, .kicker, #load-label, .fine {
  margin: 0;
  color: var(--muted);
}

.tagline:empty { display: none; }

.kicker {
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.2em;
}

.hero-num {
  margin: 0;
  font-size: clamp(28px, 7vh, 64px);
  font-weight: 700;
}

.btn-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(72vw, 360px);
}

.audio-settings {
  width: min(72vw, 320px);
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  color: var(--foam);
  background: rgba(7, 17, 23, 0.74);
  border: 1px solid rgba(106, 213, 193, 0.16);
  border-radius: 12px;
}

.audio-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.audio-toggle {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(106, 213, 193, 0.2);
  border-radius: 8px;
  background: rgba(8, 33, 37, 0.64);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.audio-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.audio-toggle b {
  min-width: 32px;
  padding: 5px 6px;
  border-radius: 999px;
  background: rgba(93, 111, 108, 0.32);
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.audio-toggle input:checked ~ b {
  background: rgba(41, 146, 131, 0.38);
  color: #e6fbf6;
  box-shadow: inset 0 0 0 1px rgba(104, 225, 204, 0.32);
}

.audio-toggle input:focus-visible ~ b {
  outline: 2px solid rgba(109, 225, 205, 0.92);
  outline-offset: 2px;
}

.audio-level {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  font-size: 11px;
  font-weight: 700;
}

.audio-level input {
  width: 100%;
  accent-color: #58d6c6;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px;
  background: rgba(7, 11, 18, 0.55);
  color: var(--foam);
  font-size: 15px;
}

.chip img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.panel-head, .panel-foot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.panel-head h1 {
  margin: 0;
  font-size: clamp(18px, 3.4vh, 28px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 60px;
}

.panel-foot .cta {
  grid-column: 2;
  width: clamp(180px, 30vw, 210px);
  height: auto;
  aspect-ratio: 640 / 219;
  margin: 0;
}

.panel-foot .home-link {
  grid-column: 3;
  justify-self: end;
  min-width: 104px;
}

.panel-foot .cta span { font-size: clamp(12px, 2.2vh, 15px); }

.tabs {
  width: 100%;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(155, 184, 180, 0.12);
}

.tab {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px clamp(8px, 2vw, 18px);
  font-size: clamp(10px, 2vh, 12px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: color 140ms ease, background-color 140ms ease, transform 100ms ease;
}

.tab.on {
  color: var(--gold);
  background: linear-gradient(180deg, transparent, rgba(25, 88, 81, 0.2));
}
.tab.on::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(227, 194, 122, 0.35);
}

.panel-body {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
  align-content: center;
  align-items: stretch;
  padding-top: 4px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

.panel-body::-webkit-scrollbar,
.result-card::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(8px, 1.4vh, 14px);
  color: var(--foam);
  text-align: center;
  background: rgba(6, 17, 22, 0.62);
  border: 1px solid rgba(107, 220, 197, 0.16);
  border-radius: 14px;
  scroll-snap-align: center;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.card-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.card img.thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  flex-shrink: 0;
}

.striker-card {
  flex: 0 0 clamp(156px, 22vw, 210px);
  height: min(100%, clamp(190px, 48vh, 350px));
}

.striker-card .card-preview {
  order: 2;
  flex: 1 1 auto;
  min-height: 86px;
}

.striker-card h3 { order: 1; }
.striker-card p { order: 3; }
.striker-card .mini { order: 4; }

.striker-card img.thumb {
  width: 100%;
  height: 100%;
}

.card.selected {
  border-color: rgba(229, 194, 122, 0.78);
  background: rgba(13, 69, 68, 0.76);
  box-shadow: inset 0 0 0 1px rgba(88, 214, 198, 0.2), 0 8px 20px rgba(0, 0, 0, 0.22);
}

.striker-card.selected {
  transform: scale(1.018);
}

.card.locked {
  opacity: 0.82;
}

.card.locked img.thumb {
  opacity: 0.72;
  filter: saturate(0.72);
}

.striker-card:not(.locked):not(.selected):active {
  transform: scale(0.985);
}

#range-body.strikers-strip,
#range-body.tab-orbs,
#range-body.tab-ranges {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x;
}

#range-body.dragging,
#range-body.wheel-scrolling {
  cursor: grabbing;
  scroll-snap-type: none;
}

#range-body.content-fits {
  justify-content: center;
}

.orb-card {
  flex: 0 0 clamp(184px, 24vw, 260px);
  height: min(100%, clamp(180px, 43vh, 310px));
}

.orb-card .card-preview {
  height: clamp(82px, 20vh, 160px);
}

.orb-card img.thumb {
  max-width: 150px;
}

.range-card {
  flex: 0 0 clamp(210px, 28vw, 330px);
  height: min(100%, clamp(180px, 42vh, 300px));
}

.range-card .card-preview {
  order: 1;
  width: 100%;
  height: clamp(82px, 18vh, 150px);
  border-radius: 10px;
}

.range-card h3 { order: 2; }
.range-card p { order: 3; }
.range-card .mini { order: 4; }
.range-card img.thumb { object-position: center; }

.card h3 {
  margin: 0;
  max-width: 100%;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12px, 2vh, 16px);
  letter-spacing: 0.07em;
}

.card p {
  min-height: 15px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(10px, 1.7vh, 12px);
  line-height: 1.15;
}

.mini {
  min-height: 44px;
  padding: clamp(10px, 2vh, 13px) clamp(16px, 2.6vw, 24px);
  border: 1px solid var(--btn-line);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(12, 47, 49, 0.78), rgba(5, 22, 28, 0.92));
  color: #edf8f5;
  cursor: pointer;
  font-size: clamp(10px, 1.9vh, 12px);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 4px 10px rgba(0, 0, 0, 0.16);
  transition: transform 100ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease;
}

.card .mini,
.upgrade-card .mini {
  width: 100%;
}

.card.selected .mini {
  color: #ffe9a8;
  border-color: rgba(227, 194, 122, 0.62);
  background: linear-gradient(180deg, rgba(77, 68, 37, 0.5), rgba(15, 38, 37, 0.9));
}

.mini:disabled {
  color: rgba(196, 216, 211, 0.7);
  border-color: rgba(135, 168, 161, 0.14);
  cursor: default;
  opacity: 0.62;
  filter: saturate(0.45);
}

.card.selected .mini:disabled {
  color: #ffe9a8;
  border-color: rgba(227, 194, 122, 0.62);
  opacity: 1;
  filter: none;
}

.result-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  height: min(100%, clamp(180px, 44vh, 300px));
  padding: clamp(9px, 1.5vh, 15px);
  text-align: center;
  background: rgba(6, 17, 22, 0.64);
  border: 1px solid rgba(107, 220, 197, 0.16);
  border-radius: 14px;
}

.upgrade-card h3 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(13px, 2.2vh, 17px);
  letter-spacing: 0.12em;
}

.upgrade-card .card-preview {
  width: clamp(46px, 8vh, 72px);
  height: clamp(46px, 8vh, 72px);
}

.upgrade-card img.thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upgrade-level {
  color: var(--foam);
  font-size: clamp(17px, 3.2vh, 25px);
}

.upgrade-cost {
  min-height: 15px;
  margin: 0;
  color: #d2e5df;
  font-size: clamp(10px, 1.8vh, 13px);
  font-variant-numeric: tabular-nums;
}

.upgrade-card.insufficient { opacity: 0.68; }
.upgrade-card.maxed { border-color: rgba(227, 194, 122, 0.28); }

#rotate-gate {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #070b12;
  text-align: center;
  padding: 24px;
}

#rotate-gate.show { display: flex; }

#rotate-gate img {
  width: min(42vw, 240px);
  height: auto;
  object-fit: contain;
}

.rotate-title {
  margin: 0;
  font-size: clamp(18px, 4vh, 28px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini:active,
.upg-chip:active,
#btn-view-unlock:active,
.tab:active {
  transform: scale(0.97) translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
  .cta:not(:disabled):hover,
  .home-link:not(:disabled):hover,
  .hud-upg:not(:disabled):hover,
  .upg-chip:not(:disabled):hover,
  .mini:not(:disabled):hover,
  #btn-view-unlock:not(:disabled):hover,
  #btn-pause:not(:disabled):hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }

  .tab:not(.on):hover {
    color: #dcece8;
    background: rgba(23, 74, 70, 0.14);
  }
}

#hud.hidden, #hint.hidden { visibility: hidden; }

@media (max-height: 430px) {
  .result-card {
    gap: 3px;
    padding: 8px 12px 6px;
  }
  .result-card .result-upg { margin-top: 2px; margin-bottom: 3px; }
  .result-progress { min-height: 12px; line-height: 1.1; }
}

@media (max-height: 380px) {
  .home-brand { gap: 0; }
  .brand-overline b { font-size: 14px; }
  .brand-title { font-size: 36px; }
  .brand-tagline { margin-top: 3px; }
  .brand-tagline b { font-size: 7px; }
  .home #btn-play, .btn-col .cta-play { width: 220px; }
  .home #btn-range { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .hud-upg {
    width: clamp(112px, 18vw, 120px);
    min-height: 52px;
    padding: 4px 8px;
  }
  .hud-upg img { width: 23px; height: 23px; }
  #hint { bottom: calc(var(--safe-b) + 64px); }
  #tutorial-guide {
    bottom: calc(var(--safe-b) + 70px);
    width: min(60vw, 356px);
    min-width: 292px;
    min-height: 88px;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 56px 8px 9px;
    border-radius: 13px;
  }
  .guide-motion { width: 68px; height: 66px; transform: scale(0.84); transform-origin: center; }
  .guide-copy strong { font-size: 14px; }
  .guide-copy span { font-size: 9px; }
  #btn-skip-guide { top: 7px; right: 7px; }
  .result-card {
    width: min(76vw, 336px);
    gap: 3px;
    padding: 6px 12px 5px;
  }
  .result-card .hero-num { font-size: clamp(28px, 7vh, 40px); line-height: 1; }
  .result-card .result-upg { margin-top: 1px; margin-bottom: 2px; }
  .result-card .cta-play { width: 190px; height: auto; }
  .upg-chip { min-height: 50px; }
  .screen.panel { gap: 3px; }
  .panel-head { min-height: 32px; }
  .panel-head h1 { font-size: 17px; }
  .panel-head .chip { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
  .tabs .tab { min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 10px; }
  .panel-body { gap: 7px; padding-top: 2px; padding-bottom: 2px; }
  .panel-foot { min-height: 60px; }
  .panel-foot .cta { width: 180px; height: auto; }
  .panel-foot .home-link { min-height: 44px; padding-left: 18px; padding-right: 18px; }
  .card, .upgrade-card { gap: 3px; padding: 6px; }
  .card .mini, .upgrade-card .mini { min-height: 44px; }
  .striker-card { height: min(100%, 190px); }
  .striker-card .card-preview { min-height: 78px; }
  .orb-card, .range-card, .upgrade-card { height: min(100%, 184px); }
  .orb-card .card-preview, .range-card .card-preview { height: 78px; }
  .upgrade-card .card-preview { width: 42px; height: 42px; }
  .card p, .upgrade-cost { font-size: 10px; }
}