[hidden] { display: none !important; }
:root { --bg: #1e3a2b; --mesa: #2c5a40; --madera: #8b4513; --text: #f7f1e3; --muted: #c8d6c9; --oro: #f2c14e; --rojo: #d9534f; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: radial-gradient(ellipse at center, var(--mesa), var(--bg)); min-height: 100vh; }
.top { text-align: center; padding: 16px 16px 0; }
h1 { margin: 0; font-size: 1.8rem; color: var(--oro); }
main { max-width: 560px; margin: 0 auto; padding: 12px 16px; display: grid; gap: 12px; }
.rivales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rival { background: #0004; border-radius: 12px; padding: 10px 6px; text-align: center; border: 2px solid transparent; }
.rival.turno { border-color: var(--oro); }
.rival.fuera { opacity: .35; }
.rival .cara { font-size: 1.8rem; }
.rival .dice { font-size: .8rem; color: var(--muted); min-height: 1.4em; }
.mini { display: inline-flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.apuesta { text-align: center; background: #0005; border-radius: 12px; padding: 12px; min-height: 76px; }
.apuesta b { font-size: 1.6rem; color: var(--oro); }
.dados { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dado { width: 48px; height: 48px; background: #fffaf0; color: #222; border-radius: 10px; display: grid; place-items: center; font-size: 1.6rem; font-weight: 900; box-shadow: 0 4px 0 #0006; }
.dado.p { width: 26px; height: 26px; font-size: .9rem; border-radius: 6px; box-shadow: none; }
.dado.cuenta { outline: 3px solid var(--oro); }
.dado.as { color: var(--rojo); }
.controles { display: grid; gap: 10px; background: #0004; border-radius: 12px; padding: 12px; }
.fila { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.num { font-size: 1.6rem; font-weight: 900; min-width: 40px; text-align: center; }
.caras button { width: 44px; height: 44px; font-size: 1.3rem; font-weight: 900; border-radius: 10px; border: 2px solid transparent; background: #fffaf0; color: #222; cursor: pointer; }
.caras button.sel { border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro); }
.caras button:disabled { opacity: .3; }
.boton { border: 0; background: var(--oro); color: #2a1d00; font: inherit; font-weight: 800; padding: 12px 18px; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 0 #0006; }
.boton.dudo { background: var(--rojo); color: #fff; }
.boton.peq { padding: 6px 14px; }
.boton:disabled { opacity: .4; cursor: default; }
.log { font-size: .9rem; color: var(--muted); max-height: 140px; overflow-y: auto; background: #0003; border-radius: 10px; padding: 8px 12px; }
.log p { margin: 2px 0; }
.centro { text-align: center; display: grid; gap: 12px; justify-items: center; }
.texto { max-width: 560px; margin: 0 auto; padding: 0 16px; color: var(--muted); font-size: .92rem; }
.texto h2 { font-size: 1rem; color: var(--text); }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 16px; }