/* ======================================== */
/*  LAYER 0: 全局基础                        */
/* ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    background: #2a3628;
    font-family: "Noto Serif SC", "SimSun", serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none
}

/* ======================================== */
/*  LAYER 1: 导航栏 (z-index:110)            */
/* ======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: rgba(34, 44, 30, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(180, 200, 140, .22)
}

.navbar .logo {
    font-size: 18px;
    color: #b8cc88;
    letter-spacing: 6px;
    font-weight: bold;
    text-shadow: 0 0 12px rgba(180, 200, 120, .12)
}

.navbar .links {
    display: flex;
    gap: 24px;
    align-items: center
}

.navbar .links span {
    color: #9aaa8a;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 3px;
    transition: color .25s
}

.navbar .links span:hover {
    color: #b8cc88
}

.navbar .vol-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.navbar .vol-icon {
    width: 20px;
    height: 16px;
    border: 2px solid #9aaa8a;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: border-color .25s
}

.navbar .vol-icon::after {
    content: '';
    position: absolute;
    left: -8px;
    top: 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 8px solid #9aaa8a;
    transition: border-right-color .25s
}

.navbar .vol-icon:hover,
.navbar .vol-icon:hover::after {
    border-color: #b8cc88;
    border-right-color: #b8cc88
}

.navbar .vol-icon.muted::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 22px;
    background: #c04040;
    transform: rotate(45deg);
    top: -5px;
    left: 8px;
    z-index: 1
}

.navbar .vol-panel {
    position: absolute;
    right: 0;
    top: 44px;
    background: rgba(24, 32, 20, .97);
    border: 1px solid rgba(180, 200, 140, .3);
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 115
}

.navbar .vol-panel.on {
    opacity: 1;
    pointer-events: auto
}

.navbar .vol-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px
}

.navbar .vol-row:last-child {
    margin-bottom: 0
}

.navbar .vol-label {
    color: #b8cc88;
    font-size: 12px;
    letter-spacing: 1px;
    min-width: 36px;
    text-align: right
}

.navbar .vol-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    background: rgba(180, 200, 140, .25);
    border-radius: 2px;
    outline: none;
    cursor: pointer
}

.navbar .vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b8cc88;
    cursor: pointer;
    border: none
}

.navbar .vol-mute-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 5px 0;
    background: none;
    border: 1px solid rgba(180, 200, 140, .25);
    color: #9aaa8a;
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 14px;
    font-family: inherit;
    transition: all .2s
}

.navbar .vol-mute-btn:hover {
    border-color: #b8cc88;
    color: #b8cc88
}

/* ======================================== */
/*  LAYER 2: 上下遮罩 (z-index:50)           */
/* ======================================== */
.xuan-top,
.xuan-bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 20vh;
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(180deg, #e8e0cc, #f2ead8)
}

.xuan-top {
    top: 0;
    border-bottom: 3px double #8b6914
}

.xuan-top::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 16px;
    width: 14px;
    height: 14px;
    border: 2px solid #8b6914;
    border-radius: 2px
}

.xuan-top::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 16px;
    width: 14px;
    height: 14px;
    border: 2px solid #8b6914;
    border-radius: 2px
}

.xuan-bottom {
    bottom: 0;
    border-top: 3px double #8b6914;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.xuan-bottom::before {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 16px;
    width: 14px;
    height: 14px;
    border: 2px solid #8b6914;
    border-radius: 2px
}

.xuan-bottom::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 16px;
    width: 14px;
    height: 14px;
    border: 2px solid #8b6914;
    border-radius: 2px
}

.xuan-bottom .xuan-op-hint {
    color: #6a5a3e;
    font-size: 13px;
    letter-spacing: 3px
}

.xuan-bottom .xuan-op-debug {
    color: #9a8a6a;
    font-size: 11px;
    letter-spacing: 1px;
    display: none
}

