.campaign-body { min-height: 100vh; background: radial-gradient(ellipse 760px 560px at 86% 5%, #e6f3e9, transparent 72%), radial-gradient(ellipse 620px 480px at 5% 94%, #f6eddf, transparent 75%), #f8faf7; }
.public-stage { display: grid; place-items: center; min-height: 100vh; padding: clamp(14px, 2.4vw, 32px); }
.campaign-play {
  --campaign-accent: #176a58;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding: clamp(20px, 3.1vw, 42px);
  overflow: hidden;
  border: 1px solid #d9e9df;
  border-top: 5px solid var(--wheel-page-accent, var(--campaign-accent));
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 28px 78px #113c3019, 0 3px 12px #113c3008;
}
.campaign-play::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 360px;
  background: radial-gradient(circle at 70% 10%, #e5f4eb 0, transparent 54%),
              linear-gradient(180deg, #f8fbf8, #fff);
  pointer-events: none;
}
.play-header,
.play-brand { display: flex; align-items: center; }
.play-header { justify-content: space-between; gap: 18px; }
.play-brand { gap: 12px; min-width: 0; }
.play-brand-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  padding: 8px;
  border-radius: 20px;
  background: #183e38;
  box-shadow: 0 8px 20px #133b3030;
  color: #f5d391;
  font-size: 2rem;
}
.play-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.play-brand-copy { display: grid; line-height: 1.55; min-width: 0; }
.play-brand-copy strong { font-size: 1.06rem; color: #183e38; overflow-wrap: anywhere; }
.play-brand-copy small { color: #72817a; font-size: .77rem; }
.play-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid #cce6d5;
  border-radius: 999px;
  background: #eff9f2;
  color: #17654e;
  font-size: .82rem;
  font-weight: 800;
}
.play-live span { width: 8px; height: 8px; border-radius: 50%; background: #31ae75; box-shadow: 0 0 0 4px #d9f2e2; }
.demo-banner { display:flex; align-items:flex-start; gap:12px; margin:24px 0 8px; padding:15px 18px; border:1px solid #eddbb0; border-radius:20px; background:linear-gradient(115deg,#fff9e9,#fffdf7); color:#654923; box-shadow:0 10px 28px #9b722010; }
.demo-banner>span { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:12px; background:#ffe8ae; color:#80511d; font-size:1.4rem; }
.demo-banner strong { display:block; font-size:1rem; }
.demo-banner p { margin:3px 0 0; line-height:1.8; font-size:.86rem; }
.play-intro { grid-area: intro; min-width: 0; margin-top: 8px; }
.play-kicker {
  display: inline-block;
  color: #a56726;
  font-weight: 850;
  font-size: .9rem;
  letter-spacing: .01em;
}
.play-intro h1 { margin: 7px 0 8px; color: #163b36; font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.4; }
.play-intro p { margin: 0; color: #5f706b; font-size: clamp(.98rem, 1.3vw, 1.12rem); }
.play-intro .play-business-description { margin-top: 2px; font-size: .93rem; color: #83918b; }

.spin-form {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  grid-template-areas: 'intro wheel' 'fields wheel' 'feedback wheel' 'privacy wheel';
  align-items: start;
  column-gap: clamp(24px, 5vw, 74px);
  margin-top: 20px;
}
.play-fields { grid-area: fields; min-width: 0; padding-top: 12px; }
.play-step {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 8px;
  background: #fff4df;
  color: #9c6428;
  font-size: .78rem;
  font-weight: 850;
}
.play-fields label { display: block; margin-top: 18px; color: #193b36; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 900; }
.play-field-hint { margin: 3px 0 14px; color: #71817b; font-size: .9rem; }
.spin-form input[type=tel] {
  display: block;
  width: 100%;
  min-height: 66px;
  padding: 10px 20px;
  border: 1.5px solid #b7d3c6;
  border-radius: 17px;
  background: #f8fcf9;
  color: #153d35;
  font: 750 clamp(1.25rem, 2vw, 1.65rem) Vazirmatn, Tahoma, sans-serif;
  letter-spacing: .055em;
  text-align: center;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.spin-form input[type=tel]::placeholder { color: #a2b4aa; }
.spin-form input[type=tel]:focus { outline: none; border-color: #2a9278; background: #fff; box-shadow: 0 0 0 4px #2a927827, 0 10px 28px #1c775518; }
.play-next { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; color: #247160; font-size: .9rem; font-weight: 800; }
.play-next span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e2f3ea; font-size: 1.1rem; line-height: 1; }
.play-help { margin-top: 14px; padding: 10px 13px; border: 1px solid #dcece2; border-radius: 12px; background: #f9fdfa; color: #325d4e; font-size: .78rem; line-height: 1.75; }
.play-help summary { color: #186b51; cursor: pointer; font-weight: 850; }
.play-help summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.play-help ol { margin: 9px 0 0; padding-inline-start: 22px; }
.play-help p { margin: 6px 0 0; font-size: .76rem; }

/* A theme belongs to the published campaign, so every paired kiosk sees the same wheel. */
.campaign-play[data-wheel-theme="ocean"] {
  --wheel-page-accent: #2788ad;
  --wheel-kicker: #347c9a;
  --wheel-step-bg: #e9f7fb;
  --wheel-step-border: #cbe9f1;
  --wheel-step-color: #2f7290;
  --wheel-stage-glow: radial-gradient(ellipse at 48% 47%, #d5f1fb 0, #edfaff 43%, #f1faff25 70%, transparent 79%);
  --wheel-frame: conic-gradient(from -35deg, #faffff, #72a9ba 18%, #e8fcff 36%, #6c93b4 58%, #dcf7f5 82%, #faffff);
  --wheel-frame-shadow: 0 37px 70px #174e6b37, 0 14px 28px #396b8727, inset 0 0 0 3px #ffffffd9, inset 0 0 0 9px #3b7b9440, inset 0 0 0 13px #e0f7fc;
  --wheel-tick: #316d88;
  --wheel-rim: #e9fbff;
  --wheel-bulb: radial-gradient(circle at 35% 27%, #fff, #edffff 32%, #92d9ec 66%, #367d9c);
  --wheel-light-idle: 0 0 3px #d8faff, 0 1px 2px #1b4c6d66;
  --wheel-light-active: 0 0 7px #fff, 0 0 15px #acefff, 0 0 24px #55bfe7a8;
  --wheel-pin: radial-gradient(circle at 32% 28%, #fff, #b6e6ed 43%, #4788a4 100%);
  --wheel-pointer: linear-gradient(90deg, #164b82, #338cbb 34%, #b5f7ef 50%, #2876ae 77%, #163c75);
  --wheel-hub: radial-gradient(circle at 29% 20%, #d6fdff 0, #5cc6d9 27%, #328dbf 56%, #14518c 100%);
  --wheel-hub-hover: radial-gradient(circle at 29% 20%, #e8ffff 0, #78d8e3 27%, #3ca7cc 56%, #17609b 100%);
  --wheel-hub-color: #fff;
  --wheel-hub-star: #e9ffff;
  --wheel-caption-bg: linear-gradient(110deg, #f7feff, #dcf5fa 52%, #f7feff);
  --wheel-caption-fg: #286d88;
  --wheel-caption-border: #c6e6ef;
}
.campaign-play[data-wheel-theme="sunset"] {
  --wheel-page-accent: #d57166;
  --wheel-kicker: #ad5c65;
  --wheel-step-bg: #fff0e7;
  --wheel-step-border: #f2d9cb;
  --wheel-step-color: #a6575e;
  --wheel-stage-glow: radial-gradient(ellipse at 48% 47%, #ffe2cf 0, #fff3e9 43%, #fff5ee2a 70%, transparent 79%);
  --wheel-frame: conic-gradient(from -35deg, #fff5df, #ae604e 18%, #ffdab0 36%, #ba6b59 58%, #ffd9af 82%, #fff5df);
  --wheel-frame-shadow: 0 37px 70px #6b2f4537, 0 14px 28px #aa6a4a27, inset 0 0 0 3px #ffffffc9, inset 0 0 0 9px #9c514f40, inset 0 0 0 13px #ffdebf;
  --wheel-tick: #91485c;
  --wheel-rim: #fff0db;
  --wheel-bulb: radial-gradient(circle at 35% 27%, #fff, #fff7dd 32%, #ffbd80 66%, #a95448);
  --wheel-light-idle: 0 0 3px #ffe7bf, 0 1px 2px #69394b66;
  --wheel-light-active: 0 0 7px #fff, 0 0 15px #ffcd93, 0 0 24px #ff996aa8;
  --wheel-pin: radial-gradient(circle at 32% 28%, #fff5d8, #e9a77f 43%, #9c4d62 100%);
  --wheel-pointer: linear-gradient(90deg, #6b315e, #b6527e 34%, #f4ab86 50%, #a94474 77%, #5f2c61);
  --wheel-hub: radial-gradient(circle at 29% 20%, #efb8dd 0, #c16aa6 27%, #963f80 56%, #622f73 100%);
  --wheel-hub-hover: radial-gradient(circle at 29% 20%, #ffcae4 0, #dc82b4 27%, #af508f 56%, #743581 100%);
  --wheel-hub-color: #fff;
  --wheel-hub-star: #ffe6a3;
  --wheel-caption-bg: linear-gradient(110deg, #fff9f4, #ffe7d7 52%, #fff9f4);
  --wheel-caption-fg: #a05261;
  --wheel-caption-border: #f4d3c1;
}
.campaign-play[data-wheel-theme="royal"] {
  --wheel-page-accent: #7654a2;
  --wheel-kicker: #72529a;
  --wheel-step-bg: #f1ebfa;
  --wheel-step-border: #e2d5ef;
  --wheel-step-color: #65478d;
  --wheel-stage-glow: radial-gradient(ellipse at 48% 47%, #e8dffb 0, #f5f0ff 43%, #f4f1ff30 70%, transparent 79%);
  --wheel-frame: conic-gradient(from -35deg, #fff2bc, #6f5697 18%, #ffe39b 36%, #4a417d 58%, #edc874 82%, #fff2bc);
  --wheel-frame-shadow: 0 37px 70px #352d6b4d, 0 14px 28px #79639a30, inset 0 0 0 3px #ffffffd4, inset 0 0 0 9px #46397e70, inset 0 0 0 13px #f8dfac;
  --wheel-tick: #5e4288;
  --wheel-rim: #fff2d1;
  --wheel-bulb: radial-gradient(circle at 35% 27%, #fff, #fff8d6 32%, #f3cc76 66%, #8f6499);
  --wheel-light-idle: 0 0 3px #fbe9ab, 0 1px 2px #3d326966;
  --wheel-light-active: 0 0 7px #fff, 0 0 15px #f9dda0, 0 0 24px #bca3ffa8;
  --wheel-pin: radial-gradient(circle at 32% 28%, #fffad9, #e8b65a 43%, #674589 100%);
  --wheel-pointer: linear-gradient(90deg, #624681, #c3995f 34%, #fff0a7 50%, #a77557 77%, #4d3979);
  --wheel-hub: radial-gradient(circle at 29% 20%, #fff9e1 0, #f8d988 27%, #d6a34b 58%, #956739 100%);
  --wheel-hub-hover: radial-gradient(circle at 29% 20%, #fffdf0 0, #ffe7a0 27%, #e7b95f 58%, #a47741 100%);
  --wheel-hub-color: #35234e;
  --wheel-hub-star: #583970;
  --wheel-caption-bg: linear-gradient(110deg, #fcfaff, #eee5fc 52%, #fcfaff);
  --wheel-caption-fg: #604681;
  --wheel-caption-border: #dfd0ee;
}
.campaign-play[data-wheel-theme="ocean"]::before { background: radial-gradient(circle at 72% 10%, #e4f7fc 0, transparent 56%), linear-gradient(180deg, #fbfeff, #fff); }
.campaign-play[data-wheel-theme="sunset"]::before { background: radial-gradient(circle at 72% 10%, #fff0e1 0, transparent 56%), linear-gradient(180deg, #fffdfb, #fff); }
.campaign-play[data-wheel-theme="royal"]::before { background: radial-gradient(circle at 72% 10%, #f0eaff 0, transparent 56%), linear-gradient(180deg, #fdfcff, #fff); }

.wheel-stage {
  grid-area: wheel;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6px 0 0;
  background: var(--wheel-stage-glow, radial-gradient(ellipse at 48% 47%, #dff8ee 0, #fff5eb 42%, #fff8f026 66%, transparent 78%));
}
.wheel-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 680px);
  aspect-ratio: 1;
  margin: 20px auto 0;
  padding: clamp(13px, 1.55vw, 21px);
  border: 2px solid #fff8de;
  border-radius: 50%;
  background: var(--wheel-frame, conic-gradient(from -35deg, #fffbe8, #c6974c 15%, #fff2c1 28%, #bc8840 45%, #fff5d7 58%, #a77538 73%, #f5d693 87%, #fffbe8));
  box-shadow: var(--wheel-frame-shadow, 0 37px 70px #0c443b38, 0 14px 28px #90704427, inset 0 0 0 3px #ffffffc9, inset 0 0 0 9px #8c632c40, inset 0 0 0 13px #fff2cd);
  isolation: isolate;
}
.wheel-wrap::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 4px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--wheel-tick, #714722) 0deg 1.2deg, transparent 1.2deg 10deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: .72;
  pointer-events: none;
}
.wheel-lights {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.wheel-light {
  position: absolute;
  width: clamp(6px, .85vw, 10px);
  height: clamp(6px, .85vw, 10px);
  transform: translate(-50%, -50%);
  border: 1px solid #fff8d8;
  border-radius: 50%;
  background: var(--wheel-bulb, radial-gradient(circle at 35% 27%, #fff, #fff7d3 32%, #f6c768 66%, #9b632e));
  box-shadow: 0 0 4px #fff7c5, 0 0 8px #f0bb6099, 0 2px 3px #5a391d66;
  animation: wheel-light-glow 2.38s ease-in-out infinite;
}
@keyframes wheel-light-glow {
  0%, 38%, 100% { opacity: .58; box-shadow: var(--wheel-light-idle, 0 0 3px #fff4bd, 0 1px 2px #5a391d66); }
  52%, 68% { opacity: 1; box-shadow: var(--wheel-light-active, 0 0 7px #fff, 0 0 15px #fbd782, 0 0 24px #ffc45a9c); }
}
.wheel-wrap--celebrating .wheel-light { animation-duration: .42s; opacity: 1; }
.wheel-wrap--celebrating { box-shadow: 0 37px 70px #0c443b38, 0 0 0 6px #ffedb89c, 0 0 70px #f8c76d82, inset 0 0 0 3px #ffffffc9, inset 0 0 0 9px #8c632c40, inset 0 0 0 13px #fff2cd; }
.wheel-wrap--celebrating .wheel-hub { box-shadow: 0 12px 20px #0c332b9c, 0 0 0 3px #ad7536, 0 0 0 10px #ffe6a9, 0 0 30px #ffe29f, inset 0 3px 3px #fff; }
.spin-wheel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: clamp(5px, .6vw, 8px) solid var(--wheel-rim, #fff7de);
  border-radius: 50%;
  box-shadow: 0 5px 11px #58382070, 0 0 0 2px #ffffffb0, inset 0 0 0 2px #fff5d96e;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 6s cubic-bezier(.12,.69,.08,1);
  --label-distance: clamp(110px, 14vw, 190px);
}
.spin-wheel::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 27% 19%, #ffffff40 0, #ffffff18 19%, transparent 49%), linear-gradient(150deg, #ffffff15 0%, transparent 37%, #071f1c1f 100%);
  pointer-events: none;
}
.spin-wheel::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #ffffff7a, inset 0 0 0 9px #ffffff1d, inset 0 0 0 15px #102f2a14, inset 0 19px 29px #ffffff40, inset 0 -24px 32px #102b2757;
  pointer-events: none;
}
.spin-wheel:focus-visible { outline: 4px solid #247f68; outline-offset: 5px; }
.spin-wheel:disabled { cursor: default; }
.wheel-pointer {
  position: absolute;
  z-index: 5;
  top: -23px;
  left: 50%;
  width: 50px;
  height: 68px;
  transform: translateX(-50%);
  pointer-events: none;
}
.wheel-pointer::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 8px;
  width: 34px;
  height: 34px;
  border: 4px solid #ffe7ad;
  border-radius: 50%;
  background: var(--wheel-pin, radial-gradient(circle at 32% 28%, #fff6d3, #e2a655 43%, #8d4c29 100%));
  box-shadow: 0 4px 8px #42260c8c, inset 0 1px 2px #fff9de;
}
.wheel-pointer::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 2px;
  width: 46px;
  height: 52px;
  background: var(--wheel-pointer, linear-gradient(90deg, #a83d30, #e65e44 34%, #ffb075 50%, #d34d38 77%, #902b28));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 6px 5px #4b1b1973);
}
.wheel-labels { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.wheel-segment-label {
  --label-width: clamp(112px, 10vw, 150px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--label-width);
  margin-left: calc(var(--label-width) / -2);
  margin-top: -22px;
  color: #153b35;
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  font-weight: 900;
  line-height: 1.32;
  text-align: center;
  overflow-wrap: anywhere;
  letter-spacing: -.015em;
}
.wheel-segment-label--discount { margin-top: -36px; }
.wheel-segment-value { display: block; font-size: clamp(1.75rem, 3.2vw, 2.65rem); font-weight: 950; line-height: 1.13; }
.wheel-segment-kind { display: block; margin-top: 3px; font-size: .82em; font-weight: 850; }
.wheel-labels--roomy .wheel-segment-label::before { content: '✦'; display: block; margin: 0 auto 5px; color: currentColor; font-size: .78em; line-height: 1; opacity: .85; }
.wheel-hub {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 128px;
  height: 128px;
  border: 7px solid #fffaf0;
  border-radius: 50%;
  background: var(--wheel-hub, radial-gradient(circle at 29% 20%, #ffd7bf 0, #ff8c73 25%, #ed5b62 54%, #bd3458 100%));
  color: var(--wheel-hub-color, #fff);
  text-shadow: 0 2px 3px #781e40b8;
  box-shadow: 0 12px 20px #552a399c, 0 0 0 3px #a87036, 0 0 0 8px #fff6d656, inset 0 3px 3px #fff5eb91, inset 0 -7px 11px #76204785;
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  transition: box-shadow .22s ease, background .22s ease;
}
.wheel-hub::before { content: '✦'; color: var(--wheel-hub-star, #fff4bc); font-size: 1.1rem; line-height: 1; text-shadow: 0 0 7px #fff5d6; animation: wheel-hub-spark 2.4s ease-in-out infinite; }
@keyframes wheel-hub-spark {
  0%, 100% { opacity: .7; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.28); }
}
.spin-wheel:not(:disabled):hover .wheel-hub,
.spin-wheel:not(:disabled):focus-visible .wheel-hub { background: var(--wheel-hub-hover, radial-gradient(circle at 29% 20%, #ffe1cc 0, #ff9b7b 25%, #fb6770 54%, #c7345c 100%)); box-shadow: 0 15px 29px #62293c99, 0 0 0 3px #f1ce84, 0 0 25px #ffdbad; }
.spin-wheel:not(:disabled):active .wheel-hub { box-shadow: 0 3px 11px #59223d91, 0 0 0 3px #f1ce84, inset 0 3px 9px #781d3c85; }
.wheel-caption { margin-top: 24px; padding: 9px 22px; border: 1px solid var(--wheel-caption-border, #efd7a9); border-radius: 999px; background: var(--wheel-caption-bg, linear-gradient(110deg, #fffefa, #fff3d9 52%, #fffefa)); color: var(--wheel-caption-fg, #8a5b28); box-shadow: 0 8px 25px #b17d321c, inset 0 1px #fff; font-size: .97rem; font-weight: 850; text-align: center; }

.play-feedback { grid-area: feedback; min-width: 0; align-self: start; margin-top: 16px; }
.spin-message { margin: 0; color: #1d6955; font-size: .96rem; font-weight: 800; }
.spin-message:empty,
.connection-status:empty { display: none; }
.connection-status:not(:empty) { margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; background: #fff3d9; color: #77531b; font-weight: 800; }
.spin-result {
  width: 100%;
  padding: 22px 24px;
  border: 1px solid #a9d9bd;
  border-radius: 19px;
  background: linear-gradient(145deg, #effbf4, #f9fffa);
  box-shadow: 0 12px 27px #1c71471a;
  color: #1b4537;
  text-align: right;
}
.spin-result[hidden] { display: none; }
.next-player {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  padding: 10px 20px;
  border: 0;
  border-radius: 15px;
  background: #176a58;
  color: #fff;
  font: 850 1rem Vazirmatn, Tahoma, sans-serif;
  cursor: pointer;
  box-shadow: 0 10px 24px #176a5830;
  touch-action: manipulation;
}
.next-player:hover { background: #125644; }
.next-player:focus-visible { outline: 3px solid #e3b45b; outline-offset: 3px; }
.next-player[hidden] { display: none; }
.reset-hint { margin: 8px 0 14px; color: #607a6f; font-size: .86rem; font-weight: 700; }
.reset-hint[hidden] { display: none; }
.spin-result::before { content: '✦  نتیجه گردونه'; display: block; margin-bottom: 8px; color: #23815e; font-size: .8rem; font-weight: 900; }
.spin-result h2 { margin: 0 0 12px; color: #153d31; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.4; }
.spin-result p { margin: 8px 0 0; color: #496558; font-size: .91rem; }
.spin-result .prize-code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px dashed #8fc9a6;
  border-radius: 11px;
  background: #fff;
  color: #18543d;
  font-size: .94rem;
  font-weight: 800;
}
.prize-code strong { direction: ltr; font-size: clamp(1.16rem, 2vw, 1.5rem); font-weight: 950; letter-spacing: .1em; overflow-wrap: anywhere; }
.spin-privacy { grid-area: privacy; max-width: 490px; margin: 24px 0 0; color: #82918a; font-size: .74rem; line-height: 1.85; }

.kiosk-body { min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 80% 0, #e2f1e6, transparent 45%), #f3f7f3; }
.kiosk-stage { display: grid; place-items: center; min-height: 100vh; padding: clamp(14px, 2vw, 28px); }
.kiosk-play { max-width: 1600px; }
.kiosk-play .spin-form { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); column-gap: clamp(26px, 5vw, 85px); }
.kiosk-play .wheel-wrap { width: min(100%, 740px); }
.kiosk-play .spin-wheel { --label-distance: clamp(130px, 16vw, 212px); }
.kiosk-play .wheel-segment-label { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.kiosk-play .wheel-hub { width: 120px; height: 120px; font-size: 1.2rem; }
.kiosk-play .spin-form input[type=tel] { min-height: 74px; }
.kiosk-unavailable,.kiosk-pair { display: grid; place-items: center; min-height: 100vh; text-align: center; padding: 24px; }
.kiosk-pair .panel { width: min(100%, 550px); }
.kiosk-pair .play-help { margin: 0 0 16px; text-align: right; }
.kiosk-pair form { display: grid; gap: 18px; }
.kiosk-pair form label { display: grid; gap: 7px; }
.kiosk-pair input { width: 100%; min-height: 58px; padding: 12px; text-align: center; font-size: 1.5rem; }
.pair-code { font: 900 2rem Consolas,monospace; color: #1d6e5b; letter-spacing: .12em; }
.device-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* A softer touch for the customer's most visible moment */
.campaign-play::before { background: radial-gradient(circle at 72% 10%, #e7f6eb 0, transparent 56%), linear-gradient(180deg, #fcfefd, #fff); }
.play-brand-mark { box-shadow: 0 9px 22px #133b3024, inset 0 1px #ffffff38; }
.play-kicker { color: var(--wheel-kicker, #9b662c); }
.play-step { border: 1px solid var(--wheel-step-border, #f6e2b8); background: var(--wheel-step-bg, #fff8ea); color: var(--wheel-step-color, #9c6428); }
.spin-form input[type=tel] { background: #fcfefc; box-shadow: inset 0 2px 5px #16473408; }
.spin-result { border-color: #b7dfc3; background: linear-gradient(140deg, #effaf2, #fcfffc); box-shadow: 0 16px 38px #1c714719; }
.spin-result .prize-code { border-color: #a1d1b0; border-radius: 14px; box-shadow: inset 0 1px #fff; }
.next-player { background: linear-gradient(130deg, #18785f, #0f5d4e); box-shadow: 0 10px 25px #176a5826, inset 0 1px #ffffff33; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.next-player:hover { background: linear-gradient(130deg, #1d8a6c, #0f644f); box-shadow: 0 14px 27px #176a5830; }
.kiosk-body { background: radial-gradient(ellipse 760px 550px at 85% 3%, #e5f3e9, transparent 70%), radial-gradient(ellipse 650px 530px at 8% 94%, #f6eddf, transparent 72%), #f8faf7; }

@media (max-width: 780px) {
  .campaign-play { border-radius: 23px; }
  .spin-form,
  .kiosk-play .spin-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .play-intro { margin-top: 0; }
  .play-fields { padding-top: 10px; }
  .wheel-stage { order: 1; width: 100%; margin-top: 18px; }
  .play-feedback { order: 2; width: 100%; margin-top: 20px; }
  .spin-privacy { order: 3; margin-top: 22px; }
  .wheel-wrap,
  .kiosk-play .wheel-wrap { width: min(100%, 540px); }
  .spin-wheel,
  .kiosk-play .spin-wheel { --label-distance: clamp(105px, 24vw, 154px); }
}
@media (max-width: 480px) {
  .campaign-play { padding: 18px; border-radius: 20px; }
  .play-brand-mark { width: 51px; height: 51px; border-radius: 15px; }
  .play-brand-copy strong { font-size: .9rem; }
  .play-brand-copy small { font-size: .7rem; }
  .play-live { padding: 5px 9px; font-size: .7rem; }
  .play-intro { margin-top: 0; }
  .play-intro h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .spin-form { margin-top: 20px; }
  .play-fields label { margin-top: 13px; }
  .spin-form input[type=tel] { min-height: 58px; }
  .wheel-wrap,
  .kiosk-play .wheel-wrap { width: min(100%, 420px); }
  .spin-wheel,
  .kiosk-play .spin-wheel { --label-distance: clamp(76px, 24vw, 112px); }
  .wheel-segment-label,
  .kiosk-play .wheel-segment-label { width: 86px; margin-left: -43px; margin-top: -15px; font-size: .75rem; }
  .wheel-segment-label--discount,
  .kiosk-play .wheel-segment-label--discount { margin-top: -25px; }
  .wheel-segment-value { font-size: clamp(1.18rem, 5vw, 1.55rem); }
  .wheel-labels--roomy .wheel-segment-label::before { margin-bottom: 3px; }
  .wheel-hub,
  .kiosk-play .wheel-hub { width: 90px; height: 90px; border-width: 5px; font-size: .84rem; }
  .wheel-hub::before { font-size: .84rem; }
  .wheel-pointer { top: -15px; width: 34px; height: 46px; }
  .wheel-pointer::before { left: 5px; width: 24px; height: 24px; border-width: 3px; }
  .wheel-pointer::after { top: 11px; left: 1px; width: 32px; height: 36px; }
  .spin-result { padding: 18px; }
  .spin-privacy { font-size: .69rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spin-form input[type=tel] { transition: none; }
  .spin-wheel { transition: none; }
  .wheel-light { animation: none; }
  .wheel-hub::before { animation: none; }
  .wheel-hub, .next-player { transition: none; }
  .spin-result { scroll-margin-top: 20px; }
}