body {
      margin: 0; padding: 0; width: 100vw; height: 100vh;
      display: flex; justify-content: center; align-items: center;
      background: #000; font-family: 'Arial', sans-serif;
      overflow: hidden; touch-action: none; user-select: none;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      min-height: 100dvh;
    }

    .font-bold { font-weight: 700; }
    .text-white { color: #ffffff; }
    .text-yellow-400 { color: #facc15; }
    .text-lg { font-size: 1.125rem; }
    .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .text-5xl { font-size: 3rem; line-height: 1; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mt-2 { margin-top: 0.5rem; }
    
    .game-container {
      width: 100%; height: 100%;
      display: flex; justify-content: center; align-items: center;
      background-color: #111;
      overflow: hidden;
    }
    
    /* Base resolution game akan di-scale lewat JS agar konsisten lintas layar */
    .game-content {
      position: relative;
      width: 960px;
      height: 540px;
      box-shadow: 0 0 50px rgba(0,0,0,0.8);
      overflow: hidden;
      border: 4px solid #ffd700;
      transform-origin: center center;
    }

    #gameCanvas {
      width: 100%;
      height: 100%;
      display: block;
      background: #000;
      cursor: crosshair;
    }

    #ui-layer {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 10;
      display: flex; justify-content: center; align-items: center;
    }

    #in-game-notification {
      position: absolute;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 280px;
      max-width: min(90vw, 620px);
      padding: 12px 18px;
      border-radius: 12px;
      border: 2px solid #ffd700;
      background: rgba(0, 0, 0, 0.88);
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      text-shadow: 1px 1px 0 #000;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.18s ease;
      pointer-events: none;
      z-index: 30;
    }

    #in-game-notification.show {
      opacity: 1;
      visibility: visible;
    }

    /* MENUS */
    #main-menu, #char-select-menu, #multiplayer-menu {
      pointer-events: auto;
      background-size: cover !important;
      width: 100%; height: 100%;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
    }

    #main-menu { background: url('./assets/images/main menu.jpg') no-repeat center center; }
    #char-select-menu { background: url('./assets/images/char-select-bg.jpg') no-repeat center center; }
    #multiplayer-menu { background: radial-gradient(circle at top, #141414, #030303 65%); }

    .glass-panel {
      background: rgba(0, 0, 0, 0.85);
      border: 3px solid #FFD700;
      border-radius: 20px;
      padding: 30px;
      width: 85%; max-width: 700px;
      backdrop-filter: blur(10px);
      box-shadow: 0 0 40px rgba(0,0,0,0.9);
      display: flex; gap: 20px; align-items: center;
    }

    .menu-title {
      text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 215, 0, 0.5);
    }

    .menu-heading {
      text-shadow: 3px 3px 0 #000;
    }

    .menu-subheading {
      text-shadow: 1px 1px 0 #000;
    }

    .menu-left { flex: 1; text-align: left; }
    .menu-right { flex: 0 0 180px; display: flex; flex-direction: column; align-items: center; }

    .menu-character-label {
      color: #FFD700;
      font-weight: bold;
      text-shadow: 1px 1px 0 #000;
      margin-bottom: 5px;
    }

    .char-preview-box {
      width: 150px; height: 150px;
      border: 3px solid #00BFFF;
      border-radius: 15px;
      background: rgba(255,255,255,0.1);
      margin-bottom: 10px;
      overflow: hidden;
      position: relative;
    }
    .char-preview-box img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
    
    .change-btn {
      background: #FF8C00; color: white; border: none; padding: 5px 15px;
      font-size: 14px; font-weight: bold; border-radius: 20px; cursor: pointer;
      border: 2px solid #FFF;
    }

    /* Character Selection Cards */
    .char-cards-wrapper {
      display: flex; gap: 40px; justify-content: center; align-items: center;
      margin-top: 20px;
    }
    .char-card {
      width: 250px; height: 350px;
      background: rgba(0,0,0,0.6);
      border: 4px solid #555;
      border-radius: 20px;
      cursor: pointer;
      transition: transform 0.2s, border-color 0.2s, background 0.2s;
      display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
      padding-bottom: 20px;
      position: relative;
      overflow: hidden;
    }
    .char-card img {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
        object-fit: contain; 
        z-index: 0; padding: 10px;
    }
    .char-card .label {
        z-index: 1; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 0 #000;
        background: rgba(0,0,0,0.7); width: 100%; padding: 5px 0;
    }
    .char-card:hover { transform: scale(1.05); border-color: #FFF; }
    .char-card:active { transform: scale(0.95); }

    .char-card.male { border-color: #00BFFF; }
    .char-card.female { border-color: #FF1493; }

    .input-group {
      margin-bottom: 15px;
      text-align: left;
      width: 100%;
      max-width: 560px;
    }
    .input-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #FFD700; font-size: 16px; text-shadow: 2px 2px 4px #000; }
    .input-group input, .input-group select {
      width: 100%; padding: 10px; border-radius: 8px; border: 2px solid #FFD700;
      background: #FFFFFF; font-size: 16px; color: #000; font-weight: bold;
      box-sizing: border-box;
    }

    .start-btn {
      background: linear-gradient(to bottom, #4CAF50, #45a049);
      color: white; border: none; padding: 15px 40px; width: 100%;
      font-size: 24px; font-weight: bold; border-radius: 50px;
      cursor: pointer; transition: transform 0.1s;
      box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: 2px solid #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    .start-btn:active { transform: scale(0.95); }

    /* Roadmap Button Specific Style */
    .roadmap-btn {
      background: linear-gradient(to bottom, #1E90FF, #0000CD);
      color: white; border: none; padding: 10px 30px; width: 100%;
      font-size: 18px; font-weight: bold; border-radius: 50px;
      cursor: pointer; transition: transform 0.1s; margin-top: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: 2px solid #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    .roadmap-btn:active { transform: scale(0.95); }

    .mp-mode-btn {
      background: linear-gradient(to bottom, #8a2be2, #4b0082);
    }

    .minigame-mode-btn {
      background: linear-gradient(to bottom, #ff8c00, #c65f00);
    }

    .minigame-test-menu {
      position: absolute;
      inset: 0;
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      background: rgba(0, 0, 0, 0.78);
      border-radius: 20px;
      z-index: 3;
      padding: 26px;
      text-align: center;
    }

    .minigame-test-menu h3 {
      margin: 0;
      color: #FFD700;
      font-size: 28px;
      text-shadow: 1px 1px 0 #000;
    }

    .minigame-test-menu p {
      margin: 0;
      color: #E9F4FF;
      font-size: 16px;
      max-width: 520px;
    }

    .minigame-test-menu .input-group {
      width: min(460px, 90%);
      margin-top: 8px;
      text-align: left;
    }

    .minigame-test-actions {
      width: min(460px, 90%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 8px;
    }

    .minigame-test-actions .start-btn,
    .minigame-test-actions .roadmap-btn {
      margin-top: 0;
      width: 100%;
      font-size: 18px;
      padding: 10px 14px;
    }

    .multiplayer-panel {
      width: 94%;
      max-width: 1050px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 8px;
    }

    .mp-side {
      background: rgba(255, 255, 255, 0.08);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 14px;
      padding: 14px;
      text-align: left;
    }

    .mp-title {
      font-size: 20px;
      font-weight: 800;
      margin: 0 0 10px 0;
      text-shadow: 1px 1px 0 #000;
    }

    .mp-title.astronaut { color: #00bfff; }
    .mp-title.alien { color: #ff6b6b; }

    .mp-char-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }

    .mp-char-btn {
      border: 2px solid #777;
      border-radius: 10px;
      background: #1f1f1f;
      color: #fff;
      font-weight: 700;
      padding: 10px;
      cursor: pointer;
    }

    .mp-char-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 94px;
      padding: 8px;
    }

    .mp-char-card img {
      width: 62px;
      height: 62px;
      object-fit: contain;
      display: block;
    }

    .mp-char-label {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.1;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 0 #000;
    }

    .mp-char-btn.active {
      border-color: #00bfff;
      background: #0d2a3d;
    }

    .mp-alien-picker {
      margin-top: 8px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .mp-alien-card {
      border: 2px solid #777;
      border-radius: 10px;
      background: #101010;
      padding: 6px;
      cursor: pointer;
    }

    .mp-alien-card img {
      width: 100%;
      height: 80px;
      object-fit: contain;
      display: block;
    }

    .mp-alien-card.active {
      border-color: #ff6b6b;
      background: #3b1717;
    }

    .mp-actions {
      width: 94%;
      max-width: 1050px;
      margin-top: 12px;
      display: flex;
      justify-content: center;
    }

    .mp-actions .start-btn {
      width: min(100%, 640px);
    }
    
    .back-btn {
        position: absolute; top: 20px; left: 20px;
        background: #333; color: #FFF; padding: 10px 20px; border-radius: 10px; border: 2px solid #FFF;
        font-weight: bold; cursor: pointer;
    }

    /* AUDIO BUTTON STYLE - RIGHT MIDDLE */
    #audio-controls {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      z-index: 9999;
      pointer-events: auto;
      touch-action: manipulation;
    }

    #audio-menu-btn,
    #music-toggle-btn,
    #sfx-toggle-btn {
      width: 46px;
      height: 46px;
      background: rgba(0, 0, 0, 0.45);
      border: 2px solid rgba(0, 191, 255, 0.8);
      border-radius: 50%;
      color: #00bfff;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s;
      padding: 0;
      line-height: 1;
    }

    #audio-menu-btn svg,
    #music-toggle-btn svg,
    #sfx-toggle-btn svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
      stroke: currentColor;
    }

    #audio-menu-btn:hover,
    #music-toggle-btn:hover,
    #sfx-toggle-btn:hover {
      background: rgba(0, 0, 0, 0.8);
      border-color: #7fdfff;
      color: #7fdfff;
      transform: scale(1.05);
    }

    #audio-menu-btn.active {
      border-color: rgba(0, 255, 170, 0.9);
      color: #00ffaa;
    }

    #audio-popup {
      position: absolute;
      top: 50%;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 68px;
      opacity: 0;
      transform: translateY(-50%) scale(0.92);
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    #audio-popup.open {
      opacity: 1;
      transform: translateY(-50%) scale(1);
      pointer-events: auto;
    }

    #music-toggle-btn .note-icon {
      font-size: 27px;
      line-height: 1;
      font-weight: 700;
      transform: translateY(-1px);
    }

    #music-toggle-btn.music-off {
      border-color: rgba(255, 120, 120, 0.85);
      color: #ff9b9b;
    }

    #sfx-toggle-btn.sfx-off {
      border-color: rgba(255, 120, 120, 0.85);
      color: #ff9b9b;
    }

    /* --- MOBILE RESPONSIVENESS --- */
    @media (max-width: 768px) {
        #main-menu h1 {
            font-size: 32px !important;
            margin-bottom: 10px;
            line-height: 1.1;
        }

        .glass-panel { 
            flex-direction: column-reverse; 
            width: 90%;
            padding: 20px;
            gap: 15px;
            max-height: 85vh;
            overflow-y: auto;
        }

        .menu-right { 
            flex: 0 0 auto;
            width: 100%;
            flex-direction: row; 
            justify-content: space-between;
            align-items: center;
            background: rgba(255,255,255,0.1);
            padding: 12px;
            border-radius: 12px;
        }

          #in-game-notification {
            top: 16px;
            max-width: 92vw;
            font-size: 15px;
            padding: 10px 14px;
          }
        
        .menu-right label { margin-bottom: 0; font-size: 14px; text-align: left; }
        
        .char-preview-box {
            width: 60px; height: 60px;
            margin: 0 15px;
            border-width: 2px;
        }
        
        .change-btn {
            font-size: 12px;
            padding: 8px 12px;
            margin-top: 0;
        }

        .input-group { margin-bottom: 10px; }
        .input-group label { font-size: 14px; }
        .input-group input, .input-group select { padding: 10px; font-size: 16px; }

        .start-btn { font-size: 20px; padding: 12px 0; }
        .roadmap-btn { font-size: 16px; padding: 10px 0; }
        
        /* Adjust Char Select for Mobile */
        .char-cards-wrapper { 
            flex-direction: row; 
            flex-wrap: wrap; 
            gap: 15px; 
            justify-content: center;
        }
        .char-card { width: 40vw; height: 55vw; max-width: 160px; max-height: 240px; }
        .char-card .label { font-size: 18px; }
        #char-select-menu h2 { font-size: 28px !important; }
        #char-select-menu p { font-size: 14px; padding: 0 15px; }

        .multiplayer-panel { grid-template-columns: 1fr; }
        .mp-actions { grid-template-columns: 1fr; }
    }
    
    /* Landscape Mobile Adjustments */
    @media (max-height: 500px) and (orientation: landscape) {
        #main-menu h1 { font-size: 26px !important; margin-bottom: 5px; }
        .glass-panel { flex-direction: row; padding: 15px; align-items: flex-start; width: 95%; }
        .menu-left { overflow-y: auto; max-height: 260px; padding-right: 5px; }
        .menu-right { flex-direction: column; width: 140px; background: none; padding: 0; justify-content: flex-start; }
        .menu-right label { text-align: center; margin-bottom: 5px; display: block; }
        .char-preview-box { width: 80px; height: 80px; margin: 0 0 10px 0; }
        .change-btn { margin-top: 5px; }
        .input-group { margin-bottom: 8px; }
        .input-group input, .input-group select { padding: 6px; }
        .start-btn { padding: 8px 0; font-size: 18px; }
        .roadmap-btn { padding: 6px 0; font-size: 14px; }
        
        .char-cards-wrapper { gap: 20px; }
        .char-card { width: 120px; height: 180px; }
    }