* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #05140b; 
    background-image: radial-gradient(#0c301b, #030a06);
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    padding: 15px;
}

#app-container {
    position: relative;
    background: rgba(10, 20, 14, 0.9);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    text-align: center;
    width: 98vw;
    max-width: 1050px;
    height: 96vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    border: 2px solid #ff6600;
}

#btn-home {
    position: absolute; top: 15px; left: 15px;
    background: #111; color: #ff6600; padding: 6px 12px; font-size: 0.85em;
    border-radius: 5px; text-decoration: none; border: 1px solid #ff6600;
    z-index: 100; font-weight: bold;
}
#btn-home:hover { background: #ff6600; color: #111; }

h1 { 
    color: #ffaa00; font-size: calc(1.2rem + 0.5vw); 
    text-transform: uppercase; letter-spacing: 2px;
}

#setup-screen h2 { font-size: 1.3rem; color: #ddd; margin-bottom: 20px; }
.player-buttons { display: flex; justify-content: center; gap: 15px; }
.player-buttons button {
    background: #ff6600; color: #fff; border: none; padding: 15px 25px;
    font-size: 1.3rem; border-radius: 8px; cursor: pointer; font-weight: bold;
}
.player-buttons button:hover { background: #ffaa00; transform: scale(1.05); }

/* --- MOTEUR DE GRILLE DIRECTIONNELLE SPATIALE 3X3 --- */
#game-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr auto; 
    flex: 1;
    width: 100%;
    align-items: center;
    justify-items: center;
    position: relative;
    padding: 5px 0;
}

#players-container { display: contents; }

.player-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #1c3325;
    width: 100%;
    max-width: 140px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.player-box.active {
    border-color: #ffaa00;
    background: rgba(255, 170, 0, 0.07);
    box-shadow: 0 0 10px rgba(255,170,0,0.2);
}
.player-name { font-weight: bold; color: #ffaa00; margin-bottom: 8px; font-size: 0.85rem; }

.player-hand { 
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px 8px; 
    justify-content: center;
    min-height: 134px; 
}

/* Positions de l'arène spatiale */
.players-2 .pos-0 { grid-column: 2; grid-row: 1; align-self: flex-start; }
.players-2 .pos-1 { grid-column: 2; grid-row: 3; align-self: flex-end; }

.players-3 .pos-0 { grid-column: 1; grid-row: 1; justify-self: flex-start; align-self: flex-start; }
.players-3 .pos-1 { grid-column: 3; grid-row: 1; justify-self: flex-end; align-self: flex-start; }
.players-3 .pos-2 { grid-column: 2; grid-row: 3; align-self: flex-end; }

.players-4 .pos-0 { grid-column: 1; grid-row: 1; justify-self: flex-start; align-self: flex-start; }
.players-4 .pos-1 { grid-column: 3; grid-row: 1; justify-self: flex-end; align-self: flex-start; }
.players-4 .pos-2 { grid-column: 3; grid-row: 3; justify-self: flex-end; align-self: flex-end; }
.players-4 .pos-3 { grid-column: 1; grid-row: 3; justify-self: flex-start; align-self: flex-end; }

.players-5 .pos-0 { grid-column: 1; grid-row: 1; justify-self: flex-start; align-self: flex-start; }
.players-5 .pos-1 { grid-column: 2; grid-row: 1; align-self: flex-start; }
.players-5 .pos-2 { grid-column: 3; grid-row: 1; justify-self: flex-end; align-self: flex-start; }
.players-5 .pos-3 { grid-column: 3; grid-row: 3; justify-self: flex-end; align-self: flex-end; }
.players-5 .pos-4 { grid-column: 1; grid-row: 3; justify-self: flex-start; align-self: flex-end; }

.players-6 .pos-0 { grid-column: 1; grid-row: 1; justify-self: flex-start; align-self: flex-start; }
.players-6 .pos-1 { grid-column: 2; grid-row: 1; align-self: flex-start; }
.players-6 .pos-2 { grid-column: 3; grid-row: 1; justify-self: flex-end; align-self: flex-start; }
.players-6 .pos-3 { grid-column: 3; grid-row: 3; justify-self: flex-end; align-self: flex-end; }
.players-6 .pos-4 { grid-column: 2; grid-row: 3; align-self: flex-end; }
.players-6 .pos-5 { grid-column: 1; grid-row: 3; justify-self: flex-start; align-self: flex-end; }

.flip-container, .flip-container-river { perspective: 1000px; }
.flip-container { width: 44px; height: 64px; position: relative; }
.flip-container-river { width: 90px; height: 130px; }

.flip-container.flying {
    animation: dealerTossFlight 0.48s cubic-bezier(0.075, 0.82, 0.165, 1) both;
}

@keyframes dealerTossFlight {
    0% { transform: translate(var(--delta-x), var(--delta-y)) scale(1.8) rotate(-25deg); opacity: 0.4; z-index: 1000; }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; z-index: 1; }
}

.flipper { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.flip-container.flipped .flipper, .flip-container-river.flipped .flipper { transform: rotateY(180deg); }

.front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; }
.back { background: #092414; border: 2px solid #ffaa00; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: inset 0 0 10px rgba(0,0,0,0.6); }
.jager-cross { font-size: 0.8em; color: #ff6600; line-height: 1; }
.flip-container-river .jager-cross { font-size: 1.2em; }
.jager-emblem { font-size: 1.1em; line-height: 1; }
.flip-container-river .jager-emblem { font-size: 1.9em; }

.front { background: #fffdf0; color: black; border: 2px solid #ffaa00; transform: rotateY(180deg); }
.front.red { color: #cc2424 !important; }
.front.black { color: #111111 !important; }

.card-corner { position: absolute; font-weight: bold; font-size: 0.72rem; line-height: 1.1; display: flex; flex-direction: column; align-items: center; }
.top-left { top: 3px; left: 3px; }
.bottom-right { bottom: 3px; right: 3px; transform: rotate(180deg); }

.flip-container-river .card-corner { font-size: 1.05rem; }
.flip-container-river .top-left { top: 6px; left: 6px; right: auto; }
.flip-container-river .bottom-right { bottom: 6px; right: 6px; left: auto; transform: rotate(180deg); }

.card-center { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); font-size: 1.3rem; line-height: 1; }
.flip-container-river .card-center { font-size: 2.6rem; }

/* Zone centrale (Ligne 2) */
.central-zone { grid-column: 2; grid-row: 2; min-height: 165px; display: flex; align-items: flex-end; justify-content: center; gap: 30px; z-index: 10; }
.pile-container, #dice-zone { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 165px; }
#river-piles { display: flex; gap: 30px; }

.card-deck { width: 90px; height: 130px; background: #092414; border: 3px solid #ffaa00; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; user-select: none; box-shadow: 0 4px 15px rgba(0,0,0,0.5); color: #fff; }
.card-deck .jager-cross { font-size: 1.2em; }
.card-deck .jager-emblem { font-size: 1.9em; }
.card-back-stack { position: absolute; width: 100%; height: 100%; top: 4px; left: 4px; background: #05140b; border: 3px solid #ff6600; border-radius: 8px; z-index: -1; box-shadow: 3px 3px 8px rgba(0,0,0,0.6); }

.dice-container { display: flex; justify-content: center; gap: 15px; height: 130px; align-items: center; }
.scene { width: 60px; height: 60px; perspective: 400px; }
.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1); }
.cube-face { position: absolute; top: 0; left: 0; width: 60px; height: 60px; background: radial-gradient(#6e3d1b, #3d200a); border: 2px solid #241306; border-radius: 10px; box-shadow: inset 0 0 10px rgba(0,0,0,0.85), 0 2px 5px rgba(0,0,0,0.5); }
.face-1 { transform: rotateY(0deg) translateZ(30px); }
.face-6 { transform: rotateY(180deg) translateZ(30px); }
.face-3 { transform: rotateY(90deg) translateZ(30px); }
.face-4 { transform: rotateY(-90deg) translateZ(30px); }
.face-2 { transform: rotateX(90deg) translateZ(30px); }
.face-5 { transform: rotateX(-90deg) translateZ(30px); }

.dot { position: absolute; width: 10px; height: 10px; background: #ffaa00; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8), 0 0 6px rgba(255, 170, 0, 0.6); }
.dot.top-left { top: 25%; left: 25%; }
.dot.top-right { top: 25%; left: 75%; }
.dot.middle-left { top: 50%; left: 25%; }
.dot.center { top: 50%; left: 50%; }
.dot.middle-right { top: 50%; left: 75%; }
.dot.bottom-left { top: 75%; left: 25%; }
.dot.bottom-right { top: 75%; left: 75%; }

.cube.rolling { animation: spinChaotic 0.15s linear infinite; }
@keyframes spinChaotic {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
}

.label { font-size: 0.8em; text-transform: uppercase; color: #555; letter-spacing: 1px; font-weight: bold; margin-top: auto; height: 15px; line-height: 15px; }

/* Ancrage du bandeau d'action */
#host-helper-bar { 
    grid-column: 1 / span 3; 
    grid-row: 4;            
    background: #0d2114; 
    padding: 12px; 
    border-radius: 8px; 
    border: 1px solid #ff6600; 
    width: 100%; 
    max-width: 600px; 
    margin: 10px auto 0 auto; 
}
#helper-text { color: #ffaa00; font-weight: bold; font-size: 1.02rem; }
#helper-text b { color: #ff6600; text-transform: uppercase; }

/* ⚙️ CORRECTIF : Style premium thématique pour le bouton de redémarrage de fin de partie */
#btn-restart {
    background: linear-gradient(135deg, #ff6600, #cc3300);
    color: #fff;
    border: 2px solid #ffaa00;
    padding: 14px 28px;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all 0.2s ease-in-out;
    width: fit-content;
    margin: 15px auto 0 auto;
}
#btn-restart:hover {
    background: linear-gradient(135deg, #ffaa00, #ff6600);
    border-color: #ffcc00;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 170, 0, 0.6);
}
#btn-restart:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 102, 0, 0.4);
}

#message-display { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(12, 28, 18, 0.98); color: #fff; border: 2px solid #ffaa00; padding: 20px 45px; border-radius: 12px; font-size: 1.25rem; font-weight: bold; z-index: 1000; box-shadow: 0 0 40px rgba(0,0,0,0.9); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;}

.hidden { display: none !important; }

@media (max-width: 768px) {
    #game-board { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); gap: 20px; overflow-y: auto; }
    .central-zone { grid-column: 1; grid-row: 2; }
    .player-box { grid-column: 1 !important; grid-row: auto !important; justify-self: center !important; align-self: center !important; }
    #host-helper-bar { grid-column: 1; grid-row: 4; }
}