:root{
    --bg-deep:#050914;
    --bg-panel:#0a1224;
    --bg-panel-2:#0d1830;
    --cyan:#22d3ee;
    --cyan-glow:rgba(34,211,238,.55);
    --amber:#ffab4a;
    --amber-glow:rgba(255,171,74,.55);
    --text:#e8f1ff;
    --text-dim:#7c8bab;
    --border:#1c2b4a;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{
    background:radial-gradient(ellipse at 50% -10%, #0e1c3d 0%, var(--bg-deep) 55%) fixed;
    color:var(--text);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed;inset:0;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.35) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 85% 15%, rgba(255,255,255,.4) 50%, transparent 51%),
      radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.3) 50%, transparent 51%),
      radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,.4) 50%, transparent 51%);
    background-size:600px 600px;
    opacity:.6;
    pointer-events:none;
    z-index:0;
  }
  .wrap{
    position:relative;z-index:1;
    max-width:480px;
    margin:0 auto;
    padding:28px 16px 60px;
  }
  .eyebrow{
    font-family:'Orbitron',sans-serif;
    font-size:11px;
    letter-spacing:.35em;
    color:var(--cyan);
    text-align:center;
    text-transform:uppercase;
    opacity:.8;
    margin-bottom:6px;
  }
  h1{
    font-family:'Orbitron',sans-serif;
    font-weight:900;
    font-size:34px;
    text-align:center;
    letter-spacing:.04em;
    background:linear-gradient(90deg, var(--amber), #fff 45%, var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 18px rgba(120,180,255,.25));
  }
  .tagline{
    text-align:center;
    color:var(--text-dim);
    font-size:13px;
    margin-top:6px;
    line-height:1.6;
  }
  .tagline b{color:var(--text);font-weight:600;}

  .goalbar{
    margin-top:16px;
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
  }
  .goal-target{
    font-size:12.5px;
    color:var(--text);
    text-align:center;
  }
  .goal-target b{
    color:var(--amber);
    font-family:'Orbitron',sans-serif;
  }

  .charge-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
  }
  .charge-label-fixed{
    font-family:'Orbitron',sans-serif;
    font-size:9.5px;
    letter-spacing:.1em;
    color:var(--text-dim);
    white-space:nowrap;
  }
  .charge-track{
    flex:1;
    height:8px;
    border-radius:5px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    overflow:hidden;
  }
  .charge-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--cyan), #7dd3fc);
    box-shadow:0 0 8px var(--cyan-glow);
    transition:width .15s ease, background .3s ease;
  }
  .charge-fill.warn{
    background:linear-gradient(90deg, var(--amber), #ffd27a);
    box-shadow:0 0 8px var(--amber-glow);
  }
  .charge-fill.danger{
    background:linear-gradient(90deg, #ff5a5a, #ffab4a);
    box-shadow:0 0 12px rgba(255,90,90,.6);
    animation:chargePulse .5s ease-in-out infinite;
  }
  @keyframes chargePulse{
    0%,100%{opacity:1;}
    50%{opacity:.6;}
  }
  .charge-label{
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    color:var(--text-dim);
    white-space:nowrap;
  }

  .critical-flash{
    position:absolute;
    inset:0;
    border-radius:12px;
    background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,90,90,.4) 45%, transparent 75%);
    pointer-events:none;
    z-index:8;
    animation:criticalFlashAnim .7s ease-out forwards;
  }
  @keyframes criticalFlashAnim{
    0%{opacity:0; transform:scale(.3);}
    25%{opacity:1; transform:scale(1.05);}
    100%{opacity:0; transform:scale(1.6);}
  }
  .milestones{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:8px;
    padding:0 2px;
  }
  .milestones::before{
    content:"";
  }
  .ms-dot{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    flex:1;
    position:relative;
  }
  .ms-dot:not(:last-child)::after{
    content:"";
    position:absolute;
    top:5px;
    left:50%;
    width:100%;
    height:2px;
    background:var(--border);
    z-index:0;
  }
  .ms-dot.done:not(:last-child)::after{
    background:var(--cyan);
  }
  .ms-circle{
    width:11px;height:11px;
    border-radius:50%;
    background:var(--bg-deep);
    border:2px solid var(--border);
    z-index:1;
  }
  .ms-dot.done .ms-circle{
    border-color:var(--cyan);
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan-glow);
  }
  .ms-label{
    font-family:'Orbitron',sans-serif;
    font-size:9.5px;
    color:var(--text-dim);
  }
  .ms-dot.done .ms-label{color:var(--cyan);}
  .ms-diff{
    font-size:8px;
    color:var(--text-dim);
    opacity:.75;
    margin-top:1px;
    white-space:nowrap;
  }
  .ms-dot.done .ms-diff{color:var(--amber); opacity:1;}

  .achievement-toast{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    background:var(--bg-panel-2);
    border:1px solid var(--amber);
    padding:8px 16px;
    border-radius:12px;
    box-shadow:0 0 18px var(--amber-glow);
    z-index:7;
    text-align:center;
    animation:achToastPop 2.2s ease forwards;
    pointer-events:none;
  }
  .ach-toast-title{
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    letter-spacing:.1em;
    color:var(--amber);
  }
  .ach-toast-label{
    font-size:13px;
    color:#fff;
    margin-top:2px;
    font-weight:600;
  }
  @keyframes achToastPop{
    0%{opacity:0; transform:translate(-50%,-10px);}
    10%{opacity:1; transform:translate(-50%,0);}
    85%{opacity:1;}
    100%{opacity:0; transform:translate(-50%,-8px);}
  }

  .ach-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
  }
  .ach-count{
    font-family:'Orbitron',sans-serif;
    font-size:12px;
    color:var(--amber);
  }
  .ach-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--border);
    opacity:.5;
  }
  .ach-row.unlocked{opacity:1;}
  .ach-icon{font-size:16px; line-height:1.4;}
  .ach-text{display:flex; flex-direction:column;}
  .ach-label{font-size:12.5px; font-weight:600; color:var(--text);}
  .ach-row.unlocked .ach-label{color:var(--amber);}
  .ach-desc{font-size:11px; color:var(--text-dim); margin-top:1px;}

  .next-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:10px;
    padding-top:8px;
    border-top:1px dashed var(--border);
  }
  .next-label{
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    letter-spacing:.15em;
    color:var(--text-dim);
  }
  .next-tile{
    width:28px;height:28px;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:12px;
    color:#fff;
    background:linear-gradient(160deg, #16223f, #0c1428);
    position:relative;
  }
  .next-tile.pos{border:1.5px solid var(--amber); box-shadow:0 0 8px var(--amber-glow);}
  .next-tile.neg{border:1.5px solid var(--cyan); box-shadow:0 0 8px var(--cyan-glow);}
  .next-tile .charge{
    position:absolute;
    top:0px; right:2px;
    font-size:8px;
  }
  .next-tile.pos .charge{color:var(--amber);}
  .next-tile.neg .charge{color:var(--cyan);}

  .milestone-toast{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    background:var(--bg-panel-2);
    border:1px solid var(--amber);
    color:var(--amber);
    font-family:'Orbitron',sans-serif;
    font-size:12px;
    padding:6px 14px;
    border-radius:20px;
    box-shadow:0 0 16px var(--amber-glow);
    z-index:6;
    animation:toastPop 1.6s ease forwards;
    pointer-events:none;
  }
  @keyframes toastPop{
    0%{opacity:0; transform:translate(-50%,-8px);}
    12%{opacity:1; transform:translate(-50%,0);}
    80%{opacity:1;}
    100%{opacity:0; transform:translate(-50%,-6px);}
  }

  .scorebar{
    display:flex;
    gap:10px;
    margin:20px 0 14px;
  }
  .score-box{
    flex:1;
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 8px;
    text-align:center;
    position:relative;
  }
  .score-box .label{
    font-size:10px;
    letter-spacing:.15em;
    color:var(--text-dim);
    text-transform:uppercase;
    font-family:'Orbitron',sans-serif;
  }
  .score-box .value{
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    font-size:22px;
    margin-top:2px;
  }
  .btn{
    font-family:'Orbitron',sans-serif;
    font-size:12px;
    letter-spacing:.08em;
    background:var(--bg-panel-2);
    color:var(--text);
    border:1px solid var(--cyan);
    border-radius:8px;
    padding:0 16px;
    cursor:pointer;
    transition:.15s;
    box-shadow:0 0 12px rgba(34,211,238,.15) inset;
  }
  .btn:hover{background:rgba(34,211,238,.12);}
  .btn:active{transform:scale(.96);}

  .board-frame{
    position:relative;
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 20px 60px -20px rgba(0,0,0,.7);
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    overscroll-behavior:contain;
  }
  .corner{
    position:absolute;
    width:18px;height:18px;
    border-color:var(--cyan);
    opacity:.7;
  }
  .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:6px 0 0 0;}
  .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--amber);border-right:2px solid var(--amber);border-radius:0 6px 0 0;}
  .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--amber);border-left:2px solid var(--amber);border-radius:0 0 0 6px;}
  .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);border-radius:0 0 6px 0;}

  .grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(4, 1fr);
    gap:10px;
    aspect-ratio:1/1;
  }
  .cell{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    border-radius:10px;
  }
  .tile-layer{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:repeat(4, 1fr);
    gap:10px;
    touch-action:none;
  }
  .tile{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-family:'Orbitron',sans-serif;
    font-weight:700;
    color:#fff;
    background:linear-gradient(160deg, #16223f, #0c1428);
    transition:left .12s ease, top .12s ease, transform .12s ease;
    will-change:left, top, transform;
  }
  .tile.pos{
    border:1.5px solid var(--amber);
    box-shadow:0 0 14px var(--amber-glow), inset 0 0 10px rgba(255,171,74,.08);
  }
  .tile.neg{
    border:1.5px solid var(--cyan);
    box-shadow:0 0 14px var(--cyan-glow), inset 0 0 10px rgba(34,211,238,.08);
  }
  .tile .charge{
    position:absolute;
    top:4px; right:6px;
    font-size:11px;
    opacity:.8;
    font-family:'Orbitron',sans-serif;
  }
  .tile.pos .charge{color:var(--amber);}
  .tile.neg .charge{color:var(--cyan);}

  @keyframes pop{
    0%{transform:scale(.5);opacity:0;}
    70%{transform:scale(1.08);opacity:1;}
    100%{transform:scale(1);}
  }
  @keyframes mergePulse{
    0%{transform:scale(1);}
    40%{transform:scale(1.18);}
    100%{transform:scale(1);}
  }
  .tile.spawn{animation:pop .18s ease-out;}
  .tile.merged{animation:mergePulse .18s ease-out;}

  .burst{
    position:absolute;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    pointer-events:none;
    background:radial-gradient(circle, rgba(255,255,255,.9), rgba(180,220,255,.2) 60%, transparent 70%);
    animation:burstAnim .38s ease-out forwards;
  }
  @keyframes burstAnim{
    0%{transform:scale(.6);opacity:1;}
    100%{transform:scale(1.9);opacity:0;}
  }

  .rules{
    margin-top:16px;
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
  }
  .rules summary{
    cursor:pointer;
    padding:12px 14px;
    font-family:'Orbitron',sans-serif;
    font-size:12px;
    letter-spacing:.08em;
    color:var(--cyan);
    list-style:none;
  }
  .rules summary::-webkit-details-marker{display:none;}
  .rules-body{
    padding:0 16px 16px;
    font-size:13px;
    line-height:1.9;
    color:var(--text-dim);
  }
  .rules-body b{color:var(--text);}
  .chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:1px 7px;
    border-radius:6px;
    font-family:'Orbitron',sans-serif;
    font-size:11px;
    font-weight:700;
  }
  .chip.pos{border:1px solid var(--amber);color:var(--amber);}
  .chip.neg{border:1px solid var(--cyan);color:var(--cyan);}

  .autoplay-label{
    font-size:11px;
    color:var(--text-dim);
    margin:12px 0 6px;
    letter-spacing:.05em;
  }
  .strategy-select, .speed-select{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .strategy-btn{
    font-family:'Orbitron',sans-serif;
    font-size:11px;
    padding:7px 10px;
    border-radius:7px;
    background:var(--bg-panel-2);
    border:1px solid var(--border);
    color:var(--text-dim);
    cursor:pointer;
    transition:.15s;
  }
  .strategy-btn:hover{border-color:var(--cyan);}
  .strategy-btn.active{
    border-color:var(--cyan);
    color:var(--cyan);
    box-shadow:0 0 8px var(--cyan-glow);
  }
  .autoplay-controls{
    display:flex;
    gap:8px;
    margin-top:14px;
  }
  .autoplay-controls .btn{flex:1;}
  .autoplay-status{
    margin-top:10px;
    text-align:center;
    font-size:12px;
    color:var(--amber);
    font-family:'Orbitron',sans-serif;
  }
  .best-table{
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
    font-size:12px;
  }
  .best-table th, .best-table td{
    padding:6px 4px;
    border-bottom:1px solid var(--border);
    text-align:left;
  }
  .best-table th{
    color:var(--text-dim);
    font-family:'Orbitron',sans-serif;
    font-weight:500;
    font-size:10px;
    letter-spacing:.08em;
  }
  .best-table td:last-child, .best-table th:last-child{
    text-align:right;
    font-family:'Orbitron',sans-serif;
  }

  .overlay{
    position:absolute;inset:16px;
    background:rgba(5,9,20,.86);
    border-radius:12px;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    z-index:5;
    backdrop-filter:blur(2px);
  }
  .overlay.show{display:flex;}
  .overlay h2{
    font-family:'Orbitron',sans-serif;
    font-size:22px;
    letter-spacing:.05em;
  }
  .overlay p{color:var(--text-dim);font-size:13px;}

  .adslot{margin-top:22px;min-height:90px;}
  .hint{
    text-align:center;
    color:var(--text-dim);
    font-size:11.5px;
    margin-top:12px;
  }