/* Jersey 15 (OFL, single weight; bold is synthesised) is bundled in src/ui/fonts/ so the game works offline (desktop build).
   Chosen over Pixelify Sans for legibility: Pixelify's B / C / E read as G / O / an open E at UI sizes. */
@font-face {
  font-family: 'Jersey 15';
  src: url('fonts/jersey15-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jersey 15';
  src: url('fonts/jersey15-latin-ext.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* HUD digits come from Jersey 10 (wider, chunkier than Jersey 15's)
   (OFL, digits-only subset in src/ui/fonts/) through unicode-range; letters are Jersey 15. size-adjust matches cap height. */
@font-face {
  font-family: 'TLL Digits';
  src: url('fonts/jersey10-digits.woff2') format('woff2');
  unicode-range: U+30-39;
  size-adjust: 125%;
  font-display: block;
}

/* Pixel UI. Sizes are in art pixels: calc(var(--px) * N), where --px = CSS px per game pixel (set by pixelui.js).
   Colours are palette entries only (src/art/palette.js). Frames and icons come from src/art/ui + src/art/icons. */
#ui-root {
  --px: 3px;
  --c-void: #0a0612;     /* 0 */
  --c-night1: #140c22;   /* 1 */
  --c-night2: #1e1430;   /* 2 */
  --c-night3: #2a1c40;   /* 3 */
  --c-stone7: #7c6a94;   /* 7 */
  --c-stone8: #9a8aae;   /* 8 */
  --c-stone9: #bcb0cc;   /* 9 */
  --c-hi: #e2dcea;       /* a */
  --c-gold1: #b8702e;    /* e */
  --c-gold2: #e0a040;    /* f */
  --c-gold3: #f5c85a;    /* g */
  --c-core: #fff0b0;     /* h */
  --c-red2: #b02a28;     /* k */
  --c-fire1: #e0502a;    /* l */
  --c-fire2: #ff8a3a;    /* m */
  --c-mag2: #6a1e78;     /* o */
  --c-cyan3: #7ad8ff;    /* t */
  /* hard 1-art-pixel outline for text (no blur: pixel look) */
  --t-outline: var(--px) 0 0 var(--c-void), calc(var(--px) * -1) 0 0 var(--c-void),
    0 var(--px) 0 var(--c-void), 0 calc(var(--px) * -1) 0 var(--c-void), var(--px) var(--px) 0 var(--c-void);

  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  font-family: 'TLL Digits', 'Jersey 15', monospace;
  font-synthesis-weight: none; /* Jersey 10 has one weight; no smeared fake bold */
  font-weight: 500;
  font-size: calc(var(--px) * 6);
  line-height: 1.2;
  color: var(--c-hi);
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
#ui-root * { box-sizing: border-box; }
#ui-root .px { display: inline-block; flex: none; image-rendering: pixelated; background-repeat: no-repeat; }
#ui-root [class*='px9-'], #ui-root [class*='px9s-'], #ui-root [class*='pxt-'] { image-rendering: pixelated; }

/* ---------- Visibility per phase ---------- */
#ui-root .ui-title, #ui-root .ui-end, #ui-root .ui-hud, #ui-root .ui-abilities,
#ui-root .ui-dawn, #ui-root .ui-towerbar, #ui-root .ui-popup { display: none; }
#ui-root[data-phase='title'] .ui-title { display: flex; }
#ui-root[data-phase='night'] .ui-hud,
#ui-root[data-phase='dawn'] .ui-hud { display: block; }
#ui-root[data-phase='dawn'].dawn-open .ui-hud { display: none; }
#ui-root[data-phase='night'] .ui-abilities { display: flex; }
#ui-root[data-phase='dawn'].dawn-open .ui-dawn { display: flex; }
#ui-root[data-phase='dawn'].dawn-tower .ui-towerbar { display: flex; }
#ui-root[data-phase='dawn'] .ui-popup.open,
#ui-root[data-phase='night'] .ui-popup.open { display: flex; }
#ui-root[data-phase='gameover'] .ui-end,
#ui-root[data-phase='victory'] .ui-end { display: flex; }

/* ---------- Common ---------- */
.ui-small-label {
  font-size: calc(var(--px) * 5);
  letter-spacing: calc(var(--px) * 0.5);
  color: var(--c-stone8);
  font-weight: 600;
  text-shadow: var(--t-outline);
}
.ui-num { font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-hi); text-shadow: var(--t-outline); }
.ui-num-gold { color: var(--c-gold3); }
.ui-ico { margin-right: calc(var(--px) * 2); }
.ui-gem { margin-left: var(--px); vertical-align: middle; }
.ui-cost { display: inline-flex; align-items: center; color: var(--c-gold3); font-weight: 700; text-shadow: var(--t-outline); }

.ui-bar { position: relative; flex: none; height: calc(var(--px) * 8); }
.ui-bar-fill { height: 100%; width: 0; }

.ui-btn {
  pointer-events: auto;
  cursor: var(--cursor-point, pointer);
  min-height: 44px;
  padding: 0 calc(var(--px) * 2);
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit;
  font-weight: 700;
  font-size: calc(var(--px) * 6);
  letter-spacing: calc(var(--px) * 0.3);
  color: var(--c-gold3);
  text-shadow: var(--t-outline);
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.ui-btn:hover:not(:disabled) { color: var(--c-core); }
.ui-btn:active:not(:disabled) .ui-btn-label { transform: translateY(var(--px)); }
.ui-btn:disabled { cursor: not-allowed; color: var(--c-stone7); }
.ui-btn:disabled .ui-gem { filter: grayscale(1) brightness(0.7); }
.ui-btn-label { display: inline-flex; align-items: center; gap: var(--px); }
.ui-btn-big { font-size: calc(var(--px) * 7); padding: 0 calc(var(--px) * 6); min-height: calc(var(--px) * 18); }

.ui-whisper {
  font-size: calc(var(--px) * 6);
  line-height: 1.5;
  color: var(--c-hi);
  text-shadow: var(--t-outline);
  margin: 0;
}
.ui-divider { margin: var(--px) auto; }
.ui-version {
  position: absolute; right: 8px; bottom: 6px;
  font-size: calc(var(--px) * 4);
  color: var(--c-stone7);
  text-shadow: var(--t-outline);
  pointer-events: none;
  user-select: none;
}

/* ---------- Title & end screens ---------- */
.ui-screen {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 6, 18, 0.55);
  pointer-events: auto;
}
.ui-title-box {
  max-width: calc(var(--px) * 210);
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--px) * 5);
}
@media (min-width: 900px) and (min-height: 600px) { .ui-title .ui-logo, .ui-title .ui-divider { zoom: 2; } }
/* 149-art-px logo at 3 CSS px per art px overflows a phone in portrait: drop to 2 (still integer device px) */
@media (max-width: 480px) { .ui-title .ui-logo { zoom: 0.6667; } }
.ui-logo { filter: drop-shadow(0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.55)); animation: ui-glow 3.5s steps(6) infinite; }
@keyframes ui-glow {
  0%, 100% { filter: drop-shadow(0 0 calc(var(--px) * 4) rgba(245, 200, 90, 0.45)); }
  50% { filter: drop-shadow(0 0 calc(var(--px) * 9) rgba(255, 240, 176, 0.75)); }
}
.ui-title-name { margin: 0; font-size: calc(var(--px) * 16); color: var(--c-gold3); text-shadow: var(--t-outline); }
.ui-demo-tag { align-self: center; padding: var(--px) calc(var(--px) * 3); font-size: calc(var(--px) * 5); font-weight: 700; letter-spacing: var(--px); color: var(--c-gold3); border: var(--px) solid var(--c-gold3); text-shadow: var(--t-outline); }
.ui-controls-hint { margin: 0; font-size: calc(var(--px) * 5); color: var(--c-stone8); text-shadow: var(--t-outline); }

.ui-end-box { padding: calc(var(--px) * 4) calc(var(--px) * 6); max-width: min(calc(var(--px) * 200), calc(100vw - 32px)); }
.ui-end-title { margin: 0; font-size: calc(var(--px) * 14); font-weight: 700; color: var(--c-fire1); text-shadow: var(--t-outline); letter-spacing: var(--px); }
.ui-end.victory .ui-end-title { color: var(--c-gold3); }
.ui-end-stats { display: flex; gap: calc(var(--px) * 4); flex-wrap: wrap; justify-content: center; }
.ui-end-stat { display: flex; align-items: center; padding: var(--px) calc(var(--px) * 2); }
.ui-end-stat-col { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- Abilities ---------- */
.ui-abilities {
  position: absolute; bottom: calc(var(--px) * 3); left: 50%; transform: translateX(-50%);
  flex-direction: column; align-items: center; gap: calc(var(--px) * 2);
  pointer-events: none;
  max-width: 100vw;
}
.ui-ability-row { display: flex; gap: calc(var(--px) * 3); }
.ui-ability { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--px); }
.ui-slot {
  position: relative; pointer-events: auto; cursor: var(--cursor-point, pointer);
  width: calc(var(--px) * 24); height: calc(var(--px) * 24);
  padding: 0; margin: 0; background: none;
  -webkit-tap-highlight-color: transparent;
}
.ui-slot-icon { position: absolute; left: 0; top: 0; }
.ui-slot-cd {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: rgba(10, 6, 18, 0.72);
  pointer-events: none;
}
.ui-slot:active .ui-slot-icon { transform: translateY(var(--px)); }
.ui-slot.disabled .ui-slot-icon { filter: grayscale(0.8) brightness(0.6); }
.ui-slot.active { filter: drop-shadow(0 0 calc(var(--px) * 3) rgba(245, 200, 90, 0.85)); }
.ui-slot-key {
  position: absolute; left: calc(var(--px) * -3); top: calc(var(--px) * -4);
  font-size: calc(var(--px) * 5); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline);
}
.ui-ability-cost { font-size: calc(var(--px) * 5); }
.ui-tip {
  position: absolute; bottom: calc(100% + var(--px) * 2); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 0 var(--px);
  font-size: calc(var(--px) * 5); color: var(--c-hi); text-shadow: var(--t-outline);
  display: none;
}
.ui-ability:hover .ui-tip { display: block; }

/* ---------- Popup ---------- */
.ui-popup {
  position: absolute; left: 0; top: 0;
  flex-direction: column; gap: var(--px); width: calc(var(--px) * 140); z-index: 5;
  pointer-events: auto;
}
.ui-popup-title { font-size: calc(var(--px) * 6); font-weight: 700; color: var(--c-gold3); text-align: center; text-shadow: var(--t-outline); }
.ui-garg { justify-content: flex-start; gap: calc(var(--px) * 2); text-align: left; padding: 0; }
.ui-garg-portrait { flex: none; display: inline-flex; }
.ui-garg-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ui-garg-name { font-size: calc(var(--px) * 6); }
.ui-garg-role { font-weight: 400; font-size: calc(var(--px) * 4.5); color: var(--c-stone9); letter-spacing: 0; line-height: 1.15; }
.ui-garg:disabled .ui-garg-portrait { filter: grayscale(1) brightness(0.6); }
.ui-garg-cost { font-size: calc(var(--px) * 6); white-space: nowrap; }

