:root{
    --panel:#131a33; --card:#182142; --text:#e7ecff; --muted:#a9b0d9; --accent:#6ea8fe; --gold:#ffd166;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:radial-gradient(ellipse at top, #0e1430, #050814);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;overflow:hidden}
  h1,h2{margin:.4em 0}
  small{color:var(--muted)}
  
  /* Centered main panels (Home / Game Over) */
  .panel{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    max-width:720px; width:90%; max-height:94vh; overflow:auto;
    background:rgba(19,26,51,0.95); border:1px solid #2c3565; border-radius:16px;
    padding:24px; box-shadow:0 12px 40px rgba(0,0,0,.5); text-align:center; z-index:3; pointer-events:auto;
  }
  .row{display:flex;flex-direction:column;gap:10px;margin-top:12px}
  
  button{background:var(--accent);border:none;color:#061025;font-weight:700;padding:10px 16px;border-radius:10px;cursor:pointer}
  button:hover{filter:brightness(1.05)}
  button.ghost{background:transparent;color:var(--text);border:1px solid #3a4a85}
  button.primary{box-shadow:0 6px 0 #325fb4}
  input{background:#0c1230;border:1px solid #2c3565;color:var(--text);padding:10px;border-radius:10px;min-width:220px;text-align:center}
  
  /* Modals */
  .modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);z-index:4;pointer-events:auto}
  .modal.hidden{display:none !important}
  .modal-content{background:var(--panel);border:1px solid #2c3565;border-radius:12px;padding:16px;min-width:320px;max-width:92vw;max-height:86vh;overflow:auto}
  .modal-actions{margin-top:12px}
  
  /* Shop / Premium list */
  .skin-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .skin{background:var(--card);border:1px solid #2c3565;border-radius:10px;padding:10px}
  .skin .preview{height:80px;border-radius:8px;background:#0b1130;border:1px solid #233065;display:grid;place-items:center}
  .skin .meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
  .skin .price{color:var(--gold);font-weight:700}
  .skin .muted{font-size:.8rem;color:var(--muted)}
  .skin.special{border:1px solid #ffd166;background:#2b1a00}
  
  .purchase-note{font-size:.8rem;margin:12px 0;color:#a9b0d9}
  
  /* HUD */
  .hud{position:fixed;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:center;gap:8px;z-index:2}
  .hud.hidden{display:none}
  
  /* Player HP bar (bottom) */
  #hp-bar{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    width:70%;height:14px;background:#222b55;border:1px solid #2c3565;border-radius:7px;overflow:hidden;z-index:2
  }
  #hp-bar.hidden{display:none}
  #hp-bar-inner{height:100%;background:linear-gradient(90deg,#55ffb3,#00cc66);width:100%;transition:width .2s ease}
  
  /* Canvas always behind panels */
  #game{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    background:#050818;border:1px solid #2a2f55;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.5);z-index:1
  }
  .hidden{display:none !important}
  .no-click{pointer-events:none}
  .dim{filter:brightness(0.85)}
  
  /* Ads */
  .ad-banner{
    margin-top:16px;padding:10px;background:#0c0f25;border:1px dashed #2a2f55;border-radius:8px;color:#a9b0d9;font-size:.9rem;text-align:center
  }
  #interstitial-ad .modal-content{
    max-width:480px;width:90%;background:#131a33;border:1px solid #2c3565;border-radius:16px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.6)
  }

  /* Bottom advertisement bar */
  .bottom-ad{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:60px;
    background:#0c0f25;
    border-top:1px dashed #2a2f55;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#a9b0d9;
    font-size:.9rem;
    z-index:5;
  }
  .bottom-ad.hidden{
    display:none !important;
  }

  /* Highlight active skin in shop */
  .skin.active-skin{
    border:2px solid var(--gold);
  }

  /* Home leaderboard/best section */
  .home-leaderboard{
    margin-top:16px;
    padding:12px;
    background:var(--card);
    border:1px solid #2c3565;
    border-radius:12px;
    text-align:left;
    max-height:200px;
    overflow-y:auto;
  }
  .home-leaderboard h3{
    margin:0 0 8px 0;
    font-size:1.1rem;
    color:var(--text);
  }
  .leaderboard{ list-style:none; padding-left:0; margin:0; }
  .leaderboard li{
    display:flex;
    justify-content:space-between;
    padding:4px 2px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    font-size:.9rem;
  }
  .leaderboard li:last-child{ border-bottom:none; }

  /* Ranking sections within leaderboard */
  .rank-section{
    margin-bottom:16px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .rank-section:last-child{
    border-bottom:none;
  }
  .rank-section h4{
    margin:4px 0 6px;
    font-size:1rem;
    color:var(--accent);
  }
  .your-row{
    background:rgba(255,255,0,0.1);
  }
  .your-rank-info{
    margin-top:4px;
    font-size:.85rem;
    color:var(--muted);
    text-align:right;
  }

  /* Home story section */
  .home-story{
    margin-top:20px;
    padding:14px;
    background:var(--card);
    border:1px solid #2c3565;
    border-radius:12px;
    text-align:left;
    color:var(--text);
    line-height:1.4;
  }
  .home-story h3{
    margin-top:0;
    margin-bottom:8px;
    font-size:1.1rem;
    color:var(--text);
  }

  /* Login info indicator */
  .login-info{
    margin-top:8px;
    font-size:.9rem;
    color:var(--muted);
  }
  .login-info strong{
    color:var(--accent);
  }
  
  @media (max-width:520px){
    #game{width:95vw;height:80vh}
  }