:root {
  --bg: #ffffff;
  --fg: #111111;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 60px;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 15vh 16px 60px;
}

h1 {
  font-size: clamp(32px, 7vw, 56px);
  line-height: 1.05;
  margin: 0 0 24px;
}

.toc { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; }
.toc a { color: var(--fg); }

.block {
  max-width: 960px;
  margin: 0 auto 80px;
  padding: 0 16px;
}
.block h2 { font-size: clamp(26px, 5vw, 40px); margin: 0 0 4px; }
.hint { margin: 0 0 14px; color: #555; }

canvas { display: block; max-width: 100%; }

/* Miami */
.miami-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid #111;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#miami-canvas { width: 100%; height: auto; cursor: pointer; }

/* Cake */
.cake-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.cake-controls input[type="text"] {
  flex: 1 1 220px; font: inherit; padding: 10px 12px; border: 2px solid #111; border-radius: 10px;
}
.cake-controls button, .file-btn {
  font: inherit; padding: 10px 16px; border: 2px solid #111; border-radius: 10px;
  background: #ffb6c8; cursor: pointer;
}
.file-btn { background: #fff1c9; position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#cake-canvas {
  width: 100%; height: auto; border-radius: 14px; border: 3px solid #111;
  background: #fde8ef;
}

/* Fart room */
.fart-wrap {
  position: relative;
  border: 3px solid #111;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
#fart-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.obj { cursor: pointer; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.obj:hover { filter: brightness(1.08); }
.obj.wobble { animation: wobble .4s; }
@keyframes wobble {
  0%,100% { transform: scale(1); }
  30% { transform: scale(1.08, .92); }
  60% { transform: scale(.95, 1.05); }
}
.smoke-meter {
  position: absolute; top: 10px; left: 10px; width: 120px; height: 10px;
  background: rgba(0,0,0,.25); border-radius: 6px; overflow: hidden; pointer-events: none;
}
#smoke-bar { height: 100%; width: 0; background: #7cbf2a; transition: width .3s; }
.folks {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
}
.folks[hidden] { display: none; }
.folks .rings {
  position: absolute; width: 160%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle, #e8262b 0 6%, #f7a21b 6% 8%, #c0161b 8% 14%, #1a1a1a 14% 15%);
  animation: rings-in 1s ease-out both;
}
.folks p {
  position: relative; margin: 0; padding: 0.4em 0.8em;
  font: italic 700 clamp(28px, 7vw, 64px)/1 "Brush Script MT", "Segoe Script", cursive;
  color: #fff; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000;
  background: radial-gradient(circle, #1a1a1a 60%, transparent 61%);
  border-radius: 50%;
  animation: folks-pop .8s .6s ease-out both;
}
@keyframes rings-in { from { transform: scale(3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes folks-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Bouncing cat */
#bounce-cat {
  position: fixed; left: 0; top: 0; z-index: 1000;
  width: 70px; height: 63px; cursor: pointer;
  will-change: transform;
  filter: drop-shadow(2px 4px 2px rgba(0,0,0,.3));
}
#bounce-cat svg { display: block; }