body {
      margin:0;
      font-family: Arial, sans-serif;
      background: #f5f4f2;
      text-align:center;
      color:#333;
    }

    /* === HAMBURGER MENU === */
    #menu-button{position:absolute;top:15px;left:15px;width:30px;height:24px;cursor:pointer;z-index:2001;display:flex;flex-direction:column;justify-content:space-between;}
    #menu-button span{display:block;height:4px;background:#333;border-radius:2px;}
    #menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;z-index:2000;}
    #side-menu{position:fixed;top:0;left:-260px;width:260px;height:100%;background:#fff;box-shadow:2px 0 8px rgba(0,0,0,0.4);z-index:2001;display:flex;flex-direction:column;transition:left 0.3s ease;}
    #side-menu.active{left:0;}
    #side-menu nav{flex:1;padding:20px;}
    #side-menu nav a{display:block;padding:10px 0;color:#333;text-decoration:none;font-size:18px;}
    #side-menu nav a:hover{color:#3498db;}
    #side-menu footer{padding:15px 20px;font-size:12px;color:#666;border-top:1px solid #ddd;}
    .nav-link.active{text-decoration:underline;font-weight:bold;}

    /* === LOGO === */
    #logo{margin:4px 0;width:296px;height:auto;}

    /* === GAME AREA === */
    #game-container {
      display:flex;
      flex-direction:column;
      align-items:center;
      margin-top:10px;
    }

    #levelLabel {
      font-size:18px;
      font-weight:bold;
      margin-bottom:6px;
    }

    #gameCanvas {
      background:#dcdcdc;
      border-radius:20px;
      display:block;
      margin:0 auto;
    }

    #startButton, #playAgainBtn {
      padding:12px 24px;
      font-size:18px;
      border:none;
      border-radius:8px;
      background:#a2c2b6;
      color:white;
      cursor:pointer;
      margin-top:20px;
      transition:background 0.3s;
    }
    #startButton:hover, #playAgainBtn:hover { background:#86b2a3; }

    /* === CONTROLS === */
    .controls {
      display:flex;
      justify-content:space-between;
      margin-top:10px;
      width:90%;
      max-width:500px;
      box-sizing:border-box;
    }
    .ticks, .wrongs {
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center;
    }
    .tick, .wrong {
      width:34px;
      height:34px;
      border:2px solid #bbb;
      border-radius:6px;
      background:white;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      font-size:18px;
      color:transparent;
    }
    .tick.found { background:limegreen;color:#012; }
    .wrong.marked { color:#ff3333;background:#ffecec; }

    /* === OVERLAYS === */
    #overlay, #introOverlay {
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.8);
      color:white;
      display:none;
      justify-content:center;
      align-items:center;
      flex-direction:column;
      z-index:3000;
      padding:20px;
      text-align:center;
    }
    
    #overlay button {
      margin-top: 20px;
      padding: 12px 30px;
      font-size: 20px;
      border: none;
      border-radius: 15px;
      background: #3498db;
      color: white;
      cursor: pointer;
    }
    
    #introOverlay h2 { margin-bottom:12px; }
    #introOverlay p { max-width:500px; line-height:1.5; margin-bottom:20px; }

    /* === FLASH === */
    #flash {
      position:fixed;
      inset:0;
      background:white;
      opacity:0;
      pointer-events:none;
      z-index:2005;
      transition:opacity 0.2s ease;
    }
    #flash.active {
      opacity:1;
      transition:opacity 0.2s ease;
    }

    @media(max-width:900px){
      .controls{flex-direction:column;gap:8px;align-items:stretch;}
    }