/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; color: #333; background: #f5f0e8; line-height: 1.7; }
a { color: #7a3b3b; text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ===== Header ===== */
.site-header { background: #4a1e1e; padding: 0.8rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.site-title { color: #f0e6d0; font-size: 1.4rem; font-weight: bold; letter-spacing: 0.05em; }
.site-title:hover { text-decoration: none; color: #fff; }
.site-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-nav a { color: #f0e6d0; font-size: 0.9rem; }
.site-nav a:hover { color: #fff; text-decoration: none; }

/* ===== Buttons ===== */
.btn {
  display: inline-block; padding: 0.45rem 1.1rem; border-radius: 4px;
  font-size: 0.9rem; cursor: pointer; border: 2px solid transparent; transition: all 0.15s;
}
.btn-primary { background: #7a3b3b; color: #fff; border-color: #7a3b3b; }
.btn-primary:hover { background: #5e2c2c; border-color: #5e2c2c; text-decoration: none; color: #fff; }
.btn-outline { background: transparent; color: #f0e6d0; border-color: #f0e6d0; }
.btn-outline:hover { background: rgba(240,230,208,0.15); text-decoration: none; }
.btn-lg { padding: 0.7rem 1.8rem; font-size: 1rem; }

/* ===== Main ===== */
.site-main { padding: 3rem 0; }

/* ===== Hero ===== */
.hero { text-align: center; padding: 4rem 1rem; background: linear-gradient(135deg, #4a1e1e 0%, #7a3b3b 100%); color: #f0e6d0; border-radius: 8px; margin-bottom: 3rem; }
.hero h1 { font-size: 2.4rem; margin-bottom: 1rem; }
.hero-desc { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== Features ===== */
.features { margin-bottom: 3rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.feature-card { background: #fff; border-radius: 8px; padding: 1.8rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; }
.feature-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; color: #4a1e1e; }
.feature-card p { font-size: 0.9rem; color: #555; }

/* ===== CTA ===== */
.cta { text-align: center; padding: 3rem 1rem; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.cta h2 { font-size: 1.8rem; margin-bottom: 0.5rem; color: #4a1e1e; }
.cta p { margin-bottom: 1.5rem; color: #555; }

/* ===== Page Content ===== */
.page-content { background: #fff; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.page-content h1 { font-size: 1.8rem; margin-bottom: 1.5rem; color: #4a1e1e; border-bottom: 2px solid #f0e6d0; padding-bottom: 0.5rem; }
.page-content h2 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.8rem; color: #5e2c2c; }
.page-content h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #7a3b3b; }
.page-content p { margin-bottom: 1rem; }
.page-content ul, .page-content ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.page-content li { margin-bottom: 0.3rem; }
.page-content table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9rem; }
.page-content th, .page-content td { border: 1px solid #ddd; padding: 0.5rem 0.8rem; }
.page-content th { background: #f0e6d0; color: #4a1e1e; }

/* ===== Footer ===== */
.site-footer { background: #2a1010; color: #a08080; text-align: center; padding: 1.2rem; font-size: 0.85rem; }

/* ===== Game SPA ===== */
.game-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 640px) { .game-layout { grid-template-columns: 1fr; } }

.card { background: #fff; border-radius: 8px; padding: 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1rem; }
.card h3 { font-size: 1rem; color: #4a1e1e; margin-bottom: 0.8rem; border-bottom: 1px solid #f0e6d0; padding-bottom: 0.4rem; }

/* Status badges */
.status-badge { font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 3px; font-weight: bold; }
.status-waiting  { background: #d4edda; color: #155724; }
.status-progress { background: #fff3cd; color: #856404; }
.status-epilogue { background: #d1ecf1; color: #0c5460; }
.status-finished { background: #e2e3e5; color: #383d41; }

/* Participant list */
.participant-list { list-style: none; font-size: 0.9rem; }
.participant { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0; border-bottom: 1px solid #f5f0e8; }
.participant.dead { opacity: 0.5; }
.pno { color: #7a3b3b; font-weight: bold; min-width: 2.5rem; }
.cid { flex: 1; }
.dead-mark { color: #888; font-size: 0.85rem; }

/* Role badges */
.role-badge { font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 3px; }
.team-village .role-badge, .role-badge.team-village { background: #d4edda; color: #155724; }
.team-werewolf .role-badge, .role-badge.team-werewolf { background: #f8d7da; color: #721c24; }

/* Role table preview */
.role-table { font-size: 0.85rem; color: #555; margin-top: 0.5rem; }
.role-cell { display: inline-block; margin: 0.2rem; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.8rem; }
.role-cell.team-village { background: #d4edda; color: #155724; }
.role-cell.team-werewolf { background: #f8d7da; color: #721c24; }

/* My role display */
.my-role { font-size: 0.9rem; padding: 0.5rem 0.8rem; border-radius: 4px; margin: 0.5rem 0; background: #f0e6d0; border-left: 4px solid #7a3b3b; }
.my-role.team-werewolf { background: #f8d7da; border-color: #721c24; }

/* Turn label */
.turn-label { font-size: 0.85rem; color: #7a3b3b; margin-left: 0.5rem; }

/* Village header meta */
.village-header h2 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.vcomment { color: #666; font-size: 0.9rem; margin-bottom: 0.4rem; }
.village-meta { font-size: 0.8rem; color: #888; margin-bottom: 0.5rem; }
.admin-panel { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }

/* Messages */
.messages-panel { max-height: 60vh; overflow-y: auto; }
.message { padding: 0.5rem 0.6rem; margin-bottom: 0.3rem; border-radius: 4px; font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: baseline; }
.mes-say    { background: #fafafa; border-left: 3px solid #aaa; }
.mes-tsay   { background: #f8f8f0; border-left: 3px solid #c8c080; font-style: italic; color: #666; }
.mes-wsay   { background: #fff0f0; border-left: 3px solid #c05050; }
.mes-gsay   { background: #e8e8f0; border-left: 3px solid #8080a0; color: #555; }
.mes-spsay  { background: #f0f8f0; border-left: 3px solid #50a070; font-style: italic; }
.mes-bsay   { background: #f5f0ff; border-left: 3px solid #8060c0; }
.mes-info   { background: #f0f0f0; color: #555; font-size: 0.85rem; border-left: 3px solid #ccc; }
.mes-info-sp { background: #fff8e6; color: #7a5000; font-weight: bold; border-left: 3px solid #e0a020; }
.mes-cast   { background: #fff0f5; color: #700; font-weight: bold; border-left: 3px solid #c00; }
.mes-maker  { background: #e8f0ff; border-left: 3px solid #6080d0; }
.mes-admin  { background: #fff0e8; border-left: 3px solid #c06030; }
.mes-deleted { color: #bbb; font-size: 0.8rem; }
.msg-pno { color: #7a3b3b; font-weight: bold; min-width: 2.5rem; }
.msg-content { flex: 1; white-space: pre-wrap; word-break: break-word; }
.msg-time { font-size: 0.75rem; color: #aaa; min-width: 3rem; text-align: right; }

/* Turn navigation */
.turn-nav { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid #f0e6d0; }
.turn-link { color: #7a3b3b; }
.current-turn { font-weight: bold; color: #4a1e1e; }

/* Actions panel */
.actions-panel { }
.action-group { margin-bottom: 1rem; }
.action-group h4 { font-size: 0.9rem; color: #4a1e1e; margin-bottom: 0.4rem; }
.action-group textarea { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem; font-size: 0.9rem; resize: vertical; font-family: inherit; }
.action-group select { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 0.4rem; font-size: 0.9rem; margin-bottom: 0.4rem; }
.say-types { display: flex; gap: 1rem; font-size: 0.85rem; margin: 0.4rem 0; flex-wrap: wrap; }
.say-types label { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn-danger:hover { background: #a93226; border-color: #a93226; }
.btn-secondary { background: #888; color: #fff; border-color: #888; }
.btn-secondary:hover { background: #666; border-color: #666; }

/* Entry form */
.entry-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.entry-form input { flex: 1; border: 1px solid #ddd; border-radius: 4px; padding: 0.4rem 0.6rem; font-size: 0.9rem; min-width: 120px; }

/* Win message */
.win-message { padding: 1rem; border-radius: 6px; font-weight: bold; text-align: center; margin: 0.8rem 0; font-size: 1rem; }
.win-message.village { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
.win-message.werewolf { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }

/* Epilogue roles */
.epilogue-roles { margin-top: 0.8rem; }
.role-list { list-style: none; }
.role-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.9rem; border-bottom: 1px solid #f5f0e8; }

/* Village list table */
.village-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.village-table th, .village-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid #e8e0d0; text-align: left; }
.village-table th { background: #f0e6d0; color: #4a1e1e; font-weight: bold; }
.village-table tr:hover { background: #faf7f0; }
.village-link { color: #7a3b3b; font-weight: bold; }
.no-villages { color: #888; text-align: center; padding: 2rem 0; }

/* Auth forms */
.auth-form { max-width: 420px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.auth-form h2 { font-size: 1.4rem; color: #4a1e1e; margin-bottom: 1.5rem; text-align: center; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 0.3rem; }
.form-group input { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem 0.7rem; font-size: 0.95rem; }
.form-group input:focus { border-color: #7a3b3b; outline: none; box-shadow: 0 0 0 2px rgba(122,59,59,0.15); }
.form-error { color: #c0392b; font-size: 0.85rem; margin-bottom: 0.8rem; display: none; }
.form-error.show { display: block; }
.form-submit { width: 100%; padding: 0.65rem; font-size: 1rem; margin-top: 0.5rem; }

/* Toast notification */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: 0.7rem 1.2rem; border-radius: 6px; font-size: 0.9rem; z-index: 9999; transform: translateY(20px); opacity: 0; transition: all 0.3s; pointer-events: none; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-error { background: #c0392b; color: #fff; }
.toast-info  { background: #27ae60; color: #fff; }

/* Loading */
.loading { color: #888; text-align: center; padding: 2rem; }
.error { color: #c0392b; text-align: center; padding: 1rem; }

/* Wasm badge */
.wasm-badge { display: inline-block; background: #2c3e50; color: #a0d0f0; font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: 3px; margin-left: 0.4rem; vertical-align: middle; }