/* ---------- Off-screen giant markers ---------- */
.ui-markers { position: absolute; inset: 0; pointer-events: none; }
.ui-gmark { position: absolute; left: 0; top: 0; display: none; width: 0; height: 0; }
.ui-gmark.on { display: block; animation: ui-blink 0.8s steps(2) infinite; }
.ui-gmark .px { position: absolute; left: 0; top: 0; }
.ui-gmark-face { transform: translate(-50%, -50%); }
@keyframes ui-blink { 50% { opacity: 0.55; } }

/* ---------- Feedback ---------- */
/* edge flashes: dithered pixel-art bands painted by ui.js (paintEdgeGlow), centred, never smoothed */
.ui-vignette, .ui-lowlight {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: -1; /* under the HUD */
  background-repeat: no-repeat; background-position: center; image-rendering: pixelated;
}
.ui-lowlight.on { opacity: 1; animation: ui-lowflash 1s steps(2) infinite; }
@keyframes ui-lowflash { 50% { opacity: 0.35; } }

/* ---------- Help ---------- */
.ui-help {
  position: absolute; left: calc(var(--px) * 3); bottom: calc(var(--px) * 3);
  font-size: calc(var(--px) * 5); color: var(--c-stone8); max-width: calc(var(--px) * 100); line-height: 1.4;
  text-shadow: var(--t-outline); pointer-events: none;
}
#ui-root[data-phase='title'] .ui-help,
#ui-root[data-phase='dawn'] .ui-help,
#ui-root[data-phase='gameover'] .ui-help,
#ui-root[data-phase='victory'] .ui-help,
#ui-root[data-phase='finale'] .ui-help,
#ui-root[data-phase='finale'] .hn-layer,
#ui-root[data-phase='finale'] .ui-markers,
#ui-root[data-phase='finale'] .ui-levelup,
#ui-root[data-phase='finale'] .ui-vignette,
#ui-root[data-phase='finale'] .ui-lowlight { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ui-help { display: none; }
}
@media (max-width: 640px) {
  .ui-abilities { width: 100%; }
  .ui-ability-row { gap: var(--px); }
}


#ui-root[data-phase='dawn'] .ui-combo-wrap { display: none; }
.ui-combo {
  display: flex; align-items: center; gap: calc(var(--px) * 2);
  padding: 0 calc(var(--px) * 2);
  visibility: hidden; opacity: 0; transform: translateX(calc(var(--px) * -6));
  transition: opacity 0.15s, transform 0.15s steps(3);
}
.ui-combo.show { visibility: visible; opacity: 1; transform: none; }
.ui-combo-mult {
  display: inline-block; min-width: calc(var(--px) * 22); text-align: center;
  font-size: calc(var(--px) * 9); line-height: 1.1; font-weight: 700;
  color: var(--c-hi); text-shadow: var(--t-outline);
  transform-origin: 50% 60%;
}
.ui-combo[data-tier='1'] .ui-combo-mult { color: var(--c-gold3); }
.ui-combo[data-tier='2'] .ui-combo-mult { color: var(--c-gold2); font-size: calc(var(--px) * 10); }
.ui-combo[data-tier='3'] .ui-combo-mult { color: var(--c-fire2); font-size: calc(var(--px) * 11); }
.ui-combo[data-tier='4'] .ui-combo-mult {
  color: var(--c-fire1); font-size: calc(var(--px) * 12);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 4) rgba(255, 138, 58, 0.9);
  animation: ui-combo-hot 0.5s steps(2) infinite;
}
@keyframes ui-combo-hot { 50% { color: var(--c-fire2); } }
.ui-combo-right { display: flex; flex-direction: column; gap: 0; }
.ui-combo-line { display: flex; align-items: baseline; gap: calc(var(--px) * 1.5); }
.ui-combo-count { font-size: calc(var(--px) * 6); color: var(--c-hi); text-shadow: var(--t-outline); font-variant-numeric: tabular-nums; }
.ui-combo-bar { height: calc(var(--px) * 6); }

.ui-combo-break {
  position: absolute; left: calc(var(--px) * 2); top: 0;
  display: flex; flex-direction: column; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.ui-combo-break b { font-size: calc(var(--px) * 8); color: var(--c-fire1); text-shadow: var(--t-outline); letter-spacing: calc(var(--px) * 0.5); }
.ui-combo-break span { font-size: calc(var(--px) * 5); color: var(--c-stone9); text-shadow: var(--t-outline); }
.ui-combo-break.on { animation: ui-combo-break 1.5s ease-out forwards; }
@keyframes ui-combo-break {
  0% { opacity: 1; transform: scale(1.5) rotate(-4deg); filter: brightness(2); }
  8% { transform: translateX(calc(var(--px) * -3)) rotate(3deg); filter: brightness(1); }
  16% { transform: translateX(calc(var(--px) * 3)) rotate(-2deg); }
  24% { transform: translateX(calc(var(--px) * -2)) rotate(1deg); }
  32% { transform: none; opacity: 1; }
  70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(calc(var(--px) * 6)) rotate(4deg); }
}

/* ======================= Stars ======================= */
#ui-root { --sp: var(--px); }
.ui-stars { display: inline-flex; gap: calc(var(--sp) * 1); flex: none; vertical-align: middle; }
.ui-star { position: relative; display: inline-block; width: calc(var(--sp) * 11); height: calc(var(--sp) * 10); flex: none; }
.ui-star-px { position: absolute; left: 0; top: 0; width: var(--sp); height: var(--sp); display: block; }
.ui-star.on { filter: drop-shadow(0 0 calc(var(--sp) * 2) rgba(245, 200, 90, 0.55)); }
.ui-star.pop { animation: ui-star-pop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.ui-star.pop:not(.on) { animation-name: ui-star-dim; }
@keyframes ui-star-pop {
  0% { transform: scale(0) rotate(-90deg); opacity: 0; }
  60% { transform: scale(1.5) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes ui-star-dim { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ======================= Level-up overlay ======================= */
.ui-levelup {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  padding: 12px;
  pointer-events: auto;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 6, 18, 0.25) 0%, rgba(10, 6, 18, 0.62) 75%);
}
.ui-levelup.open { display: flex; animation: ui-fade-in 0.2s ease-out both; }
.ui-levelup.closing { animation: ui-fade-out 0.24s ease-in forwards; pointer-events: none; }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
.ui-lu-box { display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 3); max-width: 100%; max-height: 100%; }
.ui-lu-title {
  font-size: calc(var(--px) * 12); font-weight: 700; letter-spacing: var(--px); color: var(--c-gold3);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.7);
  text-align: center; white-space: nowrap;
}
.ui-lu-sub { font-size: calc(var(--px) * 6); color: var(--c-hi); text-shadow: var(--t-outline); margin-top: calc(var(--px) * -2); }
.ui-lu-hint { font-size: calc(var(--px) * 5); color: var(--c-stone8); text-shadow: var(--t-outline); }
.ui-lu-cards { display: flex; gap: calc(var(--px) * 5); align-items: stretch; justify-content: center; min-height: 0; }
.ui-card {
  position: relative;
  width: calc(var(--px) * 76); min-height: calc(var(--px) * 96);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--px) * 2);
  padding: calc(var(--px) * 2) var(--px);
  margin: 0; font: inherit; color: inherit; background: none; text-align: center;
  cursor: var(--cursor-point, pointer); -webkit-tap-highlight-color: transparent;
  outline: none;
  animation: ui-card-in 0.42s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: transform 0.12s ease-out, filter 0.12s;
}
.ui-card:nth-child(2) { animation-delay: 0.08s; }
.ui-card:nth-child(3) { animation-delay: 0.16s; }
.ui-card:nth-child(4) { animation-delay: 0.24s; }
.ui-levelup.again .ui-card { animation-name: ui-card-again; animation-duration: 0.32s; }
@keyframes ui-card-in {
  0% { opacity: 0; transform: translateY(calc(var(--px) * 40)) scale(0.7) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ui-card-again {
  0% { opacity: 0; transform: rotateY(90deg); }
  100% { opacity: 1; transform: none; }
}
.ui-card::after {
  /* gold rim, shown on hover / focus */
  content: ''; position: absolute; inset: calc(var(--px) * -3); pointer-events: none;
  border: var(--px) solid var(--c-gold3);
  box-shadow: 0 0 0 var(--px) var(--c-void), 0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.75), inset 0 0 0 var(--px) var(--c-void);
  opacity: 0; transition: opacity 0.1s;
}
@media (hover: hover) {
  .ui-card:hover { transform: translateY(calc(var(--px) * -4)); filter: brightness(1.15); }
  .ui-card:hover::after { opacity: 1; }
}
.ui-card:focus-visible { transform: translateY(calc(var(--px) * -4)); }
.ui-card:focus-visible::after { opacity: 1; }
.ui-card:active { transform: translateY(calc(var(--px) * -1)) scale(0.97); }
.ui-card.picked { animation: ui-card-picked 0.24s ease-out forwards; }
.ui-card.picked::after { opacity: 1; }
@keyframes ui-card-picked { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.08); filter: brightness(1.8); } 100% { transform: scale(1.04); filter: brightness(1.3); } }
.ui-card-key {
  position: absolute; left: calc(var(--px) * -2); top: calc(var(--px) * -4);
  font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline);
}
.ui-card-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--px) * 34); height: calc(var(--px) * 34);
}
.ui-card-letter { font-size: calc(var(--px) * 14); color: var(--c-gold3); text-shadow: var(--t-outline); }
.ui-card-text { display: flex; flex-direction: column; align-items: center; gap: var(--px); flex: 1; min-width: 0; }
.ui-card-tag { font-size: calc(var(--px) * 4.5); letter-spacing: calc(var(--px) * 0.5); color: var(--c-stone8); text-shadow: var(--t-outline); font-weight: 700; }
.ui-card-tag[data-cat='lightning'] { color: var(--c-cyan3); }
.ui-card-tag[data-cat='gargoyle'] { color: var(--c-stone9); }
.ui-card-tag[data-cat='ability'] { color: var(--c-fire2); }
.ui-card-tag[data-cat='crystal'] { color: var(--c-gold2); }
.ui-card-name { font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); line-height: 1.1; }
.ui-card-desc { font-size: calc(var(--px) * 5); font-weight: 400; color: var(--c-hi); text-shadow: var(--t-outline); line-height: 1.3; flex: 1; }
.ui-card-stack { display: flex; align-items: center; gap: calc(var(--px) * 2); margin-top: var(--px); }
.ui-card-count { font-size: calc(var(--px) * 5); color: var(--c-stone9); text-shadow: var(--t-outline); }
.ui-pip.next { animation: ui-blink 0.7s steps(2) infinite; }

