@font-face {
  font-family: "Druk";
  src: url("fonts/DrukCyr-Medium.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Uralsib";
  src: url("fonts/Uralsib-Regular.otf") format("opentype");
  font-display: block;
}

:root {
  /* палитра бренда: фиолетовый фон, персиковый акцент, стеклянные пазлы */
  --bg: #472682;
  --violet-900: #2e1166;
  --violet-800: #3d1a80;
  --violet-600: #6a35b8;
  --violet-500: #7d45cf;
  --lavender: #c9b6ff;
  --peach: #f4a583;
  --coral: #ff6f4f;
  --blue: #3b6cff;
  --yellow: #ffd23f;
  --white: #ffffff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: "Uralsib", system-ui, sans-serif;
  color: var(--white);
  background: var(--bg);
  overflow-x: hidden;
}

/* точечная сетка, как на постерах */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
  background-size: 14px 14px;
  pointer-events: none;
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  text-align: left;
}

.logo { height: 26px; margin: 4px 0 18px; }

.title {
  margin: 0;
  font-family: "Druk", Impact, sans-serif;
  font-weight: normal;
  font-size: clamp(34px, 11vw, 48px);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.accent {
  background: linear-gradient(90deg, var(--lavender), var(--peach) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { margin: 10px 0 18px; font-size: 16px; color: var(--lavender); }

/* --- колесо ------------------------------------------------------------- */
.wheel-wrap {
  position: relative;
  width: min(86vw, 360px);
  aspect-ratio: 1;
  margin: 6px auto 22px;
}
#wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.95), 0 0 0 10px rgba(201, 182, 255, 0.35),
    0 18px 40px rgba(20, 5, 60, 0.55);
  transition: transform 5.2s cubic-bezier(0.12, 0.6, 0.08, 1);
  will-change: transform;
}
.pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 34px;
  height: 40px;
  transform: translateX(-50%);
  z-index: 3;
  background: var(--peach);
  clip-path: polygon(50% 100%, 0 12%, 18% 0, 82% 0, 100% 12%);
  filter: drop-shadow(0 3px 4px rgba(20, 5, 60, 0.5));
}
.hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--lavender));
  box-shadow: 0 0 0 5px var(--bg), 0 4px 10px rgba(20, 5, 60, 0.5);
}

/* --- кнопка ------------------------------------------------------------- */
.btn {
  appearance: none;
  border: 0;
  align-self: center;
  width: min(86vw, 360px);
  padding: 17px 24px 15px;
  border-radius: 18px;
  font-family: "Druk", Impact, sans-serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--violet-900);
  background: linear-gradient(180deg, #ffc3a6, var(--peach));
  box-shadow: 0 6px 0 #c9724f, 0 14px 24px rgba(20, 5, 60, 0.4);
  transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #c9724f, 0 6px 12px rgba(20, 5, 60, 0.4); }
.btn:disabled { opacity: 0.55; }
.btn.claimed {
  background: linear-gradient(180deg, #a6efa9, #5fcf66);
  box-shadow: 0 6px 0 #3a9a41, 0 14px 24px rgba(20, 5, 60, 0.4);
}
.btn.claimed:active:not(:disabled) { box-shadow: 0 2px 0 #3a9a41, 0 6px 12px rgba(20, 5, 60, 0.4); }

.hint { align-self: flex-start; min-height: 20px; margin: 14px 0 0; font-size: 14px; color: var(--lavender); }
.hint.error { color: var(--peach); }

/* --- окно выигрыша ------------------------------------------------------ */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 5, 60, 0.6);
  animation: fade 0.25s ease-out;
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: min(100%, 420px);
  padding: 26px 22px 22px;
  border-radius: 28px;
  text-align: left;
  background: #472682;
  box-shadow: 0 0 0 2px rgba(201, 182, 255, 0.4), 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: rise 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.sheet-label { margin: 0; font-size: 15px; color: var(--lavender); }
.sheet-prize {
  margin: 6px 0 12px;
  font-family: "Druk", Impact, sans-serif;
  font-weight: normal;
  font-size: clamp(32px, 10vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--lavender), var(--peach) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sheet-text { margin: 0 0 20px; font-size: 15px; line-height: 1.4; color: #efe8ff; }
.sheet-warn[hidden] { display: none; }
.sheet-text a { color: var(--peach); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sheet-card .btn { width: 100%; }
.sheet-card .btn + .btn { margin-top: 14px; }
.sheet-card .btn[hidden] { display: none; }
.btn-ghost {
  color: var(--white);
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(201, 182, 255, 0.55);
}
.btn-ghost:active:not(:disabled) { transform: none; box-shadow: inset 0 0 0 2px var(--lavender); }
.sheet-card.done .sheet-prize { background: linear-gradient(90deg, #d8ffd9, #8be28f); -webkit-background-clip: text; background-clip: text; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }