body { margin: 0; background: #111; color: white; font-family: 'Segoe UI', sans-serif; overflow: hidden; }
.screen { display: none; width: 100vw; height: 100vh; flex-direction: column; align-items: center; justify-content: center; }
.screen.active { display: flex; }

/* MENUS */
#home-screen, #create-screen, #join-screen, #lobby-screen { background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('/images/donjon.png'); background-size: cover; }
.game-logo { width: 150px; margin-bottom: 20px; animation: float 3s infinite; border: 2px solid #f1c40f; border-radius: 20px; box-shadow: 0 0 20px rgba(241,196,15,0.6); }
@keyframes float { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
h1 { font-size: 3em; margin-bottom: 30px; color: #f1c40f; text-shadow: 0 0 10px black; }
.panel { background: #2c3e50; padding: 30px; border-radius: 10px; width: 350px; text-align: center; border: 1px solid #444; }
.menu-container { display: flex; flex-direction: column; gap: 15px; }

/* BOUTONS UNIFORMES */
.big-btn { padding: 15px 30px; font-size: 1.2em; background: #e67e22; border: none; color: white; border-radius: 5px; cursor: pointer; font-weight: bold; width: 250px; }
.big-btn:hover { background: #d35400; }
.btn-row { display: flex; gap: 10px; margin-top: 10px; }
.btn-row button { width: 50%; padding: 10px; border:none; border-radius:4px; color:white; font-weight:bold; cursor:pointer; }
.btn-row button:first-child { background: #7f8c8d; } /* Retour */
.btn-row button:last-child { background: #3498db; } /* Action */

/* CONFIG PARTIE */
input { padding: 10px; width: 100%; box-sizing: border-box; margin-bottom: 10px; background: #ecf0f1; border: 1px solid #555; }
.config-row { display: flex; justify-content: space-around; margin-bottom: 15px; }
.config-row label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.config-options { text-align: left; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 5px; margin-bottom: 10px; }
.config-options label { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 5px; }

/* TABS */
.tabs { display: flex; margin-bottom: 10px; }
.tab { flex: 1; padding: 10px; background: #34495e; cursor: pointer; border: none; color: #aaa; }
.tab.active { background: #e67e22; color: white; }
.tab-content { display: none; }
.tab-content.active { display: block; }
#public-games-list { list-style: none; padding: 0; max-height: 200px; overflow-y: auto; text-align: left; }
#public-games-list li { padding: 8px; background: rgba(0,0,0,0.3); margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }

/* SIDEBAR */
#game-screen { flex-direction: row; align-items: stretch; justify-content: flex-start; }
#sidebar { width: 320px; background: #2c3e50; border-right: 2px solid #1a252f; display: flex; flex-direction: column; transition: width 0.3s ease; z-index: 10; flex-shrink: 0; }
.sidebar-closed #sidebar { width: 0; padding: 0; border: none; overflow: hidden; }
.sidebar-header { padding: 10px 15px; background: #34495e; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #555; height: 50px; box-sizing: border-box; }
.sidebar-scrollable { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; }
#sidebar-open-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 60px; background: #34495e; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 20; border-radius: 0 10px 10px 0; }
.sidebar-closed #sidebar-open-btn { display: flex; }

/* JOUEURS */
.player-list-item { background: #3e5871; margin-bottom: 5px; padding: 8px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
.player-name { font-weight: bold; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-controls { display: flex; gap: 3px; }
.action-btn { width: 30px; height: 30px; font-size: 1.1em; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 4px; cursor: pointer; background: #3498db; color: white; }
.kick-btn { background: #c0392b !important; }

/* INVENTAIRE */
.gm-section { margin-bottom: 15px; border-top: 1px solid #555; padding-top: 10px; }
.inv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 4px; min-height: 45px; }
.inv-item { width: 40px; height: 40px; background: #444; border-radius: 3px; border: 1px solid #555; display: flex; align-items: center; justify-content: center; font-size: 1.5em; cursor: grab; }
.equip-slots { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.inv-slot-container { display: flex; flex-direction: column; align-items: center; }
.inv-slot { width: 55px; height: 55px; border: 2px dashed #777; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 1.8em; background: rgba(0,0,0,0.2); position: relative; }
.slot-label { font-size: 0.7em; color: #aaa; margin-top: 5px; }
#creative-section .inv-item { background: #8e44ad; }

/* CHAT FLOTTANT */
#chat-floating-container { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; }
#chat-bubble { width: 60px; height: 60px; background: #e67e22; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2em; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
#chat-window { width: 320px; height: 400px; background: #2c3e50; border-radius: 10px; display: none; flex-direction: column; overflow: hidden; border: 1px solid #444; margin-bottom: 10px; }
#chat-header { padding: 10px; background: #34495e; display: flex; justify-content: space-between; }
#chat-messages-box { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.msg-row { padding: 8px 12px; border-radius: 15px; max-width: 80%; font-size: 0.9em; word-wrap: break-word; }
.msg-in { background: #3e5871; align-self: flex-start; }
.msg-out { background: #2980b9; align-self: flex-end; color: white; }

/* CANVAS & DICE */
#main-area { flex-grow: 1; position: relative; background: #000; overflow: hidden; }
#game-canvas { display: block; }
#top-bar { height: 60px; position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 50; }
#dice-container { pointer-events: auto; background: rgba(0,0,0,0.6); padding: 10px 20px; border-radius: 0 0 10px 10px; display: flex; align-items: center; gap: 15px; }
#dice-cube { width: 40px; height: 40px; background: white; color: black; font-weight: bold; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 1.2em; }
.rolling { animation: shake 0.5s infinite; }
@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } }