/* ...existing styles... */
:root{
  --accent:#00a7c8;
  --bg:#fff;
  --panel:#000;
}
html,body{height:100%;margin:0;font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial;}
/* replace solid rgba background with image and keep a 70% white overlay via ::before */
body{
  display:flex;flex-direction:column;align-items:center;
  background-image: url('forest.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
  color:#111;
  overflow-y:auto;
  background-color: #000; /* set body background to black */
  box-shadow: 0 0 28px rgba(102,204,255,0.12), inset 0 0 48px rgba(102,204,255,0.06);
  border-radius: 8px;
  padding: 6px; /* make space so fixed elements don't overlap border */
  animation: bodyNeon 2.2s ease-in-out infinite;
}
/* subtle black overlay at 70% opacity to match previous transparency requirement */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  pointer-events:none;
  z-index:0;
}
#three-bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1; /* above background (body::before z-index:0) but below UI (z-index:1100+) */
  display:block;
  border: 8px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
}
.image-container{width:100%;max-width:600px;margin:0;}
.image-container img{width:100%;height:auto;display:block;transition:transform .5s ease;}
.wrapper{width:100%;overflow-x:auto;white-space:nowrap;padding:30px 20px 140px;box-sizing:border-box;background:#000;color:#fff;}
.titulo{color:var(--accent);text-align:center;font-size:24px;font-weight:700;}
.subtitulo{color:#fff;text-align:center;font-size:14px;}
input,button{
  padding:10px;
  margin:5px;
  font-size:16px;
  color:#fff;
  border:2px solid rgba(102,204,255,0.95);
  background:#111; /* fully opaque control background */
  border-radius:6px;
  box-shadow:0 0 18px rgba(102,204,255,0.12);
  position:relative; /* create stacking context to sit above particle layer */
  z-index:1400; /* ensure controls are above three.js canvas and overlays */
}
input::placeholder{color:rgba(255,255,255,0.7);}
.button-container{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:1;
  position:relative;
  z-index:1400; /* keep grouped controls on top of background overlays */
}
/* make canvas background transparent so page background shows through */
canvas{border:1px solid #eee;margin-top:20px;width:400px;height:400px;background:transparent;box-shadow:0 2px 8px rgba(0,0,0,.08);}
/* neon pulsing border for the sigil canvas */
#sigilCanvas{
  border:2px solid rgba(102,204,255,0.9);
  box-shadow: 0 0 18px rgba(102,204,255,0.18), 0 0 36px rgba(102,204,255,0.12) inset;
  animation: neonPulse 2.2s ease-in-out infinite;
  transition: box-shadow .25s linear, border-color .25s linear;
  background: rgba(255,255,255,0.6);
}
@keyframes neonPulse{
  0%{ border-color: rgba(102,204,255,0.85); box-shadow: 0 0 8px rgba(102,204,255,0.08), 0 0 28px rgba(102,204,255,0.06) inset; }
  50%{ border-color: rgba(102,204,255,1); box-shadow: 0 0 28px rgba(102,204,255,0.28), 0 0 56px rgba(102,204,255,0.18) inset; }
  100%{ border-color: rgba(102,204,255,0.85); box-shadow: 0 0 8px rgba(102,204,255,0.08), 0 0 28px rgba(102,204,255,0.06) inset; }
}
@keyframes bodyNeon{
  0%{
    border-color: rgba(102,204,255,0.7);
    box-shadow: 0 0 8px rgba(102,204,255,0.06), inset 0 0 24px rgba(102,204,255,0.03);
  }
  50%{
    border-color: rgba(102,204,255,1);
    box-shadow: 0 0 48px rgba(102,204,255,0.28), inset 0 0 72px rgba(102,204,255,0.12);
  }
  100%{
    border-color: rgba(102,204,255,0.7);
    box-shadow: 0 0 8px rgba(102,204,255,0.06), inset 0 0 24px rgba(102,204,255,0.03);
  }
}
/* floating button */
.botao-flutuante{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border:none;
  cursor:pointer;
  z-index:1000;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
/* ...existing styles... */

/* ...existing styles... */
/* unify floating buttons appearance */
.botao-flutuante,
.botao-instrucoes,
.botao-config{
  position:fixed;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  border:2px solid rgba(102,204,255,0.95);
  cursor:pointer;
  z-index:1100;
  box-shadow:0 8px 22px rgba(0,0,0,.22), 0 0 28px rgba(102,204,255,0.18);
  right:20px; /* same distance from right for all */
}

/* positioning variants - reduced spacing and adjusted bottoms */
.botao-flutuante{ bottom:12px; z-index:1200; }
.botao-config{ bottom:68px; z-index:1200; } /* 12 + 44 + 12 */
.botao-instrucoes{ bottom:124px; z-index:1200; } /* 68 + 44 + 12 */
/* ...existing styles... */

/* content paragraph spacing */
.sigilo-container{padding:0 20px;max-width:900px;line-height:1.6;}
/* responsive canvas */
@media(max-width:520px){canvas{width:92vw;height:92vw}}
/* ...existing styles... */

.botao-config{
  bottom:68px;
  right:20px;
}

/* ...existing styles... */

/* settings modal content tweaks */
.config-content{display:flex;flex-direction:column;gap:10px;font-size:15px}
.config-content label{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* center and style the "Aplicar" button in the settings modal with neon pulsing border */
#configModal .config-content > div > button#applyConfig {
  display: block;
  margin: 12px auto 0; /* center horizontally */
  padding: 10px 18px;
  min-width: 140px;
  border-radius: 10px;
  background: linear-gradient(180deg, #071018, #0b0f12);
  color: var(--accent);
  border: 2px solid rgba(102,204,255,0.14);
  box-shadow: 0 8px 28px rgba(2,8,18,0.6), 0 0 10px rgba(102,204,255,0.06);
  cursor: pointer;
  position: relative;
  z-index: 1602;
  transition: transform .12s ease, box-shadow .12s ease;
  animation: applyNeon 2.2s infinite linear;
}

/* neon border pulse */
@keyframes applyNeon {
  0% {
    box-shadow: 0 8px 28px rgba(2,8,18,0.6), 0 0 6px rgba(102,204,255,0.06), 0 0 0 0 rgba(102,204,255,0.04) inset;
    border-color: rgba(102,204,255,0.18);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 12px 40px rgba(2,8,18,0.7), 0 0 34px rgba(0,160,200,0.18), 0 0 8px 2px rgba(102,204,255,0.08) inset;
    border-color: rgba(102,204,255,1);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: 0 8px 28px rgba(2,8,18,0.6), 0 0 6px rgba(102,204,255,0.06), 0 0 0 0 rgba(102,204,255,0.04) inset;
    border-color: rgba(102,204,255,0.18);
    transform: translateY(0);
  }
}

/* slightly stronger hover state */
#configModal .config-content > div > button#applyConfig:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 46px rgba(2,8,18,0.72), 0 0 48px rgba(0,160,200,0.22);
}
/* modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.84));
  backdrop-filter: blur(6px) saturate(1.05);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1600; /* raised so modals overlay all controls */
  padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background: linear-gradient(180deg, rgba(6,10,14,0.95), rgba(10,14,18,0.98));
  color:#e8f7ff;
  width:75vw;
  max-width:820px;
  max-height:88vh;
  overflow:auto;
  border-radius:14px;
  padding:20px;
  box-shadow: 0 12px 40px rgba(2,8,18,0.65), inset 0 1px 0 rgba(255,255,255,0.02);
  font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height:1.5;
  z-index:1601; /* ensure modal content sits above backdrop and all UI elements */
  border: 1px solid rgba(102,204,255,0.06);
}
.modal h2{
  margin-top:0;
  color:var(--accent);
  text-shadow: 0 6px 18px rgba(0,160,200,0.06);
}
/* subtle divider under headings */
.modal h2 + * {
  border-top: 1px solid rgba(102,204,255,0.04);
  padding-top:12px;
  margin-top:12px;
}

/* restyle close/apply buttons to match neon look */
.modal .close{
  position:sticky;
  top:8px;
  float:right;
  background:linear-gradient(180deg,#0e1113,#0b0f12);
  color:var(--accent);
  border:2px solid rgba(102,204,255,0.14);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  box-shadow: 0 8px 30px rgba(2,8,18,0.6), 0 0 16px rgba(102,204,255,0.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.modal .close:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(2,8,18,0.7), 0 0 36px rgba(102,204,255,0.12);
}

/* style modal internal buttons for consistent look */
.modal button{
  background:#071018;
  color:var(--accent);
  border:1px solid rgba(102,204,255,0.12);
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(2,8,18,0.5);
}
.modal button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(2,8,18,0.7), 0 0 36px rgba(102,204,255,0.12);
}

/* ensure modal forms and labels match theme */
.modal label, .modal .config-content, .modal .history-card {
  color: #dff6ff;
}
.modal .config-content input[type="color"],
.modal .config-content input[type="range"],
.modal .config-content select,
.modal .config-content textarea {
  background:#071018;
  color:#e8f7ff;
  border:1px solid rgba(102,204,255,0.08);
  box-shadow:none;
}

/* make modal scrollbars subtle and themed (keep original look) */
.modal::-webkit-scrollbar { height:10px; width:10px; }
.modal::-webkit-scrollbar-thumb { background: rgba(102,204,255,0.08); border-radius:8px; }
.modal::-webkit-scrollbar-track { background: transparent; }

/* site-wide thinner elegant scrollbars matching modal theme */
/* WebKit/Blink browsers */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#historyContent::-webkit-scrollbar,
.wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#historyContent::-webkit-scrollbar-thumb,
.wrapper::-webkit-scrollbar-thumb {
  background: rgba(102,204,255,0.06);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#historyContent::-webkit-scrollbar-track,
.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox */
html, body, #historyContent, .wrapper {
  scrollbar-width: thin;
  scrollbar-color: rgba(102,204,255,0.06) transparent;
}
/* ...existing styles... */

.botao-music{
  position:fixed;
  bottom:180px; /* compressed stack */
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  border:2px solid rgba(102,204,255,0.95);
  cursor:pointer;
  z-index:1200;
  box-shadow:0 8px 22px rgba(0,0,0,.22), 0 0 28px rgba(102,204,255,0.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.botao-music.playing{
  transform:scale(1.06);
  box-shadow:0 8px 34px rgba(102,204,255,0.28), 0 0 44px rgba(102,204,255,0.18);
}
.button-container button#drawBtn.active{
  box-shadow: 0 8px 34px rgba(102,204,255,0.28), 0 0 44px rgba(102,204,255,0.18);
  transform: translateY(-2px);
}

input#phrase{
  width:400px;
  max-width:92vw;
  box-sizing:border-box;
  display:block;
  margin:12px auto 0;
  color:#fff; /* ensure typed text is white */
  -webkit-text-fill-color:#fff; /* for some browsers */
  background:#111; /* explicit opaque background so field is fully visible */
  border:2px solid rgba(102,204,255,0.95);
  padding:10px;
  border-radius:6px;
  opacity:1; /* ensure full opacity by default */
  position:relative;
  z-index:1400; /* ensure input sits above overlays */
}

/* Keep input dark and text white when browser autofill/autocomplete styles kick in */
input#phrase:-webkit-autofill,
input#phrase:-webkit-autofill:hover,
input#phrase:-webkit-autofill:focus,
input#phrase:-internal-autofill-selected {
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  background-color: #111 !important;
  background-clip: padding-box;
  box-shadow: 0 0 0px 1000px #111 inset !important; /* override yellow/white autofill */
  transition: background-color 5000s ease-in-out 0s; /* prevents some browsers from flashing native fill color */
}

/* ensure buttons are fully opaque by default */
.button-container button{
  opacity:1;
  background:#111;
  border-color: rgba(102,204,255,0.95);
}

/* floating color button - stacked above other floating buttons */
.botao-color{
  position:fixed;
  bottom:236px; /* compressed stack */
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  border:2px solid rgba(102,204,255,0.95);
  cursor:pointer;
  z-index:1220;
  box-shadow:0 8px 22px rgba(0,0,0,.22), 0 0 28px rgba(102,204,255,0.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.botao-color:active{ transform:scale(.98); }

/* floating model button (matches other floating buttons) */
.botao-model{
  position:fixed;
  bottom:292px; /* compressed stack */
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  border:2px solid rgba(102,204,255,0.95);
  cursor:pointer;
  z-index:1230;
  box-shadow:0 8px 22px rgba(0,0,0,.22), 0 0 28px rgba(102,204,255,0.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.botao-model:active{ transform:scale(.98); }

/* floating history button */
.botao-history{
  position:fixed;
  bottom:348px;
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  border:2px solid rgba(102,204,255,0.95);
  cursor:pointer;
  z-index:1240;
  box-shadow:0 8px 22px rgba(0,0,0,.22), 0 0 28px rgba(102,204,255,0.18);
}

/* history card styles */
.history-card{
  width:220px;
  background:#f7f7f7;
  border-radius:8px;
  padding:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  color:#111;
}
.history-thumb-wrap{width:100%;height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px;background:#fff;border:1px solid rgba(0,0,0,0.04);}
.history-thumb{max-width:100%;max-height:100%;display:block;}
.history-meta{margin-top:8px;font-size:13px;line-height:1.2;color:#222;display:flex;flex-direction:column;gap:6px;}
.history-phrase{font-weight:600;}
.history-ts{font-size:12px;color:#666;}
/* ensure modal content wraps nicely for many cards */
#historyContent{max-height:56vh;overflow:auto;padding:6px;box-sizing:border-box;}

/* small textarea styling for custom equation */
#cfgCustomExpr, #modelOnlyCustom { font-family: "Space Mono", monospace; font-size:13px; padding:8px; border:1px solid rgba(102,204,255,0.25); border-radius:6px; background:#fafafa; color:#111; }

/* Tooltip for floating buttons: appears to the left of the button on hover */
.botao-flutuante[data-tooltip],
.botao-instrucoes[data-tooltip],
.botao-config[data-tooltip],
.botao-music[data-tooltip],
.botao-color[data-tooltip],
.botao-model[data-tooltip],
.botao-history[data-tooltip]{
  position:fixed; /* already fixed but ensure pseudo is positioned relative */
}

/* create tooltip using ::before so it sits to the left of each fixed button */
.botao-flutuante[data-tooltip]::before,
.botao-instrucoes[data-tooltip]::before,
.botao-config[data-tooltip]::before,
.botao-music[data-tooltip]::before,
.botao-color[data-tooltip]::before,
.botao-model[data-tooltip]::before,
.botao-history[data-tooltip]::before{
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px); /* place left of the button with gap */
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: rgba(17,17,17,0.95);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35), 0 0 12px rgba(102,204,255,0.06);
  border: 1px solid rgba(102,204,255,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 1300;
}

/* arrow pointer */
.botao-flutuante[data-tooltip]::after,
.botao-instrucoes[data-tooltip]::after,
.botao-config[data-tooltip]::after,
.botao-music[data-tooltip]::after,
.botao-color[data-tooltip]::after,
.botao-model[data-tooltip]::after,
.botao-history[data-tooltip]::after{
  content: "";
  position: absolute;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: rgba(17,17,17,0.95);
  border-left: 1px solid rgba(102,204,255,0.04);
  border-bottom: 1px solid rgba(102,204,255,0.04);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity .14s ease;
  z-index: 1299;
}

/* show on hover/focus */
.botao-flutuante[data-tooltip]:hover::before,
.botao-instrucoes[data-tooltip]:hover::before,
.botao-config[data-tooltip]:hover::before,
.botao-music[data-tooltip]:hover::before,
.botao-color[data-tooltip]:hover::before,
.botao-model[data-tooltip]:hover::before,
.botao-history[data-tooltip]:hover::before,
.botao-flutuante[data-tooltip]:focus::before,
.botao-instrucoes[data-tooltip]:focus::before,
.botao-config[data-tooltip]:focus::before,
.botao-music[data-tooltip]:focus::before,
.botao-color[data-tooltip]:focus::before,
.botao-model[data-tooltip]:focus::before,
.botao-history[data-tooltip]:focus::before{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* show arrow on hover/focus */
.botao-flutuante[data-tooltip]:hover::after,
.botao-instrucoes[data-tooltip]:hover::after,
.botao-config[data-tooltip]:hover::after,
.botao-music[data-tooltip]:hover::after,
.botao-color[data-tooltip]:hover::after,
.botao-model[data-tooltip]:hover::after,
.botao-history[data-tooltip]:hover::after,
.botao-flutuante[data-tooltip]:focus::after,
.botao-instrucoes[data-tooltip]:focus::after,
.botao-config[data-tooltip]:focus::after,
.botao-music[data-tooltip]:focus::after,
.botao-color[data-tooltip]:focus::after,
.botao-model[data-tooltip]:focus::after,
.botao-history[data-tooltip]:focus::after{
  opacity: 1;
}