:root{
  --bg:#0f172a;
  --panel:#111827;
  --muted:#cbd5e1;
  --fg:#e5e7eb;
  --accent:#22d3ee;
  --ok:#006414;
  --bad:#ff0000;
  --chip:#0b1324;
  --chip-border:#334155;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  background: radial-gradient(1000px 600px at 70% -20%, #1e293b, #0b1224) no-repeat fixed;
  color:var(--fg);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid #1f2937;
  background:rgba(2,6,23,.6); backdrop-filter: blur(8px);
}
#wordSearch .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap;
  margin-bottom: 1rem;
}
#wordSearch .controls button {
  /* Usa o estilo global de button */
}
#meta{color:#fff; font-size:1.2rem; margin-bottom:.5rem; font-weight:bold;}

.container{max-width:900px; margin:1rem auto; padding:0 1rem}
.panel{
  background:rgba(17,24,39,.7); border:1px solid #1f2937; border-radius:1rem;
  padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.sub{color:#fff; margin-top:-.25rem}

.game{display:grid; grid-template-columns:1fr; gap:1rem; margin-top:1rem}
@media (min-width: 860px){
  .game{grid-template-columns:1fr 1fr}
}

.label{font-size:.85rem; color:v#fff; margin-bottom:.35rem}

.alvo,.banco{
  display:flex; flex-wrap:wrap; gap:.5rem; min-height:58px;
  border:1px dashed #fff; border-radius:.75rem; padding:.75rem;
  background:rgba(15,23,42,.35);
}

.chip{
  /*background:var(--chip); */border:1px dashed var(--chip-border);
  padding:.5rem .75rem; border-radius:.5rem; cursor:pointer; user-select:none;
  font-weight:600;
}
.chip:hover{outline:2px solid var(--accent)}
.chip.in-place{
  /*background:#13312f;*/ border-color:#14532d;
}
.chip.ghost{
  opacity:.35; outline:1px dashed var(--accent);
}

.status{margin-top:.5rem; color:#F3A83C}
.status.ok{
  color:var(--ok);
  background:#fff;
  padding:2px 8px;
  border-radius:6px;
  display:inline-block;
}
.status.bad{
  color:var(--bad);
  background:#fff;
  padding:2px 8px;
  border-radius:6px;
  display:inline-block;
}

.footer{opacity:.6; text-align:center; padding:1rem}

button {
    background-color: #fff; 
    color: #000;
    border: 2px solid #c97a2a;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 12px;         /* bordas arredondadas = cara de game */
    cursor: pointer;
    box-shadow: 0 4px 0 #8a4b0b; /* relevo simples */
    transition: transform 0.1s ease, background 0.2s ease;
    margin: 20px 0;
}

button:hover {
    background-color: #f2b94b;   /* mais claro no hover */
    transform: translateY(-2px);
}

button:active {
    background-color: #c97a2a;   /* marrom mais forte no clique */
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8a4b0b;
}