/* ============================================================
   style.css  —  "Malle-Rubbellos"
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; color: #fff; text-align: center; padding: 24px 18px 40px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; align-items: center; user-select: none;
  background: linear-gradient(160deg, #00b4d8, #0077b6);
}
body.theme-neon   { background: linear-gradient(160deg, #f706cf, #7b2ff7, #00f5d4); }
body.theme-sunset { background: linear-gradient(160deg, #ff8c42, #ff5d8f, #6a0572); }
body.theme-ocean  { background: linear-gradient(160deg, #00b4d8, #0077b6, #023e8a); }
body.theme-party  { background: linear-gradient(160deg, #f9d423, #ff4e50, #6a0572); }

h1 { margin: 0 0 4px; font-size: 1.6rem; text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.subtitle { margin: 0 0 20px; opacity: 0.95; font-size: 0.9rem; line-height: 1.4; max-width: 340px; }

.los { position: relative; width: 300px; height: 180px; margin: 0 auto 8px;
  border-radius: 18px; box-shadow: 0 14px 36px rgba(0,0,0,0.4); }
.prize {
  position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(160deg, #fff, #ffe9a8);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #2a0845; font-weight: 900; font-size: 1.4rem; line-height: 1.3; padding: 16px;
}
.scratch { position: absolute; inset: 0; border-radius: 18px; touch-action: none; cursor: grab; }
.scratch:active { cursor: grabbing; }

.msg { margin-top: 16px; min-height: 1.5em; font-size: 1.15rem; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.new-btn {
  margin-top: 8px; border: none; border-radius: 999px; padding: 15px 32px; font-size: 1.1rem; font-weight: 900;
  cursor: pointer; color: #6a0572; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.new-btn:active { transform: scale(0.96); }