/* Corporate Mario — global styles */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1d2333;
  --paper: #f4f1e8;
  --accent: #ffb703;
  --accent2: #4cc9f0;
  --danger: #e63946;
  --ok: #52b788;
}

html, body {
  height: 100%;
  background: #14161f;
  font-family: "Courier New", Courier, monospace;
  color: var(--paper);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-wrap {
  position: relative;
  width: 960px;
  max-width: 100vw;
}

canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;        /* keep the pixel-art crisp when scaled */
  border: 4px solid #2b3044;
  border-radius: 6px;
  background: #9bd4e4;
}

/* ---- Overlay screens (menu / pause / game over / victory) ---- */

.overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: rgba(20, 22, 31, 0.88);
  border-radius: 6px;
  padding: 24px;
}

.overlay.visible { display: flex; }

.overlay h1 {
  font-size: 52px;
  letter-spacing: 4px;
  color: var(--accent);
  text-shadow: 4px 4px 0 #7f5539, 8px 8px 0 rgba(0,0,0,.4);
}

.overlay h2 {
  font-size: 36px;
  letter-spacing: 3px;
  color: var(--accent2);
  text-shadow: 3px 3px 0 rgba(0,0,0,.5);
}

.tagline { color: #aeb4c8; font-size: 15px; }

.overlay button {
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 26px;
  color: var(--ink);
  background: var(--accent);
  border: 3px solid #7f5539;
  border-radius: 4px;
  box-shadow: 0 4px 0 #7f5539;
  cursor: pointer;
}

.overlay button.big { font-size: 22px; padding: 14px 40px; }

.overlay button:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 #7f5539; }
.overlay button:active { transform: translateY(2px);  box-shadow: 0 2px 0 #7f5539; }

.help { margin-top: 18px; font-size: 12px; color: #8089a0; line-height: 1.8; }

/* ---- Victory summary ---- */

#perf-summary {
  font-size: 15px;
  line-height: 2;
  text-align: left;
  background: rgba(255,255,255,.06);
  border: 2px solid #2b3044;
  border-radius: 6px;
  padding: 12px 28px;
}

.rank {
  font-size: 24px;
  color: var(--ok);
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

/* ---- Toast messages ---- */

#toasts {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 5;
}

.toast {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 14px;
  animation: toast-in .25s ease-out, toast-out .4s ease-in forwards;
  animation-delay: 0s, var(--life, 2.6s);
  white-space: nowrap;
}

.toast.duck { border-color: var(--accent2); }

@keyframes toast-in  { from { opacity: 0; transform: translateY(-12px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(-12px); } }