/* ==== Global Styles ==== */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body {
  background: url('../images/bck_img.png') no-repeat center center fixed;
  background-size: cover;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  color:#f0f0f0;
  overflow-x:hidden;
}


.login-container {
  background: rgba(0,0,0,.85); border:3px solid #ffcc00; border-radius:20px;
  box-shadow:0 15px 35px rgba(0,0,0,.7); width:100%; max-width:950px; padding:40px; text-align:center;
}

.title { font-size:3rem; margin-bottom:10px; color:#ffcc00; text-shadow:0 0 15px rgba(255,204,0,.7); }
.subtitle { font-size:1.4rem; color:#4ecdc4; margin-bottom:25px; }

.player-name { margin-bottom:30px; }
.player-name input {
  width:80%; padding:12px; font-size:1.1rem; border:2px solid #ffcc00; border-radius:8px; outline:none; text-align:center; background:#222; color:#fff;
}

.character-selection { display:flex; justify-content:center; gap:30px; margin-bottom:35px; flex-wrap:wrap; }
.character-card {
  background: rgba(30,30,50,.9); border:2px solid #555; border-radius:15px; width:300px; padding:20px; transition:.3s; cursor:pointer;
}
.character-card:hover { transform: translateY(-8px); border-color:#ffcc00; }
.character-card.selected { border-color:#ffcc00; box-shadow:0 0 20px rgba(255,204,0,.6); }

.character-name { font-size:1.8rem; font-weight:bold; margin-bottom:5px; }
.character-role  { font-size:1.1rem; color:#ffcc00; font-style:italic; margin-bottom:15px; }

.character-image {
  width:100%; height:400px; background-size:cover; background-position:center; background-repeat:no-repeat;
  border:2px solid #666; border-radius:10px; margin-bottom:15px;
}

.character-stats { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin-bottom:15px; }
.stat { background: rgba(40,40,60,.8); padding:8px; border-radius:8px; text-align:center; border:1px solid #555; }
.stat-value { font-size:1.4rem; font-weight:bold; color:#ffcc00; }

.character-description { font-size:.95rem; color:#ccc; margin-bottom:15px; min-height:70px; }

.select-btn {
  padding:10px 20px; width:100%; font-size:1rem; border:none; border-radius:6px; cursor:pointer;
  background: linear-gradient(to right, #2ecc71, #27ae60); color:#fff; transition:.3s;
}
.select-btn:hover { background: linear-gradient(to right, #27ae60, #2ecc71); }

#start-btn {
  padding:12px 40px; font-size:1.2rem; background: linear-gradient(to right, #f39c12, #d35400);
  border:2px solid #ffcc00; border-radius:8px; color:#fff; cursor:pointer; margin-top:15px; transition:.3s;
}
#start-btn:disabled { opacity:.5; cursor:not-allowed; }

.game-link { margin-top:10px; font-size:1rem; color:#aaa; }
.game-link a { color:#ffcc00; text-decoration:none; }

/* Shared Story Modal (also used on index) */
#story-modal { position:fixed; inset:0; background: rgba(0,0,0,.85); display:flex; justify-content:center; align-items:center; z-index:1000; }
#story-modal.hidden { display:none; }
.story-card {
  background:#222; padding:20px; border-radius:12px; max-width:640px; width:92%; text-align:center; color:#fff; border:3px solid #ffcc00;
}
#story-image { width:100%; max-height:340px; object-fit:contain; border-radius:10px; margin-bottom:16px; }
#story-text { margin-bottom:20px; line-height:1.5; }
#story-buttons { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#story-buttons button {
  padding:10px 20px; background: linear-gradient(to right, #2ecc71, #27ae60);
  border:none; border-radius:8px; color:#fff; cursor:pointer; font-size:1rem; transition:.3s;
}
#story-buttons button:hover { background: linear-gradient(to right, #27ae60, #2ecc71); }
/* Contact Us Floating Button */
.contact-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ffcc00, #d4a017);
  color: #000;
  padding: 12px 18px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 1001;
}
.contact-btn i {
  font-size: 1.2rem;
}
.contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,.5);
}