/* 只寫 #ui 底下的樣式。字級用 cqw／cqh（#stage 是 container-type: size）。 */

#ui {
  --sky: #4fc3f7;
  --sky-deep: #1e88e5;
  --ink: #17406b;
  --sun: #ffd93b;
  --sun-deep: #f5a700;
  --white: #fff;
  --heart: #ff5470;
  font-family: "Nunito", "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  overflow: hidden;
}

#ui .ui-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#ui .ui-screen[hidden] { display: none; }

/* ---- 標題／結果／暫停 ---- */
#ui .ui-title,
#ui .ui-result,
#ui .ui-pause-menu {
  justify-content: center;
  gap: 3.6cqh;
  background: linear-gradient(180deg, rgba(79,195,247,.88), rgba(190,235,255,.9));
  pointer-events: auto;
  text-align: center;
  padding: 0 8cqw;
}
/* 結果與暫停會蓋在各關不同色調的背景上，用中性的白色半透明遮罩，不要固定藍色 */
#ui .ui-result,
#ui .ui-pause-menu { background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.78)); }

#ui .ui-logo {
  font-size: 18cqw;
  font-weight: 900;
  color: var(--white);
  letter-spacing: .02em;
  -webkit-text-stroke: 1.2cqw var(--sky-deep);
  paint-order: stroke fill;
  text-shadow: 0 1.6cqw 0 var(--sky-deep);
  line-height: 1;
}
#ui .ui-sub { font-size: 4.6cqw; font-weight: 700; }
#ui .ui-hint { font-size: 3.6cqw; font-weight: 700; opacity: .85; }
#ui .ui-version {
  position: absolute;
  right: 3cqw;
  bottom: 2cqh;
  font-size: 3cqw;
  opacity: .7;
}

#ui .ui-btn {
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 900;
  font-size: 7cqw;
  min-width: 52cqw;
  min-height: max(44px, 8.5cqh);
  padding: 0 6cqw;
  border-radius: 99px;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#ui .ui-primary {
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 1.4cqw 0 var(--sun-deep);
}
#ui .ui-secondary {
  background: var(--white);
  color: var(--sky-deep);
  font-size: 5.6cqw;
  box-shadow: 0 1.2cqw 0 #b9d9f0;
}
#ui .ui-btn:active { transform: translateY(1cqw); box-shadow: none; }
#ui .ui-btn:focus-visible { outline: .8cqw solid var(--ink); outline-offset: .8cqw; }

/* 靈敏度 */
#ui .ui-sens {
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  width: 100%;
  max-width: 84cqw;
  font-size: 4.2cqw;
  font-weight: 800;
  background: rgba(255,255,255,.7);
  border-radius: 99px;
  padding: 1.5cqh 4cqw;
  pointer-events: auto;
}
#ui .ui-slider {
  flex: 1;
  min-width: 0;
  height: max(44px, 6cqh);
  accent-color: var(--sky-deep);
  touch-action: pan-x;
  pointer-events: auto;
}
#ui .ui-sens-val { min-width: 2.4em; text-align: right; }

/* ---- 關卡選單 ---- */
#ui .ui-select {
  justify-content: flex-start;
  background: linear-gradient(180deg, #7fd4fa, #d4f1ff);
  pointer-events: auto;
  padding: 0 5cqw;
  gap: 3cqh;
}
#ui .ui-sel-head {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: max(44px, 9cqh);
  margin-top: 2cqh;
}
#ui .ui-sel-title {
  font-size: 8cqw;
  font-weight: 900;
  color: var(--white);
  -webkit-text-stroke: 1cqw var(--sky-deep);
  paint-order: stroke fill;
  text-shadow: 0 1cqw 0 var(--sky-deep);
}
#ui .ui-back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: 0;
  min-height: max(44px, 7cqh);
  padding: 0 4cqw;
  font-size: 4.6cqw;
  background: var(--white);
  color: var(--sky-deep);
  box-shadow: 0 1cqw 0 #b9d9f0;
}
#ui .ui-back:active { transform: translateY(calc(-50% + 1cqw)); box-shadow: none; }
#ui .ui-cards {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3cqh;
  padding-bottom: 4cqh;
}
#ui .ui-card {
  appearance: none;
  position: relative;
  flex: 1;
  max-height: 24cqh;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  border: .9cqw solid var(--white);
  border-radius: 5cqw;
  padding: 0 5cqw;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  box-shadow: 0 1.2cqw 0 rgba(23,64,107,.25);
  -webkit-tap-highlight-color: transparent;
}
#ui .ui-card:active:not(:disabled) { transform: translateY(1cqw); box-shadow: none; }
#ui .ui-card:focus-visible { outline: .8cqw solid var(--ink); outline-offset: .6cqw; }
#ui .ui-card.locked { opacity: .55; cursor: default; filter: saturate(.6); }
#ui .ui-card-info { min-width: 0; display: flex; flex-direction: column; gap: .6cqh; }
#ui .ui-card-no { font-size: 3.8cqw; font-weight: 900; opacity: .75; }
#ui .ui-card-name {
  font-size: 7.4cqw;
  font-weight: 900;
  line-height: 1.1;
  color: var(--white);
  -webkit-text-stroke: 1cqw var(--ink);
  paint-order: stroke fill;
}
#ui .ui-card-sub { font-size: 3.6cqw; font-weight: 800; }
#ui .ui-card-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .8cqh; }
#ui .ui-card-stars { display: flex; gap: .6cqw; font-size: 6.4cqw; line-height: 1; }
#ui .ui-cstar { color: var(--sun); -webkit-text-stroke: .5cqw var(--sun-deep); paint-order: stroke fill; }
#ui .ui-cstar.empty { color: rgba(255,255,255,.85); -webkit-text-stroke-color: rgba(23,64,107,.35); }
#ui .ui-card-score {
  font-size: 4.2cqw;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.75);
  border-radius: 99px;
  padding: .3cqh 3cqw;
}
#ui .ui-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12cqw;
  background: rgba(23,64,107,.18);
  border-radius: 4cqw;
}

/* ---- HUD ---- */
#ui .ui-hud {
  pointer-events: none;
  justify-content: flex-start;
}
#ui .ui-hud-left {
  position: absolute;
  left: 3cqw;
  top: 2cqw;
  height: 9cqw;
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
#ui .ui-hearts {
  display: flex;
  gap: .4cqw;
  font-size: 6.4cqw;
  line-height: 1;
}
#ui .ui-heart {
  color: var(--heart);
  -webkit-text-stroke: .6cqw var(--white);
  paint-order: stroke fill;
  text-shadow: 0 .6cqw 0 rgba(0,0,0,.18);
}
#ui .ui-heart.empty { color: rgba(255,255,255,.55); -webkit-text-stroke: .6cqw rgba(23,64,107,.35); }
#ui .ui-power {
  font-size: 3.6cqw;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  background: var(--sun);
  border-radius: 99px;
  padding: .7cqw 2cqw;
  box-shadow: 0 .5cqw 0 var(--sun-deep);
}
#ui .ui-score {
  position: absolute;
  left: 50%;
  top: 2cqw;
  height: 9cqw;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-size: 5.6cqw;
  font-weight: 900;
  line-height: 1;
  color: var(--white);
  -webkit-text-stroke: 1cqw var(--sky-deep);
  paint-order: stroke fill;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#ui .ui-pause {
  appearance: none;
  position: absolute;
  right: 3cqw;
  top: 2cqw;
  width: 9cqw;
  height: 9cqw;
  padding: 0;
  border: .7cqw solid var(--white);
  border-radius: 50%;
  background: var(--sky-deep);
  box-shadow: 0 .6cqw 0 rgba(23,64,107,.35);
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 擴大觸控熱區到至少 44 CSS px */
#ui .ui-pause::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
}
#ui .ui-pause-bars {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.4cqw;
  height: 3.6cqw;
  transform: translate(-50%, -50%);
  border-left: 1.1cqw solid var(--white);
  border-right: 1.1cqw solid var(--white);
  box-sizing: border-box;
}
#ui .ui-bar {
  position: absolute;
  left: 4cqw;
  right: 11cqw;
  top: 12.6cqw;
  height: 1.4cqw;
  background: rgba(255,255,255,.55);
  border-radius: 99px;
}
#ui .ui-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--sky-deep);
}
#ui .ui-bar-icon {
  position: absolute;
  right: -5.4cqw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4.4cqw;
  line-height: 1;
}
#ui .ui-boss-name { display: none; }
/* Boss 血條：同一位置，變粗並換成紅橘色 */
#ui .ui-bar.boss {
  height: 3.6cqw;
  top: 11.5cqw;
  background: rgba(255,255,255,.7);
  border: .6cqw solid var(--white);
  box-shadow: 0 0 0 .4cqw var(--sky-deep);
  overflow: hidden;
}
#ui .ui-bar.boss .ui-bar-fill { background: linear-gradient(90deg, #ff5470, #ff9a3c); }
#ui .ui-bar.boss .ui-bar-icon { display: none; }
#ui .ui-bar.boss .ui-boss-name {
  display: block;
  position: absolute;
  left: 2cqw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 2.4cqw;
  font-weight: 900;
  color: var(--white);
  text-shadow: 0 0 .8cqw var(--ink), 0 0 .8cqw var(--ink);
}

