:root {
  --bg: #0d0717;
  --bg2: #1d0d33;
  --panel: rgba(18, 9, 34, 0.9);
  --panel-edge: #3a1f63;
  --text: #f1e8ff;
  --muted: #a993c9;
  --pink: #ff3d8b;
  --pink-dim: #9e1f55;
  --cyan: #29e7f2;
  --cyan-dim: #13777d;
  --yellow: #ffd23f;
  --red: #ff4d4d;
  --green: #5dff8f;
  --px: 4px;
  --font-body: 'VT323', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-head: 'Silkscreen', 'VT323', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0 auto;
  max-width: 980px;
  padding: 32px 20px 160px;
  color: var(--text);
  font: 22px/1.25 var(--font-body);
  background: transparent;
  min-height: 100vh;
}

/* night sky + CRT */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 61, 139, 0.28), transparent 60%),
    radial-gradient(ellipse at 15% -10%, rgba(41, 231, 242, 0.12), transparent 55%),
    linear-gradient(var(--bg2), var(--bg) 70%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45));
  mix-blend-mode: multiply;
}

.city {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: -2;
  pointer-events: none;
  opacity: 0.85;
}
.city svg { width: 100%; height: 100%; display: block; }

/* rain: two parallax layers of streak tiles drawn by app.js (drawRain) */
.rain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.rain::before,
.rain::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: repeat;
  will-change: transform;
}
.rain::before {
  top: -380px;
  background-image: var(--rain-far);
  background-size: 250px 380px;
  opacity: 0.45;
  animation: rain-far 1.7s linear infinite;
}
.rain::after {
  top: -520px;
  background-image: var(--rain-near);
  background-size: 330px 520px;
  opacity: 0.6;
  animation: rain-near 1s linear infinite;
}
@keyframes rain-far { to { transform: translateY(380px); } }
@keyframes rain-near { to { transform: translateY(520px); } }

/* header sign */
.sign {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.glass {
  width: 88px;
  height: 99px;
  flex: none;
  filter: drop-shadow(0 0 8px rgba(255, 61, 139, 0.6));
}
.glass-rim { fill: var(--cyan); }
.glass-drink { fill: var(--pink); }
.glass-shine { fill: #ffd0e4; }
.glass-stem { fill: var(--cyan); }
.glass-cherry { fill: var(--red); }
.glass.shake { animation: shake 0.5s steps(4) 1; }
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) translateY(-6px); }
  75% { transform: rotate(12deg) translateY(-6px); }
}

h1 { margin: 0; line-height: 1; }

.neon {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 2px;
}
.neon-pink {
  font-size: clamp(34px, 7vw, 64px);
  color: #ffe3ef;
  text-shadow: 0 0 2px #fff, 0 0 8px var(--pink), 0 0 18px var(--pink), 0 0 36px var(--pink-dim);
  animation: flicker 6s infinite;
}
.neon-cyan {
  font-size: clamp(18px, 3.4vw, 30px);
  color: #dffcff;
  text-shadow: 0 0 2px #fff, 0 0 8px var(--cyan), 0 0 18px var(--cyan-dim);
  margin-top: 6px;
}
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.55; }
}

.tagline {
  margin: 8px 0 0;
  color: var(--yellow);
  font-size: 24px;
  letter-spacing: 1px;
}
.tagline::before { content: '» '; color: var(--pink); }

.intro {
  text-align: center;
  color: var(--muted);
  margin: 16px auto 28px;
  max-width: 720px;
}
.intro strong { color: var(--text); }

code {
  font-family: var(--font-body);
  color: var(--cyan);
  background: rgba(41, 231, 242, 0.08);
  padding: 0 4px;
  overflow-wrap: anywhere;
}

/* tabs */
.tabs { display: flex; gap: 8px; }
.tabs button {
  font: 700 16px var(--font-head);
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--panel);
  border: var(--px) solid var(--panel-edge);
  border-bottom: none;
  padding: 10px 18px 8px;
  cursor: pointer;
}
.tabs button[aria-selected='true'] {
  color: var(--bg);
  background: var(--pink);
  border-color: var(--pink);
}
.tabs button:focus-visible { outline: 2px dashed var(--yellow); outline-offset: 2px; }

/* panel */
.panel {
  background: var(--panel);
  border: var(--px) solid var(--pink);
  box-shadow: 0 0 0 var(--px) var(--bg), 0 0 24px rgba(255, 61, 139, 0.35), inset 0 0 40px rgba(122, 60, 255, 0.12);
  padding: 0 24px 24px;
}

.panel-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -24px 16px;
  padding: 6px 24px;
  background: var(--pink);
  color: var(--bg);
  font: 700 14px var(--font-head);
  letter-spacing: 1px;
}

