/* ═══════════════════════════════════════════════
   Project Wildlands — Pokémon Ruby/Sapphire UI
   ═══════════════════════════════════════════════ */

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  background:#c0ccd8; color:#303850;
  font-family:'Courier New','Consolas',monospace;
  overflow:hidden; height:100%; width:100%;
}

#app { display:flex; flex-direction:column; height:100vh; }

/* ── TOP BAR — thin GBA-style ── */
#topbar {
  flex:0 0 auto; height:16px; padding:0 6px;
  display:flex; align-items:center; gap:3px;
  background:#7888a0; border-bottom:1px solid #506070;
}
#biome-name { font-size:clamp(6px,0.56vmin,15px); color:#d8e4f0; letter-spacing:1px; font-weight:bold; }
#player-count, #ai-count { font-size:clamp(5px,0.48vmin,13px); color:#90a0b0; }
#topbar .title { display:none; }
#topbar button {
  background:#386898; border:1px solid #285080; color:#d8e8f8;
  padding:0 5px; height:11px; line-height:9px; font-size:clamp(5px,0.48vmin,13px);
  cursor:pointer; font-family:inherit;
}

/* ── GAME ── */
#game-wrap { flex:1; position:relative; overflow:hidden; background:#b0c0d0; }
canvas#game { display:block; position:absolute; top:0; left:0; image-rendering:pixelated; }

/* ── UI LAYER ── */
#ui-layer { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; }

/* ── STATUS — hidden in overworld, shown in menu ── */
#status-bar { display:none; }
#minimap-wrap { display:none; }
#wildling-bar { display:none; }
#btn-settings { display:none; }

/* ── CRITICAL: SVG-based 3D border for all Ruby windows ── */
/* ── CHAT — auto-hide, show on Enter ── */
#chat-panel {
  position:fixed; bottom:0; left:0; right:0;
  height:32px; z-index:15; pointer-events:auto;
  transition:transform 0.2s ease, opacity 0.2s ease;
  transform:translateY(32px); opacity:0;
}
#chat-panel.active {
  transform:translateY(0); opacity:1;
}
#chat-log {
  position:fixed; bottom:32px; left:2px; right:2px;
  max-height:60px; overflow-y:auto; font-size:clamp(6px,0.56vmin,15px); line-height:1.3; color:#607080;
  pointer-events:none; z-index:14;
  transition:opacity 0.3s ease; opacity:0;
}
#chat-log.active { opacity:1; }
#chat-log .msg-name { color:#386898; font-weight:bold; }
#chat-input { display:flex; gap:1px; padding:2px; background:#c8d4e0; border:3px solid; border-color:#c8d4e0 #8898a8 #8898a8 #c8d4e0; }
#chat-input input {
  flex:1; background:#dce4ec; border:1px solid #7888a0; color:#303850;
  padding:1px 4px; font-size:clamp(6px,0.56vmin,15px); font-family:inherit;
}
#chat-input button {
  background:#386898; border:1px solid #285080; color:#d8e8f8;
  padding:1px 6px; cursor:pointer; font-size:clamp(6px,0.56vmin,15px); font-family:inherit;
}

/* ── CONTROLS HINT ── */
#controls-hint { display:none !important; }

/* ── ENCOUNTER PANEL ── */
#encounter-panel {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  display:none; z-index:20; text-align:center; min-width:140px;
  background:#c8d4e0; border:4px solid;
  border-color:#e8f0f8 #7888a0 #7888a0 #e8f0f8;
  padding:8px; pointer-events:auto;
}
#encounter-panel h3 { color:#386898; font-size:clamp(9px,0.8vmin,22px); margin-bottom:3px; }
.enc-btn {
  padding:2px 8px; background:#c8d4e0; border:3px solid;
  border-color:#dce4ec #7888a0 #7888a0 #dce4ec;
  color:#303850; cursor:pointer; font-size:clamp(7px,0.64vmin,18px); font-family:inherit;
}

