* { box-sizing: border-box; }
:root { font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; color: #4b505d; background: #fff6eb; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body { margin: 0; height: 100dvh; background: radial-gradient(circle at 12% 0%, #ffedcf, transparent 40%), #fff6eb; }
.shell { display: flex; flex-direction: column; height: 100dvh; max-width: 1040px; margin: auto; padding: 16px clamp(14px, 3vw, 32px); overflow: hidden; }
.back { display: inline-block; margin-bottom: 12px; color: #8c8cba; font-size: 14px; font-weight: 900; text-decoration: none; }
.back:hover { text-decoration: underline; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 5px; color: #ad81a7; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
h1 { margin: 0; color: #d5749c; font-size: clamp(32px, 5vw, 54px); letter-spacing: -.045em; line-height: 1.1; }
h1 span { font-size: .7em; }
.subtitle { margin: 7px 0 0; color: #747b84; font-size: clamp(14px, 2vw, 18px); font-weight: 700; }
.scores { display: flex; gap: 8px; flex: none; }
.kiss-count { display: grid; gap: 2px; min-width: 84px; padding: 9px 14px; border: 3px solid #f1d6dc; border-radius: 20px; background: white; box-shadow: 0 5px 0 #ead4d7; color: #be7897; font-size: 12px; font-weight: 900; white-space: nowrap; text-align: center; }
.kiss-count strong { color: #d5749c; font-size: 21px; }
.scene { flex: 1 1 auto; min-height: 0; overflow: hidden; border: 5px solid white; border-radius: 32px; background: #e5e5fb; box-shadow: 0 8px 0 #ead9ce, 0 16px 30px #866d6026; }
canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; }
.bottom { display: flex; flex: none; align-items: center; justify-content: center; gap: 18px; min-height: 70px; }
.bottom p { margin: 0; color: #887b8d; font-size: clamp(17px, 3vw, 22px); font-weight: 900; text-align: center; }
button { border: 3px solid white; border-radius: 19px; padding: 12px 20px; background: #e789aa; box-shadow: 0 5px 0 #b96888; color: white; font: inherit; font-size: 19px; font-weight: 900; cursor: pointer; }
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #b96888; }
button[hidden] { display: none; }
.hint { flex: none; margin: 0; color: #a59aa5; text-align: center; font-size: 13px; font-weight: 700; }
:focus-visible { outline: 4px solid #f4ae78; outline-offset: 4px; }
@media (max-width: 600px) {
  .shell { padding-top: 16px; }
  header { align-items: flex-start; flex-wrap: wrap; }
  .scores { width: 100%; }
  .kiss-count { flex: 1; padding: 7px 12px; }
  .scene { border-radius: 23px; }
  .bottom { flex-direction: column; gap: 8px; padding: 12px 0; }
}