body { font-family: system-ui, sans-serif; max-width: 1100px; margin: 0 auto; padding: 16px; }
header { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
header h1 { margin: 0 8px 0 0; font-size: 1.4rem; }
.muted { color: #888; }
.error { color: #c2474a; }
.login { display: flex; flex-direction: column; gap: 8px; max-width: 280px; }
.room-list li { margin: 6px 0; }
.ready { color: #2f9a5c; font-weight: 700; }
.slot { padding: 8px; border: 1px solid #ccc; margin: 6px 0; }

/* 게임 */
.game { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
@media (max-width: 800px) { .game { grid-template-columns: 1fr; } }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel { border: 1px solid #ccc; padding: 8px; }
.panel h3 { margin: 0 0 6px; font-size: 1rem; }
.hpbar { height: 8px; background: #eee; margin-bottom: 4px; }
.hpbar div { height: 100%; background: #c2474a; transition: width .4s; }
.tag { font-size: .8rem; padding: 0 4px; border: 1px solid; }
.tag.broken { color: #c98a1b; }
.tag.exhausted { color: #c2474a; }
.tag.bonus { color: #7b4fb8; }

.stage { border: 1px solid #ccc; padding: 12px; margin: 12px 0; min-height: 120px; text-align: center; }
.round-title { font-weight: 700; margin-bottom: 8px; }
.reveal { display: flex; justify-content: center; align-items: center; gap: 16px; }
.side { flex: 1; }
.side-act { font-size: 1.3rem; font-weight: 700; display: inline-block; }
.side-act svg, .act-btn svg { vertical-align: -0.15em; }
.vs { font-weight: 700; color: #888; }
.breakdown { font-size: .9rem; }

.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.act-btn { font-size: 1rem; padding: 6px 10px; background: #fff; border: 1px solid currentColor; cursor: pointer; display: flex; gap: 4px; align-items: center; }
.act-btn span { color: #222; }
.act-btn:disabled { opacity: .4; cursor: default; }
.act-btn.picked { opacity: 1; outline: 2px solid currentColor; }

.battle-log { max-height: 260px; overflow-y: auto; border: 1px solid #eee; padding: 6px; font-size: .9rem; }
.log-entry ul { margin: 2px 0 6px; padding-left: 18px; }

/* 채팅 */
.chat { margin-bottom: 12px; }
.chat h3 { margin: 0 0 4px; }
.chat-list { height: 220px; overflow-y: auto; border: 1px solid #ccc; padding: 6px; }
.chat form { display: flex; gap: 4px; margin-top: 4px; }
.chat input { flex: 1; }
.msg { margin: 2px 0; word-break: break-all; }
.who { font-weight: 700; margin-right: 4px; }
.who.p1 { color: #c2474a; }
.who.p2 { color: #3b6fb6; }
.who.spec { color: #666; }
.chat-action { color: #888; font-style: italic; }
.chat-magic { font-weight: 800; }

/* GM */
.gm-table td, .gm-table th { border-bottom: 1px solid #ddd; padding: 4px 8px; text-align: left; }
.gm-log { font-family: monospace; font-size: .85rem; max-height: 400px; overflow-y: auto; }

/* 주사위 */
.dice-number {
    color: #c2474a;
    font-weight: 800;
    font-size: 1.2rem;
    display: inline-block;
    min-width: 1.2em;
}

.pop {
    animation: pop 0.1s ease-out;
}
@keyframes pop { 0%{transform: scale(1);} 40%{transform: scale(1.4);} 100%{transform: scale(1);} }