/* Night sky theme */
:root{--sky:#14161c;--card:rgba(74,79,99,.92);--field:#5d6378;--cream:#f3ead6;--muted:#c4bfb3;--line:rgba(216,176,104,.28);--ink:#efe7d6;--navy:#d8b068}
body{background:var(--sky) url(img/night.webp) center top/1280px auto repeat;color:var(--ink)}
.brand{padding:22px 0 10px}
.brand img{width:96px;height:96px;filter:drop-shadow(0 0 26px rgba(255,236,190,.28))}
.brand h1{color:var(--gold);font-size:30px;letter-spacing:.16em}
.brand p{color:#cdbb94}
.card{background:var(--card);border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.field>label,.field>.label{color:var(--gold)}
input[type=text],input[type=number],input[type=time],select{background-color:var(--field);color:var(--ink);border-color:rgba(255,255,255,.16)}
input::placeholder{color:#c2bcae}
input:disabled,select:disabled{background-color:#1b1d24;color:#6c675e}
select option{background:#5d6378;color:var(--ink)}
.choices input{accent-color:var(--gold)}
.btn-primary{background:linear-gradient(100deg,#b8914a,#ecd08f 45%,#c79a3e);color:#1a1712}
.btn-primary:hover{background:linear-gradient(100deg,#c79a3e,#f6dfa4 45%,#d2a446)}
.btn-ghost{color:var(--gold);border-color:var(--line)}.btn-ghost:hover{background:rgba(216,176,104,.1)}
footer,footer a{color:var(--muted)}
.person h2{color:var(--gold)}
.chart .head,.chart .marker{color:#cdbb94}
.tile.metal,.face.metal{background:#efe9dc;color:#151a35}
.tile.water,.face.water{background:#151a35;color:#f3ead6;border-color:rgba(216,176,104,.45)}
.tile.earth,.face.earth{color:#151a35}
.tile.metal .en,.tile.earth .en{color:#151a35}
.legend .water::before{background:#151a35;box-shadow:0 0 0 1px rgba(216,176,104,.6)}

/* Night navy cards */
:root{--card:rgba(42,51,82,.94);--field:#3b4770;--ink:#eef0f7;--muted:#b7bdd3;--line:rgba(227,194,126,.35)}
.card{color:#eef0f7} .field>label,.field>.label,.person h2,.chart .head,.chart .marker,.cta h3{color:#e3c27e}
.person .dates,.hint,.flip-hint,.legend,.cta p{color:#b7bdd3} .me-line{color:#eef0f7} .me-line strong{color:#e3c27e}
input[type=text],input[type=number],select{background-color:#3b4770;color:#eef0f7;border-color:rgba(227,194,126,.35)}
select option{background:#3b4770;color:#eef0f7} input::placeholder{color:#b7bdd3}
.btn-ghost{color:#e3c27e;border-color:rgba(227,194,126,.35)} .choices{color:#eef0f7}
.loading{background:rgba(20,22,28,.94)} .loading p{color:#e3c27e} .ring circle:first-child{stroke:#3b4770}
