*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#0A0A0A;color:#fff;overflow:hidden;overscroll-behavior:none;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;touch-action:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 10px) 16px 0;pointer-events:none}
#bar{height:3px;background:#262626;border-radius:2px;overflow:hidden}
#barFill{height:100%;width:0;background:#fff}
#hudRow{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  font-size:13px;letter-spacing:1.6px;color:#A6A6A6}
#lives{display:flex;gap:6px;width:80px}
#lives i{width:10px;height:10px;border-radius:50%;background:#fff;display:block}
#lives i.gone{background:#2E2E2E}
#km{font-weight:700;color:#fff}
#crates{display:flex;align-items:center;justify-content:flex-end;gap:7px;width:80px}
#crateIcon{width:12px;height:12px;background:#fff;border-radius:2px;display:block}
#crateN{color:#fff}
#hint{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 26px);text-align:center;
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#A6A6A6;pointer-events:none}

.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,10,.78);padding:calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 20px)}
.card{width:100%;max-width:360px;text-align:center}
.lockup{width:74%;max-width:270px;height:auto}
.with{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.with span{font-size:10px;letter-spacing:1.6px;color:#7A7A7A}
.with img{height:26px;width:auto}
.label{font-size:10px;letter-spacing:1.6px;color:#7A7A7A;text-transform:uppercase;
  margin-top:30px;padding-bottom:10px;border-bottom:1px solid #2E2E2E}
.card>.label:first-child{margin-top:0}
h1{font-weight:300;font-size:32px;line-height:1.18;margin-top:18px}
p{color:#A6A6A6;font-size:15px;line-height:1.5;margin-top:12px}
p.stat{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#7A7A7A}
button{display:block;width:100%;margin-top:26px;padding:17px 0;border:0;border-radius:7px;background:#fff;color:#0A0A0A;
  font:700 14px "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:2.4px;text-transform:uppercase;touch-action:manipulation}
button:active{background:#A6A6A6}
button.ghost{margin-top:10px;background:transparent;color:#A6A6A6;border:1px solid #262626}
.fine{margin-top:16px;font-size:11px;color:#5E5E5E}
.stats{display:flex;gap:8px;margin-top:22px}
.stats div{flex:1;background:#161616;border:1px solid #262626;border-radius:7px;padding:14px 4px}
.stats b{display:block;font-size:26px;font-weight:300}
.stats span{display:block;margin-top:4px;font-size:10px;letter-spacing:.8px;color:#7A7A7A;text-transform:uppercase}

#crateBox{width:120px;height:120px;margin:0 auto;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;
  animation:shake 1.1s ease-in-out}
#crateBox img{width:66%;height:auto}
#crateBox.open{animation:pop .35s ease-out forwards}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-7deg)}30%{transform:rotate(7deg)}45%{transform:rotate(-9deg)}
  60%{transform:rotate(9deg)}75%{transform:rotate(-5deg) scale(1.06)}90%{transform:rotate(5deg) scale(1.1)}}
@keyframes pop{to{transform:scale(.5);margin-bottom:-18px}}
#prize{animation:rise .4s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.screen.scroll{overflow-y:auto;align-items:flex-start;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.screen.scroll .card{margin:auto}
.card.left{text-align:left}
input[type=text],input[type=tel]{display:block;width:100%;margin-top:12px;padding:15px 14px;background:#161616;border:1px solid #262626;border-radius:7px;
  color:#fff;font:400 16px "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-user-select:text;user-select:text;outline:0;-webkit-appearance:none;appearance:none}
#fName{margin-top:20px}
input::placeholder{color:#5E5E5E}
input[type=text]:focus,input[type=tel]:focus{border-color:#A6A6A6}
.chipLabel{margin-top:16px;text-align:left;font-size:10px;letter-spacing:1.6px;color:#7A7A7A;text-transform:uppercase}
.chips{display:flex;gap:6px;margin-top:7px}
button.chip{flex:1;width:auto;margin:0;padding:12px 0;background:#161616;color:#A6A6A6;border:1px solid #262626;font-size:12px;letter-spacing:.6px}
button.chip:active{background:#262626}
button.chip.on{background:#fff;color:#0A0A0A;border-color:#fff}
.tick{display:flex;gap:10px;align-items:flex-start;margin-top:18px;text-align:left;font-size:12px;line-height:1.45;color:#A6A6A6}
.tick input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:#fff}
.tick a{color:#fff}
.err{min-height:18px;margin-top:10px;font-size:13px;color:#fff}
form button[type=submit]{margin-top:8px}
button:disabled{background:#5E5E5E}
a.btn{display:block;width:100%;margin-top:26px;padding:17px 0;border-radius:7px;background:#fff;color:#0A0A0A;text-decoration:none;
  font:700 14px "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:2.4px;text-transform:uppercase}
a.btn:active{background:#A6A6A6}
#claim p{font-size:13px}
#claimCode{margin-top:12px;padding:14px;background:#161616;border:1px dashed #5E5E5E;border-radius:7px;font-size:24px;font-weight:700;letter-spacing:4px;
  -webkit-user-select:all;user-select:all}
#claim a.btn{margin-top:12px}
#termsList{margin:18px 0 0 18px;color:#A6A6A6;font-size:14px;line-height:1.5}
#termsList li{margin-bottom:10px}