/* ======================= End screen additions ======================= */
.ui-end-box { max-height: 100%; overflow-y: auto; scrollbar-width: none; gap: calc(var(--px) * 4); }
.ui-end-score { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ui-end-score-val {
  font-size: calc(var(--px) * 16); line-height: 1; font-weight: 700; color: var(--c-gold3);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.5);
  font-variant-numeric: tabular-nums;
}
.ui-end-best { display: flex; align-items: baseline; gap: calc(var(--px) * 3); min-height: calc(var(--px) * 8); margin-top: var(--px); }
.ui-record {
  font-size: calc(var(--px) * 8); color: var(--c-core); letter-spacing: var(--px);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 5) rgba(245, 200, 90, 0.9);
  animation: ui-record 0.9s steps(3) infinite alternate, ui-star-pop 0.5s 1.4s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes ui-record { from { color: var(--c-core); } to { color: var(--c-gold2); } }
.ui-end-nights { display: flex; flex-direction: column; gap: var(--px); width: 100%; max-width: calc(var(--px) * 130); }
.ui-end-night { display: flex; align-items: center; gap: calc(var(--px) * 4); padding: 0 calc(var(--px) * 2); }
.ui-end-night-n { font-size: calc(var(--px) * 6); font-weight: 700; color: var(--c-hi); text-shadow: var(--t-outline); min-width: calc(var(--px) * 28); text-align: left; white-space: nowrap; }
.ui-end-night-s { flex: 1; text-align: right; font-size: calc(var(--px) * 6); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-end-night.lost .ui-end-night-s { color: var(--c-fire1); font-size: calc(var(--px) * 5); }
.ui-end-night.none { opacity: 0.5; }
.ui-end-night-dash { color: var(--c-stone7); width: calc(var(--px) * 35); text-align: center; }

/* ======================= Responsive additions ======================= */
@media (max-width: 640px) {
  .ui-end-night { gap: calc(var(--px) * 2); }
  .ui-end-night-n { min-width: 0; }
  .ui-end-night.lost .ui-end-night-s { font-size: calc(var(--px) * 4.5); }

  /* cards stack vertically as wide rows */
  .ui-lu-title { font-size: calc(var(--px) * 10); }
  .ui-lu-cards { flex-direction: column; gap: calc(var(--px) * 4); width: 100%; }
  .ui-card {
    width: 100%; min-height: 0; flex-direction: row; align-items: center; text-align: left;
    padding: calc(var(--px) * 2);
  }
  .ui-card-text { align-items: flex-start; }
  .ui-card-icon { width: calc(var(--px) * 30); height: calc(var(--px) * 30); }
}
@media (max-height: 480px) {
  .ui-card { min-height: 0; }
  .ui-card-icon { width: calc(var(--px) * 26); height: calc(var(--px) * 26); }
}

/* Level-up choice open: fade the HUD under the overlay so the cards own the screen. */
#ui-root.choosing .ui-hud, #ui-root.choosing .ui-abilities, #ui-root.choosing .ui-help { opacity: 0.18; transition: opacity 0.2s; }

/* End stats: one row of three equal columns. */
.ui-end-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--px) * 2); width: 100%; }
.ui-end-stat { justify-content: center; padding: var(--px); min-width: 0; }
.ui-end-stat-col { align-items: center; text-align: center; min-width: 0; }
.ui-end-stat .ui-small-label { font-size: calc(var(--px) * 4.5); }

/* Phone portrait end screen: stats as label/value rows. */
@media (max-width: 640px) {
  .ui-end-best { flex-direction: column; align-items: center; gap: 0; }
  #ui-root .ui-end-stat .ui-ico { display: none; }
  .ui-end-stats { grid-template-columns: 1fr; gap: var(--px); }
  .ui-end-stat .ui-end-stat-col { flex-direction: row; justify-content: space-between; align-items: baseline; width: 100%; }
  .ui-end-stat { padding: 0 calc(var(--px) * 2); }
}
.ui-nowrap { white-space: nowrap; }

/* Giant marker: pulse + distance hint (additive). */
.ui-gmark.on { animation: none; }
.ui-gmark.on .ui-gmark-face, .ui-gmark.on .ui-gmark-arrow { opacity: var(--gm-a, 1); animation: ui-gpulse 0.9s steps(3) infinite; }
@keyframes ui-gpulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.6) drop-shadow(0 0 calc(var(--px) * 2) rgba(224, 80, 42, 0.9)); } }
.ui-gmark-dist {
  position: absolute; left: 0; top: calc(var(--px) * 7); transform: translateX(-50%);
  font-size: calc(var(--px) * 4.5); line-height: 1; color: #f4e8d0; white-space: nowrap;
  text-shadow: var(--px) var(--px) 0 #1a1226;
}


/* ======================= Top HUD strip ======================= */
/* One thin strip: night | score | light | level | enemies, XP as a line along the bottom edge.
   ui.js fitHud() sets .hud-wide / .hud-mid / .hud-narrow (two rows, phone portrait) on #ui-root. */
.ui-top {
  position: absolute; top: max(calc(var(--px) * 2), env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: stretch;
  max-width: calc(100vw - 8px);
}
.ui-strip {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0 calc(var(--px) * 2) calc(var(--px) * 1);
  white-space: nowrap;
}
.ui-seg { display: flex; align-items: center; gap: calc(var(--px) * 1.5); min-height: calc(var(--px) * 16); padding: 0 calc(var(--px) * 3); }
.ui-seg + .ui-seg { box-shadow: inset var(--px) 0 0 var(--c-night3); }
.ui-seg-night { font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); letter-spacing: calc(var(--px) * 0.5); }
.ui-seg-night .ui-ico { margin-right: 0; }
.ui-seg-score { gap: calc(var(--px) * 2); }
.ui-score-val { font-size: calc(var(--px) * 7); line-height: 1; font-variant-numeric: tabular-nums; }
.ui-seg-light { gap: calc(var(--px) * 2); }
.ui-light-gem { zoom: 2; margin: 0; filter: drop-shadow(0 0 calc(var(--px) * 1) rgba(245, 200, 90, 0.7)); }
.ui-light-bar { height: calc(var(--px) * 8); }
.ui-light-val {
  min-width: calc(var(--px) * 16); text-align: left;
  font-size: calc(var(--px) * 9); line-height: 1; font-weight: 700; color: var(--c-gold3);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 4) rgba(245, 200, 90, 0.45);
  font-variant-numeric: tabular-nums;
}
.ui-seg-light.low .ui-light-val { color: var(--c-fire2); text-shadow: var(--t-outline), 0 0 calc(var(--px) * 4) rgba(224, 80, 42, 0.9); animation: ui-lowflash 0.6s steps(2) infinite; }
.ui-seg-light.low .ui-light-bar { animation: ui-shake 0.5s steps(2) infinite; }
.ui-seg-light.low .ui-light-gem { filter: hue-rotate(-30deg) saturate(2) drop-shadow(0 0 calc(var(--px) * 1) rgba(224, 80, 42, 0.9)); }
@keyframes ui-shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--px)); } }
.ui-xp-lvl {
  font-size: calc(var(--px) * 6); font-weight: 700; color: var(--c-cyan3);
  text-shadow: var(--t-outline); white-space: nowrap; display: inline-block;
}
.ui-seg-enemy { gap: calc(var(--px) * 3); }
.ui-enemy-stat { display: inline-flex; align-items: center; gap: var(--px); }
.ui-enemy-stat .ui-ico { margin-right: 0; }
.ui-enemy-stat .ui-num { font-variant-numeric: tabular-nums; min-width: calc(var(--px) * 10); }
.ui-prog-bar { height: calc(var(--px) * 6); }
.ui-strip-break { display: none; }
.ui-xpline {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--px) * 2);
  background: var(--c-night1); pointer-events: none;
}
.ui-xpline-fill { width: 100%; height: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.15s steps(4); }
#ui-root[data-phase='dawn'] .ui-seg-enemy { display: none; }

/* mid: drop the "GECE" word and the spawn progress */
#ui-root.hud-mid .ui-night-word, #ui-root.hud-mid .ui-prog-bar,
#ui-root.hud-narrow .ui-night-word, #ui-root.hud-narrow .ui-prog-bar { display: none; }
#ui-root.hud-mid .ui-seg { padding: 0 calc(var(--px) * 2); }

/* narrow (phone portrait): two slim framed rows. Row A (night | light | level) sits left of the pause / sound
   buttons, row B (score | enemies) below them. Rows are display:contents in wide / mid (flat strip, ordered here). */
.ui-row { display: contents; }
.ui-seg-night { order: 1; } .ui-seg-score { order: 2; } .ui-seg-light { order: 3; } .ui-seg-lvl { order: 4; } .ui-seg-enemy { order: 5; }
#ui-root.hud-narrow .ui-top { left: var(--px); right: calc(var(--px) * 2); transform: none; max-width: none; }
#ui-root.hud-narrow .ui-strip { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0; gap: var(--px); }
#ui-root.hud-narrow .ui-row { position: relative; display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; padding: 0 calc(var(--px) * 1) calc(var(--px) * 2); }
#ui-root.hud-narrow .ui-seg { min-height: calc(var(--px) * 8); padding: 0 calc(var(--px) * 1.5); box-shadow: none; gap: var(--px); }
#ui-root.hud-narrow .ui-seg-night { font-size: calc(var(--px) * 7); }
#ui-root.hud-narrow .ui-seg-night .ui-ico { display: none; }
#ui-root.hud-narrow .ui-seg-light { gap: var(--px); padding-left: 0; }
#ui-root.hud-narrow .ui-seg-lvl { padding-left: calc(var(--px) * 2); padding-right: var(--px); }
#ui-root.hud-narrow .ui-xp-lvl { font-size: calc(var(--px) * 5.5); }
#ui-root.hud-narrow .ui-seg-score { gap: calc(var(--px) * 1.5); padding-left: calc(var(--px) * 2); }
#ui-root.hud-narrow .ui-score-val { font-size: calc(var(--px) * 6.5); }
#ui-root.hud-narrow .ui-seg-enemy { gap: calc(var(--px) * 2); }
#ui-root.hud-narrow .ui-enemy-stat .ui-num { min-width: 0; font-size: calc(var(--px) * 6.5); }
#ui-root.hud-narrow .ui-light-val { font-size: calc(var(--px) * 7); min-width: calc(var(--px) * 12); }
#ui-root.hud-narrow .ui-light-bar { height: calc(var(--px) * 7); }
#ui-root.hud-narrow .ui-light-gem { zoom: 1; margin: calc(var(--px) * -3) 0; }
#ui-root.hud-narrow .ui-enemy-stat .ui-ico { margin: calc(var(--px) * -3) 0; }
#ui-root.hud-narrow .ui-row-b { padding-bottom: var(--px); }
/* combo: frameless outlined badge under row B (a framed box would cost another ~17 rows) */
#ui-root.hud-narrow .ui-under-right { top: 0; }
#ui-root.hud-narrow .ui-combo-wrap { top: 0; left: calc(var(--px) * 4); }
#ui-root.hud-narrow .ui-combo { border-image: none; background: none; border: 0; padding: 0; gap: calc(var(--px) * 2); transform: none; }
#ui-root.hud-narrow .ui-combo-mult, #ui-root.hud-narrow .ui-combo[data-tier] .ui-combo-mult { min-width: 0; font-size: calc(var(--px) * 8); }
#ui-root.hud-narrow .ui-combo-count { font-size: calc(var(--px) * 6); }
#ui-root.hud-narrow .ui-combo .ui-small-label { font-size: calc(var(--px) * 4.5); }
#ui-root.hud-narrow .ui-combo-bar { height: calc(var(--px) * 4); }

