/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: #f4f1ea;          /* off-white cream */
   color: #0a0a0a;
   font-family: 'Inter', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
}

button {
   font: inherit;
   color: inherit;
   background: none;
   border: 0;
   cursor: pointer;
}

/* =====================================================
   RESET BUTTON
   ===================================================== */
.reset {
   position: fixed;
   top: 24px;
   right: 24px;
   z-index: 80;
   padding: 12px 22px;
   border: 1.5px solid #0a0a0a;
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 900;
   font-size: 13px;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: #0a0a0a;
   transition: background 0.3s, color 0.3s;
}

.reset:hover {
   background: #0a0a0a;
   color: #f4f1ea;
}

/* =====================================================
   STAGE — Matter.js transforms each .word here
   ===================================================== */
.stage {
   position: fixed;
   inset: 0;
   z-index: 5;
}

/* =====================================================
   WORD — physics body avatar
   ===================================================== */
.word {
   position: absolute;
   top: 0;
   left: 0;
   padding: 14px 32px;
   font-family: 'Inter', sans-serif;
   font-size: clamp(48px, 8vw, 120px);
   font-weight: 900;
   letter-spacing: -0.04em;
   line-height: 1;
   color: #0a0a0a;
   user-select: none;
   white-space: nowrap;
   transform-origin: 50% 50%;
   will-change: transform;
   cursor: grab;
}

.word.is-grabbing { cursor: grabbing; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 760px) {
   .reset { top: 16px; right: 16px; padding: 9px 16px; font-size: 11px; }
   .word { font-size: 44px; padding: 10px 22px; }
}