:root {
  --bg:#0b1320;
  --ink:#e8f1ff;
  --accent:#46e38a;
  --hud-top:rgba(6, 20, 39, .86);
  --hud-bottom:rgba(8, 25, 44, .66);
  --hud-line:rgba(205, 255, 233, .18);
  --hud-muted:rgba(226, 255, 243, .76);
  --hud-radius:14px;
}
*{box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
img, a, button, canvas { -webkit-user-drag: none; }
html,body{
  height:100%; margin:0; background:#0b1320; color:var(--ink);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body[data-ready="0"] canvas{ opacity:0 }
body[data-ready="1"] canvas{ opacity:1; transition:opacity .22s ease }
body[data-ready="0"] .icon-row{ opacity:0; pointer-events:none }
body[data-ready="1"] .icon-row{ opacity:1; transition:opacity .22s ease }

canvas{
  position:fixed; inset:0; width:100vw; height:100vh; display:block; background:#0a2846;
  touch-action:none; -ms-touch-action:none;
}

.wipeout-overlay{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4, 12, 24, .42);
  backdrop-filter:blur(10px);
}

.wipeout-overlay[hidden]{
  display:none !important;
}

.wipeout-card{
  width:min(430px, 100%);
  padding:24px;
  border-radius:var(--hud-radius);
  border:1px solid var(--hud-line);
  background:
    radial-gradient(circle at top, rgba(255, 223, 132, .10), transparent 42%),
    linear-gradient(180deg, var(--hud-top), var(--hud-bottom));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 20px 55px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.06);
  text-align:center;
}

.wipeout-card h2{
  margin:0;
  font-size:clamp(28px, 5vw, 36px);
  line-height:1.05;
  letter-spacing:.01em;
}

.wipeout-card p{
  margin:0;
}

.wipeout-card .wipeout-summary{
  margin-top:22px;
  color:var(--hud-muted);
  font-size:15px;
  letter-spacing:.01em;
}

.wipeout-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:22px 0 14px;
}

.wipeout-actions[data-single-action="1"]{
  grid-template-columns:1fr;
}

.wipeout-btn{
  min-height:48px;
  padding:0 18px;
  border:1px solid rgba(255, 255, 255, .14);
  border-radius:999px;
  background:rgba(255, 255, 255, .08);
  color:var(--ink);
  cursor:pointer;
  font-weight:700;
  letter-spacing:.01em;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.wipeout-btn:hover{
  background:rgba(255, 255, 255, .12);
  border-color:rgba(255, 255, 255, .2);
}

.wipeout-btn:active{
  transform:scale(.99);
}

.wipeout-btn:focus-visible{
  outline:2px solid rgba(255, 224, 138, .95);
  outline-offset:3px;
}

.wipeout-btn.is-primary{
  border-color:rgba(255, 232, 145, .5);
  background:linear-gradient(180deg, rgba(255, 225, 126, .98), rgba(73, 225, 158, .95));
  color:#062114;
  box-shadow:0 10px 22px rgba(73, 225, 158, .22);
}

.icon-row{ position:fixed; top:12px; right:12px; z-index:40; display:flex; align-items:flex-start; gap:10px; }
body[data-overlay-active="1"] #btnPause{ display:none !important; }
.icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px; gap:8px;
  border-radius:12px; border:1px solid var(--hud-line); background:linear-gradient(180deg, var(--hud-top), var(--hud-bottom));
  backdrop-filter:blur(6px); cursor:pointer; color:#fff; text-decoration:none;
  font-weight:600; letter-spacing:.2px; touch-action: manipulation;
}
.icon-btn:hover{ background:#122c4bee }
.icon-btn svg{ width:20px; height:20px }
.icon-row a[href="settings.html"]{
  min-width:48px;
  height:48px;
  padding:0 14px;
  gap:10px;
  border-radius:14px;
  font-size:16.8px;
}
.icon-row a[href="settings.html"] svg{
  width:24px;
  height:24px;
}
.icon-btn.has-unlock-ready{
  border-color:rgba(255, 224, 138, .7);
  box-shadow:0 0 0 1px rgba(255, 224, 138, .18), 0 10px 24px rgba(255, 224, 138, .16);
}
.icon-btn.has-unlock-ready::after{
  content:"!";
  position:absolute;
  top:-8px;
  right:-8px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:2px solid #0b1320;
  background:#ffe08a;
  color:#062114;
  font-size:14px;
  font-weight:900;
  line-height:1;
}
.icon-row a[href="settings.html"].has-unlock-ready::after{
  top:-10px;
  right:-10px;
  width:26px;
  height:26px;
  font-size:17px;
}

@media (max-width: 720px){
  .icon-row{
    top:8px;
    right:8px;
    gap:6px;
  }

  .icon-btn{
    min-width:60px;
    height:60px;
    padding:0 14px;
    gap:0;
    border-radius:18px;
  }

  .icon-btn span{
    display:none;
  }

  .icon-btn svg{
    width:32px;
    height:32px;
  }

  .icon-row a[href="settings.html"]{
    min-width:120px;
    height:120px;
    padding:0 28px;
    border-radius:36px;
  }

  .icon-row a[href="settings.html"] svg{
    width:64px;
    height:64px;
  }

  .icon-btn.has-unlock-ready::after{
    top:-10px;
    right:-10px;
    width:28px;
    height:28px;
    font-size:17px;
  }

  .icon-row a[href="settings.html"].has-unlock-ready::after{
    top:-20px;
    right:-20px;
    width:56px;
    height:56px;
    font-size:34px;
  }

  .wipeout-overlay{
    align-items:center;
    padding:16px;
  }

  .wipeout-card{
    width:min(420px, 100%);
    padding:22px 18px 18px;
    border-radius:22px;
  }

  .wipeout-card h2{
    font-size:clamp(30px, 8vw, 34px);
  }

  .wipeout-actions{
    grid-template-columns:1fr;
  }

  .wipeout-btn{
    min-height:51px;
    font-size:1.125rem;
    line-height:1.1;
  }
}