#screen-game {
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

#header {
  background: linear-gradient(135deg, #1a0a2e, #0d0d1a);
  border-bottom: 2px solid var(--purple-dim);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 48px;
}
#header h1 { color: var(--purple); font-size: clamp(14px,4vw,20px); text-shadow: 0 0 10px #6a0dad; white-space: nowrap; flex-shrink: 0; }
#header .sub { color: #666; font-size: clamp(9px,2vw,12px); display: none; }
@media (min-width: 500px) { #header .sub { display: block; } }

#conn-badge { margin-left: auto; padding: 3px 9px; border-radius: 3px; font-size: 11px; flex-shrink: 0; }
.connected    { background: #003300; color: #00ff00; border: 1px solid #00ff00; }
.disconnected { background: #330000; color: #ff4444; border: 1px solid #ff4444; }

#menu-btn { display: none; background: none; border: 1px solid var(--purple-dim); color: var(--purple); padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 18px; line-height: 1; flex-shrink: 0; }
@media (max-width: 700px) { #menu-btn { display: flex; align-items: center; } }

#status-bar { background: #12121e; padding: 4px 12px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; font-size: 11px; overflow-x: auto; flex-shrink: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#status-bar::-webkit-scrollbar { display: none; }
.si { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.si.hp  { color: var(--red); }
.si.mp  { color: var(--blue); }
.si.gld { color: var(--gold); }
.si.lvl { color: var(--green); }
.si.loc { color: var(--purple); }

#main { flex: 1; display: flex; overflow: hidden; position: relative; }

#output { 
  flex: 1; 
  overflow-y: auto; 
  padding: 12px; 
  background: #0a0a14; 
  white-space: pre-wrap; 
  word-break: break-word; 
  line-height: 1.55; 
  scroll-behavior: smooth; 
  font-size: clamp(12px,2.5vw,14px); 
  font-family: 'Courier New', Courier, monospace; /* ADICIONADO: Essencial para alinhar caixas ASCII */
  -webkit-overflow-scrolling: touch; 
}
#output::-webkit-scrollbar { width: 4px; }
#output::-webkit-scrollbar-track { background: #0a0a14; }
#output::-webkit-scrollbar-thumb { background: var(--purple-dim); border-radius: 2px; }

#input-area { background: var(--bg2); border-top: 2px solid var(--purple-dim); padding: 8px 12px; padding-bottom: calc(8px + var(--safe-b)); display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#prompt { color: var(--purple); font-weight: bold; white-space: nowrap; }
#cmd-input { flex: 1; background: var(--bg3); border: 1px solid var(--purple-dim); color: #e0e0f0; font-family: inherit; font-size: 16px; padding: 8px 10px; border-radius: 5px; outline: none; min-width: 0; }
#cmd-input:focus { border-color: var(--purple); box-shadow: 0 0 6px rgba(155,48,255,0.3); }
#send-btn { background: var(--purple-dim); border: none; color: #fff; padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13px; border-radius: 5px; white-space: nowrap; transition: background 0.15s; min-height: 40px; touch-action: manipulation; }
#send-btn:active, #send-btn:hover { background: var(--purple); }