:root{
    --ink:#0A0B10;
    --ink-2:#12141E;
    --panel:#181B27;
    --panel-2:#1F2333;
    --line: rgba(255,255,255,0.08);
    --paper:#EDEEF2;
    --dim:#8388A0;
    --volt:#D4FF3F;
    --riot:#FF3D6E;
    --calm:#3FE0D0;
    --sky:#4DA8FF;
    --amber:#FFB13D;
    --violet:#B98CFF;
    --pink:#FF6FB0;
    --font-display:'Bungee', cursive;
    --font-body:'Space Grotesk', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--ink);color:var(--paper);font-family:var(--font-body);height:100%;overflow-x:hidden;}
  #app{min-height:100vh;display:flex;flex-direction:column;position:relative;}

  /* ---------- background texture ---------- */
  body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(212,255,63,0.06), transparent 40%),
      radial-gradient(circle at 85% 75%, rgba(255,61,110,0.07), transparent 40%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  }

  /* ---------- top brand bar ---------- */
  .brandbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;border-bottom:1px solid var(--line);}
  .brand{font-family:var(--font-display);font-size:22px;letter-spacing:1px;color:var(--paper);display:flex;align-items:center;gap:10px;}
  .brand .dot{width:10px;height:10px;background:var(--volt);border-radius:2px;transform:rotate(45deg);box-shadow:0 0 12px var(--volt);}
  .brand small{font-family:var(--font-mono);font-size:11px;color:var(--dim);letter-spacing:2px;margin-left:8px;font-weight:600;}
  .backbtn{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;color:var(--dim);background:none;border:1px solid var(--line);padding:8px 14px;border-radius:8px;cursor:pointer;transition:.15s;}
  .backbtn:hover{color:var(--paper);border-color:var(--paper);}

  /* ---------- MENU ---------- */
  #menu-screen{position:relative;z-index:1;padding:36px 26px 60px;max-width:1080px;margin:0 auto;width:100%;}
  .menu-hero{margin-bottom:30px;}
  .menu-hero h1{font-family:var(--font-display);font-size:clamp(28px,5vw,44px);margin:0 0 10px;line-height:1.15;}
  .menu-hero h1 span{color:var(--volt);}
  .menu-hero p{color:var(--dim);font-size:15px;max-width:560px;margin:0;}
  .mode-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(230px,1fr));gap:16px;margin-top:28px;}
  .mode-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;cursor:pointer;overflow:hidden;transition:transform .15s ease, border-color .15s ease;text-align:left;}
  .mode-card:hover{transform:translateY(-4px);border-color:var(--accent);}
  .mode-card::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);}
  .mode-card .code{font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:3px;color:var(--accent);}
  .mode-card h3{font-family:var(--font-display);font-size:18px;margin:10px 0 8px;line-height:1.3;}
  .mode-card p{color:var(--dim);font-size:13px;line-height:1.5;margin:0 0 14px;min-height:52px;}
  .mode-card .meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--dim);border-top:1px dashed var(--line);padding-top:10px;}
  .mode-card .meta b{color:var(--paper);}
  .mode-card.locked{cursor:default;opacity:.55;}
  .mode-card.locked:hover{transform:none;border-color:var(--line);}
  .mode-card.locked .meta{color:var(--calm);}

  .tabs{display:flex;gap:6px;margin-bottom:6px;}
  .tab-btn{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;background:none;border:1px solid var(--line);color:var(--dim);padding:9px 16px;border-radius:9px 9px 0 0;cursor:pointer;}
  .tab-btn.active{color:var(--paper);border-color:var(--volt);background:var(--panel);}
  .tab-note{color:var(--dim);font-family:var(--font-mono);font-size:12px;margin:10px 0 0;}

  /* ---------- GAME SCREEN ---------- */
  #game-screen{display:none;position:relative;z-index:1;flex:1;flex-direction:column;padding:18px 22px 30px;max-width:900px;margin:0 auto;width:100%;}
  .hud{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .hud-left{display:flex;flex-direction:column;gap:4px;}
  .hud-mode-title{font-family:var(--font-display);font-size:18px;color:var(--accent, var(--volt));}
  .hud-rule{font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.5px;}
  .hud-stats{display:flex;gap:18px;align-items:center;}
  .stat{text-align:right;}
  .stat .label{font-family:var(--font-mono);font-size:10px;color:var(--dim);letter-spacing:1px;}
  .stat .value{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--paper);}
  .combo-tag{font-family:var(--font-mono);font-size:11px;background:var(--volt);color:#0A0B10;padding:3px 8px;border-radius:6px;font-weight:700;opacity:0;transform:scale(.8);transition:.15s;}
  .combo-tag.show{opacity:1;transform:scale(1);}

  .timerbar-wrap{width:100%;height:8px;background:var(--panel-2);border-radius:6px;overflow:hidden;margin-bottom:16px;border:1px solid var(--line);}
  .timerbar{height:100%;width:100%;background:var(--volt);transition:width .1s linear, background .3s;}

  .powerup-row{display:flex;gap:8px;margin-bottom:16px;}
  .pwr-btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;background:var(--panel);border:1px solid var(--line);color:var(--paper);padding:8px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.15s;}
  .pwr-btn:hover:not(:disabled){border-color:var(--accent, var(--volt));}
  .pwr-btn:disabled{opacity:.3;cursor:default;}

  .board-wrap{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;min-height:340px;display:flex;align-items:center;justify-content:center;}
  #board{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;width:100%;}

  .tile{
    font-family:var(--font-body);font-weight:600;font-size:14px;
    background:var(--panel-2);color:var(--paper);border:1px solid var(--line);
    border-radius:10px;padding:14px 10px;min-width:88px;text-align:center;cursor:pointer;
    user-select:none;transition:transform .12s ease, border-color .12s, background .12s;
    position:relative;
  }
  .tile:hover{transform:translateY(-2px);border-color:var(--dim);}
  .tile.selected{border-color:var(--volt);background:#242a17;color:var(--volt);}
  .tile.chain-selected{border-color:var(--sky);background:#152233;color:var(--sky);}
  .tile.correct-flash{animation:popCorrect .35s ease forwards;}
  .tile.wrong-flash{animation:wrongFlash .35s ease;}
  .tile.hint-glow{animation:hintPulse 1.4s ease 2;border-color:var(--amber) !important;}
  .tile.order-badge::before{
    content:attr(data-order);position:absolute;top:-8px;right:-8px;background:var(--sky);color:#03121c;
    font-family:var(--font-mono);font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  @keyframes popCorrect{0%{transform:scale(1);}50%{transform:scale(1.18);background:#123329;border-color:var(--calm);}100%{transform:scale(0);opacity:0;}}
  @keyframes wrongFlash{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);background:#3a1420;border-color:var(--riot);}75%{transform:translateX(5px);background:#3a1420;border-color:var(--riot);}}
  @keyframes hintPulse{0%,100%{box-shadow:0 0 0 rgba(255,177,61,0);}50%{box-shadow:0 0 16px rgba(255,177,61,0.8);}}

  .shake{animation:shakeBoard .5s;}
  @keyframes shakeBoard{
    10%,90%{transform:translate3d(-2px,0,0);}
    20%,80%{transform:translate3d(4px,0,0);}
    30%,50%,70%{transform:translate3d(-8px,0,0);}
    40%,60%{transform:translate3d(8px,0,0);}
  }
  .rotate-chaos{animation:rotateChaos .65s ease;}
  @keyframes rotateChaos{
    0%{transform:rotate(0deg);} 25%{transform:rotate(7deg);} 50%{transform:rotate(-9deg);} 75%{transform:rotate(4deg);} 100%{transform:rotate(0deg);}
  }
  .glitch-flash{animation:glitchFlash .4s;}
  @keyframes glitchFlash{
    0%{box-shadow:4px 0 0 rgba(255,61,110,.5), -4px 0 0 rgba(63,224,208,.5);}
    100%{box-shadow:0 0 0 rgba(0,0,0,0);}
  }
  .scramble-out{animation:scrambleOut .22s ease forwards;}
  .scramble-in{animation:scrambleIn .28s ease;}
  @keyframes scrambleOut{to{transform:scale(.3) rotate(25deg);opacity:0;}}
  @keyframes scrambleIn{from{transform:scale(.3) rotate(-25deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}

  .toast{
    position:fixed;top:22px;left:50%;transform:translateX(-50%);
    background:var(--panel-2);border:1px solid var(--accent, var(--volt));color:var(--paper);
    font-family:var(--font-mono);font-size:13px;padding:10px 18px;border-radius:10px;z-index:50;
    opacity:0;pointer-events:none;transition:opacity .2s, top .2s;
  }
  .toast.show{opacity:1;top:34px;}

  .fuse-halves{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
  .fuse-plus{align-self:center;color:var(--dim);font-family:var(--font-mono);}

  .hex-wrap{position:relative;width:320px;height:320px;margin:0 auto;}
  .hex-tile{
    position:absolute;width:96px;height:88px;background:var(--panel-2);border:1px solid var(--line);
    border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
    cursor:pointer;transition:.12s;text-align:center;padding:6px;
  }
  .hex-tile:hover{border-color:var(--dim);}
  .hex-tile.selected{border-color:var(--amber);background:#2a2010;color:var(--amber);}
  .hex-tile.found{border-color:var(--calm);color:var(--calm);opacity:.55;}

  .focus-header{text-align:center;margin-bottom:14px;}
  .focus-header .cat{font-family:var(--font-display);font-size:20px;color:var(--calm);}
  .focus-header .progress{font-family:var(--font-mono);color:var(--dim);font-size:13px;margin-top:4px;}

  .converge-hint{text-align:center;color:var(--dim);font-family:var(--font-mono);font-size:12px;margin-bottom:10px;}

  .cluster-grid{display:grid;grid-template-columns:repeat(6, 1fr);gap:8px;width:100%;}
  .cluster-tile{
    aspect-ratio:1/1;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;text-align:center;padding:4px;cursor:pointer;color:#0A0B10;
    border:2px solid transparent;transition:.12s;
  }
  .cluster-tile.selected{border-color:#fff;transform:scale(.94);}
  .cluster-toolbar{display:flex;gap:10px;justify-content:center;margin-top:14px;}
  .cluster-toolbar button{font-family:var(--font-mono);font-size:12px;padding:10px 18px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--paper);cursor:pointer;}
  .cluster-toolbar button.primary{background:var(--volt);color:#0A0B10;border-color:var(--volt);font-weight:700;}
  .cluster-toolbar button:disabled{opacity:.35;cursor:default;}

  /* ---------- GAME OVER ---------- */
  #gameover-screen{display:none;position:relative;z-index:1;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;}
  #gameover-screen h2{font-family:var(--font-display);font-size:32px;color:var(--riot);margin:0 0 6px;}
  #gameover-screen .final-score{font-family:var(--font-mono);font-size:48px;font-weight:700;margin:14px 0;color:var(--volt);}
  #gameover-screen .sub{color:var(--dim);font-family:var(--font-mono);font-size:13px;margin-bottom:26px;}
  .go-actions{display:flex;gap:12px;flex-wrap:wrap;}
  .go-actions button{font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.5px;padding:14px 22px;border-radius:10px;cursor:pointer;border:1px solid var(--line);}
  .go-actions .again{background:var(--volt);color:#0A0B10;border-color:var(--volt);}
  .go-actions .challenge{background:none;color:var(--pink);border-color:var(--pink);}
  .go-actions .menu{background:none;color:var(--paper);}

  @media (max-width:520px){
    .hex-wrap{transform:scale(.82);}
    .cluster-grid{grid-template-columns:repeat(5,1fr);}
  }