/* static/css/style.css */

html {
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* よりモダンなフォント候補 */
    margin: 0; /* bodyのマージンを削除 */
    padding: 0 0 30px 0; /* 上左右のパディングを削除、下だけ残す */
    background-color: #ebebeb; /* 少し明るい背景色 */
    color: #343a40; /* デフォルトテキストカラー */
    text-align: center;
    overflow-x: hidden;
    /* --- テキスト選択を無効化 --- */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* --- ここまで追加 --- */
    touch-action: manipulation; /* 追加: ダブルタップズームを無効化 */
}

h1 {
    color: #fff; /* white */
    background: linear-gradient(135deg, #ff6b6b, #ff3535); /* 赤系のグラデーション */
    padding : 10px 0; /* パディングを少し増やす */
    margin: 0 0 25px 0; /* 下マージン調整 */
    font-weight: 700; /* さらに太く */
    letter-spacing: 1.5px; /* 文字間隔を広げる */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* テキストに影を追加 */
    text-transform: uppercase; /* 全て大文字に */
}

/* --- コントロールエリア (コピーボタンなど) --- */
.controls {
    margin-top: 30px; /* グリッドとの間隔を調整 */
    padding: 0; /* パディングを削除 (ボタン自体にパディングがあるため) */
    text-align: center;
    position: relative;
    z-index: 10;
}

#copy-button {
    padding: 10px 25px; /* パディング調整 */
    background-color: #6c757d; /* デフォルトはグレー系 */
    color: white;
    border: none;
    border-radius: 20px; /* 角を丸く */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease; /* transform追加 */
    text-decoration: none;
    font-size: 0.9em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ソフトな影 */
}
#copy-button:hover {
    background-color: #5a6268;
    transform: translateY(-1px); /* わずかに浮き上がる効果 */
}
#copy-button:active {
    transform: translateY(0); /* クリック時に元に戻る */
}

/* コピー成功時のスタイル */
#copy-button.copied {
    background-color: #28a745; /* 緑色 */
    cursor: default;
    box-shadow: none; /* 成功時は影を消す */
    transform: none; /* 浮き上がり効果をリセット */
}
#copy-button.copied:hover {
    background-color: #28a745;
    transform: none;
}

/* --- サイズ選択UIのスタイル --- */
.size-selector {
    margin-top: 40px; /* 40pxから60pxに増やして間隔を広げる */
    display: inline-flex; /* inline-flexで中央揃えしやすく */
    justify-content: center;
    position: relative;
    z-index: 10;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); /* グループ全体に影 */
    border-radius: 25px; /* グループ全体を丸く */
    overflow: hidden; /* 角丸を適用するため */
}

.size-button {
    padding: 12px 30px; /* ボタンを大きく */
    color: #495057; /* デフォルトの文字色 */
    background-color: #ffffff; /* デフォルトの背景色 */
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin: 0;
    border-radius: 0; /* 個別の角丸は不要 */
    /* box-shadow は .size-selector で管理 */
}
/* 隣接するボタンの間に細い線を追加 */
.size-button + .size-button {
    border-left: 1px solid #dee2e6;
}

.size-button:hover {
    background-color: #dee2e6; /* ホバー時の背景色 */
    color: #212529;
}

/* アクティブなサイズボタンのスタイル */
.size-button.active-size {
    background-color: #007bff; /* プライマリカラー */
    color: white;
    cursor: default;
    box-shadow: none; /* アクティブ時は個別の影は不要 */
}
.size-button.active-size:hover {
     background-color: #007bff; /* ホバーしても色を変えない */
     box-shadow: none;
}

/* --- コントロール2行目のスタイル --- */
.controls-row-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* 要素間の隙間 */
    margin-top: 20px; /* サイズ選択ボタンとの間隔 */
    margin-bottom: 40px; /* グリッドとの間隔 */
    position: relative; /* z-indexのため */
    z-index: 10; /* 他の要素より手前に */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}

/* ランダム生成ボタンのスタイル (個別設定) */
.new-board-button {
    display: inline-block;
    padding: 8px 16px; /* パディング調整 */
    color: white;
    background-color: #17a2b8; /* 別のアクセントカラー (例: Teal) */
    border: none;
    border-radius: 20px; /* 角を丸く */
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.new-board-button:hover {
     background-color: #138496; /* 少し濃い色 */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
     transform: translateY(-1px);
}
.new-board-button:active {
    transform: translateY(0);
}

/* --- Seed入力フォームのスタイル --- */
.seed-form {
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央揃え */
    align-items: center; /* 垂直方向中央揃え */
}

#seed-input {
    padding: 9.5px 12px;
    border: 1px solid #ced4da;
    /* border-radius: 15px; */
    border-top-left-radius: 15px;    /* 左上を丸める */
    border-bottom-left-radius: 15px; /* 左下を丸める */
    border-right: none;              /* 右の境界線を削除 */
    font-size: 0.9em;
    width: 50px; /* 幅を指定 (4桁程度) */
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    -moz-appearance: textfield; /* Firefoxでのスピナー非表示 */
    /* z-index を追加してボタンより手前に */
    position: relative;
    z-index: 1;
}
/* Chrome, Safari, Edge, Operaでのスピナー非表示 */
#seed-input::-webkit-outer-spin-button,
#seed-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#seed-submit {
    padding: 7.5px 8px; /* 少し小さく */
    background-color: #6c757d;
    color: white;
    border: 1px solid #6c757d;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    font-size: 0.85em; /* フォントも少し小さく */
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#seed-submit:hover {
    background-color: #5a6268;
    transform: translateY(-1px);
}
#seed-submit:active {
    transform: translateY(0);
}

