/* STREAMING_CHUNK:Styling the global layout and theme... */
{ margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,sans-serif; background:#070712; overflow:hidden; user-select:none; }

#errlog { position:fixed; top:0; left:0; right:0; z-index:9999; display:none; background:#a00; color:#fff; padding:6px 12px; font-size:12px; font-family:monospace; }

#welcome { position:fixed; inset:0; z-index:2000; overflow-y:auto; background:#0b1030; display:flex; justify-content:center; align-items:flex-start; padding:30px 16px; }

#arte-login { position:absolute; inset:0; overflow:hidden; }
#arte-login svg { position:absolute; inset:0; width:100%; height:100%; }
#login-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }

.welcome-box { position:relative; max-width:600px; width:100%; color:#e8ecf5; text-align:center; background:rgba(8,10,24,.82); border:1px solid rgba(216,31,63,.45); border-radius:20px; padding:26px 28px; backdrop-filter:blur(10px); }
.logo4 { position:relative; width:90px; height:90px; margin:0 auto 6px; filter:drop-shadow(0 0 20px rgba(56,182,255,.8)); }
.logo4 div { position:absolute; width:38px; height:38px; border-radius:8px; transform:rotate(45deg); }
.logo4 .l1{top:0;left:26px;background:#9fdcff}.logo4 .l2{top:26px;left:52px;background:#38b6ff}
.logo4 .l3{top:52px;left:26px;background:#2b7fff}.logo4 .l4{top:26px;left:0;background:#5ec6ff}
.welcome-box h1 { font-size:2.6em; letter-spacing:5px; color:#fff; text-shadow:0 0 24px rgba(127,208,255,.9); }
.barra { width:170px; height:4px; background:#d81f3f; margin:8px auto 4px; border-radius:4px; }
.welcome-box h2 { color:#9fb6d8; font-weight:300; font-size:.85em; margin-bottom:14px; letter-spacing:3px; }

.lore { text-align:left; background:rgba(255,255,255,.05); border:1px solid rgba(127,208,255,.25); border-radius:14px; padding:14px 20px; line-height:1.65; font-size:.86em; margin-bottom:14px; }
.lore strong { color:#ff5a6e; } .lore .destaque { color:#ffd700; }

.campo { margin:10px 0; } .campo label { display:block; color:#9fb6d8; font-size:.8em; margin-bottom:7px; }
#nome-input { background:rgba(255,255,255,.08); border:1px solid #d81f3f; color:#fff; padding:11px 18px; border-radius:30px; font-size:1em; width:250px; text-align:center; outline:none; }
.cores { display:flex; gap:12px; justify-content:center; margin:8px 0 18px; }
.cor { width:36px; height:36px; border-radius:50%; cursor:pointer; border:3px solid transparent; }
.cor.sel { border-color:#fff; transform:scale(1.2); }
#enter-btn { padding:15px 52px; font-size:1.1em; font-weight:bold; cursor:pointer; background:linear-gradient(90deg,#d81f3f,#ff5a4d); color:#fff; border:none; border-radius:50px; }
.aviso-mobile { color:#7d90b0; font-size:.74em; margin-top:12px; line-height:1.6; }

/* STREAMING_CHUNK:Styling HUD and game interface widgets... */
.hud { position:fixed; z-index:1000; display:none; pointer-events:none; }
#hud-local { top:14px; left:14px; color:#fff; background:rgba(10,10,25,.75); padding:10px 16px; border-radius:12px; border:1px solid rgba(216,31,63,.4); font-size:.88em; pointer-events:auto; }
#hud-local .nome { color:#ff5a6e; font-weight:bold; }
#hud-btns { top:14px; right:14px; flex-direction:column; gap:8px; max-height:90vh; overflow-y:auto; pointer-events:auto; }
.hud-btn { background:rgba(10,10,25,.8); border:1px solid #d81f3f; color:#fff; padding:9px 15px; border-radius:12px; cursor:pointer; font-size:.88em; }
.hud-btn.destaque { border-color:#ffd700; color:#ffd700; font-weight:bold; }
.hud-btn.ia { border-color:#38b6ff; color:#7fd0ff; font-weight:bold; }
.hud-btn.quiz { border-color:#4dff88; color:#aaffcc; font-weight:bold; }
#hud-coin { top:14px; left:50%; transform:translateX(-50%); color:#ffd700; background:rgba(10,10,25,.8); border:1px solid #ffd700; padding:9px 20px; border-radius:30px; font-size:1em; font-weight:bold; }
#hud-modo { bottom:14px; right:14px; color:#fff; background:rgba(10,10,25,.8); border:1px solid #38b6ff; padding:9px 15px; border-radius:12px; font-size:.85em; }
#hud-ajuda { bottom:14px; left:14px; color:#aaa; background:rgba(0,0,0,.55); padding:8px 14px; border-radius:10px; font-size:.74em; max-width:400px; }
#minimapa { bottom:64px; right:14px; background:rgba(8,10,24,.9); border:2px solid #38b6ff; border-radius:12px; pointer-events:auto; }
kbd { background:#d81f3f; color:#fff; padding:1px 6px; border-radius:4px; font-family:monospace; }
.coin-float { position:fixed; top:64px; left:50%; z-index:1550; color:#ffd700; font-weight:bold; pointer-events:none; animation:sobe 1.25s ease-out forwards; }
@keyframes sobe { to{ transform:translateY(-52px); opacity:0; } }
#toast { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:rgba(216,31,63,.92); color:#fff; padding:12px 26px; border-radius:30px; font-size:.95em; z-index:1500; display:none; max-width:85%; text-align:center; }

/* HUD Missões (NOVO) */
#hud-quest { position:fixed; top:110px; left:14px; background:rgba(12,10,26,.85); border:1px solid #ffd700; color:#fff; padding:12px 16px; border-radius:12px; font-size:.85em; display:none; backdrop-filter:blur(5px); pointer-events:none; }
#hud-quest h4 { color:#ffd700; margin-bottom:6px; font-size:1em; letter-spacing:1px; }
#quest-prog { color:#4dff88; margin-top:4px; font-weight:bold; font-size:.9em; }

/* Joystick Virtual (NOVO) */
#joystick-zone { position:fixed; bottom:80px; left:20px; width:130px; height:130px; z-index:1200; display:none; pointer-events:auto; }
#joystick-base { position:absolute; inset:0; background:rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.2); border-radius:50%; }
#joystick-stick { position:absolute; top:50%; left:50%; width:50px; height:50px; background:rgba(216,31,63,0.8); border:2px solid #ff5a6e; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 15px rgba(216,31,63,0.5); pointer-events:none; }
@media (max-width: 800px) { #joystick-zone { display:block; } }

/* STREAMING_CHUNK:Styling Ruby UI, chat, quiz and configuration panels... */
#ruby-ui { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); width:92%; max-width:640px; z-index:1400; display:none; background:rgba(12,8,26,.94); border:2px solid #d81f3f; border-radius:18px; padding:18px 22px; color:#eee; pointer-events:auto; }
#ruby-ui .cabecalho { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#ruby-ui .bola { width:14px; height:14px; border-radius:50%; background:#d81f3f; animation:pulso 1.4s infinite; }
@keyframes pulso { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
#ruby-ui strong { color:#ff5a6e; font-size:1.05em; }
#ruby-fechar { margin-left:auto; background:none; border:none; color:#777; font-size:1.2em; cursor:pointer; }
#ruby-texto { line-height:1.6; font-size:.92em; min-height:46px; white-space:pre-line; }
#ruby-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip { background:rgba(216,31,63,.15); border:1px solid #d81f3f; color:#ffb3b8; padding:7px 14px; border-radius:20px; cursor:pointer; font-size:.83em; }
.chip:hover { background:#d81f3f; color:#fff; }

#chat-ui { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); width:94%; max-width:660px; height:440px; z-index:1450; display:none; background:rgba(12,8,26,.96); border:2px solid #d81f3f; border-radius:18px; color:#eee; flex-direction:column; overflow:hidden; pointer-events:auto; }
#chat-cab { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(216,31,63,.15); border-bottom:1px solid rgba(216,31,63,.4); }
#chat-cab .bola2 { width:12px; height:12px; border-radius:50%; background:#d81f3f; animation:pulso 1.4s infinite; }
#chat-cab strong { color:#ff5a6e; }
#chat-prov { font-size:.72em; color:#888; margin-left:6px; }
#chat-cab button { background:none; border:none; color:#777; font-size:1.15em; cursor:pointer; margin-left:4px; }
#chat-cab button:hover { color:#fff; }
#chat-msgs { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; user-select:text; }
.msg { max-width:82%; padding:9px 14px; border-radius:14px; line-height:1.55; font-size:.9em; white-space:pre-line; }
.msg.ruby { background:rgba(216,31,63,.18); border:1px solid rgba(216,31,63,.4); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.eu { background:rgba(56,182,255,.18); border:1px solid rgba(56,182,255,.4); align-self:flex-end; border-bottom-right-radius:4px; }
.msg.erro { background:rgba(255,80,80,.15); border:1px solid #ff5a5a; align-self:center; font-size:.82em; color:#ffb3b3;}
#chat-digitando { display:none; padding:4px 16px; color:#ff9db0; font-size:.8em; font-style:italic; }
#chat-entrada { display:flex; gap:8px; padding:10px 12px; border-top:1px solid rgba(216,31,63,.4); }
#chat-input { flex:1; background:rgba(255,255,255,.08); border:1px solid #d81f3f; color:#fff; padding:10px 16px; border-radius:24px; font-size:.92em; outline:none; user-select:text; }
#chat-enviar { background:linear-gradient(90deg,#d81f3f,#ff5a4d); border:none; color:#fff; padding:10px 20px; border-radius:24px; cursor:pointer; font-weight:bold; }

#quiz-ui { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); width:94%; max-width:600px; z-index:1460; display:none; background:rgba(8,20,14,.96); border:2px solid #4dff88; border-radius:18px; color:#eee; overflow:hidden; pointer-events:auto; }
#quiz-cab { display:flex; align-items:center; gap:10px; padding:12px 16px; background:rgba(77,255,136,.12); border-bottom:1px solid rgba(77,255,136,.4); }
#quiz-cab strong { color:#aaffcc; }
#quiz-placar { font-size:.85em; color:#ffd700; margin-left:auto; }
#quiz-cab button { background:none; border:none; color:#777; font-size:1.15em; cursor:pointer; }
#quiz-corpo { padding:16px 20px; }
#quiz-categoria { font-size:.75em; color:#7dffa8; margin-bottom:6px; }
#quiz-pergunta { font-size:1em; line-height:1.5; margin-bottom:14px; min-height:44px; white-space:pre-line; }
#quiz-alternativas { display:flex; flex-direction:column; gap:8px; }
.quiz-alt { text-align:left; background:rgba(255,255,255,.06); border:1px solid rgba(77,255,136,.35); color:#eee; padding:11px 16px; border-radius:12px; cursor:pointer; font-size:.9em; }
.quiz-alt:hover:not(:disabled) { background:rgba(77,255,136,.2); border-color:#4dff88; }
.quiz-alt.certa { background:rgba(77,255,136,.35); border-color:#4dff88; font-weight:bold; }
.quiz-alt.errada { background:rgba(255,80,80,.25); border-color:#ff5a5a; }
#quiz-feedback { min-height:24px; margin-top:12px; font-size:.9em; color:#fff; }
#quiz-prox { display:none; margin:8px auto 0; padding:11px 34px; background:linear-gradient(90deg,#2ea35c,#4dff88); border:none; color:#032; border-radius:24px; cursor:pointer; font-weight:bold; }

#api-config { position:fixed; inset:0; z-index:1700; display:none; background:rgba(5,5,15,.92); justify-content:center; align-items:center; pointer-events:auto; }
#api-box { background:#140c22; border:2px solid #d81f3f; border-radius:18px; padding:26px; width:92%; max-width:480px; color:#eee; max-height:90vh; overflow-y:auto; }
#api-box h3 { color:#ff5a6e; margin-bottom:14px; text-align:center; }
#api-box label { display:block; color:#9fb6d8; font-size:.8em; margin:12px 0 5px; }
#api-box input, #api-box select { width:100%; background:rgba(255,255,255,.08); border:1px solid #d81f3f; color:#fff; padding:10px 14px; border-radius:10px; font-size:.9em; outline:none; }
#api-box .dica { color:#666; font-size:.72em; margin-top:6px; line-height:1.5; }
#api-salvar { display:block; margin:18px auto 0; padding:11px 40px; background:linear-gradient(90deg,#d81f3f,#ff5a4d); border:none; color:#fff; border-radius:24px; cursor:pointer; font-weight:bold; }

#mapa { position:fixed; inset:0; z-index:1600; display:none; background:rgba(5,5,15,.9); justify-content:center; align-items:center; pointer-events:auto; }
#mapa-box { background:#120a22; border:2px solid #d81f3f; border-radius:20px; padding:26px; width:92%; max-width:660px; color:#fff; max-height:90vh; overflow-y:auto; }
#mapa-box h3 { text-align:center; color:#7fd0ff; margin-bottom:4px; }
#mapa-box p { text-align:center; color:#888; font-size:.8em; margin-bottom:16px; }
#mapa-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:9px; }
.mapa-item { display:flex; align-items:center; gap:10px; padding:11px 13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; cursor:pointer; font-size:.86em; color:#eee; text-align:left; }
.mapa-item:hover { border-color:#d81f3f; background:rgba(216,31,63,.18); }
.mapa-item.aqui { border-color:#4dff88; background:rgba(77,255,136,.12); }
.mapa-item.sala { border-color:#ffd700; background:rgba(255,215,0,.1); }
#mapa-fechar { display:block; margin:18px auto 0; background:none; border:1px solid #666; color:#aaa; padding:8px 30px; border-radius:20px; cursor:pointer; }