/* Bug-Bug's Dashboard Drop — DataCruise Arcade #5.
   Bright orange + black arcade palette, matching Pie Spinner / Block City / Mountain Climb. */

* { box-sizing: border-box; }

:root {
  --bg-top: #FFE9A8;
  --bg-bot: #FFB347;
  --ink: #1A1A1A;
  --paper: #FFF7E2;
  --orange: #FF6A1A;
  --orange-deep: #D44A00;
  --gold: #FFC500;
  --green: #2BB673;
  --sky: #5DC1E8;
  --sky-deep: #2E9DC9;
  --pink: #E84A8B;
  --shadow: 0 6px 0 0 #1A1A1A;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Fredoka", "Quicksand", "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
  padding: 12px 22px;
  font-size: 18px;
  box-shadow: 0 4px 0 0 var(--ink);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--ink); }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--ink); }
button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 0 var(--ink); }
button.ghost { background: var(--paper); color: var(--ink); }
button.gold { background: var(--gold); }
button.green { background: var(--green); color: var(--paper); }
button.sky { background: var(--sky); }

/* ============== TITLE / END SCREENS ============== */

.screen { display: grid; place-items: center; min-height: 80vh; }

.card {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 32px 38px;
  max-width: 700px;
  text-align: center;
}
.card h1 { font-size: 38px; margin: 12px 0 6px; letter-spacing: 1px; line-height: 1.05; }
.card .subtitle { margin: 0 0 22px; font-weight: 600; color: #5C2A0F; font-size: 15px; }
.card .big-bug { width: 130px; height: 110px; display: block; margin: 0 auto 4px; }

.howto {
  text-align: left;
  background: #FFF;
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 14px 18px;
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
}
.howto p { margin: 0 0 6px; }
.howto p:last-child { margin-bottom: 0; }
.howto strong { color: var(--orange-deep); }
.howto .ok  { color: var(--green); font-weight: 800; letter-spacing: 0.5px; }
.howto .bad { color: var(--pink);  font-weight: 800; letter-spacing: 0.5px; }
.howto em { font-style: normal; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 2px; }

.diff-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.diff-row button { padding: 12px 18px; font-size: 16px; }

.prompt { font-weight: 800; letter-spacing: 1.5px; font-size: 13px; color: var(--orange-deep); margin: 14px 0 6px; }

.stars { font-size: 46px; letter-spacing: 6px; margin: 12px 0 8px; }
.stars .dim { opacity: 0.25; }

.end-charts {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}
.end-chart-box {
  background: #FFF;
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 3px 0 0 var(--ink);
}
.end-charts svg {
  display: block;
  background: #FFF;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 0 var(--ink);
}
.end-chart-label {
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 12px;
  color: var(--orange-deep);
  margin-top: 6px;
  text-align: center;
}

.chart-trophy {
  margin: 6px 0;
  color: var(--orange-deep);
  font-weight: 900;
  letter-spacing: 1.5px;
  font-size: 15px;
}

.new-best {
  margin: 0 0 12px;
  color: var(--orange-deep);
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 16px;
  animation: bounce-best 0.6s ease;
}
@keyframes bounce-best {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.stats { font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.stats b { color: var(--orange-deep); }

.end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.flavour-line {
  margin: 4px 0 12px;
  font-style: italic;
  color: #5C2A0F;
  font-size: 14px;
}

/* ============== GAME SCREEN ============== */

.game { display: grid; grid-template-columns: 1fr; gap: 14px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 800;
  flex-wrap: wrap;
}
.topbar .title { font-size: 16px; letter-spacing: 1px; }

.sound-toggle {
  font-size: 20px;
  line-height: 1;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2A2A2A;
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.sound-toggle:hover { background: #3A3A3A; }
.sound-toggle:active { transform: scale(0.94); }

.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #2A2A2A;
  border: 2px solid var(--paper);
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 13px;
  letter-spacing: 1px;
  transition: background 160ms ease, transform 120ms ease;
}
.hud-label { opacity: 0.85; font-weight: 800; }
.hud-num { font-variant-numeric: tabular-nums; font-size: 16px; min-width: 50px; text-align: center; }

#diff-pill { background: linear-gradient(180deg, #4A2C00 0%, #2A1900 100%); border-color: var(--gold); }
#diff-pill .hud-label { color: var(--gold); letter-spacing: 1.5px; }

.hud-pill.warn { background: linear-gradient(180deg, #7A4A00 0%, #4A2A00 100%); }
.hud-pill.danger {
  background: linear-gradient(180deg, #B33000 0%, #7E1F00 100%);
  animation: pulse-pill 0.7s ease-in-out infinite;
}
@keyframes pulse-pill {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.stage {
  background: #FFFFFF;
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.stage svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 110px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ============== DASHBOARD SLOTS ============== */

.slot .slot-frame {
  fill: #FFF;
  stroke: #C7B98E;
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

/* Empty slots show their chart preview in greyscale so the player can see
   what's still missing. When the slot fills, the ghost fades and the real
   colour version pops in (via .just-filled animation). */
.slot .slot-ghost { opacity: 0.78; transition: opacity 260ms ease; }
.slot .slot-real  { opacity: 0;    transition: opacity 240ms ease; }
.slot .slot-silly .silly-art { opacity: 0; transform-box: fill-box; transform-origin: center; }

.slot.filled-real .slot-frame {
  fill: #FFF7E2;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: none;
  animation: none;
}
.slot.filled-real .slot-real { opacity: 1; }
.slot.filled-real .slot-ghost { opacity: 0; }

.slot.filled-silly .slot-frame {
  fill: #FFE1EC;
  stroke: var(--pink);
  stroke-width: 3;
  stroke-dasharray: none;
  animation: none;
}
.slot.filled-silly .slot-ghost { opacity: 0; }

/* Reveal the silly-art whose data-silly attribute matches the slot's data-silly. */
.slot.filled-silly[data-silly="watermelon"] .silly-art[data-silly="watermelon"],
.slot.filled-silly[data-silly="cat"]        .silly-art[data-silly="cat"],
.slot.filled-silly[data-silly="mop"]        .silly-art[data-silly="mop"],
.slot.filled-silly[data-silly="duck"]       .silly-art[data-silly="duck"],
.slot.filled-silly[data-silly="pizza"]      .silly-art[data-silly="pizza"],
.slot.filled-silly[data-silly="fish"]       .silly-art[data-silly="fish"],
.slot.filled-silly[data-silly="donut"]      .silly-art[data-silly="donut"] {
  opacity: 1;
}

.slot.just-filled .slot-real,
.slot.just-filled .silly-art {
  animation: silly-pop 700ms ease;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes silly-pop {
  0%   { transform: scale(0.2) rotate(-15deg); }
  55%  { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ============== DEPLOY BAR ============== */

#deploy-btn {
  cursor: pointer;
  pointer-events: bounding-box;
}
#deploy-btn > * { pointer-events: none; }
#deploy-btn .deploy-bg { fill: var(--orange); stroke: var(--ink); stroke-width: 4; }
#deploy-btn:hover .deploy-bg { fill: #FF8035; }
#deploy-btn.armed .deploy-bg { fill: var(--gold); }
#deploy-btn:active .deploy-bg { fill: #D44A00; }

/* ============== FALLING CHART ============== */

/* Outer .falling-chart receives the live JS-driven translate.
   Inner .falling-chart-inner runs the visual effect so animations don't
   clobber the position. The outer also gets a one-shot fade-in on spawn so
   the chart visibly materialises rather than popping in. */
.falling-chart {
  animation: chart-appear 240ms ease-out;
}
@keyframes chart-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.falling-chart-inner {
  transform-box: fill-box;
  transform-origin: center;
}
.falling-chart.junk .falling-chart-inner {
  animation: junk-wobble 1.6s ease-in-out infinite;
}
@keyframes junk-wobble {
  0%,100% { transform: rotate(-2deg); }
  50%     { transform: rotate(2deg); }
}
.falling-chart.snap     .falling-chart-inner { animation: snap-fly-inner 380ms ease forwards; }
.falling-chart.shatter  .falling-chart-inner { animation: shatter-out-inner 500ms ease forwards; }
.falling-chart.dissolve .falling-chart-inner { animation: dissolve-fall-inner 520ms ease-out forwards; }
@keyframes snap-fly-inner {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(0.6); }
}
@keyframes shatter-out-inner {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); }
  50%  { opacity: 0.7; transform: scale(1.18) rotate(-12deg); }
  100% { opacity: 0; transform: scale(0.4) rotate(20deg); }
}
@keyframes dissolve-fall-inner {
  0%   { opacity: 1; transform: scale(1, 1); }
  45%  { opacity: 1; transform: scale(1.08, 0.85) translateY(8px); }
  100% { opacity: 0; transform: scale(0.7, 0.6) translateY(20px); }
}

/* ============== BUG-BUG ============== */

.bug-group { pointer-events: none; }
.bug-body { fill: var(--orange-deep); stroke: var(--ink); stroke-width: 3; }
.bug-spot { fill: var(--ink); }
.bug-head { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
.bug-eye { fill: #FFF; }
.bug-pupil { fill: var(--ink); }

/* Bug-Bug chomps a decoy that lands on the ground. */
.bug-inner { transform-box: fill-box; transform-origin: center; }
.bug-group.chomping .bug-inner {
  animation: bug-chomp 380ms ease-out;
}
@keyframes bug-chomp {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1.18, 0.85); }
  55%  { transform: scale(0.92, 1.12); }
  100% { transform: scale(1, 1); }
}

/* ============== RESULT CHIP ============== */

#result-chip { transition: opacity 220ms ease; }