/* General Body and Font Styles */
html {
    overscroll-behavior-y: contain; /* Prevent pull-to-refresh on mobile */
}

body {
    background-color: #f0f2f5; /* 基本の背景色 */
    font-family: 'Arial', sans-serif;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    overscroll-behavior-y: contain; /* Prevent pull-to-refresh on mobile */
    position: relative; /* 背景の基準点として追加 */
}

/* ゲーム画面の背景デザイン */
body.game-active::before {
    content: '';
    position: fixed; /* 画面に固定してスクロールしても追従しないようにする */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* 全てのコンテンツの背面に配置 */
    /* 複数の背景を重ねてデザインを作成 */
    background-image:
        /* 1. 上から広がる淡い色のグラデーション */
        radial-gradient(circle at 50% 0, rgba(150, 190, 255, 0.3) 0%, transparent 50%),
        /* 2. 青海波パターン (4つのグラデーションを重ねて忠実に描画) */
        radial-gradient(circle at 50% 100%, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%),
        radial-gradient(circle at 0 50%, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%),
        radial-gradient(circle at 100% 50%, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%),
        radial-gradient(circle at 50% 0, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%);
    background-size: 100% 100%, 120px 120px, 120px 120px, 120px 120px, 120px 120px;
    /* 上から下へ向かって透明になるマスクを適用 */
    mask-image: linear-gradient(to bottom, black 30%, transparent 80%);
}

.container {
    background-color: rgba(255, 255, 255, 0.3); /* 背景の透過度を調整 (0.0 - 1.0) */
    padding: 20px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
}

h1, h2 {
    font-family: 'Zen Dots', sans-serif;
    text-align: center;
    color: #333;
}

h1 {
    /* Responsive font size to prevent wrapping on small screens */
    font-size: clamp(1.6rem, 7vw, 2.5rem);
    margin-bottom: 20px;
    color: #072078;
}

h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
}

footer {
    width: 100%; /* テキストの中央揃えを確実にするため */
    margin-top: auto; /* フッターをページ下部に押し出す */
    padding: 20px 0; /* 上下の余白を調整 */
    color: #888;
    font-size: 0.9rem;
    text-align: center;
}

/* Start Screen Styles */
#start-screen {
    background-color: #fff;
    /* Adjust padding for smaller screens and add box-sizing */
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    text-align: center;
    box-sizing: border-box;
    position: relative; /* 背景デザインの基準点として追加 */
    overflow: hidden; /* はみ出したデザインを隠す */
}

.setup-section {
    margin-bottom: 30px;
    text-align: left;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.setup-section h2 {
    text-align: left;
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: none;
}

.role-selection label,
.rule-selection label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Radio button custom styles */
.role-selection input[type="radio"],
.rule-selection input[type="radio"] {
    /* Change the color of the radio button when checked */
    accent-color: #6c757d; /* 他のUIと色を統一 */
    /* Adjust size and alignment for better visuals */
    width: 1.1em;
    height: 1.1em;
    margin-right: 8px;
    margin-top: -2px; /* テキストとの垂直位置を微調整 */
}

#start-game-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    border-radius: 100px; /* 角をより丸くする */

    /* 背景デザインを適用 */
    border: none;
    color: #fff;
    background-color: #007bff; /* ベースとなる背景色 */
    background-image:
        /* 上層: パターンを隠すためのグラデーション */
        linear-gradient(to right, transparent 40%, #007bff 85%),
        /* 下層: 青海波パターン (線を太く) */
        radial-gradient(circle at 50% 100%, transparent 22%, rgba(255,255,255,0.15) 23%, rgba(255,255,255,0.15) 25%, transparent 26%, transparent 32%, rgba(255,255,255,0.15) 33%, rgba(255,255,255,0.15) 35%, transparent 36%, transparent 42%, rgba(255,255,255,0.15) 43%, rgba(255,255,255,0.15) 45%, transparent 46%),
        radial-gradient(circle at 0 50%, transparent 22%, rgba(255,255,255,0.15) 23%, rgba(255,255,255,0.15) 25%, transparent 26%, transparent 32%, rgba(255,255,255,0.15) 33%, rgba(255,255,255,0.15) 35%, transparent 36%, transparent 42%, rgba(255,255,255,0.15) 43%, rgba(255,255,255,0.15) 45%, transparent 46%),
        radial-gradient(circle at 100% 50%, transparent 22%, rgba(255,255,255,0.15) 23%, rgba(255,255,255,0.15) 25%, transparent 26%, transparent 32%, rgba(255,255,255,0.15) 33%, rgba(255,255,255,0.15) 35%, transparent 36%, transparent 42%, rgba(255,255,255,0.15) 43%, rgba(255,255,255,0.15) 45%, transparent 46%),
        radial-gradient(circle at 50% 0, transparent 22%, rgba(255,255,255,0.15) 23%, rgba(255,255,255,0.15) 25%, transparent 26%, transparent 32%, rgba(255,255,255,0.15) 33%, rgba(255,255,255,0.15) 35%, transparent 36%, transparent 42%, rgba(255,255,255,0.15) 43%, rgba(255,255,255,0.15) 45%, transparent 46%);
    background-size: 100% 100%, 80px 80px, 80px 80px, 80px 80px, 80px 80px;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat;
}

/* Start Gameボタンのホバー効果を、汎用のものから上書き */
#start-game-btn:hover {
    filter: brightness(1.1);
}

