[hidden] { display: none !important; }
:root { --bg: #0f3d22; --mesa: #1d6b3c; --text: #f5efe1; --muted: #c4d8c8; --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: 600px; margin: 0 auto; padding: 12px 16px; display: grid; gap: 12px; }
.marcador { display: flex; justify-content: space-between; gap: 8px; background: #0004; border-radius: 12px; padding: 8px 12px; font-size: .9rem; }
.marcador b { color: var(--oro); }
.fila { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; align-items: center; }
.mano { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.carta { width: 58px; height: 86px; border-radius: 8px; background: #fffaf0; color: #222; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 3px 0 #0006; border: 2px solid transparent; font: inherit; padding: 0; position: relative; }
.carta .num { font-weight: 900; font-size: 1.25rem; line-height: 1; }
.carta .palo { font-size: 1.5rem; line-height: 1.2; }
.carta .fig { font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; color: #555; }
.carta.oros { border-color: #d4a017; } .carta.copas { border-color: #c0392b; } .carta.espadas { border-color: #2f5fa7; } .carta.bastos { border-color: #2f8a4c; }
.carta.dorso { background: repeating-linear-gradient(45deg, #8b1e1e 0 6px, #a83232 6px 12px); border-color: #fffaf0; }
.carta.peq { width: 34px; height: 50px; } .carta.peq .palo { font-size: .9rem; } .carta.peq .num { font-size: .85rem; } .carta.peq .fig { display: none; }
button.carta { cursor: pointer; transition: transform .12s; }
button.carta:not(:disabled):hover { transform: translateY(-6px); }
button.carta:disabled { opacity: .4; cursor: default; }
button.carta.triunfo::after { content: '★'; position: absolute; top: 2px; right: 4px; font-size: .7rem; color: #b8860b; }
.tapete { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: #0003; border-radius: 14px; padding: 12px; min-height: 130px; }
.mesa { display: flex; gap: 10px; justify-content: center; align-items: center; min-height: 90px; }
.mazo { display: grid; justify-items: center; gap: 4px; font-size: .8rem; color: var(--muted); }
.mazo .pila { position: relative; width: 70px; height: 86px; }
.mazo .pila .carta { position: absolute; }
.mazo .pila .tr { left: 18px; transform: rotate(90deg); top: 0; }
.aviso { text-align: center; min-height: 1.5em; color: var(--oro); font-weight: 600; }
.acciones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.boton { border: 0; background: var(--oro); color: #2a1d00; font: inherit; font-weight: 800; padding: 10px 16px; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 0 #0006; }
.boton.sec { background: #fffaf0; }
.log { font-size: .88rem; color: var(--muted); max-height: 110px; 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; background: #0004; border-radius: 14px; padding: 16px; }
.centro table { border-collapse: collapse; font-size: .95rem; }
.centro td, .centro th { padding: 4px 12px; border-bottom: 1px solid #fff2; text-align: right; }
.centro td:first-child, .centro th:first-child { text-align: left; }
.texto { max-width: 600px; 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; }
@media (max-width: 420px) { .carta { width: 50px; height: 76px; } .carta .palo { font-size: 1.25rem; } }