* {
    box-sizing: border-box;
}


body {

    margin:0;

    min-height:100vh;

    background:
    radial-gradient(circle at top,#3b2b1b,#120d08 70%);

    color:#f5e6c8;

    font-family:
    "Microsoft JhengHei",
    "Noto Serif TC",
    serif;

}



.game-container {

    max-width:900px;

    margin:auto;

    padding:20px;

}



header {

    text-align:center;

    padding:20px;

    border-bottom:1px solid rgba(255,220,150,.3);

}


header h1 {

    font-size:36px;

    color:#ffd98a;

    text-shadow:
    0 0 10px #8b5a20;

}


header p {

    color:#cbb58a;

}



.panel {

    margin:20px 0;

    padding:20px;


    background:

    linear-gradient(
        135deg,
        rgba(80,55,30,.95),
        rgba(35,25,15,.95)
    );


    border:

    1px solid #80602d;


    border-radius:12px;


    box-shadow:

    inset 0 0 20px rgba(0,0,0,.6),
    0 5px 20px rgba(0,0,0,.5);


}



h2 {

    margin-top:0;

    color:#ffd98a;

    border-bottom:

    1px solid rgba(255,220,150,.25);

    padding-bottom:8px;

}



input,
textarea,
select {


    width:100%;

    margin:8px 0;

    padding:12px;


    background:#171009;

    color:#ffe9b5;


    border:

    1px solid #80602d;


    border-radius:8px;


    font-size:16px;


}


textarea {

    min-height:80px;

    resize:vertical;

}



button {


    width:100%;


    padding:12px;


    margin-top:10px;


    background:

    linear-gradient(
        180deg,
        #a66b22,
        #633b12
    );


    color:white;


    border:

    1px solid #dca957;


    border-radius:8px;


    cursor:pointer;


    font-size:17px;


    font-weight:bold;


}


button:hover {

    filter:brightness(1.2);

}


button.danger {

    background:

    linear-gradient(
        180deg,
        #9b2525,
        #4b1111
    );

}



.hidden {

    display:none;

}



#map {

    width:100%;

    aspect-ratio:1;

    background:

    radial-gradient(
        circle,
        rgba(255,220,120,.08),
        transparent
    );


    border-radius:12px;


    overflow:hidden;

}


svg {

    width:100%;

    height:100%;

}


.map-link {


    stroke:#80602d;

    stroke-width:0.8;

    opacity:.7;


}


.map-node {


    fill:#d49a36;

    stroke:#ffe8a0;

    stroke-width:.8;

    cursor:pointer;


}


.map-node:hover {


    fill:#fff0a6;


}


.node-label {


    fill:#ffe9b5;

    font-size:4px;

    text-anchor:middle;


}



.status-item {


    display:flex;

    justify-content:space-between;

    padding:5px 0;


}



#action-list {


    list-style:none;

    padding:0;

}


#action-list li {


    background:

    rgba(0,0,0,.25);


    margin:6px 0;


    padding:10px;


    border-radius:6px;


}



.chapter-content {


    line-height:1.8;

    white-space:pre-line;


}



#chapter-content {


    white-space:pre-line;

    line-height:1.9;


}



.ability-card {


    margin:10px 0;

    padding:15px;


    border:

    1px solid #a77b35;


    background:

    rgba(0,0,0,.3);


    cursor:pointer;


    border-radius:8px;


}


.ability-card:hover {

    background:

    rgba(170,120,40,.3);

}



button:disabled {

    opacity:.45;

    cursor:not-allowed;

    filter:grayscale(.6);

}


.hint {

    color:#cbb58a;

    font-size:14px;

}


#chapter-list {

    margin-bottom:15px;

}


.chapter-link {

    width:auto;

    display:inline-block;

    margin:4px 6px 4px 0;

    padding:8px 12px;

    font-size:14px;

}


@media(max-width:600px){


    .game-container {

        padding:10px;

    }


    header h1 {

        font-size:28px;

    }


    .panel {

        padding:15px;

    }


}

/* 語言切換 + 章節插畫 */
#lang-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 12px;
    font-size: 0.85em;
    cursor: pointer;
}
header { position: relative; }
.chapter-img {
    max-width: 100%;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
}

/* 轉生背景表單 */
#backstory-form input, #backstory-form select {
    margin: 4px 6px 4px 0;
    padding: 6px 8px;
}
#backstory-form .bs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
#bs-age { width: 70px; }