/* =========================================================
   Wheel of Fortune — layout & theme
   Десктоп: 2 колонки (колесо ліворуч, текст+форма праворуч)
   Моб:     стек -> заголовок -> колесо -> форма -> примітка
   ========================================================= */

.wof-wrap{
  display:grid;
  grid-template-columns:auto minmax(280px,440px);
  grid-template-areas:
    "stage head"
    "stage panel"
    "stage note";
  align-items:center;
  justify-content:center;
  column-gap:48px;
  row-gap:14px;
  max-width:920px;
  margin:0 auto;
  font-family:inherit;
  color:#1b2b24;
}

/* ---- області ---- */
/* колесо лежить НИЖЧЕ за форму, щоб ніколи не перехоплювало кліки по кнопці */
.wof-stage{grid-area:stage;align-self:center;z-index:1}
.wof-head {grid-area:head; text-align:left; position:relative; z-index:2}
.wof-panel{grid-area:panel; position:relative; z-index:2}
.wof-disclaimer{grid-area:note; position:relative; z-index:2}

/* ---- заголовок ---- */
.wof-title{font-size:30px;line-height:1.2;margin:0 0 10px;font-weight:800;color:#15281f; text-align:center;}
.wof-sub{font-size:17px;line-height:1.45;margin:0;color:#3c4a43}

/* =========================================================
   КОЛЕСО
   ========================================================= */
/* margin дає кільцю/тіні простір, щоб його не обрізав край попапа.
   Міняйте перше значення (відступ зверху-знизу) під свій декор. */
.wof-stage{position:relative;width:clamp(260px,42vw,340px);aspect-ratio:1;margin:24px auto;pointer-events:none}

.wof-wheel{
  width:100%;height:100%;border-radius:50%;position:relative;
  border:8px solid #fff;
  box-shadow:0 0 0 5px #FDCB17, 0 8px 26px rgba(46,157,99,.28);
  transition:transform 5s cubic-bezier(.17,.67,.18,.99)
}

/* стрілка: на правому ободі колеса, вістрям усередину (вліво) */
.wof-pointer{
  position:absolute;top:50%;right:-4px;transform:translateY(-50%);
  width:0;height:0;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-right:26px solid #FDCB17;            /* колір стрілки (бренд) */
  z-index:6;
  pointer-events:none;
  filter:drop-shadow(-2px 0 2px rgba(0,0,0,.3))
}

/* підписи сегментів: радіально вздовж бісектриси сектора */
.wof-label-wrap{position:absolute;inset:0;transform-origin:50% 50%;pointer-events:none}
.wof-label{
  font-family: 'Kosko', sans-serif;
  position:absolute;top:16%;left:50%;width:clamp(96px,30%,118px);
  text-align:center;line-height:1.15;white-space:pre-line;
  color:#103a26;font-size:13px;font-weight:700;
  text-shadow:0 1px 1px rgba(255,255,255,.5);
  transform-origin:50% 50%
}

/* центр колеса */
.wof-stage::after{
  content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;background:#fff;border-radius:50%;
  transform:translate(-50%,-50%);z-index:4;
  box-shadow:0 0 0 4px #FDCB17, 0 2px 6px rgba(0,0,0,.25)
}

/* =========================================================
   ФОРМА
   ========================================================= */
.wof-form input{
  width:100%;padding:14px 16px;font-size:16px;
  border:2px solid #cfe3d8;border-radius:12px;box-sizing:border-box;margin-bottom:12px;
  font-family:inherit;background:#fff
}
.wof-form input:focus{outline:none;border-color:#2E9D63}

.wof-form button{
  width:100%;padding:15px;font-size:18px;font-weight:800;color:#0e3b27;
  background:#8AD0A8;border:0;border-radius:12px;cursor:pointer;transition:.2s;
  font-family:inherit;letter-spacing:.3px
}
.wof-form button:hover{background:#74c596;color:#0b3120}
.wof-form button:disabled{opacity:.6;cursor:not-allowed}

.wof-error{color:#c0392b;font-size:14px;margin:8px 0 0;min-height:18px}

.wof-disclaimer{
  font-size:13.5px;line-height:1.5;color:#7a857f;margin:6px 0 0;text-align:center
}

/* =========================================================
   РЕЗУЛЬТАТ
   ========================================================= */
.wof-result{text-align:center}
.wof-result .wof-win{font-size:20px;font-weight:700;margin:0 0 6px;color:#2E9D63}
.wof-code{
  display:inline-block;font-size:26px;font-weight:800;letter-spacing:2px;
  background:#eaf7f0;color:#EA3C97;padding:12px 24px;border-radius:12px;
  border:2px dashed #EA3C97;margin:6px 0
}
.wof-note{font-size:14px;color:#666;margin-top:10px}

/* =========================================================
   МОБІЛЬНА ВЕРСІЯ: один стовпець, заголовок зверху
   ========================================================= */
@media (max-width:780px){
  .wof-wrap{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "stage"
      "panel"
      "note";
    justify-items:center;
    column-gap:0;
    row-gap:18px;
    max-width:440px;
  }
  .wof-head{text-align:center}
  .wof-title{font-size:23px; text-align:center;}
  .wof-sub{font-size:15.5px}
  .wof-panel{width:100%}
  .wof-stage{width:min(82vw,320px)}
}

@media (max-width:400px){
  .wof-label{font-size:11.5px}
  .wof-title{font-size:21px; text-align:center;}
}