:root{
  --bg1:#0b1020;
  --bg2:#111a33;
  --card:#0f1730cc;
  --text:#e9eefc;
  --muted:#a8b3d6;
  --accent:#7c5cff;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Lock the whole app height to viewport and avoid scrollbars */
html, body{
  margin:0;
  padding:0;
  overflow:hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  min-height:100vh;
  display:grid;
  place-items:center;

  background:
    radial-gradient(1200px 800px at 20% 20%, #1b2a63 0%, transparent 55%),
    radial-gradient(900px 700px at 80% 70%, #3a1c5d 0%, transparent 55%),
    linear-gradient(120deg, var(--bg1), var(--bg2));
}

/* Prefer modern viewport units to fix mobile browser UI bars */
@supports (height: 100dvh){
  body{ min-height:100dvh; }
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.08;
  pointer-events:none;
  mix-blend-mode:overlay;
  z-index:1;
}

/* Floating blobs */
.blob{
  position:absolute;
  width:420px; height:420px;
  filter: blur(40px);
  opacity:.55;
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  animation: float 10s ease-in-out infinite;
  z-index:0;
}
.blob.b1{
  left:-120px; top:-120px;
  background:
    radial-gradient(circle at 30% 30%, #7c5cff, transparent 60%),
    radial-gradient(circle at 70% 60%, #2ee9a6, transparent 55%);
  animation-duration: 12s;
}
.blob.b2{
  right:-140px; bottom:-140px;
  background:
    radial-gradient(circle at 35% 35%, #ff4fd8, transparent 55%),
    radial-gradient(circle at 70% 60%, #4fd1ff, transparent 55%);
  animation-duration: 14s;
  animation-delay: -3s;
}
@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%{ transform: translate3d(30px,-18px,0) rotate(8deg) scale(1.05); }
}

/* Maintenance card */
.wrap{
  position:relative;
  z-index:2;
  width:min(860px, 92vw);
  padding: clamp(22px, 4vw, 40px);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  overflow:hidden;
  transform: translateZ(0);
  transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
}

.wrap.hidden{
  opacity:0;
  transform: translate3d(0, 10px, 0) scale(.985);
  filter: blur(8px);
  pointer-events:none;
}

.brand{
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom: 6px;
}

.topline{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.dot{
  width:10px;height:10px;border-radius:999px;
  background: #2ee9a6;
  box-shadow: 0 0 18px #2ee9a6aa;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.5);opacity:.45}
}

h1{
  margin:14px 0 8px;
  font-size: clamp(28px, 4.2vw, 52px);
  line-height:1.05;
}

p{
  margin:0;
  font-size: clamp(15px, 2vw, 18px);
  color:var(--muted);
  line-height:1.6;
  max-width: 60ch;
}

.row{
  margin-top: 22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 14px;
}

.spinner{
  width:16px;height:16px;border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
  border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Buttons */
.btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:12px 16px;
  border-radius: 999px;
  color: var(--text);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(124,92,255,.32), rgba(124,92,255,.12));
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  cursor:pointer;
  font-weight:600;
  letter-spacing:.02em;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn.secondary{
  background: rgba(255,255,255,.06);
  box-shadow:none;
}
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ALWAYS-VISIBLE bottom bar for Help button */
.start-wrap{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:6;

  display:flex;
  align-items:center;
  justify-content:center;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));

  /* subtle bar so you always see it's pinned */
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25));
  pointer-events:none;
}
.start-wrap .btn{
  pointer-events:auto;
}

/* GAME LAYER - lock to viewport with no overflow */
.game{
  position:fixed;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  transform: translate3d(0, 10px, 0) scale(.995);
  filter: blur(10px);
  transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease;
  overflow:hidden;
}
.game.on{
  opacity:1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px);
  pointer-events:auto;
}

/* Desktop card */
.game-card{
  width:min(960px, 96vw);
  background: rgba(15,23,48,.50);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  overflow:hidden;
}

.game-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  gap: 10px;
  flex-wrap: wrap;
}

.top-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  width:36px;
  height:36px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.92);
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight: 900;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09); }
.icon-btn:active{ transform: translateY(0px) scale(.98); }

.modal{
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  padding: 18px;
}
.modal.on{ display: grid; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(12px);
}

