* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: #2b2b2b;
    background: #f5f7fa;
    line-height: 1.6;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 16px; }

.site-header { background: #1f2d3d; color: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 18px; }
.nav a { color: #cfd8e3; text-decoration: none; margin-left: 18px; font-size: 14px; }
.nav a:hover { color: #fff; }

.site-footer { margin-top: 40px; padding: 20px 0; color: #8a94a6; font-size: 13px; }

.hero { text-align: center; padding: 56px 0 32px; }
.hero h1 { font-size: 32px; margin: 0 0 12px; }
.subtitle { font-size: 18px; color: #5a6b7b; margin: 0 0 12px; }
.tagline { font-size: 14px; color: #8a94a6; }

.panel {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
}
.panel h2 { margin-top: 0; }

.meta-table { width: 100%; border-collapse: collapse; }
.meta-table th, .meta-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eef1f5; }
.meta-table th { width: 140px; color: #5a6b7b; font-weight: 600; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 13px; }
.badge.ok { background: #e3f6ec; color: #0b7a3b; }
.badge.err { background: #fdeaea; color: #c0392b; }

.db-error { display: block; margin-top: 6px; font-size: 12px; color: #c0392b; word-break: break-all; }

.btn {
    display: inline-block;
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: #1f2d3d;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: #2b3f55; }
.btn-block { width: 100%; }

.muted { color: #8a94a6; }
.alert {
    background: #fdeaea;
    color: #c0392b;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
}

/* 登錄页 */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { width: 320px; background: #fff; border: 1px solid #e3e8ee; border-radius: 8px; padding: 28px; }
.login-box h1 { margin: 0 0 20px; font-size: 20px; }
.login-box label { display: block; font-size: 14px; margin-bottom: 14px; }
.login-box input {
    display: block; width: 100%; margin-top: 6px; padding: 8px 10px;
    border: 1px solid #ccd4dd; border-radius: 6px; font-size: 14px;
}
.back { text-align: center; margin-top: 16px; font-size: 13px; }
.back a { color: #5a6b7b; }

/* ========== 遊戲流程 ========== */
.play-hero { text-align: center; padding: 40px 0 8px; }
.play-hero h1 { font-size: 28px; margin: 0 0 8px; }

.start-form .panel h2 { font-size: 16px; }

.grade-tabs { display: flex; gap: 12px; margin: 12px 0; }
.grade-tab { position: relative; }
.grade-tab input { position: absolute; opacity: 0; }
.grade-tab span {
    display: inline-block; padding: 8px 28px; border: 1px solid #ccd4dd;
    border-radius: 6px; cursor: pointer; font-size: 14px;
}
.grade-tab input:checked + span { background: #1f2d3d; color: #fff; border-color: #1f2d3d; }

.multi-tabs { display: flex; gap: 12px; margin: 12px 0 20px; }
.multi-tab {
    display: inline-block; padding: 8px 28px; border: 1px solid #ccd4dd;
    border-radius: 6px; cursor: pointer; font-size: 14px;
    background: #fff; color: #1f2d3d; font-family: inherit;
}
.multi-tab:hover { border-color: #8a94a6; }
.multi-tab.is-active { background: #1f2d3d; color: #fff; border-color: #1f2d3d; }

.char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
.char-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border: 1px solid #e3e8ee; border-radius: 8px; cursor: pointer; }
.char-card input { position: absolute; opacity: 0; }
.char-card:hover { border-color: #8a94a6; }
.char-card input:checked + .char-avatar { border-color: #1f2d3d; background: #1f2d3d; color: #fff; }
.char-avatar {
    width: 64px; height: 64px; border-radius: 50%; border: 2px solid #e3e8ee;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #5a6b7b; background: #f0f3f6;
}
.char-name { font-size: 14px; }

.text-input {
    display: block; width: 100%; margin-top: 6px; padding: 8px 10px;
    border: 1px solid #ccd4dd; border-radius: 6px; font-size: 14px;
}

.start-actions, .level-actions, .result-actions { text-align: center; margin: 24px 0; }
.btn-big { padding: 12px 36px; font-size: 16px; }
.btn-ghost { background: #fff; color: #1f2d3d; border: 1px solid #ccd4dd; }
.btn-ghost:hover { background: #f0f3f6; }

.play-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.play-progress { flex: 1; }
.play-progress-label { font-size: 13px; color: #5a6b7b; }
.progress-track { height: 8px; background: #e3e8ee; border-radius: 4px; margin-top: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: #1f2d3d; border-radius: 4px; transition: width 0.3s; }
.play-balance { font-size: 14px; color: #5a6b7b; white-space: nowrap; }
.play-balance strong { color: #2b2b2b; }

.level-panel .level-title { display: flex; align-items: center; gap: 10px; }
.level-panel h2 { margin: 0; }
.level-badge { background: #1f2d3d; color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 12px; }
.level-scenario { font-size: 15px; line-height: 1.8; }
.level-hint { font-size: 13px; color: #b7791f; background: #fdf6e3; padding: 8px 12px; border-radius: 6px; }

.level-fee { font-size: 13.5px; color: #5a6b7b; }
.level-fee strong { color: #d6336c; }
.level-fee-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.level-fee-total { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #e3e8ee; font-weight: 600; }
.level-fee-total strong { color: #d6336c; }

.disturbance-banner {
    display: flex; flex-direction: column; gap: 4px;
    background: #fdeaea; border: 1px solid #f3c1c1; color: #a93226;
    padding: 12px 16px; border-radius: 8px; margin-top: 14px; font-size: 14px;
}

.option-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.option-card {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 16px; border: 1px solid #e3e8ee; border-radius: 8px; cursor: pointer; background: #fff;
}
.option-card:hover { border-color: #8a94a6; }
.option-card input { position: absolute; opacity: 0; }
.option-card input:checked ~ .option-method { background: #1f2d3d; color: #fff; }
.option-method {
    min-width: 96px; text-align: center; padding: 6px 10px;
    border: 1px solid #1f2d3d; border-radius: 6px; color: #1f2d3d; font-size: 13px; font-weight: 600;
}
.option-desc { flex: 1; font-size: 14px; }
.option-tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; }
.option-tag.err { background: #fdeaea; color: #c0392b; }
.option-card.is-disabled { opacity: 0.5; cursor: not-allowed; }

.result-hero { text-align: center; padding: 36px 0 8px; }
.result-hero h1 { font-size: 24px; margin: 0 0 8px; }
.personality {
    display: inline-block; font-size: 30px; font-weight: 700;
    background: linear-gradient(135deg, #1f2d3d, #4a5d73);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.radar { width: 100%; max-width: 260px; display: block; margin: 0 auto; }

.alloc-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.alloc-name { width: 100px; font-size: 13px; color: #5a6b7b; }
.alloc-track { flex: 1; height: 12px; background: #eef1f5; border-radius: 6px; overflow: hidden; }
.alloc-fill { display: block; height: 100%; background: #1f2d3d; border-radius: 6px; }
.alloc-val { width: 150px; text-align: right; font-size: 13px; color: #2b2b2b; }

/* 逐關回顾 */
.review-item { padding: 12px 14px; border: 1px solid #e3e8ee; border-radius: 8px; background: #fafbfc; margin-bottom: 10px; }
.review-head { font-weight: 700; margin-bottom: 6px; }
.review-row { font-size: 14px; }
.tag.ok { background: #e3f6ec; color: #0b7a3b; font-size: 12px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; }

/* 結業式 */
.cert {
    text-align: center; border: 3px double #1f2d3d; border-radius: 12px;
    padding: 36px 24px; margin-top: 24px; position: relative; background: #fff;
}
.cert-badge { display: inline-block; background: #b7791f; color: #fff; font-size: 13px; padding: 4px 16px; border-radius: 12px; letter-spacing: 2px; }
.cert-title { font-size: 26px; margin: 14px 0 6px; }
.cert-name { font-size: 20px; margin: 0 0 12px; color: #1f2d3d; font-weight: 700; }
.cert-text { max-width: 520px; margin: 0 auto; font-size: 15px; line-height: 1.8; }
.cert-quote { font-size: 14px; color: #8a94a6; margin-top: 16px; }

.promise-list { padding-left: 20px; line-height: 2; }

@media (max-width: 720px) {
    .char-grid { grid-template-columns: repeat(2, 1fr); }
    .result-grid { grid-template-columns: 1fr; }
}

/* ========== 管理後台 ========== */
.admin-body { display: flex; min-height: 100vh; }
.admin-side {
    width: 200px; flex-shrink: 0; background: #1f2d3d; color: #fff;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.admin-brand { padding: 18px 16px; font-weight: 700; font-size: 15px; border-bottom: 1px solid #2b3f55; }
.admin-nav { flex: 1; padding: 10px 0; }
.admin-nav a { display: block; color: #cfd8e3; text-decoration: none; padding: 10px 16px; font-size: 14px; }
.admin-nav a:hover { background: #2b3f55; color: #fff; }
.admin-side-foot { padding: 14px 16px; border-top: 1px solid #2b3f55; }
.admin-side-foot a { display: block; color: #cfd8e3; text-decoration: none; font-size: 13px; padding: 4px 0; }
.admin-side-foot a:hover { color: #fff; }

.admin-main { flex: 1; min-width: 0; padding: 20px 24px 40px; background: #f5f7fa; }
.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.admin-top h1 { font-size: 20px; margin: 0; }
.admin-user { font-size: 13px; color: #5a6b7b; }
.admin-flash { margin: 0 0 14px; }

.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-card {
    display: flex; flex-direction: column; gap: 6px; padding: 16px;
    border: 1px solid #e3e8ee; border-radius: 8px; background: #fff;
    color: #2b2b2b; text-decoration: none;
}
.admin-card:hover { border-color: #1f2d3d; }
.admin-card-title { font-weight: 700; }
.admin-card-desc { font-size: 13px; color: #8a94a6; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eef1f5; font-size: 13px; vertical-align: middle; }
.data-table th { color: #5a6b7b; font-weight: 600; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #a93226; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: flex; flex-direction: column; font-size: 13px; color: #5a6b7b; gap: 6px; }
.form-grid input, .form-grid select, .form-grid textarea {
    padding: 8px 10px; border: 1px solid #ccd4dd; border-radius: 6px; font-size: 14px; color: #2b2b2b;
}
.check-row { flex-direction: row !important; align-items: center; gap: 10px !important; }
.check-row input { width: 18px; height: 18px; }

.effect-json { font-size: 11px; color: #5a6b7b; word-break: break-all; }
.grade-tab a { text-decoration: none; }
.grade-tab.is-active span { background: #1f2d3d; color: #fff; border-color: #1f2d3d; }

/* ========== 跨場排行榜 ========== */
.leaderboard-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.leaderboard-tabs .btn-active { background: #1f2d3d; color: #fff; border-color: #1f2d3d; }
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #f5f7fa; border: 1px solid #e3e8ee; border-radius: 8px;
}
.filter-bar label { display: flex; flex-direction: column; font-size: 12px; color: #5a6b7b; gap: 4px; }
.filter-bar select, .filter-bar input {
    padding: 6px 8px; border: 1px solid #ccd4dd; border-radius: 6px; font-size: 13px; color: #2b2b2b;
}
.checkbox-inline { flex-direction: row !important; align-items: center; gap: 6px !important; }
.rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700;
    color: #fff;
}
.rank-1 { background: #f6c344; }
.rank-2 { background: #b9c2cc; }
.rank-3 { background: #d08a5b; }

/* ========== 房间玩家列表 ========== */
.room-players {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
}
.room-player {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e3e8ee; border-radius: 8px;
    background: #fafbfc;
}
.room-player.is-me { border-color: #1f2d3d; background: #f0f4f9; }
.room-player.is-host { border-left: 4px solid #f6c344; }
.player-presence {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: #c0392b;
}
.player-presence[data-online="1"] { background: #0b7a3b; }
.player-name { font-weight: 700; }
.player-nick { color: #8a94a6; font-size: 13px; }
.player-tag { padding: 1px 8px; border-radius: 10px; font-size: 12px; }
.player-tag.host { background: #fef3d7; color: #b07d1a; }
.player-tag.me { background: #e8eef7; color: #1f2d3d; }
.player-status { margin-left: auto; font-size: 13px; }
.player-status[data-status="done"] { color: #0b7a3b; }
.player-status[data-status="wait"] { color: #8a94a6; }

@media (max-width: 900px) {
    .admin-body { flex-direction: column; }
    .admin-side { width: 100%; height: auto; position: static; }
    .admin-nav a { display: inline-block; }
    .admin-cards { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}

/* ========== 後台帳務管理 ========== */
.accounting-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    cursor: pointer; font-size: 14px;
}
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.accounting-summary .room-code { font-weight: 700; }
.accounting-player { margin: 12px 0 0 12px; }
.accounting-player summary {
    cursor: pointer; padding: 8px 10px; background: #f5f7fa;
    border: 1px solid #e3e8ee; border-radius: 6px; font-size: 13px;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.accounting-player-name { font-weight: 700; }
.accounting-player .data-table { margin-top: 8px; }
.accounting-player .data-table .option-tag { color: #b07d1a; font-weight: 600; }

/* ========== 前台背景音乐開關 ========== */
.bgm-toggle {
    position: fixed; right: 18px; bottom: 18px; z-index: 50;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid #ccd4dd; background: #fff; color: #1f2d3d;
    font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(31, 45, 61, 0.18);
    font-family: inherit;
}
.bgm-toggle:hover { background: #f0f3f6; }
.bgm-toggle.is-muted { color: #8a94a6; }

/* ========== 結業式：毕業合照 / 角色留言 / 樱花瓣 ========== */
.graduation-photo {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 14px;
}
.photo-member { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.85; }
.photo-member.is-me { opacity: 1; transform: scale(1.12); }
.photo-member .char-avatar { width: 56px; height: 56px; font-size: 22px; }
.photo-member.is-me .char-avatar { border-color: #f6c344; background: #fef3d7; }
.photo-member-name { font-size: 12px; color: #5a6b7b; }
.photo-tag { font-size: 11px; color: #b07d1a; }

.message-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.message-card {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; border: 1px solid #e3e8ee; border-radius: 8px; background: #fafbfc;
}
.message-card .char-avatar { width: 40px; height: 40px; font-size: 16px; flex-shrink: 0; }
.message-card.is-me { border-color: #1f2d3d; background: #f0f4f9; }
.message-body .message-who { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.message-body .message-text { font-size: 14px; line-height: 1.7; }

.petals { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }
.petal {
    position: absolute; top: -24px;
    width: 10px; height: 14px;
    background: linear-gradient(135deg, #f9c6d0, #f2a5b5);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
    animation: petal-fall linear infinite;
}
@keyframes petal-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: 0.9; }
    100% { transform: translate3d(-80px, 108vh, 0) rotate(420deg); opacity: 0.5; }
}

/* ========== 序幕：對話舞台 ========== */
.dialog-stage { display: flex; gap: 18px; align-items: flex-end; cursor: pointer; min-height: 320px; }
.dialog-portrait { flex: 0 0 auto; }
.dialog-portrait .char-avatar { width: 120px; height: 120px; font-size: 48px; }
.dialog-box { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.dialog-name { font-weight: 900; margin-bottom: 6px; font-size: 1.05rem; }
.dialog-text { font-size: 1.12rem; min-height: 3.2em; margin: 0; }
.dialog-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.dialog-tip { color: #8a94a6; font-size: .85rem; animation: floaty 1.8s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tw-cursor::after { content: "▍"; margin-left: 2px; color: #b7791f; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 560px) {
    .dialog-stage { flex-direction: column; align-items: center; text-align: center; min-height: 0; }
    .dialog-portrait .char-avatar { width: 84px; height: 84px; font-size: 34px; }
    .dialog-box { justify-content: flex-start; }
}