:root{
  --bg:#030406;       /* fundo da página */
  --panel:#04120b;    /* fundo dos painéis de cada dado */
  --accent:#66ff66;   /* cor de destaque (texto) */
  --muted:#7fbf7f     /* cor secundária */
}

/* estilo básico da página */
html,body{height:100%;margin:0;background:var(--bg);color:var(--accent);font-family:"Courier New",Courier,monospace}

/* container central */
.wrap{max-width:1100px;margin:18px auto;padding:12px;display:flex;flex-direction:column;gap:14px;align-items:center}

/* painel de cada dado (canvas + controles) */
.die-panel{width:100%;display:flex;gap:12px;padding:12px;border-radius:8px;background:linear-gradient(180deg,var(--panel),rgba(0,0,0,0.12));border:1px solid rgba(102,255,102,0.06)}

/* área onde o renderer do Three.js é inserido (canvas) */
.die-canvas{width:360px;height:240px;border-radius:6px;overflow:hidden;background:#00100a;display:flex;align-items:center;justify-content:center;position:relative}

/* controles ao lado do canvas */
.die-controls{flex:1;display:flex;flex-direction:column;gap:8px;padding:6px 2px}

/* títulos e botões */
.die-title{font-size:13px;color:var(--muted);margin-bottom:2px}
button.roll{background:transparent;border:1px solid rgba(102,255,102,0.18);color:var(--accent);padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:700}
button.roll:disabled{opacity:0.35;cursor:not-allowed}

/* resultado numérico central */
.result{font-size:30px;font-weight:900;color:var(--accent);text-align:center;min-height:46px}

/* dificuldade / meta */
.meta{display:flex;gap:8px;align-items:center}
.meta .target{font-size:12px;color:var(--muted)}
a.status{display:inline-block;padding:8px 12px;border-radius:6px;text-decoration:none;color:#041014;background:linear-gradient(90deg,#b6ffb6,#8cff8c);font-weight:800}
a.fail{background:linear-gradient(90deg,#ffb6b6,#ff8c8c);color:#130000}

/* overlay grande exibindo o número ao centro do canvas */
.overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:64px;font-weight:900;color:#030406;background:var(--accent);padding:6px 12px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity 160ms}
.overlay.show{opacity:1}

/* pixelated para visual "terminal/pixel" quando aplicável */
canvas{image-rendering:pixelated}

/* responsividade simples */
@media (max-width:980px){.die-panel{flex-direction:column}.die-canvas{width:100%;height:240px}}

/* Cursor piscando estilo terminal */
.terminal-caret {
  display: inline-block;
  width: 9px;
  height: 20px;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: baseline;
  animation: caretBlink 0.9s steps(1) infinite;
}

@keyframes caretBlink {
  50% { opacity: 0; }
}

/* Área do texto digitado */
#terminalText {
  display: block;
  width: 100%;
  text-align: left;
  white-space: pre-wrap;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 18px;
  line-height: 1.4em;
  color: var(--accent);
  padding: 0;
  margin: 0;
}

/* --- BOTÕES DE ROLAR DADO (estilo terminal verde retro) --- */
.roll-button {
  font-family: "Consolas", monospace;
  font-size: 16px;
  font-weight: 700;
  color: #b8ffbf;
  background: #03250f;
  text-decoration: none; /* remove o sublinhado */
  text-align: center;   
  border: 2px solid #0aff60;
  border-radius: 6px;

  padding: 8px 20px;
  cursor: pointer;

  #text-shadow: 0 0 6px #00ff80;
  #box-shadow: inset 0 0 10px #0a0, 0 0 8px #0a0;

  outline: none;
  transition: 0.12s ease-out;
  letter-spacing: 1px;

  display: inline-block;
}

/* Hover */
.roll-button:hover {
  background: #065020;
  border-color: #5dff96;
  box-shadow: inset 0 0 14px #0f0, 0 0 10px #0f0;
  transform: translateY(-1px);
}

/* Ativo (clique) */
.roll-button:active {
  background: #021b0a;
  box-shadow: inset 0 0 20px #00ff55;
  transform: scale(0.96);
}

/* Botão desabilitado (quando não pode rolar de novo) */
.roll-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(100%);
  box-shadow: none;
  border-color: #1b3a1f;
  background: #051d0b;
  color: #3a6b3f;
}