:root{
  color-scheme: only light;

  --paper:#FFF6EA;
  --ink:#2B2622;
  --ink-soft:#8A7F6E;
  --accent:#FF7A59;
  --accent-press:#E85F3E;
  --sky:#8FD3FF;
  --yellow:#FFC531;
  --card:#FFFFFF;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.font-display{ font-family:'Baloo 2', ui-rounded, sans-serif; }

canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

.overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 24px; text-align:center;
    color: var(--ink);
  }

.hidden{ display:none !important; }

.hud-side.right{ justify-content:flex-end; }

.hud-home:active{ transform: scale(0.92); }

.heart-icon .heart-shine{ transition: opacity .2s; }

.heart-icon.empty path.heart-shape{ fill:rgba(255,255,255,0.32); stroke:rgba(43,38,34,0.18); stroke-width:1; }

.heart-icon.empty .heart-shine{ opacity:0; }

.heart-break{ animation: heartBreak .5s ease forwards; }

@keyframes heartBreak{
    0%{ transform: scale(1) rotate(0deg); opacity:1; }
    20%{ transform: scale(1.35) rotate(-12deg); }
    40%{ transform: scale(0.75) rotate(14deg); }
    60%{ transform: scale(1.15) rotate(-10deg); opacity:1; }
    100%{ transform: scale(0.85) rotate(8deg) translateY(3px); opacity:1; }
  }

@media (prefers-reduced-motion: reduce){
    .heart-break, .heart-heal{ animation: none; }
  }

@keyframes badgePulse{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.06); }
  }

@media (prefers-reduced-motion: reduce){
    .invincible-badge span{ animation:none; }
  }

.panel{
    background: var(--card);
    border-radius: 28px;
    padding: 32px 26px;
    max-width: 320px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(43,38,34,0.12);
  }

.btn{
    font-family:'Baloo 2', sans-serif;
    font-weight: 700;
    font-size: 17px;
    border:none;
    border-radius: 18px;
    padding: 14px 20px;
    width:100%;
    cursor:pointer;
    transition: transform .12s ease, background .12s ease;
  }

.btn-primary{ background: var(--accent); color:white; }

.btn-primary:active{ transform: scale(0.97); background: var(--accent-press); }

#btn-start{
    position: relative;
    overflow: hidden;
    width: auto;
    padding: 20px 54px;
    font-size: 20px;
    border-radius: 999px;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.22);
    background: linear-gradient(270deg, #FF7A59, #FFC531, #FF5C9E, #7A6BFF, #FF7A59);
    background-size: 400% 400%;
    animation: ctaPulse 1.7s ease-in-out infinite, ctaGradientShift 6s linear infinite;
  }

#btn-start::after{
    content:"";
    position:absolute; top:0; left:-60%;
    width:45%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg);
    animation: ctaShine 3s ease-in-out infinite;
  }

@keyframes ctaPulse{
    0%,100%{ transform: scale(1); box-shadow: 0 8px 26px rgba(255,92,158,0.45); }
    50%{ transform: scale(1.06); box-shadow: 0 14px 36px rgba(122,107,255,0.55); }
  }

@keyframes ctaGradientShift{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 100% 50%; }
  }

@keyframes ctaShine{
    0%{ left:-60%; }
    30%{ left:130%; }
    100%{ left:130%; }
  }

.cta-wrap{ position:relative; display:inline-flex; }



.cta-wrap .spark{ position:absolute; width:20px; height:20px; pointer-events:none; }

.cta-wrap .spark svg{ width:100%; height:100%; display:block; }

.spark.s1{ top:-20px; left:-18px; animation: sparkleTwinkle 1.8s ease-in-out infinite; }

.spark.s2{ top:-26px; right:26px; width:14px; height:14px; animation: sparkleTwinkle 2.3s ease-in-out infinite .45s; }

.spark.s3{ bottom:-19px; left:-8px; width:17px; height:17px; animation: sparkleTwinkle 1.6s ease-in-out infinite .9s; }

.spark.s4{ bottom:-16px; right:-22px; width:22px; height:22px; animation: sparkleTwinkle 2.1s ease-in-out infinite 1.35s; }

@keyframes sparkleTwinkle{
    0%,100%{ transform: scale(0.5) rotate(0deg); opacity:0.25; }
    50%{ transform: scale(1.2) rotate(18deg); opacity:1; }
  }

#btn-start:active{
    animation-play-state: paused;
    transform: scale(0.94);
  }

@media (prefers-reduced-motion: reduce){
    .char-preview, #btn-start, #btn-start::after{ animation: none !important; }
  }

.btn-ghost{ background: #F3F0EA; color: var(--ink); margin-top:10px; }

.btn-ghost:active{ transform: scale(0.97); }

.score-row{
    display:flex; justify-content:center; gap:22px;
    margin: 6px 0 22px 0;
  }

.score-box{ text-align:center; }

.new-best{
    display:inline-block;
    background: var(--yellow);
    color:#5A4300;
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:13px;
    padding:4px 12px;
    border-radius:999px;
    margin-bottom:14px;
  }

.countdown-num{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size: 96px;
    color:white;
    text-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }

@media (prefers-reduced-motion: reduce){
    * { animation: none !important; transition: none !important; }
  }


.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


@media (orientation: landscape) and (max-height: 519px){
  #game-wrap{ max-width: none !important; }
}


#stage{ background:#FFF6EA; }

@media (min-width: 521px){
  #game-wrap{ box-shadow: 0 12px 44px rgba(43,38,34,0.20), 0 0 0 1px rgba(43,38,34,0.13); }
}




.nojs{
  position:fixed; inset:0; z-index:50; overflow:auto;
  background:#FFF6EA; color:#2B2622;
  padding:24px 20px 40px;
  -webkit-text-size-adjust:100%;
}
.nojs-inner{ max-width:520px; margin:0 auto; }
.nojs img{
  width:100%; height:auto; display:block;
  border-radius:14px; border:1px solid rgba(43,38,34,0.13);
}
.nojs h1{ font-size:24px; margin:16px 0 8px; }
.nojs p{ margin:0 0 12px; line-height:1.65; color:#5B5245; font-size:15px; }
.nojs a{ color:#E85F3E; font-weight:700; }