/* HUD WRAPPER */
.game-hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  --voice-level: 0;
  --voice-sweep: 0deg;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --aim-size: clamp(190px, min(66vmin, 42dvh), 320px);
  font-family: "Saira", Arial, Helvetica, sans-serif;
}

.game-hud::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/ui/BG Hover.png") center / cover no-repeat;
  opacity: 0.95;
}

/* TOP HUD */
.top-hud {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: calc(var(--safe-top) + clamp(12px, 4dvh, 44px));
  padding-left: calc(var(--safe-left) + clamp(12px, 4vw, 24px));
  padding-right: calc(var(--safe-right) + clamp(12px, 4vw, 24px));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}

.hud-spacer {
  width: clamp(58px, 15vw, 76px);
  flex-shrink: 0;
}

.timer-card {
  position: relative;
  width: clamp(96px, min(29vw, 16dvh), 138px);
  aspect-ratio: 239 / 161;
  padding: 0 clamp(14px, 4vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url("../assets/ui/timer_frame.svg") center / 100% 100% no-repeat;
  border: none;
  clip-path: none;
  box-shadow: none;
}

.hud-value,
.timer-value {
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1;
  color: #73ff76;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(92, 255, 103, 0.38);
}

.timer-value {
  transform: translateY(-1px);
}

/* AIM MARKER */
.aim-area {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--aim-size);
  height: var(--aim-size);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: 2;
  pointer-events: none;
  opacity: 0.96;
  contain: layout paint style;
}

.target-brackets {
  position: absolute;
  inset: 0;
  background: url("../assets/ui/target_brackets.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 11px rgba(95, 255, 94, 0.5));
  transform-origin: center center;
}

.voice-meter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 58%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  filter:
    drop-shadow(0 0 12px rgba(179, 255, 67, 0.32))
    drop-shadow(0 7px 14px rgba(0, 0, 0, 0.25));
}

.voice-meter-empty,
.voice-meter-fill {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.voice-meter-empty {
  background-image: url("../assets/ui/voice_meter_empty.png");
}

.voice-meter-fill {
  background-image: url("../assets/ui/voice_meter_fill_full.png");
  transform: rotate(-96deg);
  transform-origin: center center;
  transition: mask-image 80ms ease-out, -webkit-mask-image 80ms ease-out;
  -webkit-mask-image: conic-gradient(#000 0deg var(--voice-sweep), transparent var(--voice-sweep) 360deg);
  mask-image: conic-gradient(#000 0deg var(--voice-sweep), transparent var(--voice-sweep) 360deg);
}

.aim-brackets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 11px rgba(95, 255, 94, 0.5));
}

.aim-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
  pointer-events: auto;
  cursor: crosshair;
  filter: drop-shadow(0 0 12px rgba(179, 255, 67, 0.4));
  -webkit-tap-highlight-color: transparent;
}

.aim-area.catch-flash .aim-brackets,
.aim-area.catch-flash .aim-track {
  filter: brightness(1.9) drop-shadow(0 0 22px rgba(179, 255, 67, 1));
  transition: filter 0.05s ease-out;
}

.aim-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(9px, 3vmin, 14px);
  height: clamp(9px, 3vmin, 14px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #d9ff31;
  box-shadow: 0 0 18px rgba(216, 255, 49, 0.9);
}

.aim-area.miss .target-brackets,
.aim-area.miss .voice-meter {
  filter:
    hue-rotate(104deg)
    saturate(1.7)
    drop-shadow(0 0 11px rgba(255, 80, 80, 0.5));
}

/* BOTTOM HUD */
.bottom-hud {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(22px, 4dvh, 42px));
  left: 0;
  width: 100%;
  padding: 0 clamp(20px, 8vw, 46px);
  z-index: 2;
  pointer-events: none;
}

.score-strip {
  width: 100%;
  max-width: 420px;
  margin: 0 auto clamp(8px, 1.6dvh, 14px);
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 1.2vw, 8px);
}

.score-strip .hud-value {
  min-width: clamp(68px, 18vw, 88px);
  color: #ffffff;
  font-size: clamp(42px, 13vw, 62px);
  line-height: 0.8;
  text-align: right;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
}

.chili-slots {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0px, 1vw, 5px);
}

.chili-slot {
  width: 100%;
  aspect-ratio: 144 / 176;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.28));
  opacity: 0.96;
}

.chili-slot.active {
  filter:
    drop-shadow(0 4px 0 rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 14px rgba(179, 255, 60, 0.38));
  opacity: 1;
}

.hint-box {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 745 / 106;
  padding: 0 clamp(28px, 8vw, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
  font-weight: 600;
  font-size: clamp(12px, 3.1vw, 14px);
  line-height: 1.12;
  background: url("../assets/ui/hint_panel_frame.png") center / 100% 100% no-repeat;
  border: none;
  clip-path: none;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.28),
    0 0 14px rgba(103, 255, 71, 0.12);
}