/* Game Container (Initially Hidden) */
#game-container {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

/* Tab Navigation */
.tabs {
    display: flex;
    justify-content: center; /* ボタンを中央に配置 */
    gap: 20px; /* ボタン間のスペース */
    margin-bottom: 24px;
}

.tab-link {
    font-family: 'Zen Dots', sans-serif;
    font-size: 1.1rem;
    width: 180px; /* 幅を調整 */
    padding: 15px;
    cursor: pointer;
    border: none;
    border-radius: 100px; /* 丸い形 */
    box-sizing: border-box;
    background: #e0e0e0; /* 非アクティブ時の背景色 (グレー) */
    color: #333; /* テキスト色を濃いグレーに */
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.tab-link:hover {
    background-color: #d0d0d0; /* ホバー時の色 */
}

.tab-link.active {
    background-color: #6c757d; /* アクティブ時の背景色 (他のボタンと統一) */
    color: #fff; /* アクティブ時のテキスト色を白に */
    font-weight: bold;
}

/* Tab Content */
.tab-content {
    display: none; /* Hide all content by default */
}

.tab-content.active {
    display: block; /* Show only the active content */
}

/* Lottery View Styles */
#lottery-section {
    text-align: center;
    margin-bottom: 30px;
}

#draw-button {
    width: 140px;
    height: 140px;
    border-radius: 50%; /* 正円にする */
    font-size: 1.8rem; /* フォントサイズを少し調整 */
    font-family: 'Zen Dots', sans-serif; /* 他の要素とフォントを統一 */
    font-weight: bold;
    color: #fff;
    padding: 0; /* パディングをリセット */
    margin: 20px auto; /* 上下のマージンを維持しつつ、左右をautoにして中央寄せ */
    /* グラデーションと影 */
    background: linear-gradient(135deg, #81b1ff 0%, #007bff 100%);
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4), 0 2px 4px rgba(0,0,0,0.1) inset; /* 内側の影を追加して立体感を出す */
    transition: all 0.2s ease-out; /* トランジションを簡略化 */
    display: flex;
    flex-direction: column; /* テキストを縦に並べる */
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* テキストに影を追加 */
    line-height: 1.2; /* 行間を少し調整 */
}

/* ボタン内の小さい文字のスタイル */
#draw-button small {
    font-size: 0.8rem;
    font-family: 'Arial', sans-serif; /* メインのテキストとフォントを分ける */
    font-weight: normal;
    margin-top: 4px; /* 上の文字との間隔 */
}

/* ホバー時のエフェクト */
#draw-button:hover:not(:disabled) {
    transform: scale(1.05); /* 少し拡大 */
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5), 0 2px 4px rgba(0,0,0,0.1) inset;
    background: linear-gradient(135deg, #007bff 0%, #81b1ff 100%); /* ホバー時にグラデーションを反転 */
}

/* クリック時のエフェクト */
#draw-button:active:not(:disabled) {
    transform: scale(0.98); /* 少し縮小して沈み込む感じを出す */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.4), 0 2px 4px rgba(0,0,0,0.1) inset;
}

