:root{
  --bg:#0B1130;
  --bg-panel:#121A44;
  --bg-panel-2:#182357;
  --primary:#2E5EFF;
  --primary-dim:#1B3FCC;
  --red:#FF3B3B;
  --gold:#FFC93C;
  --yellow:#FFE500;
  --white:#F5F7FF;
  --muted:#8892B0;
  --line:rgba(245,247,255,0.08);
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
/* A solid colour, not just the gradient: iPhone Safari tints the areas behind
   the status bar and toolbars from it, and falls back to white without one. */
html,body{height:100%; background-color:var(--bg);}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% 0%, #16205a 0%, var(--bg) 55%) var(--bg);
  color:var(--white);
  font-family:'Space Grotesk', system-ui, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px 12px;
}
.device{
  width:100%;
  max-width:400px;
  height:min(820px, 92vh);
  background:linear-gradient(180deg, var(--bg-panel) 0%, var(--bg) 100%);
  border-radius:36px;
  border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.screen{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  /* Generous bottom padding keeps the last button well clear of the banner ad below. */
  padding:28px 22px 56px;
  position:relative;
  z-index:1;
}
/* Wordmark */
.wordmark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-weight:700;
  letter-spacing:0.1em;
  font-size:23px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:18px;
  position:relative;
  z-index:2;
}
.wordmark b{
  color:var(--white);
  font-size:23px;
  letter-spacing:0.1em;
}
.wordmark .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 14px var(--primary);
}
.wordmark-lg{
  text-align:center;
  font-size:34px;
  font-weight:700;
  letter-spacing:0.02em;
  margin:6px 0 4px;
}
.wordmark-lg span{ color: var(--primary); }
.subtitle{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  margin-bottom:28px;
  line-height:1.5;
}

/* Setup screen */
#screen-setup{ overflow-y:auto; }
#screen-solo-summary{ overflow-y:auto; }
.setup-body{ display:flex; flex-direction:column; gap:22px; }
.field-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
  font-weight:600;
  margin-bottom:10px;
}
.stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 10px 10px 18px;
}
.stepper-value{
  font-family:'JetBrains Mono', monospace;
  font-size:26px;
  font-weight:700;
}
.stepper-btns{ display:flex; gap:8px; }
.stepper-btn{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  color:var(--white);
  font-size:20px;
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  user-select:none;
}
.stepper-btn:active{ background:var(--primary); border-color:var(--primary); }

.names-list{ display:flex; flex-direction:column; gap:10px; }
.name-input{
  width:100%;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px 16px;
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  font-size:15px;
  font-weight:500;
}
.name-input::placeholder{ color:var(--muted); }
.name-input:focus{ outline:none; border-color:var(--primary); }
.field-error{ color:var(--red); font-size:12px; margin-top:6px; font-weight:600; }

.primary-btn{
  margin-top:28px;
  width:100%;
  padding:18px;
  border-radius:18px;
  border:none;
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dim) 100%);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.02em;
  cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(46,94,255,0.6);
}
.primary-btn:active{ transform:translateY(1px); }
.ghost-btn{
  width:100%;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  margin-top:10px;
}

/* Turn screen */
.turn-header{ text-align:center; margin-bottom:6px; }
.quit-btn{
  position:absolute;
  top:14px;
  right:16px;
  z-index:3;
  width:30px;
  height:30px;
  border:none;
  background:none;
  color:var(--muted);
  opacity:0.4;
  font-size:14px;
  cursor:pointer;
  line-height:1;
}
.quit-btn:active{ opacity:0.8; }
.turn-player{ font-size:20px; font-weight:700; line-height:1.35; padding:2px 0; }
.turn-progress{ color:var(--white); opacity:0.85; font-size:16px; font-weight:600; margin-top:6px; letter-spacing:0.02em; }
.turn-progress .turn-score{ color:var(--yellow); font-family:'JetBrains Mono', monospace; font-weight:700; }
.turn-progress.note{ color:var(--muted); opacity:1; font-size:13px; font-weight:500; line-height:1.4; }
/* One dot per go: done ones take their result's colour, the current one glows. */
.go-pips{ display:flex; justify-content:center; gap:7px; margin-top:12px; }
.go-pips:empty{ display:none; }
.go-pip{ width:10px; height:10px; border-radius:50%; background:rgba(245,247,255,0.14); }
.go-pip.current{ background:var(--white); box-shadow:0 0 10px rgba(245,247,255,0.7); }
.subtitle-strong{ color:var(--white); }

.timer-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
}
.timer-digits{
  font-family:'JetBrains Mono', monospace;
  font-weight:800;
  font-size:56px;
  letter-spacing:0.02em;
  font-variant-numeric: tabular-nums;
  color:var(--white);
  text-shadow:0 0 30px rgba(46,94,255,0.35);
}
.timer-target{ color:var(--muted); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; }

