/* ========== VARIABLES GLOBALES (MÓVIL POR DEFECTO) ========== */ :root { --size-casilla: 48px; /* tamaño casilla en móvil */ --size-ficha: 30px; /* tamaño ficha en móvil */ --tablero-max-width: 95vmin; /* ancho máx. del tablero en móvil */ } /* ========== LAYOUT GENERAL DEL JUEGO DE TABLERO ========== */ .tablero-main { max-width: 900px; margin: 0 auto 40px; padding: 0 15px 30px; } /* Reaprovechamos tu idea de #tablero_principal pero SIN tocar el */ #tablero_principal { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* arriba, así entra todo bien */ min-height: 70vh; margin: 0 auto; } /* Paneles superiores */ .panel-config, .panel-nombres, .panel-controles, .panel-tablero { margin-top: 15px; text-align: center; } /* Inputs y botones básicos */ #configuracion input[type="number"] { width: 80px; padding: 5px; margin-left: 5px; } #iniciarJuego, #tirarDado, #mostrarReglas, .btn-confirmar-jugadores { margin: 5px; padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; background-color: #ff6600; color: white; transition: background-color 0.3s; } #iniciarJuego:hover, #tirarDado:hover, #mostrarReglas:hover, .btn-confirmar-jugadores:hover { background-color: #cc5500; } #tirarDado:disabled { opacity: 0.5; cursor: not-allowed; } /* ========== NOMBRES DE JUGADORES ========== */ /* Base: móvil en columna */ .panel-nombres { display: flex; flex-direction: column; align-items: center; gap: 10px; } #nombresJugadores input { width: 220px; max-width: 90%; } #nombresJugadores .btn-confirmar-jugadores { width: 220px; } .back-link { display: block; /* Con esto ya lo centra */ width: fit-content; margin-left: auto; margin-right: auto; color: #f5f5f5; } .back-link:hover { background: #666; transform: translateY(-2px); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); } /* En pantallas medianas/grandes → 2 inputs por fila */ @media (min-width: 768px) { #nombresJugadores { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); /* 2 columnas */ gap: 10px 20px; justify-content: center; } #nombresJugadores input { width: 100%; max-width: none; } /* Botón ocupa toda la fila y queda centrado debajo */ #nombresJugadores .btn-confirmar-jugadores { grid-column: 1 / -1; justify-self: center; width: 220px; } } /* ========== TABLERO ========== */ #tablero, .tablero { display: grid; grid-template-columns: repeat(7, var(--size-casilla)); grid-auto-rows: var(--size-casilla); gap: 5px; margin: 20px auto; width: 100%; max-width: var(--tablero-max-width); justify-content: center; } /* Casilla básica */ .casilla { width: var(--size-casilla); height: var(--size-casilla); display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #ccc; font-size: 16px; /* número de casilla */ font-weight: bold; position: relative; color: black; } /* Casillas especiales con color + icono */ /* PREMIO (rayo) */ .casilla.especial { background-color: #ffeb7a; background-image: url("/static/img/tablero/rayo.png"); background-size: 80% 80%; background-repeat: no-repeat; background-position: center; } /* PENALIZACIÓN (cárcel) */ .casilla.penalizacion { background-color: #ff9e9e; background-image: url("/static/img/tablero/carcel1.avif"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .casilla.especial .numero, .casilla.penalizacion .numero, .casilla.carcel .numero, .casilla.rayo .numero, .casilla.trampolin .numero, .casilla.trampolin-back .numero, .casilla.retroceso .numero, .casilla.retroceso-fuerte .numero, .casilla.muerte .numero, .casilla.meta .numero { display: none; } /* ICONOS: carcel / estrella usando pseudo-elementos */ .casilla.especial::after, .casilla.penalizacion::after { position: absolute; bottom: 2px; right: 3px; font-size: 14px; opacity: 0.8; pointer-events: none; } /* === ICONO TRAMPOLÍN (casilla 18) === */ .casilla.trampolin { background-color: #c3ffe6; background-image: url("/static/img/tablero/trampolin.jpg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* === ICONO TRAMPOLÍN INVERSO (casilla 36) === */ .casilla.trampolin-back { background-color: #ccddff; background-image: url("/static/img/tablero/trampolin_back.png"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* === RETROCESO NORMAL (casilla 40) === */ .casilla.retroceso { background-color: #ffe4e1; background-image: url("/static/img/tablero/retroceso.jpg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* === RETROCESO FUERTE (casilla 50) === */ .casilla.retroceso-fuerte { background-color: #ffcccc; background-image: url("/static/img/tablero/retroceso_fuerte.jpg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* === MUERTE (casilla 34) → vuelve al inicio === */ .casilla.muerte { background-color: #000000dd; color: white; background-image: url("/static/img/tablero/muerte.png"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* 🏁 Casilla META (55) */ .casilla.meta { background-color: #d4edda; background-image: url("/static/img/tablero/meta.png"); /* o bandera.png */ background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } /* ===== CASILLA DE SALIDA ===== */ .casilla-salida { margin: 0 auto 16px; min-width: 260px; /* más ancha para 6 fichas */ padding: 18px 14px 12px; /* hueco arriba para la etiqueta SALIDA */ border-radius: 12px; border: 2px solid #ffaa00; background: linear-gradient(135deg, #fff3cd, #ffe9a3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: bold; position: relative; max-height: 50px; } /* Texto SALIDA: fuera, encima de la caja */ .casilla-salida .salida-label { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 0.9rem; color: #b36b00; text-transform: uppercase; background-color: #ffffff; padding: 2px 12px; border-radius: 999px; } /* Fichas en una fila, de izda a dcha */ .salida-fichas { display: flex; flex-wrap: nowrap; /* todas en una sola fila */ justify-content: center; gap: 6px; width: 100%; overflow: hidden; } /* ========== OVERLAY DE GANADOR ========== */ .winner-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: none; /* se muestra al ganar */ align-items: center; justify-content: center; z-index: 999; } .winner-overlay.visible { display: flex; } .winner-card { background: #ffffff; padding: 20px 30px; border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); text-align: center; max-width: 320px; } .winner-card h2 { margin-bottom: 10px; } #winnerName { font-size: 1.2rem; font-weight: 700; margin-bottom: 15px; } #winnerOverlay button, .winner-card button { margin-top: 5px; padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; background-color: #28a745; color: white; } .winner-card button:hover { background-color: #218838; } .winner-card, .winner-card h2, .winner-card p, #winnerName { color: #000; /* texto negro dentro de la tarjeta */ } /* ========== FICHAS ========== */ .ficha { width: var(--size-ficha); height: var(--size-ficha); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: bold; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Fila 1 un poco por encima del centro */ .casilla:not(.casilla-salida) .ficha:nth-child(1) { top: 45%; left: 30%; } .casilla:not(.casilla-salida) .ficha:nth-child(2) { top: 45%; left: 50%; } .casilla:not(.casilla-salida) .ficha:nth-child(3) { top: 45%; left: 70%; } /* Fila 2 un poco por debajo del centro */ .casilla:not(.casilla-salida) .ficha:nth-child(4) { top: 60%; left: 30%; } .casilla:not(.casilla-salida) .ficha:nth-child(5) { top: 60%; left: 50%; } .casilla:not(.casilla-salida) .ficha:nth-child(6) { top: 60%; left: 70%; } /* Fichas dentro de la salida → más pequeñas y sin posición absoluta */ .casilla-salida .ficha { position: static; transform: none; width: calc(var(--size-ficha) - 6px); height: calc(var(--size-ficha) - 6px); } /* ========== ESTADO DEL JUEGO ========== */ #estadoJuego { margin-top: 20px; font-size: 1.2rem; color: black; background-color: white; padding: 5px 10px; display: inline-block; border-radius: 5px; min-height: 24px; } /* ========== REGLAS ========== */ .reglas { color: white; background-color: rgba(0, 0, 0, 0.8); padding: 15px; border-radius: 10px; width: 60%; margin: 20px auto; text-align: center; display: none; /* el JS la muestra/oculta */ } .reglas h1 { font-size: 1.3rem; margin-bottom: 10px; } /* Botón de reglas */ #mostrarReglas { background-color: #ffcc00; color: black; } #mostrarReglas:hover { background-color: #ffaa00; } /* ========== RESPONSIVE PEQUEÑO (MÓVIL MUY ESTRECHO) ========== */ @media (max-width: 600px) { #tablero, .tablero { transform: scale(0.9); transform-origin: center; } .reglas { width: 90%; } #estadoJuego { font-size: 1rem; } } /* ========================================================= CONTROLES EN COLUMNA ========================================================= */ .panel-config { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .panel-config .config-block { display: flex; flex-direction: column; align-items: center; gap: 8px; } .panel-config label, .panel-config input, .panel-config button { width: 220px; max-width: 90%; } /* Controles del juego en columna */ .panel-controles { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; } .panel-controles button { width: 150px; max-width: 90%; } /* Texto de turno */ #turnoJugador { font-weight: bold; color: #ffffff; } /* Ajustamos un poco el margen del mensaje para que no se separe tanto del turno */ #estadoJuego { margin-top: 5px; } /* ========== dado visual ========== */ .zona-dado { display: flex; align-items: center; gap: 10px; } .dado-visual { width: 40px; height: 40px; border-radius: 8px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; background-color: #f5f5f5; color: #000; /* importante para que se vea el número */ } /* ========== PC / PORTÁTIL (TABLERO MÁS GRANDE) ========== */ @media (min-width: 992px) { :root { --size-casilla: 72px; /* casillas más grandes en PC */ --size-ficha: 40px; /* fichas más grandes en PC */ --tablero-max-width: 720px; /* ancho máx. del tablero en PC */ } .reglas { width: 60%; } } /* ========================================================= 🌐 TABLERO ONLINE — estilos añadidos (panel crear / unirse a partida) ========================================================= */ #onlinePanel { margin-top: 20px; } #onlinePanel .config-block { margin-bottom: 12px; } #onlinePanel input[type="text"] { padding: 8px 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 0.95rem; min-width: 180px; } #onlinePanel button { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; } /* Código de partida y player id */ #onlinePanel span { font-family: monospace; background: rgba(0, 0, 0, 0.08); padding: 2px 6px; border-radius: 4px; } /* Botón online destacado */ .btn-primary { background-color: #ff6600; color: #fff; } .btn-primary:hover { background-color: #e65c00; } /* Responsive pequeño */ @media (max-width: 480px) { #onlinePanel .config-block { flex-direction: column; align-items: stretch; } #onlinePanel input[type="text"] { width: 100%; } #onlinePanel button { width: 100%; } }