/* 全体の設定 */
body {
    text-align: center;
    /* 💡 チャット画面と合わせた明るい空色 */
    background-color: #f0faff; 
    font-family: "Inter", "Segoe UI", "Meiryo", sans-serif;
    margin: 0;
    padding: 0;
    color: #334455;
}

/* ロゴ周り */
.logo-container {
    margin: 60px auto 30px;
    width: 90%;
    max-width: 500px;
}

/* 💡 タイトル文字をポップに強調（h1がある場合） */
h1 {
    color: #fff;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 1.8rem;
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
    transform: rotate(-1deg); /* 少し傾けて動きを出す */
}

.main-logo {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.1));
    transform: rotate(-2deg);
}

.subtitle {
    font-size: 1.1rem;
    color: #4facfe;
    margin-top: 15px;
    font-weight: 900;
    text-shadow: 1px 1px 0 #fff;
}

/* ボタンのコンテナ */
.menu-container {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* 💡 ボタンの基本スタイル：ぷっくり立体感 */
.btn {
    width: 260px;
    padding: 18px;
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    border-radius: 50px;
    border: none;
    transition: 0.1s;
    position: relative;
    text-decoration: none;
    display: inline-block;
}

/* 各ボタンの色：グラデーションと深い影 */
.btn-register { 
    background: linear-gradient(to bottom, #ff8dc4, #ff69b4);
    color: white; 
    box-shadow: 0 6px 0 #d6458d;
}

.btn-login { 
    background: linear-gradient(to bottom, #4facfe, #00c6ff);
    color: white; 
    box-shadow: 0 6px 0 #0091d1;
}

.btn-rule { 
    background: linear-gradient(to bottom, #7cfc00, #32cd32);
    color: white; 
    box-shadow: 0 6px 0 #28a428;
}

/* 押した時の動き：影を消して沈ませる */
.btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

.btn:hover {
    filter: brightness(1.05);
}

/* フォーム周り */
.form-container {
    background: white;
    width: 85%;
    max-width: 400px;
    margin: 0 auto;
    padding: 30px;
    border-radius: 25px; /* 角をより丸く */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 3px solid #e1f0ff;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    font-weight: 900;
    color: #4facfe;
    font-size: 0.95rem;
    margin-left: 10px;
}

.input-group input {
    width: 100%;
    padding: 15px;
    margin-top: 8px;
    border: 3px solid #f0faff;
    background-color: #f0faff;
    border-radius: 15px;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: bold;
    color: #334455;
    outline: none;
    transition: 0.2s;
}

.input-group input:focus {
    border-color: #ffcf00;
    background-color: #fff;
}

/* ボーナスボックス */
.bonus-box {
    background-color: #fffdf0;
    border: 2px solid #ffcf00;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 25px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #d9af00;
}

.bonus-box ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    justify-content: space-around;
    color: #333;
}

/* フッター */
footer {
    margin-top: 60px;
    padding-bottom: 30px;
    color: #bccadb;
    font-size: 0.85rem;
}

/* モーダル */
.modal-content {
    background: white;
    border-radius: 30px;
    border: 5px solid #4facfe;
    padding: 40px;
}

/* ダイスが回転するアニメーション */
.dice-roll { font-size: 4rem; animation: spin 0.1s infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }