:root { --bg: #36393f; --card: #2f3136; --accent: #5865F2; --text: #dcddde; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; margin: 0; overflow: hidden; height: 100vh; }
#auth-section { display: flex; justify-content: center; align-items: center; height: 100vh; }
.card { background: var(--card); padding: 40px; border-radius: 10px; text-align: center; }
#app-section { display: flex; height: 100vh; }
#sidebar { width: 240px; background: #202225; padding: 20px; display: flex; flex-direction: column; }
.profile-box { text-align: center; border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 15px; }
.profile-box img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--accent); }
.menu-btn { width: 100%; padding: 10px; background: transparent; color: #8e9297; text-align: left; border: none; cursor: pointer; border-radius: 5px; position: relative; }
.menu-btn.active { background: #393c43; color: #fff; font-weight: bold; }
#content { flex: 1; padding: 25px; display: flex; flex-direction: column; overflow-y: auto; }
.game-view { height: 100%; display: flex; flex-direction: column; }
.game-header { border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 15px; display: flex; justify-content: space-between; }
#play-btn { width: 180px; cursor: pointer; transition: transform 0.05s; }
#play-btn:active { transform: scale(0.9); }
canvas { background: #000; display: block; margin: 0 auto; border-radius: 8px; }
iframe { border: none; border-radius: 8px; background: #000; flex: 1; }
.delete-badge { position: absolute; right: 5px; top: 10px; color: #ff4757; font-weight: bold; }
#chat-window { flex: 1; overflow-y: auto; background: #2f3136; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.action-btn { background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.small-btn { font-size: 10px; padding: 4px; margin-top: 5px; background: #444; color: white; border: none; cursor: pointer; }