@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

.coin-neo-wrapper {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1000px; /* Chiều rộng thoáng đãng */
    margin: 20px auto;
    border: 3px solid #000000;
    border-radius: 12px;
    box-shadow: 8px 8px 0px #000000;
    padding: 25px;
    background: #ffffff;
    color: #000000; /* Text đen tuyền */
    box-sizing: border-box;
}

.coin-neo-wrapper * { box-sizing: border-box; }

/* HEADER */
.coin-header {
    display: flex; justify-content: space-between; align-items: center;
    background: #ffdac1; padding: 15px 20px; border-radius: 12px;
    border: 3px solid #000000; box-shadow: 4px 4px 0px #000000; margin-bottom: 25px;
}
.coin-header h2 { margin: 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; color: #000; }
.btn-sound { background: #fff; border: 3px solid #000; border-radius: 50%; width: 45px; height: 45px; font-size: 1.2rem; cursor: pointer; box-shadow: 2px 2px 0px #000; transition: 0.1s; display: flex; align-items: center; justify-content: center; color: #000; }
.btn-sound:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }

/* TABS (CHẾ ĐỘ) */
.coin-tabs { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.coin-tab {
    flex: 1; text-align: center; padding: 12px; font-weight: 900; font-size: 1.1rem;
    border: 3px solid #000; border-radius: 8px; background: #e9ecef; color: #000;
    cursor: pointer; box-shadow: 3px 3px 0px #000; transition: all 0.1s; text-transform: uppercase;
}
.coin-tab.active { background: #ffb7b2; box-shadow: 1px 1px 0px #000; transform: translate(2px, 2px); }

/* ĐIỀU KHIỂN */
.coin-controls {
    display: flex; gap: 20px; background: #f9f9f9; padding: 20px;
    border: 3px solid #000; border-radius: 8px; margin-bottom: 25px; align-items: flex-end; flex-wrap: wrap;
}
.coin-group { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 200px; }
.coin-group label { font-weight: 900; font-size: 1.05rem; color: #000; text-transform: uppercase; }
.coin-select, .coin-input {
    width: 100%; padding: 12px; font-size: 1.1rem; font-weight: 900; border-radius: 8px; 
    border: 3px solid #000; background: #fff; color: #000; outline: none; box-shadow: 2px 2px 0px #000;
}

/* NÚT TUNG */
.btn-flip-big {
    flex: 1; min-width: 200px; cursor: pointer; font-size: 1.4rem; font-weight: 900;
    padding: 12px 20px; background-color: #b5ead7; border: 3px solid #000;
    border-radius: 8px; box-shadow: 4px 4px 0px #000; text-transform: uppercase; color: #000;
    transition: transform 0.1s, box-shadow 0.1s; height: 52px;
}
.btn-flip-big:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #000; }
.btn-flip-big:disabled { background-color: #e0e0e0; cursor: not-allowed; box-shadow: 4px 4px 0px #000; }
.btn-flip-big.btn-sim { background-color: #ffca3a; }

/* KHU VỰC 3D (THỰC TẾ) */
.flipper-wrapper {
    width: 100%; min-height: 450px; background-color: #F6F3EB; 
    border-radius: 8px; border: 3px solid #000; position: relative;
    display: flex; flex-direction: column; overflow: hidden;
}
.coin-arena {
    flex-grow: 1; display: flex; flex-wrap: wrap; gap: 40px;
    justify-content: center; align-items: center; padding: 40px; margin-top: 40px;
}
.result-board { position: absolute; top: 15px; left: 0; width: 100%; text-align: center; transition: opacity 0.3s; z-index: 10; pointer-events: none; }
.result-board.hidden { opacity: 0; }
.main-text { display: block; font-family: 'Bungee', sans-serif; font-size: 40px; color: #000; text-shadow: 3px 3px 0px #fff; margin-bottom: 5px; -webkit-text-stroke: 1px #fff; }
.sub-text { font-weight: 900; font-size: 1.1rem; background-color: #fff; padding: 6px 15px; border-radius: 20px; color: #000; border: 3px solid #000; box-shadow: 2px 2px 0px #000; }

/* CSS ĐỒNG XU 3D */
.coin {
    width: 110px; height: 110px; position: relative; transform-style: preserve-3d;
    transition: transform 2.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.coin-face {
    position: absolute; width: 100%; height: 100%; border-radius: 50%; backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center; font-family: 'Bungee', sans-serif;
    font-size: 26px; color: #000; border: 4px solid #000;
    box-shadow: inset 0 0 0 8px rgba(255,255,255,0.4), 4px 4px 0px rgba(0,0,0,0.3);
}
.coin-face.front { background-color: #ffb7b2; transform: rotateX(0deg); }
.coin-face.back { background-color: #b5ead7; transform: rotateX(180deg); }

/* KHU VỰC GIẢ LẬP XÁC SUẤT */
.sim-arena {
    width: 100%; min-height: 400px; background-color: #fff; padding: 25px;
    border-radius: 8px; border: 3px solid #000; display: none; flex-direction: column;
}
.sim-arena.active { display: flex; }
.sim-stats { margin-bottom: 25px; font-weight: 900; font-size: 1.2rem; color: #000; text-align: center; border-bottom: 3px dashed #000; padding-bottom: 15px;}
.bar-row { display: flex; align-items: center; margin-bottom: 20px; gap: 15px; }
.bar-label { font-weight: 900; width: 80px; font-size: 1.2rem; color: #000; text-transform: uppercase; }
.bar-track { flex: 1; height: 35px; background: #eee; border: 3px solid #000; border-radius: 8px; position: relative; overflow: hidden; box-shadow: inset 2px 2px 0px rgba(0,0,0,0.1); }
.bar-fill { height: 100%; width: 0%; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; align-items: center; padding-left: 10px; font-weight: 900; color: #000; }
.fill-xap { background: #ffb7b2; }
.fill-ngua { background: #b5ead7; }
.bar-value { font-weight: 900; width: 90px; text-align: right; font-size: 1.2rem; color: #000; }

/* LỊCH SỬ */
.history-box { margin-top: 25px; padding: 15px; background-color: #f9f9f9; border: 2px dashed #000; border-radius: 8px; }
.history-box h4 { margin: 0 0 10px 0; font-size: 1.1rem; color: #000; font-weight: 900; }
.history-box ul { list-style: none; padding: 0; margin: 0; }
.history-box li { font-size: 1.05rem; padding: 8px 0; border-bottom: 2px dashed #ccc; font-weight: 800; color: #000; }
.history-box li:last-child { border-bottom: none; }

@media (max-width: 600px) {
    .coin-controls { flex-direction: column; align-items: stretch; }
    .coin { width: 80px; height: 80px; }
    .coin-face { font-size: 18px; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.4), 2px 2px 0px rgba(0,0,0,0.3); }
}