.catch-btn {
  width: 100%;
  max-width: 520px;
  height: clamp(64px, 12vh, 84px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 24px;
  color: #09210d;
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 900;
  letter-spacing: 1.5px;
  font-family: "Saira", Arial, Helvetica, sans-serif;
  background: linear-gradient(160deg, #e8ff8a 0%, #3dd95b 100%);
  box-shadow:
    0 20px 44px rgba(92, 255, 77, 0.40),
    0 4px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.catch-btn:active {
  transform: scale(0.92) translateY(3px);
  box-shadow:
    0 6px 16px rgba(92, 255, 77, 0.22),
    0 0 0 rgba(0, 0, 0, 0),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.catch-btn-icon {
  width: clamp(28px, 7.5vw, 38px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* INTRO & RESULT SCREEN */
.screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at top, rgba(104, 255, 61, 0.18), transparent 42%),
    linear-gradient(to bottom, rgba(4, 21, 5, 0.34), rgba(2, 8, 3, 0.58));
}

.screen.active {
  display: flex;
}

#introScreen {
  width: 100vw;
  height: var(--app-height);
  min-height: var(--app-height);
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background-color: #041006;
  isolation: isolate;
  --home-logo-width: clamp(224px, min(84vw, 36dvh), 292px);
  --home-panel-width: auto;
  --home-logo-top: calc(env(safe-area-inset-top, 0px) + clamp(126px, 24dvh, 202px));
  --home-panel-top: calc(env(safe-area-inset-top, 0px) + clamp(360px, 57dvh, 510px));
  --home-start-width: clamp(154px, min(58vw, 24dvh), 204px);
  --home-start-offset: 0px;
  --home-panel-height: 0px;
  --home-start-height: clamp(36px, min(13vw, 5.6dvh), 48px);
  --home-content-height: calc(
    var(--home-panel-top) +
    var(--home-panel-height) +
    var(--home-start-offset) +
    var(--home-start-height) +
    env(safe-area-inset-bottom, 0px) +
    18px
  );
}

#introScreen.screen.active {
  display: block;
}

.home-bg-image {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-height);
  display: block;
  pointer-events: none;
  user-select: none;
}

.home-bg-image {
  z-index: 0;
  object-fit: cover;
  object-position: center top;
}

#introScreen .intro-card {
  position: relative;
  z-index: 2;
}

.intro-card,
.result-card {
  width: 100%;
  max-width: min(440px, calc(100vw - 28px));
  max-height: min(92dvh, 820px);
  overflow-y: auto;
  padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 24px);
  border-radius: 22px;
  text-align: center;
  color: white;
  background:
    linear-gradient(180deg, rgba(16, 31, 17, 0.95), rgba(8, 18, 10, 0.94));
  border: 1px solid rgba(202, 255, 114, 0.2);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.logo-badge {
  width: clamp(62px, 16vw, 84px);
  height: clamp(62px, 16vw, 84px);
  margin: 0 auto clamp(10px, 3vw, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #d6ff7a, #1faa3d);
  box-shadow: 0 16px 36px rgba(77, 255, 76, 0.25);
  overflow: hidden;
}

.logo-image {
  width: 74%;
  height: 74%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.22));
}

.intro-card h1,
.result-card h1 {
  font-size: clamp(24px, 7vw, 32px);
  line-height: 1.12;
  margin-bottom: 12px;
}

.intro-desc {
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 20px;
}

.intro-desc b {
  color: #caff72;
}

/* HOW TO / LEADERBOARD */
.how-to-box,
.leaderboard-box {
  margin: clamp(12px, 3vw, 18px) 0 clamp(14px, 4vw, 22px);
  padding: clamp(12px, 3vw, 16px);
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(202, 255, 114, 0.16);
}

.how-to-box h3,
.leaderboard-box h3 {
  margin-bottom: 10px;
  font-size: clamp(14px, 3.6vw, 16px);
  color: #caff72;
}

.how-to-box ul {
  padding-left: 18px;
}

.how-to-box li {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(12px, 3.2vw, 14px);
}

/* BUTTON */
.primary-btn,
.secondary-btn {
  width: 100%;
  min-height: clamp(48px, 8vh, 58px);
  border: none;
  border-radius: 16px;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 900;
  margin-top: 10px;
  cursor: pointer;
}

.primary-btn {
  color: #09210d;
  background: linear-gradient(135deg, #d6ff7a, #45e05f);
  box-shadow: 0 16px 36px rgba(92, 255, 77, 0.28);
}

.secondary-btn {
  color: white;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(202, 255, 114, 0.2);
}

.primary-btn:disabled,
.secondary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* HOME SCREEN */
.home-card {
  width: 100vw;
  max-width: 100vw;
  height: max(var(--app-height), var(--home-content-height));
  min-height: max(var(--app-height), var(--home-content-height));
  max-height: none;
  overflow: visible;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4dvh, 34px);
}

.home-logo-image {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: var(--home-logo-width);
  height: auto;
  display: block;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

.home-panel-wrap {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--home-panel-width);
  margin-top: 0;
}

.home-panel-image {
  display: none;
}

.home-start-btn {
  width: var(--home-start-width);
  min-height: 0;
  height: auto;
  margin-top: clamp(-22px, -2.8dvh, -10px);
  position: relative;
  z-index: 2;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.home-start-image {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.40));
}

/* CARI & TAP TUTORIAL */
.tutorial-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  width: 100vw;
  height: var(--app-height);
  min-height: var(--app-height);
  overflow: hidden;
  background-color: #041006;
  font-family: "Saira", Arial, Helvetica, sans-serif;
}

.tutorial-screen.active {
  display: block;
}

.tutorial-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: var(--app-height);
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}

.tutorial-card {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: var(--app-height);
  min-height: var(--app-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
}

.tutorial-logo {
  position: relative;
  z-index: 2;
  width: clamp(158px, min(66vw, 27dvh), 224px);
  height: auto;
  margin-bottom: clamp(-24px, -3.4dvh, -12px);
  display: block;
  transform: translateY(clamp(-18px, -2.2dvh, -8px));
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.tutorial-panel {
  position: relative;
  width: clamp(232px, min(82vw, 48dvh), 306px);
  aspect-ratio: 763 / 1234;
  margin-top: clamp(-46px, -5.4dvh, -24px);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.34));
}

