*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--surface: #1a1a1a;--surface2: #252525;--border: #333;--text: #e8e8e8;--muted: #888;--green: #4caf50;--red: #e53935;--orange: #ff7043;--yellow: #ffd600;--blue: #42a5f5;--radius: 10px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif}#app{min-height:100vh;padding:16px;max-width:960px;margin:0 auto}button{cursor:pointer;border:none;border-radius:var(--radius);padding:10px 20px;font-size:1rem;font-weight:600;transition:opacity .15s,transform .1s}button:hover{opacity:.9}button:active{transform:scale(.97)}input[type=text]{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:10px 14px;font-size:1rem;width:100%;max-width:320px}input[type=text]:focus{outline:2px solid var(--blue)}.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:16px;text-align:center}.splash h1{font-size:2.8rem;letter-spacing:4px;color:var(--green);text-transform:uppercase}.splash .room-code{color:var(--muted)}.splash .room-code strong{color:var(--yellow);font-size:1.3rem;letter-spacing:2px}.splash .subtitle{color:var(--muted);font-size:.9rem}.splash #join-btn{background:var(--green);color:#000;min-width:200px;margin-top:8px}.lobby{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:40px;text-align:center}.lobby h1{font-size:2.2rem;letter-spacing:3px;color:var(--green)}.room-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.room-code-big{font-size:2rem;letter-spacing:4px;color:var(--yellow)}.btn-copy{background:var(--surface2);color:var(--text);border:1px solid var(--border);padding:6px 14px;font-size:.85rem}.lobby-hint{color:var(--muted);font-size:.9rem}.player-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:500px}.player-chip{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:8px 16px;font-size:.95rem}.player-chip.me{border-color:var(--green);color:var(--green)}.btn-primary{background:var(--green);color:#000;font-size:1.1rem;padding:12px 32px}.waiting{color:var(--muted);font-style:italic}.game{display:flex;flex-direction:column;gap:12px}.game-header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius);padding:10px 16px;border:1px solid var(--border)}.round-info{font-weight:700;font-size:1.1rem;color:var(--yellow)}.active-future{padding:4px 12px;border-radius:20px;font-size:.9rem;font-weight:600}.future-crecimiento{background:#3e1111;color:var(--red);border:1px solid var(--red)}.future-transformacion{background:#0d2e0d;color:var(--green);border:1px solid var(--green)}.future-blank{background:var(--surface2);color:var(--muted);border:1px solid var(--border)}.scores-mini{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}.score-chip{font-size:.8rem;color:var(--muted)}.score-chip.me{color:var(--blue);font-weight:700}.board{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 600px){.board{grid-template-columns:1fr}}.decks-area{display:flex;flex-direction:column;gap:12px}.future-card-display{border-radius:var(--radius);padding:16px;min-height:130px;display:flex;flex-direction:column;gap:6px;border:2px solid var(--border)}.future-card-display.future-crecimiento{background:#1a0808;border-color:var(--red)}.future-card-display.future-transformacion{background:#081a08;border-color:var(--green)}.future-card-display.future-blank{background:var(--surface)}.future-card-label{font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}.future-card-name{font-size:1.4rem;font-weight:800}.future-crecimiento .future-card-name{color:var(--red)}.future-transformacion .future-card-name{color:var(--green)}.future-desc{font-size:.8rem;color:var(--muted)}.deck-stack{display:flex;align-items:center;gap:12px}.deck-pile{background:var(--surface2);border:2px dashed var(--border);border-radius:var(--radius);width:70px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center}.deck-count{font-size:1.4rem;font-weight:700;color:var(--yellow)}.deck-label{font-size:.7rem;color:var(--muted)}.btn-flip{background:var(--orange);color:#000;font-size:.95rem;padding:10px 18px}.turn-info{display:flex;align-items:center;justify-content:center}.turn-msg{font-size:1rem;padding:14px;border-radius:var(--radius);border:1px solid var(--border);text-align:center}.turn-msg.you{background:#0d2030;border-color:var(--blue);color:var(--blue)}.turn-msg.other{background:var(--surface);color:var(--muted)}.players-area{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}.opponent-slot{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;min-width:120px;transition:border-color .2s,background .2s}.opponent-slot.targetable{border-color:var(--blue);cursor:pointer}.opponent-slot.targetable:hover{background:#0d2030}.opponent-slot.shake{animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.opponent-name{font-weight:600;font-size:.9rem}.opponent-cards{font-size:.8rem;color:var(--muted);margin-top:4px}.hand-area{background:var(--surface);border-radius:var(--radius);padding:14px;border:1px solid var(--border)}.hand-label{font-size:.85rem;color:var(--muted);margin-bottom:10px}.hand-cards{display:flex;flex-wrap:wrap;gap:10px}.card{border-radius:var(--radius);padding:10px 12px;min-width:100px;display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--border);background:var(--surface2);transition:border-color .15s,background .15s,transform .1s;-webkit-user-select:none;user-select:none}.card-waste{border-color:var(--red);background:#1a0808}.card-safe{border-color:var(--green)}.card-selectable{cursor:pointer}.card-selectable:hover{transform:translateY(-4px);border-color:var(--blue)}.card-selected{border-color:var(--yellow)!important;background:#1a1500!important;transform:translateY(-4px)}.card-emoji{font-size:1.8rem}.card-label{font-size:.75rem;text-align:center;color:var(--muted)}.waste-badge{font-size:.65rem;color:var(--red);font-weight:700}.log-area{background:var(--surface);border-radius:var(--radius);padding:10px 14px;border:1px solid var(--border);max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.log-line{font-size:.8rem;color:var(--muted)}.round-end,.ended{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 16px;text-align:center}.round-end h2{font-size:2rem;color:var(--yellow)}.ended h1{font-size:2.2rem;color:var(--yellow)}.winner-name{font-size:1.3rem;color:var(--green)}.future-result{color:var(--muted)}.scoreboard,.final-scoreboard{width:100%;max-width:560px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}.score-row{display:grid;grid-template-columns:32px 1fr auto auto;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border)}.score-row.me{background:#0d2030}.score-row.winner{background:#1a1500}.score-rank{font-weight:700;color:var(--yellow)}.score-name{font-weight:600}.score-rounds{font-size:.78rem;color:var(--muted)}.score-total{font-weight:700;color:var(--green)}