.modal-card{
  position:relative;
  width: min(720px, 96vw);
  border-radius: 18px;
  background: rgba(15,23,48,.78);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 25px 90px rgba(0,0,0,.60);
  overflow:hidden;
  transform: translateZ(0);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.modal-title{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(233,238,252,.96);
}

.modal-body{
  padding: 14px 16px 16px;
  color: rgba(168,179,214,.98);
  line-height: 1.6;
  font-size: 14px;
}

.kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.92);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
}

.hr{
  height:1px;
  background: rgba(255,255,255,.08);
  margin: 10px 0;
}

/* dim behind modal */
.game-card.dimmed{
  filter: brightness(.62) saturate(.95);
  transition: filter 180ms ease;
}
.game-card.dimmed canvas{ filter: blur(2px); }

.status{
  font-weight:700;
  color: var(--text);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.hearts{
  display:inline-flex;
  gap:4px;
  align-items:center;
  transform-origin: center;
}
.heart{
  display:inline-block;
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,79,216,.15));
  transform: translateZ(0);
}
.hearts.normal .heart{ color: rgba(255,79,216,.92); }
.hearts.boss   .heart{ color: rgba(124,92,255,.95); }

.hearts.hit{ animation: heartShake 240ms ease-in-out 1; }
.heart.lost{
  animation: heartPop 380ms ease-out 1;
  opacity: .35;
  filter: drop-shadow(0 0 10px rgba(255,79,216,.25));
}
.hearts.levelup{ animation: heartPulse 520ms ease-in-out 1; }

@keyframes heartShake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  50%{transform:translateX(3px)}
  75%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}
@keyframes heartPop{
  0%{transform:scale(1); opacity:1}
  55%{transform:scale(1.55); opacity:.95}
  100%{transform:scale(.75); opacity:.25}
}
@keyframes heartPulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.35)}
  100%{transform:scale(1)}
}

.micro{
  font-size: 13px;
  color: var(--muted);
  opacity: .9;
}

/* Canvas */
canvas{
  display:block;
  width: 100%;
  height: auto;
  background:
    radial-gradient(900px 420px at 50% 20%, rgba(124,92,255,.20) 0%, transparent 60%),
    radial-gradient(900px 420px at 30% 70%, rgba(46,233,166,.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,14,26,.65), rgba(10,14,26,.25));
  touch-action: none;
  cursor: crosshair;
}

.game-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .blob, .dot, .spinner { animation: none !important; }
}

/* ---------------- MOBILE: no scroll + center card + game fullscreen ---------------- */
@media (max-width: 700px), (pointer: coarse){

  /* Reduce blob noise + avoid weird scroll artifacts */
  .blob{ opacity:.42; }

  /* Center maintenance card and ensure it never exceeds viewport */
  .wrap{
    width: calc(100vw - 24px);
    max-width: 560px;
    padding: 18px;
    border-radius: 16px;
    margin-bottom: calc(64px + env(safe-area-inset-bottom)); /* space for fixed start bar */
  }

  /* Fullscreen game card */
  .game.on{ place-items: stretch; }

  .game-card{
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
/*    backdrop-filter: none; */
    overflow: hidden;

    display:flex;
    flex-direction:column;
    min-height: 0;
  }

  .game-top{
 /*   padding: calc(10px + env(safe-area-inset-top)) 12px 10px; */
    flex: 0 0 auto;
  }

  /* KEY: canvas fills remaining space without overflow */
  canvas{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .game-bottom{
    flex: 0 0 auto;
/*    padding: 10px 12px;  */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  /* Help modal scroll */
  .modal{ padding: 12px; }
  .modal-card{
    width: 96vw;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .modal-body{
    max-height: calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100svh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Button bar on mobile: tighter */
  .start-wrap{
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .btn{ padding: 11px 14px; }
}

/* Landscape: tighter top/bottom */
@media (max-width: 900px) and (orientation: landscape){
  .game-top{ padding: calc(8px + env(safe-area-inset-top)) 10px 8px; }
  .game-bottom{
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .btn{ padding: 10px 12px; }
}

/* Extra small phones */
@media (max-width: 380px){
  .btn{ padding: 10px 12px; }
  .badge{ font-size: 13px; }
  .game-top{ gap: 8px; }
}