:root{ --accent:#cba6f7; --on-accent:#1e1e2e; }
  [data-theme="light"]{
    --bg:var(--accent); --ink:#2b2a35; --ink-soft:rgba(43,42,53,.6);
    --panel:rgba(255,255,255,.5); --tile:rgba(255,255,255,.92); --chip:rgba(255,255,255,.6);
    --sheet:#ffffff; --soft:color-mix(in srgb,var(--accent) 22%,white); --line:rgba(0,0,0,.07);
    --shadow:rgba(0,0,0,.10); --dim:rgba(43,42,53,.75);
  }
  [data-theme="dark"]{
    --bg:#1b1b1f; --ink:#e7e6ee; --ink-soft:rgba(231,230,238,.55);
    --panel:#2a2a30; --tile:#3b3b43; --chip:#2a2a30;
    --sheet:#25252b; --soft:#33333b; --line:rgba(255,255,255,.07);
    --shadow:rgba(0,0,0,.4); --dim:rgba(231,230,238,.8);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%}
  body{font-family:'Fredoka',system-ui,sans-serif;color:var(--ink);background:var(--bg);
    min-height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none;transition:background .3s,color .3s}

  header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0;z-index:5}
  .level-pill{background:var(--chip);border:1px solid var(--line);padding:8px 16px;border-radius:999px;
    font-weight:600;font-size:15px;letter-spacing:.06em;box-shadow:0 4px 14px var(--shadow);transition:opacity .25s,transform .25s}
  .level-pill b{font-size:20px;margin-left:4px}
  .level-pill.hide{opacity:0;transform:translateY(-8px);pointer-events:none}
  .icons{display:flex;gap:10px}
  .circle-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--chip);
    display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:0 4px 14px var(--shadow);transition:transform .15s}
  .circle-btn:active{transform:scale(.92)}
  .circle-btn svg{width:22px;height:22px}

  main{position:relative;z-index:1;height:100vh;display:flex;align-items:center;justify-content:center;padding:80px 18px 80px}
  .screen{width:100%;max-width:420px;display:none;flex-direction:column;align-items:center}
  .screen.on{display:flex;animation:pop .35s ease}
  @keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* menu */
  .logo{display:grid;grid-template-columns:repeat(3,24px);gap:6px;margin-bottom:16px;padding:8px;border-radius:14px;background:var(--panel)}
  .logo i{width:24px;height:24px;border-radius:7px;background:var(--tile);animation:logoflash 3.6s infinite}
  .logo i:nth-child(1){animation-delay:0s}.logo i:nth-child(5){animation-delay:.6s}
  .logo i:nth-child(9){animation-delay:1.2s}.logo i:nth-child(3){animation-delay:1.8s}
  .logo i:nth-child(7){animation-delay:2.4s}
  .logo i:nth-child(2),.logo i:nth-child(4),.logo i:nth-child(6),.logo i:nth-child(8){animation:none}
  @keyframes logoflash{0%,12%{background:var(--accent);transform:scale(1.12)}20%,100%{background:var(--tile);transform:none}}
  h1{margin:0 0 30px;font-size:40px;font-weight:700}
  .mode{width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:14px;border-radius:22px;
    background:var(--panel);border:1px solid var(--line);cursor:pointer;text-align:left;
    font-family:inherit;color:var(--ink);box-shadow:0 8px 24px var(--shadow);transition:transform .15s}
  .mode:active{transform:scale(.97)}
  .mode .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--accent);color:var(--on-accent)}
  .mode .ic svg{width:28px;height:28px}
  .mode h3{margin:0;font-size:22px;font-weight:600}

  /* game */
  .status{height:34px;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
  .dot{width:16px;height:16px;border-radius:50%;background:transparent;border:2px solid var(--dim);transition:all .3s}
  .dot.used{background:var(--dim);transform:scale(1.15)}
  [data-theme="light"] .dot{background:#fff;border-color:#fff;opacity:.5}
  [data-theme="light"] .dot.used{opacity:1}
  .timer{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--chip);padding:2px 16px;border-radius:999px;border:1px solid var(--line)}
  .grid{width:min(88vw,360px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px;
    border-radius:28px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 34px var(--shadow)}
  .tile{border:none;border-radius:20px;background:var(--tile);cursor:pointer;
    box-shadow:inset 0 -4px 0 rgba(0,0,0,.06),0 3px 8px var(--shadow);transition:background .12s,transform .12s,box-shadow .12s}
  .grid.locked .tile{cursor:default}
  .tile.lit{background:var(--accent);transform:scale(1.06)}
  .tile.tap{background:var(--accent);transform:scale(.94)}
  .tile.wrong{background:var(--dim)!important;animation:shake .4s}
  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
  .progress{margin-top:20px;display:flex;gap:5px;justify-content:center;flex-wrap:wrap;max-width:320px;min-height:10px}
  .progress span{width:8px;height:8px;border-radius:50%;background:var(--chip);border:1px solid var(--line)}
  .progress span.done{background:var(--ink)}

  /* bomb fuse */
  .fuse{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);
    width:min(88vw,360px);display:flex;align-items:center;gap:10px;z-index:4;transition:opacity .25s}
  .fuse.hide{opacity:0;pointer-events:none}
  .track{flex:1;height:10px;border-radius:999px;background:var(--chip);border:1px solid var(--line);position:relative}
  .fill{position:absolute;right:0;top:-1px;bottom:-1px;width:100%;border-radius:999px;background:var(--accent)}
  [data-theme="light"] .fill{background:#fff}
  .fill.refill{transition:width .45s cubic-bezier(.2,.8,.2,1)}
  .spark{position:absolute;left:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--accent);
    border:2px solid var(--accent);animation:spark .12s infinite alternate}
  .fuse.paused .spark{animation:none;opacity:.45}
  @keyframes spark{from{transform:scale(.7) rotate(0)}to{transform:scale(1.25) rotate(45deg)}}
  .bomb{width:34px;height:34px;flex:none;color:var(--ink)}
  .bomb svg{width:100%;height:100%;display:block}
  .fuse.low:not(.paused) .bomb{animation:wiggle .28s infinite}
  .fuse.low:not(.paused) .fill{animation:throb .4s infinite alternate}
  @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.08)}75%{transform:rotate(10deg) scale(1.08)}}
  @keyframes throb{to{opacity:.55}}
  .flying{position:fixed;z-index:30;pointer-events:none;color:var(--ink)}
  .boom{position:fixed;left:50%;top:50%;width:0;height:0;z-index:31;pointer-events:none}
  .boom i{position:absolute;border-radius:50%}
  .cover{position:fixed;left:50%;top:50%;border-radius:50%;background:var(--accent);z-index:15;pointer-events:none}

  /* modal */
  .overlay{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);
    display:none;align-items:center;justify-content:center;padding:20px}
  .overlay.on{display:flex;animation:fade .2s}
  @keyframes fade{from{opacity:0}}
  .sheet{width:100%;max-width:360px;max-height:90vh;overflow:auto;background:var(--sheet);border-radius:26px;padding:22px 22px 20px;
    box-shadow:0 20px 50px rgba(0,0,0,.3);animation:pop .25s;position:relative}
  .sheet h2{margin:0 0 14px;font-size:24px;font-weight:600}
  .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;background:var(--soft);color:var(--ink);font-size:18px;cursor:pointer}
  .sec{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 8px;font-weight:600}
  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .stat{background:var(--soft);border-radius:16px;padding:12px 14px}
  .stat .v{font-size:24px;font-weight:600}
  .stat .k{font-size:13px;color:var(--ink-soft)}
  .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
  .seg{display:flex;background:var(--soft);border-radius:12px;padding:3px}
  .seg button{border:none;background:none;font-family:inherit;font-size:14px;padding:6px 10px;border-radius:9px;color:var(--ink);cursor:pointer}
  .seg button.on{background:var(--accent);color:var(--on-accent);font-weight:600}
  .switch{width:50px;height:30px;border-radius:999px;background:var(--soft);border:none;position:relative;cursor:pointer;transition:background .2s;flex:none}
  .switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
  .switch.on{background:var(--accent)}.switch.on::after{left:23px}
  .swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:4px 0 12px;border-bottom:1px solid var(--line)}
  .sw{aspect-ratio:1;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0;outline:none}
  .sw.on{border-color:var(--ink)}
  .btn{width:100%;border:none;border-radius:16px;padding:14px;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;margin-top:10px;color:var(--ink)}
  .btn.primary{background:var(--accent);color:var(--on-accent)}
  .btn.soft{background:var(--soft)}
  .btn.quit{transition:background .12s,color .12s,transform .12s}
  .btn.quit:active,.btn.quit.pressed{background:#f38ba8;color:#1e1e2e;transform:scale(.97)}
  .btn.charge{position:relative;overflow:hidden;touch-action:none}
  .btn.charge::before{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--accent)}
  .btn.charge span{position:relative}
  .btn.charge.charging{animation:shiver .09s linear infinite}
  .btn.charge.done{background:var(--accent);color:var(--on-accent)}
  @keyframes shiver{0%{transform:translate(0,0)}25%{transform:translate(-1.5px,.5px) rotate(-.4deg)}50%{transform:translate(1.5px,-.5px)}75%{transform:translate(-1px,-.5px) rotate(.4deg)}100%{transform:translate(1px,.5px)}}
  .big{font-size:56px;font-weight:700;text-align:center;margin:6px 0 0;display:flex;align-items:center;justify-content:center;gap:10px}
  .big svg{width:30px;height:30px;color:var(--accent)}
  .sub{text-align:center;color:var(--ink-soft);margin:0 0 10px}