.tutorial-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22.6%;
  z-index: 1;
  width: 59.55%;
  height: 45.2%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #c7ff63, #4cff70);
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
  box-shadow:
    0 0 16px rgba(167, 255, 82, 0.32),
    0 0 0 1px rgba(13, 74, 22, 0.7);
  pointer-events: none;
}

.tutorial-panel-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.tutorial-gif {
  position: absolute;
  left: 50%;
  top: 23%;
  z-index: 2;
  width: 59%;
  height: 44.4%;
  transform: translateX(-50%);
  display: block;
  object-fit: cover;
  clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
  border-radius: 0;
  border: none;
  box-shadow:
    0 0 16px rgba(167, 255, 82, 0.28),
    inset 0 0 18px rgba(0, 0, 0, 0.26);
}

.tutorial-next-btn {
  position: absolute;
  left: 50%;
  bottom: 4.8%;
  width: 66%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
}

.tutorial-next-btn:active {
  transform: translateX(-50%) scale(0.94);
}

.tutorial-next-btn img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

/* RESULT */
#resultScreen {
  width: 100vw;
  height: var(--app-height);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: url("../assets/ui/BG Hover.png") center / 100% 100% no-repeat;
  font-family: "Saira", Arial, Helvetica, sans-serif;
  --result-card-width: clamp(236px, min(76vw, 46dvh), 292px);
  --result-top-pad: calc(env(safe-area-inset-top, 0px) + clamp(8px, 1.8dvh, 18px));
  --result-panel-height: clamp(525px, min(169vw, 102dvh), 650px);
  --result-content-height: calc(
    var(--result-top-pad) +
    var(--result-panel-height) +
    env(safe-area-inset-bottom, 0px) +
    126px
  );
}

#resultScreen.screen.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#resultScreen.save-score-open .result-card {
  display: none;
  pointer-events: none;
}

.result-card {
  position: relative;
  width: var(--result-card-width);
  max-width: 292px;
  min-height: max(var(--app-height), var(--result-content-height));
  max-height: none;
  overflow: visible;
  padding: var(--result-top-pad) 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
  border: none;
  border-radius: 0;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-brand-image {
  width: clamp(40px, min(12vw, 8.2dvh), 56px);
  height: auto;
  margin-bottom: 0;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36));
}

.save-brand-image {
  width: clamp(40px, min(13vw, 8dvh), 54px);
  height: auto;
  margin-bottom: 0;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36));
}

.result-title-image {
  width: clamp(148px, min(54vw, 28dvh), 190px);
  height: auto;
  margin-top: -4px;
  margin-bottom: -8px;
  display: block;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.48));
}

.save-title-image {
  width: clamp(160px, min(72vw, 32dvh), 236px);
  height: auto;
  margin-top: -2px;
  margin-bottom: -8px;
  display: block;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.48));
}

.save-ribbon-image {
  position: relative;
  z-index: 2;
  width: clamp(74px, min(30vw, 15dvh), 104px);
  height: auto;
  margin: 0 0 -14px;
  display: block;
}

.result-panel,
.save-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 1422;
  padding: clamp(88px, 16.2dvh, 140px) clamp(18px, 6vw, 25px) clamp(18px, 3.2dvh, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  background: url("../assets/ui/result_panel_frame.png") center / 100% 100% no-repeat;
  border: none;
  clip-path: none;
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.28);
}

.result-panel {
  margin-top: 4px;
}

.result-panel::before,
.save-panel::before {
  content: none;
}

.result-panel > *,
.save-panel > * {
  position: relative;
  z-index: 1;
}

