:root {
    color-scheme: dark;
    --bg: #100e0c;
    --panel: #1a1612;
    --line: rgba(212, 175, 106, 0.35);
    --gold: #e6c98a;
    --gold-deep: #8a6a2f;
    --ink: #f6f1e7;
    --muted: #b3a894;
    --danger: #ff8d8d;
    --ok: #7dffa2;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(212, 175, 106, 0.16), transparent 60%),
        var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", "PingFang HK", "Noto Sans TC", sans-serif;
}

a { color: var(--gold); text-decoration: none; }
code { color: var(--gold); }

.topbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: rgba(16, 14, 12, 0.92);
    position: sticky;
    top: 0;
    z-index: 2;
}

.brand { font-weight: 700; letter-spacing: 0.04em; color: var(--gold); }

.topbar nav { display: flex; gap: 0.4rem; flex: 1; }
.topbar nav a { padding: 0.35rem 0.7rem; border-radius: 999px; color: var(--muted); }
.topbar nav a.active,
.topbar nav a:hover { color: var(--ink); background: rgba(230, 201, 138, 0.12); }

.shell { width: min(1100px, calc(100% - 2rem)); margin: 1.25rem auto 3rem; }

.flash {
    background: rgba(125, 255, 162, 0.12);
    border: 1px solid rgba(125, 255, 162, 0.4);
    color: var(--ok);
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
}

.panel, .login-card {
    margin-top: 1.25rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.1rem 1.2rem 1.3rem;
}

h1, h2, h3 { font-weight: 650; letter-spacing: 0.03em; }
h1 { margin: 0.2rem 0; }
h2 { margin: 0 0 0.4rem; }
.eyebrow { margin: 0; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.75rem; }
.muted { color: var(--muted); }

.login-card { width: min(420px, 100%); margin: 8vh auto; }
.stack { display: grid; gap: 0.75rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

label { display: grid; gap: 0.3rem; font-size: 0.92rem; color: var(--muted); }
.check { display: flex; align-items: center; gap: 0.45rem; }

input, select, button {
    font: inherit;
    color: var(--ink);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="time"],
select {
    width: 100%;
    background: #0d0b09;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}

input[type="file"] { color: var(--muted); }
input[type="color"] { width: 64px; height: 36px; padding: 0; border: 0; background: transparent; }

button {
    background: linear-gradient(#f0d7a2, #c6a15a);
    color: #2a2112;
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-weight: 700;
    cursor: pointer;
}

button.secondary { background: transparent; color: var(--gold); border: 1px solid var(--line); }
button.ghost, button.tiny { background: transparent; color: var(--gold); border: 1px solid var(--line); }
button.tiny { padding: 0.25rem 0.7rem; font-size: 0.82rem; }

.field-error { color: var(--danger); margin: 0.2rem 0; }
.thumb { width: 72px; height: 72px; object-fit: contain; background: #0d0b09; border-radius: 12px; border: 1px solid var(--line); }
.token { font-family: ui-monospace, monospace; }

.house-grid, .score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.house-form, .score-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem;
    background: #120f0c;
}

.score-card { border-color: color-mix(in srgb, var(--house) 55%, transparent); }
.score-card header { display: flex; justify-content: space-between; gap: 0.5rem; }
.inline { display: grid; gap: 0.45rem; margin-top: 0.7rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid rgba(230, 201, 138, 0.15); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }

.board-wrap { margin-top: 0.4rem; }
.board-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    color: var(--gold);
    margin-bottom: 0.8rem;
}
.dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #666; }
.dot.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.off { background: #888; }
#clock { margin-left: auto; font-variant-numeric: tabular-nums; }

.frame {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 236, 190, 0.16), transparent 42%),
        linear-gradient(180deg, #1c140c, #090807 40%);
    border: 2px solid #d4af6a;
    border-radius: 18px;
    padding: 1.2rem 1rem 1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 226, 170, 0.25), 0 20px 50px rgba(0, 0, 0, 0.35);
}

.board-head { text-align: center; }
.board-head h1 {
    margin: 0;
    font-family: "Times New Roman", "PMingLiU", serif;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    letter-spacing: 0.08em;
    color: #f3d48a;
}
.board-head p { margin: 0.2rem 0 0; color: #f6e7c1; letter-spacing: 0.18em; }
.crest { width: 72px; height: 72px; object-fit: contain; margin-bottom: 0.3rem; }

.columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-top: 1.2rem;
    overflow-x: auto;
}

.column { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; min-width: 120px; }
.column.low { margin-top: 3.4rem; }
.column.high { margin-top: 0; }

.hex {
    width: 124px;
    height: 140px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--house) 55%, white), var(--house) 42%, #120806 78%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 1.5rem;
    box-shadow: 0 0 24px color-mix(in srgb, var(--house) 45%, transparent);
}
.hex img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 0.15rem; }
.hex span {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #fff8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.score {
    margin: 0;
    min-width: 5.5rem;
    text-align: center;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--house);
    background: #070605;
    border: 2px solid var(--house);
    border-radius: 8px;
    padding: 0.25rem 0.45rem;
    text-shadow: 0 0 12px var(--house);
}

.board-foot {
    margin-top: 1.1rem;
    text-align: center;
    letter-spacing: 0.14em;
    color: #f3d48a;
    border-top: 1px solid rgba(212, 175, 106, 0.35);
    padding-top: 0.75rem;
    font-size: 0.82rem;
}

.sleep-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; }
    #clock { margin-left: 0; }
    .split, .sleep-row { grid-template-columns: 1fr; display: grid; }
    .column.low { margin-top: 1.4rem; }
}