/* --- 重複チェックボックスのスタイル --- */
.duplicate-checkbox-container {
    display: inline-flex; /* labelとcheckboxをインラインで中央揃え */
    align-items: center;
    gap: 5px; /* labelとcheckboxの間隔 */
}

.duplicate-checkbox-container label {
    font-size: 0.9em;
    color: #495057;
    cursor: pointer;
}

.duplicate-checkbox-container input[type="checkbox"] {
    cursor: pointer;
    /* 必要に応じてチェックボックス自体のスタイルを調整 */
    width: 15px;
    height: 15px;
}

/* --- ハンデ有重複up: 無効時の視覚表現（ラベルに斜線） --- */
.handicap-container {
    position: relative;
}
.handicap-container.is-disabled .handicap-label {
    position: relative;
    opacity: 0.6;
}
.handicap-container.is-disabled .handicap-label::after {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    border-top: 2px solid #cc0000; /* 赤の斜線 */
    transform: rotate(-15deg);
    pointer-events: none;
}

/* --- Hex Grid Layout (調整) --- */
:root {
    --hex-size: 55px; /* 少し小さくして密集感を出す */
    --hex-margin: 15px; /* 隙間も少し狭く */
    --hex-height: calc(var(--hex-size) * 0.866); /* より正確な高さ (sqrt(3)/2) */
    --row-margin-top: calc(var(--hex-height) * -0.5 + var(--hex-margin) * 0.1); /* ネガティブマージン調整 */
}

.hex-grid-container {
    margin-top: calc(var(--hex-height) * 2.5);
    margin-bottom: calc(var(--hex-height) * 2); /* 1.6から3に増やして間隔を広げる */
    margin-left: calc(var(--hex-height) * 0);
    transform: rotate(-60deg);
    transform-origin: center center;
}

.hex-row {
    display: flex;
    justify-content: center;
    margin-top: var(--row-margin-top);
    box-sizing: border-box;
}

.hex-cell {
    width: var(--hex-size);
    height: var(--hex-height);
    background-color: #ffffff; /* デフォルトの背景色 (重複なし or 重複無効時) */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; /* box-shadow追加 */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* セルにもわずかな影 */
    flex-shrink: 0;
    margin-left: var(--hex-margin);
    margin-right: var(--hex-margin);
}
.hex-cell:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* ホバーで影を強調 */
    transform: translateY(-2px); /* ホバーで少し浮き上がる */
}

/* クリック時のアニメーション */
.hex-cell.clicked {
    transform: scale(0.95);
    transition-duration: 0.1s; /* クリック時は素早く反応 */
}

/* --- 重複度に応じた背景色 --- */
/* data-duplicates="1" はデフォルトの #ffffff が適用される */

/* 2個重複: 薄い黄色 (以前のまま or 変更) */
.hex-cell[data-duplicates="2"] { background-color: #fffde4; } /* LemonChiffon */

/* 3個重複: 銅色グラデーション */
.hex-cell[data-duplicates="3"] {
    background-image: linear-gradient(135deg, #e0ba9c 0%, #fff0e2 30%, #e3c9b1 100%); /* Bronze gradient */
}

/* 4個重複: 銀色グラデーション */
.hex-cell[data-duplicates="4"] {
    background-image: linear-gradient(135deg, #a0a0a1 0%, #ffffff 30%, #aba8a8 100%); /* Silver gradient */
}

/* 5個以上重複: 金色グラデーション */
.hex-cell[data-duplicates="5"],
.hex-cell[data-duplicates="6"],
.hex-cell[data-duplicates="7"],
.hex-cell[data-duplicates="8"] { /* 必要に応じてさらに追加 */
    background-image: linear-gradient(135deg, #d4ad00 0%, #f9edc8 30%, #d7b934 100%); /* Gold gradient */
}

/* 色の状態 (重複スタイルより優先) */
.hex-cell.state-white { background-color: #ffffff; }
.hex-cell.state-red {
    background-color: #fe8282;
    background-image: none; /* グラデーションを確実に上書き */
}
.hex-cell.state-blue {
    background-color: #8194fd;
    background-image: none; /* グラデーションを確実に上書き */
}
/* --- 追加: 緑色の状態 --- */
.hex-cell.state-green {
    background-color: #77fa79; /* 緑色 */
    background-image: none; /* グラデーションを確実に上書き */
}
/* --- ここまで追加 --- */

.hex-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; /* バッジ配置の基準にする */
}

.hex-content img {
    max-width: 65%; /* アイコンサイズ微調整 */
    max-height: 65%;
    display: block;
    transform: rotate(60deg);
    /* --- 画像を選択不可にするスタイルを追加 --- */
    user-select: none; /* テキスト選択を無効化 */
    -webkit-user-select: none; /* Safari/Chrome用 */
    -moz-user-select: none; /* Firefox用 */
    -ms-user-select: none; /* IE/Edge用 */
    pointer-events: none; /* マウスイベントのターゲットにならないようにする */
    -webkit-user-drag: none; /* ドラッグを無効化 (WebKit系) */
    /* --- ここまで追加 --- */
}

/* --- ハンデ有重複up バッジ --- */
.badge-label {
    position: absolute;
    bottom: 10px;
    left: -2px;
    transform: rotate(60deg); /* 左下寄せでテキストは正対 */
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 9.5px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}