/* ── Reset & root ──────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }

.is-hidden { display:none !important; }

:root {
  color-scheme: only light;
  --pink:    #FF9FD8;
  --pink2:   #FF60B8;
  --purple:  #C87FFF;
  --purple2: #A050E0;
  --panel:   #FFF8FF;
  --border:  #DDA8FF;
  --border2: #B070D8;
  --text:    #7050A0;
  --texthi:  #48287A;
}

html { color-scheme: only light; }
html, body { width:100%; min-height:100vh; overscroll-behavior:none; }

body {
  background: linear-gradient(145deg, #FFE4F8 0%, #EDD8FF 45%, #D8ECFF 100%);
  font-family: 'Press Start 2P', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 2rem;
  color: var(--text);
  image-rendering: pixelated;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background-image: radial-gradient(circle, #C898E828 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events:none;
  z-index:0;
}

/* ── Title ─────────────────────────────────────────────── */
.title {
  font-size: 22px;
  color: var(--pink);
  text-shadow: 4px 4px 0 #B050A0, 2px 2px 0 #D87EC0;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 6px;
  z-index: 1;
}

.subtitle {
  font-size: 9px;
  color: var(--purple);
  letter-spacing: 1px;
  margin-bottom: 18px;
  z-index: 1;
}

.top-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  z-index: 1;
}

.icon-btn,
.help-close {
  font-family: 'Press Start 2P', monospace;
  display: grid;
  place-items: center;
  background: #FFF0FF;
  color: var(--texthi);
  border: 3px solid var(--border2);
  box-shadow: 3px 3px 0 var(--border2);
  cursor: pointer;
  touch-action: manipulation;
}

.icon-btn {
  width: 40px;
  height: 38px;
  font-size: 15px;
}

.icon-btn.active {
  background: #FFD8F0;
  color: #FF3080;
  text-shadow: 1px 1px 0 #FFD0E8;
}

.icon-btn:active,
.help-close:active {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 var(--border2);
}

/* ── Stats grid ────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 308px;
  margin-bottom: 12px;
  z-index: 1;
}

.stat-cell {
  background: #FFF0FF;
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--border2);
  padding: 7px 9px 8px;
}

.stat-lbl { font-size:8px; color:var(--purple); letter-spacing:1px; display:block; margin-bottom:5px; }
.stat-val { font-size:15px; color:var(--texthi); display:block; letter-spacing:1px; }
.stat-val.hot { color:#FF4090; text-shadow:2px 2px 0 #FF90B8; }

/* ── Cookie canvas ─────────────────────────────────────── */
.cookie-wrap {
  position: relative;
  cursor: pointer;
  margin: 4px 0 10px;
  z-index: 1;
  display: inline-block;
}

#c {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 4px solid var(--border2);
  box-shadow: 6px 6px 0 var(--border2);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Health bar ────────────────────────────────────────── */
.hp-wrap { width:308px; margin-bottom:8px; z-index:1; }

.hp-head {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--purple);
  margin-bottom: 5px;
}

.hp-track {
  width:100%; height:20px;
  background:#EDD8FF;
  border:3px solid var(--border2);
  box-shadow:3px 3px 0 var(--border2);
  overflow:hidden;
}