.result-panel h1,
.save-panel h2 {
  margin: 0 0 clamp(10px, 2dvh, 14px);
  color: #ffffff;
  font-size: clamp(24px, 8vw, 34px);
  line-height: 1.05;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(30, 136, 47, 0.78),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.result-score-box {
  width: min(72%, 172px);
  aspect-ratio: 361 / 183;
  margin-bottom: clamp(8px, 1.5dvh, 11px);
  padding: clamp(14px, 3.2dvh, 22px) 16px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: url("../assets/ui/score_timer_frame.png") center / 100% 100% no-repeat;
  border: none;
  clip-path: none;
  box-shadow: none;
}

.result-label {
  margin: 0;
  color: #ffffff;
  font-size: clamp(8px, 2.4vw, 10px);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.final-score {
  margin: 0;
  color: #79ff70;
  font-size: clamp(30px, 9vw, 42px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(88, 255, 96, 0.32);
}

.top-five-info {
  width: 100%;
  margin: 0 0 8px;
  padding: 5px 8px;
  border-radius: 4px;
  color: #09210d;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 900;
  background: linear-gradient(135deg, #d6ff7a, #42e85d);
  box-shadow: 0 8px 16px rgba(92, 255, 77, 0.18);
}

/* LEADERBOARD */
.leaderboard-box {
  width: 100%;
  margin: 0 0 clamp(10px, 1.8dvh, 14px);
  padding: 0;
  border: none;
  border-radius: 0;
  text-align: center;
  background: transparent;
}

.leaderboard-box h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: clamp(14px, 4.6vw, 19px);
  line-height: 1;
  font-weight: 600;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

.leaderboard-list {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.55dvh, 5px);
  background: transparent;
}

.leaderboard-item {
  position: relative;
  width: 100%;
  aspect-ratio: 514 / 81;
  display: grid;
  grid-template-columns: minmax(17%, max-content) minmax(0, 1fr) 19%;
  align-items: center;
  gap: 2%;
  padding: 0 8% 0 0;
  color: #ffffff;
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 900;
  line-height: 1;
  background: url("../assets/ui/leaderboard_row_rank.png") center / 100% 100% no-repeat;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.leaderboard-rank {
  width: 100%;
  height: 100%;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: clamp(10px, 3.6vw, 18px);
  line-height: 1;
  font-weight: 900;
  transform: translate(-4px, -1px);
  white-space: nowrap;
  overflow: hidden;
}

.leaderboard-name {
  text-align: left;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  transform: translateY(-1px);
}

.leaderboard-score {
  min-width: 0;
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  transform: translateY(-1px);
}

.result-action-btn,
.result-play-btn {
  width: min(86%, 190px);
  aspect-ratio: 421 / 87;
  min-height: 0;
  margin-top: 6px;
  padding: 0 18px;
  border-radius: 0;
  font-size: clamp(12px, 3.7vw, 16px);
  line-height: 1;
  font-family: "Saira", Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  background: url("../assets/ui/button_bagikan_simpan.png") center / 100% 100% no-repeat;
  border: none;
  box-shadow: none;
  clip-path: none;
}

.result-play-btn {
  color: #ffffff;
}

/* APP NOTICE */
.app-notice {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.app-notice-card {
  width: 100%;
  max-width: min(360px, calc(100vw - 32px));
  padding: 22px 18px 18px;
  border-radius: 20px;
  color: white;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(16, 31, 17, 0.98), rgba(8, 18, 10, 0.96));
  border: 1px solid rgba(202, 255, 114, 0.22);
  box-shadow:
    0 28px 74px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.app-notice-card h2 {
  margin-bottom: 10px;
  font-size: clamp(20px, 5.8vw, 24px);
  line-height: 1.15;
}

.app-notice-card p {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(14px, 3.7vw, 16px);
  line-height: 1.45;
}

/* SAVE SCORE MODAL */
.save-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-height);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: #041006 url("../assets/ui/bg_1080.png") center top / cover no-repeat;
  font-family: "Saira", Arial, Helvetica, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  --save-card-width: min(100vw, 390px);
  --save-panel-width: clamp(246px, min(84vw, 46dvh), 318px);
  --save-logo-width: clamp(126px, min(60vw, 24dvh), 212px);
  --save-top-pad: calc(env(safe-area-inset-top, 0px) + clamp(8px, 2.2dvh, 24px));
  --save-panel-top-offset: clamp(12px, 2.4dvh, 22px);
  --save-panel-height: clamp(400px, min(137vw, 74.9dvh), 518px);
  --save-content-height: calc(
    var(--save-top-pad) +
    clamp(114px, min(54vw, 21.7dvh), 192px) +
    var(--save-panel-top-offset) +
    var(--save-panel-height) +
    env(safe-area-inset-bottom, 0px) +
    18px
  );
  --leaderboard-panel-width: clamp(246px, min(88vw, 50dvh), 320px);
}

.save-modal-card {
  position: relative;
  width: var(--save-card-width);
  max-width: 390px;
  min-height: max(var(--app-height), var(--save-content-height));
  height: auto;
  max-height: none;
  overflow: visible;
  padding: var(--save-top-pad) 0 calc(env(safe-area-inset-bottom, 0px) + 110px);
  touch-action: pan-y;
  border: none;
  border-radius: 0;
  color: #ffffff;
  text-align: center;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.save-panel > .sr-only {
  position: static;
  width: 100%;
  height: auto;
  margin: 0 0 clamp(3px, 0.6dvh, 5px);
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  color: #ffffff;
  font-family: "Saira", Arial, Helvetica, sans-serif;
  font-size: clamp(8px, min(3vw, 1.45dvh), 12px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.save-panel > label[for="playerNameInput"] {
  margin-top: clamp(-24px, -3.3dvh, -18px);
}

.save-panel > label[for="playerInstagramInput"] {
  margin-top: clamp(-4px, -0.7dvh, -1px);
  transform: translateY(clamp(8px, 1.1dvh, 12px));
}

.save-result-logo {
  width: var(--save-logo-width);
  height: auto;
  display: block;
  margin: clamp(-28px, -3.4dvh, -10px) auto clamp(-26px, -3.8dvh, -12px);
  position: relative;
  z-index: 2;
  transform: translateY(clamp(34px, 5.4dvh, 46px));
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.46));
}

.save-modal-card:has(.lb-panel) .save-result-logo {
  transform: translateY(clamp(-12px, -1.6dvh, -8px));
}

html:not(:fullscreen) .save-modal-card:has(.lb-panel) {
  padding-top: calc(var(--save-top-pad) + clamp(32px, 5.4dvh, 46px));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 150px);
}

@media (max-height: 700px), (max-width: 340px) and (max-height: 760px) {
  .save-modal-card:has(.lb-panel) {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(18px, 4.2dvh, 32px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 130px);
  }

  .save-modal-card:has(.lb-panel) .save-result-logo {
    width: clamp(104px, min(44vw, 19dvh), 166px);
    margin-bottom: clamp(-34px, -5dvh, -22px);
    transform: translateY(clamp(4px, 0.8dvh, 8px));
  }

  .save-modal-card:has(.lb-panel) .lb-panel {
    width: clamp(232px, min(82vw, 45dvh), 292px);
    margin-top: clamp(-24px, -3.4dvh, -16px);
    padding: clamp(50px, 7.4dvh, 60px) clamp(12px, 3.6vw, 18px) clamp(18px, 2.6dvh, 24px);
    gap: clamp(3px, 0.55dvh, 5px);
  }

  .save-modal-card:has(.lb-panel) .lb-title {
    font-size: clamp(14px, min(4.7vw, 2.45dvh), 18px);
    margin-top: clamp(-18px, -2.8dvh, -12px);
  }

  .save-modal-card:has(.lb-panel) .lb-badge {
    width: clamp(82px, min(29vw, 13dvh), 108px);
    transform: translateY(clamp(7px, 1dvh, 10px));
  }

  .save-modal-card:has(.lb-panel) .lb-badge-val {
    font-size: clamp(22px, min(7.8vw, 4dvh), 32px);
  }

  .save-modal-card:has(.lb-panel) .lb-subtitle {
    font-size: clamp(14px, min(4.8vw, 2.45dvh), 18px);
  }

  .save-modal-card:has(.lb-panel) .lb-row {
    width: 84%;
    min-height: clamp(27px, 4.4dvh, 34px);
    padding: clamp(5px, 0.82dvh, 7px) clamp(9px, 2.5vw, 12px);
    font-size: clamp(11px, 3.1vw, 13px);
  }

  .save-modal-card:has(.lb-panel) .lb-note {
    width: min(78%, 230px);
    font-size: clamp(10px, 2.75vw, 12px);
    line-height: 1.34;
    white-space: pre-line;
  }

  .save-modal-card:has(.lb-panel) .lb-btn-share,
  .save-modal-card:has(.lb-panel) .lb-btn-play {
    width: clamp(136px, min(50vw, 21dvh), 178px);
  }
}

@media (min-width: 341px) and (max-width: 390px) and (min-height: 701px) {
  .save-modal-card:has(.lb-panel) {
    padding-top: calc(var(--save-top-pad) + clamp(28px, 4.8dvh, 42px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
  }

  .save-modal-card:has(.lb-panel) .save-result-logo {
    width: clamp(116px, min(50vw, 21dvh), 188px);
    margin-bottom: clamp(-34px, -4.8dvh, -22px);
    transform: translateY(clamp(-2px, -0.25dvh, 0px));
  }

  .save-modal-card:has(.lb-panel) .lb-panel {
    width: clamp(238px, min(84vw, 47dvh), 304px);
    margin-top: clamp(-28px, -3.8dvh, -18px);
    padding: clamp(54px, 7.8dvh, 64px) clamp(13px, 3.8vw, 19px) clamp(18px, 2.8dvh, 26px);
    gap: clamp(3px, 0.6dvh, 5px);
  }

  .save-modal-card:has(.lb-panel) .lb-title {
    font-size: clamp(15px, min(5vw, 2.65dvh), 19px);
    margin-top: clamp(-20px, -3dvh, -13px);
  }

  .save-modal-card:has(.lb-panel) .lb-badge {
    width: clamp(88px, min(31vw, 14dvh), 116px);
    transform: translateY(clamp(8px, 1.1dvh, 12px));
  }

  .save-modal-card:has(.lb-panel) .lb-badge-val {
    font-size: clamp(23px, min(8.2vw, 4.35dvh), 34px);
  }

  .save-modal-card:has(.lb-panel) .lb-subtitle {
    font-size: clamp(15px, min(5vw, 2.65dvh), 19px);
  }

  .save-modal-card:has(.lb-panel) .lb-row {
    width: 84%;
    min-height: clamp(28px, 4.6dvh, 36px);
    padding: clamp(5px, 0.9dvh, 8px) clamp(9px, 2.6vw, 13px);
    font-size: clamp(11px, 3.2vw, 14px);
  }

  .save-modal-card:has(.lb-panel) .lb-note {
    font-size: clamp(10px, 2.85vw, 12px);
    line-height: 1.38;
  }

  .save-modal-card:has(.lb-panel) .lb-btn-share,
  .save-modal-card:has(.lb-panel) .lb-btn-play {
    width: clamp(142px, min(52vw, 22.5dvh), 188px);
  }
}

@media (max-width: 360px) and (max-height: 740px) {
  .save-modal-card:has(.lb-panel) .lb-note {
    width: min(78%, 230px);
    white-space: pre-line;
    line-height: 1.34;
  }
}

.save-modal-card h2,
.save-panel-title {
  margin: 0 0 clamp(10px, 1.6dvh, 14px);
  color: #ffffff;
  font-size: clamp(14px, min(4.5vw, 2.4dvh), 20px);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.save-panel {
  width: var(--save-panel-width);
  aspect-ratio: 762 / 1240;
  padding: clamp(86px, min(15.8dvh, 26vw), 130px) clamp(30px, min(9vw, 4.8dvh), 44px) clamp(16px, 3dvh, 28px);
  margin-top: var(--save-panel-top-offset);
  margin-bottom: 0;
  background-color: transparent;
  background-image: url("../assets/ui/panel_resul_new.png");
  background-position: center;
  background-size: calc(100% + 4px) calc(100% + 4px);
  background-repeat: no-repeat;
  border: none;
  outline: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.save-total-box {
  width: clamp(78px, min(32vw, 15dvh), 118px);
  aspect-ratio: 293 / 216;
  margin-bottom: clamp(12px, 2.2dvh, 20px);
  padding-top: clamp(20px, 3.8dvh, 31px);
  background: url("../assets/ui/pane_total.png") center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(clamp(-10px, -1.4dvh, -6px));
}

.modal-score-label {
  margin: 0;
  color: #ffffff;
  font-size: clamp(6px, min(1.9vw, 1.1dvh), 8px);
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
}

.modal-score-value {
  margin: 3px 0 0;
  color: #79ff70;
  font-size: clamp(22px, min(8vw, 4.8dvh), 36px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(88, 255, 96, 0.32);
}

.name-label {
  display: block;
  width: 100%;
  margin: 0 0 3px;
  color: #ffffff;
  font-size: clamp(7px, min(2.1vw, 1.25dvh), 10px);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.email-label {
  margin-top: clamp(6px, 1.2dvh, 9px);
}

.instagram-input-wrap {
  position: relative;
  width: 100%;
  margin-top: clamp(-2px, -0.35dvh, 0px);
  transform: translateY(clamp(8px, 1.1dvh, 12px));
  display: flex;
  align-items: center;
}

.instagram-at {
  display: none;
}

.instagram-input {
  padding-left: 14px !important;
}

.name-input {
  width: 100%;
  aspect-ratio: 471 / 81;
  height: auto;
  padding: 0 14px;
  border-radius: 0;
  outline: none;
  color: #ffffff;
  font-family: "Saira", Arial, Helvetica, sans-serif;
  font-size: clamp(10px, min(3.4vw, 2dvh), 14px);
  font-weight: 700;
  text-align: center;
  background: url("../assets/ui/input_field_new.png") center / 100% 100% no-repeat;
  border: none;
  box-shadow: none;
}

.name-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.name-input:focus {
  filter: drop-shadow(0 0 8px rgba(202, 255, 100, 0.48));
}

.save-panel > .name-input {
  transform: translateY(0);
}

.email-note {
  max-width: 190px;
  margin: clamp(6px, var(--app-vh), 8px) auto 0;
  color: #ffffff;
  font-size: clamp(6px, min(1.9vw, 1.1dvh), 8px);
  line-height: 1.12;
  text-align: center;
  font-style: italic;
}

.save-message {
  min-height: 13px;
  margin: 14px 0 0;
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight: 800;
  line-height: 1.2;
}

.save-message.success {
  color: #caff72;
}

.save-message.error {
  color: #ff6969;
}

.save-image-btn {
  width: clamp(136px, min(56vw, 24dvh), 194px);
  aspect-ratio: 421 / 87;
  min-height: 0;
  margin-top: clamp(38px, 7.2dvh, 62px);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.save-image-btn--secondary {
  margin-top: clamp(6px, 1.2dvh, 10px);
}

html:not(:fullscreen) .save-panel > .save-image-btn:not(.save-image-btn--secondary) {
  margin-top: clamp(50px, 9dvh, 74px);
}

.save-image-btn img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.36));
}

.save-image-btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

html.keyboard-open .save-modal {
  height: var(--app-height);
  max-height: var(--app-height);
  align-items: flex-start;
  background-position: center top;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 84px);
  scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + max(260px, var(--keyboard-inset, 0px)));
}

html.keyboard-open .save-modal-card {
  min-height: var(--save-content-height);
  padding-top: var(--save-top-pad);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + max(300px, var(--keyboard-inset, 0px)));
}

html.keyboard-open .name-input {
  font-size: clamp(11px, min(3.8vw, 2.2dvh), 15px);
}

html.score-input-focus .save-panel {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 90px);
  scroll-margin-bottom: calc(env(safe-area-inset-bottom, 0px) + max(300px, var(--keyboard-inset, 0px)));
}

/* LEADERBOARD PANEL */
.lb-panel {
  position: relative;
  width: var(--leaderboard-panel-width);
  background: url("../assets/ui/pane_leaderboard_new.png") center / 100% 100% no-repeat;
  margin-top: clamp(-34px, -4.4dvh, -22px);
  margin-bottom: 0;
  transform: translateY(clamp(16px, 2.8dvh, 28px));
  padding: clamp(58px, 8.2dvh, 68px) clamp(14px, 4vw, 20px) clamp(20px, 3dvh, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.7dvh, 6px);
  flex: 0 0 auto;
}

.lb-title {
  font-size: clamp(16px, min(5.2vw, 2.8dvh), 21px);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  margin-top: clamp(-22px, -3.2dvh, -14px);
  margin-bottom: clamp(-4px, -0.6dvh, -2px);
}

.lb-badge {
  width: clamp(96px, min(34vw, 15dvh), 128px);
  aspect-ratio: 293 / 216;
  background: url("../assets/ui/pane_total.png") center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(12px, 2.1dvh, 18px);
  transform: translateY(clamp(10px, 1.3dvh, 14px));
  margin-bottom: clamp(2px, 0.5dvh, 6px);
}

.lb-badge-label {
  font-size: clamp(6px, 1.8vw, 8px);
  font-weight: 900;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lb-badge-val {
  color: #79ff70;
  font-size: clamp(25px, min(8.8vw, 4.8dvh), 38px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px rgba(88,255,96,.5);
}

.lb-subtitle {
  font-size: clamp(16px, min(5.2vw, 2.8dvh), 21px);
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

.lb-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.5dvh, 5px);
}

.lb-row {
  width: 85%;
  background: url("../assets/ui/panel_name_score_leaderboard.png") center / 100% 100% no-repeat;
  display: grid;
  grid-template-columns: minmax(22px, max-content) 1fr auto;
  align-items: center;
  gap: 0 4px;
  padding: clamp(6px, 1dvh, 9px) clamp(10px, 2.8vw, 14px);
  min-height: clamp(30px, 5dvh, 38px);
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 700;
  color: #ffffff;
}

.lb-row-rank {
  font-weight: 900;
  color: #102d15;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(10px, 2.8vw, 13px);
}

.lb-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 0 4px;
}

.lb-row-score {
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
}

.lb-sep {
  width: 85%;
  height: auto;
  display: block;
  margin: clamp(1px, 0.2dvh, 3px) 0;
}

.lb-myrow .lb-row-rank {
  color: #102d15;
}

.lb-note {
  font-size: clamp(11px, 3vw, 13px);
  color: rgba(255,255,255,.8);
  text-align: center;
  line-height: 1.45;
  margin: clamp(1px, 0.2dvh, 3px) 0;
  white-space: normal;
}

.lb-btn-share,
.lb-btn-play {
  width: clamp(150px, min(55vw, 24dvh), 200px);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: block;
}

.lb-btn-share:disabled,
.lb-btn-play:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lb-btn-share img,
.lb-btn-play img {
  width: 100%;
  height: auto;
  display: block;
}

.lb-empty {
  padding: 14px;
  text-align: center;
  color: rgba(255,255,255,.4);
  font-size: 12px;
}

/* ANIMATION */
@keyframes rotateAim {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes scanMove {
  from {
    transform: translateY(-46px);
  }

  to {
    transform: translateY(46px);
  }
}

/* PAUSE OVERLAY */
.pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pause-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  pointer-events: none;
}

.pause-panel-wrap {
  position: relative;
  z-index: 1;
  width: min(78vw, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-10%);
}

.pause-panel-img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.5));
}