.recipe-desc { margin: 0 0 18px; }

.ingredients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ingredients.single { grid-template-columns: 1fr; }

.ingredient {
  position: relative;
  padding: 16px 16px 12px 64px;
  border: 3px dashed var(--cyan-dim);
  background: rgba(41, 231, 242, 0.04);
  transition: border-color 0.1s, background 0.1s;
}
.ingredient.dragover {
  border-color: var(--cyan);
  background: rgba(41, 231, 242, 0.14);
}
.ingredient.filled { border-style: solid; border-color: var(--cyan); }
.ingredient h3 {
  margin: 0 0 4px;
  font: 700 16px var(--font-head);
  color: var(--cyan);
}
.hint { margin: 0 0 10px; color: var(--muted); font-size: 20px; }

.dose {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font: 700 18px var(--font-head);
  color: var(--bg);
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.3), inset 4px 4px 0 rgba(255, 255, 255, 0.35);
}
.dose-red { background: var(--pink); }
.dose-blue { background: var(--cyan); }

.pick { display: flex; gap: 8px; flex-wrap: wrap; }

.chosen {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 19px;
  max-height: 168px;
  overflow: auto;
}
.chosen li::before { content: '+ '; color: var(--green); }
.chosen li.skip { color: var(--muted); }
.chosen li.skip::before { content: '- '; color: var(--muted); }

/* buttons */
.btn {
  display: inline-block;
  position: relative;
  font: 700 16px var(--font-head);
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--bg);
  background: var(--cyan);
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.3), 4px 4px 0 var(--bg);
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translate(2px, 2px); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.3), 2px 2px 0 var(--bg); }
.btn:focus-visible, .btn:focus-within { outline: 2px dashed var(--yellow); outline-offset: 3px; }
.btn-small { font-size: 12px; padding: 7px 12px; }
.btn input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.btn-mix {
  background: var(--pink);
  font-size: 26px;
  padding: 14px 44px;
}
.btn-serve { background: var(--yellow); font-size: 18px; margin-top: 14px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.options {
  margin: 18px 0 0;
  border: 2px solid var(--panel-edge);
  padding: 8px 14px 10px;
}
.options legend { color: var(--yellow); padding: 0 6px; }
.options label { display: block; cursor: pointer; }
input[type='radio'], input[type='checkbox'] { accent-color: var(--pink); width: 16px; height: 16px; }

.actions { text-align: center; margin: 22px 0 6px; }

/* result */
.result { margin-top: 18px; }
.terminal {
  margin: 0;
  padding: 12px 14px;
  background: #07040d;
  border: 2px solid var(--cyan-dim);
  color: var(--green);
  font: 20px/1.2 var(--font-body);
  white-space: pre-wrap;
}
.terminal .err { color: var(--red); }
.terminal .warn { color: var(--yellow); }

.table-wrap { overflow-x: auto; margin-top: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 20px; }
th, td { text-align: left; padding: 4px 10px; border-bottom: 1px solid var(--panel-edge); }
thead th {
  font: 700 13px var(--font-head);
  color: var(--cyan);
  border-bottom: 2px solid var(--cyan-dim);
}
tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
td.from-vita { color: var(--yellow); }
td.replaced { color: var(--red); }
td a { color: var(--cyan); }
.tag-warn { color: var(--yellow); font-size: 18px; }

/* instructions */
.howto { margin-top: 56px; }
.howto h2 { text-align: center; margin: 0 0 24px; }

.step { margin-bottom: 20px; }
.step-body {
  background: var(--panel);
  border: var(--px) solid var(--panel-edge);
  border-left-color: var(--cyan);
  padding: 12px 18px;
}
.step:nth-child(even) .step-body { border-left-color: var(--pink); }
.step-body h3 { margin: 0 0 8px; font: 700 16px var(--font-head); color: var(--yellow); }
.step-body ol, .step-body ul { margin: 0; padding-left: 24px; }
.step-body li { margin: 4px 0; }
.step-body li::marker { color: var(--pink); }
.step-body p { margin: 8px 0 0; }
.paths th { color: var(--pink); white-space: nowrap; font: 700 13px var(--font-head); width: 1%; }

footer {
  margin-top: 48px;
  text-align: center;
  color: var(--muted);
  font-size: 18px;
}
.noscript { text-align: center; color: var(--red); }

@media (max-width: 720px) {
  body { font-size: 20px; padding-top: 20px; }
  .ingredients { grid-template-columns: 1fr; }
  .sign { gap: 14px; }
  .glass { width: 56px; height: 63px; }
  .panel { padding: 0 14px 18px; }
  .panel-bar { margin: 0 -14px 14px; padding: 6px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rain::before, .rain::after, .neon-pink, .glass.shake { animation: none; }
}