@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

  :root{
    --bg-0:#0a0c18;
    --bg-1:#12162a;
    --bg-2:#1a2038;
    --bg-3:#232b4a;
    --line: rgba(255,255,255,0.08);
    --ink:#eef1fb;
    --ink-dim:#8d97bd;
    --gold:#f4c15c;
    --cyan:#5fe3d0;
    --danger:#ff5d6c;

    --c-red:#ff5d78;
    --c-blue:#4da6ff;
    --c-green:#3fd68f;
    --c-yellow:#ffcf56;
    --c-purple:#c48bff;
  }

  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:'Manrope', system-ui, sans-serif;
    background:
      radial-gradient(1200px 800px at 15% -10%, #1b2140 0%, transparent 55%),
      radial-gradient(1000px 700px at 110% 10%, #1a2b3c 0%, transparent 50%),
      var(--bg-0);
    color:var(--ink);
    overflow:hidden;
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color: transparent;
  }

  #app{ position:relative; width:100%; height:100vh; }

  .screen{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center;
    opacity:0; pointer-events:none;
    transform: scale(0.98);
    transition: opacity .32s ease, transform .32s ease;
    overflow-y:auto;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
  }
  .screen.active{ opacity:1; pointer-events:auto; transform:scale(1); }

  /* ---------- shared bits ---------- */
  .wordmark{
    display:flex; align-items:center; gap:12px;
    font-weight:800; letter-spacing:-0.02em;
    margin-top:120px;
  }
  .wordmark .gemdot{
    width:22px;height:22px; border-radius:7px;
    background: linear-gradient(140deg, var(--c-blue), var(--c-purple));
    box-shadow: 0 0 18px rgba(93,163,255,.55);
    transform: rotate(45deg);
  }
  .btn{
    font-family:inherit;
    border:none; cursor:pointer;
    border-radius:14px;
    padding:14px 26px;
    font-weight:700; font-size:16px;
    color:var(--ink);
    background:var(--bg-3);
    border:1px solid var(--line);
    transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .btn:active{ transform: scale(0.95); }
  .btn.primary{
    background: linear-gradient(135deg, var(--cyan), #3ab6ff);
    color:#06111c;
    box-shadow: 0 10px 26px rgba(95,227,208,.25);
  }
  .btn.ghost{
    background:transparent;
  }
  .btn:disabled{ opacity:.35; cursor:default; }
  .icon-btn{
    width:44px;height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg-2); border:1px solid var(--line);
    color:var(--ink); cursor:pointer; flex-shrink:0;
  }
  .icon-btn:active{ transform:scale(0.92); }

  /* ---------- TITLE ---------- */
  #screen-title{ justify-content:center; gap:34px; }
  #screen-title .wordmark{ font-size:44px; }
  .tagline{ color:var(--ink-dim); font-size:15px; letter-spacing:.02em; margin-top:-18px;}
  .title-actions{ display:flex; flex-direction:column; gap:12px; width:min(320px, 80vw); }
  .title-hero{
    width:min(320px,70vw); aspect-ratio:1/1; position:relative;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:10px;
  }
  .title-hero .cell{
    border-radius:16px; background:var(--bg-1); border:1px solid var(--line);
  }
  .title-hero .cell.g{ display:flex; align-items:center; justify-content:center; }
  .title-hero .gem{
    width:62%; height:62%; border-radius:30%;
    transform: rotate(45deg);
  }
  .footer-note{ color:var(--ink-dim); font-size:12px; margin-top:6px;}

  /* ---------- LEVEL SELECT ---------- */
  #screen-levels{ padding-top:26px; gap:18px; }
  .topbar{
    width:min(720px,92vw); display:flex; align-items:center; justify-content:space-between;
  }
  .level-grid{
    width:min(720px,92vw);
    display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
    gap:14px; padding-bottom:30px;
  }
  .level-card{
    aspect-ratio:1/1; border-radius:16px; background:var(--bg-1); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    cursor:pointer; position:relative;
  }
  .level-card .num{ font-size:22px; font-weight:800; }
  .level-card .stars{ display:flex; gap:2px; }
  .level-card .stars svg{ width:11px; height:11px; }
  .level-card.locked{ opacity:.35; cursor:default; }
  .level-card:not(.locked):active{ transform:scale(0.94); }
  .level-card.locked .num{ font-size:0; }
  .level-card.locked::after{ content:'🔒'; font-size:18px; }

  /* ---------- GAME ---------- */
  #screen-game{ justify-content:flex-start; padding-top:14px; gap:14px; }
  .game-topbar{
    width:min(560px,94vw); display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .game-topbar .mid{ display:flex; flex-direction:column; align-items:center; }
  .game-topbar .mid .lvl-label{ font-size:12px; color:var(--ink-dim); font-weight:700; letter-spacing:.04em;}
  .game-topbar .mid .moves{ font-size:20px; font-weight:800; }
  .stat-pill{
    background:var(--bg-1); border:1px solid var(--line); border-radius:12px;
    padding:8px 14px; font-size:13px; color:var(--ink-dim); font-weight:700;
    display:flex; align-items:center; gap:6px;
  }

  .board-wrap{ display:flex; align-items:center; justify-content:center; width:100%; flex:1; min-height:0; }
  .board{
    position:relative; background:var(--bg-1);
    border:1px solid var(--line); border-radius:18px;
    box-shadow: inset 0 0 60px rgba(0,0,0,.25);
    touch-action:none;
  }
  .cell-bg{
    position:absolute; border-radius:10px; background:var(--bg-2);
  }
  .cell-bg.wall{
    background: repeating-linear-gradient(135deg, var(--bg-3), var(--bg-3) 6px, #0c0f1d 6px, #0c0f1d 12px);
    border: 1px solid var(--line);
  }
  .target{
    position:absolute; border-radius:10px;
    border: 2px dashed var(--target-color, var(--ink-dim));
    opacity:.55;
  }
  .target.filled{ opacity:1; border-style:solid; }
  .gem{
    position:absolute; border-radius:30%;
    transition: left .17s cubic-bezier(.4,0,.2,1), top .17s cubic-bezier(.4,0,.2,1), transform .17s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.15);
  }
  .gem.locked{ box-shadow: 0 0 0 3px rgba(255,255,255,.65), 0 0 22px currentColor, inset 0 0 0 2px rgba(255,255,255,.3); }
  .gem::after{
    content:''; position:absolute; inset:14%; border-radius:30%;
    background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  }

  .controls-row{ display:flex; align-items:center; gap:26px; margin-top:2px; }
  .dpad{
    display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:6px;
  }
  .dpad button{
    border-radius:12px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px;
  }
  .dpad button:active{ background:var(--bg-3); transform:scale(0.92); }
  .dpad .up{grid-column:2;grid-row:1;} .dpad .left{grid-column:1;grid-row:2;}
  .dpad .right{grid-column:3;grid-row:2;} .dpad .down{grid-column:2;grid-row:3;}
  .dpad .mid{grid-column:2;grid-row:2; background:transparent; border:none; }

  .side-actions{ display:flex; flex-direction:column; gap:10px; }
  .side-actions .icon-btn{ position:relative; }
  .hint-badge{
    position:absolute; top:-6px; right:-6px; background:var(--gold); color:#231a02;
    font-size:10px; font-weight:800; border-radius:8px; padding:1px 5px;
  }

  .hint-flash{
    position:absolute; inset:0; border-radius:18px; pointer-events:none;
    box-shadow: 0 0 0 3px var(--gold) inset;
    opacity:0; transition:opacity .2s ease;
  }
  .hint-flash.show{ opacity:1; animation:pulseHint 1s ease-in-out 2; }
  @keyframes pulseHint{ 0%,100%{opacity:.15;} 50%{opacity:1;} }

  .toast{
    position:fixed; left:50%; top:18px; transform:translateX(-50%) translateY(-20px);
    background:var(--bg-3); border:1px solid var(--line); padding:10px 18px; border-radius:12px;
    font-size:14px; font-weight:700; opacity:0; transition: all .25s ease; z-index:50; pointer-events:none;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---------- MODAL ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(6,8,16,.72); backdrop-filter: blur(3px);
    display:flex; align-items:center; justify-content:center; z-index:60;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .modal-backdrop.show{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--bg-1); border:1px solid var(--line); border-radius:22px;
    padding:30px 26px; width:min(360px,86vw); text-align:center;
    transform: translateY(14px) scale(.97); transition: transform .25s ease;
  }
  .modal-backdrop.show .modal{ transform:translateY(0) scale(1); }
  .modal h2{ margin:0 0 4px; font-size:22px; }
  .modal p.sub{ color:var(--ink-dim); margin:0 0 18px; font-size:14px; }
  .modal-stars{ display:flex; justify-content:center; gap:10px; margin:10px 0 20px; }
  .modal-stars svg{ width:38px; height:38px; }
  .modal-actions{ display:flex; flex-direction:column; gap:10px; }

  .star-on{ fill:var(--gold); }
  .star-off{ fill:none; stroke:var(--ink-dim); stroke-width:1.5; }

  .howto-list{ text-align:left; width:min(420px,88vw); display:flex; flex-direction:column; gap:16px; color:var(--ink-dim); font-size:14px; line-height:1.5; }
  .howto-list b{ color:var(--ink); }
  .howto-num{
    display:inline-flex; width:22px;height:22px; border-radius:7px; background:var(--bg-3);
    align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--cyan); margin-right:8px;
  }