.xuan-bottom.debug-mode .xuan-op-hint {
    display: none
}

.xuan-bottom.debug-mode .xuan-op-debug {
    display: block
}

/* ======================================== */
/*  LAYER 3: Canvas 地图 (z-index:1)         */
/* ======================================== */
#c {
    position: fixed;
    top: 20vh;
    left: 0;
    display: block;
    cursor: grab
}

#c:active {
    cursor: grabbing
}

/* ======================================== */
/*  LAYER 4: 底栏 (z-index:105)              */
/*  独立于遮罩，深色收束底部                  */
/* ======================================== */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 105;
    background: rgba(34, 44, 30, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(180, 200, 140, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;
    cursor: default;
    transition: background .3s
}

.bottom-bar .bb-item {
    color: #8a7a5a;
    font-size: 12px;
    letter-spacing: 2px;
    font-family: "Noto Serif SC", "SimSun", serif
}

.bottom-bar .bb-item.bb-fps {
    color: #6a8a4a
}

.bottom-bar .bb-item.bb-coord {
    color: #8a7a6a
}

.bottom-bar .bb-item.bb-count {
    color: #9a8a5a
}

.bottom-bar.debug-mode .bb-debug {
    display: inline
}

.bottom-bar .bb-debug {
    display: none
}

.bottom-bar .bb-hint {
    display: block
}

.bottom-bar.debug-mode .bb-hint {
    display: none
}

/* ======================================== */
/*  LAYER 5: 对话气泡 (z-index:150)          */
/* ======================================== */

.dc {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 150
}

.db {
    position: absolute;
    background: rgba(255, 252, 240, .95);
    border: 2px solid #8b6914;
    border-radius: 14px;
    padding: 10px 16px;
    min-width: 160px;
    max-width: 280px;
    font-size: 14px;
    color: #3a3226;
    line-height: 1.7;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s
}

.db.on {
    opacity: 1;
    transform: translateY(0)
}

.db::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(255, 252, 240, .95)
}

.toast {
    position: fixed;
    bottom: 14vh;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    background: rgba(0, 0, 0, .82);
    color: #c9a96e;
    padding: 10px 26px;
    border-radius: 22px;
    font-size: 14px;
    letter-spacing: 2px;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s, transform .35s cubic-bezier(.34, 1.56, .64, 1)
}

.toast.on {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px)
}