.hp-fill {
  height:100%;
  background: linear-gradient(90deg, #80FF98 0%, #FFEE70 50%, #FF9898 100%);
  transition: width 0.07s linear;
}

/* ── Tip text ──────────────────────────────────────────── */
.tip { font-size:9px; color:#C878F0; text-align:center; margin-bottom:10px; min-height:1em; letter-spacing:1px; z-index:1; }
.tip.blink { animation: blinkAnim 0.4s steps(1) infinite; }

@keyframes blinkAnim { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── Restart button ────────────────────────────────────── */
.btn-restart {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 9px 20px;
  background: #FFD8F0;
  color: var(--texthi);
  border: 3px solid var(--border2);
  box-shadow: 3px 3px 0 var(--border2);
  cursor: pointer;
  letter-spacing: 1px;
  margin-bottom: 14px;
  z-index: 1;
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn-restart:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--border2); }

/* ── Leaderboard panel ─────────────────────────────────── */
.records {
  background: var(--panel);
  border: 4px solid var(--border2);
  box-shadow: 4px 4px 0 var(--border2), inset 0 0 0 3px #F8E8FF;
  width: 340px;
  padding: 13px 16px 12px;
  z-index: 1;
}

.rec-title { font-size:12px; color:var(--pink2); margin-bottom:11px; letter-spacing:1px; text-align:center; }

.lb-header {
  display: grid;
  grid-template-columns: 32px 1fr 86px;
  gap: 5px;
  font-size: 8px;
  color: #8E45C8;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 3px;
  letter-spacing: 0;
}
.lb-header span:last-child { text-align:right; }

.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr 86px;
  gap: 5px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 2px dashed #EDD8FF;
  font-size: 11px;
  line-height: 1.35;
}
.lb-row:last-child { border-bottom:none; }
.lb-rank  { color:var(--pink2); }
.lb-name  { color:#3E245F; overflow:hidden; }
.lb-time { text-align:right; color:#3E245F; }
.lb-name,
.lb-time {
  text-shadow: 1px 1px 0 #FFFFFF;
}

.lb-empty {
  font-size: 9px;
  color: var(--purple);
  text-align: center;
  padding: 14px 0 8px;
}

.lb-loading {
  font-size: 9px;
  color: var(--purple);
  text-align: center;
  padding: 14px 0 8px;
  animation: blinkAnim 0.8s steps(1) infinite;
}

/* ── Leaderboard pagination ────────────────────────────── */
.lb-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px solid var(--border);
}

.lb-nav {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 7px 11px;
  background: #FFF0FF;
  color: var(--texthi);
  border: 3px solid var(--border2);
  box-shadow: 2px 2px 0 var(--border2);
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform 0.05s, box-shadow 0.05s;
}
.lb-nav:disabled { opacity:0.35; cursor:default; box-shadow:none; transform:none !important; }
.lb-nav:not(:disabled):active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--border2); }

.lb-page-info { font-size:8px; color:var(--purple); letter-spacing:1px; }

/* ── Floating damage labels ────────────────────────────── */
.floaty {
  position: absolute;
  pointer-events: none;
  font-family: 'Press Start 2P', monospace;
  animation: floatUp 0.7s ease-out forwards;
  z-index: 10;
  white-space: nowrap;
}

@keyframes floatUp {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  65%  { opacity:1; }
  100% { opacity:0; transform:translateY(-64px) scale(0.75); }
}

.spark { position:absolute; pointer-events:none; width:6px; height:6px; z-index:9; image-rendering:pixelated; }

/* ── Shake ─────────────────────────────────────────────── */
@keyframes pixelShake {
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(-4px,-2px);}
  40%{transform:translate(4px,2px);}
  60%{transform:translate(-3px,3px);}
  80%{transform:translate(3px,-3px);}
}

/* ── Result overlay ────────────────────────────────────── */
.overlay {
  display: none;
  position: fixed; inset:0;
  background: rgba(160,110,220,0.46);
  align-items: center;
  justify-content: center;
  padding: 28px 16px 42vh;
  z-index: 200;
}
.overlay.show { display:flex; }
.overlay.show:not(.ready) .res-btns {
  pointer-events: none;
  opacity: 0.45;
}

.overlay.show:not(.ready) .name-input {
  pointer-events: none;
}

.result-box {
  background: var(--panel);
  border: 6px solid var(--border2);
  box-shadow: 8px 8px 0 #7838B8;
  padding: 28px 24px 22px;
  text-align: center;
  max-width: 380px;
  width: 92%;
  animation: popIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
  margin-top: 0;
}

@keyframes popIn { from{transform:scale(0.4);opacity:0;} to{transform:scale(1);opacity:1;} }

.res-title { font-size:18px; color:var(--pink); text-shadow:3px 3px 0 #B050A0; margin-bottom:18px; letter-spacing:2px; }

.res-stats { margin-bottom:16px; border:3px solid var(--border); box-shadow:3px 3px 0 var(--border2); }

.res-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 9px 12px;
  border-bottom: 2px dashed #EDD8FF;
  color: var(--text);
}
.res-row:last-child { border-bottom:none; }
.res-row span { color:var(--texthi); }

