.masazh-roleta {
  --mr-forest: #092f20;
  --mr-forest-dark: #062416;
  --mr-olive: #3f4a2b;
  --mr-sage: #a4ac93;
  --mr-cream: #f8f5f0;
  --mr-gold: #c9ad77;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  background: var(--mr-cream);
  color: #1e2b20;
  font-family: inherit;
}
.masazh-roleta *, .masazh-roleta *::before, .masazh-roleta *::after { box-sizing: border-box; }
.masazh-roleta [hidden] { display: none !important; }
.mr-copy {
  padding: clamp(40px, 6vw, 100px) clamp(26px, 6vw, 105px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.mr-result-kicker {
  color: #64704e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  line-height: 1.5;
  margin: 0 0 19px;
}
.mr-form { width: 100%; max-width: 420px; display: grid; gap: 13px; }
.mr-field { width: 100%; }
.mr-field label { display: block; font-size: 12px; font-weight: 650; margin: 0 0 5px; color: #31402e; }
.mr-field small, .mr-check small { color: #777e6f; font-weight: 400; }
.masazh-roleta .mr-field input {
  display: block;
  width: 100%;
  border: 1px solid #dddcd1;
  border-radius: 3px;
  background: #fffefb;
  padding: 11px 12px;
  color: #1e3022;
  font-family: inherit;
  font-size: 14px;
  box-shadow: none;
  min-height: 44px;
}
.masazh-roleta .mr-field input:focus { outline: 2px solid #99a787; outline-offset: 1px; border-color: #99a787; }
.mr-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: #4d594d; cursor: pointer; }
.mr-check input { flex: none; accent-color: #2e4e32; margin: 3px 0 0; }
.mr-check a { color: #263f2b; text-decoration: underline; }
.mr-trap { position: absolute !important; left: -99999px !important; height: 0; overflow: hidden; }
.masazh-roleta .mr-button {
  border: 1px solid #203826;
  background: var(--mr-forest);
  color: #fffdf5;
  min-height: 47px;
  font-weight: 650;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.4;
  padding: 12px 20px;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(8,44,27,.12);
  transition: background .2s ease, transform .2s ease;
}
.masazh-roleta .mr-button:hover, .masazh-roleta .mr-button:focus { background: #315139; transform: translateY(-1px); }
.masazh-roleta .mr-button:disabled { opacity: .58; cursor: progress; transform: none; }
.mr-footnote { font-size: 11px; color: #8a8b7d; line-height: 1.5; margin: 0; }
.mr-notice { color: #4b5c42; background: #eeeede; border-left: 3px solid #8c9d7f; }
.mr-message { max-width: 430px; width: 100%; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin: 8px 0 16px; }
.mr-feedback { background: #f6e9e3; border-left: 3px solid #b46b5a; color: #71362a; }
.mr-feedback.is-success { background: #edf1e7; border-left-color: #496a46; color: #2e512a; }
.mr-result {
  width: 100%; max-width: 420px;
  background: #fffefa;
  padding: 24px 27px;
  border: 1px solid #dfd8c7;
  box-shadow: 0 12px 30px rgba(41,40,27,.07);
  margin-top: 12px;
}
.mr-result-kicker { margin: 0 0 9px; }
.mr-result-label { display: block; color: #193925; font-size: clamp(22px,2vw,28px); font-family: Georgia,serif; font-weight: 500; line-height: 1.2; }
.mr-result p { margin: 13px 0 0; line-height: 1.5; }
.mr-result code { background: #eceddf; padding: 4px 7px; font-size: 16px; font-weight: 700; color: #26462d; letter-spacing: .05em; }
.mr-copy-code { display: block; border: 0; border-bottom: 1px solid #35513b; background: transparent; color: #35513b; padding: 5px 0; margin-top: 9px; font-size: 12px; cursor: pointer; }
.mr-result .mr-result-small { font-size: 12px; color: #72786c; }

.mr-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 15%, rgba(255,255,255,.75), transparent 48%),
    radial-gradient(ellipse at 92% 90%, rgba(106,88,53,.18), transparent 46%),
    linear-gradient(130deg, #eae2d3, #d4c4ad);
}
.mr-scene::before, .mr-scene::after {
  content: '';
  position: absolute;
  border-radius: 50% 0 50% 0;
  opacity: .20;
  background: #5e704b;
  transform: rotate(-40deg);
}
.mr-scene::before { width: 75px; height: 205px; bottom: -56px; left: -17px; }
.mr-scene::after { width: 58px; height: 160px; bottom: -50px; left: 55px; transform: rotate(14deg); }
.mr-decor { position: absolute; color: rgba(255,255,255,.42); font-size: 68px; line-height: 1; font-family: Georgia,serif; }
.mr-decor--top { top: 38px; right: 40px; }
.mr-decor--bottom { bottom: 30px; right: 35px; font-size: 24px; }
.mr-wheel-assembly { --mr-size: clamp(250px, 36vw, 470px); width: var(--mr-size); height: calc(var(--mr-size) + 115px); position: relative; flex: none; }
.mr-disc {
  width: var(--mr-size);
  height: var(--mr-size);
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  border-radius: 50%;
  border: clamp(7px, .85vw, 11px) solid #c7a76d;
  background:
    repeating-conic-gradient(from -22.5deg, transparent 0deg 44deg, #cfb67e 44deg 45deg),
    conic-gradient(from -22.5deg,
      #0e3827 0deg 45deg, #f4eee2 45deg 90deg,
      #a1ab90 90deg 135deg, #dbc093 135deg 180deg,
      #0e3827 180deg 225deg, #f4eee2 225deg 270deg,
      #a1ab90 270deg 315deg, #dbc093 315deg 360deg);
  box-shadow: 0 0 0 2px #82683f, inset 0 0 0 2px rgba(255,255,255,.4),
              inset 0 0 25px rgba(41,40,18,.14), 0 18px 28px rgba(49,36,20,.28);
  transform: translateX(-50%) rotate(0deg);
  will-change: transform;
}
.mr-slice-label {
  position: absolute;
  left: 50%; top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 27%;
  min-height: 28px;
  text-align: center;
  color: #183a29;
  font-family: Inter, Arial, sans-serif;
  font-weight: 650;
  line-height: 1;
  text-shadow: 0 1px rgba(255,255,255,.18);
  overflow-wrap: anywhere;
  pointer-events: none;
}
.mr-slice-label:nth-child(4n + 1) { color: #fffaf1; text-shadow: 0 1px 1px #183822; }
.mr-slice-top {
  display: block;
  font-size: clamp(8px, .9vw, 12px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
}
.mr-slice-main {
  display: block;
  width: 100%;
  font-size: clamp(17px, 2.5vw, 30px);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.045em;
}
.mr-slice-label--percent .mr-slice-main {
  font-size: clamp(22px, 3.6vw, 43px);
  letter-spacing: -.055em;
}
.mr-slice-label--long .mr-slice-main { font-size: clamp(12px, 1.5vw, 20px); letter-spacing: -.025em; }
.mr-slice-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  width: 100%;
  font-size: clamp(8px, 1.03vw, 12px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.mr-pointer {
  position: absolute;
  width: 58px;
  height: 68px;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff9ed;
  clip-path: polygon(5% 0, 95% 0, 50% 100%);
  filter: drop-shadow(0 3px 2px rgba(68,49,25,.3));
  z-index: 5;
}
.mr-pointer::after { content: ''; position: absolute; inset: 4px 5px 7px; background: #c9ab73; clip-path: polygon(5% 0, 95% 0, 50% 100%); opacity: .65; }
.mr-center {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: grid; place-items: center;
  width: var(--mr-size); height: var(--mr-size);
  pointer-events: none;
}
.mr-center span {
  display: grid; place-items: center;
  width: 16%; aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid #b9985e;
  background: radial-gradient(circle at 35% 25%, #885c36, #4c2a16);
  color: #e5d7b2;
  font-family: Georgia, serif; font-style: italic; font-size: clamp(18px, 2vw, 26px);
  box-shadow: 0 3px 9px rgba(0,0,0,.25);
}
.mr-pedestal {
  position: absolute;
  z-index: 1; bottom: 23px; left: 38%; width: 24%; height: 38%;
  background: linear-gradient(90deg, #3c2819, #805334 46%, #3d271a);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
.mr-stand {
  position: absolute;
  z-index: 1; bottom: 6px; left: 21%; width: 58%; height: 26px;
  border-radius: 3px 3px 10px 10px;
  background: linear-gradient(#7a4c2f, #442816);
  border-bottom: 4px solid #c9a36a;
  box-shadow: 0 12px 17px rgba(42,28,16,.25);
}
@media (max-width: 900px) {
  .masazh-roleta { grid-template-columns: 1fr; }
  .mr-copy { padding: 54px 7% 35px; align-items: center; text-align: center; }
  .mr-check { text-align: left; }
  .mr-scene { min-height: 460px; }
  .mr-wheel-assembly { --mr-size: min(72vw, 370px); }
  .mr-slice-label--percent .mr-slice-main { font-size: clamp(22px, 5vw, 35px); }
  .mr-slice-label--word .mr-slice-main { font-size: clamp(17px, 4vw, 25px); }
  .mr-slice-label--long .mr-slice-main { font-size: clamp(13px, 2.8vw, 18px); }
  .mr-slice-detail { font-size: clamp(9px, 1.9vw, 12px); }
}
@media (max-width: 480px) {
  .mr-copy { padding: 43px 23px 28px; }
  .mr-scene { min-height: 370px; }
  .mr-wheel-assembly { --mr-size: min(76vw, 290px); }
  .mr-pointer { width: 44px; height: 50px; top: -9px; }
  .mr-center { border-width: 3px; }
  .mr-slice-label--percent .mr-slice-main { font-size: clamp(20px, 5vw, 25px); }
  .mr-slice-label--word .mr-slice-main { font-size: clamp(15px, 3.7vw, 19px); }
  .mr-slice-label--long .mr-slice-main { font-size: 12px; }
  .mr-slice-top, .mr-slice-detail { font-size: 8px; }
  .mr-decor--top { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .masazh-roleta .mr-button { transition: none; }
  .mr-disc { will-change: auto; }
}