:root {
  color-scheme: dark;
  --ink: #080b20;
  --paper: #f2f6ff;
  --muted: #9baac7;
  --aqua: #7df9ea;
  --body-font: 'Yu Gothic UI', 'Meiryo', Arial, sans-serif;
  --display-font: 'Bahnschrift', 'Arial Narrow', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--ink); color: var(--paper); font-family: var(--body-font); }
button { font: inherit; }
button, canvas { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
#app { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pinch-zoom; }
#hud {
  position: absolute;
  left: 50%; top: 50%;
  width: 1440px; height: 900px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;
  font-family: var(--body-font);
}

.display-font { font-family: var(--display-font); font-weight: 700; }
.slime-label {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  line-height: 1.16;
  overflow: hidden;
  white-space: pre-wrap;
  pointer-events: none;
}
.slime-label.centered { align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.slime-label.display-font:not(.centered) { line-height: 1; }
.chain-number { overflow: visible; transform-origin: 50% 50%; font-variant-numeric: tabular-nums; }
.recent-pops { white-space: pre; line-height: 1.35; }
.slime-rule, .energy-segment { position: absolute; pointer-events: none; }
.energy-segment { background: #263047; transform-origin: 50% 50%; }

.slime-button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 0;
  border-radius: 11px;
  background: #202c45;
  color: var(--paper);
  box-shadow: 0 4px rgba(0, 0, 5, .65);
  font-family: var(--body-font);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: filter .1s ease;
  transform-origin: 50% 50%;
}
.slime-button:hover:not(:disabled) { filter: brightness(1.12); }
.slime-button:active:not(:disabled) { filter: brightness(.78); }
.slime-button:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; }
.slime-button:disabled { cursor: default; filter: brightness(.4); opacity: .7; }
.button-label { display: block; max-width: 100%; pointer-events: none; }
.play-button { flex-direction: column; gap: 6px; }
.play-shortcut { font-size: 12px; opacity: .7; pointer-events: none; }
.slime-swatch { padding: 0; }
.slime-swatch .button-label { position: absolute; top: 4px; right: 8px; font-size: 11px; }
.slime-swatch:disabled { filter: brightness(.648); opacity: 1; }
.brush-button[aria-pressed="true"] {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ink), 0 0 16px rgba(125,249,234,.5), 0 4px rgba(0,0,5,.65);
  z-index: 2;
}
.brush-button[aria-pressed="true"]::after {
  content: '✓';
  position: absolute;
  top: -10px; left: -8px;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--aqua); color: var(--ink);
  font-size: 15px; font-weight: 900;
  pointer-events: none;
}
.palette-face { position: absolute; display: block; border-radius: 50%; background: var(--ink); pointer-events: none; }
.palette-face.cheek { background: rgba(255, 122, 153, .55); }
.plain-banner { text-shadow: 3px 4px var(--ink); overflow: visible; }

.juice-overlay { position: absolute; inset: 0; width: 1440px; height: 900px; pointer-events: none; overflow: visible; }
.flying-ticket {
  position: absolute;
  width: 310px; height: 102px;
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.effect-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  font-weight: 700;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ticket-stamp {
  left: 50%; top: calc(50% - 18px); width: 380px; height: 94px;
  font-size: 66px;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 6px 0 #ff527c, 7px 10px 0 var(--ink);
}
.ticket-gain {
  left: 50%; top: calc(50% + 26px); width: 280px; height: 40px;
  font-size: 30px;
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 var(--ink);
}
.milestone-cutin {
  position: absolute;
  left: 720px; top: 438px; width: 680px; height: 210px;
  transform-origin: 50% 50%;
  overflow: visible;
  pointer-events: none;
  will-change: transform, opacity;
}
.cutin-burst, .cutin-plate, .cutin-rule {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cutin-plate { background: var(--ink); }
.cutin-ghost, .cutin-headline { -webkit-text-stroke-color: var(--ink); paint-order: stroke fill; }
.cutin-subline { font-family: var(--body-font); font-size: 20px; color: #fff; }
.overdrive-chevron { position: absolute; background: #ff468f; transform: rotate(23deg); transform-origin: center; }

#loading {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  padding: 32px;
  text-align: center;
  font-family: var(--body-font);
  font-size: 18px;
  line-height: 1.7;
  color: var(--aqua);
  background: #080b20;
  transition: opacity .2s ease;
}
#loading:empty { display: none; }
#loading.ready, #loading.hidden { opacity: 0; pointer-events: none; }