:root{
    --bg:#0a0e1a;
    --ink:#eef2ff;
    --ink-dim:#8b93b0;
    --accent:#ff9f43;
    --accent2:#ffcf7a;
    --pink:#ef5f8f;
    --purple:#9b6ef3;
    --cyan:#3fe0d0;
    --danger:#ff5470;
    --good:#3fe0a0;
    --panel: rgba(16, 21, 38, 0.86);
    --panel-border: rgba(255,255,255,0.08);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  html,body{
    margin:0; padding:0; width:100%; height:100%; overflow:hidden;
    background:var(--bg); color:var(--ink);
    font-family:'Poppins', system-ui, sans-serif;
    touch-action:none; overscroll-behavior:none;
    user-select:none; -webkit-user-select:none;
  }
  #stage{ position:fixed; inset:0; width:100%; height:100%; }
  canvas{ display:block; width:100%; height:100%; }

  .hud{ position:fixed; inset:0; pointer-events:none; z-index:5; }
  .hud > *{ pointer-events:auto; }

  .top-bar{
    position:absolute; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:flex-start;
    padding: max(14px, env(safe-area-inset-top)) 16px 0 16px;
  }
  .coin-pill{
    display:flex; align-items:center; gap:8px;
    background:var(--panel); border:1px solid var(--panel-border);
    padding:8px 14px 8px 10px; border-radius:999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    font-family:'Orbitron', sans-serif; font-weight:700; font-size:16px;
    transition: transform .18s ease;
  }
  .coin-pill.bump{ transform: scale(1.12); }
  .coin-dot{
    width:20px; height:20px; border-radius:6px;
    background: linear-gradient(145deg, var(--accent2), var(--accent));
    box-shadow: 0 0 10px rgba(255,159,67,0.7), inset -2px -2px 3px rgba(0,0,0,0.25);
    transform: rotate(45deg);
  }
  .icon-btn{
    width:42px; height:42px; border-radius:14px;
    background:var(--panel); border:1px solid var(--panel-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); cursor:pointer; backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  }
  .icon-btn svg{ width:20px; height:20px; }
  .btn-row{ display:flex; gap:10px; }

  .score-wrap{
    position:absolute; top:max(70px, calc(env(safe-area-inset-top) + 60px)); left:0; right:0;
    display:flex; justify-content:center; pointer-events:none;
  }
  .score-num{
    font-family:'Orbitron', sans-serif; font-weight:800; font-size:56px;
    color:#fff; text-shadow: 0 0 18px rgba(120,150,255,0.55), 0 4px 0 rgba(0,0,0,0.35);
    transition: transform .12s cubic-bezier(.34,1.56,.64,1);
    transform: scale(1);
  }
  .score-num.pop{ transform: scale(1.35); }
  .level-label{
    font-family:'Poppins'; font-weight:600; font-size:11px; letter-spacing:2px;
    color: var(--accent2); text-align:center; text-transform:uppercase; opacity:0.8; margin-top:2px;
  }

  .lives-row{
    position:absolute; top: max(64px, calc(env(safe-area-inset-top) + 54px)); left:16px;
    display:flex; gap:6px; pointer-events:none;
  }
  .heart-ico{ width:22px; height:22px; transition: transform .25s ease, opacity .25s ease; }
  .heart-ico svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
  .heart-ico.lost svg path{ fill: rgba(255,255,255,0.12); }
  .heart-ico.lost{ transform: scale(0.8); }
  .heart-ico.just-lost{ animation: heartPop .4s ease; }
  @keyframes heartPop{ 0%{ transform: scale(1.5); } 60%{ transform: scale(0.7); } 100%{ transform: scale(0.8); } }

  .level-toast{
    position:absolute; top:22%; left:0; right:0; text-align:center; pointer-events:none;
    font-family:'Baloo 2'; font-weight:800; font-size:30px; color:#fff;
    text-shadow: 0 0 20px rgba(255,159,67,0.7), 0 4px 14px rgba(0,0,0,0.5);
    opacity:0; transform: translateY(10px) scale(0.85);
    transition: opacity .25s ease, transform .25s ease;
  }
  .level-toast.show{ opacity:1; transform: translateY(0) scale(1); }

  .hit-flash{
    position:fixed; inset:0; z-index:15; pointer-events:none;
    background: radial-gradient(120% 100% at 50% 50%, rgba(255,84,112,0) 40%, rgba(255,84,112,0.35) 100%);
    opacity:0; transition: opacity .12s ease;
  }
  .hit-flash.show{ opacity:1; }

  @keyframes shakeScreen{
    0%,100%{ transform: translate(0,0); }
    20%{ transform: translate(-6px,3px); }
    40%{ transform: translate(6px,-3px); }
    60%{ transform: translate(-5px,-2px); }
    80%{ transform: translate(5px,2px); }
  }
  #stage.shaking{ animation: shakeScreen .32s ease; }

  .center-hint{
    position:absolute; bottom:9%; left:0; right:0; text-align:center; pointer-events:none;
  }
  .center-hint h1{
    font-family:'Baloo 2'; font-weight:700; font-size:26px; margin:0;
    color:#fff; text-shadow: 0 4px 18px rgba(0,0,0,0.4);
    animation: floaty 1.8s ease-in-out infinite;
  }
  .center-hint .sub{ font-size:13px; color:var(--ink-dim); margin-top:4px; font-weight:500; }
  @keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }

  .tap-zone-hint{
    position:absolute; bottom:4%; width:64px; height:64px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.18); font-size:34px; pointer-events:none;
  }
  #tapLeftHint{ left:4%; }
  #tapRightHint{ right:4%; }

  /* ===== Overlays / Modals ===== */
  .overlay{
    position:fixed; inset:0; z-index:20;
    display:flex; align-items:center; justify-content:center;
    background: radial-gradient(120% 120% at 50% 20%, rgba(30,20,60,0.55), rgba(4,6,14,0.86));
    backdrop-filter: blur(3px);
    opacity:0; pointer-events:none; transition: opacity .28s ease;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .panel{
    width:min(420px, 88vw);
    max-height: 86vh; overflow-y:auto;
    background: linear-gradient(180deg, rgba(24,29,52,0.96), rgba(14,17,32,0.96));
    border:1px solid rgba(255,255,255,0.09);
    border-radius:28px;
    padding:28px 24px 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
    transform: translateY(18px) scale(0.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.2);
    text-align:center;
  }
  .overlay.show .panel{ transform: translateY(0) scale(1); }

  .logo{
    font-family:'Baloo 2'; font-weight:800; font-size:40px; letter-spacing:1px;
    margin: 0 0 4px 0; color:#fff;
    background: linear-gradient(120deg, #fff 20%, var(--accent2) 55%, var(--pink) 90%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow: 0 8px 30px rgba(255,159,67,0.25);
  }
  .logo-cube{ display:inline-block; transform: translateY(2px); margin-right:2px; }
  .subtitle{ color:var(--ink-dim); font-size:13px; margin: 0 0 22px 0; font-weight:500;}

  .stat-row{ display:flex; justify-content:center; gap:12px; margin-bottom:20px; }
  .stat-card{
    flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--panel-border);
    border-radius:16px; padding:10px 6px;
  }
  .stat-card b{ display:block; font-family:'Orbitron'; font-size:20px; color:#fff; }
  .stat-card span{ font-size:10px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:1px; }

  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:15px 18px; border:none; border-radius:16px;
    font-family:'Baloo 2'; font-weight:700; font-size:18px; letter-spacing:0.3px;
    cursor:pointer; margin-bottom:12px; color:#fff;
    transition: transform .12s ease, filter .12s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
        margin-top: 15px;
  }
  .btn:active{ transform: scale(0.96); filter:brightness(0.95); }
.btn-primary {
    background: linear-gradient(180deg, #ffb86a 0%, #ff9f43 45%, #ef5f8f 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,.22);
    border-radius: 18px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all .15s ease;

   
}



.btn-primary:hover::before {
    left: 150%;
}

.btn-primary:hover {
    transform: translateY(-2px);
   
}

.btn-primary:active {
    transform: translateY(4px);
    border-bottom-width: 2px;
  
}
 .btn-secondary {
    background: linear-gradient(180deg,
        rgba(255,255,255,.14) 0%,
        rgba(255,255,255,.09) 45%,
        rgba(255,255,255,.05) 100%);
    color: #fff;
    border: 2px solid rgba(255,255,255,.15);
  
    border-radius: 18px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all .15s ease;

    /* Frosted 3D Game Effect */
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.18),
        inset 0 -2px 0 rgba(0,0,0,.18),
        0 4px 0 rgba(0,0,0,.35),
        0 10px 20px rgba(0,0,0,.25),
        0 0 18px rgba(255,255,255,.06);
}

/* Glossy Shine */
.btn-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transition: left .6s ease;
}