.pause-btns {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2dvh, 14px);
}

.pause-btn {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, opacity 0.1s;
}

.pause-btn:active {
  transform: scale(0.93);
  opacity: 0.8;
}

.pause-btn-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

/* HUD PAUSE BUTTON */
.hud-pause-btn {
  width: clamp(58px, 15vw, 76px);
  height: clamp(58px, 15vw, 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.1s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.hud-pause-btn:active {
  transform: scale(0.88);
  opacity: 0.8;
}

.hud-pause-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* SCORE FRAMES ROW BELOW AIM RING */
.score-frames-wrap {
  position: fixed;
  left: 50%;
  top: calc(var(--app-height) - env(safe-area-inset-bottom, 0px) - clamp(88px, 27dvh, 230px));
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-frames-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, min(2.6vw, 1.8dvh), 16px);
}

.score-frame-item {
  position: relative;
  flex-shrink: 0;
}

.score-frame-single {
  height: clamp(36px, min(13vw, 7.6dvh), 78px);
  width: auto;
  display: block;
  pointer-events: none;
}

.score-frame-item--cabe .score-frame-single {
  height: clamp(37px, min(13.2vw, 7.7dvh), 80px);
}

.score-frame-item--cabe {
  transform: translateY(clamp(5px, 0.9dvh, 9px));
}

.score-frame-item--pack {
  transform: translateY(clamp(2px, 0.5dvh, 5px));
}

.score-frame-item--pack .score-frame-single {
  height: clamp(24px, min(8.5vw, 5dvh), 51px);
}

.score-frame-item--jumbo {
  transform: translate(clamp(-4px, -0.8vw, -2px), clamp(2px, 0.5dvh, 5px));
}

.score-frame-item--jumbo .score-frame-single {
  height: clamp(33px, min(12vw, 6.9dvh), 72px);
}

.score-frame-item--cabe003 {
  transform: translateY(clamp(3px, 0.7dvh, 7px));
}

.score-frame-anchor {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

.score-frame-anchor--cabe  { top: 64%; left: 71%; }
.score-frame-anchor--pack  { top: 52%; left: 71%; }
.score-frame-anchor--jumbo { top: 60%; left: 78%; }
.score-frame-anchor--cabe003 { top: 51%; left: 68%; }

.score-frame-num {
  font-size: clamp(16px, min(5.6vw, 4dvh), 32px);
  font-weight: 900;
  color: #73ff76;
  line-height: 1;
  font-family: "Saira", Arial, Helvetica, sans-serif;
  text-shadow: 0 0 14px rgba(92, 255, 103, 0.5);
  display: block;
}

.score-frame-num.bump {
  animation: scoreBump 0.38s cubic-bezier(0.36, 1.6, 0.64, 1) forwards;
}

.hud-footer-img {
  width: clamp(260px, min(92vw, 52dvh), 460px);
  height: auto;
  display: block;
  margin-top: clamp(16px, 2.4dvh, 24px);
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* URGENT TIMER (≤10s) */
.timer-value.urgent {
  color: #ff5252;
  text-shadow: 0 0 18px rgba(255, 82, 82, 0.7);
  animation: urgentPulse 0.45s ease-in-out infinite alternate;
}

@keyframes urgentPulse {
  from { opacity: 1; transform: scale(1) translateY(-1px); }
  to   { opacity: 0.65; transform: scale(0.96) translateY(-1px); }
}

/* SCORE CARD */
.score-card {
  position: relative;
  width: clamp(100px, 27vw, 134px);
  aspect-ratio: 239 / 161;
  padding: 0 clamp(12px, 3.5vw, 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url("../assets/ui/timer_frame.svg") center / 100% 100% no-repeat;
  box-shadow: none;
}

.score-label {
  font-size: clamp(7px, 1.9vw, 9px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.58);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-bottom: 2px;
}

.score-value {
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1;
  color: #73ff76;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(92, 255, 103, 0.45);
}

.score-value.bump {
  animation: scoreBump 0.38s cubic-bezier(0.36, 1.6, 0.64, 1) forwards;
}

@keyframes scoreBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.65); color: #fff; text-shadow: 0 0 22px rgba(214, 255, 122, 0.9); }
  100% { transform: scale(1); }
}

/* FLOATING +1 ANIMATION */
.plus-one {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  z-index: 20;
  font-size: clamp(36px, 11vw, 54px);
  font-weight: 900;
  color: #d6ff7a;
  text-shadow:
    0 0 24px rgba(179, 255, 67, 0.9),
    0 4px 0 rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: floatUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  font-family: "Saira", Arial, Helvetica, sans-serif;
}

@keyframes floatUp {
  0%   { opacity: 1;   transform: translateX(-50%) translateY(0)    scale(1.3); }
  55%  { opacity: 1;   transform: translateX(-50%) translateY(-48px) scale(1);   }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-90px) scale(0.75); }
}

