: se selecciona por id (no por .names) para que el hueco entre campos se aplique de verdad */ #names { display: grid; gap: 6px; margin-bottom: 16px; } /* Estilo ÚNICO del campo de nombre, compartido por el multijugador local (.name-row) y por la fila editable de la sala de espera (.lobby-seat.self). Ambas pantallas usan .name-field, así que no pueden divergir. */ .name-row, .lobby-seat.self { display: flex; align-items: center; gap: 8px; } .name-row .dot, .lobby-seat .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; } .name-row input, .seat-input { flex: 1; min-width: 0; height: 32px; padding: 7px 10px; border: 1px solid #d9dbe0; border-radius: 8px; font-size: .9rem; background: #fff; } .name-row input:focus, .seat-input:focus { outline: none; border-color: var(--azul); } /* Los botones ocupan solo lo que mide su texto y quedan centrados en su fila (partida local, "Crear sala" y los de copiar en la sala de espera). */ .actions { display: flex; justify-content: center; } body.home button { padding: 10px 22px; border: 0; border-radius: 10px; background: var(--azul); color: #fff; font-size: .95rem; cursor: pointer; } body.home button:disabled { background: #9aa7b8; cursor: not-allowed; } /* ---- multijugador: crear sala / unirse a sala ---- */ .mp-sep { border: 0; border-top: 1px solid #e4e6ea; margin: 22px 0 14px; } /* Una sola fila: "Crear sala" + código + "Unirse a sala", centrada y sin partirse. */ .mp-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } #room-code-input { width: 110px; padding: 9px 8px; border: 1px solid #d9dbe0; border-radius: 10px; font-size: 1rem; font-weight: 700; letter-spacing: .2em; text-align: center; text-transform: uppercase; } #room-code-input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(46,111,214,.16); } .mp-msg { margin: 14px 0 0; padding: 9px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; } .mp-msg:empty { display: none; } .mp-msg.error { background: #fdecec; border: 1px solid #f3c9c9; color: #a35050; } .mp-msg.ok { background: #edf7ef; border: 1px solid #cfe5d3; color: #2f6b47; } /* ---- sala de espera ---- */ .lobby-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .lobby-top h2 { margin: 0; } /* mismo h2 que la pantalla inicial, solo sin margen inferior */ .count { font-weight: 700; color: #6b7684; } .role-chip { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: #fdf3d7; color: #7a5b16; } .role-chip.guest { background: #eef1f6; color: #4a5462; } .code-box { background: #f7f9fc; border: 1px solid #e1e6ee; border-radius: 12px; padding: 14px; margin-bottom: 16px; } .code-label { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b7684; margin-bottom: 8px; } .room-code { display: block; font-size: 1.85rem; font-weight: 700; letter-spacing: .26em; color: #1b2733; font-family: Consolas, "SF Mono", ui-monospace, monospace; user-select: all; text-align: center; } .code-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .lobby-players { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .lobby-seat { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e1e6ee; border-radius: 10px; background: #fff; } /* misma tipografía que los campos de nombre de la pantalla inicial: sin negrita */ .lobby-seat .lobby-name { font-size: .9rem; overflow-wrap: anywhere; } .lobby-seat .badges { margin-left: auto; display: flex; gap: 6px; flex: none; } /* La fila propia se ve como una .name-row del multijugador local: sin tarjeta, sin borde ni fondo propios. El campo y el punto ya vienen de las reglas compartidas de arriba, así que no puede quedar desincronizado. */ .lobby-seat.self { padding: 0; border: 0; border-radius: 0; background: none; } .lobby-seat.empty { background: #fbfcfd; border-style: dashed; } .lobby-seat.empty .lobby-name { color: #98a1ae; font-weight: 500; } .badge { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #4a5462; } .badge.host { background: #fdf3d7; color: #7a5b16; } .badge.you { background: #eef4ff; color: #1d4ea8; } .badge.away { background: #fdecec; color: #a35050; text-transform: none; letter-spacing: 0; } body.home button.start-btn { padding: 13px 22px; font-size: 1rem; font-weight: 700; } .start-hint { text-align: center; margin: 8px 0 0; } .wait-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; padding: 13px 12px; border: 1px solid #e1e6ee; border-radius: 10px; background: #f7f9fc; color: #4a5666; font-size: .88rem; text-align: center; } .spinner { flex: none; width: 14px; height: 14px; border: 2px solid #c6cfdb; border-top-color: var(--azul); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .lobby-foot { display: flex; justify-content: center; margin-top: 12px; } body.home button.link-btn { padding: 6px 4px; background: none; border: 0; color: #7b8595; font-size: .8rem; text-decoration: underline; } body.home button.link-btn:hover { color: var(--azul); } /* ================= scorepad.html ================= */ body.scorepad{ --ink:#20262e; margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;padding:28px 16px} body.scorepad h1{font-size:22px;margin:0 0 6px;font-weight:700} .subtitle{color:#9aa4b2;font-size:13px;margin-bottom:18px;text-align:center;max-width:640px} .zone{background:var(--card);border-radius:14px;padding:16px 18px;box-shadow:0 8px 24px rgba(0,0,0,.35)} .zone h2{font-size:13px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .dice-row{display:flex;gap:12px;flex-wrap:wrap} .die{display:flex;flex-direction:column;align-items:center} .pipgrid{width:52px;height:52px;border-radius:10px;background:var(--c);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:7px;box-shadow:inset 0 -4px 8px rgba(0,0,0,.25)} .pip{width:9px;height:9px;border-radius:50%;background:transparent} .pip.on{background:#1d2126} .btns{display:flex;gap:10px;margin-top:14px} .roll-btn{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer} .roll-btn:hover{background:#3a7ae0} .roll-btn:disabled{color:#8a94a2;background:#c3ccd6;cursor:default} .empty{color:#9aa4b2;font-size:12px;padding:6px 0} .card{background:var(--card);border-radius:16px;padding:20px 22px;width:min(920px,100%);box-shadow:0 8px 24px rgba(0,0,0,.35)} .card.hidden{display:none} .padname{margin:0 0 14px;font-size:13px;color:var(--muted);text-align:center;font-weight:600} .zlabel{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px} .plus1-btn{background:#c9a227;color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer} .plus1-btn:hover:not(:disabled){background:#dab534} .plus1-btn:disabled{color:#a5adba;background:#e6eaef;cursor:default} /* ---- zonas de casillas ---- */ .panels{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:18px} .panel{border-radius:10px;padding:12px 14px} .panel.yellow{background:#fdf6e3;border:1px solid #f0dfae} .panel.blue{background:#e8effc;border:1px solid #cdd9f2} .zwrap{position:relative} .zgrid{display:grid;grid-template-columns:repeat(4,46px) 34px;gap:12px} .zgrid .endicon{align-self:center} .lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1} .gcell{position:relative;width:46px;height:46px;border:1px solid var(--line);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;cursor:pointer;user-select:none} .endicon{display:inline-flex;align-items:center} .stars-row{display:flex;gap:12px;margin-top:8px} .starbox{width:46px;text-align:center;font-size:13px;color:#a07b12;font-weight:700} .plus1{font-size:12px;color:var(--muted)} /* Escala de la zona azul: dos filas (★ puntos / ✕ casillas marcadas) donde la intensidad del azul crece con el valor, para leerla de un vistazo. */ /* Escala de la zona azul. Sin bordes: se apoya en el color y el espacio para leerse. Iconos y números al mismo tamaño que los de la escala verde (.bchip 22×22 / 12px), así ambas escalas comparten tipografía. */ .scale-table{border-collapse:collapse;margin:0 0 9px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} .scale-table th,.scale-table td{padding:0 5px;text-align:center;white-space:nowrap;border:0} .scale-table th[scope=row]{padding:0 2px 0 0;font-weight:400} .scale-pts td{color:#1d4ea8} .scale-x td{color:#7b93bd} /* iconos al mismo tamaño que las estrellas de la escala verde (.starv, 13px) */ .scale-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:13px;font-weight:700;line-height:1;color:#2f6fd8} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .paircell{width:46px;height:46px;border:1px solid var(--line);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;gap:4px} .mini{width:15px;height:15px;border-radius:4px;display:inline-block} .mini.b{background:var(--blue)} .mini.w{background:#fff;border:1px solid var(--line)} .colicons{display:flex;gap:12px;margin-top:16px} .cicon{width:46px;display:flex;justify-content:center} /* ---- barras secuenciales ---- */ .bar{border-radius:10px;padding:12px 14px;margin-bottom:16px} .bar.green{background:#edf7ef;border:1px solid #cfe5d3} .bar.orange{background:#fef4e9;border:1px solid #f3ddc3} .bar.purple{background:#f5ecf8;border:1px solid #ddc6ea} .arrow{position:absolute;left:0;top:0;width:44px;height:22px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px} .stars{display:flex;gap:5px} .starv{width:44px;text-align:center;font-size:13px;font-weight:700} .cells{display:flex;gap:5px;align-items:center;flex-wrap:wrap} .cell{position:relative;width:44px;height:38px;border:1px solid var(--line);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;cursor:pointer;user-select:none} /* Zona morada: los "<" son decorativos, así que se estrechan y se pegan a las cajas para que la fila quede compacta. Se aplican el MISMO gap y el MISMO ancho a .cells y a .icons, así cada icono sigue bajo su casilla. */ /* Zona morada: 10px de separación real entre cajas, manteniendo el "<" a 16px. Con el separador completo (16px) y solo 10px de hueco, los márgenes negativos del propio "<" son los que absorben el sobrante. Mismo gap y márgenes en .cells y .icons → los iconos siguen bajo sus casillas. */ .bar.purple .cells,.bar.purple .icons{gap:0} .sep{width:16px;margin:0 -3px;color:var(--purple);font-size:18px;font-weight:700;text-align:center;-webkit-text-stroke:.8px currentColor;paint-order:stroke fill} .icons{position:relative;display:flex;gap:5px;margin-top:5px} .icon{width:44px;display:flex;justify-content:center} .bchip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;font-size:12px;font-weight:700;color:#fff;background:var(--bc,#eef1f6)} .bchip.neutral{background:#eef1f6;color:#39414d} /* ---- marcado (tachado) ---- */ .markable:hover{background:#f2f5fa} .markable.marked::after,.premarked::after{ content:"";position:absolute;inset:3px;pointer-events:none; background: linear-gradient(to top right, transparent 46%, var(--ink) 46% 54%, transparent 54%), linear-gradient(to top left, transparent 46%, var(--ink) 46% 54%, transparent 54%); } .premarked{cursor:default} .aura{box-shadow:inset 0 0 4px var(--halo);animation:halo-breathe 1.6s ease-in-out infinite} @keyframes halo-breathe{ 0%{box-shadow:inset 0 0 3px rgba(255,215,92,.75)} 25%{box-shadow:inset 0 0 4px rgba(255,215,92,.85)} 50%{box-shadow:inset 0 0 6px #ffd75c} 75%{box-shadow:inset 0 0 4px rgba(255,215,92,.85)} 100%{box-shadow:inset 0 0 3px rgba(255,215,92,.75)} } /* ---- resaltado de casillas para bono de color pendiente (azul cian, distinto del aura dorada del dado) ---- */ .bonus-hl{box-shadow:inset 0 0 4px #6db3f2;animation:bonus-breathe 1.6s ease-in-out infinite} @keyframes bonus-breathe{ 0%{box-shadow:inset 0 0 3px rgba(109,179,242,.75)} 25%{box-shadow:inset 0 0 4px rgba(109,179,242,.85)} 50%{box-shadow:inset 0 0 6px #6db3f2} 75%{box-shadow:inset 0 0 4px rgba(109,179,242,.85)} 100%{box-shadow:inset 0 0 3px rgba(109,179,242,.75)} } /* ---- entrada de números (zonas naranja y morada) ---- */ .numcell:hover{background:#f2f5fa} .picker{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px;display:flex;gap:3px;z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.3)} .picker button{width:22px;height:22px;border:none;border-radius:4px;background:#eef1f6;color:var(--ink);font-weight:700;font-size:11px;cursor:pointer} .picker button:hover{background:#dfe6f2} .picker .clear{background:#f8e9e9;color:#a35050} .warn{margin:0 0 14px;padding:9px 12px;border-radius:8px;background:#fdecec;border:1px solid #f3c9c9;color:#a35050;font-size:13px;font-weight:600} .warn:empty{display:none} .warn:not(:empty)::before{content:"⚠ ";margin-right:6px} .turno{margin:0 0 18px;font-size:14px;color:#cdd6e2} .turno strong{color:#fff} /* ---- avisos de turno y de conexión (solo multijugador en línea) ---- */ .turn-notice{display:none;margin:0 0 16px;padding:10px 14px;border-radius:8px;background:#1d2530;border:1px solid #33404f;color:#cdd6e2;font-size:13.5px;font-weight:600;text-align:center} .turn-notice.show{display:block} .turn-notice.mine{background:#12321f;border-color:#2f6b47;color:#8fe0ac} .conn-notice{display:none;margin:0 0 14px;padding:9px 12px;border-radius:8px;background:#3a2a12;border:1px solid #6b4f22;color:#f0c674;font-size:13px;font-weight:600;text-align:center} .conn-notice.show{display:block} .conn-notice.error{background:#3a1c1c;border-color:#6b2f2f;color:#f0a0a0} .ronda{margin:0 0 6px;font-size:14px;color:#cdd6e2} .ronda strong{color:#fff} .end-turn-btn{background:var(--green);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer} .end-turn-btn:hover:not(:disabled){background:#4bbf6d} .end-turn-btn:disabled{color:#a5adba;background:#e6eaef;cursor:default} .confirm-btn{background:#e0a13a;color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer} .confirm-btn:hover:not(:disabled){background:#eda43f} .die.picked .pipgrid,.die.pending .pipgrid{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), 0 0 7px rgba(255,215,92,.9), 0 0 15px rgba(255,215,92,.56), 0 0 28px rgba(255,215,92,.34);animation:halo-breathe-die 1.6s ease-in-out infinite} .die.disabled{opacity:.45;cursor:default} @keyframes halo-breathe-die{ 0%{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), 0 0 6px rgba(255,215,92,.8), 0 0 14px rgba(255,215,92,.5), 0 0 26px rgba(255,215,92,.3)} 25%{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), 0 0 7px rgba(255,215,92,.9), 0 0 15px rgba(255,215,92,.56), 0 0 28px rgba(255,215,92,.34)} 50%{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), 0 0 8px rgba(255,215,92,.97), 0 0 16px rgba(255,215,92,.62), 0 0 30px rgba(255,215,92,.4)} 75%{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), 0 0 7px rgba(255,215,92,.9), 0 0 15px rgba(255,215,92,.56), 0 0 28px rgba(255,215,92,.34)} 100%{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), 0 0 6px rgba(255,215,92,.8), 0 0 14px rgba(255,215,92,.5), 0 0 26px rgba(255,215,92,.3)} } /* ---- botón ? y ventana emergente de normas ---- */ .help-btn{position:fixed;top:14px;right:16px;width:38px;height:38px;border-radius:50%;background:#eef1f6;color:var(--ink);border:1px solid var(--line);font-size:18px;font-weight:700;line-height:1;cursor:pointer;z-index:20} .help-btn:hover{background:#dfe6f2} .help-backdrop{display:none;position:fixed;inset:0;background:rgba(8,10,14,.72);z-index:30;align-items:center;justify-content:center;padding:20px} .help-backdrop.open{display:flex} .modal{background:var(--card);border-radius:16px;padding:22px 26px;width:min(760px,100%);max-height:85vh;overflow:auto;box-shadow:0 16px 40px rgba(0,0,0,.5)} .modal h2{margin:0 0 10px;font-size:18px} .modal-intro{font-size:13.5px;line-height:1.45;margin:0;color:#39414d} .modal h3{margin:16px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .modal ul{margin:0;padding-left:18px;display:grid;gap:7px} .modal li{font-size:13.5px;line-height:1.45} .modal-close{background:#eef1f6;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;margin-top:16px} .modal-close:hover{background:#dfe6f2} /* ---- bono negro de la ronda 4: banner y resaltado de casillas ---- */ .bbanner{margin:0 0 14px;padding:9px 12px;border-radius:8px;background:#17181c;color:#fff;font-size:13px;font-weight:600;display:none} .bbanner.show{display:block} .black-hl{animation:black-breathe 1.2s ease-in-out infinite;border-radius:6px} @keyframes black-breathe{ 0%{box-shadow:inset 0 0 3px rgba(10,10,12,.8)} 50%{box-shadow:inset 0 0 6px #000, 0 0 6px rgba(0,0,0,.45)} 100%{box-shadow:inset 0 0 3px rgba(10,10,12,.8)} } /* ---- puntuaciones en vivo junto al título de cada zona ---- */ .zscore{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;background:#eef1f6;color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.3px} /* ---- pantalla de resultados al terminar la partida ---- */ .results-backdrop{display:none;position:fixed;inset:0;background:rgba(8,10,14,.72);z-index:40;align-items:center;justify-content:center;padding:20px} .results-backdrop.open{display:flex} .results-card{background:var(--card);border-radius:16px;padding:22px 26px;width:min(880px,100%);max-height:90vh;overflow:auto;box-shadow:0 16px 40px rgba(0,0,0,.5)} .results-card h2{margin:0 0 10px;font-size:20px} .results-winner{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#fdf3d7;border:1px solid #f0d9a0;color:#7a5b16;font-size:14px;font-weight:700} .results-table{border-collapse:collapse;width:100%;font-size:13.5px} .results-table th,.results-table td{border:1px solid var(--line);padding:8px 12px;text-align:center} .results-table thead th{background:#f6f8fb;font-weight:700} .results-table tbody th{text-align:left;font-weight:600;background:#fafbfd} .results-table .fox-row th,.results-table .fox-row td{background:#fff7e8} .results-table .total-row th,.results-table .total-row td{font-weight:800;background:#eef5ff} .results-table td.winner-col{background:#f2fbf3}