WhyKorp's server
153 lines
4.2 KiB
CSS
153 lines
4.2 KiB
CSS
/* --- gameMobile.css Refondu --- */
|
|
|
|
@media screen and (max-width: 900px) {
|
|
|
|
/* 1. Structure Globale : On bloque le défilement et on utilise tout l'écran */
|
|
body {
|
|
height: 100dvh; /* Utilise la hauteur réelle dynamique sur mobile */
|
|
overflow: hidden;
|
|
position: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.game-container {
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 2. La Table : Plus ronde (Arène) */
|
|
.table-container {
|
|
flex: 1;
|
|
padding: 40px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 0;
|
|
}
|
|
|
|
.poker-table {
|
|
width: 100%;
|
|
max-width: 340px;
|
|
height: 240px; /* Un peu plus haute pour l'aspect rond */
|
|
border-width: 10px;
|
|
border-radius: 140px; /* Plus grand rayon pour arrondir les coins */
|
|
box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 10px 20px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* 3. Le Pot : Ajustement taille */
|
|
.total-pot {
|
|
font-size: 1.8rem;
|
|
}
|
|
.total-pot::before { font-size: 0.7rem; }
|
|
.current-bet-display { font-size: 0.8rem; }
|
|
|
|
/* 4. Les Joueurs : Positionnement Arène Symétrique */
|
|
.player-slot {
|
|
width: 78px;
|
|
}
|
|
|
|
.player-info {
|
|
padding: 4px;
|
|
border-radius: 12px;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.player-name { font-size: 0.65rem; margin-bottom: 2px; }
|
|
.player-money { font-size: 0.8rem; }
|
|
.player-bet { font-size: 0.6rem; padding: 1px 5px; }
|
|
|
|
.dealer-badge {
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 0.7rem;
|
|
top: -8px;
|
|
right: -8px;
|
|
}
|
|
|
|
/* --- POSITIONNEMENT DES SLOTS --- */
|
|
|
|
/* Haut et Bas Milieu */
|
|
.slot-0 { top: -50px; left: 50%; transform: translateX(-50%); }
|
|
.slot-4 { bottom: -50px; left: 50%; transform: translateX(-50%); }
|
|
|
|
/* Les 4 coins (Diagonales à distance égale) */
|
|
/* En haut à droite */
|
|
.slot-1 { top: 5%; right: -15px; }
|
|
/* En bas à droite */
|
|
.slot-3 { bottom: 5%; right: -15px; }
|
|
/* En bas à gauche */
|
|
.slot-5 { bottom: 5%; left: -15px; }
|
|
/* En haut à gauche */
|
|
.slot-7 { top: 5%; left: -15px; }
|
|
|
|
/* Milieux latéraux */
|
|
.slot-2 { top: 50%; right: -10px; transform: translateY(-50%); }
|
|
.slot-6 { top: 50%; left: -10px; transform: translateY(-50%); }
|
|
|
|
/* 5. Panneau d'Action : Le "Deck" du bas */
|
|
.action-panel {
|
|
width: 100% !important;
|
|
height: auto;
|
|
padding: 15px 10px 25px 10px;
|
|
border-left: none;
|
|
border-top: 2px solid var(--gold);
|
|
background: #151515;
|
|
}
|
|
|
|
.turn-info {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"fold call"
|
|
"raise raise"
|
|
"allin allin"
|
|
"quit quit";
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 12px 5px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.btn-fold { grid-area: fold; }
|
|
.btn-call { grid-area: call; }
|
|
.raise-group {
|
|
grid-area: raise;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.btn-allin { grid-area: allin; }
|
|
.btn-back {
|
|
grid-area: quit;
|
|
margin: 0;
|
|
background: rgba(255,0,0,0.1);
|
|
color: #ff4d4d;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#raise-amount { flex: 1; height: 40px; }
|
|
.btn-validate { width: 80px; }
|
|
}
|
|
|
|
/* 6. Optimisation Paysage (Landscape) */
|
|
@media screen and (max-height: 500px) and (orientation: landscape) {
|
|
.poker-table { height: 160px; max-width: 480px; border-radius: 100px; }
|
|
.player-slot { width: 70px; }
|
|
|
|
/* Ajustement slots en paysage pour ne pas sortir de l'écran */
|
|
.slot-1, .slot-7 { top: -10%; }
|
|
.slot-3, .slot-5 { bottom: -10%; }
|
|
|
|
.action-panel { padding: 5px; }
|
|
.action-buttons { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: none; }
|
|
.btn-allin, .raise-group, .btn-back { grid-column: auto; }
|
|
}
|