/* Basic layout */
    body { 
      margin:0; 
      background:#101418; 
      color:#e6eef6; 
      font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial; 
      display:flex; 
      height:100vh; 
      overflow:hidden; /* Prevent body scrolling */
      position:fixed; /* Anchor the body */
      width:100%;
      top:0;
      left:0;
    }
    #game { margin:auto; display:flex; gap:12px; }
    canvas { 
      background: linear-gradient(#0b1220,#123); 
      image-rendering: pixelated; 
      border:6px solid #0b2030; 
      box-shadow: 0 12px 30px rgba(0,0,0,0.6); 
      width: 480px; 
      height: 480px; 
      display:block; /* Prevent inline spacing issues */
      position:relative; /* Anchor canvas position */
    }
    #gameArea { 
      background: rgba(11, 25, 47, 0.3);
      border-radius: 12px;
      padding: 15px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
      border: 1px solid rgba(74, 107, 127, 0.3);
      position:relative; /* Anchor position */
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    #leftUI, #rightUI {
      background: rgba(11, 25, 47, 0.2);
      border-radius: 8px;
      padding: 15px;
      border: 1px solid rgba(74, 107, 127, 0.2);
      height: fit-content;
      max-height: calc(100vh - 40px); /* Prevent overflow beyond viewport */
      overflow-y: auto; /* Enable vertical scrolling */
      overflow-x: hidden; /* Hide horizontal scrollbar */
    }
    #leftUI h1, #rightUI h1 {
      margin-top: 0;
      color: #4ecdc4;
      border-bottom: 1px solid rgba(74, 107, 127, 0.3);
      padding-bottom: 10px;
    }
    #gameHUD { transition: all 0.3s ease; }
    #gameHUD:hover { background: rgba(11, 32, 48, 0.95); border-color: #4ecdc4; }
    #ui { width:320px; padding:12px; background:linear-gradient(180deg,#071018,#092030); border-radius:8px; }
    #leftUI { width:320px; padding:12px; background:linear-gradient(180deg,#071018,#092030); border-radius:8px; }
    h1{font-size:16px;margin:0 0 8px}
    .panel { background:rgba(255,255,255,0.02); padding:8px; border-radius:6px; margin-bottom:8px; }
    .kbd { background:#0b2030; padding:4px 6px; border-radius:4px; font-weight:600; }
    #log { height:5em; overflow:auto; font-size:13px; padding:6px; line-height:1em; }
    button{background:#0f4b6b;color:#e6eef6;padding:8px;border-radius:6px;border:0;cursor:pointer}
    small { color:#9fb3c8 }
    #chatInput:focus { outline:none; border-color:#0f4b6b; }
    #apiKey:focus { outline:none; border-color:#0f4b6b; }
    #apiKey:disabled { opacity:0.6; cursor:not-allowed; }
    .chat-message { margin-bottom:4px; }
    .chat-player { color:#7bd389; font-weight:600; }
    .chat-npc { color:#f2d388; font-weight:600; }
    #npcMemory::-webkit-scrollbar { width:8px; }
    #npcMemory::-webkit-scrollbar-track { background:rgba(0,0,0,0.2); border-radius:4px; }
    #npcMemory::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.3); border-radius:4px; }
    #npcMemory::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.5); }
    
    /* Custom scrollbar for leftUI and rightUI panels */
    #leftUI::-webkit-scrollbar, #rightUI::-webkit-scrollbar { width:8px; }
    #leftUI::-webkit-scrollbar-track, #rightUI::-webkit-scrollbar-track { background:rgba(0,0,0,0.2); border-radius:4px; }
    #leftUI::-webkit-scrollbar-thumb, #rightUI::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.3); border-radius:4px; }
    #leftUI::-webkit-scrollbar-thumb:hover, #rightUI::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.5); }
    
    /* Common input styles */
    .input-color { width:100%; height:24px; border:1px solid #27475a; border-radius:4px; background:#0b2030; margin-bottom:4px; }
    .input-file { width:100%; padding:2px; background:#0b2030; border:1px solid #27475a; border-radius:4px; color:#e6eef6; font-size:10px; margin-bottom:4px; }
    .input-file-mini { font-size:8px; color:#e6eef6; width:100%; margin-bottom:3px; background:#0b2030; border:1px solid #27475a; padding:1px; }
    .input-text { width:100%; padding:4px; background:#0b2030; border:1px solid #27475a; border-radius:4px; color:#e6eef6; font-size:11px; margin-bottom:4px; }
    
    /* Common label styles */
    .label-standard { font-size:11px; color:#9fb3c8; display:block; margin-bottom:2px; }
    .label-mini { font-size:10px; color:#9fb3c8; display:block; margin-bottom:2px; }
    
    /* Common button styles */
    .btn-danger { font-size:10px; padding:2px 6px; background:#7c2d12; border:1px solid #991b1b; color:#fecaca; }
    .btn-danger-full { font-size:10px; padding:2px 6px; background:#7c2d12; border:1px solid #991b1b; color:#fecaca; width:100%; }
    
    /* NPC sprite control styles */
    .npc-sprite-container { border:1px solid #3a5b6f; padding:4px; background:#152a35; border-radius:4px; }
    .npc-sprite-label { color:#7a8c99; font-size:9px; display:block; margin-bottom:2px; font-weight:bold; }
    .npc-sprite-buttons { display:flex; gap:2px; }
    .btn-npc-set { font-size:8px; padding:1px 2px; background:#2d4a5c; border:1px solid #4a6b7f; color:#e6eef6; flex:1; border-radius:2px; }
    .btn-npc-clear { font-size:8px; padding:1px 2px; background:#5c2d2d; border:1px solid #7f4a4a; color:#f6d4d4; flex:1; border-radius:2px; }
    
    /* Common layout styles */
    .form-group { margin-bottom:6px; }