#history-section {
    margin-bottom: 30px;
}

#drawn-numbers-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    gap: 8px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    min-height: 50px;
    background-color: rgba(249, 249, 249, 0.7); /* この数値を小さくすると、より透けます */
}

.drawn-number-item {
    text-align: center;
}

/* セットアップ画面の背景デザイン */
@media (min-width: 300px) {
    #start-screen::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        /* 複数の背景を重ねてデザインを作成 */
        background-image:
            /* 1. 右から広がる淡い色のグラデーション */
            radial-gradient(circle at 100% 50%, rgba(150, 190, 255, 0.3) 0%, transparent 50%),
            /* 2. 青海波パターン (4つのグラデーションを重ねて忠実に描画) */
            radial-gradient(circle at 50% 100%, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%),
            radial-gradient(circle at 0 50%, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%),
            radial-gradient(circle at 100% 50%, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%),
            radial-gradient(circle at 50% 0, transparent 23%, #e9ecef 24%, #e9ecef 25%, transparent 26%, transparent 33%, #e9ecef 34%, #e9ecef 35%, transparent 36%, transparent 43%, #e9ecef 44%, #e9ecef 45%, transparent 46%);
        background-size: 100% 100%, 120px 120px, 120px 120px, 120px 120px, 120px 120px;
        /* 左側（文字側）に向かって透明になるマスクを適用 */
        mask-image: linear-gradient(to left, black 30%, transparent 80%);
        z-index: 0;
    }

    /* コンテンツが背景の上に表示されるようにする */
    #start-screen > * {
        position: relative;
        z-index: 1;
    }
}

/* Card View Container - for positioning context */
#card-view {
    position: relative; /* This is crucial for absolute positioning of the child */
}

/* Card View Styles */
#bingo-grid {
    width: 100%;
    aspect-ratio: 1; /* Make the entire table a square */
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 4px;
    background-color: rgba(204, 204, 204, 0.6); /* マスの隙間の背景 */
    padding: 4px;
    border-radius: 8px;
    box-sizing: border-box;
}

.bingo-cell {
    background-color: rgba(255, 255, 255, 0.75); /* この数値を小さくすると、より透けます */
    /* Responsive font size to prevent overflow */
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-family: 'Zen Dots', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.bingo-cell.free {
    background-color: rgba(233, 236, 239, 0.75); /* この数値を小さくすると、より透けます */
    color: #495057;
    cursor: default;
}

.bingo-cell.hit {
    background-color: #ffc107;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
}

/* Controls and Buttons */
.controls, #game-controls {
    text-align: center;
    margin-top: 20px;
}

.rule-selection {
    margin: 20px 0;
}

.rule-selection p {
    margin: 0;
}

button {
    font-family: 'Zen Dots', sans-serif;
    font-size: 1rem;
    padding: 12px 25px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    transition: background-color 0.2s, transform 0.2s;
}

button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

#reset-game-btn, #reset-card-btn {
    background-color: #6c757d;
    border-radius: 100px; /* 角をより丸くする */
}

#reset-game-btn:hover, #reset-card-btn:hover {
    background-color: #5a6268;
}

/* Share Button */
#share-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Styled as a blue circular button */
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    font-family: 'Zen Dots', sans-serif;
    font-size: 1rem;
    background: linear-gradient(135deg, #81b1ff 0%, #007bff 100%);
    color: #fff;
    border: 2px solid #fff;
    z-index: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Override generic hover for the share button */
#share-btn:hover {
    background: linear-gradient(135deg, #007bff 0%, #81b1ff 100%);
    transform: translateY(-2px);
}

/* Bingo Message */
.bingo-message {
    /* Positioning to overlay on the card */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensure it's above the table */

    /* Hide it by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allow clicks to pass through */
    transition: opacity 0.3s, visibility 0.3s;

    /* Appearance */
    font-family: 'Zen Dots', sans-serif;
    /* Responsive font size */
    font-size: clamp(3rem, 18vw, 8rem);
    text-align: center;
    color: #28a745;
    font-weight: bold;
    text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0,0,0,0.2);
}

.bingo-message.show {
    /* Show it with animation */
    opacity: 1;
    visibility: visible;
    animation: pop-in 0.5s ease-out;
}

