/* ==========================================
   すごろくお金管理表 v3.1 CSS
   修正：
   ① 高さ制御をJSのfitToViewport()に一本化（CSS側のsvh/px高さ指定を撤廃）
   ② サイドバー幅が狭い時に中央が潰れないようminmax調整
   ③ フォントをM PLUS Rounded 1c（数字が太い）に変更
   ⑤ display切り替えをclassベース（.smm-hidden）に統一
   ⑥ 資産サイドバーの名前省略を「P1」形式に
   ⑦ セットアップ画面の表示方式統一
   ========================================== */

/* ③ 数字が太くて読みやすいM PLUS Rounded 1c */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;900&display=swap');

/* ---- ページ全体背景 ---- */
.smm-page-bg {
    /* ゲームコンテンツはそのままで、背景だけ全画面に敷く */
    position: relative;
}

/* 疑似要素で背景を固定表示（pointer-eventsを吸収しない） */
.smm-page-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        url('https://ict-primaryschool-juniorhighschool.com/wp-content/uploads/2026/05/ChatGPT-Image-2026%E5%B9%B45%E6%9C%885%E6%97%A5-14_57_17.jpg')
        center / cover no-repeat;
}

#sugoroku-money-container,
#sugoroku-money-container * {
    box-sizing: border-box;
}

#sugoroku-money-container {
    --smm-cyan:   #00bcd4;
    --smm-cyan-d: #00a6bb;
    --smm-card:   #ffffff;
    --smm-soft:   #f5f7fa;
    --smm-shadow: 0 6px 18px rgba(0,0,0,0.13);
    --smm-gap:    10px;

    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 10px;
    background: var(--smm-cyan); /* シアン単色に戻す */
    border-radius: 18px;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDGothic", "Meiryo", sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#sugoroku-money-container button,
#sugoroku-money-container select {
    font-family: inherit;
}

/* ⑤ display切り替えをclassで管理（!important干渉対策） */
.smm-hidden {
    display: none !important;
}

/* ---- セットアップ画面 ---- */
.smm-setup-screen {
    flex: 1;
    width: 100%;
    background: var(--smm-card);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    min-height: 400px;
}

.smm-setup-screen h2 {
    margin: 0;
    color: #263238;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 900;
}

.smm-subtitle {
    margin: 0;
    color: #607d8b;
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 700;
}