/* +3 pack_cabeijo — green, bigger */
.plus-one.plus-two {
  font-size: clamp(44px, 13vw, 64px);
}

/* +5 pack_cabeijo_jumbo — green, biggest */
.plus-one.plus-three {
  font-size: clamp(52px, 15vw, 76px);
}

/* COUNTDOWN OVERLAY */
.countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  pointer-events: none;
}

.countdown-img {
  width: clamp(132px, min(52vw, 28dvh), 240px);
  height: auto;
  animation: countdownPop 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 32px rgba(100, 255, 100, 0.7));
}

@keyframes countdownPop {
  0%   { transform: scale(1.6); opacity: 0; }
  18%  { transform: scale(1);   opacity: 1; }
  72%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}

/* CATCH SUCCESS FLASH */
.aim-area.catch-flash .target-brackets {
  filter:
    brightness(1.8)
    drop-shadow(0 0 22px rgba(179, 255, 67, 1));
  transition: filter 0.05s ease-out;
}

/* BOTTOM HUD INNER WRAPPER */
.bottom-hud-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4dvh, 10px);
  pointer-events: none;
  width: 100%;
}

/* WIDE DESKTOP */
@media (min-width: 768px) {
  .top-hud {
    left: 50%;
    width: min(720px, 100%);
    transform: translateX(-50%);
  }

  .bottom-hud {
    left: 50%;
    width: min(640px, 100%);
    transform: translateX(-50%);
  }

  .aim-area {
    top: 50%;
  }
}