.new-rec { font-size:9px; color:#FF7010; text-shadow:2px 2px 0 #A04000; margin-bottom:14px; animation:blinkAnim 0.5s steps(1) infinite; }

/* ── Name entry ────────────────────────────────────────── */
.name-section { margin-bottom:16px; text-align:left; }
.name-lbl { font-size:8px; color:var(--purple); letter-spacing:1px; display:block; margin-bottom:7px; }

.name-input {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  padding: 9px 11px;
  background: #FFF0FF;
  border: 3px solid var(--border2);
  box-shadow: 3px 3px 0 var(--border2), inset 2px 2px 0 #EDD8FF;
  color: var(--texthi);
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 3px;
  outline: none;
}
.name-input:focus { border-color:var(--pink2); box-shadow:3px 3px 0 var(--pink2), inset 2px 2px 0 #FFE0F0; }
.name-input.invalid { border-color:#FF3060 !important; box-shadow:3px 3px 0 #FF3060, inset 2px 2px 0 #FFD0D8 !important; }

.name-error { font-size:7px; color:#FF3060; letter-spacing:0.5px; margin-top:6px; display:none; animation:blinkAnim 0.5s steps(1) infinite; }
.name-error.show { display:block; }
.submit-error { font-size:7px; color:#FF3060; letter-spacing:0.5px; line-height:1.6; margin-top:8px; display:none; }
.submit-error.show { display:block; }

/* ── Overlay buttons ───────────────────────────────────── */
.res-btns { display:flex; gap:10px; justify-content:center; }

.btn-submit {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 10px 16px;
  background: var(--pink);
  color: #fff;
  border: 4px solid #C050A8;
  box-shadow: 4px 4px 0 #904090;
  cursor: pointer;
  text-shadow: 2px 2px 0 #C050A8;
  letter-spacing: 1px;
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn-submit:disabled { opacity:0.5; cursor:default; }
.btn-submit:not(:disabled):active { transform:translate(2px,2px); box-shadow:2px 2px 0 #904090; }

.btn-skip {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 10px 16px;
  background: #EDD8FF;
  color: var(--texthi);
  border: 4px solid var(--border2);
  box-shadow: 4px 4px 0 var(--border2);
  cursor: pointer;
  letter-spacing: 1px;
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn-skip:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--border2); }

/* ── Help popover ─────────────────────────────────────── */
.help-popover {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(160,110,220,0.62);
  z-index: 220;
  padding: 18px;
}

.help-box {
  position: relative;
  width: min(340px, 92vw);
  background: var(--panel);
  border: 5px solid var(--border2);
  box-shadow: 7px 7px 0 #7838B8;
  padding: 24px 18px 18px;
  text-align: center;
}

.help-close {
  position: absolute;
  top: -16px;
  right: -14px;
  width: 34px;
  height: 34px;
  font-size: 14px;
}

.help-title {
  font-size: 17px;
  color: var(--pink);
  text-shadow: 4px 4px 0 #B050A0, 2px 2px 0 #D87EC0;
  letter-spacing: 2px;
  line-height: 1.45;
  margin-bottom: 16px;
}

.help-list {
  display: grid;
  gap: 10px;
}

.help-list p {
  font-size: 8px;
  line-height: 1.8;
  color: #3E245F;
  text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #E8C8FF;
  letter-spacing: 1px;
  background: #FFF0FF;
  border: 2px solid var(--border);
  padding: 9px 8px;
}

button,
input {
  touch-action: manipulation;
}

@media (max-width: 430px) {
  body {
    justify-content: flex-start;
    padding: 1rem 0.75rem 1.5rem;
  }

  .title {
    font-size: 17px;
    line-height: 1.35;
    text-shadow: 3px 3px 0 #B050A0, 1px 1px 0 #D87EC0;
  }

  .subtitle {
    font-size: 8px;
    margin-bottom: 12px;
  }

  .stats,
  .hp-wrap,
  .records {
    width: min(100%, 340px);
  }

  .cookie-wrap {
    margin-top: 2px;
  }

  #c {
    width: min(78vw, 320px);
    height: min(78vw, 320px);
  }

  .stat-cell {
    min-height: 55px;
  }

  .stat-lbl {
    font-size: 7px;
  }

  .stat-val {
    font-size: 13px;
  }

  .lb-header,
  .lb-row {
    grid-template-columns: 26px 1fr 72px;
    gap: 4px;
  }

  .lb-row {
    font-size: 10px;
  }

  .name-input {
    font-size: 16px;
  }

  .overlay {
    align-items: flex-start;
    padding: 18px 12px 0;
  }

  .result-box {
    width: min(360px, 94vw);
    padding: 22px 18px 18px;
  }
}