:root { --machine-color: #f1c40f; --bg-color: #f0f8ff; }
body { display: flex; flex-direction: column; align-items: center; background-color: var(--bg-color); font-family: sans-serif; padding: 20px; }
.main-layout { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; max-width: 1100px; }

/* 抽選機 */
.machine-area { text-align: center; width: 320px; background: white; padding: 20px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.machine-container { position: relative; width: 200px; height: 220px; margin: 20px auto; }
.machine-body { width: 150px; height: 150px; background-color: var(--machine-color); border: 5px solid #333; border-radius: 30px; position: relative; margin: 0 auto; z-index: 2; }
.rotating { animation: spin 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } }
.exit { position: absolute; bottom: 40px; right: 10px; width: 40px; height: 20px; background: #95a5a6; border: 3px solid #333; border-radius: 5px; z-index: 1; }
.ball { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #333; position: absolute; bottom: 40px; right: 15px; opacity: 0; z-index: 0; }
.ball-drop { animation: drop 0.6s forwards; }
@keyframes drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(70px) translateX(50px); opacity: 1; } }

/* カードデザイン */
.card { background: white; padding: 20px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 450px; }
table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 13px; }
th, td { padding: 8px; border-bottom: 1px solid #eee; text-align: center; }
input { padding: 5px; border: 1px solid #ddd; border-radius: 4px; }
input[type="number"] { width: 45px; }
.btn { padding: 8px 15px; cursor: pointer; border-radius: 50px; border: none; font-weight: bold; transition: 0.2s; }
.btn-add { background: #2ecc71; color: white; }
.btn-refill { background: #3498db; color: white; }
.btn-draw { background: #ff7675; color: white; font-size: 20px; width: 100%; margin-top: 15px; }
.btn-delete { background: #ff4757; color: white; padding: 5px 8px; font-size: 11px; }
.btn:disabled { background: #ccc; }

.history-list { list-style: none; padding: 0; max-height: 250px; overflow-y: auto; border-top: 1px solid #eee; }
.history-item { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #f9f9f9; font-size: 13px; }
.history-dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; border: 1px solid #ccc; }

#result-text { margin-top: 20px; font-size: 20px; font-weight: bold; min-height: 1.5em; color: #2d3436; }
.stock-label { font-size: 10px; color: #888; display: block; }