/* LANDSCAPE PHONES */
@media (orientation: landscape) and (max-height: 520px) {
  #introScreen {
    overflow-y: auto;
    --home-logo-width: clamp(166px, min(40vw, 38dvh), 224px);
    --home-panel-width: auto;
    --home-logo-top: calc(env(safe-area-inset-top, 0px) + clamp(30px, 16dvh, 86px));
    --home-panel-top: calc(env(safe-area-inset-top, 0px) + clamp(202px, 58dvh, 318px));
    --home-start-width: clamp(136px, min(30vw, 32dvh), 176px);
    --home-start-offset: 0px;
  }

  #resultScreen {
    --result-card-width: clamp(220px, min(44vw, 72dvh), 276px);
    --result-panel-height: clamp(490px, min(98vw, 160dvh), 614px);
  }

  .save-modal {
    --save-panel-width: clamp(232px, min(45vw, 90dvh), 292px);
    --save-logo-width: clamp(118px, min(26vw, 44dvh), 174px);
    --save-panel-height: clamp(378px, min(74vw, 146dvh), 476px);
    --leaderboard-panel-width: clamp(238px, min(48vw, 92dvh), 300px);
  }

  .top-hud {
    width: min(520px, 58vw);
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  }

  .timer-card {
    width: clamp(88px, 22vw, 112px);
  }

  .hint-box {
    display: none;
  }

  .aim-area {
    top: 50%;
    --aim-size: clamp(150px, 44vmin, 210px);
  }

  .score-frames-wrap {
    top: 50%;
    left: auto;
    right: calc(env(safe-area-inset-right, 0px) + clamp(12px, 3vw, 24px));
    transform: translateY(-50%);
  }

  .score-frames-row {
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(4px, 1.8dvh, 10px);
  }

  .bottom-hud {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(290px, 40vw);
    padding: 0;
    transform: none;
  }

  .catch-btn {
    height: 56px;
    font-size: 18px;
  }
}