/* under the strip: combo badge (left), remaining-enemies hint (right) */
.ui-under { position: relative; height: 0; }
.ui-combo-wrap { position: absolute; left: 0; top: var(--px); }
.ui-under-right { position: absolute; right: 0; top: var(--px); display: flex; flex-direction: column; align-items: flex-end; }
.ui-combo-mult { font-size: calc(var(--px) * 8); min-width: calc(var(--px) * 18); }
.ui-combo[data-tier='2'] .ui-combo-mult { font-size: calc(var(--px) * 9); }
.ui-combo[data-tier='3'] .ui-combo-mult { font-size: calc(var(--px) * 10); }
.ui-combo[data-tier='4'] .ui-combo-mult { font-size: calc(var(--px) * 11); }
.ui-combo-bar { height: calc(var(--px) * 5); }
.ui-remain {
  pointer-events: auto; cursor: var(--cursor-point, pointer);
  min-height: 44px; padding: 0 calc(var(--px) * 2); margin: 0; background: none;
  font: inherit; font-size: calc(var(--px) * 5); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline);
  white-space: nowrap; animation: ui-blink 1.2s steps(2) infinite; -webkit-tap-highlight-color: transparent;
}
.ui-remain:hover { color: var(--c-core); }

/* ======================= Ability bar: lightning slot ======================= */
.ui-ability-sep { width: calc(var(--px) * 3); flex: none; }
.ui-ability-label { font-size: calc(var(--px) * 5); font-weight: 700; color: var(--c-cyan3); text-shadow: var(--t-outline); line-height: calc(var(--px) * 8); }
.ui-ability-lightning .ui-slot-key { color: var(--c-cyan3); }
#ui-root.auto-staff .ui-slot-key { display: none; } /* touch: no keyboard */
.ui-ability-lightning.ready .ui-slot { filter: drop-shadow(0 0 calc(var(--px) * 2) rgba(122, 216, 255, 0.55)); }
.ui-ability-lightning.armed .ui-slot {
  filter: drop-shadow(0 0 calc(var(--px) * 4) rgba(122, 216, 255, 0.95)) brightness(1.2);
  animation: ui-armed 0.5s steps(2) infinite;
}
.ui-ability-lightning.armed .ui-ability-label { color: var(--c-core); animation: ui-blink 0.5s steps(2) infinite; }
@keyframes ui-armed { 50% { filter: drop-shadow(0 0 calc(var(--px) * 2) rgba(122, 216, 255, 0.6)) brightness(1); } }
.ui-ability-lightning.no-arm .ui-slot { cursor: default; }
.ui-armed-hint {
  display: none; padding: 0 calc(var(--px) * 2);
  font-size: calc(var(--px) * 5); font-weight: 700; color: var(--c-cyan3); text-shadow: var(--t-outline); white-space: nowrap;
}
#ui-root.lightning-armed .ui-armed-hint:not(.ui-ability-hint) { display: block; animation: ui-blink 0.8s steps(2) infinite; }
/* armed meteor / lure (HUD click -> waiting for a target click) */
#ui-root.ability-armed .ui-ability-hint { display: block; color: var(--c-gold3, #ffd36a); animation: ui-blink 0.8s steps(2) infinite; }
.ui-ability.armed .ui-slot {
  filter: drop-shadow(0 0 calc(var(--px) * 4) rgba(255, 200, 96, 0.95)) brightness(1.2);
  animation: ui-armed-gold 0.5s steps(2) infinite;
}
@keyframes ui-armed-gold { 50% { filter: drop-shadow(0 0 calc(var(--px) * 2) rgba(255, 200, 96, 0.6)) brightness(1); } }

/* ======================= Dawn screen ======================= */
.ui-dawn {
  position: absolute; inset: 0; z-index: 20;
  flex-direction: column;
  pointer-events: auto;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(224, 160, 64, 0.26) 0%, rgba(224, 160, 64, 0) 100%),
    linear-gradient(180deg, rgba(20, 12, 34, 0.86) 0%, rgba(10, 6, 18, 0.95) 70%);
}
.ui-dawn.in { animation: ui-fade-in 0.35s ease-out both; }
.ui-dawn-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ui-dawn-scroll::-webkit-scrollbar { display: none; }
.ui-dawn-inner {
  width: 100%; max-width: calc(var(--px) * 430); min-height: 100%;
  margin: 0 auto;
  padding: max(calc(var(--px) * 4), env(safe-area-inset-top)) calc(var(--px) * 4) 0;
  display: flex; flex-direction: column; gap: calc(var(--px) * 3);
}
.ui-dawn-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--px) * 4); }
.ui-dawn-titles { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ui-dawn-kicker { font-size: calc(var(--px) * 6); font-weight: 700; letter-spacing: calc(var(--px) * 1.5); color: var(--c-gold2); text-shadow: var(--t-outline); }
.ui-dawn-title {
  margin: 0; font-size: calc(var(--px) * 13); line-height: 1.05; font-weight: 700; color: var(--c-gold3);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 8) rgba(245, 200, 90, 0.5);
}
.ui-dawn-divider { margin: var(--px) 0; }
.ui-dawn-whisper { font-size: calc(var(--px) * 5.5); color: var(--c-stone9); font-style: italic; line-height: 1.35; }
.ui-dawn.in .ui-dawn-titles { animation: ui-drop-in 0.5s cubic-bezier(.2, 1.3, .4, 1) both; }
.ui-dawn.in .ui-dawn-light { animation: ui-drop-in 0.5s 0.1s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes ui-drop-in { from { opacity: 0; transform: translateY(calc(var(--px) * -16)); } to { opacity: 1; transform: none; } }

.ui-dawn-light { position: relative; flex: none; display: flex; align-items: center; gap: calc(var(--px) * 3); padding: 0 calc(var(--px) * 3) 0 var(--px); }
.ui-dawn-crystal { position: relative; width: calc(var(--px) * 24); height: calc(var(--px) * 32); flex: none; }
.ui-dawn-crystal .px { position: absolute; left: 0; top: 0; }
.ui-dawn-light-col { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.ui-dawn-light-val {
  font-size: calc(var(--px) * 13); line-height: 1; font-weight: 700; color: var(--c-gold3); font-variant-numeric: tabular-nums;
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.55);
}
.ui-dawn-light-note { font-size: calc(var(--px) * 4.5); color: var(--c-stone8); text-shadow: var(--t-outline); }
.ui-dawn-spend {
  position: absolute; right: 0; top: calc(var(--px) * 2); pointer-events: none;
  font-size: calc(var(--px) * 8); font-weight: 700; color: var(--c-fire2); text-shadow: var(--t-outline);
  animation: ui-spend 0.9s ease-out forwards;
}
@keyframes ui-spend { 0% { opacity: 1; transform: translate(calc(var(--px) * 10), 0); } 100% { opacity: 0; transform: translate(calc(var(--px) * 10), calc(var(--px) * -14)); } }

.ui-dawn-body { display: flex; flex-direction: column; gap: calc(var(--px) * 4); }
/* wide: the report is a horizontal band (head | night score | stat columns) above the shop */
#ui-root.dawn-wide .ui-report.show {
  grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: 'head score body' 'stars score body';
  column-gap: calc(var(--px) * 6); row-gap: var(--px); padding: 0 calc(var(--px) * 2);
}
#ui-root.dawn-wide .ui-report-head { pointer-events: none; min-height: 0; justify-content: center; }
#ui-root.dawn-wide .ui-report-head .ui-report-title { flex: none; }
#ui-root.dawn-wide .ui-report-more, #ui-root.dawn-wide .ui-report-chev { display: none; }
#ui-root.dawn-wide .ui-report.collapsed .ui-report-body { display: grid; }
#ui-root.dawn-wide .ui-report-starslot { --sp: calc(var(--px) * 2); }
#ui-root.dawn-wide .ui-report-score { margin: 0; align-items: center; }
#ui-root.dawn-wide .ui-report-body {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: calc(var(--px) * 6);
  align-content: center;
}
#ui-root.dawn-wide .ui-report-sep { display: none; }