@keyframes pop-in {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    80% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景を少し暗くし、ぼかし効果を追加してモダンな見た目に */
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: white;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-sizing: border-box;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.modal-overlay.hidden .modal-content {
    transform: scale(0.9);
}

/* Sound modal specific overrides */
#sound-modal {
    background: transparent;
    box-shadow: none;
}
#sound-modal h2 {
    /* Responsive font size */
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: none;
    padding-bottom: 0;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

#sound-modal p {
    margin: 15px 0 25px;
    color: #f0f2f5;
    font-size: clamp(0.9rem, 4vw, 1rem);
    line-height: 1.6; /* Improve readability for wrapped text */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

#qr-modal-content img {
    max-width: 220px;
    width: 100%;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ddd;
}

#confirm-sound-btn {
    width: 100%;
    padding: 12px;
    font-size: clamp(1rem, 4.5vw, 1.1rem);
    /* ガラスのような質感のボタンに変更 */
    border: 2px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.15);
}

#confirm-sound-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(0); /* 上に動く効果を無効化 */
}

/* Lottery Fullscreen Overlay */
#lottery-overlay {
    /* .modal-overlay のスタイルを継承しつつ、一部上書き */
    background-color: rgba(0, 0, 0, 0.9); /* 背景を少し濃くする */
    flex-direction: column; /* 要素を縦に並べる */
    z-index: 1500; /* 他のモーダルより手前に表示 */
}

#lottery-number-fullscreen {
    font-family: 'Zen Dots', sans-serif;
    /* 画面サイズに応じてフォントサイズを調整 */
    font-size: clamp(150px, 40vw, 400px);
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    line-height: 1;
    /* アニメーションで制御するため、transformのtransitionは削除 */
    transition: color 0.3s, text-shadow 0.3s;
}

/* 抽選中の数字が激しく変化するアニメーション */
#lottery-number-fullscreen.flickering {
    animation: drum-roll 0.2s infinite;
}

@keyframes drum-roll {
    0% {
        transform: scale(0.9) rotate(-3deg);
        opacity: 0.8;
        text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
    }
    50% {
        transform: scale(1.1) rotate(3deg);
        opacity: 1;
        text-shadow: 0 0 10px #fff, 0 0 20px #00ffff, 0 0 30px #00ffff;
    }
    100% {
        transform: scale(0.9) rotate(-3deg);
        opacity: 0.8;
        text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
    }
}

/* 確定した数字のスタイルと、登場時のアニメーション */
#lottery-number-fullscreen.decided {
    color: #ffc107; /* ゴールド */
    text-shadow: 0 0 15px #ffc107, 0 0 40px rgba(255, 193, 7, 0.7);
    transform: scale(1.05); /* アニメーションの最終状態 */
    animation: reveal-number 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 数字が決定した際の登場アニメーション */
@keyframes reveal-number {
    0% { transform: scale(3); opacity: 0; filter: blur(10px); }
    60% { transform: scale(1); opacity: 1; filter: blur(0); }
    80% { transform: scale(1.1); }
    100% { transform: scale(1.05); }
}

#lottery-overlay-controls {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}

#draw-again-btn,
#back-to-lottery-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
}

#draw-again-btn {
    background-color: rgba(220, 53, 69, 0.2); /* 赤系の色に変更 */
    border: 2px solid rgba(220, 53, 69, 0.7); /* 赤系の色に変更 */
    font-size: 1rem;
    line-height: 1;
}

#draw-again-btn:hover {
    background-color: rgba(220, 53, 69, 0.4); /* 赤系の色に変更 */
    transform: scale(1.05) translateY(-2px); /* Animate like the back button */
}

#back-to-lottery-btn {
    /* ガラスのような質感の円形ボタンに変更 */
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.5);
    /* SVGアイコンを背景として設定し、中央に配置 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%; /* アイコンのサイズを調整 */
}

#back-to-lottery-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05) translateY(-2px); /* 少し大きく、上に動かす */
}
 
/* Admin Bingo Notification on Lottery Overlay */
.overlay-admin-notification {
    color: #ffc107; /* Gold color to match the decided number */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 20px; /* Space from the buttons above */
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.7);
}
 
.overlay-admin-notification.hidden {
    display: none;
}