/* Layar game penuh, satu tampilan gelap yang disengaja (seperti layar konsol). */
:root { --bg: #14171f; --panel: rgba(20, 23, 31, .84); --text: #e8ebf2; --muted: #9aa3b5; --accent: #ffd34d;
        --card: #fbfbf4; --card-ink: #1d2230; --card-edge: #3a4560; --btn: rgba(255, 255, 255, .14); --btn-edge: rgba(255, 255, 255, .28);
        color-scheme: dark; }
/* viewport-fit=cover (index.html): latar gelap sampai sisi notch & di bawah status bar tembus (black-translucent, Layar Utama) */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; overflow: hidden; }
canvas { position: fixed; inset: 0; display: block; image-rendering: pixelated; touch-action: none; outline: none; }
/* lapisan chat (render/lapisan_chat.js): di atas kanvas game, sentuhan diteruskan ke kanvas game */
#layar-chat { pointer-events: none; }
#layar-chat[hidden] { display: none; }
#hud { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); background: var(--panel); padding: 6px 10px; border-radius: 8px; font-size: 12px; pointer-events: none; max-width: calc(100vw - 32px); }
#hud b { color: var(--accent); }
#bantuan { position: fixed; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); max-width: 46vw; background: var(--panel); padding: 6px 10px; border-radius: 8px; font-size: 12px; color: var(--muted); pointer-events: none; }
/* kotak bantuan tombol (#bantuan) disembunyikan selalu atas permintaan pemilik (16 Okt); elemennya tetap ada untuk tes & kode lama */
#bantuan { display: none !important; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* kolom ketik chat (ui/kolom_chat.js): di atas tengah, supaya tidak tertutup keyboard HP */
#kolom-chat { position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 10;
              display: flex; gap: 6px; width: min(480px, calc(100vw - 24px)); box-sizing: border-box; padding: 6px;
              background: var(--panel); border: 1px solid var(--btn-edge); border-radius: 10px; }
#kolom-chat[hidden] { display: none; }
#kolom-chat input { flex: 1; min-width: 0; font: 16px/1.3 system-ui, sans-serif; color: var(--text); background: rgba(0, 0, 0, .35);
                    border: 1px solid var(--btn-edge); border-radius: 6px; padding: 6px 8px; outline: none; }
#kolom-chat input:focus { border-color: var(--accent); }
#kolom-chat button { font: 600 14px system-ui, sans-serif; color: var(--text); background: var(--btn); border: 1px solid var(--btn-edge);
                     border-radius: 6px; padding: 0 12px; }
/* U23 kolom di tempat (layar login & buat karakter): menutupi kotak kolom di kanvas persis (posisi & ukuran dari JS), tanpa
   latar/bingkai/tombol; huruf & kursor transparan karena teks + kursor digambar kanvas dengan font piksel game.
   font 16px: Safari HP tidak memperbesar halaman saat kolom difokus */
#kolom-chat.di-tempat { padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; }
#kolom-chat.di-tempat button { display: none; }
#kolom-chat.di-tempat input { height: 100%; box-sizing: border-box; padding: 0; border: 0; border-radius: 0; background: transparent;
                              color: transparent; caret-color: transparent; font-size: 16px; line-height: 1; }
#kolom-chat.di-tempat input::selection { background: transparent; color: transparent; }
#kolom-chat.di-tempat input::placeholder { color: transparent; }
/* U26 lapisan ketik HP tegak (kanvas diputar): kolom chat TIDAK diputar, mendatar di atas keyboard (posisi dari JS) + log chat
   terakhir di atasnya dengan huruf biasa */
#kolom-chat.lapisan { transform: none; }
/* chatbox riwayat (sesi H): semua pesan tersimpan, digulir (sentuh / roda), nama berwarna sama dengan log HUD (CHAT.warna*) */
#log-ketik { position: fixed; z-index: 10; box-sizing: border-box; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
             padding: 6px 10px; background: rgba(20, 23, 31, .72); border: 1px solid var(--btn-edge); border-radius: 10px;
             font: 15px/1.35 system-ui, sans-serif; color: var(--text); touch-action: pan-y; }
#log-ketik[hidden] { display: none; }
#log-ketik b { color: #e8e8f0; font-weight: 600; }
#log-ketik .npc b { color: #98e0a8; }
#log-ketik .party b { color: #90c8ff; }
#log-ketik .saya b { color: #f8b8d8; }
#log-ketik .gm b { color: #f8e030; }   /* akun GM/staf: nama kuning (CHAT.warnaGm) */
#log-ketik .tip { margin-top: 4px; color: var(--muted); font-size: 13px; }
/* ukuran teks chat (Pengaturan, render/lapisan_chat.js -> <html data-chat>): riwayat chat DOM lebih kecil / besar */
[data-chat="kecil"] #log-ketik { font-size: 14px; line-height: 1.3; padding: 4px 8px; }
[data-chat="besar"] #log-ketik { font-size: 17px; }
/* layar sentuh: kolom ketik chat lebih ramping (padding & tinggi), huruf input TETAP 16px: Safari iPhone memperbesar halaman
   saat kolom dengan huruf < 16px difokus */
@media (pointer: coarse) {
  #kolom-chat:not(.di-tempat) { padding: 4px; gap: 4px; border-radius: 8px; }
  #kolom-chat:not(.di-tempat) input { font-size: 16px; line-height: 1.2; padding: 4px 8px; }
  #kolom-chat:not(.di-tempat) button { font-size: 13px; padding: 0 10px; }
}