:root {
    --bg1:#070812;
    --bg2:#11142b;
    --text:#f7f8ff;
    --muted:#a9afcf;
    --accent:#7ef9ff;
    --accent2:#a777ff;
    --gold:#ffd45e;
  }
  * { box-sizing:border-box; }
  html,body {
    margin:0; width:100%; height:100%; overflow:hidden;
    background:radial-gradient(circle at 50% 20%, #1a1d3d 0%, #090a16 48%, #03040a 100%);
    color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  #wrap { position:fixed; inset:0; display:grid; place-items:center; }
  canvas { position:absolute; inset:0; width:100%; height:100%; }
  #hud {
    position:absolute; inset:0; pointer-events:none;
    padding: max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom));
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:12px; }
  .stat { text-shadow:0 2px 14px rgba(0,0,0,.6); }
  .label { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#a9afcf; }
  .value { font-size:clamp(20px,4vw,34px); font-weight:900; letter-spacing:-.04em; }
  #scoreBox { text-align:left; }
  #comboBox { text-align:center; }
  #levelBox { text-align:right; }
  #combo {
    font-size:clamp(22px,4.5vw,38px);
    background:linear-gradient(90deg,var(--accent),#fff,var(--accent2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 10px rgba(126,249,255,.2));
  }
  #streakTrack {
    width:min(250px, 42vw); height:5px; border-radius:999px;
    background:rgba(255,255,255,.1); margin:6px auto 0; overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  }
  #streakFill { height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .18s ease; }
  .bottom {
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    color:var(--muted); font-size:12px; letter-spacing:.04em;
  }
  #hint {
    max-width:520px; padding:8px 12px; border-radius:999px;
    background:rgba(6,8,20,.28); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.06);
  }
  #best { text-align:right; }
  #overlay {
    position:absolute; inset:0; display:grid; place-items:center;
    background:linear-gradient(rgba(3,4,10,.28), rgba(3,4,10,.62));
    backdrop-filter:blur(8px); z-index:5;
  }
  #overlay.hidden { display:none; }
  .panel {
    width:min(92vw,520px); padding:28px; border-radius:28px;
    background:linear-gradient(180deg,rgba(28,31,62,.94),rgba(8,9,22,.94));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    text-align:center;
  }
  .eyebrow { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:800; }
  h1 { margin:10px 0 8px; font-size:clamp(42px,10vw,72px); line-height:.95; letter-spacing:-.07em; }
  .subtitle { color:#bbc1df; line-height:1.5; margin:0 auto 22px; max-width:420px; }
  .rules { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0 22px; }
  .rule { padding:12px 8px; border-radius:16px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.06); }
  .rule b { display:block; font-size:18px; margin-bottom:3px; }
  .rule span { color:#9da4c7; font-size:11px; }
  button {
    pointer-events:auto; cursor:pointer; border:0; border-radius:999px; padding:14px 26px;
    color:#080913; font-weight:900; letter-spacing:.05em; font-size:14px;
    background:linear-gradient(90deg,var(--accent),#fff 52%,#b699ff);
    box-shadow:0 10px 35px rgba(126,249,255,.22);
  }
  #pauseBtn {
    pointer-events:auto; position:absolute; right:18px; top:72px; z-index:4;
    width:38px; height:38px; padding:0; background:rgba(9,11,26,.48);
    color:#fff; border:1px solid rgba(255,255,255,.09); box-shadow:none; backdrop-filter:blur(8px);
  }
  #toast {
    position:absolute; left:50%; top:22%; transform:translate(-50%,-50%) scale(.9);
    text-align:center; pointer-events:none; opacity:0; z-index:3;
  }
  #toast.show { animation:toast .7s ease-out forwards; }
  #toastMain { font-size:clamp(32px,8vw,64px); font-weight:1000; letter-spacing:-.05em; text-shadow:0 8px 35px rgba(0,0,0,.55); }
  #toastSub { font-weight:900; color:var(--gold); font-size:clamp(15px,3vw,22px); letter-spacing:.06em; }
  @keyframes toast {
    0% { opacity:0; transform:translate(-50%,-40%) scale(.72); }
    20% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
    65% { opacity:1; transform:translate(-50%,-54%) scale(1); }
    100% { opacity:0; transform:translate(-50%,-66%) scale(.96); }
  }
  #overdrive {
    position:absolute; left:50%; top:14%; transform:translateX(-50%);
    font-size:clamp(13px,3vw,18px); font-weight:1000; letter-spacing:.3em;
    color:#fff; text-shadow:0 0 18px var(--accent),0 0 40px var(--accent2);
    opacity:0; pointer-events:none;
  }
  #overdrive.active { opacity:1; animation:pulse 1s infinite alternate ease-in-out; }
  @keyframes pulse { from { transform:translateX(-50%) scale(.97); } to { transform:translateX(-50%) scale(1.04); } }
  @media (max-width:600px) {
    #pauseBtn { top:66px; }
    .rules { gap:6px; }
    .panel { padding:24px 18px; }
    #hint { max-width:70vw; }
  }

  #coinBox {
    position:absolute; left:18px; top:72px; z-index:4;
    display:flex; align-items:center; gap:7px; padding:8px 11px;
    border-radius:999px; background:rgba(9,11,26,.48);
    border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(8px);
    font-weight:900; font-size:13px; pointer-events:none;
  }
  #coinBox .coinIcon {
    width:18px; height:18px; border-radius:50%;
    display:inline-grid; place-items:center; color:#7d5700;
    background:radial-gradient(circle at 35% 30%,#fff7b0,#ffd45e 45%,#e39e17 100%);
    box-shadow:0 0 14px rgba(255,212,94,.35);
    font-size:11px;
  }
  #shopBtn {
    pointer-events:auto; position:absolute; left:18px; top:112px; z-index:4;
    height:38px; padding:0 14px;
    background:rgba(9,11,26,.48); color:#fff;
    border:1px solid rgba(255,255,255,.09); box-shadow:none; backdrop-filter:blur(8px);
  }
  #shopOverlay {
    position:absolute; inset:0; z-index:8; display:none; place-items:center;
    background:rgba(3,4,10,.72); backdrop-filter:blur(12px);
  }
  #shopOverlay.show { display:grid; }
  .shopPanel {
    width:min(94vw,760px); max-height:min(86vh,760px); overflow:auto;
    padding:24px; border-radius:28px;
    background:linear-gradient(180deg,rgba(28,31,62,.98),rgba(8,9,22,.98));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 100px rgba(0,0,0,.55);
  }
  .shopHeader {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:18px;
  }
  .shopHeader h2 { margin:0; font-size:30px; letter-spacing:-.04em; }
  #closeShop {
    background:rgba(255,255,255,.08); color:#fff; box-shadow:none;
    width:38px; height:38px; padding:0;
  }
  .shopBalance { color:#ffd45e; font-weight:900; font-size:14px; margin-top:4px; }
  .shopSectionTitle {
    margin:20px 0 10px; font-size:12px; text-transform:uppercase;
    letter-spacing:.18em; color:#a9afcf;
  }
  .shopGrid {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  }
  .shopItem {
    padding:14px; border-radius:18px; background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07); min-height:126px;
    display:flex; flex-direction:column; justify-content:space-between; gap:10px;
  }
  .shopItem.equipped { border-color:rgba(126,249,255,.65); box-shadow:0 0 0 1px rgba(126,249,255,.16) inset; }
  .shopPreview {
    height:38px; display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .previewBall { width:30px; height:30px; border-radius:50%; box-shadow:0 0 16px rgba(126,249,255,.25); }
  .previewTrail { width:52px; height:6px; border-radius:999px; }
  .shopName { font-weight:900; font-size:13px; }
  .shopMeta { color:#9da4c7; font-size:11px; min-height:16px; }
  .shopAction {
    width:100%; padding:9px 11px; font-size:11px; box-shadow:none;
  }
  .shopAction.locked {
    background:rgba(255,255,255,.08); color:#d9def7;
  }
  .shopAction.equip {
    background:linear-gradient(90deg,#7ef9ff,#cbb8ff); color:#071018;
  }
  @media (max-width:650px){
    .shopGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
    #coinBox{top:66px;}
    #shopBtn{top:106px;}
  }


  #audioControls {
    position:absolute; right:64px; top:72px; z-index:4;
    display:flex; gap:8px;
  }
  .audioBtn {
    pointer-events:auto; height:38px; padding:0 12px;
    background:rgba(9,11,26,.48); color:#fff;
    border:1px solid rgba(255,255,255,.09);
    box-shadow:none; backdrop-filter:blur(8px);
    font-size:11px;
  }
  @media (max-width:650px){
    #audioControls{right:60px;top:66px;}
    .audioBtn{padding:0 10px;}
  }


  #livesRow { margin-top:7px; display:flex; gap:5px; align-items:center; }
  .lifeDot { width:8px; height:8px; border-radius:50%; background:#ff7d9f; box-shadow:0 0 10px rgba(255,125,159,.45); }
  .lifeDot.empty { background:rgba(255,255,255,.14); box-shadow:none; }
  #modeBadge {
    position:absolute; left:50%; top:86px; transform:translateX(-50%); z-index:4;
    padding:5px 10px; border-radius:999px; background:rgba(9,11,26,.48);
    border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px);
    color:#cbd2f4; font-size:10px; font-weight:900; letter-spacing:.13em; text-transform:uppercase;
    pointer-events:none; opacity:0; transition:opacity .2s ease;
  }
  #modeBadge.show { opacity:1; }
  #trophyBtn {
    pointer-events:auto; position:absolute; left:92px; top:112px; z-index:4;
    height:38px; padding:0 12px; background:rgba(9,11,26,.48); color:#fff;
    border:1px solid rgba(255,255,255,.09); box-shadow:none; backdrop-filter:blur(8px);
    font-size:11px;
  }
  #summaryOverlay, #achievementOverlay {
    position:absolute; inset:0; z-index:10; display:none; place-items:center;
    background:rgba(3,4,10,.76); backdrop-filter:blur(13px);
  }
  #summaryOverlay.show, #achievementOverlay.show { display:grid; }
  .summaryPanel {
    width:min(92vw,560px); padding:26px; border-radius:28px;
    background:linear-gradient(180deg,rgba(28,31,62,.98),rgba(8,9,22,.98));
    border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 100px rgba(0,0,0,.6);
    text-align:center;
  }
  .summaryPanel h2 { margin:7px 0 4px; font-size:38px; letter-spacing:-.05em; }
  .summaryLead { color:#aeb6dc; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
  #summaryScore { font-size:48px; font-weight:1000; letter-spacing:-.05em; margin:10px 0 16px; }
  .summaryGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 20px; }
  .summaryStat { padding:12px 8px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); }
  .summaryStat b { display:block; font-size:20px; }
  .summaryStat span { color:#9ea6c9; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
  .summaryActions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  .secondaryBtn { background:rgba(255,255,255,.08); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.09); }
  #newBest { color:#ffd45e; font-weight:1000; min-height:20px; }
  #dailyResult { color:#7ef9ff; font-weight:900; min-height:18px; margin-top:4px; }
  .achievementList { display:grid; gap:8px; text-align:left; max-height:60vh; overflow:auto; }
  .achievementItem { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 13px; border-radius:15px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.06); }
  .achievementItem.locked { opacity:.46; }
  .achievementItem b { display:block; font-size:13px; }
  .achievementItem span { color:#9da4c7; font-size:11px; }
  .achievementReward { color:#ffd45e !important; font-weight:900; white-space:nowrap; }
  #feedbackMarker { position:absolute; pointer-events:none; z-index:3; opacity:0; transform:translate(-50%,-50%); text-align:center; }
  #feedbackMarker.show { animation:feedbackPop 1.25s ease-out forwards; }
  #feedbackMarker .markerLine { width:2px; height:34px; margin:0 auto 5px; background:linear-gradient(#ff7d9f,transparent); box-shadow:0 0 10px rgba(255,125,159,.4); }
  #feedbackMarker b { display:block; font-size:14px; letter-spacing:.08em; }
  #feedbackMarker span { color:#b9c0df; font-size:11px; }
  @keyframes feedbackPop { 0%{opacity:0;transform:translate(-50%,-35%) scale(.8)} 15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)} 70%{opacity:1} 100%{opacity:0;transform:translate(-50%,-68%) scale(.96)} }
  #version { position:absolute; right:18px; bottom:8px; color:rgba(180,188,218,.35); font-size:9px; letter-spacing:.1em; pointer-events:none; }
  .startActions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
  #dailyBtn { background:rgba(255,255,255,.09); color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.09); }
  @media(max-width:650px){
    #trophyBtn{left:88px;top:106px;}
    #modeBadge{top:108px;}
    .summaryGrid{grid-template-columns:repeat(2,1fr);}
    #summaryScore{font-size:40px;}
  }