/* night report */
.ui-report { padding: 0 var(--px); }
.ui-dawn.in .ui-report { animation: ui-report-in 0.45s 0.15s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes ui-report-in { from { opacity: 0; transform: translateX(calc(var(--px) * -20)); } to { opacity: 1; transform: none; } }
.ui-report { display: none; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'head head' 'stars score' 'body body'; align-items: center; column-gap: calc(var(--px) * 3); }
.ui-report.show { display: grid; }
.ui-report-head {
  grid-area: head; display: flex; align-items: center; gap: calc(var(--px) * 2); width: 100%;
  min-height: 44px; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left;
  cursor: var(--cursor-point, pointer); -webkit-tap-highlight-color: transparent; pointer-events: auto;
}
.ui-report-head .ui-report-title { flex: 1; }
.ui-report-more { font-size: calc(var(--px) * 5); color: var(--c-stone8); text-shadow: var(--t-outline); }
.ui-report-chev {
  width: 0; height: 0; flex: none;
  border-left: calc(var(--px) * 3) solid transparent; border-right: calc(var(--px) * 3) solid transparent;
  border-bottom: calc(var(--px) * 3) solid var(--c-stone8);
}
.ui-report.collapsed .ui-report-chev { border-bottom: 0; border-top: calc(var(--px) * 3) solid var(--c-stone8); }
.ui-report.collapsed .ui-report-body { display: none; }
.ui-report-starslot { grid-area: stars; --sp: var(--px); }
.ui-report-body { grid-area: body; }
.ui-report-title { font-size: calc(var(--px) * 6); font-weight: 700; letter-spacing: calc(var(--px) * 0.5); color: var(--c-gold3); text-shadow: var(--t-outline); white-space: nowrap; }
.ui-report-score { grid-area: score; display: flex; flex-direction: column; align-items: flex-end; margin: var(--px) 0; }
.ui-report-score-val {
  font-size: calc(var(--px) * 12); line-height: 1; font-weight: 700; color: var(--c-gold3); font-variant-numeric: tabular-nums;
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.5);
}
.ui-report-body { display: flex; flex-direction: column; }
.ui-report-row { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--px) * 3); line-height: 1.3; }
.ui-report-l { font-size: calc(var(--px) * 5); color: var(--c-stone9); text-shadow: var(--t-outline); }
.ui-report-v { font-size: calc(var(--px) * 5.5); color: var(--c-hi); text-shadow: var(--t-outline); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-report-row.good .ui-report-v { color: var(--c-cyan3); }
.ui-report-row.bad .ui-report-v { color: var(--c-fire2); }
.ui-report-row.bonus .ui-report-l { color: var(--c-gold2); }
.ui-report-row.bonus .ui-report-v { color: var(--c-gold3); }
.ui-report-row.sum .ui-report-l { font-weight: 700; color: var(--c-hi); }
.ui-report-row.sum .ui-report-v { font-size: calc(var(--px) * 6); color: var(--c-gold3); }
.ui-report-sep { height: var(--px); margin: var(--px) 0; background: var(--c-night3); box-shadow: 0 var(--px) 0 var(--c-void); }

/* upgrade shop */
.ui-shop { display: flex; flex-direction: column; gap: calc(var(--px) * 2); min-width: 0; }
.ui-shop-head { display: flex; align-items: baseline; gap: calc(var(--px) * 3); flex-wrap: wrap; }
.ui-shop-title { margin: 0; font-size: calc(var(--px) * 8); font-weight: 700; color: var(--c-hi); text-shadow: var(--t-outline); letter-spacing: calc(var(--px) * 0.5); }
.ui-shop-sub { font-size: calc(var(--px) * 5); color: var(--c-stone8); text-shadow: var(--t-outline); }
.ui-shop-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: calc(var(--px) * 3); }
.ui-sec { grid-column: span var(--span, 1); display: flex; flex-direction: column; gap: var(--px); min-width: 0; }
.ui-sec-label {
  display: flex; align-items: center; gap: calc(var(--px) * 2);
  font-size: calc(var(--px) * 5); font-weight: 700; letter-spacing: calc(var(--px) * 1); color: var(--c-stone9); text-shadow: var(--t-outline);
}
.ui-sec-label::after { content: ''; flex: 1; height: var(--px); background: currentColor; opacity: 0.35; }
.ui-sec[data-cat='staff'] .ui-sec-label { color: var(--c-gold2); }
.ui-sec[data-cat='lightning'] .ui-sec-label { color: var(--c-cyan3); }
.ui-sec[data-cat='tower'] .ui-sec-label { color: var(--c-stone9); }
.ui-sec[data-cat='ability'] .ui-sec-label { color: var(--c-fire2); }
.ui-sec-cards { display: grid; grid-template-columns: repeat(var(--span, 1), minmax(0, 1fr)); gap: calc(var(--px) * 3); }

.ui-up {
  position: relative; min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'icon info buy';
  align-items: center; gap: calc(var(--px) * 3);
  transition: transform 0.12s ease-out, filter 0.12s;
}
.ui-dawn.in .ui-up { animation: ui-up-in 0.45s cubic-bezier(.2, 1.35, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 220ms); }
@keyframes ui-up-in { from { opacity: 0; transform: translateY(calc(var(--px) * 24)) scale(0.85); } to { opacity: 1; transform: none; } }
.ui-up-iconbox { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--px) * 24); height: calc(var(--px) * 24); }
.ui-up-icon { flex: none; }
.ui-up-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ui-up-name { font-size: calc(var(--px) * 6.5); line-height: 1.15; font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); }
.ui-up-desc { font-size: calc(var(--px) * 5); line-height: 1.25; color: var(--c-hi); text-shadow: var(--t-outline); }
.ui-up-foot { display: flex; align-items: center; gap: calc(var(--px) * 2); min-width: 0; margin-top: var(--px); }
.ui-up-lvl { font-size: calc(var(--px) * 5); color: var(--c-stone8); text-shadow: var(--t-outline); font-variant-numeric: tabular-nums; }
.ui-up-buy {
  grid-area: buy; flex: none;
  min-width: calc(var(--px) * 30); min-height: max(44px, calc(var(--px) * 15)); padding: 0 calc(var(--px) * 2);
  font-size: calc(var(--px) * 6.5);
}
.ui-up.poor .ui-up-iconbox .px { filter: grayscale(0.6) brightness(0.75); }
.ui-up.poor .ui-up-buy { color: var(--c-stone8); }
.ui-up.maxed .ui-up-buy { color: var(--c-gold2); }
.ui-up.maxed .ui-up-buy:disabled { color: var(--c-gold2); }
.ui-up.maxed .ui-up-iconbox { filter: drop-shadow(0 0 calc(var(--px) * 3) rgba(245, 200, 90, 0.6)); }
@media (hover: hover) { .ui-up:not(.poor):not(.maxed):hover { transform: translateY(calc(var(--px) * -1)); filter: brightness(1.12); } }
.ui-up.bought { animation: ui-up-bought 0.45s ease-out both !important; }
@keyframes ui-up-bought {
  0% { filter: brightness(2.2) drop-shadow(0 0 calc(var(--px) * 6) rgba(255, 240, 176, 0.9)); transform: scale(1.04); }
  100% { filter: none; transform: none; }
}

/* footer actions (sticky at the bottom of the scroll area) */
.ui-dawn-foot {
  position: sticky; bottom: 0; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--px) * 4);
  padding: calc(var(--px) * 5) 0 max(calc(var(--px) * 4), env(safe-area-inset-bottom));
  background: rgb(10, 6, 18);
  box-shadow: 0 calc(var(--px) * -10) calc(var(--px) * 8) calc(var(--px) * -2) rgb(10, 6, 18);
  z-index: 2;
}
.ui-dawn.in .ui-dawn-foot { animation: ui-foot-in 0.45s 0.5s ease-out both; }
@keyframes ui-foot-in { from { opacity: 0; transform: translateY(calc(var(--px) * 10)); } to { opacity: 1; transform: none; } }
.ui-dawn-hint { margin: 0; flex: 1; min-width: 0; font-size: calc(var(--px) * 5); color: var(--c-stone9); text-shadow: var(--t-outline); line-height: 1.35; }
.ui-dawn-btns { display: flex; gap: calc(var(--px) * 3); flex: none; }
.ui-btn-tower { color: var(--c-hi); }
.ui-next { flex-direction: column; gap: 0; line-height: 1.1; }
.ui-btn-big.ui-next { animation: ui-next-glow 2s steps(8) infinite; }
@keyframes ui-next-glow {
  0%, 100% { filter: drop-shadow(0 0 calc(var(--px) * 2) rgba(245, 200, 90, 0.35)); }
  50% { filter: drop-shadow(0 0 calc(var(--px) * 5) rgba(245, 200, 90, 0.7)); }
}
.ui-next-sub { font-size: calc(var(--px) * 4.5); color: var(--c-stone9); letter-spacing: calc(var(--px) * 0.5); }

/* narrow dawn: footer stacks, buttons share the width */
@media (max-width: 640px) {
  .ui-dawn-head { flex-direction: column; align-items: stretch; gap: calc(var(--px) * 2); }
  .ui-dawn-title { font-size: calc(var(--px) * 10); }
  .ui-dawn-light { align-self: stretch; justify-content: center; }
  .ui-dawn-foot { flex-direction: column; align-items: stretch; gap: calc(var(--px) * 2); padding-top: calc(var(--px) * 4); }
  .ui-dawn-hint { display: none; } /* tower mode repeats it; the space is better spent on cards */
  .ui-dawn-btns .ui-btn { flex: 1; padding: 0 calc(var(--px) * 2); }
  .ui-report { padding: 0; }
  .ui-report-score-val { font-size: calc(var(--px) * 9); }
  .ui-dawn-crystal { display: none; }
  .ui-dawn-light { padding: var(--px) calc(var(--px) * 3); }
  .ui-dawn-light-col { flex-direction: row; align-items: baseline; gap: calc(var(--px) * 3); flex-wrap: wrap; }
  .ui-dawn-light-val { font-size: calc(var(--px) * 10); }
  .ui-btn-big { font-size: calc(var(--px) * 6); white-space: nowrap; }
  .ui-dawn-btns .ui-btn-tower { flex: 0 1 auto; }
}

/* ======================= Tower mode bar (dawn, screen hidden) ======================= */
.ui-towerbar {
  position: absolute; left: 4px; right: 4px; bottom: max(calc(var(--px) * 3), env(safe-area-inset-bottom));
  flex-direction: column; align-items: center; gap: var(--px);
  pointer-events: none;
  animation: ui-foot-in 0.3s ease-out both;
}
.ui-towerbar-hint {
  font-size: calc(var(--px) * 5.5); font-weight: 700; color: var(--c-core); text-shadow: var(--t-outline);
  text-align: center; animation: ui-hint-pulse 1.6s steps(4) infinite;
}
@keyframes ui-hint-pulse { 50% { color: var(--c-gold2); } }
.ui-towerbar-row { display: flex; align-items: center; gap: calc(var(--px) * 3); padding: var(--px) calc(var(--px) * 2); pointer-events: auto; max-width: 100%; }
.ui-towerbar-light { display: flex; align-items: center; gap: calc(var(--px) * 2); padding: 0 calc(var(--px) * 2); }
.ui-btn-up { position: relative; color: var(--c-hi); }
.ui-btn-badge {
  margin-left: calc(var(--px) * 2);
  min-width: calc(var(--px) * 8); height: calc(var(--px) * 8); padding: 0 var(--px);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--px) * 5); line-height: 1; color: var(--c-void); text-shadow: none;
  background: var(--c-gold3); box-shadow: 0 0 0 var(--px) var(--c-void), 0 0 calc(var(--px) * 3) rgba(245, 200, 90, 0.8);
}
.ui-next-small { min-height: max(44px, calc(var(--px) * 15)); }
@media (max-width: 640px) {
  .ui-towerbar-row { width: 100%; justify-content: space-between; }
  .ui-towerbar-light { display: none; }
  .ui-towerbar-row .ui-btn { flex: 1; }
}

/* very narrow phones (<= 380 CSS px): 5 ability slots at full size overflow, shrink the bar */
@media (max-width: 380px) { .ui-abilities { zoom: 0.86; } }

/* ======================= Title: continue / new game ======================= */
.ui-title-box .ui-continue { flex-direction: column; gap: 0; line-height: 1.1; animation: ui-next-glow 2s steps(8) infinite; }
.ui-btn-secondary { font-size: calc(var(--px) * 6); min-height: calc(var(--px) * 14); color: var(--c-stone9); }
.ui-title-box { align-items: center; }