.so {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(20, 16, 10, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s
}

.so.on {
    opacity: 1;
    pointer-events: auto
}

.sr {
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 5vw;
    transition: gap 1.2s cubic-bezier(.25, .1, .25, 1)
}

.sr.expanded {
    gap: 13vw
}

.sc {
    width: 78px;
    height: 40vh;
    max-height: 600px;
    min-height: 320px;
    background: linear-gradient(180deg, #faf3e6 0%, #f0e4cc 8%, #faf3e6 15%, #f0e4cc 50%, #faf3e6 85%, #f0e4cc 92%, #faf3e6 100%);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    transition: width .9s cubic-bezier(.25, .1, .25, 1);
    box-shadow: inset 0 0 40px rgba(139, 105, 20, .1), 2px 2px 14px rgba(0, 0, 0, .35);
    overflow: hidden;
    flex-shrink: 0
}

.sc:hover {
    width: 360px
}

.sc::before,
.sc::after {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 22px;
    background: linear-gradient(90deg, #6b4a1a, #8B6914 20%, #a07818 50%, #8B6914 80%, #6b4a1a);
    border-radius: 4px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .4);
    z-index: 3
}

.sc::before {
    left: 0
}

.sc::after {
    right: 0
}

.sc .sc-vert {
    display: flex;
    flex-direction: column;
    align-items: center;
    writing-mode: vertical-rl;
    padding: 32px 14px;
    height: 100%;
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity .35s
}

.sc:hover .sc-vert {
    opacity: 0
}

.sc .sc-vert .era {
    color: #8b6914;
    font-size: 13px;
    margin-bottom: 10px
}

.sc .sc-vert .tt {
    font-weight: bold;
    font-size: 17px;
    color: #3a3226;
    letter-spacing: 2px
}

.sc .sc-horiz {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .5s .35s;
    pointer-events: none;
    z-index: 1
}

.sc:hover .sc-horiz {
    opacity: 1;
    pointer-events: auto
}

.sc .sc-horiz .era-h {
    color: #b89a5e;
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 10px
}

.sc .sc-horiz .tt-h {
    font-weight: bold;
    font-size: 20px;
    color: #3a3226;
    margin-bottom: 14px;
    letter-spacing: 2px
}

.sc .sc-horiz .desc-h {
    color: #5a4a2e;
    font-size: 13px;
    line-height: 1.9;
    text-align: center;
    letter-spacing: 1px
}

.scene-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    background: #1a0e05;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s
}

.scene-overlay.on {
    opacity: 1;
    pointer-events: auto
}

.scene-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.scene-canvas.dragging {
    cursor: grabbing
}

.scene-mask {
    position: fixed;
    left: 0;
    right: 0;
    height: 8vh;
    z-index: 259;
    pointer-events: none
}

.scene-mask-top {
    top: 0;
    background: linear-gradient(180deg, #1a0e05 0%, rgba(26, 14, 5, .6) 50%, transparent 100%)
}

.scene-mask-bottom {
    bottom: 0;
    background: linear-gradient(0deg, #1a0e05 0%, rgba(26, 14, 5, .6) 50%, transparent 100%)
}

.scene-back {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 262;
    background: rgba(0, 0, 0, .55);
    color: #c9a96e;
    border: 1px solid rgba(201, 169, 110, .3);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 3px;
    font-family: inherit
}

.scene-title {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 262;
    color: #c9a96e;
    font-size: 18px;
    letter-spacing: 4px;
    pointer-events: none
}

.scene-textbox {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26vh;
    min-height: 160px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .7) 65%, transparent 100%);
    padding: 44px 80px 30px;
    z-index: 261;
    cursor: pointer;
    display: none
}

.scene-textbox .name-tag {
    position: absolute;
    top: -18px;
    left: 80px;
    background: rgba(0, 0, 0, .82);
    border: 1px solid rgba(201, 169, 110, .35);
    padding: 5px 24px;
    border-radius: 4px;
    color: #c9a96e;
    font-size: 14px;
    letter-spacing: 4px
}

.scene-textbox .dialogue {
    font-size: 17px;
    line-height: 2.1;
    letter-spacing: 1.5px;
    color: #f0e4cc;
    min-height: 40px
}

.scene-textbox .dialogue::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 17px;
    background: #c9a96e;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom
}

.scene-textbox .dialogue.done::after {
    display: none
}

.scene-textbox .hint {
    position: absolute;
    bottom: 14px;
    right: 40px;
    color: rgba(255, 255, 255, .25);
    font-size: 11px;
    animation: blink 1.5s infinite
}

.input-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 280;
    background: rgba(0, 0, 0, .72);
    display: none;
    align-items: center;
    justify-content: center
}

.input-modal.on {
    display: flex
}

.input-modal .im-box {
    background: rgba(30, 20, 10, .96);
    border: 2px solid #8b6914;
    border-radius: 14px;
    padding: 28px;
    width: 80%;
    max-width: 600px;
    position: relative
}

.input-modal .im-box .im-name {
    color: #c9a96e;
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 12px
}

.input-modal textarea {
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(201, 169, 110, .25);
    color: #f0e4cc;
    font-size: 15px;
    padding: 12px 16px;
    border-radius: 8px;
    resize: none;
    font-family: inherit;
    outline: none;
    letter-spacing: 1px
}

.input-modal textarea:focus {
    border-color: rgba(201, 169, 110, .6)
}

