:root{
      --max-w:420px;
      --accent:#d62828;
      --bg:#f8f8f8;
    }
    *{box-sizing:border-box}
/*--------------------------
    body{
      margin:0;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--bg);
      font-family:Arial, Helvetica, sans-serif;
      padding:28px;
    }
*/
    .wrap{
      width:100%;
      max-width:var(--max-w);
      text-align:center;
      margin:0 auto;
    }

    .wheel-container{
      position:relative;
      width:100%;
      padding-top:100%;
    }

    canvas#wheel{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border-radius:50%;
      display:block;
      background:#fff;
      box-shadow:2px 2px 7px 4px rgba(46,46,46,1);
    }

    .pointer{
      position:absolute;
      left:50%;
      top:-28px;
      transform:translateX(-50%);
      width:0;
      height:0;
      border-left:20px solid transparent;
      border-right:20px solid transparent;
      border-bottom:34px solid var(--accent);
      z-index:40;
      filter:drop-shadow(0 3px 4px rgba(0,0,0,0.18));
    }

    .spin-btn{
      display:inline-block;
      margin-top:14px;
      padding:12px 20px;
      background:var(--accent);
      color:#fff;
      border:none;
      border-radius:10px;
      font-size:18px;
      font-weight:700;
      cursor:pointer;
      box-shadow:2px 2px 7px 4px rgba(46,46,46,1);
    }
    .spin-btn:disabled{opacity:.6; cursor:not-allowed}

    /* по умолчанию скрыт */
    .codes{
      display:none;
      margin-top:14px;
      font-size:16px;
      color:#111;
      line-height:1.45;
      text-align:center;
      word-break:break-word;
      background:#ffffff;
      padding:12px;
      border-radius:10px;
      box-shadow:0 4px 12px rgba(0,0,0,0.06);
    }

    .promo-hint {
      margin-top:8px;
      font-size:15px;
      color:#444;
      display:none;
      background:#ffffff;
      padding:12px;
      border-radius:10px;
      box-shadow:0 4px 12px rgba(0,0,0,0.06);
    }

    .overlay{
      position:absolute;
      inset:0;
      border-radius:50%;
      background: rgba(255, 255, 255, 0.8);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:20px;
      box-sizing:border-box;
      transform:scale(.8);
      opacity:0;
      pointer-events:none;
      transition:transform .6s cubic-bezier(.2,.9,.2,1), opacity .6s ease;
      z-index:60;
    }
    .overlay.show{
      transform:scale(1);
      opacity:1;
      pointer-events:auto;
      box-shadow:2px 2px 7px 4px rgba(46,46,46,1);
    }
    .overlay h3{margin:0 0 15px; font-size:18px}
    .overlay .list{font-size:16px; line-height:1.45; color:#222; text-align:center}

    .promo {
      font-weight: bold;
      color: #db3029;
    }
    
    #overlay h3{
    	color:#2e2e2e !important;
    }

    @media (max-width:420px){
      .pointer{top:-20px; border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:28px solid var(--accent)}
      .spin-btn{font-size:16px; padding:10px 16px}
    }