/* SMALL PHONE */
@media (max-height: 700px) {
  #introScreen {
    --home-logo-width: clamp(206px, min(82vw, 36dvh), 258px);
    --home-panel-width: auto;
    --home-logo-top: calc(env(safe-area-inset-top, 0px) + clamp(112px, 23dvh, 158px));
    --home-panel-top: calc(env(safe-area-inset-top, 0px) + clamp(332px, 58dvh, 392px));
    --home-start-width: clamp(144px, min(56vw, 24dvh), 188px);
    --home-start-offset: 0px;
  }

  .intro-card:not(.home-card) {
    padding: 22px 18px;
  }

  .logo-badge {
    width: 68px;
    height: 68px;
    border-radius: 22px;
  }

  .logo-image {
    width: 50px;
    height: 50px;
  }

  .intro-card h1 {
    font-size: 26px;
  }

  .home-card {
    width: 100vw;
    padding: 0;
  }

  .home-logo-image {
    width: var(--home-logo-width);
  }

  .home-panel-wrap {
    width: var(--home-panel-width);
  }

  .home-start-btn {
    width: var(--home-start-width);
    margin-top: clamp(-22px, -2.8dvh, -10px);
  }

  .aim-area {
    --aim-size: clamp(186px, min(62vmin, 42dvh), 260px);
  }

  .catch-btn {
    height: 68px;
    font-size: 21px;
  }

  .result-card {
    width: var(--result-card-width);
    padding-top: var(--result-top-pad);
  }

  .result-panel {
    padding-top: clamp(84px, 15dvh, 122px);
    padding-bottom: 16px;
  }

  .result-panel h1 {
    font-size: clamp(22px, 7.4vw, 30px);
  }

  .save-modal-card {
    width: var(--save-card-width);
    padding-top: var(--save-top-pad);
  }

  .save-panel {
    padding-top: clamp(80px, 15dvh, 112px);
    padding-bottom: 18px;
  }

  .modal-score-value {
    font-size: clamp(22px, 8vw, 34px);
  }
}