/* ── MAIN MENU — full-screen Ruby-style ── */
#main-menu {
  display:none; position:fixed; inset:0;
  z-index:250;
  background:#c0ccd8;
  border:4px solid;
  border-color:#e8f0f8 #7888a0 #7888a0 #e8f0f8;
  pointer-events:auto; overflow-y:auto;
}
#main-menu .mm-inner {
  max-width:300px; margin:6px auto; padding:2px 10px;
}

/* Player info line — compact */
#main-menu .mm-player {
  color:#506870; font-size:clamp(6px,0.56vmin,15px); padding:4px 8px; margin-bottom:2px;
  border-bottom:1px solid #a0b0c0;
}

/* Menu items — all caps, no icons, Ruby cursor */
#main-menu .mm-items { list-style:none; padding:0; margin:0; }
#main-menu .mm-item {
  display:flex; align-items:center; gap:2px;
  padding:4px 8px; cursor:pointer;
  font-size:clamp(6px,0.56vmin,15px); color:#303850;
  letter-spacing:1px;
}
#main-menu .mm-item .cursor { color:#386898; font-size:clamp(5px,0.48vmin,13px); min-width:7px; }
#main-menu .mm-item.selected .cursor { visibility:visible; }
#main-menu .mm-item .cursor { visibility:hidden; }
#main-menu .mm-item .label { }
#main-menu .mm-item.selected { background:#a8bcc8; }

/* ── SUB PANELS ── */
.panel-overlay {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:300; width:min(280px,80vw); max-height:60vh;
  background:#c0ccd8; border:4px solid;
  border-color:#e8f0f8 #7888a0 #7888a0 #e8f0f8;
  padding:8px; pointer-events:auto; overflow-y:auto;
}
.panel-overlay h3 { font-size:clamp(7px,0.64vmin,18px); text-align:center; margin-bottom:3px; color:#386898; letter-spacing:1px; }

#settings-panel, #hunt-board-panel, #inventory-panel, #shop-panel {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:300; pointer-events:auto;
  background:#c0ccd8; border:4px solid;
  border-color:#e8f0f8 #7888a0 #7888a0 #e8f0f8;
  padding:6px; width:min(280px,80vw); max-height:55vh;
}
#settings-panel h3, #hunt-board-panel h3, #inventory-panel h3, #shop-panel h3 {
  color:#386898; font-size:clamp(7px,0.64vmin,18px); text-align:center; margin-bottom:3px; letter-spacing:1px;
}