/* ======================= HUD: New Game+ badge ======================= */
.ui-ng-badge {
  margin-left: calc(var(--px) * 2); padding: 0 calc(var(--px) * 1.5);
  font-size: calc(var(--px) * 6); font-weight: 700; line-height: 1.3; color: var(--c-void);
  background: var(--c-gold3); box-shadow: 0 var(--px) 0 var(--c-gold1); white-space: nowrap; text-shadow: none;
}

/* ======================= Upgrade pips (max up to 8) ======================= */
.ui-pips { white-space: nowrap; min-width: 0; font-size: 0; }
.ui-pips .ui-pip { margin-right: calc(var(--px) * -0.001); }
.ui-pips.tight { display: flex; flex-wrap: wrap; width: calc(var(--px) * 6 * var(--per-row, 4)); }
.ui-pips.tight .ui-pip { margin-right: 0; }
.ui-up-foot { flex-wrap: wrap; row-gap: 0; }

/* ======================= End screen: buttons + 10-night grid ======================= */
.ui-end-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--px) * 3); width: 100%; }
.ui-end-btns .ui-btn { min-width: 0; }
.ui-end-plus { color: var(--c-core); animation: ui-next-glow 2s steps(8) infinite; }
.ui-end-nights.grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--px) * 2);
  max-width: calc(var(--px) * 170);
}
.ui-end-nights.grid .ui-end-night {
  flex-direction: column; justify-content: center; gap: 0; padding: var(--px) 0; text-align: center;
}
.ui-end-nights.grid .ui-end-night-n:not(.ui-end-night-short) { display: none; }
.ui-end-nights.grid .ui-end-night-short { min-width: 0; text-align: center; font-size: calc(var(--px) * 5.5); color: var(--c-stone9); }
.ui-end-nights.grid .ui-end-stars { --sp: calc(var(--px) * 0.67); }
.ui-end-nights.grid .ui-end-night-s { flex: none; text-align: center; font-size: calc(var(--px) * 4.5); }
.ui-end-nights.grid .ui-end-night.lost .ui-end-night-s { font-size: calc(var(--px) * 3.5); }
.ui-end-nights.grid .ui-end-night-dash { width: auto; }
.ui-end-night-short { display: none; }
.ui-end-nights.grid .ui-end-night-short { display: block; }
/* Short landscape screens (1280x720, Steam Deck): one 10-wide night row and a wider box, and the button row sticks to the
   bottom of the scrolling box so the run actions never sit below the fold. */
@media (min-aspect-ratio: 4/3) and (max-height: 900px) {
  .ui-end-box { max-width: min(calc(var(--px) * 280), calc(100vw - 32px)); }
  .ui-end-nights.grid { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 100%; gap: var(--px); }
}
@media (min-aspect-ratio: 1/1) {
  .ui-end-btns {
    position: sticky; bottom: calc(var(--px) * -4); z-index: 1;
    padding: calc(var(--px) * 2) 0 calc(var(--px) * 3);
    background: linear-gradient(to bottom, rgba(30, 20, 48, 0) 0, var(--c-night2) calc(var(--px) * 2));
  }
}
@media (max-width: 640px) {
  .ui-end-nights.grid { gap: var(--px); max-width: 100%; }
  .ui-end-nights.grid .ui-end-stars { --sp: calc(var(--px) * 0.34); }
}

/* ======================= Finale (dawn cinematic) ======================= */
.ui-finale { position: absolute; inset: 0; display: none; pointer-events: none; }
#ui-root[data-phase='finale'] .ui-finale { display: block; }
.ui-finale-bar {
  position: absolute; left: 0; right: 0; height: 12vh; background: var(--c-void);
  transition: transform 2.2s cubic-bezier(.3, .1, .2, 1);
}
.ui-finale-bar.top { top: 0; transform: translateY(-100%); box-shadow: 0 var(--px) 0 var(--c-night2); }
.ui-finale-bar.bottom { bottom: 0; transform: translateY(100%); box-shadow: 0 calc(var(--px) * -1) 0 var(--c-night2); }
.ui-finale.show .ui-finale-bar { transform: none; }
.ui-finale-line {
  position: absolute; left: 50%; bottom: calc(12vh + 8vh); margin: 0; width: min(calc(100vw - 32px), calc(var(--px) * 220));
  transform: translateX(-50%); text-align: center;
  font-size: calc(var(--px) * 9); line-height: 1.35; font-weight: 600; letter-spacing: var(--px);
  color: var(--c-core);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.55);
  opacity: 0; transition: opacity 1s steps(8);
}
.ui-finale-line.on { opacity: 1; }
.ui-finale-btn {
  position: absolute; left: 50%; bottom: calc(12vh / 2 - 22px); transform: translateX(-50%);
  min-height: 44px; opacity: 0; visibility: hidden; transition: opacity 1.2s steps(8);
}
.ui-finale.btn-on .ui-finale-btn { opacity: 1; visibility: visible; pointer-events: auto; }
@media (max-width: 640px) {
  .ui-finale-line { font-size: calc(var(--px) * 7.5); bottom: calc(12vh + 6vh); }
}

/* ======================= Phase 2: dawn intel cards, event badge, evolution ======================= */
/* "TONIGHT" / "NEW ENEMY" cards between the night report and the shop */
.ui-intel { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--px) * 3); }
#ui-root.dawn-wide .ui-intel.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-intel-card { display: flex; align-items: center; gap: calc(var(--px) * 3); min-width: 0; padding: 0 calc(var(--px) * 1); }
.ui-dawn.in .ui-intel-card { animation: ui-report-in 0.45s 0.25s cubic-bezier(.2, 1.2, .4, 1) both; }
.ui-dawn.in .ui-intel-card + .ui-intel-card { animation-delay: 0.35s; }
.ui-intel-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ui-intel-text { min-width: 0; display: flex; flex-direction: column; padding: calc(var(--px) * 1) 0; }
.ui-intel-kicker { font-size: calc(var(--px) * 4.5); font-weight: 700; letter-spacing: calc(var(--px) * 1); text-shadow: var(--t-outline); color: var(--c-fire2); }
.ui-intel-card[data-kind='enemy'] .ui-intel-kicker { color: var(--c-cyan3); }
.ui-intel-name { font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-hi); text-shadow: var(--t-outline); line-height: 1.1; }
.ui-intel-desc { font-size: calc(var(--px) * 4.5); color: var(--c-stone9); text-shadow: var(--t-outline); line-height: 1.25; }
@media (max-width: 640px) {
  .ui-intel { gap: calc(var(--px) * 2); }
  .ui-intel-name { font-size: calc(var(--px) * 6); }
  .ui-intel-desc { font-size: calc(var(--px) * 4); }
}

/* night HUD event badge (above the "Kalan" hint, under the strip, right side) */
.ui-evbadge {
  display: flex; align-items: center; gap: calc(var(--px) * 1); padding: 0 calc(var(--px) * 2); margin-bottom: var(--px);
  font-size: calc(var(--px) * 5); font-weight: 700; color: var(--c-fire2); text-shadow: var(--t-outline); white-space: nowrap;
  pointer-events: auto;
}
.ui-evbadge-ico { flex: none; }

/* evolution popup: the existing popup frame, wider, with description lines */
.ui-evo { width: min(calc(var(--px) * 176), calc(100vw - 16px)); gap: calc(var(--px) * 2); }
.ui-evo-head { display: flex; align-items: center; gap: calc(var(--px) * 2); }
.ui-evo-headtext { display: flex; flex-direction: column; min-width: 0; }
.ui-evo-title { font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); }
.ui-evo-sub { font-size: calc(var(--px) * 4.5); color: var(--c-stone9); text-shadow: var(--t-outline); }
.ui-evo-list { display: flex; flex-direction: column; gap: calc(var(--px) * 2); }
.ui-evo-opt { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--px) * 2); padding: 0 calc(var(--px) * 1); text-align: left; min-height: calc(var(--px) * 26); }
.ui-evo-iconbox { flex: none; display: inline-flex; }
.ui-evo-opt:disabled:not(.chosen) .ui-evo-iconbox { filter: grayscale(1) brightness(0.6); }
.ui-evo-opt.chosen:disabled { color: var(--c-gold3); cursor: default; }
.ui-evo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-evo-name { font-size: calc(var(--px) * 6); font-weight: 700; }
.ui-evo-desc { font-size: calc(var(--px) * 4.5); font-weight: 400; color: var(--c-stone9); line-height: 1.2; letter-spacing: 0; }
.ui-evo-opt:disabled:not(.chosen) .ui-evo-desc { color: var(--c-stone7); }
.ui-evo-cost { font-size: calc(var(--px) * 6); white-space: nowrap; flex: none; }

/* "↑" evolution hint above placed gargoyles (dawn tower mode) */
.ui-evomarks { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ui-evomark { position: absolute; left: 0; top: 0; display: none; width: 0; height: 0; }
.ui-evomark.on { display: block; }
.ui-evomark-arrow { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(-90deg); animation: ui-evo-bob 0.9s steps(3) infinite; filter: drop-shadow(0 0 calc(var(--px) * 2) rgba(245, 200, 90, 0.9)); }
@keyframes ui-evo-bob { 0%, 100% { margin-top: 0; opacity: 0.75; } 50% { margin-top: calc(var(--px) * -3); opacity: 1; } }

/* ======================= Wave B: boss bar, banner, edge arrow, dawn card ======================= */
.ui-boss { position: relative; display: flex; flex-direction: column; gap: calc(var(--px) * 1); margin-top: calc(var(--px) * 1);
  padding: calc(var(--px) * 1) calc(var(--px) * 3) calc(var(--px) * 2); min-width: calc(var(--px) * 170); }
.ui-boss-head { display: flex; align-items: center; gap: calc(var(--px) * 2); }
.ui-boss-ico { flex: none; filter: drop-shadow(0 0 calc(var(--px) * 1) rgba(224, 80, 42, 0.8)); }
.ui-boss-names { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: calc(var(--px) * 2); white-space: nowrap; overflow: hidden; }
.ui-boss-name { font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); letter-spacing: calc(var(--px) * 0.5); }
.ui-boss-title { font-size: calc(var(--px) * 4.5); color: var(--c-stone9); text-shadow: var(--t-outline); overflow: hidden; text-overflow: ellipsis; }
.ui-boss-pips { flex: none; display: flex; gap: calc(var(--px) * 1.5); }
.ui-boss-pip { display: block; width: calc(var(--px) * 4); height: calc(var(--px) * 4); background: var(--c-night3); box-shadow: 0 0 0 var(--px) var(--c-void); transform: rotate(45deg) scale(0.8); }
.ui-boss-pip.done { background: var(--c-stone7); }
.ui-boss-pip.now { background: var(--c-fire2); box-shadow: 0 0 0 var(--px) var(--c-void), 0 0 calc(var(--px) * 3) rgba(255, 138, 58, 0.9); }
.ui-boss-trough { position: relative; height: calc(var(--px) * 9); }
.ui-boss-fill { height: 100%; width: 0; transition: width 0.12s steps(3); }
.ui-boss-notch { position: absolute; top: 0; bottom: 0; width: var(--px); margin-left: calc(var(--px) * -0.5); background: var(--c-core); opacity: 0.35; z-index: 2; }
.ui-boss-notch.live { opacity: 0.9; box-shadow: 0 0 calc(var(--px) * 2) rgba(255, 240, 176, 0.8); }
.ui-boss-state { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--px) * 5); letter-spacing: calc(var(--px) * 1); color: var(--c-hi); text-shadow: var(--t-outline); white-space: nowrap; }
.ui-boss.closed .ui-boss-fill { filter: grayscale(0.85) brightness(0.8); }
.ui-boss.closed .ui-boss-trough::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(10, 6, 18, 0.55) 0 calc(var(--px) * 2), transparent calc(var(--px) * 2) calc(var(--px) * 4)); }
.ui-boss.final .ui-boss-fill { animation: ui-lowflash 0.7s steps(2) infinite; }
#ui-root.hud-narrow .ui-boss { min-width: 0; }
#ui-root.hud-narrow .ui-boss-title { display: none; }
#ui-root.hud-narrow .ui-boss { padding: 0 calc(var(--px) * 2) var(--px); gap: 0; margin-top: var(--px); }
#ui-root.hud-narrow .ui-boss-ico { margin: calc(var(--px) * -4) 0 calc(var(--px) * -3); }
#ui-root.hud-narrow .ui-boss-name { font-size: calc(var(--px) * 6); }
#ui-root.hud-narrow .ui-boss-trough { height: calc(var(--px) * 7); }
/* short screens (phone landscape): the boss bar gets the slim narrow look and the arrival banner drops below it,
   so the top of the screen keeps the HUD + one thin bar instead of half the view */
