* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; max-width: 760px; margin: 0 auto; padding: 1rem; color: #222; }
header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; padding-bottom: .5rem; margin-bottom: 1rem; }
header a { font-weight: 700; text-decoration: none; color: #222; }
form.inline { display: inline; }
#chat-log { min-height: 320px; max-height: 60vh; overflow-y: auto; border: 1px solid #ccc; border-radius: 8px; padding: .75rem; margin-bottom: .75rem; }
.msg { padding: .5rem .75rem; border-radius: 8px; margin: .4rem 0; max-width: 85%; white-space: pre-wrap; }
.msg-user { background: #0072b2; color: #fff; margin-left: auto; }        /* Okabe-Ito blue */
.msg-antagonist { background: #e69f00; color: #222; margin-right: auto; } /* Okabe-Ito orange */
.error { background: #fdd; border: 1px solid #d55e00; border-radius: 6px; padding: .5rem .75rem; margin: .5rem 0; }
#chat-form { display: flex; gap: .5rem; }
#chat-input { flex: 1; }
button { cursor: pointer; padding: .5rem 1rem; border-radius: 6px; border: 1px solid #888; background: #f4f4f4; }
button:disabled { opacity: .5; cursor: wait; }
.end-btn { margin-top: .75rem; background: #d55e00; color: #fff; border: none; }
.scores li { font-size: 1.1rem; }
label { display: block; margin: .5rem 0; }