:root{
  --cream:#fff7e8;
  --sand:#f3d9b1;
  --gold:#e0aa3e;
  --gold-light:#f2c14e;
  --gold-dark:#9a6822;
  --teal:#73b5a6;
  --teal-dark:#1f6f5f;
  --red:#a62f35;
  --terracotta:#d95d39;
  --ink:#54211f;
  --shadow:rgba(89,35,30,0.28);
}

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

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:'Cairo', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 50% -10%, #fffaf0 0%, #f7e4c2 48%, #eebf85 100%);
  overflow-x:hidden;
  position:relative;
}

button, a{
  -webkit-tap-highlight-color:transparent;
  outline:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  user-drag:none;
  touch-action:manipulation;
}
button{
  /* убираем нативный вид кнопки (iOS/Android иначе показывают свой прямоугольный фон
     под нашим скруглённым, отсюда были видны "углы" под формой кнопки) */
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-clip:padding-box;
}
a{
  -khtml-user-drag:none;
}
button:focus-visible, a:focus-visible{
  outline:3px solid var(--teal-dark);
  outline-offset:3px;
}

/* ---------- background decoration ---------- */

.morocco-bg{
  position:fixed;
  left:0; right:0; bottom:0;
  height:44vh;
  background:
    linear-gradient(45deg, rgba(166,47,53,.09) 25%, transparent 25%) 0 0/32px 32px,
    linear-gradient(-45deg, rgba(31,111,95,.08) 25%, transparent 25%) 0 0/32px 32px,
    linear-gradient(to top, #e8b875 0%, transparent 100%);
  z-index:0;
  pointer-events:none;
}

.arches{
  position:fixed;
  left:0; right:0; bottom:0;
  height:24vh;
  z-index:0;
  pointer-events:none;
  opacity:0.55;
}

.arch{
  position:absolute;
  bottom:0;
  width:18vw;
  height:16vw;
  min-width:110px;
  min-height:100px;
  border:10px solid var(--red);
  border-bottom:0;
  border-radius:50% 50% 0 0;
  opacity:0.22;
}
.arch::after{
  content:"";
  position:absolute;
  inset:12px;
  border:4px solid var(--teal-dark);
  border-bottom:0;
  border-radius:50% 50% 0 0;
}
.a1{ left:4%; }
.a2{ left:39%; transform:scale(.78); opacity:.16; }
.a3{ right:5%; transform:scale(1.15); opacity:.25; }

.sun{
  position:fixed;
  top:6%;
  right:10%;
  width:110px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff7df, var(--gold-light) 55%, var(--terracotta) 100%);
  box-shadow:0 0 80px 30px rgba(224,170,62,.45);
  z-index:0;
}

.glyph-row{
  position:relative;
  z-index:1;
  text-align:center;
  letter-spacing:14px;
  font-size:20px;
  color:var(--red);
  opacity:0.55;
  padding:8px 0;
  user-select:none;
}

/* ---------- layout ---------- */

.stage{
  position:relative;
  z-index:1;
  max-width:700px;
  margin:0 auto;
  padding:4px 20px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.title-block{
  text-align:center;
  margin-bottom:10px;
}

.title-block h1{
  font-family:'Lalezar', sans-serif;
  font-size:clamp(28px, 6vw, 44px);
  margin:6px 0 2px;
  color:var(--red);
  text-shadow:0 2px 0 #fff7e2, 0 4px 14px rgba(169,122,31,0.35);
  letter-spacing:2px;
}
.title-block h1 span{
  color:var(--teal-dark);
}
.subtitle{
  margin:0;
  font-size:14px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.6;
}

/* ---------- wheel ---------- */

.wheel-wrap{
  position:relative;
  width:min(88vw, 520px);
  aspect-ratio:1/1;
  margin:14px 0 16px;
}

.wheel-frame{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  padding:16px;
  background:
    radial-gradient(circle at 30% 25%, #fff7df, var(--gold-light) 38%, var(--terracotta) 76%, var(--red) 100%);
  box-shadow:
    0 18px 40px var(--shadow),
    inset 0 0 0 3px rgba(255,255,255,0.5),
    inset 0 0 24px rgba(169,122,31,0.35);
}

.wheel-frame::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  border:2px dashed rgba(255,247,232,.68);
  pointer-events:none;
}

#wheel{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:0 0 0 4px #fff7e8, 0 0 0 7px var(--red);
  transition: transform 4.6s cubic-bezier(0.14, 0.67, 0.1, 1);
  will-change: transform;
}

