/* Azar · estilos propios */
.top-mid { margin: 0 auto; display: flex; align-items: center; gap: 4px; }
.top-mid kbd { margin: 0 1px; }
.topbar .top-actions { margin-left: 0; }
.btn.xl { height: 42px; font-size: 14.5px; border-radius: 10px; }
.row.center, .center { justify-content: center; align-items: center; }
.card-b.center { align-items: center; }
#list { font-family: var(--sans); font-size: 13px; min-height: 180px; }
.row .field input[type="number"] { width: 90px; }
.winner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 64px; align-items: center; padding: 12px; border-radius: 12px; background: var(--sunken); }
.win { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.win.ghost { color: var(--text-3); }
.winner.done .win { padding: 4px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent); animation: pop .3s var(--ease); }
.hist { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 12.5px; max-height: 180px; overflow: auto; }
.hist small { color: var(--text-3); }

.dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 64px; padding: 6px 0; }
.die { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border-2); box-shadow: 0 2px 0 var(--border-2); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.die.d6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 9px; gap: 2px; }
.die.d6 i { width: 9px; height: 9px; margin: auto; border-radius: 50%; }
.die.d6 i.on { background: var(--text); }

.coin { position: relative; width: 120px; height: 120px; padding: 0; border: 0; background: none; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; font-weight: 600; font-size: 18px; color: #6b4b00; background: radial-gradient(circle at 35% 30%, #fde68a, #eab308 60%, #a16207); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25), 0 4px 12px rgba(0, 0, 0, .2); }
.face.back { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #e5e7eb, #9ca3af 60%, #4b5563); color: #1f2937; }

.num-f { flex: 0 0 90px !important; }
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.team { padding: 10px 12px; border-radius: 10px; background: var(--sunken); display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.team ul { grid-column: 1 / -1; margin: 0; padding-left: 16px; font-size: 12.5px; }
.nums { display: flex; flex-wrap: wrap; gap: 6px; cursor: copy; }
.nums span { min-width: 44px; padding: 6px 10px; border-radius: 8px; background: var(--sunken); text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .top-mid { display: none; } .topbar .top-actions { margin-left: auto; } }

/* Pantallas táctiles */
:root[data-input="touch"] #list { font-size: 16px; }