/* ---- 暫停 ---- */
#ui .ui-pause-title {
  font-size: 12cqw;
  font-weight: 900;
  color: var(--white);
  -webkit-text-stroke: 1.2cqw var(--sky-deep);
  paint-order: stroke fill;
  text-shadow: 0 1.4cqw 0 var(--sky-deep);
  line-height: 1;
}
#ui .ui-resume {
  justify-content: center;
  background: rgba(23,64,107,.28);
  pointer-events: none;
}
#ui .ui-resume-text {
  font-size: 7cqw;
  font-weight: 900;
  color: var(--white);
  background: rgba(23,64,107,.55);
  border-radius: 99px;
  padding: 2cqw 7cqw;
  text-shadow: 0 .5cqw 0 rgba(0,0,0,.25);
}

/* ---- 結果 ---- */
#ui .ui-result { gap: 2.4cqh; }
#ui .ui-res-stage { font-size: 5.4cqw; font-weight: 900; opacity: .85; }
#ui .ui-res-stage[hidden] { display: none; }
#ui .ui-res-title {
  font-size: 15cqw;
  font-weight: 900;
  color: var(--white);
  -webkit-text-stroke: 1.2cqw var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 1.4cqw 0 var(--ink);
  line-height: 1;
}
#ui .ui-result.cleared .ui-res-title {
  -webkit-text-stroke-color: var(--sun-deep);
  text-shadow: 0 1.4cqw 0 var(--sun-deep);
}
#ui .ui-res-stars { display: flex; gap: 2cqw; font-size: 13cqw; line-height: 1; }
#ui .ui-res-stars[hidden] { display: none; }
#ui .ui-star { color: var(--sun); -webkit-text-stroke: .8cqw var(--sun-deep); paint-order: stroke fill; }
#ui .ui-star.empty { color: rgba(255,255,255,.7); -webkit-text-stroke-color: #9fc4de; }
#ui .ui-res-score {
  font-size: 12cqw;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}
#ui .ui-res-best {
  font-size: 5.6cqw;
  font-weight: 900;
  color: var(--ink);
  background: var(--sun);
  border-radius: 99px;
  padding: .6cqw 4cqw;
  box-shadow: 0 .8cqw 0 var(--sun-deep);
}
#ui .ui-res-best[hidden] { display: none; }
#ui .ui-res-info { font-size: 4.4cqw; font-weight: 800; opacity: .8; margin-bottom: .6cqh; }
#ui .ui-result .ui-btn[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  #ui .ui-btn { transition: transform .08s; }
  /* 柔和呼吸，只動透明度，不閃爍 */
  #ui .ui-resume-text { animation: ui-breathe 2.4s ease-in-out infinite; }
  @keyframes ui-breathe {
    0%, 100% { opacity: .75; }
    50% { opacity: 1; }
  }
}