.hub{
  position:absolute;
  top:50%; left:50%;
  width:19%;
  height:19%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fffaf0, var(--gold-light) 45%, var(--red) 100%);
  box-shadow:0 4px 10px rgba(140,95,30,0.4), inset 0 0 0 2px #fff3d6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(16px, 3.4vw, 22px);
  color:var(--teal-dark);
  z-index:3;
}

.pointer{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:30px solid var(--red);
  filter:drop-shadow(0 3px 3px rgba(140,95,30,0.5));
  z-index:4;
}
.pointer::after{
  content:"";
  position:absolute;
  top:-32px;
  left:-9px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--teal) 45%, var(--teal-dark) 100%);
  box-shadow:0 0 8px rgba(79,143,134,0.6);
}

.sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}
.spark{
  position:absolute;
  top:50%; left:50%;
  width:8px; height:8px;
  border-radius:50%;
  background:radial-gradient(circle, #fff8e2, var(--gold) 70%);
  opacity:0;
}
@keyframes sparkFly{
  0%{ opacity:1; transform:translate(-50%,-50%) translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(0.2); }
}
.spark.active{
  animation:sparkFly 900ms ease-out forwards;
}

/* ---------- button ---------- */

.spin-wrap{
  max-height:90px;
  opacity:1;
  overflow:hidden;
  transition:max-height 0.6s ease, opacity 0.4s ease, margin 0.6s ease;
}
.spin-wrap.used{
  max-height:0;
  opacity:0;
  margin:0;
  pointer-events:none;
}

.spin-btn{
  position:relative;
  border:none;
  cursor:pointer;
  padding:16px 52px;
  font-family:'Cairo', sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:3px;
  color:#5c3a1e;
  background:linear-gradient(180deg, #fff4d6, var(--gold-light) 44%, var(--terracotta) 100%);
  border-radius:40px;
  overflow:hidden;
  box-shadow:0 10px 22px var(--shadow), inset 0 0 0 2px rgba(255,255,255,0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
}
@media (hover:hover) and (pointer:fine){
  .spin-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 26px var(--shadow), inset 0 0 0 2px rgba(255,255,255,0.7);
    filter:brightness(1.05);
  }
}
.spin-btn:active{
  transform:translateY(1px);
  box-shadow:0 6px 14px var(--shadow), inset 0 0 0 2px rgba(255,255,255,0.6);
}
.spin-btn:disabled{
  cursor:not-allowed;
  filter:grayscale(0.25) brightness(0.95);
  transform:none;
}

/* ---------- result modal ---------- */

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-y:auto;
  background:rgba(76,50,20,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
}
.modal-backdrop.show{
  opacity:1;
  pointer-events:auto;
}

.result-modal{
  position:relative;
  width:min(92vw, 380px);
  margin:auto;
  text-align:center;
  padding:34px 28px 28px;
  border-radius:28px;
  background:
    radial-gradient(circle at 30% 15%, #fffaf0, #f8e7c8 55%, #edc28f 100%);
  box-shadow:
    0 30px 70px rgba(76,50,20,0.45),
    inset 0 0 0 2px rgba(255,255,255,0.6),
    inset 0 0 0 6px rgba(166,47,53,.22);
  transform:scale(0.82) translateY(24px);
  opacity:0;
  transition:transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.modal-backdrop.show .result-modal{
  transform:scale(1) translateY(0);
  opacity:1;
}

.modal-close{
  position:absolute;
  top:12px;
  left:14px;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  overflow:hidden;
  background:rgba(169,122,31,0.15);
  color:var(--ink);
  font-family:'Cairo', sans-serif;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-close:active{
  background:rgba(169,122,31,0.3);
}

.modal-glyph{
  font-size:34px;
  color:var(--teal-dark);
  margin-bottom:4px;
}

.result-label{
  display:block;
  font-size:13px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--teal-dark);
  opacity:0.85;
}
.result-value{
  display:block;
  font-family:'Lalezar', sans-serif;
  font-size:clamp(32px, 9vw, 46px);
  color:var(--red);
  text-shadow:0 2px 0 #fff7e2, 0 6px 18px rgba(169,122,31,0.4);
  margin:4px 0 22px;
}

/* ---------- prize / telegram actions ---------- */

.prize-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.claim-btn{
  display:block;
  width:100%;
  text-decoration:none;
  font-family:'Cairo', sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:1px;
  color:#123c37;
  padding:15px 20px;
  border-radius:36px;
  overflow:hidden;
  background:linear-gradient(180deg, #f3fbf9, var(--teal) 45%, var(--teal-dark) 100%);
  box-shadow:0 10px 22px rgba(79,143,134,0.32), inset 0 0 0 2px rgba(255,255,255,0.65), inset 0 0 0 3px rgba(217,164,65,0.25);
  transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.2s ease;
  animation:claimPulse 2.2s ease-in-out infinite;
}
@media (hover:hover) and (pointer:fine){
  .claim-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
    box-shadow:0 14px 26px rgba(79,143,134,0.4), inset 0 0 0 2px rgba(255,255,255,0.75), inset 0 0 0 3px rgba(217,164,65,0.35);
  }
}
.claim-btn:active{
  transform:translateY(1px);
}

@keyframes claimPulse{
  0%, 100%{ box-shadow:0 10px 22px rgba(79,143,134,0.32), inset 0 0 0 2px rgba(255,255,255,0.65), inset 0 0 0 3px rgba(217,164,65,0.25); }
  50%{ box-shadow:0 10px 30px rgba(79,143,134,0.55), inset 0 0 0 2px rgba(255,255,255,0.85), inset 0 0 0 3px rgba(217,164,65,0.45); }
}

.download-btn{
  display:block;
  width:100%;
  text-decoration:none;
  font-family:'Cairo', sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--gold-dark);
  opacity:0.85;
  padding:11px 18px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(169,122,31,0.45);
  background:rgba(255,255,255,0.35);
  transition:opacity 0.2s ease, background 0.2s ease;
}
@media (hover:hover) and (pointer:fine){
  .download-btn:hover{
    opacity:1;
    background:rgba(255,255,255,0.6);
  }
}
.download-btn:active{
  background:rgba(255,255,255,0.7);
}

/* ---------- mobile ---------- */

@media (max-width:600px){
  .stage{ padding:4px 16px 26px; }
  .wheel-wrap{ width:94vw; max-width:460px; margin:10px 0 14px; }
  .title-block h1{ font-size:clamp(30px, 9vw, 38px); }
  .subtitle{ font-size:14px; letter-spacing:2px; }
}

@media (max-width:480px){
  .glyph-row{ letter-spacing:6px; font-size:13px; padding:6px 0; }

  .spin-btn{ padding:18px 46px; font-size:19px; letter-spacing:2px; }
  .spin-wrap{ max-height:110px; }

  .result-label{ font-size:14px; letter-spacing:3px; }
  .result-value{ font-size:clamp(34px, 11vw, 42px); }

  .claim-btn{
    padding:17px 16px;
    font-size:17px;
  }
  .download-btn{
    padding:12px 16px;
    font-size:13px;
  }
  .prize-actions{ gap:14px; }
  .result-modal{ padding:30px 18px 22px; }
}

/* ---------- 2026 visual refresh ---------- */

:root{
  --night:#163f3a;
  --night-2:#0d2e2b;
  --mint:#dff5ee;
}

html,body{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.95) 0 5%, transparent 22%),
    radial-gradient(circle at 88% 5%, rgba(242,193,78,.34), transparent 27%),
    linear-gradient(165deg, #fffaf0 0%, #f9e8c9 48%, #e9b974 100%);
}

.morocco-bg{
  height:50vh;
  opacity:.72;
  mask-image:linear-gradient(to top, #000 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 100%);
}

.stage{ max-width:720px; padding-top:0; }
.title-block{ margin:0 0 8px; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border:1px solid rgba(31,111,95,.18);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  box-shadow:0 6px 20px rgba(84,33,31,.08);
  color:var(--teal-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
}
.eyebrow::before{ content:"✦"; color:var(--gold-dark); }
.title-block h1{ font-size:clamp(38px, 8vw, 58px); margin:2px 0 -4px; }
.subtitle{ font-size:14px; font-weight:700; letter-spacing:1px; opacity:.72; }

.spin-wrap{
  width:min(94vw, 500px);
  max-height:150px;
  margin:10px 0 4px;
  overflow:visible;
  position:relative;
  z-index:10;
}
.spin-wrap.used{
  max-height:0;
  opacity:0;
  margin:-4px 0 0;
  overflow:hidden;
}
.spin-callout{
  position:relative;
  padding:13px 14px 10px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:28px;
  background:rgba(255,255,255,.62);
  box-shadow:0 18px 44px rgba(84,33,31,.15), inset 0 1px 0 #fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.spin-callout::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border-radius:32px;
  background:linear-gradient(120deg, rgba(242,193,78,.72), rgba(217,93,57,.3), rgba(31,111,95,.42));
  filter:blur(10px);
  opacity:.5;
}
.spin-hint,.spin-note{ display:block; text-align:center; }
.spin-hint{ margin-bottom:8px; font-size:13px; font-weight:800; color:var(--night); }
.spin-note{ margin-top:6px; font-size:10px; font-weight:700; color:rgba(84,33,31,.58); letter-spacing:1px; }
.spin-btn{
  width:100%;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:15px 22px;
  color:#fffdf5;
  background:linear-gradient(135deg, #e1a936 0%, #cf6438 52%, #a62f35 100%);
  border-radius:20px;
  box-shadow:0 12px 24px rgba(166,47,53,.3), inset 0 1px 0 rgba(255,255,255,.42);
  font-size:19px;
  font-weight:900;
  letter-spacing:.4px;
  animation:spinAttention 2s ease-in-out infinite;
}
.spin-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 25%, rgba(255,255,255,.42) 48%, transparent 68%);
  transform:translateX(120%);
  animation:buttonShine 2.8s ease-in-out infinite;
}
.spin-btn span{ position:relative; z-index:1; }
.spin-btn-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(255,255,255,.17);
}
.spin-btn-arrow{ font-size:23px; transition:transform .2s ease; }
.spin-btn:hover .spin-btn-arrow{ transform:translateX(-4px); }
@keyframes spinAttention{
  0%,100%{ transform:translateY(0) scale(1); box-shadow:0 12px 24px rgba(166,47,53,.3), 0 0 0 0 rgba(217,93,57,.2); }
  50%{ transform:translateY(-2px) scale(1.012); box-shadow:0 17px 30px rgba(166,47,53,.36), 0 0 0 9px rgba(217,93,57,0); }
}
@keyframes buttonShine{ 0%,55%{transform:translateX(120%)} 80%,100%{transform:translateX(-120%)} }

.wheel-wrap{ width:min(82vw, 480px); margin:12px 0 14px; }
.spin-status{
  position:absolute;
  top:6px;
  left:50%;
  z-index:12;
  width:max-content;
  max-width:92%;
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  color:#fff;
  background:rgba(22,63,58,.92);
  box-shadow:0 10px 28px rgba(13,46,43,.3);
  font-size:12px;
  font-weight:900;
  text-align:center;
  opacity:0;
  transform:translate(-50%,-14px) scale(.9);
  pointer-events:none;
  transition:opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.spin-status.show{ opacity:1; transform:translate(-50%,0) scale(1); }
.spin-status.tease{ background:linear-gradient(135deg,#c89327,#b84838); animation:statusPop .7s ease both; }
.spin-status.rolling{ background:rgba(22,63,58,.94); }
@keyframes statusPop{
  0%{ transform:translate(-50%,-12px) scale(.82); }
  60%{ transform:translate(-50%,0) scale(1.06); }
  100%{ transform:translate(-50%,0) scale(1); }
}
.wheel-frame{ padding:13px; box-shadow:0 22px 54px rgba(89,35,30,.24), inset 0 0 0 3px rgba(255,255,255,.55); }
.trust-row{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.trust-row span{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  color:var(--teal-dark);
  font-size:11px;
  font-weight:800;
}

.modal-backdrop{ background:rgba(8,31,29,.68); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.result-modal{
  width:min(92vw, 420px);
  padding:26px 24px 22px;
  border-radius:32px;
  background:linear-gradient(160deg, rgba(255,255,255,.98), #fff7e9 48%, #f3d7ac 100%);
  box-shadow:0 34px 90px rgba(7,28,26,.5), inset 0 0 0 1px rgba(255,255,255,.9);
  overflow:hidden;
}
.result-modal::before{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  top:-160px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(242,193,78,.32);
  filter:blur(3px);
}
.modal-glyph{
  position:relative;
  width:56px;
  height:56px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(145deg, var(--gold-light), var(--terracotta));
  box-shadow:0 12px 28px rgba(217,93,57,.28), inset 0 1px 0 rgba(255,255,255,.55);
  transform:rotate(8deg);
}
.modal-glyph span{ transform:rotate(-8deg); }
.result-label{ font-size:12px; font-weight:900; letter-spacing:2px; }
.result-value{ margin:0 0 2px; font-size:clamp(38px, 10vw, 50px); line-height:1.15; }
.result-copy{ margin:0 auto 14px; max-width:320px; color:rgba(84,33,31,.64); font-size:12px; font-weight:700; line-height:1.55; }
.result-copy strong{ color:var(--terracotta); font-weight:900; }
.promo-card{
  margin:0 0 12px;
  padding:10px;
  border:1px solid rgba(166,47,53,.14);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,247,232,.72));
  box-shadow:0 8px 20px rgba(84,33,31,.08),inset 0 1px 0 #fff;
}
.promo-label{
  display:block;
  margin-bottom:6px;
  color:var(--teal-dark);
  font-size:10px;
  font-weight:900;
}
.promo-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.promo-code{
  flex:1;
  min-width:0;
  padding:10px 8px;
  border:1px dashed rgba(166,47,53,.32);
  border-radius:12px;
  color:var(--red);
  background:#fffaf2;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:18px;
  letter-spacing:1.2px;
  text-align:center;
  user-select:text;
  -webkit-user-select:text;
}
.copy-promo-btn{
  min-width:76px;
  min-height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 12px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#df7948,var(--red));
  font-family:'Cairo',sans-serif;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.copy-status{
  display:block;
  height:0;
  overflow:visible;
  transform:translateY(2px);
  color:var(--teal-dark);
  font-size:9px;
  font-weight:900;
}
.steps-title{
  display:block;
  margin:0 2px 7px;
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  text-align:right;
}
.promo-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  margin:0 0 12px;
  text-align:right;
}
.promo-steps span{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:4px 6px;
  border-radius:10px;
  background:rgba(31,111,95,.055);
  color:rgba(84,33,31,.75);
  font-size:11px;
  font-weight:700;
}
.promo-steps i{ font-style:normal; line-height:1.35; }
.promo-steps b{
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  flex:0 0 auto;
  border-radius:50%;
  color:#fff;
  background:var(--teal-dark);
  font-size:10px;
}
.claim-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:60px;
  padding:14px 16px;
  color:#fff;
  background:linear-gradient(135deg, #259bd7, #1677ba);
  box-shadow:0 14px 30px rgba(22,119,186,.3), inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:18px;
  font-weight:900;
  animation:claimPulseModern 2.2s ease-in-out infinite;
}
.telegram-mark{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  font-size:16px;
}
.claim-arrow{ font-size:20px; }
@keyframes claimPulseModern{
  0%,100%{ box-shadow:0 14px 30px rgba(22,119,186,.3), 0 0 0 0 rgba(37,155,215,.2); }
  50%{ box-shadow:0 18px 36px rgba(22,119,186,.4), 0 0 0 8px rgba(37,155,215,0); }
}
.download-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(31,111,95,.2);
  background:rgba(255,255,255,.54);
  padding:10px 14px;
  text-transform:none;
  letter-spacing:0;
  color:var(--teal-dark);
  opacity:1;
  text-align:right;
}
.download-btn strong,.download-btn small{ display:block; }
.download-btn strong{ font-size:12px; line-height:1.25; }
.download-btn small{ margin-top:2px; font-size:10px; opacity:.72; line-height:1.3; }
.download-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 auto;
  border-radius:10px;
  background:var(--mint);
  font-size:18px;
  font-weight:900;
}

@media (max-width:600px){
  .stage{ padding:2px 14px 24px; }
  .wheel-wrap{ width:min(88vw, 430px); margin-top:11px; }
  .spin-wrap{ margin-top:8px; }
  .trust-row{ margin-top:0; }
}
@media (max-width:420px){
  .glyph-row{ opacity:.3; height:22px; overflow:hidden; padding:3px 0; }
  .sun{ width:72px; height:72px; top:4%; right:5%; }
  .stage{ padding:0 10px 18px; }
  .title-block{ margin-bottom:3px; }
  .eyebrow{ padding:4px 10px; font-size:9px; }
  .title-block h1{ font-size:35px; line-height:1.08; margin-top:1px; }
  .subtitle{ font-size:12px; }
  .spin-callout{ padding:10px 11px 8px; border-radius:23px; }
  .spin-btn{ min-height:56px; padding:12px 13px; font-size:16px; gap:8px; border-radius:17px; }
  .spin-btn-icon{ width:29px; height:29px; }
  .spin-hint{ font-size:12px; margin-bottom:6px; }
  .spin-note{ margin-top:4px; }
  .wheel-wrap{ width:87vw; margin-top:8px; }
  .spin-status{ top:2px; max-width:96%; padding:8px 11px; font-size:10px; }
  .trust-row span{ padding:5px 9px; font-size:9px; }
  .result-modal{ width:min(94vw, 390px); padding:24px 15px 16px; border-radius:26px; }
  .modal-glyph{ width:52px; height:52px; border-radius:17px; margin-bottom:7px; }
  .result-value{ font-size:37px; }
  .result-copy{ margin-bottom:11px; font-size:11px; }
  .promo-card{ padding:9px; margin-bottom:9px; }
  .promo-code{ font-size:16px; }
  .copy-promo-btn{ min-width:70px; padding:7px 9px; }
  .promo-steps{ gap:4px; margin-bottom:10px; }
  .claim-btn{ font-size:15px; }
  .prize-actions{ gap:10px; }
  .download-btn{ padding:9px 12px; }
}

@media (max-width:360px){
  .spin-wrap{ width:96vw; }
  .spin-hint{ font-size:11px; }
  .spin-btn{ font-size:15px; }
  .wheel-wrap{ width:90vw; }
  .result-value{ font-size:34px; }
}

@media (prefers-reduced-motion:reduce){
  .spin-btn,.spin-btn::after,.claim-btn{ animation:none; }
}