#hunt-board-panel #hb-bounties { max-height:18vh; overflow-y:auto; }
.hb-rank-row { display:flex; align-items:center; gap:4px; margin-bottom:3px; padding:2px 4px; background:#b8c8d4; border:2px solid; border-color:#c8d4e0 #7888a0 #7888a0 #c8d4e0; font-size:clamp(5px,0.48vmin,13px); }
.hb-rank { color:#386898; font-weight:bold; }
.hb-bounty { margin:2px 0; padding:2px; background:#b8c8d4; border:2px solid; border-color:#c8d4e0 #7888a0 #7888a0 #c8d4e0; }
.hb-bounty-title { color:#303850; font-weight:bold; font-size:clamp(5px,0.48vmin,13px); }
.hb-bounty-desc { color:#607080; font-size:clamp(5px,0.48vmin,13px); }

.inv-item { display:flex; align-items:center; gap:3px; padding:2px; border:2px solid; border-color:#c8d4e0 #7888a0 #7888a0 #c8d4e0; margin:2px 0; font-size:clamp(5px,0.48vmin,13px); background:#b8c8d4; }
.inv-item-name { color:#303850; font-weight:bold; }
.shop-item { display:flex; align-items:center; gap:3px; padding:2px; border:2px solid; border-color:#c8d4e0 #7888a0 #7888a0 #c8d4e0; margin:2px 0; font-size:clamp(5px,0.48vmin,13px); background:#b8c8d4; }

.panel-close {
  display:block; width:100%; margin-top:4px; padding:3px;
  background:#386898; border:2px solid;
  border-color:#d0dce8 #285080 #285080 #d0dce8;
  color:#d8e8f8; cursor:pointer; font-size:clamp(6px,0.56vmin,15px); text-align:center; font-family:inherit;
}

.vol-row { display:flex; align-items:center; gap:4px; margin:2px 0; font-size:clamp(6px,0.56vmin,15px); }

/* ── LOGIN SCREEN ── */
#login-screen {
  position:fixed; inset:0; background:linear-gradient(180deg,#c8d4e0,#a0b0c0); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
#login-content {
  background:#c0ccd8; border:4px solid;
  border-color:#e8f0f8 #7888a0 #7888a0 #e8f0f8;
  padding:16px 22px; text-align:center;
}
#login-content h1 { color:#386898; font-size:clamp(19px,1.6vmin,22px); letter-spacing:3px; }
#login-content .tagline { color:#607080; font-size:clamp(6px,0.56vmin,15px); margin-bottom:8px; }
.row { margin:2px 0; display:flex; align-items:center; justify-content:center; gap:3px; }
.row label { width:32px; font-size:clamp(6px,0.56vmin,15px); color:#607080; text-align:right; }
.row input, .row select {
  background:#dce4ec; border:2px solid; border-color:#c8d4e0 #7888a0 #7888a0 #c8d4e0;
  color:#303850; padding:2px 4px; font-size:clamp(6px,0.56vmin,15px); width:100px; font-family:inherit;
}
#btn-login {
  margin-top:6px; padding:3px 16px;
  background:#386898; border:2px solid;
  border-color:#d0dce8 #285080 #285080 #d0dce8;
  color:#d8e8f8; font-size:clamp(7px,0.64vmin,18px); cursor:pointer; letter-spacing:2px; font-family:inherit;
}
#login-footer { margin-top:4px; font-size:clamp(5px,0.48vmin,13px); color:#8090a0; }

/* ── NARRATIVE BANNER ── */
#narrative-banner { display:none; position:fixed; top:0; left:0; right:0; background:#386898; color:#d8e8f8; font-size:clamp(6px,0.56vmin,15px); padding:2px 8px; text-align:center; z-index:18; }
#event-header { display:none; position:fixed; top:16px; left:0; right:0; background:linear-gradient(90deg,#285080,#386898,#285080); color:#d8e8f8; font-size:clamp(6px,0.56vmin,15px); padding:2px 8px; text-align:center; z-index:19; border-top:1px solid #5080b0; }
#event-header .event-title { font-weight:bold; margin-right:6px; }
#event-header .event-desc { opacity:0.85; }

/* ── BATTLE OVERLAY ── */
#battle-overlay {
  display:none; position:fixed; inset:0; background:rgba(8,6,16,0.92); z-index:200;
  flex-direction:column; align-items:center; justify-content:center;
}
#battle-box {
  width:min(420px,85vw); height:min(280px,48vh);
  position:relative; border:4px solid;
  border-color:#e8f0f8 #607080 #607080 #e8f0f8;
  border-radius:0; background:#c0ccd8;
}
.combatant { position:absolute; width:80px; text-align:center; }
.combatant .avatar { width:32px; height:32px; margin:0 auto 2px; border:2px solid; border-color:#c8d4e0 #7888a0 #7888a0 #c8d4e0; display:flex; align-items:center; justify-content:center; font-size:clamp(15px,1.28vmin,22px); background:#b8c8d4; }
.combatant .name { font-size:clamp(6px,0.56vmin,15px); font-weight:bold; color:#303850; }
.combatant .hp-bar { width:64px; height:3px; background:#a0b0c0; border:1px solid #7888a0; margin:2px auto; overflow:hidden; }
.combatant .hp-fill { height:100%; }
#battle-phase { position:absolute; top:2px; left:50%; transform:translateX(-50%); font-size:clamp(6px,0.56vmin,15px); color:#386898; font-weight:bold; }
#battle-log { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:80%; font-size:clamp(5px,0.48vmin,13px); color:#607080; text-align:center; }
#vs-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(17px,1.44vmin,22px); font-weight:bold; color:#8898a8; opacity:0.3; }
#battle-actions { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); display:flex; gap:2px; flex-wrap:wrap; justify-content:center; }
#battle-actions .btn {
  padding:2px 6px; background:#c8d4e0; border:2px solid;
  border-color:#dce4ec #7888a0 #7888a0 #dce4ec;
  color:#303850; cursor:pointer; font-size:clamp(5px,0.48vmin,13px); font-family:inherit;
}

/* ── D-PAD ── */
/* ── D-PAD ── */
#mobile-dpad {
  display:none;
  position:fixed; bottom:12px; left:16px; transform:none;
  z-index:150; user-select:none; -webkit-user-select:none; touch-action:none;
}
.dpad-btn {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:#b0c0d0; border:2px solid;
  border-color:#e0e8f0 #607080 #607080 #e0e8f0;
  color:#303850; font-family:inherit; font-size:14px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.dpad-btn:active, .dpad-btn.active {
  background:#90a0b0;
  border-color:#607080 #e0e8f0 #e0e8f0 #607080;
}
#dpad-interact {
  background:#7898c0; color:#f0f4f8; font-weight:bold;
  font-size:12px;
}

/* ── Mobile Action Buttons (A/B) ── */
#mobile-actions {
  display:none;
  position:fixed; bottom:12px; right:16px;
  z-index:150; user-select:none; -webkit-user-select:none; touch-action:none;
}
.mob-btn {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#b0c0d0; border:2px solid;
  border-color:#e0e8f0 #607080 #607080 #e0e8f0;
  color:#303850; font-family:inherit; font-size:12px; font-weight:bold;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  margin-bottom:8px;
}
.mob-btn:active, .mob-btn.active {
  background:#90a0b0;
  border-color:#607080 #e0e8f0 #e0e8f0 #607080;
  transform:scale(0.96);
}
#mob-btn-a { background:#58b868; color:#f0f8f0; border-color:#a8d8a8 #388848 #388848 #a8d8a8; }
#mob-btn-a:active { background:#48a858; border-color:#388848 #a8d8a8 #a8d8a8 #388848; }
#mob-btn-b { background:#e05848; color:#f8f0f0; border-color:#f0a8a0 #a83828 #a83828 #f0a8a0; }
#mob-btn-b:active { background:#d04838; border-color:#a83828 #f0a8a0 #f0a8a0 #a83828; }

/* Show on touch devices */
@media (hover:none) and (pointer:coarse) {
  #mobile-dpad { display:block; }
  #mobile-actions { display:flex; flex-direction:column; align-items:center; }
}

/* ── Mini HUD for damage feedback ── */
#hud-mini {
  display:none; position:fixed; top:4px; left:4px;
  z-index:12; pointer-events:none;
  transition:opacity 0.5s ease;
}
#hud-mini .hud-hp-mini { width:60px; height:2px; background:#a0b0c0; overflow:hidden; }
#hud-mini .hud-hp-fill { height:100%; background:#58b868; }

/* ═══════════════════════════════════════════════
   3D MODE — WoW/Roblox-style dark translucent UI
   ═══════════════════════════════════════════════ */

/* 3D canvas fills the viewport */
#game-wrap.mode-3d { background:#151a22; }
#game-wrap.mode-3d canvas#game { position:absolute; inset:0; width:100%!important; height:100%!important; image-rendering:auto; }

/* Dark translucent topbar */
#topbar.mode-3d {
  background:rgba(10,12,18,0.85); border-bottom:2px solid #c89b3c;
  backdrop-filter:blur(4px);
}
#topbar.mode-3d #biome-name { color:#c89b3c; font-weight:bold; }
#topbar.mode-3d #player-count { color:#8a9aaa; }

/* WoW-style panels: dark translucent with gold border */
.panel-3d {
  background:rgba(8,10,14,0.85);
  border:1.5px solid #c89b3c;
  border-radius:3px;
  color:#c8c8c8;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  text-shadow:0 1px 2px #000;
  backdrop-filter:blur(4px);
  pointer-events:auto;
}
.panel-3d h3 { color:#ffd700; font-size:clamp(10px,0.9vmin,20px); margin-bottom:6px; text-shadow:0 1px 2px #000; }
.panel-3d .enc-btn {
  background:rgba(20,24,30,0.7);
  border:1px solid #6a5a2a;
  color:#e8d8a8;
  border-radius:2px;
  padding:4px 12px;
  cursor:pointer;
  font-family:inherit;
  font-size:clamp(8px,0.7vmin,16px);
  text-shadow:0 1px 1px #000;
}
.panel-3d .enc-btn:hover { border-color:#c89b3c; background:rgba(40,44,50,0.8); }
.panel-3d .enc-btn:active { background:rgba(60,64,70,0.9); }

/* Encounter panel overrides in 3D */
#encounter-panel.mode-3d { border:none; }

/* Chat in 3D */
#chat-panel.mode-3d { background:transparent; }
#chat-panel.mode-3d #chat-input {
  background:rgba(8,10,14,0.85);
  border:1px solid #3a4a5a;
  border-radius:3px;
  backdrop-filter:blur(4px);
}
#chat-panel.mode-3d #chat-input input {
  background:rgba(0,0,0,0.3);
  border:1px solid #3a4a5a;
  color:#c8c8c8;
}
#chat-panel.mode-3d #chat-log { color:#8899aa; }
#chat-panel.mode-3d .msg-name { color:#c89b3c; }

/* Login screen 3D accent */
#login-screen.mode-3d h1 { color:#ffd700; text-shadow:0 2px 4px #000; }
#login-screen.mode-3d .tagline { color:#c89b3c; }
#login-screen.mode-3d button { background:#2a3a4a; border:1.5px solid #c89b3c; color:#ffd700; }
#login-screen.mode-3d button:hover { background:#3a4a5a; }

/* Battle overlay 3D */
#battle-overlay.mode-3d {
  background:rgba(5,7,10,0.7);
}
#battle-overlay.mode-3d #battle-box {
  background:rgba(10,14,22,0.9);
  border:2px solid #c89b3c;
  border-radius:4px;
}
#battle-overlay.mode-3d .combatant .name { color:#ffd700; }
#battle-overlay.mode-3d .combatant .info { color:#8899aa; }
#battle-overlay.mode-3d #vs-text { color:#c89b3c; }
#battle-overlay.mode-3d .btn { background:rgba(30,40,55,0.8); border:1px solid #6a5a2a; color:#e8d8a8; }
#battle-overlay.mode-3d .btn:hover { border-color:#c89b3c; }

/* Coliseum panel 3D */
#coliseum-panel.mode-3d { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; color:#ffd700; }

/* Scrollbars for 3D */
.panel-3d ::-webkit-scrollbar { width:6px; }
.panel-3d ::-webkit-scrollbar-track { background:rgba(0,0,0,0.2); }
.panel-3d ::-webkit-scrollbar-thumb { background:#3a4a5a; border-radius:3px; }
.panel-3d ::-webkit-scrollbar-thumb:hover { background:#c89b3c; }

/* Main menu 3D */
#main-menu.mode-3d {
  background:rgba(8,10,14,0.92);
  border:2px solid #c89b3c;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
#main-menu.mode-3d .mm-player { color:#c8c8c8; }
#main-menu.mode-3d .mm-item.selected { background:rgba(60,50,20,0.8); color:#ffd700; }
#main-menu.mode-3d .mm-item { color:#a0a0a0; }