:root{
    --bg:#0b0f14;
    --panel:#0f1622cc;
    --grid:#0e1420aa;
    --cell:#0f1b2dcc;
    --accent:#60a5fa;       /* modrý neon */
    --accent2:#22d3ee;      /* azurový neon */
    --good:#34d399;
    --bad:#f87171;
    --warn:#fbbf24;
    --text:#e6eefb;
    --muted:#97a3b6;
    --glass: rgba(18, 24, 38, 0.55);
    --shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
    --radius: 18px;
    --speed:.18s;
    --blob1:#3b1d6b; /* dark: deep purple */
    --blob2:#0e3a5b; /* dark: deep blue */
    --blob3:#164e63; /* dark: teal */
    --blob4:#6b21a8; /* dark: vivid purple */
  }

  /* Light theme overrides */
  [data-theme="light"]{
    --bg:#f5f7fb;
    --panel: rgba(255,255,255,.75);
    --grid: rgba(0,0,0,.04);
    --cell: rgba(255,255,255,.95);
    --text:#0c1220;
    --muted:#475569;
    --blob1:#e9d5ff; /* light: lavender */
    --blob2:#bfdbfe; /* light: light blue */
    --blob3:#fde68a; /* light: soft yellow */
    --blob4:#fbcfe8; /* light: soft pink */
  }

  [data-theme="light"] body{
    color:var(--text);
    background: var(--bg);
  }

  /* borders and surfaces for light mode */
  [data-theme="light"] .panel, [data-theme="light"] .board{
    background:#ffffff; /* čisté bílé karty */
    border:1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 30px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
    backdrop-filter: none; /* žádný glass efekt ve světlém tématu */
  }
  [data-theme="light"] .grid{ border:1px solid rgba(0,0,0,.06); }
  [data-theme="light"] .cell{ border:1px solid rgba(0,0,0,.06); background: var(--cell); color: var(--text); }
  [data-theme="light"] .cell.prefilled{ background:#eaf1ff; color:#1f2a44; }
  [data-theme="light"] .cell.highlight{ background:#dbeafe; }
  
  /* controls for light mode */
  [data-theme="light"] .btn.secondary{ background:#e9effa; border-color: rgba(0,0,0,.08); }
  [data-theme="light"] .nbtn{ background:#eef2ff; border-color: rgba(0,0,0,.08); color: var(--text); }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu;
    color:var(--text);
    background: var(--bg);
    letter-spacing:.2px;
    position: relative;
  }

  /* jemná mřížka v pozadí */
  body:before{
    content:"";
    position:fixed; inset:0;
    background-image: radial-gradient(transparent 0 19px, rgba(255,255,255,.04) 20px),
                      linear-gradient(90deg,rgba(255,255,255,.03) 1px, transparent 1px),
                      linear-gradient(0deg,rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 40px 40px;
    pointer-events:none;
    mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
    z-index: 1;
  }

  /* dark mode — bez textury, jen barevné skvrny */
  [data-theme="dark"] body:before{
    background-image: none;
  }

  body:after{
    content:"";
    position:fixed; inset:-30%;
    background:
      radial-gradient(1200px 1200px at 30% 20%, var(--blob1) 0%, transparent 60%),
      radial-gradient(1400px 1400px at 70% 15%, var(--blob2) 0%, transparent 60%),
      radial-gradient(1100px 1100px at 80% 75%, var(--blob3) 0%, transparent 65%),
      radial-gradient(1200px 1200px at 25% 85%, var(--blob4) 0%, transparent 60%);
    background-blend-mode: screen, screen, screen, screen;
    filter: blur(120px) saturate(130%);
    opacity:.8;
    pointer-events:none;
    z-index:0;
    animation: drift 42s ease-in-out infinite alternate;
  }

  [data-theme="light"] body:after{
    background-blend-mode: multiply, screen, multiply, screen;
    opacity:.75;
  }