.smm-setup-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.smm-setup-controls label { font-weight: 900; color: #263238; }

.smm-setup-controls select {
    min-width: 110px;
    padding: 10px 14px;
    font-size: 18px;
    font-weight: 900;
    border: 2px solid #cfd8dc;
    border-radius: 10px;
    background: #fff;
}

.smm-start-button {
    background: #1976d2;
    color: #fff;
    border: 0;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: 900;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(25,118,210,.28);
}
.smm-start-button:hover { background: #1565c0; }

/* ---- ゲームエリア ---- */
/* ① 高さはJSが container.style.height で設定する。CSSはflexだけ担当 */
#sugoroku-game-area {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ---- プレイヤータブ ---- */
.smm-player-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.smm-player-tab {
    height: clamp(36px, 5.5vh, 50px);
    border: none;
    color: white;
    cursor: pointer;
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 900;
    opacity: .75;
    transition: transform .15s, opacity .15s;
}
.smm-player-tab.active {
    opacity: 1;
    transform: translateY(-1px);
}

.smm-tab1 { background: #ffa726; }
.smm-tab2 { background: #ef5350; }
.smm-tab3 { background: #7e57c2; }
.smm-tab4 { background: #29b6f6; }
.smm-tab5 { background: #66bb6a; }
.smm-tab6 { background: #ff7043; }
.smm-tab7 { background: #26c6da; }
.smm-tab8 { background: #ff9800; }

/* ---- 3カラム ---- */
.smm-three-col {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: var(--smm-gap);
    align-items: stretch;
}

/* ---- サイドバー共通 ---- */
.smm-sidebar {
    min-height: 0;
    background: var(--smm-card);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--smm-shadow);
}

.smm-sidebar-title {
    flex: 0 0 auto;
    background: var(--smm-cyan-d);
    color: #fff;
    font-size: clamp(14px, 1.6vw, 18px); /* 12-15 → 14-18 */
    font-weight: 900;
    padding: 10px 12px;                   /* 8-10 → 10-12 */
    text-align: center;
}

.smm-history-list,
.smm-ranking-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;                        /* 8 → 10 */
}

/* ---- 履歴 ---- */
.smm-history-empty {
    color: #9e9e9e;
    font-size: 14px;                      /* 12 → 14 */
    text-align: center;
    margin-top: 18px;
    font-weight: 700;
}

.smm-hist-header {
    font-size: 13px;                      /* 11 → 13 */
    font-weight: 900;
    padding: 4px 5px 7px;
    margin-bottom: 5px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.smm-history-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    padding: 7px 8px;                     /* 5-6 → 7-8 */
    margin-bottom: 5px;
    border-radius: 8px;
    border-left: 4px solid #ccc;
}
.smm-history-item.smm-hist-add { background: #e8f5e9; border-left-color: #43a047; }
.smm-history-item.smm-hist-sub { background: #ffebee; border-left-color: #e53935; }

.smm-hist-body  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.smm-hist-turn  { font-size: 12px; color: #78909c; font-weight: 700; margin-bottom: 2px; } /* 10 → 12 */
.smm-hist-amount { font-size: 18px; font-weight: 900; line-height: 1.2; }                  /* 14 → 18 */
.smm-hist-amount.plus  { color: #2e7d32; }
.smm-hist-amount.minus { color: #c62828; }
.smm-hist-balance { font-size: 12px; color: #607d8b; font-weight: 700; }                   /* 10 → 12 */

.smm-hist-del {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #b0bec5;
    font-size: 15px;                      /* 13 → 15 */
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.smm-hist-del:hover { color: #e53935; }

/* ---- ランキング ---- */
.smm-rank-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 8px;                    /* 7-6 → 10-8 */
    margin-bottom: 6px;
    border-radius: 10px;
    background: #f8fafc;
    border: 2px solid transparent;
}
.smm-rank-item.smm-rank-current {
    background: #e0f7fa;
    border-color: #00bcd4;
}

.smm-rank-medal {
    flex: 0 0 26px;                       /* 22 → 26 */
    text-align: center;
    font-size: 20px;                      /* 16 → 20 */
}

.smm-rank-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;                      /* 12 → 15 */
    font-weight: 900;
    color: #455a64;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.smm-rank-dot {
    display: inline-block;
    width: 11px;                          /* 9 → 11 */
    height: 11px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.smm-rank-money {
    flex: 0 0 auto;
    font-size: 15px;                      /* 12 → 15 */
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}
.smm-rank-money.smm-positive { color: #2e7d32; }
.smm-rank-money.smm-negative { color: #c62828; }

/* ---- 中央パネル ---- */
.smm-center-panel {
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--smm-shadow);
}

.smm-panel1 { background: #ffa726; }
.smm-panel2 { background: #ef5350; }
.smm-panel3 { background: #7e57c2; }
.smm-panel4 { background: #29b6f6; }
.smm-panel5 { background: #66bb6a; }
.smm-panel6 { background: #ff7043; }
.smm-panel7 { background: #26c6da; }
.smm-panel8 { background: #ff9800; }

.smm-player-info {
    flex: 0 0 auto;
    color: #fff;
    text-align: center;
    padding: clamp(7px, 1.4vh, 11px) 8px;
    font-size: clamp(17px, 2.2vw, 24px);
    font-weight: 900;
}

.smm-content-area {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--smm-soft);
    border-radius: 0 0 12px 12px;
    padding: clamp(8px, 1.4vh, 12px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 10px);
    overflow: hidden;
}

/* ---- 残高・入力行 ---- */
.smm-money-row,
.smm-input-row {
    flex: 0 0 clamp(80px, 15vh, 110px); /* ② 64-90px → 80-110px */
    min-height: 70px;                   /* ② 56px → 70px */
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    padding: 8px clamp(12px, 2vw, 20px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    overflow: hidden;
}

.smm-money-icon {
    flex: 0 0 auto;
    font-size: clamp(26px, 3.2vw, 38px); /* ② 22-32 → 26-38 */
    margin-right: 8px;
}

.smm-mode-icon {
    flex: 0 0 clamp(44px, 5.4vw, 56px); /* ② 38-50 → 44-56 */
    width:  clamp(44px, 5.4vw, 56px);
    height: clamp(44px, 5.4vw, 56px);
    border-radius: 50%;
    background: #2196f3;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(26px, 3.2vw, 34px); /* ② 22-30 → 26-34 */
    font-weight: 900;
    margin-right: 8px;
    transition: background .2s;
}
.smm-mode-icon.subtract { background: #f44336; }

.smm-money-display,
.smm-input-display {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-weight: 900;
    letter-spacing: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smm-money-display { color: #e53935; font-size: clamp(42px, 7vw, 72px); }  /* ② 34-58 → 42-72 */
.smm-input-display  { color: #9e9e9e; font-size: clamp(36px, 6.2vw, 64px); } /* ② 30-52 → 36-64 */

.smm-currency-label {
    flex: 0 0 auto;
    margin-left: 5px;
    color: #607d8b;
    font-size: clamp(15px, 2vw, 22px); /* ② 13-19 → 15-22 */
    font-weight: 900;
}

/* ---- テンキー（ここだけ伸縮） ---- */
.smm-button-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(5px, 1vh, 9px);
    /* ボタン面積が大きくなりすぎないよう上限 */
    max-height: 90%;
}

.smm-btn {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: none;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    font-size: clamp(18px, 3vw, 36px); /* ② 26-48 → 18-36 */
    transition: transform .08s;
}
.smm-btn span {
    margin-top: 2px;
    font-size: clamp(9px, 1.2vw, 14px); /* ② 11-17 → 9-14 */
    line-height: 1.1;
}
.smm-btn:active { transform: translateY(1px) scale(.99); }

.smm-num,  .smm-unit { background: #fff3c4; color: #263238; }
.smm-num:hover, .smm-unit:hover { background: #ffe082; }
.smm-add { background: #1976d2; color: #fff; }
.smm-add:hover { background: #1565c0; }
.smm-sub { background: #e53935; color: #fff; }
.smm-sub:hover { background: #c62828; }
.smm-del { background: #fb8c00; color: #fff; }
.smm-del:hover { background: #e65100; }
.smm-clr { background: #90a4ae; color: #fff; }
.smm-clr:hover { background: #607d8b; }

/* ---- フッター ---- */
.smm-footer {
    flex: 0 0 auto;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
}

.smm-reset-btn {
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.8);
    color: #fff;
    padding: 5px 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s;
}
.smm-reset-btn:hover { background: rgba(255,255,255,.28); }

/* ---- 低め画面 ---- */
@media (max-height: 760px) {
    #sugoroku-money-container { padding: 8px; }
    #sugoroku-game-area { gap: 6px; }
    .smm-three-col { gap: 8px; }
    .smm-player-tab { height: 34px; font-size: 18px; }
    .smm-player-info { padding: 5px 8px; font-size: 17px; }
    .smm-content-area { padding: 8px; gap: 6px; }
    .smm-money-row, .smm-input-row { flex-basis: 62px; min-height: 54px; }
    .smm-footer { min-height: 28px; }
}

@media (max-height: 660px) {
    .smm-money-row, .smm-input-row { flex-basis: 54px; min-height: 48px; }
    .smm-money-display { font-size: clamp(26px, 4.8vw, 42px); }
    .smm-input-display  { font-size: clamp(24px, 4.2vw, 38px); }
    .smm-mode-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 22px; }
    .smm-money-icon { font-size: 20px; }
    .smm-btn { font-size: clamp(22px, 3.8vw, 38px); }
    .smm-btn span { font-size: 11px; margin-top: 2px; }
}

/* ---- 幅が狭い場合：サイドバーを縮小 ---- */
@media (max-width: 1200px) {
    .smm-three-col { grid-template-columns: 240px minmax(0, 1fr) 240px; }
}

@media (max-width: 1020px) {
    .smm-three-col { grid-template-columns: 200px minmax(0, 1fr) 200px; }
    .smm-rank-money { font-size: 11px; }
}

/* ---- タブレット縦：サイドバーを下に ---- */
@media (max-width: 720px) {
    .smm-three-col {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) 120px 120px;
    }
    .smm-center-panel  { order: 1; }
    .smm-sidebar-left  { order: 2; }
    .smm-sidebar-right { order: 3; }
}

/* ---- スマホ専用（500px以下） ---- */
@media (max-width: 500px) {
    /* コンテナ：画面ぴったりに */
    #sugoroku-money-container {
        width: 100%;
        border-radius: 0;
        padding: 6px;
        margin: 0;
    }

    /* サイドバー非表示、中央だけ表示 */
    .smm-sidebar { display: none; }
    .smm-three-col {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
    }

    /* タブを小さく */
    .smm-player-tab { height: 36px; font-size: 20px; }

    /* プレイヤー名 */
    .smm-player-info { font-size: 16px; padding: 6px; }

    /* 残高・入力行：スマホで適切なサイズに */
    .smm-money-row,
    .smm-input-row {
        flex-basis: 60px;
        min-height: 52px;
        padding: 6px 12px;
        border-radius: 14px;
    }

    .smm-money-icon { font-size: 20px; margin-right: 6px; }

    .smm-mode-icon {
        width: 36px; height: 36px;
        flex-basis: 36px;
        font-size: 20px;
        margin-right: 6px;
    }

    .smm-money-display { font-size: clamp(28px, 9vw, 40px); }
    .smm-input-display  { font-size: clamp(24px, 8vw, 36px); }
    .smm-currency-label { font-size: 13px; }

    /* テンキー：スマホで見やすいサイズ */
    .smm-content-area { padding: 7px; gap: 6px; }
    .smm-button-grid  { gap: 5px; max-height: 100%; }
    .smm-btn          { font-size: clamp(20px, 6.5vw, 30px); border-radius: 8px; }
    .smm-btn span     { font-size: clamp(9px, 2.8vw, 13px); margin-top: 2px; }

    /* フッター */
    .smm-footer { min-height: 30px; }
    .smm-reset-btn { font-size: 12px; padding: 4px 20px; }
}

/* ---- フォーカス ---- */
.smm-btn:focus,
.smm-player-tab:focus,
.smm-start-button:focus,
.smm-reset-btn:focus {
    outline: 3px solid #ffecb3;
    outline-offset: 2px;
}