/* --- GLOBAL THEME --- */
body {
    background-color: #0d1117;
    background-image: radial-gradient(#1f2937 1px, transparent 1px);
    background-size: 20px 20px;
    color: #e6edf3;
    font-family: 'Inter', sans-serif;
    text-align: center;
    margin: 0; padding: 20px;
}
.container { max-width: 800px; margin: 0 auto; }

/* HEADERS */
h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem; margin-bottom: 5px;
    background: -webkit-linear-gradient(left, #ec4899, #8b5cf6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.subtitle { color: #4ade80; letter-spacing: 1px; margin-top: 0; }
.logo-pulse { width: 60px; margin-bottom: 10px; animation: pulse-logo 3s infinite; }
@keyframes pulse-logo { 0% {transform: scale(1);} 50% {transform: scale(1.1); filter: drop-shadow(0 0 10px #4ade80);} 100% {transform: scale(1);} }

/* FLIP CARDS */
.card-container { display: flex; justify-content: center; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.flip-card { background-color: transparent; width: 150px; height: 180px; perspective: 1000px; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; border-radius: 15px; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; box-sizing: border-box; }
.flip-card-front { background: #1f2937; border: 1px solid #30363d; color: #facc15; }
.flip-card-back { background: #161b22; border: 1px solid #4ade80; color: #fff; transform: rotateY(180deg); }
.icon { font-size: 2rem; margin-bottom: 5px; }

/* METER */
.meter-bg { background: #30363d; height: 25px; border-radius: 15px; margin: 20px 0 5px 0; overflow: hidden; border: 2px solid #30363d; }
.meter-fill { height: 100%; background: linear-gradient(90deg, #facc15, #ec4899); width: 0%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.status-pulse { animation: pulse-text 2s infinite; }
@keyframes pulse-text { 0% { opacity: 0.8; } 50% { opacity: 1; text-shadow: 0 0 10px rgba(236,72,153,0.5); } 100% { opacity: 0.8; } }
.winner-pulse { animation: bounce 1s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* CONTROLS */
.control-panel { background: #161b22; padding: 25px; border-radius: 12px; border: 1px solid #30363d; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.input-group { margin-bottom: 15px; text-align: left; }
.input-group label { display: block; font-size: 0.8rem; color: #8b949e; margin-bottom: 5px; }
.input-group-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lbl-small { font-size: 0.7rem !important; color: #8b949e; display:block; margin-bottom:5px; text-align:left; }
input { background: #0d1117; border: 1px solid #30363d; color: white; padding: 12px; border-radius: 6px; flex: 1; outline: none; transition: border-color 0.2s; min-width: 0; }
input:focus { border-color: #4ade80; }

.btn-primary { background: #4ade80; color: #000; font-weight: bold; border: none; padding: 15px; width: 100%; border-radius: 8px; cursor: pointer; font-size: 1.1rem; margin-top: 10px; transition: transform 0.1s; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: #30363d; color: #fff; border: 1px solid #8b949e; padding: 0 15px; border-radius: 6px; cursor: pointer; }
.btn-secondary:hover { background: #444; }

/* TABLE */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th { text-align: left; color: #8b949e; border-bottom: 1px solid #30363d; padding: 10px; }
td { padding: 10px; border-bottom: 1px solid #21262d; }

/* SIMULATION TABLE */
.sim-table { font-size: 0.8rem; border-spacing: 0; }
.sim-table th { background: #111; color: #fff; }
.sim-table td { padding: 8px; border-bottom: 1px solid #444; }
.row-win td { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.row-risk td { background: rgba(250, 204, 21, 0.1); color: #facc15; }
.row-lose td { background: rgba(239, 68, 68, 0.1); color: #8b949e; }

/* --- MODAL FIXES --- */
.btn-story { background: transparent; border: 2px solid #facc15; color: #facc15; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-family: 'Inter', sans-serif; margin-bottom: 20px; transition: 0.3s; }
.btn-story:hover { background: #facc15; color: #000; box-shadow: 0 0 15px #facc15; }

/* Modal Background */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }
/* Modal Center Box */
.modal-dialog { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 20px; }
.modal-content { position: relative; background: linear-gradient(135deg, #1f2937, #111827); padding: 30px; border: 2px solid #ec4899; width: 100%; max-width: 500px; border-radius: 15px; color: white; text-align: center; box-shadow: 0 0 30px rgba(236, 72, 153, 0.4); animation: slideDown 0.4s; }
@keyframes slideDown { from {transform: translateY(-50px); opacity: 0;} to {transform: translateY(0); opacity: 1;} }

/* Sticky Close Button */
.close-sticky { position: absolute; right: 15px; top: 10px; color: #aaa; font-size: 30px; font-weight: bold; cursor: pointer; z-index: 10; }
.close-sticky:hover { color: white; }

.mySlides { display: none; }
.story-icon { font-size: 4rem; margin-bottom: 10px; animation: bounce 2s infinite; }
.story-title { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; color: #4ade80; margin: 10px 0;}
.story-text { line-height: 1.6; color: #e6edf3; font-size: 1rem; }
.nav-center { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }
.btn-next, .btn-prev { background: #ec4899; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.btn-prev { background: #374151; }
.fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade { from {opacity: .4} to {opacity: 1} }