.tap-btn{
  width:220px; height:220px;
  border-radius:50%;
  border:none;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  background: radial-gradient(circle at 35% 30%, #4d78ff, var(--primary) 60%, var(--primary-dim) 100%);
  box-shadow:0 0 0 8px rgba(46,94,255,0.12), 0 20px 50px -10px rgba(46,94,255,0.55);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:0.06em;
  cursor:pointer;
  position:relative;
  transition: box-shadow 0.2s ease;
}
.tap-btn.running{
  animation: breathe 1.1s ease-in-out infinite;
  background: radial-gradient(circle at 35% 30%, #ff6a6a, var(--red) 60%, #c22 100%);
  box-shadow:0 0 0 8px rgba(255,59,59,0.14), 0 20px 50px -10px rgba(255,59,59,0.55);
}
.tap-btn.locked{ opacity:0.85; }
@keyframes breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}
.tap-btn:active{ transform:scale(0.97); }

/* Result screen */
.result-screen{ align-items:center; text-align:center; justify-content:center; }
.tier-flash{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 38%, var(--tier-color, var(--primary)) 0%, transparent 62%);
  opacity:0.35;
  animation: flash-in 0.6s ease-out;
  z-index:0;
}
@keyframes flash-in{
  0%{ opacity:0; }
  30%{ opacity:0.5; }
  100%{ opacity:0.25; }
}
.flash-white{
  position:absolute; inset:0;
  background:#fff;
  opacity:0;
  z-index:2;
  pointer-events:none;
  animation: white-pop 0.35s ease-out forwards;
}
@keyframes white-pop{
  0%{ opacity:0.9; }
  100%{ opacity:0; }
}
@keyframes shake{
  0%,100%{ transform:translate(0,0); }
  15%{ transform:translate(-6px,2px); }
  30%{ transform:translate(6px,-3px); }
  45%{ transform:translate(-5px,3px); }
  60%{ transform:translate(5px,-2px); }
  75%{ transform:translate(-3px,2px); }
  90%{ transform:translate(3px,-1px); }
}
.device.shake{ animation: shake 0.45s ease-in-out; }
.ray{
  position:absolute;
  top:50%; left:50%;
  width:3px; height:120px;
  margin:-60px 0 0 -1.5px;
  background:linear-gradient(180deg, var(--tier-color, #FFC93C), transparent);
  transform-origin:50% 100%;
  opacity:0;
  animation: ray-shoot 0.7s ease-out forwards;
}
@keyframes ray-shoot{
  0%{ opacity:0.9; transform:translateY(0) scaleY(0.3) rotate(var(--rayrot)); }
  100%{ opacity:0; transform:translateY(-40px) scaleY(1.4) rotate(var(--rayrot)); }
}
.tier-label{
  font-size:40px;
  font-weight:700;
  letter-spacing:0.01em;
  margin-top:18px;
  animation: pop-in-v2 0.55s cubic-bezier(.2,1.6,.35,1);
  color: var(--tier-color, var(--white));
}
@keyframes pop-in-v2{
  0%{ transform:scale(0.3) rotate(-6deg); opacity:0; }
  55%{ transform:scale(1.18) rotate(3deg); opacity:1; }
  75%{ transform:scale(0.96) rotate(-1deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
.result-time{
  font-family:'JetBrains Mono', monospace;
  font-size:44px;
  font-weight:700;
  margin-top:14px;
}
.result-margin{
  color:var(--muted);
  font-size:14px;
  margin-top:8px;
  letter-spacing:0.03em;
}
.result-points{
  color:var(--yellow);
  font-family:'JetBrains Mono', monospace;
  font-size:16px;
  font-weight:700;
  margin-top:10px;
}
.result-actions{
  width:100%;
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative; z-index:1;
}
.share-btn{
  width:100%;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  color:var(--white);
  font-family:'Space Grotesk', sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.confetti{
  position:absolute;
  width:9px; height:9px;
  top:38%; left:50%;
  animation: confetti-burst 1.6s cubic-bezier(.15,.6,.35,1) forwards;
  z-index:0;
}
.confetti.round{ border-radius:50%; }
@keyframes confetti-burst{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  55%{ opacity:1; }
  100%{ transform:translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--rot)); opacity:0; }
}
.confetti-rest{
  position:absolute;
  width:7px; height:7px;
  opacity:0;
  z-index:0;
  animation: confetti-settle 0.7s ease-out forwards;
}
.confetti-rest.round{ border-radius:50%; }
@keyframes confetti-settle{
  0%{ opacity:0; transform:translateY(-8px) rotate(0deg); }
  100%{ opacity:0.5; transform:translateY(0) rotate(var(--rot)); }
}

/* Leaderboard */
.lb-list{ display:flex; flex-direction:column; gap:6px; flex:1; overflow-y:auto; position:relative; z-index:2; }
.lb-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 14px;
}
.lb-row.winner, .lb-row.last-row{
  margin-top:12px;
  padding:18px 18px;
}
.lb-row.winner .lb-name, .lb-row.last-row .lb-name{ font-size:19px; font-weight:800; }
.lb-row.winner .lb-time, .lb-row.last-row .lb-time{ font-size:19px; font-weight:800; }
.lb-row.winner .lb-rank, .lb-row.last-row .lb-rank{ font-size:17px; }
.lb-row.winner{
  border-color:var(--gold);
  background:linear-gradient(90deg, rgba(255,201,60,0.12), rgba(255,201,60,0.03));
}
.lb-tag{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:6px;
  margin-top:5px;
}
.lb-row.winner .lb-tag{ background:rgba(255,201,60,0.2); color:var(--gold); }
.lb-row.last-row .lb-tag{ background:rgba(255,59,59,0.2); color:#FF8A8A; }
.lb-unlucky{
  font-size:11px;
  font-weight:700;
  color:#FF8A8A;
  margin-top:2px;
}
.lb-rank{
  font-family:'JetBrains Mono', monospace;
  font-weight:800;
  font-size:15px;
  width:22px;
  color:var(--muted);
}
.lb-row.winner .lb-rank{ color:var(--gold); }
.lb-name{ flex:1; font-weight:600; font-size:14px; line-height:1.35; padding:1px 0; }
.lb-time{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:14px; }

.footer-actions{ display:flex; gap:10px; margin-top:18px; position:relative; z-index:2; }
.footer-actions > button{ flex:1; margin-top:0; width:auto; }

.hidden{ display:none !important; }

/* Mode select */
.mode-options{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.mode-btn{
  width:100%;
  padding:24px 22px;
  border-radius:22px;
  border:1px solid var(--line);
  background:var(--bg-panel-2);
  color:var(--white);
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.mode-btn-title{ font-size:19px; font-weight:700; }
.mode-btn-sub{ font-size:13px; color:var(--muted); line-height:1.4; }
.mode-btn.solo{ border-color:rgba(46,94,255,0.4); background:linear-gradient(135deg, rgba(46,94,255,0.14), rgba(46,94,255,0.02)); }
.mode-btn.multi{ border-color:rgba(255,229,0,0.45); background:linear-gradient(135deg, rgba(255,229,0,0.16), rgba(255,229,0,0.02)); }
.mode-btn:active{ transform:translateY(1px); }

.cta-line{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin-bottom:12px;
  font-weight:500;
}

/* Solo summary */
.best-line{ text-align:center; color:var(--muted); font-size:13px; margin-top:6px; }
.best-line b{ color:var(--white); font-family:'JetBrains Mono', monospace; }

.session-score-hero{ text-align:center; margin:6px 0 16px; }
.session-score-label{ font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); font-weight:600; }
.session-score-value{
  font-family:'JetBrains Mono', monospace;
  font-size:48px;
  font-weight:800;
  color:var(--yellow);
  margin-top:4px;
  animation: pop-in-v2 0.55s cubic-bezier(.2,1.6,.35,1);
}

.redemption-banner{
  background:linear-gradient(135deg, rgba(255,201,60,0.14), rgba(255,201,60,0.03));
  border:1px solid rgba(255,201,60,0.35);
  border-radius:16px;
  padding:14px 16px;
  margin:0 0 18px;
  text-align:center;
}
.redemption-text{ font-size:13px; color:var(--white); margin-bottom:10px; font-weight:600; line-height:1.4; }
.redemption-btn{
  width:100%;
  padding:13px;
  border-radius:14px;
  border:none;
  background:linear-gradient(180deg, var(--gold), #E0A82A);
  color:#1a1200;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}
.redemption-btn:active{ transform:translateY(1px); }

.cohort-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
  font-weight:600;
  margin:22px 0 4px;
  text-align:center;
}
.cohort-standing{
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  font-weight:700;
  color:#5B8CFF;
  margin-bottom:10px;
}
.cohort-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px 14px;
}
.cohort-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 2px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--muted);
  line-height:1.3;
}
.cohort-rank{ width:34px; }
.cohort-name{ flex:1; }
.cohort-row.me{
  background:rgba(46,94,255,0.16);
  border-radius:8px;
  padding:7px 8px;
  color:var(--white);
  font-weight:700;
}
.cohort-note{
  text-align:center;
  font-size:10px;
  color:var(--muted);
  margin:8px 4px 4px;
  font-style:italic;
  line-height:1.4;
}
/* Leaderboard badges */
.lb-row.last-row{
  border-color:rgba(255,59,59,0.4);
  background:linear-gradient(90deg, rgba(255,59,59,0.16), rgba(255,59,59,0.03));
}
.lb-row.last-row .lb-rank{ color:#FF8A8A; }

/* Share fallback modal */
.share-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.65);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
  padding:24px;
}
.share-modal{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  max-width:340px;
  width:100%;
}
.share-modal-title{ font-weight:700; font-size:15px; margin-bottom:4px; }
.share-modal-sub{ color:var(--muted); font-size:12px; margin-bottom:12px; }
.share-modal textarea{
  width:100%;
  height:100px;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--white);
  padding:12px;
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  resize:none;
}
.share-modal .modal-actions{ display:flex; gap:10px; margin-top:14px; }
.share-modal .modal-actions button{ flex:1; margin-top:0; }

.ad-banner{
  flex-shrink:0;
  background:var(--bg-panel-2);
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px 0 4px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
}
.ad-label{ font-size:9px; letter-spacing:0.12em; opacity:0.7; margin-bottom:3px; }
.ad-banner .ad-stub{
  height:50px;
  display:flex;
  align-items:center;
  border:1px dashed var(--line);
  padding:0 10px;
  border-radius:6px;
}

.settings-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:16px;
}
.remove-ads-btn{
  width:100%;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,201,60,0.35);
  background:rgba(255,201,60,0.07);
  color:var(--gold);
  font-family:'Space Grotesk', sans-serif;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.remove-ads-btn.active{
  border-color:rgba(46,94,255,0.35);
  background:rgba(46,94,255,0.08);
  color:#8CA8FF;
}
.legal-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 16px;
  font-size:12px;
}
.copyright{ font-size:11px; color:var(--muted); opacity:0.7; }
.legal-links a{
  color:var(--muted);
  text-decoration:none;
  letter-spacing:0.02em;
}
.legal-links a:active{ color:var(--white); }

