@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+JP:wght@400;700;900&display=swap";:root{--bg-color:#0f172a;--text-color:#f8fafc;--primary-color:#3b82f6;--primary-hover:#2563eb;--danger-color:#ef4444;--danger-hover:#dc2626;--panel-bg:#1e293bb3;--panel-border:#ffffff1a;--wolf-color:#991b1b;--seer-color:#8b5cf6;--knight-color:#10b981;--villager-color:#f59e0b;--madman-color:#c026d3;--medium-color:#0d9488}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);background-image:radial-gradient(circle at 15%,#3b82f626,#0000 25%),radial-gradient(circle at 85% 30%,#8b5cf626,#0000 25%);flex-direction:column;min-height:100vh;font-family:Inter,Noto Sans JP,sans-serif;display:flex}#root{flex-direction:column;flex:1;display:flex}.container{width:100%;max-width:800px;margin:0 auto;padding:2rem}.glass-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);border-radius:16px;padding:2rem;animation:.5s ease-out fadeIn;box-shadow:0 8px 32px #0000005e}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h1,h2,h3{letter-spacing:-.025em;margin-bottom:1rem;font-weight:800}h1{text-align:center;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.5rem}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.btn-danger{background-color:var(--danger-color);color:#fff}.btn-danger:hover{background-color:var(--danger-hover);transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.input-field{border:1px solid var(--panel-border);color:#fff;background:#0003;border-radius:8px;width:100%;margin-bottom:1rem;padding:.75rem 1rem;font-size:1rem;transition:border-color .2s}.input-field:focus{border-color:var(--primary-color);outline:none}.chat-container{border:1px solid var(--panel-border);background:#0000004d;border-radius:12px;flex-direction:column;height:400px;margin-top:1.5rem;display:flex;overflow:hidden}.chat-messages{flex-direction:column;flex:1;gap:.5rem;padding:1rem;display:flex;overflow-y:auto}.message{background:#ffffff0d;border-radius:8px;align-self:flex-start;max-width:80%;padding:.5rem .75rem;animation:.3s ease-out slideIn}.message.system{color:#fbbf24;text-align:center;background:#ffffff1a;align-self:center;font-size:.9rem}.message.me{background:var(--primary-color);align-self:flex-end}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.chat-input-area{border-top:1px solid var(--panel-border);background:#ffffff0d;padding:.75rem;display:flex}.chat-input-area input{border-top-right-radius:0;border-bottom-right-radius:0;flex:1;margin-bottom:0}.chat-input-area button{border-top-left-radius:0;border-bottom-left-radius:0}.player-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-top:1.5rem;display:grid}.player-card{border:1px solid var(--panel-border);text-align:center;cursor:pointer;background:#ffffff0d;border-radius:12px;padding:1rem;transition:all .2s;position:relative;overflow:hidden}.player-card:hover{background:#ffffff1a;transform:translateY(-2px)}.player-card.dead{opacity:.5;filter:grayscale();cursor:not-allowed}.player-card.dead:after{content:"DEAD";color:var(--danger-color);letter-spacing:2px;text-shadow:0 2px 4px #00000080;font-size:1.5rem;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-15deg)}.player-card.selected{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color)}.role-badge{border-radius:4px;margin-top:.5rem;padding:.25rem .5rem;font-size:.75rem;font-weight:700;display:inline-block}.role-villager{background:var(--villager-color)}.role-werewolf{background:var(--wolf-color)}.role-seer{background:var(--seer-color)}.role-knight{background:var(--knight-color)}.role-madman{background:var(--madman-color)}.role-medium{background:var(--medium-color)}@media (width<=768px){.container{padding:.5rem}.glass-panel{border-radius:12px;padding:1rem}.player-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem}.player-card{padding:.75rem .25rem}h1{font-size:2rem}.chat-container{height:300px}}