:root {
  --wheel-opacity: .8;
  --ink: #2b2940;
  --muted: #85829a;
  --paper: #fbfaff;
  --lilac: #9e91ef;
  --violet: #7565d9;
  --line: #ebe8f4;
  --orange: #ffb76d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: #cbd9e8 var(--wallpaper, url('background-v2.webp')) center / cover no-repeat;
  font-family: 'DM Sans', 'Noto Sans SC', sans-serif;
}

.app-shell { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2dvh, 24px); padding: 24px 16px; }
.hero { text-align: center; text-shadow: 0 2px 12px #fff; }
.eyebrow { color: #9487e5; font-size: 11px; font-weight: 700; letter-spacing: .24em; }
.sparkle { margin-right: 7px; font-size: 16px; vertical-align: -1px; }
h1 { margin: 13px 0 7px; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.04em; line-height: 1.1; }
.subtitle { margin: 0; color: var(--muted); font-size: 15px; }
.workspace { width: min(100%, max(220px, calc(100dvh - 300px)), 800px); min-width: 0; margin: 0; }
.wheel-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wheel-wrap { position: relative; display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 18px; border-radius: 50%; box-shadow: 0 25px 55px rgba(102, 91, 157, .14), 0 0 0 1px rgba(145, 130, 214, .1); }
.wheel-wrap::before { content: ''; position: absolute; inset: 0; border: 18px solid #fff; border-radius: 50%; opacity: var(--wheel-opacity, 1); pointer-events: none; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; opacity: var(--wheel-opacity, 1); }
.pointer { position: absolute; z-index: 3; top: -4px; left: 50%; width: 44px; height: 58px; transform: translateX(-50%); filter: drop-shadow(0 6px 4px rgba(84, 68, 140, .2)); }
.pointer::before { content: ''; position: absolute; inset: 0; background: #F3CAD6; clip-path: polygon(50% 100%, 0 0, 100% 0); border-radius: 4px; }
.pointer span { position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: #fff; }
.spin-button { position: absolute; inset: 50% auto auto 50%; width: 116px; height: 116px; transform: translate(-50%, -50%); border: 7px solid #fff; border-radius: 50%; color: #51475F; background: linear-gradient(145deg, #F3CAD6, #D8CEF0); box-shadow: 0 9px 20px rgba(154, 129, 165, .2); cursor: pointer; font: inherit; font-size: 20px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.spin-button:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 12px 26px rgba(154, 129, 165, .28); }
.spin-button:active { transform: translate(-50%, -50%) scale(.98); }
.spin-button:disabled { cursor: wait; opacity: .8; }
.spin-icon { display: block; font-size: 27px; line-height: 25px; }
.spin-button small { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; opacity: .85; }
.result-card { min-width: 210px; margin-top: 24px; padding: 12px 20px 13px; border-radius: 13px; text-align: center; background: rgba(255,255,255,.82); border: 1px solid #e8e3f9; box-shadow: 0 7px 18px rgba(112, 92, 174, .08); }
.result-label { display: block; color: var(--muted); font-size: 11px; letter-spacing: .14em; }
.result-card strong { display: block; margin-top: 4px; color: #81718F; font-size: 22px; }
.result-card.is-winner { animation: winner .65s ease both; }
@keyframes winner { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }

.settings-drawer { position: fixed; top: 24px; right: 24px; z-index: 10; }
.settings-drawer summary { width: fit-content; margin-left: auto; padding: 11px 18px; border: 1px solid var(--line); border-radius: 14px; background: #E8DFF4; color: #51475F; font-size: 14px; cursor: pointer; }
.settings-drawer summary:focus-visible { outline: 3px solid #81718F; outline-offset: 3px; }
.settings-panel { width: min(330px, calc(100vw - 32px)); max-height: calc(100dvh - 100px); overflow-y: auto; margin-top: 12px; padding: 28px 27px 25px; border: 1px solid var(--line); border-radius: 21px; background: #fbfaff; box-shadow: 0 17px 45px rgba(111, 97, 164, .16); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 25px; }
.panel-kicker { color: #9b90dd; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.03em; }
.gear { color: #aaa4c8; font-size: 21px; }
.field-label { display: flex; justify-content: space-between; margin: 0 0 9px; color: #5f5a76; font-size: 12px; font-weight: 700; }
.field-label span { color: #aaa7ba; font-size: 11px; font-weight: 500; }
.number-input, textarea { width: 100%; border: 1px solid #e8e4f1; border-radius: 10px; outline: none; color: var(--ink); background: #fcfbff; font: inherit; transition: border .2s, box-shadow .2s; }
.number-input { height: 42px; padding: 0 12px; font-size: 15px; }
textarea { min-height: 144px; padding: 11px 13px; resize: vertical; font-size: 13px; line-height: 1.75; }
.number-input:focus, textarea:focus { border-color: #a89bef; box-shadow: 0 0 0 3px rgba(168,155,239,.15); }
.options-label { margin-top: 21px; }
.field-note { margin: 7px 0 22px; color: #aaa7b7; font-size: 11px; }
.duration-label { margin-top: 3px; }
.duration-control { display: flex; align-items: center; gap: 12px; }
input[type=range] { width: 100%; accent-color: var(--violet); cursor: pointer; }
output { min-width: 39px; color: var(--violet); font-size: 12px; font-weight: 700; text-align: right; }
.tip { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
.tip > span { color: #7bc69b; font-size: 24px; }
.tip p { margin: 0; color: #a19db0; font-size: 11px; line-height: 1.7; }
footer { color: #51475F; text-align: center; font-size: 11px; letter-spacing: .04em; padding: 6px 12px; border-radius: 12px; background: rgba(255,255,255,.7); }
.footer-dot { display: inline-block; margin: 0 10px; color: #d7d2e3; }

@media (max-width: 850px) {
  .app-shell { padding-top: 76px; }
  .workspace { width: min(100%, max(220px, calc(100dvh - 340px)), 800px); }
  .wheel-stage { min-height: 0; }
  .pointer { top: -4px; }
  .settings-drawer { top: 16px; right: 16px; }
}
@media (max-width: 430px) {
  .app-shell { padding-inline: 12px; }
  .wheel-wrap { padding: 11px; }
  .wheel-wrap::before { border-width: 11px; }
  .pointer { width: 35px; height: 47px; top: -3px; }
  .spin-button { width: 96px; height: 96px; font-size: 17px; }
  .spin-icon { font-size: 23px; }
  .settings-panel { padding: 23px 19px; }
  footer { padding-bottom: 8px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .app-shell { justify-content: flex-start; gap: 8px; padding: 12px 16px; }
  .hero { display: flex; align-items: center; gap: 10px; }
  .eyebrow, .subtitle { display: none; }
  h1 { margin: 0; font-size: 24px; }
  .workspace { width: min(100%, calc(100dvh - 118px)); }
  .wheel-wrap { padding: 10px; }
  .wheel-wrap::before { border-width: 10px; }
  .result-card { margin-top: 8px; padding: 8px 16px 9px; }
  footer { display: none; }
  .settings-drawer { top: 10px; right: 12px; }
}