.input-modal .im-btn {
    display: block;
    margin: 14px 0 0 auto;
    padding: 9px 36px;
    background: linear-gradient(180deg, #8b6914, #5a3a1a);
    border: none;
    color: #f0e4cc;
    font-size: 14px;
    border-radius: 22px;
    cursor: pointer;
    letter-spacing: 4px;
    font-family: inherit
}

.input-modal .im-btn:hover {
    background: linear-gradient(180deg, #a07818, #6b4a1a)
}

.input-modal .im-close {
    position: absolute;
    top: 10px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .4);
    font-size: 20px;
    cursor: pointer
}

.paper-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 270;
    background: rgba(0, 0, 0, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s
}

.paper-overlay.on {
    opacity: 1;
    pointer-events: auto
}

.paper {
    background: linear-gradient(180deg, #faf3e6, #f0e4cc 20%, #faf3e6 50%, #f0e4cc 80%, #faf3e6);
    border: 6px solid #8b6914;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #5a3a1a, 0 0 0 10px rgba(139, 105, 20, .25), 0 24px 60px rgba(0, 0, 0, .65);
    padding: 48px 56px;
    max-width: 620px;
    width: 72%;
    text-align: center;
    position: relative;
    max-height: 70vh;
    overflow-y: auto
}

.paper p {
    color: #3a2e1e;
    font-size: 17px;
    line-height: 2.3;
    letter-spacing: 2px;
    margin-bottom: 20px
}

.paper .paper-btn {
    padding: 10px 36px;
    background: linear-gradient(180deg, #8b6914, #5a3a1a);
    color: #f0e4cc;
    border: none;
    border-radius: 24px;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 3px;
    font-family: inherit;
    margin: 0 6px;
    transition: background .2s
}

.paper .paper-btn:hover {
    background: linear-gradient(180deg, #a07818, #6b4a1a)
}

.paper .paper-btn.minigame {
    background: linear-gradient(180deg, #6b8b14, #3a5a1a)
}

.paper .paper-btn.minigame:hover {
    background: linear-gradient(180deg, #7ba018, #4a6b1a)
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

/* 场景结束选项面板 */
.scene-options-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 275;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
}

.scene-options-overlay.on {
    opacity: 1;
    pointer-events: auto;
}

.scene-options-box {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.scene-options-game-btn,
.scene-options-chat-btn,
.scene-options-leave-btn {
    padding: 16px 60px;
    border-radius: 30px;
    font-size: 18px;
    letter-spacing: 6px;
    cursor: pointer;
    font-family: "Noto Serif SC", "SimSun", serif;
    transition: all .25s;
    border: none;
}

.scene-options-game-btn {
    background: linear-gradient(180deg, #6b8b14, #3a5a1a);
    color: #e8f0cc;
    box-shadow: 0 0 30px rgba(107, 139, 20, .35);
}

.scene-options-game-btn:hover {
    background: linear-gradient(180deg, #7ba018, #4a6b1a);
    box-shadow: 0 0 40px rgba(123, 160, 24, .5);
    transform: scale(1.04);
}

.scene-options-chat-btn {
    background: linear-gradient(180deg, #8b6914, #5a3a1a);
    color: #f0e4cc;
    box-shadow: 0 0 20px rgba(139, 105, 20, .25);
}
.scene-options-chat-btn:hover {
    background: linear-gradient(180deg, #a07818, #6b4a1a);
    box-shadow: 0 0 30px rgba(160, 120, 24, .4);
    transform: scale(1.03);
}

.scene-options-leave-btn {
    background: rgba(255, 255, 255, .08);
    color: #c9a96e;
    border: 1px solid rgba(201, 169, 110, .25);
}

.scene-options-leave-btn:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(201, 169, 110, .5);
}

/* 小游戏全屏容器 */
#gameOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 290;
    background: #1a0e05;
}

.game-close-btn {
    position: fixed;
    top: 12px;
    right: 18px;
    z-index: 295;
    background: rgba(0,0,0,.65);
    color: #c9a96e;
    border: 1px solid rgba(201,169,110,.3);
    padding: 6px 18px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 2px;
    font-family: inherit;
    transition: all .2s;
}
.game-close-btn:hover { background: rgba(180,60,40,.7); color: #f0e4cc; border-color: rgba(200,100,80,.6); }

/* 登录弹窗 */
.login-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 300;
    background: rgba(0,0,0,.78);
    display: none;
    align-items: center;
    justify-content: center;
}
.login-modal.on { display: flex; }
.login-box {
    background: rgba(30,20,10,.96);
    border: 2px solid #8b6914;
    border-radius: 14px;
    padding: 32px 36px;
    width: 360px;
    max-width: 90vw;
}
.login-box h3 { color: #c9a96e; text-align: center; letter-spacing: 4px; margin-bottom: 20px; font-size: 18px; }
.login-box input {
    width: 100%; padding: 12px; margin-bottom: 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(201,169,110,.25);
    color: #f0e4cc; font-size: 15px; border-radius: 8px; outline: none; font-family: inherit;
}
.login-box input:focus { border-color: rgba(201,169,110,.6); }
.login-box .login-btn {
    width: 100%; padding: 12px; margin-top: 6px;
    background: linear-gradient(180deg, #8b6914, #5a3a1a); border: none;
    color: #f0e4cc; font-size: 15px; border-radius: 24px; cursor: pointer;
    letter-spacing: 4px; font-family: inherit; transition: background .2s;
}
.login-box .login-btn:hover { background: linear-gradient(180deg, #a07818, #6b4a1a); }
.login-box .login-switch { text-align: center; margin-top: 12px; color: rgba(255,255,255,.35); font-size: 12px; cursor: pointer; letter-spacing: 1px; }
.login-box .login-switch:hover { color: #c9a96e; }
.login-box .login-close { position: absolute; top: 8px; right: 14px; background: none; border: none; color: rgba(255,255,255,.4); font-size: 18px; cursor: pointer; }
.login-box .login-info { text-align: center; color: #c9a96e; font-size: 13px; letter-spacing: 1px; margin-bottom: 14px; }

/* 雨花茶介绍弹窗 */
.info-popup-overlay {
    position: fixed; top:0; left:0; right:0; bottom:0;
    z-index: 310; background: rgba(0,0,0,.82);
    display: none; align-items: center; justify-content: center;
}
.info-popup-overlay.on { display: flex; }
.info-popup-box {
    background: linear-gradient(180deg, #faf3e6, #f0e4cc 20%, #faf3e6 50%, #f0e4cc 80%);
    border: 4px solid #8b6914; border-radius: 6px;
    box-shadow: 0 0 0 2px #5a3a1a, 0 24px 60px rgba(0,0,0,.6);
    padding: 36px 40px; max-width: 560px; width: 78%;
    max-height: 75vh; overflow-y: auto;
}
.info-popup-box h2 { text-align: center; color: #3a2e1e; font-size: 26px; letter-spacing: 8px; margin-bottom: 6px; }
.info-popup-box .info-subtitle { text-align: center; color: #8b6914; font-size: 13px; letter-spacing: 3px; margin-bottom: 20px; }
.info-popup-box .info-body p { color: #3a2e1e; font-size: 15px; line-height: 2.1; letter-spacing: 1px; margin-bottom: 12px; text-indent: 2em; }
.info-popup-box .info-body strong { color: #5a3a1a; }
.info-popup-close {
    display: block; margin: 20px auto 0; padding: 10px 40px;
    background: linear-gradient(180deg, #8b6914, #5a3a1a); border: none;
    color: #f0e4cc; font-size: 14px; border-radius: 22px;
    cursor: pointer; letter-spacing: 4px; font-family: inherit;
}
.info-popup-close:hover { background: linear-gradient(180deg, #a07818, #6b4a1a); }