@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Jua&display=swap');

:root {
  --ink: #472d38;
  --muted: #754957;
  --cream: #fff9fb;
  --rose: #edb3c2;
  --rose-deep: #9d6475;
  --blush: #fce8ee;
  --baby-pink: #fde8ee;
  --rose-pink: #f8c4d0;
  --line: #edb8c7;
  font-family: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #fff7fa; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; }
button { font: inherit; }
button:focus-visible { outline: 3px solid #a56d7d; outline-offset: 4px; }
::selection { background: var(--rose); color: #fff; }

.app-shell {
  isolation: isolate;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 25px 20px 24px;
  background:
    radial-gradient(circle at 0% 22%, rgba(250, 202, 225, .58) 0 2px, transparent 3px),
    radial-gradient(circle at 100% 63%, rgba(250, 207, 222, .45) 0 3px, transparent 4px),
    linear-gradient(140deg, #fffafd, #fff1f6 72%, #ffe8f0);
}

.background-hearts span { position: absolute; z-index: -1; color: #eb9bb1; opacity: .52; }
.background-hearts span:nth-child(1) { top: 84px; left: 9%; font-size: 17px; transform: rotate(-17deg); }
.background-hearts span:nth-child(2) { top: 181px; right: 11%; font-size: 15px; color: #dc84a1; }
.background-hearts span:nth-child(3) { top: 530px; left: 5%; font-size: 13px; }
.background-hearts span:nth-child(4) { top: 463px; right: 7%; font-size: 13px; color: #dc84a1; }

.intro { text-align: center; }
.fairness-note {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  margin: 0 0 10px;
  padding: 4px 12px 3px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--rose-deep);
  background: rgba(255, 255, 255, .72);
  font-size: 11px;
  letter-spacing: .02em;
}
h1 {
  margin: 0;
  font-family: 'Jua', 'Apple SD Gothic Neo', sans-serif;
  color: #3d2831;
  font-size: clamp(31px, 9vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.intro > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.game { width: min(100%, 400px); margin: 16px auto 0; text-align: center; }
.name-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 7px; width: min(100%, 340px); margin: 0 auto 10px; padding: 10px 12px; border: 1px solid rgba(229, 166, 187, .78); border-radius: 17px; background: rgba(255, 255, 255, .72); box-shadow: 0 7px 18px rgba(180, 87, 119, .08); }
.name-form label { display: grid; gap: 4px; text-align: left; }
.name-form label > span { color: #a95773; font-size: 10px; font-weight: 700; }
.name-form input { width: 100%; min-width: 0; padding: 5px 1px 4px; border: 0; border-bottom: 1px solid #dd9ab1; border-radius: 0; outline: 0; color: #3e2a37; background: transparent; font-family: 'Jua', sans-serif; font-size: 20px; font-weight: 400; }
.name-form input:focus { border-bottom-color: var(--rose-deep); box-shadow: 0 2px 0 -1px var(--rose-deep); }
.name-form input:disabled { color: #6e5962; opacity: 1; }
.name-divider { padding-bottom: 5px; color: #ad6a9d; font-family: 'Jua', sans-serif; font-size: 15px; font-style: italic; }

.wheel-stage { position: relative; width: min(80vw, 310px); margin: 0 auto; padding-top: 17px; }
.wheel-frame { position: relative; padding: 10px; border: 3px solid #fff; border-radius: 50%; background: #ffe1eb; box-shadow: 0 14px 30px rgba(198, 81, 113, .2), 0 3px 6px rgba(100, 37, 53, .08); }
.wheel {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid #5d3645;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--baby-pink) 0deg 180deg, var(--rose-pink) 180deg 360deg);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .44);
  transform: rotate(0deg);
  will-change: transform;
}
.wheel::before { content: ''; position: absolute; z-index: 1; inset: 12px; border: 2px dashed rgba(255, 255, 255, .72); border-radius: 50%; pointer-events: none; }
.wheel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,.21), transparent 36%); pointer-events: none; }
.wheel-label { position: absolute; z-index: 1; display: grid; width: 54%; color: #38273d; text-align: center; line-height: 1.05; text-shadow: 0 1px 0 rgba(255, 255, 255, .28); }
.wheel-label b { font-family: 'Jua', sans-serif; font-size: clamp(24px, 7vw, 31px); font-weight: 400; letter-spacing: -.02em; }
.wheel-label small { width: fit-content; margin: 5px auto 0; padding: 3px 7px 2px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; background: rgba(255, 255, 255, .25); font-size: clamp(10px, 3vw, 12px); font-weight: 700; }
.label-youngsoo { top: 28%; left: 50%; transform: translate(-50%, -50%); }
.label-jia { top: 72%; left: 50%; transform: translate(-50%, -50%); }
.wheel-hub { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; width: 58px; height: 58px; place-items: center; border: 3px solid #dba0b2; border-radius: 50%; color: var(--rose-deep); background: #fffafd; font-size: 24px; transform: translate(-50%, -50%); box-shadow: 0 3px 0 rgba(166, 56, 87, .12), inset 0 0 0 4px #ffe9ef; }
.bunny-pointer { position: absolute; top: 165px; left: -72px; z-index: 6; width: 136px; margin: 0; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(129, 65, 91, .16)); }
.bunny-pointer img { display: block; width: 100%; height: auto; mix-blend-mode: screen; }

.status { min-height: 23px; margin: 13px 0 12px; color: var(--muted); font-size: 12px; }
.actions { display: grid; width: min(100%, 340px); gap: 9px; margin: 0 auto; }
.button { position: relative; min-height: 53px; border: 0; border-radius: 16px; cursor: pointer; font-weight: 700; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
.button-primary { overflow: hidden; color: #fff; background: #bd637e; box-shadow: 0 8px 16px rgba(150, 76, 99, .2), inset 0 1px 0 rgba(255,255,255,.32); font-size: 16px; }
.button-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.2), transparent 30%); pointer-events: none; }
.button-spark { margin-right: 5px; color: #ffe9ef; }
.button-secondary { min-height: 45px; border: 1px solid #eab0bd; color: var(--rose-deep); background: rgba(255,255,255,.76); font-size: 14px; }
.button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.03); }
.button:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: none; }
.button:disabled { cursor: wait; opacity: .64; }

.result { width: min(100%, 340px); margin: 16px auto 0; padding: 14px 16px 15px; border: 1px solid #f3bac6; border-radius: 16px; background: rgba(255, 255, 255, .76); box-shadow: 0 8px 16px rgba(158, 74, 97, .08); transform-origin: 50% 100%; }
.result.pop { animation: result-pop 580ms cubic-bezier(.16, .85, .25, 1) both; }
.result-label { margin: 0; color: var(--rose-deep); font-size: 11px; font-weight: 700; }
.result-title { margin: 4px 0 5px; font-family: 'Jua', sans-serif; color: #3b2630; font-size: 27px; line-height: 1.1; font-weight: 400; }
.result-message { margin: 0; color: #77525e; font-size: 12px; line-height: 1.5; }

footer { width: min(100%, 370px); margin: 19px auto 0; color: #754957; font-size: 10px; line-height: 1.6; text-align: center; }
footer p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes result-pop { from { opacity: 0; transform: translateY(12px) scale(.91); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (min-width: 620px) {
  .app-shell { padding-top: 35px; }
  .game { margin-top: 15px; }
  .wheel-stage { width: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}