/* ========== 基础 ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #eef2ff 100%);
    color: #1e1b4b;
    min-height: 100vh;
}
button { cursor: pointer; font-family: inherit; }
a { text-decoration: none; color: inherit; }
.muted { color: #9ca3af; }
.small { font-size: 12px; }

/* ========== 首页 ========== */
.landing { display: flex; align-items: center; justify-content: center; }
.landing-wrap { text-align: center; padding: 40px 20px; }
.landing-title { font-size: 40px; background: linear-gradient(135deg,#4f46e5,#7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-sub { color: #6b7280; margin: 12px 0 44px; letter-spacing: 4px; }
.landing-cards { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.landing-card {
    width: 320px; background: #fff; border-radius: 20px; padding: 40px 28px;
    box-shadow: 0 12px 40px rgba(79,70,229,.12); transition: transform .2s, box-shadow .2s;
    display: block;
}
.landing-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(79,70,229,.22); }
.landing-icon { font-size: 56px; }
.landing-card h2 { margin: 18px 0 10px; font-size: 22px; }
.landing-card p { color: #6b7280; font-size: 14px; line-height: 1.7; min-height: 46px; }
.landing-btn {
    display: inline-block; margin-top: 20px; padding: 10px 32px; border-radius: 999px;
    color: #fff; font-weight: 700;
}
.player-card .landing-btn { background: linear-gradient(135deg,#0ea5e9,#6366f1); }
.host-card .landing-btn { background: linear-gradient(135deg,#7c3aed,#a855f7); }
.landing-foot { margin-top: 44px; color: #9ca3af; font-size: 13px; }

/* ========== 登录注册 ========== */
.auth-body { display: flex; align-items: center; justify-content: center; }
.auth-box {
    background: #fff; border-radius: 16px; padding: 36px; width: 420px; max-width: 94vw;
    box-shadow: 0 10px 40px rgba(79,70,229,.15);
}
.auth-box h1 { font-size: 22px; margin-bottom: 22px; text-align: center; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.auth-tab { flex: 1; padding: 10px; border: 1px solid #e0e7ff; background: #f5f3ff; border-radius: 8px; font-size: 15px; color: #6b7280; }
.auth-tab.active { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; border-color: transparent; font-weight: 700; }
.auth-box label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: #374151; }
.auth-box input, .auth-box select, .bank-form-box input, .bank-form-box select, .bank-form-box textarea,
.big-select {
    width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.auth-box input:focus, .bank-form-box input:focus, .bank-form-box textarea:focus, .bank-form-box select:focus, .big-select:focus {
    outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.primary-btn {
    width: 100%; margin-top: 20px; padding: 12px; border: 0; border-radius: 8px;
    background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; font-size: 15px; font-weight: 700;
}
.primary-btn.big { padding: 15px; font-size: 17px; margin-top: 12px; }
.primary-btn:active { opacity: .85; }
.ghost-btn {
    display: inline-block; padding: 8px 16px; border: 1px solid #6366f1; color: #4f46e5;
    border-radius: 8px; background: #fff; font-size: 14px;
}
.auth-msg { color: #b91c1c; font-size: 13px; margin-top: 10px; min-height: 18px; }
.auth-back { text-align: center; margin-top: 18px; font-size: 13px; }
.auth-back a { color: #6b7280; }

/* ========== 参与人员端 ========== */
.player-body { padding-bottom: 30px; }
.player-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: #fff; box-shadow: 0 2px 12px rgba(79,70,229,.08);
    position: sticky; top: 0; z-index: 10;
}
.player-me { font-weight: 700; font-size: 16px; }
.my-score { font-weight: 400; color: #6b7280; font-size: 14px; }
.my-score b { color: #4f46e5; font-size: 18px; }
.logout-link { font-size: 13px; color: #9ca3af; }

.player-main { max-width: 860px; margin: 0 auto; padding: 18px; }
.question-panel {
    background: #fff; border-radius: 16px; padding: 26px; min-height: 180px;
    box-shadow: 0 8px 30px rgba(79,70,229,.10); position: relative;
}
.question-empty { color: #9ca3af; text-align: center; line-height: 130px; font-size: 16px; }
.question-meta { display: flex; gap: 10px; margin-bottom: 14px; }
.type-tag { background: #eef2ff; color: #4f46e5; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.q-score { color: #7c3aed; font-size: 13px; line-height: 26px; }
.question-text { font-size: 21px; line-height: 1.7; font-weight: 700; }
.question-options { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.opt-item { background: #f5f3ff; border-radius: 10px; padding: 12px 16px; font-size: 16px; }

.buzz-area { text-align: center; margin: 26px 0; position: relative; }
.buzz-btn {
    width: 220px; height: 220px; border-radius: 50%; border: 0;
    font-size: 30px; font-weight: 800; color: #fff; letter-spacing: 2px;
    background: linear-gradient(135deg,#cbd5e1,#94a3b8);
    box-shadow: 0 12px 30px rgba(100,116,139,.35);
    transition: transform .08s;
}
.buzz-btn.countdown { background: linear-gradient(135deg,#f59e0b,#f97316); box-shadow: 0 12px 30px rgba(249,115,22,.4); }
.buzz-btn.open {
    background: linear-gradient(135deg,#ef4444,#dc2626);
    box-shadow: 0 0 0 0 rgba(239,68,68,.5);
    animation: pulse 1s infinite;
}
.buzz-btn.open:active, .buzz-btn.pressing { transform: scale(.92); }
.buzz-btn.closed { background: linear-gradient(135deg,#94a3b8,#64748b); font-size: 22px; }
.buzz-btn.early { background: linear-gradient(135deg,#f59e0b,#d97706) !important; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    70% { box-shadow: 0 0 0 34px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.buzz-tip { margin-top: 16px; color: #6b7280; font-size: 15px; }
.buzz-tip .win { color: #059669; font-weight: 700; font-size: 17px; }
.buzz-tip .warn { color: #d97706; font-weight: 700; }

.countdown-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 5;
}
.countdown-num {
    font-size: 150px; font-weight: 900; color: #f97316;
    text-shadow: 0 8px 30px rgba(249,115,22,.35);
}
.countdown-num.pop { animation: pop .45s ease; }
.countdown-num.ding { color: #16a34a; font-size: 110px; }
@keyframes pop { 0% { transform: scale(1.6); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }

/* 积分榜 */
.board-panel { background: #fff; border-radius: 16px; padding: 20px 24px; box-shadow: 0 8px 30px rgba(79,70,229,.08); }
.board-panel h3 { margin-bottom: 12px; }
.board-list { list-style: none; }
.board-list li {
    display: flex; align-items: center; padding: 10px 6px; border-bottom: 1px dashed #eef2ff; font-size: 15px;
}
.rank-no {
    width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%;
    background: #e5e7eb; color: #6b7280; font-size: 13px; font-weight: 700; margin-right: 12px;
}
.rank-1 .rank-no { background: #fbbf24; color: #fff; }
.rank-2 .rank-no { background: #9ca3af; color: #fff; }
.rank-3 .rank-no { background: #d97706; color: #fff; }
.rank-name { flex: 1; }
.rank-score { font-weight: 800; color: #4f46e5; font-size: 17px; }
.board-list li.me { background: #eef2ff; border-radius: 8px; }

/* ========== 主持人端 ========== */
.host-header {
    display: flex; align-items: center; gap: 18px; padding: 12px 22px;
    background: #fff; box-shadow: 0 2px 12px rgba(79,70,229,.08);
    position: sticky; top: 0; z-index: 20;
}
.host-title { font-weight: 800; font-size: 18px; white-space: nowrap; }
.host-tabs { display: flex; gap: 6px; flex: 1; }
.host-tab {
    padding: 9px 22px; border: 0; border-radius: 999px; background: #f1f5f9;
    color: #475569; font-size: 15px; font-weight: 600;
}
.host-tab.active { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; }

.tab-page { display: none; padding: 20px; }
.tab-page.active { display: block; }

/* 大屏 */
.stage-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; max-width: 1400px; margin: 0 auto; }
.stage-main {
    background: #fff; border-radius: 18px; padding: 34px; min-height: 480px;
    box-shadow: 0 10px 40px rgba(79,70,229,.1); position: relative; text-align: center;
}
.stage-phase {
    display: inline-block; padding: 5px 18px; border-radius: 999px; font-weight: 700;
    font-size: 15px; margin-bottom: 18px;
}
.stage-phase.idle { background: #f1f5f9; color: #64748b; }
.stage-phase.countdown { background: #fef3c7; color: #d97706; }
.stage-phase.open { background: #fee2e2; color: #dc2626; animation: blink 0.8s infinite; }
.stage-phase.closed { background: #dcfce7; color: #059669; }
@keyframes blink { 50% { opacity: .45; } }
.stage-countdown {
    font-size: 170px; font-weight: 900; color: #f97316; line-height: 1.2;
    text-shadow: 0 10px 40px rgba(249,115,229,.3);
}
.stage-countdown.pop { animation: pop .45s ease; }
.stage-question { text-align: left; margin-top: 10px; }
.stage-question .question-text { font-size: 27px; }
.stage-question .opt-item { font-size: 18px; }
.stage-answer {
    margin-top: 18px; background: #f0fdf4; border: 1px dashed #86efac; color: #166534;
    border-radius: 10px; padding: 12px 16px; text-align: left; font-size: 16px;
}
.stage-winner {
    margin-top: 20px; font-size: 34px; font-weight: 900; color: #059669;
    background: linear-gradient(135deg,#ecfdf5,#f0fdf4); border-radius: 14px; padding: 20px;
}
/* 大屏右上角工具条（选题/答案开关） */
.stage-toolbar {
    position: absolute; top: 20px; right: 24px;
    display: flex; gap: 8px; z-index: 6;
}
.stage-toolbar .ghost-btn { background: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.15); font-weight: 600; }

/* 可隐藏的选题浮窗 */
.picker-panel {
    position: fixed; top: 76px; right: 24px; width: 340px; z-index: 60;
    background: #fff; border-radius: 16px; padding: 20px;
    box-shadow: 0 20px 60px rgba(30,27,75,.25);
    border: 1px solid #e0e7ff;
    animation: pickerIn .18s ease;
}
@keyframes pickerIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.picker-head h3 { font-size: 16px; }
.picker-close {
    width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1;
}
.picker-close:hover { background: #fee2e2; color: #dc2626; }
.picker-tip { margin-top: 10px; line-height: 1.6; }

.stage-side { display: flex; flex-direction: column; gap: 14px; }
.side-block {
    background: #fff; border-radius: 14px; padding: 18px;
    box-shadow: 0 6px 24px rgba(79,70,229,.08);
}
.side-block h3 { font-size: 15px; margin-bottom: 12px; }
.big-select { margin-bottom: 4px; }
.judge-btn {
    display: block; width: 100%; margin-top: 10px; padding: 13px; border-radius: 10px;
    border: 0; font-size: 15px; font-weight: 700; color: #fff;
}
.judge-btn.correct { background: linear-gradient(135deg,#10b981,#059669); }
.judge-btn.wrong { background: linear-gradient(135deg,#f97316,#ea580c); }
.judge-btn.reopen { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.judge-btn.cancel { background: #94a3b8; }
.buzz-order { list-style: none; font-size: 14px; max-height: 180px; overflow-y: auto; }
.buzz-order li { padding: 7px 4px; border-bottom: 1px dashed #eef2ff; }
.buzz-order li.early { color: #d97706; }

/* 题库 */
.bank-grid { display: grid; grid-template-columns: 420px 1fr; gap: 18px; max-width: 1400px; margin: 0 auto; }
.bank-form-box, .bank-list-box {
    background: #fff; border-radius: 16px; padding: 24px;
    box-shadow: 0 8px 30px rgba(79,70,229,.1);
}
.bank-form-box label, .bank-form-box .bank-form-box label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.bank-form-box textarea { resize: vertical; }
.import-row { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.q-list { margin-top: 14px; max-height: 60vh; overflow-y: auto; }
.q-item { border: 1px solid #e0e7ff; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.q-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.q-item-head .q-score { margin-left: auto; }
.q-item-content { font-weight: 700; font-size: 16px; line-height: 1.6; margin-bottom: 6px; }
.q-item-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mini-opt { background: #f5f3ff; border-radius: 6px; padding: 3px 10px; font-size: 13px; }
.q-item-answer { font-size: 13px; color: #166534; }
.mini-start, .mini-del {
    border: 0; border-radius: 6px; padding: 5px 12px; font-size: 13px; color: #fff;
}
.mini-start { background: #6366f1; }
.mini-del { background: #ef4444; }

/* 积分页 */
.score-wrap { max-width: 1100px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 26px; box-shadow: 0 8px 30px rgba(79,70,229,.1); }
.score-toolbar { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.danger-btn { background: #ef4444; color: #fff; border: 0; border-radius: 8px; padding: 10px 20px; font-weight: 700; }
.score-table { width: 100%; border-collapse: collapse; }
.score-table th, .score-table td { padding: 12px 10px; border-bottom: 1px solid #eef2ff; text-align: left; }
.score-table th { background: #f5f3ff; font-size: 14px; }
.uscore { font-weight: 800; color: #4f46e5; font-size: 18px; }
.adj { border: 0; border-radius: 6px; padding: 6px 12px; margin-right: 6px; font-weight: 700; color: #fff; }
.adj.plus { background: #10b981; }
.adj.minus { background: #f97316; }
.adj.custom { background: #6366f1; }
.adjust-cell input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; }

/* ========== 手机适配 ========== */
@media (max-width: 900px) {
    .stage-grid, .bank-grid { grid-template-columns: 1fr; }
    .stage-countdown { font-size: 120px; }
    .stage-main { padding: 22px; min-height: 0; }
    .stage-question .question-text { font-size: 21px; }
    .stage-winner { font-size: 24px; }
    .host-header { flex-wrap: wrap; }
    .host-tabs { order: 3; width: 100%; overflow-x: auto; }
    .question-text { font-size: 18px !important; }
    .buzz-btn { width: 180px; height: 180px; font-size: 25px; }
    .countdown-num { font-size: 110px; }
    .landing-title { font-size: 30px; }
    .adjust-cell { display: flex; flex-wrap: wrap; gap: 6px; }
    .picker-panel { right: 5%; width: 90%; top: 110px; }
    .stage-toolbar { top: 12px; right: 12px; }
}