/* 九龙夺嫡 · 样式 v2 — 故事驱动版 */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Noto Serif SC', 'Source Han Serif SC', 'STSong', serif;
       background: #0a0a12; color: #c8c8c8; min-height: 100vh;
       background-image: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a12 70%); }
#app, #gm-app { max-width: 800px; margin: 0 auto; padding: 12px 16px; }

/* ===== 加入画面 ===== */
.title-block { text-align: center; padding: 40px 0 20px; }
.title-block h1 { font-size: 32px; color: #d4a84b; text-shadow: 0 0 30px rgba(212,168,75,0.2);
                  letter-spacing: 6px; font-weight: 700; }
.subtitle { color: #777; font-size: 14px; margin-top: 10px; line-height: 1.6; }
.join-form { max-width: 380px; margin: 20px auto; display: flex; flex-direction: column; gap: 10px; }

/* ===== 屏幕切换 ===== */
.screen { display: none; }
.screen.active { display: block; }

/* ===== 通用控件 ===== */
.input { background: #16162a; border: 1px solid #2a2a40; border-radius: 6px;
         padding: 10px 14px; color: #ddd; font-size: 14px; outline: none; transition: border 0.2s; }
.input:focus { border-color: #d4a84b; }
select.input { cursor: pointer; }
textarea.input { resize: vertical; font-family: inherit; }

.btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; cursor: pointer;
       font-weight: 600; transition: all 0.2s; }
.btn-primary { background: #d4a84b; color: #1a1a1a; }
.btn-primary:hover { background: #e4b85b; }
.btn-secondary { background: #333; color: #aaa; border: 1px solid #555; }
.btn-secondary:hover { background: #444; color: #fff; }

/* ===== 游戏界面 ===== */
.game-header { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; 
               border-bottom: 1px solid #1a1a2a; margin-bottom: 10px; }
.game-title { font-size: 18px; color: #d4a84b; letter-spacing: 3px; font-weight: 700; }
.badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-family: sans-serif; }
.badge.action { background: #1a3a5a; color: #8ab; }
.badge.court { background: #5a4a1a; color: #da8; }
.badge.ended { background: #5a1a1a; color: #f88; }
.round { font-size: 13px; color: #666; }
.header-btn { margin-left:auto; font-size:11px; background:#222; color:#d4a84b;
              border:1px solid #3a3a3a; padding:4px 10px; border-radius:4px; cursor:pointer; }
.header-btn:hover { background:#333; }

/* ===== 故事主区域 ===== */
.story-area { background: #0e0e1e; border: 1px solid #1a1a2e; border-radius: 8px;
              padding: 16px; min-height: 200px; max-height: 340px; overflow-y: auto;
              margin-bottom: 10px; line-height: 1.8; font-size: 14px; }
.story-line { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.story-line:last-child { border-bottom: none; }
.story-system { color: #555; font-style: italic; font-size: 12px; }
.story-narrator { color: #b8b8c8; }
.story-player { color: #d4a84b; }
.story-gm { color: #8ab; }
.story-event { color: #e8a040; }
.story-warning { color: #e06040; background: rgba(200,60,40,0.08); padding: 4px 8px; border-radius: 4px; border-left: 2px solid #e06040; }
.story-divider { text-align: center; color: #333; padding: 6px 0; font-size: 12px;
                 letter-spacing: 4px; }

/* ===== 行动卡片选择 ===== */
.action-panel { margin: 8px 0; }
.action-hint { color: #888; font-size: 13px; margin-bottom: 8px; line-height: 1.5; font-style: italic; }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.location-card { background: #121226; border: 1px solid #222244; border-radius: 8px;
                 padding: 10px 12px; cursor: pointer; transition: all 0.2s; }
.location-card:hover { background: #1a1a36; border-color: #d4a84b; transform: translateY(-1px); }
.location-card:active { transform: scale(0.98); }
.location-card .icon { font-size: 20px; display: block; margin-bottom: 2px; }
.location-card .name { font-size: 14px; color: #d4a84b; font-weight: 600; }
.location-card .desc { font-size: 11px; color: #777; margin-top: 2px; }
.location-card.selected { border-color: #d4a84b; background: #1a1a36; box-shadow: 0 0 10px rgba(212,168,75,0.1); }

/* 二级选择（具体行动） */
.action-options { margin-top: 8px; background: #0e0e1e; border: 1px solid #2a2a3a; border-radius: 8px; padding: 10px; display: none; }
.action-options.visible { display: block; }
.action-options h4 { font-size: 13px; color: #d4a84b; margin-bottom: 6px; font-weight: 600; }
.action-opt-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.action-opt { background: #1a1a30; border: 1px solid #333; border-radius: 6px; padding: 6px 10px;
              font-size: 12px; color: #aaa; cursor: pointer; transition: all 0.15s; }
.action-opt:hover { background: #2a2a44; border-color: #d4a84b; color: #fff; }
.action-opt.selected { background: #2a2a44; border-color: #d4a84b; color: #d4a84b; }
.action-detail-input { display: flex; gap: 6px; margin-top: 6px; }
.action-detail-input input { flex: 1; background: #16162a; border: 1px solid #333; border-radius: 4px;
                             padding: 8px 10px; font-size: 13px; color: #ddd; outline: none; font-family: serif; }
.action-detail-input input:focus { border-color: #d4a84b; }
.action-detail-input .btn { padding: 8px 16px; font-size: 13px; white-space: nowrap; }

/* ===== 朝会界面 ===== */
.court-panel { display: none; margin: 8px 0; }
.court-panel.visible { display: block; }
.court-scene { background: #0e0e1e; border: 1px solid #2a2a30; border-radius: 8px; padding: 14px; margin-bottom: 8px;
               text-align: center; }
.court-scene h3 { color: #d4a84b; font-size: 18px; letter-spacing: 4px; margin-bottom: 6px; }
.court-scene p { color: #888; font-size: 13px; line-height: 1.6; }
.court-speech { margin: 8px 0; }
.court-speech textarea { width:100%; background:#16162a; border:1px solid #333; border-radius:6px;
                         padding:10px; color:#ddd; font-size:13px; font-family:serif; resize:vertical;
                         outline:none; line-height:1.6; }
.court-speech textarea:focus { border-color:#d4a84b; }
.court-speech .btn { margin-top:6px; width:100%; background:#5a4a1a; color:#ffd; }

.vote-area { display:none; margin-top: 10px; padding: 12px; background: #0e0e1e; border: 1px solid #2a2a30; border-radius: 8px; }
.vote-area.visible { display:block; }
.vote-area h4 { font-size: 14px; color: #d4a84b; margin-bottom: 6px; }
.vote-area select { width:100%; margin-bottom:6px; }
.vote-area .btn { width:100%; background:#3a2a5a; color:#ccb; }

/* ===== 角色信息（底部浮层） ===== */
.char-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
            background: rgba(14,14,30,0.95); border: 1px solid #1a1a2e; border-radius: 8px;
            margin-top: 6px; cursor: pointer; transition: all 0.2s; }
.char-bar:hover { background: rgba(20,20,40,0.95); }
.char-bar .avatar { font-size: 24px; }
.char-bar .info { flex: 1; }
.char-bar .info .name { font-size: 14px; color: #d4a84b; font-weight: 600; }
.char-bar .info .stats { font-size: 11px; color: #888; display: flex; gap: 8px; flex-wrap: wrap; }
.char-bar .info .stats span { display: inline-flex; gap: 2px; }
.char-bar .info .stats .val { color: #ddd; }
.char-expand { display: none; background: rgba(14,14,30,0.95); border: 1px solid #1a1a2e;
               border-top: none; border-radius: 0 0 8px 8px; padding: 12px; margin-top: -1px; }
.char-expand.visible { display: block; }
.char-expand .stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.char-expand .stat-item { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 8px; text-align: center; }
.char-expand .stat-item .label { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 1px; }
.char-expand .stat-item .value { font-size: 20px; color: #d4a84b; font-weight: 700; margin-top: 2px; }
.char-expand .ability-box { background: rgba(212,168,75,0.06); border-radius: 6px; padding: 8px;
                           font-size: 12px; color: #aaa; margin-top: 8px; line-height: 1.5; }
.char-expand .ability-box strong { color: #d4a84b; }

/* ===== 赢家 ===== */
.winner-area { display: none; text-align: center; padding: 30px 0; }
.winner-area.visible { display: block; }
.winner-box { background: linear-gradient(135deg, #2a1a0a, #1a1a2e); border: 2px solid #d4a84b;
              border-radius: 16px; padding: 32px; animation: glow 2s infinite; }
.winner-box h2 { font-size: 28px; color: #d4a84b; letter-spacing: 4px; }
@keyframes glow { 0%,100% { box-shadow: 0 0 20px rgba(212,168,75,0.3); } 50% { box-shadow: 0 0 40px rgba(212,168,75,0.6); } }

/* ===== 故事弹窗 ===== */
.modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%;
                 background: rgba(0,0,0,0.8); z-index:100;
                 display: flex; align-items: center; justify-content: center; }
.modal-overlay.hidden { display: none; }
.modal-box { background: #121226; border: 2px solid #d4a84b; border-radius: 12px;
             max-width: 600px; width: 90%; margin: 5vh auto; padding: 24px;
             max-height: 80vh; overflow-y: auto; color: #c8c8c8; font-size: 14px; line-height: 1.8; }
.modal-box h2 { color: #d4a84b; text-align: center; margin-bottom: 10px; }
.modal-box .btn { margin-top: 16px; width: 100%; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

/* ===== 响应式 ===== */
@media (max-width: 500px) {
  .location-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
  .location-card { padding: 8px; }
  .char-bar .info .stats { gap: 4px; }
  .char-expand .stat-grid { grid-template-columns: repeat(3,1fr); gap: 4px; }
}