body { font-family: sans-serif; background: #fff6ee; color: #2b2b2b; margin: 0; }
main { max-width: 860px; margin: 0 auto; padding: 20px; }
canvas { border: 2px dashed #e28b66; background: #fff; touch-action: none; }
button { margin: 6px 4px; padding: 10px 14px; border-radius: 10px; border: 0; background: #ff9364; color: white; cursor: pointer; }
button.secondary { background: #f5a97e; }
input { padding: 8px; border: 1px solid #e6c8b7; border-radius: 8px; }
.card { margin-top: 14px; padding: 12px; background: #fff; border-radius: 10px; border: 1px solid #f0d3c4; }
.auth-card { display: flex; flex-direction: column; gap: 8px; }
.hint { background: #fff1e6; color: #7b3c23; font-weight: 600; }
#result { display: flex; gap: 8px; flex-wrap: wrap; }
#result img { width: 45%; border: 1px solid #ddd; }
.round-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; padding:10px;border:1px solid #f0d3c4;border-radius:10px;background:#fff8f3; }
.round-row > div { width: 100%; font-weight: 600; }
.round-row > small { width: 100%; color: #8f5f4b; }
#chatMessages { max-height: 280px; overflow-y: auto; background: #fffdfb; border: 1px solid #f1e1d8; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.chat-message.mine { align-self: flex-end; }
.chat-message.partner { align-self: flex-start; }
.chat-bubble { max-width: 75%; background: #ffe5d7; border-radius: 12px; padding: 8px 10px; }
.chat-message.partner .chat-bubble { background: #f2f2f2; }
.chat-name { font-size: 12px; color: #6f4b3c; margin-bottom: 4px; }
.chat-text { white-space: pre-wrap; word-break: break-word; }
.chat-meta { font-size: 11px; color: #8a8a8a; text-align: right; margin-top: 4px; }
.chat-controls { display: flex; gap: 8px; margin-top: 8px; }
#chatInput { flex: 1; padding: 8px; }
.presence-pill { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid #f0d3c4; background: #fff; color: #6f4b3c; }
.presence-pill::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #b8b8b8; }
.presence-pill.online::before { background: #41b883; }
.presence-pill.inactive::before { background: #e3b341; }
.presence-pill.offline::before { background: #b9bec6; }
@media (max-width: 700px) {.chat-controls { flex-direction: column; }.chat-bubble { max-width: 92%; }#result img { width: 100%; }}