@media (max-height: 480px) {
  #ui-root .ui-boss { min-width: 0; padding: 0 calc(var(--px) * 2) var(--px); gap: 0; margin-top: var(--px); }
  #ui-root .ui-boss-title { display: none; }
  #ui-root .ui-boss-ico { margin: calc(var(--px) * -4) 0 calc(var(--px) * -3); }
  #ui-root .ui-boss-name { font-size: calc(var(--px) * 5.5); }
  #ui-root .ui-boss-trough { height: calc(var(--px) * 7); }
  #ui-root .ui-bossbanner { top: 46%; }
}
#ui-root.hud-narrow .ui-evbadge { margin-bottom: 0; padding: 0 var(--px); }
#ui-root.hud-narrow .ui-evbadge-ico { margin: calc(var(--px) * -2) 0; }
#ui-root:not([data-phase='night']) .ui-boss, #ui-root:not([data-phase='night']) .ui-bossbanner, #ui-root:not([data-phase='night']) .ui-bmark { display: none; }

.ui-bmark.on .ui-gmark-face { filter: drop-shadow(0 0 calc(var(--px) * 2) rgba(255, 70, 40, 0.95)); }
.ui-bmark.on .ui-gmark-arrow, .ui-bmark.on .ui-gmark-face { opacity: 1; animation: ui-gpulse 0.6s steps(3) infinite; }

.ui-bossbanner { position: absolute; left: 0; right: 0; top: 28%; z-index: 20; display: none; flex-direction: column; align-items: center;
  gap: calc(var(--px) * 2); padding: 0 12px; text-align: center; pointer-events: none; }
.ui-bossbanner.on { display: flex; animation: ui-banner 2.6s steps(1) both; }
.ui-bossbanner-kick { font-size: calc(var(--px) * 5.5); font-weight: 700; letter-spacing: calc(var(--px) * 1.5); color: var(--c-stone9); text-shadow: var(--t-outline); }
.ui-bossbanner-text { font-size: calc(var(--px) * 15); font-weight: 700; line-height: 1.05; color: var(--c-fire2);
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 8) rgba(224, 80, 42, 0.85); max-width: 100%; }
.ui-bossbanner[data-kind='phase'] .ui-bossbanner-text { color: var(--c-gold3); text-shadow: var(--t-outline), 0 0 calc(var(--px) * 8) rgba(245, 200, 90, 0.8); }
.ui-bossbanner[data-kind='killed'] .ui-bossbanner-text { color: var(--c-core); font-size: calc(var(--px) * 13); text-shadow: var(--t-outline), 0 0 calc(var(--px) * 10) rgba(255, 240, 176, 0.9); }
@keyframes ui-banner {
  0% { opacity: 0; transform: scale(1.5); }
  8% { opacity: 1; transform: scale(1.12); }
  16%, 78% { opacity: 1; transform: scale(1); }
  86% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (max-width: 640px) {
  .ui-bossbanner { top: 40%; }
  .ui-bossbanner-text { font-size: calc(var(--px) * 10); }
  .ui-bossbanner[data-kind='killed'] .ui-bossbanner-text { font-size: calc(var(--px) * 9); }
  .ui-boss-name { font-size: calc(var(--px) * 6); }
}

.ui-intel-card[data-kind='boss'] .ui-intel-kicker { color: var(--c-red2); filter: brightness(1.6); }
.ui-intel-card[data-kind='boss'] .ui-intel-name { color: var(--c-gold3); }
.ui-intel-card[data-kind='boss'] { box-shadow: 0 0 calc(var(--px) * 4) rgba(224, 80, 42, 0.45); }
.ui-intel.three { grid-template-columns: minmax(0, 1fr); }
#ui-root.dawn-wide .ui-intel.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ======================= Sound: speaker button + menu ======================= */
/* top-right corner; title, dawn (screen and tower mode) and night. Hidden without an audio module. */
.ui-snd-btn {
  position: absolute; z-index: 5;
  top: max(calc(var(--px) * 2), env(safe-area-inset-top)); right: max(calc(var(--px) * 2), env(safe-area-inset-right));
  display: none; align-items: center; justify-content: center;
  width: max(44px, calc(var(--px) * 15)); height: max(44px, calc(var(--px) * 15));
  min-height: 0; padding: 0;
}
#ui-root[data-phase='title'] .ui-snd-btn, #ui-root[data-phase='dawn'] .ui-snd-btn,
#ui-root[data-phase='night'] .ui-snd-btn, #ui-root[data-phase='finale'] .ui-snd-btn { display: flex; }
#ui-root.no-audio .ui-snd-btn, #ui-root.no-audio .ui-snd-menu { display: none !important; }
.ui-snd-btn:hover { filter: brightness(1.25); }
.ui-snd-btn:active { transform: translateY(var(--px)); }
.ui-snd-btn:focus-visible, .ui-snd-track:focus-visible, .ui-snd-mute:focus-visible { outline: var(--px) solid var(--c-core); outline-offset: var(--px); }
#ui-root .ui-snd-ico-off, #ui-root.snd-muted .ui-snd-ico-on { display: none; }
#ui-root.snd-muted .ui-snd-ico-off { display: inline-block; }
#ui-root.snd-muted .ui-snd-btn { animation: ui-snd-pulse 1.6s steps(2) infinite; }
@keyframes ui-snd-pulse { 50% { filter: brightness(0.75); } }

.ui-snd-menu {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(10, 6, 18, 0.62);
  pointer-events: auto;
}
.ui-snd-menu.open { display: flex; animation: ui-snd-in 0.18s steps(4) both; }
@keyframes ui-snd-in { from { opacity: 0; } to { opacity: 1; } }
.ui-snd-box {
  width: 100%; max-width: min(calc(var(--px) * 150), calc(100vw - 32px));
  max-height: 100%; overflow-y: auto;
  padding: calc(var(--px) * 3) calc(var(--px) * 5) calc(var(--px) * 4);
  display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--px) * 2);
}
.ui-snd-title { margin: 0; text-align: center; font-size: calc(var(--px) * 11); font-weight: 700; color: var(--c-gold3); letter-spacing: var(--px); text-shadow: var(--t-outline); }
.ui-snd-box .ui-divider { align-self: center; }
.ui-snd-row { display: flex; align-items: center; gap: calc(var(--px) * 3); min-height: 44px; }
.ui-snd-label { flex: none; width: calc(var(--px) * 34); font-size: calc(var(--px) * 6); font-weight: 600; color: var(--c-hi); text-shadow: var(--t-outline); }
.ui-snd-val { flex: none; width: calc(var(--px) * 14); text-align: right; font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); }
/* the track is the 44 px tall touch target; the trough (art bar) and the knob are centred in it */
.ui-snd-track {
  position: relative; flex: 1; min-width: 0; height: 44px;
  cursor: var(--cursor-point, pointer); touch-action: none; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ui-snd-trough { position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--px) * 8); transform: translateY(-50%); }
