@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Shippori+Mincho:wght@500;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Zen Maru Gothic', sans-serif;
    background: #EFEDE1;
    color: #2B2B24;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

.app-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 14px;
    min-height: 100vh;
}

.screen { display: none; }
.screen.active { display: block; }

/* ---------- 共通パネル ---------- */
.hb-panel {
    border: 1px solid #c9c0a8;
    background: #F7F5EC;
    padding: 10px 16px;
    margin-bottom: 10px;
}
.panel-heading {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    margin: 0 0 8px 0;
}
.settings-heading { margin-top: 0; }

/* 見出しの右に「?」ボタンを添えるための行レイアウト（ヒストグラム見出し等で使用） */
.panel-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px 0;
}
.panel-heading-row .panel-heading { margin: 0; }

/* ---------- ヘッダー ---------- */
.game-header { text-align: center; margin-bottom: 10px; }
.hb-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}
.hb-title span {
    display: block;
    font-size: 15px;
    color: #6b6552;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 500;
    margin-top: 2px;
}
.hb-subtitle { font-size: 12px; color: #6b6552; margin-top: 4px; }

/* ---------- 遊び方カード ---------- */
.intro-card { padding: 10px 16px; }
.intro-card-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.intro-card-header .panel-heading { margin: 0; }
.intro-body { margin-top: 10px; }
.intro-card ul { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.7; }
.intro-card strong { color: #2C4F6B; }
.records-toggle-icon { font-size: 11px; color: #6b6552; transition: transform .15s; }
.records-toggle-icon.open { transform: rotate(90deg); }

/* ---------- 設定カード（サイコロ数・同時ウィンドウ数・目標試行回数） ---------- */
.difficulty-card { text-align: center; }
.difficulty-card .settings-heading { text-align: left; }
.settings-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.difficulty-options { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: 100%; }
.diff-option {
    border: 1px solid #b9b09a;
    background: #F7F5EC;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    flex: 1;
    text-align: center;
    min-width: 60px;
}
.diff-option input { position: absolute; opacity: 0; pointer-events: none; }
.diff-option.active { background: #2C4F6B; border-color: #2C4F6B; color: #F7F5EC; font-weight: 700; }
.fast-mode-note { font-size: 11px; color: #6b6552; text-align: left; margin: 6px 2px 0 2px; }

/* ---------- 「止める条件」トグルスイッチ ---------- */
.highlight-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #b9b09a;
    background: #F7F5EC;
    padding: 7px 10px 7px 12px;
    flex: 1;
    min-width: 150px;
}
.highlight-toggle-item.active { border-color: #2C4F6B; }
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input {
    position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2;
}
.toggle-slider {
    position: absolute; inset: 0; background: #c9c0a8; border-radius: 999px; transition: background .15s;
    pointer-events: none;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    left: 3px; top: 3px;
    background: #F7F5EC;
    border-radius: 50%;
    transition: transform .15s;
}
.toggle-switch input:checked + .toggle-slider { background: #2C4F6B; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-item-label { font-size: 13px; flex: 1; text-align: left; }
.calc-help-btn {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid #6b6552;
    background: #F7F5EC;
    color: #6b6552;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.calc-help-btn:hover { background: #2C4F6B; color: #F7F5EC; border-color: #2C4F6B; }

/* ---------- 計算方法ツールチップ（ドラッグ移動可・×で閉じる） ---------- */
.calc-tooltip {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: min(320px, 88vw);
    max-height: 70vh;
    background: #F7F5EC;
    border: 1px solid #2C4F6B;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}
.calc-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #2C4F6B;
    color: #F7F5EC;
    padding: 8px 6px 8px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: grab;
    user-select: none;
}
.calc-tooltip-header:active { cursor: grabbing; }
.calc-tooltip-close {
    background: none;
    border: none;
    color: #F7F5EC;
    font-size: 18px;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
}
.calc-tooltip-close:hover { opacity: 0.7; }
.calc-tooltip-body {
    padding: 10px 14px 12px 14px;
    font-size: 12px;
    line-height: 1.7;
    overflow-y: auto;
}
.calc-tooltip-body p { margin: 0 0 8px 0; }
.calc-tooltip-body p:last-child { margin-bottom: 0; }
.calc-tooltip-body .calc-formula {
    background: #EFEDE1;
    border: 1px dashed #b9b09a;
    padding: 6px 10px;
    text-align: center;
    font-weight: 700;
    margin: 6px 0;
}

/* ---------- サイコロ数スライダー ---------- */
.dice-slider-row { flex-wrap: nowrap; gap: 10px; }
#dice-count-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
    outline: none;
    cursor: pointer;
}
#dice-count-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#dice-count-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#dice-count-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
}
/* ---------- 予測ヒストグラム（スタート画面） ---------- */
.prediction-card { text-align: center; }
.prediction-subtitle { font-size: 11px; color: #6b6552; margin: 0 0 6px 0; text-align: left; }
.histogram-bar-fill-preview { background: #B5652D; }
.zorome-preview {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #6b6552;
    margin-top: 2px;
}
.zorome-preview strong { color: #2C4F6B; }
.dice-count-label {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 118px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- ボタン共通 ---------- */
.hb-btn {
    font-family: 'Zen Maru Gothic', sans-serif;
    border: 1px solid #2C4F6B;
    background: #F7F5EC;
    color: #2B2B24;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 14px;
}
.btn-primary { border-color: #2C4F6B; }
.btn-primary:hover { background: #2C4F6B; color: #F7F5EC; }
.btn-secondary { border-color: #B5652D; color: #B5652D; }
.btn-secondary:hover { background: #B5652D; color: #F7F5EC; }

/* ---------- ゲームHUD ---------- */
.game-hud { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; flex-wrap: wrap; }
.hud-btn { flex-shrink: 0; }
.hud-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-label { font-size: 10px; color: #6b6552; }
.stat-value { font-size: 17px; font-weight: 700; color: #2C4F6B; font-variant-numeric: tabular-nums; }
.game-instruction { font-size: 12px; color: #6b6552; text-align: center; margin-bottom: 10px; }

/* ---------- ぞろ目バナー ---------- */
.zorome-banner {
    background: #fdf1d9;
    border: 1px solid #d8a53d;
    color: #7a5b12;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    animation: zorome-pulse 1.1s ease-in-out infinite;
}
@keyframes zorome-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(216, 165, 61, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(216, 165, 61, 0); }
}
.zorome-luck-detail {
    margin-top: 6px;
    font-weight: 400;
    font-size: 12px;
    color: #6b5410;
    text-align: left;
    display: inline-block;
}
.zorome-luck-line { line-height: 1.6; }
.zorome-luck-rating { font-weight: 700; color: #7a5b12; }
/* 1バッチ内で複数回ハイライトが起きたとき、2件目以降を区切る線 */
.zorome-luck-event-sep {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #d8a53d;
}

/* ---------- コントロール行 ---------- */
.control-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.ctrl-btn { font-size: 12px; padding: 7px 10px; flex: 1; }

/* ---------- トレイエリア ---------- */
.tray-area {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}
.tray-area.cols-1 { grid-template-columns: repeat(1, 1fr); }
.tray-area.cols-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tray-area.cols-5,
.tray-area.cols-10 { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

/* ---------- 1トレイ（サイコロN個＋合計） ---------- */
.dice-tray {
    border: 1px solid #c9c0a8;
    background: #EFEDE1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, box-shadow .2s;
}
.dice-tray.zorome-hit {
    border-color: #d8a53d;
    box-shadow: 0 0 0 2px #d8a53d inset;
    background: #fdf1d9;
}
.dice-tray.rolling { opacity: 0.85; }

.dice-tray-dice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.dice-tray-sum {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    font-variant-numeric: tabular-nums;
}
.dice-tray.zorome-hit .dice-tray-sum { color: #7a5b12; }

/* ---------- 1個のサイコロ（CSSピップ） ---------- */
.die {
    width: 30px;
    height: 30px;
    background: #F7F5EC;
    border: 1px solid #2C4F6B;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 4px;
    flex-shrink: 0;
}
.die .pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2C4F6B;
    justify-self: center;
    align-self: center;
    opacity: 0;
}
.die.rolling {
    animation: die-roll 0.15s linear infinite;
}
@keyframes die-roll {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(8deg) scale(1.05); }
    100% { transform: rotate(0deg); }
}
.dice-tray.zorome-hit .die { border-color: #d8a53d; background: #fffaf0; }
.dice-tray.zorome-hit .die .pip { background: #b5872d; }

/* ピップの配置（一般的なサイコロの目の並び：左上/右上/中左/中央/中右/左下/右下） */
.pip-tl { grid-column: 1; grid-row: 1; }
.pip-tr { grid-column: 3; grid-row: 1; }
.pip-ml { grid-column: 1; grid-row: 2; }
.pip-c  { grid-column: 2; grid-row: 2; }
.pip-mr { grid-column: 3; grid-row: 2; }
.pip-bl { grid-column: 1; grid-row: 3; }
.pip-br { grid-column: 3; grid-row: 3; }

.die[data-value="1"] .pip-c { opacity: 1; background: #c0392b; }
.die[data-value="2"] .pip-tl,
.die[data-value="2"] .pip-br { opacity: 1; }
.die[data-value="3"] .pip-tl,
.die[data-value="3"] .pip-c,
.die[data-value="3"] .pip-br { opacity: 1; }
.die[data-value="4"] .pip-tl,
.die[data-value="4"] .pip-tr,
.die[data-value="4"] .pip-bl,
.die[data-value="4"] .pip-br { opacity: 1; }
.die[data-value="5"] .pip-tl,
.die[data-value="5"] .pip-tr,
.die[data-value="5"] .pip-c,
.die[data-value="5"] .pip-bl,
.die[data-value="5"] .pip-br { opacity: 1; }
.die[data-value="6"] .pip-tl,
.die[data-value="6"] .pip-tr,
.die[data-value="6"] .pip-ml,
.die[data-value="6"] .pip-mr,
.die[data-value="6"] .pip-bl,
.die[data-value="6"] .pip-br { opacity: 1; }

/* ---------- コイントスすごろく：設定スライダー ---------- */
.coin-slider-row { flex-wrap: nowrap; gap: 10px; }
#coin-toss-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
    outline: none;
    cursor: pointer;
}
#coin-toss-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#coin-toss-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#coin-toss-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
}
.coin-toss-label {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 150px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- 1トレイ（コインN個＋最終位置） ---------- */
.coin-tray {
    border: 1px solid #c9c0a8;
    background: #EFEDE1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, box-shadow .2s;
}
.coin-tray.all-same-hit {
    border-color: #d8a53d;
    box-shadow: 0 0 0 2px #d8a53d inset;
    background: #fdf1d9;
}
.coin-tray.rolling { opacity: 0.85; }

.coin-tray-coins {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.coin-tray-position {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    font-variant-numeric: tabular-nums;
}
.coin-tray.all-same-hit .coin-tray-position { color: #7a5b12; }

/* ---------- 1個のコイン（.coin） ---------- */
.coin {
    width: 30px;
    height: 30px;
    background: #F7F5EC;
    border: 1px solid #2C4F6B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #2C4F6B;
    flex-shrink: 0;
}
.coin.rolling {
    animation: die-roll 0.15s linear infinite;
}
/* 表＝赤、裏＝青（色玉と同じ配色）で一目で見分けられるようにする */
.coin[data-value="H"] { background: #c0392b; border-color: #c0392b; color: #F7F5EC; }
.coin[data-value="T"] { background: #2C4F6B; border-color: #2C4F6B; color: #F7F5EC; }
.coin-tray.all-same-hit .coin { border-color: #d8a53d; background: #fffaf0; color: #b5872d; }

.coin-legend-swatch {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin: 0 2px 0 4px;
    vertical-align: middle;
}
.coin-legend-swatch:first-child { margin-left: 0; }
.coin-legend-h { background: #c0392b; }
.coin-legend-t { background: #2C4F6B; }

@media (max-width: 420px) {
    .coin { width: 26px; height: 26px; font-size: 10px; }
    .coin-toss-label { min-width: 130px; font-size: 12px; }
}

/* ---------- じゃんけん：設定スライダー ---------- */
.janken-slider-row { flex-wrap: nowrap; gap: 10px; }
#janken-player-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
    outline: none;
    cursor: pointer;
}
#janken-player-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#janken-player-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#janken-player-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
}
.janken-player-label {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- 1トレイ（参加者N人の手＋勝負の結果） ---------- */
.janken-tray {
    border: 1px solid #c9c0a8;
    background: #EFEDE1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, box-shadow .2s;
}
.janken-tray.all-match-hit {
    border-color: #d8a53d;
    box-shadow: 0 0 0 2px #d8a53d inset;
    background: #fdf1d9;
}
.janken-tray.rolling { opacity: 0.85; }

.janken-tray-hands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.janken-tray-result {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    text-align: center;
}
.janken-tray.all-match-hit .janken-tray-result { color: #7a5b12; }

/* ---------- 1人分の手（.janken-hand） ---------- */
.janken-hand {
    width: 30px;
    height: 30px;
    background: #F7F5EC;
    border: 1px solid #2C4F6B;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.janken-hand.rolling {
    animation: die-roll 0.15s linear infinite;
}
.janken-tray.all-match-hit .janken-hand { border-color: #d8a53d; background: #fffaf0; }

@media (max-width: 420px) {
    .janken-hand { width: 26px; height: 26px; font-size: 14px; }
}

/* ---------- プレゼント交換：設定スライダー ---------- */
.giftswap-slider-row { flex-wrap: nowrap; gap: 10px; }
#giftswap-player-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
    outline: none;
    cursor: pointer;
}
#giftswap-player-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#giftswap-player-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
#giftswap-player-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
}
.giftswap-player-label {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- 1トレイ（参加者N人分のプレゼント＋結果） ---------- */
.gift-tray {
    border: 1px solid #c9c0a8;
    background: #EFEDE1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, box-shadow .2s;
}
.gift-tray.complete-swap-hit {
    border-color: #d8a53d;
    box-shadow: 0 0 0 2px #d8a53d inset;
    background: #fdf1d9;
}
.gift-tray.rolling { opacity: 0.85; }

.gift-tray-gifts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.gift-tray-result {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    text-align: center;
}
.gift-tray.complete-swap-hit .gift-tray-result { color: #7a5b12; }

/* ---------- 1人分のプレゼント（.gift-card） ---------- */
.gift-card {
    width: 32px;
    height: 30px;
    background: #F7F5EC;
    border: 1px solid #2C4F6B;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #2C4F6B;
    flex-shrink: 0;
}
.gift-card.rolling {
    animation: die-roll 0.15s linear infinite;
}
/* 自分の物を受け取ってしまった人（不動点）を個別にマーク */
.gift-card.self-hit {
    border-color: #B5652D;
    background: #f7e2d3;
    color: #B5652D;
}
.gift-tray.complete-swap-hit .gift-card { border-color: #d8a53d; background: #fffaf0; }

@media (max-width: 420px) {
    .gift-card { width: 28px; height: 26px; font-size: 9px; }
}

/* ---------- 色玉・お菓子の取り出し：設定UI ---------- */
.balls-color-list { display: flex; flex-direction: column; gap: 8px; }
.balls-color-row { display: flex; align-items: center; gap: 8px; }
.balls-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #b9b09a;
}
.balls-color-name { font-size: 13px; font-weight: 700; color: #2C4F6B; width: 20px; flex-shrink: 0; }
.balls-color-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
    outline: none;
    cursor: pointer;
}
.balls-color-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
.balls-color-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
.balls-color-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
}
.balls-color-count {
    font-size: 12px;
    font-weight: 700;
    color: #2C4F6B;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.balls-total-note { font-size: 11px; color: #6b6552; text-align: right; margin: 4px 2px 0 2px; }
.balls-mode-note { font-size: 11px; color: #6b6552; text-align: left; margin: 6px 2px 0 2px; }

/* 色スウォッチ・玉本体で共通利用する配色（赤／白／青） */
.balls-color-0, .ball[data-color="0"] { background: #c0392b; }
.balls-color-1, .ball[data-color="1"] { background: #F7F5EC; border-color: #b9b09a; }
.balls-color-2, .ball[data-color="2"] { background: #2C4F6B; }

/* ---------- 1トレイ（引いた玉k個＋内訳） ---------- */
.balls-tray {
    border: 1px solid #c9c0a8;
    background: #EFEDE1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, box-shadow .2s;
}
.balls-tray.all-same-hit {
    border-color: #d8a53d;
    box-shadow: 0 0 0 2px #d8a53d inset;
    background: #fdf1d9;
}
.balls-tray.rolling { opacity: 0.85; }

.balls-tray-balls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.balls-tray-result {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    text-align: center;
}
.balls-tray.all-same-hit .balls-tray-result { color: #7a5b12; }

/* ---------- 1個の玉（.ball） ---------- */
.ball {
    width: 30px;
    height: 30px;
    border: 1px solid #2C4F6B;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #F7F5EC;
    flex-shrink: 0;
}
.ball[data-color="1"] { color: #2C4F6B; }
.ball.rolling {
    animation: die-roll 0.15s linear infinite;
}
.balls-tray.all-same-hit .ball { border-color: #d8a53d; }

@media (max-width: 420px) {
    .ball { width: 26px; height: 26px; font-size: 10px; }
    .balls-color-name { font-size: 12px; }
}

/* ---------- ヒストグラム ---------- */
.histogram-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    border-bottom: 1px solid #b9b09a;
    padding: 6px 2px 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
}
.histogram-bar {
    flex: 1 1 0;
    min-width: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.histogram-bar-track {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* 理論値（期待件数）を示す破線マーカー */
.histogram-bar-expected {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 2px dashed #B5652D;
    display: none;
    pointer-events: none;
}
/* 期待件数の具体的な数字（棒の本数が少ない時だけ表示） */
.histogram-bar-expected-label {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    color: #B5652D;
    transform: translateY(-100%);
    display: none;
    pointer-events: none;
    white-space: nowrap;
}

/* ---------- ヒストグラム凡例 ---------- */
.histogram-legend {
    display: flex;
    gap: 14px;
    justify-content: center;
    font-size: 11px;
    color: #6b6552;
    margin-bottom: 6px;
}
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-swatch { width: 14px; height: 0; display: inline-block; }
.legend-actual { border-top: 3px solid #2C4F6B; }
.legend-expected { border-top: 2px dashed #B5652D; }
.legend-mode { border-top: 3px solid #3F7754; }
.histogram-bar-fill {
    width: 100%;
    background: #2C4F6B;
    border-radius: 2px 2px 0 0;
    min-height: 1px;
    transition: height .2s ease-out;
}
/* 最頻値の棒は「予測（理論値）」の破線と同じオレンジだと見分けが
   つかなくなるため、実測の青・理論値のオレンジのどちらとも被らない
   別系統の色（緑）にする。 */
.histogram-bar.is-mode .histogram-bar-fill { background: #3F7754; }
.histogram-bar-count {
    font-size: 8px;
    color: #6b6552;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.histogram-bar-label {
    font-size: 9px;
    color: #6b6552;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.histogram-bar-label.hidden { visibility: hidden; }

/* ---------- リザルト画面 ---------- */
.result-card { text-align: center; }
.result-best-badge {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.result-stats-1col { grid-template-columns: 1fr; }
.result-stat { border: 1px solid #ded6bd; background: #EFEDE1; padding: 10px 6px; }
.res-label { font-size: 11px; color: #6b6552; margin-bottom: 4px; }
.res-value { font-size: 15px; font-weight: 700; color: #2C4F6B; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-actions .hb-btn { padding: 12px 8px; font-weight: 700; font-size: 13px; }

/* ---------- ハイライト（止める条件）ごとの結果パネル ---------- */
/* 題材ごとに有効な止める条件（0〜複数）の分だけEngineが動的に生成する。 */
.result-highlight-panel { text-align: left; }
.result-highlight-panel .panel-heading { font-size: 13px; text-align: center; }
.result-highlight-panel .result-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }

/* ---------- 理論値との比較パネル ---------- */
.convergence-panel .result-stats { margin-bottom: 10px; }
.convergence-summary-box {
    padding: 8px;
    background: #EFEDE1;
    border: 1px solid #ded6bd;
}
.convergence-summary {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    text-align: center;
}
.convergence-note {
    font-size: 11px;
    font-weight: 400;
    color: #6b6552;
    text-align: left;
    margin: 8px 0 0 0;
}

/* ---------- レスポンシブ調整 ---------- */
@media (max-width: 420px) {
    .die { width: 26px; height: 26px; padding: 3px; }
    .die .pip { width: 4px; height: 4px; }
    .stat-value { font-size: 15px; }
    .dice-count-label { min-width: 100px; font-size: 12px; }
}

/* ---------- あみだくじ：設定UI ---------- */
.amida-slider-row { flex-wrap: nowrap; gap: 10px; }
.amida-range-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
    outline: none;
    cursor: pointer;
}
.amida-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
.amida-range-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2C4F6B;
    border: 2px solid #F7F5EC;
    box-shadow: 0 0 0 1px #2C4F6B;
    cursor: pointer;
}
.amida-range-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #ded6bd;
}
.amida-lines-label {
    font-size: 13px;
    font-weight: 700;
    color: #2C4F6B;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- 1トレイ（あみだくじ図＋着地結果） ---------- */
.amida-tray {
    border: 1px solid #c9c0a8;
    background: #EFEDE1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .2s, box-shadow .2s;
}
.amida-tray.amida-hit {
    border-color: #d8a53d;
    box-shadow: 0 0 0 2px #d8a53d inset;
    background: #fdf1d9;
}
.amida-tray.rolling .amida-tray-svg-wrap { opacity: 0.35; }

.amida-tray-svg-wrap {
    max-width: 100%;
    overflow-x: auto;
    transition: opacity .15s;
}
.amida-svg { display: block; }

.amida-vline { stroke: #b9b09a; stroke-width: 1.5; }
.amida-rung { stroke: #2C4F6B; stroke-width: 2; }
.amida-path {
    fill: none;
    stroke: #B5652D;
    stroke-width: 2;
    stroke-linejoin: round;
    opacity: 0.85;
}
.amida-start-marker { fill: #2C4F6B; }
.amida-end-marker { fill: #B5652D; }
.amida-tray.amida-hit .amida-path { stroke: #d8a53d; }
.amida-tray.amida-hit .amida-end-marker { fill: #d8a53d; }

.amida-tray-result {
    font-size: 12px;
    font-weight: 700;
    color: #2C4F6B;
    text-align: center;
}
.amida-tray.amida-hit .amida-tray-result { color: #7a5b12; }

@media (max-width: 420px) {
    .amida-lines-label { min-width: 50px; font-size: 12px; }
    .amida-tray-result { font-size: 11px; }
}

/* ---------- 題材選択画面 ---------- */
.topic-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.topic-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
    width: 100%;
}
.topic-tile:hover { background: #2C4F6B; color: #F7F5EC; }
.topic-tile:hover .topic-tile-desc { color: #dfe6ec; }
.topic-emoji { font-size: 28px; flex-shrink: 0; }
.topic-tile-text { display: flex; flex-direction: column; gap: 2px; }
.topic-tile-label { font-weight: 700; font-size: 15px; }
.topic-tile-desc { font-size: 11px; color: #6b6552; }

/* ---------- 開始画面：題材選び直しボタン ---------- */
.back-btn {
    font-size: 12px;
    padding: 5px 10px;
    margin-bottom: 8px;
}

/* ---------- ホーム（メニュー）に戻るリンク ---------- */
.back-home-container {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 12px;
}

.back-link {
    color: #6b6552;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: #2B2B24;
    text-decoration: underline;
}