@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@400;700&display=swap');

body {
 font-family: 'Mochiy Pop One', 'Noto Sans JP', sans-serif;
 display: flex;
 justify-content: center;
 align-items: flex-start;
 min-height: 100vh;
 margin: 20px 0;
 background: linear-gradient(135deg, #f6d365, #ffccff);
 animation: gradient 10s ease infinite;
 background-size: 400% 400%;
 position: relative;
 overflow: hidden;
}

/* 背景に星とハートの装飾 */
body::before {
 content: '★ ♥ ★';
 position: absolute;
 top: 10%;
 left: 5%;
 font-size: 2em;
 color: rgba(255, 255, 255, 0.3);
 transform: rotate(-20deg);
}

body::after {
 content: '♥ ★ ♥';
 position: absolute;
 bottom: 10%;
 right: 5%;
 font-size: 2em;
 color: rgba(255, 255, 255, 0.3);
 transform: rotate(20deg);
}

@keyframes gradient {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

.container {
 text-align: center;
 background: rgba(255, 255, 255, 0.95);
 padding: 15px;
 border-radius: 20px;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 width: 90vw;
 max-width: 800px;
 overflow-y: auto;
 overflow-x: hidden;
 border: 3px solid;
 border-image: linear-gradient(45deg, #ff6b6b, #ffccff) 1;
}

h1 {
 margin-bottom: 15px;
 color: #ff5e5e;
 text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 font-size: 2.2em;
 animation: fadeIn 1s ease-in;
}

.subtitle-area {
 margin-bottom: 15px;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 12px;
}

.input-area {
 margin-bottom: 20px;
 display: flex;
 flex-direction: column; /* 縦に並べる */
 align-items: center;
 gap: 12px;
}

.input-group {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 12px;
}

.button-group {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 12px;
}

label {
 font-size: 1.2em;
 color: #333;
 font-weight: 700;
}

select {
 padding: 10px;
 width: 240px;
 border: 2px solid #ff6b6b;
 border-radius: 8px;
 font-size: 1em;
 transition: border-color 0.3s, box-shadow 0.3s;
}

input {
 padding: 10px;
 width: 60px;
 border: 2px solid #ff6b6b;
 border-radius: 8px;
 font-size: 1em;
 transition: border-color 0.3s, box-shadow 0.3s;
}

select:focus, input:focus {
 border-color: #ff8787;
 box-shadow: 0 0 8px rgba(255, 135, 135, 0.5);
 outline: none;
}

button {
 padding: 12px 24px;
 margin: 5px;
 background: linear-gradient(45deg, #ff6b6b, #ff8787);
 color: white;
 border: none;
 border-radius: 10px;
 cursor: pointer;
 font-size: 1.1em;
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 transition: transform 0.3s, box-shadow 0.3s;
 min-height: 48px;
}

#start-btn, #all-btn {
 width: 120px;
}

button:hover:not(:disabled) {
 transform: scale(1.05);
 box-shadow: 0 8px 15px rgba(255, 107, 107, 0.4);
}

button:disabled {
 background: #cccccc;
 cursor: not-allowed;
 box-shadow: none;
}

.result {
 margin-bottom: 20px;
}

.prizes {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 15px;
 align-items: center;
 max-height: 400px;
 overflow-y: auto;
 padding: 10px;
}

.congrats-wrapper {
 width: 100%;
 text-align: center;
 margin-top: 6px;
 height: 24px;
 overflow: hidden;
 position: relative;
}

.prize {
 position: relative;
 padding: 8px;
 border-radius: 12px;
 min-width: 120px;
 text-align: center;
 background: rgba(255, 255, 255, 0.9);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 animation: slideIn 0.5s ease-in forwards;
 transform: translateY(20px);
 opacity: 0;
 height: 40px;
 line-height: 1.5;
 display: flex;
 align-items: center;
 justify-content: center;
}

@keyframes slideIn {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
}

.prize:nth-child(1) { animation-delay: 0.1s; }
.prize:nth-child(2) { animation-delay: 0.2s; }
.prize:nth-child(3) { animation-delay: 0.3s; }
.prize:nth-child(4) { animation-delay: 0.4s; }
.prize:nth-child(5) { animation-delay: 0.5s; }

.gold {
 font-weight: bold;
 color: #ffd700;
 -webkit-text-stroke: 0.1px black;
 text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.red {
 color: #ff0000;
 font-weight: 500;
}

.black {
 color: #333;
}

.blue {
 font-weight: bold;
 color: #1e90ff;
 text-shadow: 0 0 8px rgba(30, 144, 255, 0.8);
}

.glow, .red-glow, .blue-glow {
 position: relative;
}

.glow::before {
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 border-radius: 14px;
 border: 3px solid #ffd700;
 box-shadow: 0 0 15px #ffd700, 0 0 25px #ffd700;
 animation: glow 1.5s ease-in-out infinite alternate;
}

.red-glow::before {
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 border-radius: 14px;
 border: 3px solid #ff0000;
 box-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000;
 animation: glow 1.5s ease-in-out infinite alternate;
}

.blue-glow::before {
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 border-radius: 14px;
 border: 3px solid #1e90ff;
 box-shadow: 0 0 15px #1e90ff, 0 0 25px #1e90ff;
 animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
 from { box-shadow: 0 0 10px currentColor; }
 to { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

.congrats {
 font-size: 1.2em;
 color: #ff4444;
 font-weight: bold;
 animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
}

.confetti {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 overflow: hidden;
}

.confetti span {
 position: absolute;
 width: 6px;
 height: 6px;
 background: #ff4444;
 opacity: 0.8;
 animation: confetti 1.5s ease-out forwards;
}

.confetti span:nth-child(odd) { background: #ffd700; }
.confetti span:nth-child(even) { background: #1e90ff; }

@keyframes confetti {
 0% {
 transform: translateY(-100%) rotate(0deg);
 opacity: 0.8;
 }
 100% {
 transform: translateY(200%) rotate(720deg);
 opacity: 0;
 }
}

#remaining {
 margin-top: 15px;
 font-size: 1.2em;
 color: #333;
 font-weight: 500;
}

.modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
 display: flex;
 justify-content: center;
 align-items: center;
 animation: fadeInModal 0.3s ease-in;
}

@keyframes fadeInModal {
 from { opacity: 0; }
 to { opacity: 1; }
}

.modal-content {
 background: rgba(255, 255, 255, 0.95);
 padding: 20px;
 border-radius: 15px;
 max-width: 80vw;
 width: 400px;
 text-align: center;
 position: relative;
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
 border: 2px solid #ffccff;
}

.close {
 position: absolute;
 top: 8px;
 right: 12px;
 font-size: 20px;
 cursor: pointer;
 color: #333;
 transition: color 0.3s;
}

.close:hover {
 color: #ff6b6b;
}

#modal-results {
 font-size: 1em;
 color: #333;
}

/* スマホ対応 */
@media (max-width: 600px) {
 .container {
 padding: 15px;
 width: 85vw;
 }

 h1 {
 font-size: 1.6em;
 margin-bottom: 12px;
 }

 .subtitle-area {
 flex-direction: column;
 gap: 10px;
 }

 .input-area {
 flex-direction: column; /* 縦に並べる */
 gap: 10px;
 }

 .input-group {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px;
 }

 .button-group {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px;
 }

 label {
 font-size: 1em;
 }

 select {
 width: 200px;
 font-size: 0.9em;
 padding: 8px;
 }

 input {
 width: 50px;
 font-size: 0.9em;
 padding: 8px;
 }

 button {
 padding: 10px 20px;
 font-size: 1em;
 min-height: 48px;
 }

 #start-btn, #all-btn {
 width: 100px;
 }

 .prizes {
 gap: 10px;
 max-height: 300px;
 overflow-y: auto;
 }

 .prize {
 min-width: 85px;
 padding: 6px;
 font-size: 0.85em;
 height: 36px;
 }

 .congrats-wrapper {
 margin-top: 4px;
 height: 20px;
 }

 .congrats {
 font-size: 1.0em;
 }

 #remaining {
 font-size: 1em;
 }

 .modal-content {
 width: 90%;
 padding: 15px;
 }

 #modal-results {
 font-size: 0.9em;
 }
}