/* Hover states — desktop/mouse only, never applied on touch */
@media (hover:hover) and (pointer:fine){
  .primary-btn{ transition:filter 0.15s ease, transform 0.15s ease; }
  .primary-btn:hover{ filter:brightness(1.1); cursor:pointer; }

  .ghost-btn{ transition:background 0.15s ease, border-color 0.15s ease; }
  .ghost-btn:hover{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.2); }

  .stepper-btn{ transition:background 0.15s ease, border-color 0.15s ease; }
  .stepper-btn:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.25); }

  .mode-btn{ transition:transform 0.15s ease, box-shadow 0.15s ease; }
  .mode-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(0,0,0,0.5); }

  .tap-btn{ transition:box-shadow 0.2s ease, transform 0.15s ease; }
  .tap-btn:hover{ box-shadow:0 0 0 8px rgba(46,94,255,0.2), 0 24px 60px -10px rgba(46,94,255,0.65); }
  .tap-btn.running:hover{ box-shadow:0 0 0 8px rgba(255,59,59,0.2), 0 24px 60px -10px rgba(255,59,59,0.65); }

  .share-btn{ transition:background 0.15s ease; }
  .share-btn:hover{ background:rgba(255,255,255,0.07); }

  .remove-ads-btn{ transition:background 0.15s ease; }
  .remove-ads-btn:hover{ background:rgba(255,201,60,0.12); }
  .remove-ads-btn.active:hover{ background:rgba(46,94,255,0.14); }

  .redemption-btn{ transition:filter 0.15s ease; }
  .redemption-btn:hover{ filter:brightness(1.07); }

  .quit-btn{ transition:opacity 0.15s ease; }
  .quit-btn:hover{ opacity:0.75; }

  .legal-links a{ transition:color 0.15s ease; }
  .legal-links a:hover{ color:var(--white); }

  .name-input:hover{ border-color:rgba(255,255,255,0.22); }
}

/* On a real phone the app fills the viewport instead of drawing a device frame */
@media (max-width: 480px){
  body{ padding:0; }
  .device{
    max-width:none;
    height:100vh;
    height:100dvh;
    border-radius:0;
    border:none;
    box-shadow:none;
  }
  .screen{ padding-top:calc(28px + env(safe-area-inset-top)); }
  .quit-btn{ top:calc(14px + env(safe-area-inset-top)); }
  .ad-banner{ padding-bottom:calc(4px + env(safe-area-inset-bottom)); }
}

/* Placeholder overlay for interstitial / rewarded ads until a real SDK is wired in */
.ad-stub-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  z-index:60;
  color:var(--muted);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
}
.ad-stub-backdrop .ad-stub-box{
  border:1px dashed var(--line);
  border-radius:12px;
  padding:40px 30px;
  text-align:center;
}
.ad-stub-backdrop button{ width:auto; padding:10px 22px; margin-top:0; }