.btn-secondary:hover::before {
    left: 150%;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.12) 45%,
        rgba(255,255,255,.08) 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.25),
        inset 0 -2px 0 rgba(0,0,0,.2),
        0 6px 0 rgba(0,0,0,.35),
        0 14px 28px rgba(0,0,0,.3),
        0 0 24px rgba(255,255,255,.1);
}

.btn-secondary:active {
    transform: translateY(4px);
    border-bottom-width: 2px;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,.25),
        0 2px 0 rgba(0,0,0,.35),
        0 6px 12px rgba(0,0,0,.2);
}
  .btn-ghost{ background: transparent; border:1px solid var(--panel-border); box-shadow:none; color:var(--ink-dim); }

  .how-list{ text-align:left; margin: 0 0 20px 0; padding:0; list-style:none; }
  .how-list li{
    display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14px; color:var(--ink);
    line-height:1.4;
  }
  .how-ico{
    flex:0 0 auto; width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:17px;
    background:rgba(255,255,255,0.06); border:1px solid var(--panel-border);
  }
  .how-list b{ color:#fff; }

  .skins-grid{
    display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:18px;
  }
  .skin-card{
    position:relative; background:rgba(255,255,255,0.04); border:1.5px solid var(--panel-border);
    border-radius:16px; padding:12px 6px 10px; cursor:pointer; transition: border-color .15s ease, transform .12s ease;
  }
  .skin-card:active{ transform: scale(0.94); }
  .skin-card.selected{ border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(255,207,122,0.18); }
  .skin-cube{
    width:34px; height:34px; margin:0 auto 8px; border-radius:8px; transform: rotate(45deg);
    box-shadow: inset -3px -3px 5px rgba(0,0,0,0.3), inset 2px 2px 4px rgba(255,255,255,0.25);
  }
  .skin-name{ font-size:11px; font-weight:600; color:var(--ink); margin-bottom:4px; }
  .skin-cost{
    font-family:'Orbitron'; font-size:11px; color:var(--accent2); display:flex; align-items:center; justify-content:center; gap:4px;
  }

  .close-x{
    position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:10px;
    background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--ink-dim); font-size:16px;
  }

  .go-badge{
    display:inline-block; font-family:'Baloo 2'; font-weight:700; font-size:12px;
    color:#3a2600; background: linear-gradient(120deg, var(--accent2), var(--accent));
    padding:4px 12px; border-radius:999px; margin-bottom:10px; letter-spacing:0.5px;
  }

  .mute-icon-on, .mute-icon-off{ display:none; }
  .muted .mute-icon-off{ display:flex; }
  .muted .mute-icon-on{ display:none; }
  .unmuted .mute-icon-on{ display:flex; }
  .unmuted .mute-icon-off{ display:none; }

  #loading-screen{
    position:fixed; inset:0; z-index:50; background: radial-gradient(120% 120% at 50% 30%, #171d33 0%, #05070d 70%);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  }
  .load-cube-wrap{ width:64px; height:64px; position:relative; }
  .load-cube{
    width:44px; height:44px; margin:10px auto; border-radius:10px;
    background: linear-gradient(145deg, #fff, #b9c3e0);
    transform: rotate(45deg);
    animation: hop 0.9s ease-in-out infinite;
    box-shadow: 0 0 24px rgba(160,180,255,0.5);
  }
  @keyframes hop{
    0%,100%{ transform: rotate(45deg) translateY(0) scale(1,1); }
    35%{ transform: rotate(45deg) translateY(-22px) scale(0.95,1.05); }
    55%{ transform: rotate(45deg) translateY(-22px) scale(0.95,1.05); }
    80%{ transform: rotate(45deg) translateY(0) scale(1.08,0.9); }
  }
  .load-bar-track{ width:200px; height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
  .load-bar-fill{ height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--pink)); transition: width .18s ease; }
  .load-text{ font-family:'Baloo 2'; font-weight:600; font-size:14px; color:var(--ink-dim); letter-spacing:1px; }
  .load-title{ font-family:'Baloo 2'; font-weight:800; font-size:30px; color:#fff; letter-spacing:0.5px; }

  .hidden{ display:none !important; }

  @media (max-width:380px){
    .score-num{ font-size:44px; }
    .panel{ padding:22px 18px 18px; }
  }