/*
 * testpro 独自スキン（和風：墨紺×金）
 * ゲーム中のメッセージ枠・名前枠・選択肢を、タイトル/設定と同じ配色でそろえる。
 * 配色トークン(--gold 等)は ui_i18n.css の :root で定義済み。
 * tyrano/tyrano.css の後に読み込む前提（index.htmlで指定）。
 */

/* ===== メッセージウィンドウ（message0 レイヤー） ===== */
.message_outer {
    background:
        linear-gradient(180deg, rgba(22, 30, 50, 0.90), rgba(9, 14, 24, 0.95)) !important;
    background-image:
        linear-gradient(180deg, rgba(22, 30, 50, 0.90), rgba(9, 14, 24, 0.95)) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 10px !important;
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.55),
        inset 0 0 0 3px rgba(9, 14, 26, 0.55),        /* 縁内の暗い溝 */
        inset 0 0 0 4px rgba(194, 162, 102, 0.22),    /* 金の細線＝二重縁 */
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.message_inner {
    color: var(--ivory);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* 名前枠（キャラ名エリア）。画像枠を使わずCSSの金縁札に */
.chara_name_area,
.name_area_naka,
.name_area {
    color: var(--gold-hi) !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85) !important;
    background:
        linear-gradient(180deg, rgba(30, 42, 68, 0.95), rgba(12, 19, 34, 0.97)) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.5),
        inset 0 0 0 2px rgba(194, 162, 102, 0.25) !important;
}

/* ===== 選択肢ボタン（[glink]）＝漆塗り＋金の二重縁 ===== */
.glink_button {
    color: var(--ivory) !important;
    background: linear-gradient(180deg, #202c46, #0e1526) !important;
    border: 1px solid var(--gold) !important;
    border-radius: 6px !important;
    box-shadow:
        inset 0 0 0 2px rgba(9, 14, 26, 0.8),
        inset 0 0 0 3px rgba(194, 162, 102, 0.22),
        0 5px 16px rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    transition: transform 0.14s ease, box-shadow 0.14s ease,
                background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.glink_button:hover {
    color: #fff6e2 !important;
    border-color: var(--gold-hi) !important;
    background: linear-gradient(180deg, #2c3c60, #141e34) !important;
    box-shadow:
        inset 0 0 0 2px rgba(9, 14, 26, 0.6),
        inset 0 0 0 3px rgba(236, 220, 174, 0.45),
        0 0 22px rgba(194, 162, 102, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.55) !important;
    transform: translateY(-2px);
}