@font-face {
  font-family: 'Boogaloo';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/boogaloo/v22/kmK-Zq45GAvOdnaW6x1F_SrQo_1K.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDFwmdTo3iQ.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLwmdTo3iQ.woff2') format('woff2');
  font-display: swap;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; touch-action:manipulation; }
body {
  background: #0a0a1a;
  background-image: radial-gradient(ellipse at 50% 0%, #1e0a40 0%, #0a0a1a 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  user-select: none;
  overflow: hidden;
}

#title {
  font-family: 'Boogaloo', 'Arial Rounded MT Bold', Arial, sans-serif;
  font-size: clamp(18px, 6vw, 32px);
  color: #f0a500;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(240,165,0,0.8);
  margin-bottom: 8px;
  animation: titlePulse 2s ease-in-out infinite;
}
@keyframes titlePulse {
  0%,100% { text-shadow: 0 0 20px rgba(240,165,0,0.7), 0 0 40px rgba(240,165,0,0.3); }
  50%     { text-shadow: 0 0 32px rgba(240,165,0,1),   0 0 64px rgba(240,165,0,0.5); }
}

#wrap {
  position: relative;
  width: 100%;
  max-width: 820px;
  border-radius: clamp(0px, 2vw, 16px);
  overflow: hidden;
  box-shadow: 0 0 0 3px #f0a500, 0 0 30px rgba(240,165,0,0.4), 0 16px 60px rgba(0,0,0,0.8);
}

canvas { display:block; width:100%; height:auto; }

/* ── UI bar ── */
#ui {
  background: linear-gradient(180deg, #181830 0%, #0e0e20 100%);
  border-top: 2px solid #f0a500;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#progress-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
#progress-bar  { display:flex; align-items:center; width:100%; }

.zone-pip {
  width: clamp(22px,6vw,30px); height: clamp(22px,6vw,30px);
  border-radius: 50%; border: 2px solid #444;
  display:flex; align-items:center; justify-content:center;
  font-size: clamp(9px,2.5vw,11px); font-weight:900; color:#555;
  transition: all 0.3s; flex-shrink:0;
}
.zone-pip.reached { border-color:#f0a500; background:rgba(240,165,0,0.2); color:#f0a500; }
.zone-pip.current { border-color:#2ecc71; background:rgba(46,204,113,0.25); color:#2ecc71; box-shadow:0 0 10px rgba(46,204,113,0.6); }
.lane-line { flex:1; height:2px; background:#333; min-width:4px; }
.lane-line.crossed { background:#f0a500; }

.section-label { font-size:clamp(9px,2vw,11px); color:#555; text-transform:uppercase; letter-spacing:1.5px; font-weight:900; margin-bottom:2px; }

/* row with bet + multiplier */
#row2 { display:flex; align-items:center; justify-content:space-around; gap:8px; }

.bet-group { display:flex; flex-direction:column; align-items:center; }
.bet-row { display:flex; align-items:center; background:#0a0a15; border:2px solid #444; border-radius:12px; overflow:hidden; }

.bet-adj {
  background:none; border:none; color:#f0a500;
  font-size:clamp(22px,5.5vw,28px);
  width:clamp(40px,11vw,50px); height:clamp(44px,12vw,52px);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-weight:900; touch-action:manipulation;
}
.bet-adj:active:not(:disabled) { background:#1e1e38; }
.bet-adj:disabled { color:#333; cursor:not-allowed; }

#bet-val { color:#fff; font-size:clamp(17px,4.5vw,22px); font-weight:900; min-width:clamp(60px,15vw,84px); text-align:center; padding:0 4px; }

.mult-group { display:flex; flex-direction:column; align-items:center; }
#mult-val {
  font-family:'Boogaloo','Arial Rounded MT Bold',Arial,sans-serif;
  font-size:clamp(24px,7vw,34px); color:#f0a500;
  text-shadow:0 0 10px rgba(240,165,0,0.5);
  letter-spacing:1px; line-height:1; transition:color 0.3s;
}
@keyframes multBump { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
.bump { animation: multBump 0.3s ease-out; }

/* row with buttons */
#row3 { display:flex; gap:10px; }

#cashout-btn {
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#c8a000,#f0d000);
  color:#1a0f00; border:none; border-radius:14px;
  padding:clamp(10px,3vw,14px) 8px;
  font-size:clamp(12px,3vw,14px); font-weight:900;
  cursor:pointer; text-transform:uppercase; letter-spacing:0.5px;
  transition:transform 0.1s,box-shadow 0.1s,opacity 0.2s;
  box-shadow:0 5px 0 #7a5f00, 0 7px 14px rgba(0,0,0,0.4);
  line-height:1.3; touch-action:manipulation;
}
#cashout-btn:active:not(:disabled) { transform:translateY(3px); box-shadow:0 2px 0 #7a5f00; }
#cashout-btn:disabled { opacity:0.3; cursor:not-allowed; box-shadow:none; }
#cashout-amt { font-size:clamp(16px,4.5vw,20px); font-family:'Boogaloo','Arial Rounded MT Bold',Arial,sans-serif; }

#go-btn {
  flex:1.2;
  background:linear-gradient(145deg,#1e9b4a,#2ecc71);
  color:white; border:none; border-radius:14px;
  padding:clamp(12px,3.5vw,16px) 8px;
  font-size:clamp(24px,7vw,30px); font-weight:900;
  cursor:pointer; text-transform:uppercase; letter-spacing:3px;
  transition:transform 0.1s,box-shadow 0.1s,opacity 0.2s;
  box-shadow:0 5px 0 #0e6b2e, 0 8px 18px rgba(0,0,0,0.4);
  font-family:'Boogaloo','Arial Rounded MT Bold',Arial,sans-serif;
  touch-action:manipulation;
}
#go-btn:active:not(:disabled) { transform:translateY(3px); box-shadow:0 2px 0 #0e6b2e; }
#go-btn:disabled { opacity:0.3; cursor:not-allowed; box-shadow:none; }

/* ── Desktop (≥540px): single row layout ── */
@media (min-width: 540px) {
  #ui {
    flex-direction: row;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  #progress-wrap { flex:1 1 100%; order:0; }
  #row2 { order:1; gap:16px; }
  #row3 { order:2; flex:1; justify-content:flex-end; }
}