.ui-snd-fill { height: 100%; width: calc(var(--v, 1) * 100%); }
.ui-snd-knob {
  position: absolute; top: 50%; width: calc(var(--px) * 5); height: calc(var(--px) * 12);
  left: calc(var(--px) * 1.5 + var(--v, 1) * (100% - var(--px) * 8));
  transform: translateY(-50%);
  background: var(--c-gold3);
  box-shadow: inset var(--px) var(--px) 0 var(--c-core), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--c-gold1),
    0 0 0 var(--px) var(--c-void);
  pointer-events: none;
}
.ui-snd-track:hover .ui-snd-knob, .ui-snd-track:focus-visible .ui-snd-knob { background: var(--c-core); }
.ui-snd-menu .ui-snd-row { transition: opacity 0.15s; }
#ui-root.snd-muted .ui-snd-row { opacity: 0.55; }
.ui-snd-mute { align-self: stretch; margin-top: var(--px); gap: calc(var(--px) * 3); justify-content: flex-start; padding: 0 calc(var(--px) * 3); color: var(--c-hi); }
.ui-snd-mute .ui-snd-ico { zoom: 1; }
.ui-snd-mute-state { margin-left: auto; font-size: calc(var(--px) * 5.5); letter-spacing: var(--px); color: var(--c-stone8); }
#ui-root.snd-muted .ui-snd-mute-state { color: var(--c-fire2); }
#ui-root .ui-snd-bat.on .ui-snd-mute-state, #ui-root .ui-snd-sharp.on .ui-snd-mute-state, #ui-root .ui-snd-fs.on .ui-snd-mute-state, #ui-root .ui-snd-lang .ui-snd-mute-state { color: var(--c-gold3); }
/* pause: button left of the speaker (night / finale), card over a dim backdrop */
.ui-pause-btn {
  position: absolute; z-index: 5;
  top: max(calc(var(--px) * 2), env(safe-area-inset-top));
  right: calc(max(calc(var(--px) * 2), env(safe-area-inset-right)) + max(44px, calc(var(--px) * 15)) + calc(var(--px) * 2));
  display: none; align-items: center; justify-content: center;
  width: max(44px, calc(var(--px) * 15)); height: max(44px, calc(var(--px) * 15));
  min-height: 0; padding: 0;
}
#ui-root[data-phase='night'] .ui-pause-btn, #ui-root[data-phase='finale'] .ui-pause-btn { display: flex; }
#ui-root.paused .ui-pause-btn { display: none; }
.ui-pause-btn:hover { filter: brightness(1.25); }
.ui-pause-btn:active { transform: translateY(var(--px)); }
.ui-pause {
  position: absolute; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10, 6, 18, 0.62); pointer-events: auto;
}
.ui-pause.open { display: flex; animation: ui-snd-in 0.18s steps(4) both; }
.ui-pause-box { max-width: min(calc(var(--px) * 110), calc(100vw - 32px)); align-items: center; }
.ui-pause-hint { margin: 0; font-size: calc(var(--px) * 6); color: var(--c-stone9); text-shadow: var(--t-outline); }
/* credits card (opened from the settings menu) */
.ui-credits {
  position: absolute; inset: 0; z-index: 45;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10, 6, 18, 0.62); pointer-events: auto;
}
.ui-snd-menu.credits-on .ui-snd-box { visibility: hidden; }
.ui-credits.open { display: flex; animation: ui-snd-in 0.18s steps(4) both; }
.ui-credits-box { max-width: min(calc(var(--px) * 130), calc(100vw - 32px)); max-height: 100%; overflow: hidden; align-items: stretch; }
.ui-credits-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(var(--px) * 1.5); padding-right: calc(var(--px) * 2); text-align: center; }
.ui-credits-scroll:focus-visible { outline: var(--px) solid var(--c-core); outline-offset: var(--px); }
.ui-credits-game { margin: 0; font-size: calc(var(--px) * 9); font-weight: 700; color: var(--c-gold3); letter-spacing: var(--px); text-shadow: var(--t-outline); }
.ui-credits-head { margin: calc(var(--px) * 2) 0 0; font-size: calc(var(--px) * 7); font-weight: 700; color: var(--c-gold3); text-shadow: var(--t-outline); }
.ui-credits-line { margin: 0; font-size: calc(var(--px) * 5.5); color: var(--c-hi); text-shadow: var(--t-outline); overflow-wrap: anywhere; }
.ui-snd-close { align-self: center; margin-top: calc(var(--px) * 2); min-width: calc(var(--px) * 60); }
@media (max-width: 480px) {
  .ui-snd-box { padding: calc(var(--px) * 3) calc(var(--px) * 3) calc(var(--px) * 4); }
  .ui-snd-row { gap: calc(var(--px) * 2); }
  .ui-snd-label { width: calc(var(--px) * 28); font-size: calc(var(--px) * 5.5); }
  .ui-snd-val { width: calc(var(--px) * 12); }
}
/* the speaker button leaves room at the top-right of the HUD strip */
/* narrow: .ui-top spans the width, row A is the one that stays clear of the buttons (ui.js fitHud measures it) */
.ui-snd-btn { z-index: 25; } /* above the dawn screen (z 20), below the menu (z 30) */
@media (min-width: 641px) { .ui-dawn-head { padding-right: 56px; } } /* keep the light panel clear of the speaker */
@media (max-width: 640px) { .ui-dawn-titles { padding-right: 52px; } }

/* ======================= Constellation (meta progression) ======================= */
/* title button: name + kor chip; a gold dot when a star can be bought */
.ui-meta-btn { position: relative; color: var(--c-hi); min-height: max(44px, calc(var(--px) * 15)); padding: 0 calc(var(--px) * 5); }
.ui-meta-btn.can { color: var(--c-gold3); }
.ui-meta-btn .ui-btn-label { gap: calc(var(--px) * 4); }
.ui-meta-chip { display: inline-flex; align-items: center; gap: var(--px); }
.ui-meta-chip-ico { filter: drop-shadow(0 0 var(--px) rgba(255, 138, 58, 0.7)); }
.ui-meta-chip-n { color: var(--c-fire2); font-size: calc(var(--px) * 6.5); }
.ui-meta-dot {
  position: absolute; right: calc(var(--px) * -2); top: calc(var(--px) * -2);
  width: calc(var(--px) * 4); height: calc(var(--px) * 4); background: var(--c-gold3);
  box-shadow: 0 0 0 var(--px) var(--c-void), 0 0 calc(var(--px) * 3) rgba(245, 200, 90, 0.9);
  animation: ui-blink 0.9s steps(2) infinite;
}
.ui-kor-fb { filter: hue-rotate(-28deg) saturate(1.8); }
.ui-kor-fb.big { zoom: 2; }

/* end screen: kor award */
.ui-end-kor {
  width: 100%; max-width: calc(var(--px) * 170);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: calc(var(--px) * 2) calc(var(--px) * 5); padding: calc(var(--px) * 1) calc(var(--px) * 3);
}
.ui-end-kor-main { display: flex; align-items: center; gap: calc(var(--px) * 2); }
.ui-end-kor-ico { filter: drop-shadow(0 0 calc(var(--px) * 3) rgba(255, 138, 58, 0.85)); animation: mt-ember 1.8s steps(4) infinite; }
.ui-end-kor-col { display: flex; flex-direction: column; align-items: flex-start; }
.ui-end-kor-val {
  font-size: calc(var(--px) * 12); line-height: 1; color: var(--c-fire2); font-variant-numeric: tabular-nums;
  text-shadow: var(--t-outline), 0 0 calc(var(--px) * 5) rgba(224, 80, 42, 0.7);
}
.ui-end-kor-label { font-size: calc(var(--px) * 4.5); }
.ui-end-kor.zero .ui-end-kor-val { color: var(--c-stone8); text-shadow: var(--t-outline); }
.ui-end-kor-parts {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0;
  padding-left: calc(var(--px) * 4); border-left: var(--px) solid var(--c-night3);
}
.ui-end-kor.zero .ui-end-kor-parts { display: none; }
.ui-end-kor-part {
  display: flex; line-height: 1.25; justify-content: space-between; gap: calc(var(--px) * 2); white-space: nowrap;
  font-size: calc(var(--px) * 5); text-shadow: var(--t-outline);
  animation: ui-kor-part 0.35s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes ui-kor-part { from { opacity: 0; transform: translateX(calc(var(--px) * -6)); } to { opacity: 1; transform: none; } }
.ui-end-kor-part-l { color: var(--c-stone9); overflow: hidden; text-overflow: ellipsis; }
.ui-end-kor-part-v { color: var(--c-fire2); }
.ui-end-kor-none { grid-column: 1 / -1; font-size: calc(var(--px) * 5); color: var(--c-stone8); text-shadow: var(--t-outline); }
.ui-end-kor-btn { color: var(--c-gold3); font-size: calc(var(--px) * 6); min-height: calc(var(--px) * 18); padding: 0 calc(var(--px) * 5); }
.ui-end-kor-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--px) * 5); }
.ui-end-kor-btn .ui-btn-label { gap: calc(var(--px) * 3); }
@media (max-width: 640px) {
  .ui-end-kor { grid-template-columns: minmax(0, 1fr); }
  .ui-end-kor-parts { padding: calc(var(--px) * 2) 0 0; border-left: 0; border-top: var(--px) solid var(--c-night3); }
  .ui-end-kor-val { font-size: calc(var(--px) * 10); }
}

/* level-up: four cards + "Reroll" */
.ui-lu-cards.four { gap: calc(var(--px) * 4); }
.ui-lu-cards.four .ui-card { width: calc(var(--px) * 68); }
@media (max-width: 1000px) and (min-width: 641px) { .ui-lu-cards.four .ui-card { width: calc(var(--px) * 60); } }
.ui-lu-actions { display: flex; justify-content: center; }
.ui-lu-reroll { color: var(--c-cyan3); min-height: max(44px, calc(var(--px) * 15)); padding: 0 calc(var(--px) * 6); animation: ui-reroll-in 0.3s 0.3s ease-out both; }
.ui-lu-reroll .ui-btn-label { gap: calc(var(--px) * 3); }
@keyframes ui-reroll-in { from { opacity: 0; transform: translateY(calc(var(--px) * 6)); } to { opacity: 1; transform: none; } }
.ui-lu-key {
  font-size: calc(var(--px) * 5); line-height: 1; padding: var(--px) calc(var(--px) * 1.5); color: var(--c-void); text-shadow: none;
  background: var(--c-cyan3); box-shadow: 0 var(--px) 0 #2e6a8a;
}
.ui-card-tag[data-cat='kor'] { color: var(--c-fire2); }
@media (max-width: 640px) {
  .ui-lu-cards.four { gap: calc(var(--px) * 2); }
  .ui-lu-cards.four .ui-card { width: 100%; padding: var(--px) calc(var(--px) * 2); }
  .ui-lu-cards.four .ui-card-icon { width: calc(var(--px) * 24); height: calc(var(--px) * 24); }
  .ui-lu-cards.four .ui-card-desc { font-size: calc(var(--px) * 4.5); }
}

/* night toast (Second Wind) */
.ui-toast {
  position: absolute; left: 50%; top: 22%; z-index: 21; display: none;
  align-items: center; gap: calc(var(--px) * 3); padding: var(--px) calc(var(--px) * 4) var(--px) calc(var(--px) * 2);
  transform: translateX(-50%); pointer-events: none; max-width: calc(100vw - 24px);
}
.ui-toast.on { display: flex; animation: ui-toast 3.2s ease-out both; }
#ui-root:not([data-phase='night']) .ui-toast { display: none; }
@keyframes ui-toast {
  0% { opacity: 0; transform: translateX(-50%) scale(1.4); filter: brightness(2.5); }
  8% { opacity: 1; transform: translateX(-50%) scale(1); filter: brightness(1.6); }
  20%, 82% { opacity: 1; filter: brightness(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(calc(var(--px) * -6)); }
}
.ui-toast-ico { display: inline-flex; filter: drop-shadow(0 0 calc(var(--px) * 3) rgba(255, 240, 176, 0.9)); }
.ui-toast-text { display: flex; flex-direction: column; }
.ui-toast-title { font-size: calc(var(--px) * 9); line-height: 1.05; color: var(--c-core); text-shadow: var(--t-outline), 0 0 calc(var(--px) * 6) rgba(245, 200, 90, 0.9); }
.ui-toast-sub { font-size: calc(var(--px) * 5.5); color: var(--c-gold3); text-shadow: var(--t-outline); white-space: nowrap; }

/* tutorial bubbles stay behind the level-up choice */
#ui-root.choosing .hn-layer { opacity: 0.18; transition: opacity 0.2s; }
@media (max-width: 640px) { .ui-end-kor-parts { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 641px) { .ui-end-kor-part { font-size: calc(var(--px) * 4.5); } .ui-end-kor-parts { column-gap: calc(var(--px) * 4); } }