:root { --primary-color: #ff6b81; --bg-color: #fff0f5; --panel-bg: #ffffff; --text-color: #333333; }
html, body { margin: 0; padding: 0; height: 100%; height: 100dvh; background-color: var(--bg-color); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; }
#app-container { display: flex; flex-direction: column; height: 100%; width: 100%; }

.header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: var(--panel-bg); box-shadow: 0 2px 10px rgba(0,0,0,0.05); z-index: 10; flex-shrink: 0; }
.status-info { font-size: 16px; font-weight: bold; color: var(--primary-color); flex: 1; }
.timer { font-size: 20px; font-weight: bold; background: #ffeaa7; padding: 5px 15px; border-radius: 20px; color: #d63031; transition: all 0.3s;}

.action-btn { display: none; padding: 5px 12px; color: white; border: none; border-radius: 15px; cursor: pointer; font-weight: bold; margin-right: 10px;}
.next-btn { background: #2ecc71; box-shadow: 0 0 10px rgba(46,204,113,0.5); animation: pulse 1.5s infinite;}
.skip-btn { background: #e74c3c; }
.giveup-btn { background: #e74c3c; margin-right: 10px;}

.main-container { display: flex; flex: 1; padding: 10px; gap: 10px; overflow: hidden; }
.draw-area { flex: 3; display: flex; flex-direction: column; background: var(--panel-bg); border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; position: relative; }

.floating-ready-box {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95); padding: 10px 20px; border-radius: 20px;
    box-shadow: 0 4px 15px rgba(255,107,129,0.2); text-align: center; z-index: 20;
    border: 2px solid var(--primary-color); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ready-btn-small {
    padding: 8px 25px; font-size: 16px; background: var(--primary-color); color: white;
    border: none; border-radius: 20px; cursor: pointer; font-weight: bold;
    box-shadow: 0 3px 10px rgba(255,107,129,0.3); transition: transform 0.2s;
}
.ready-btn-small:active { transform: scale(0.95); }

#canvas-lock { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; display: none; cursor: not-allowed; }
.canvas-container { flex: 1; position: relative; cursor: crosshair; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; background-color: #fff; touch-action: none; }

.toolbar { display: flex; padding: 10px; background: #f8f9fa; border-top: 1px solid #eee; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;}
.color-btn { width: 25px; height: 25px; border-radius: 50%; border: 2px solid #ddd; cursor: pointer; transition: transform 0.2s; }
.color-btn:hover, .color-btn.active { transform: scale(1.2); border-color: #333; }
.custom-color { width: 30px; height: 30px; padding: 0; border: none; border-radius: 5px; cursor: pointer; }
.tool-btn { padding: 5px 12px; background: white; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; font-size: 12px; }
.tool-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

.chat-area { flex: 1; min-width: 250px; display: flex; flex-direction: column; background: var(--panel-bg); border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; }
.chat-messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 8px 12px; border-radius: 15px; max-width: 80%; font-size: 14px; word-wrap: break-word; }
.msg.system { background: #f1f2f6; color: #747d8c; align-self: center; font-size: 12px; text-align: center; }
.msg.hint { background: #fff3cd; color: #8a5800; align-self: center; border: 1px solid #f6c65b; box-shadow: 0 2px 8px rgba(243, 156, 18, 0.12); font-size: 13px; text-align: center; }
.msg.me { background: var(--primary-color); color: white; align-self: flex-end; border-bottom-right-radius: 2px; }
.msg.her { background: #eccc68; color: #333; align-self: flex-start; border-bottom-left-radius: 2px; }

.chat-input-area { display: flex; padding: 10px; border-top: 1px solid #eee; flex-shrink: 0; background: #fff; gap: 8px;}
#chat-input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; outline: none; font-size: 14px;}
#hint-btn, #send-btn { padding: 10px 15px; color: white; border: none; border-radius: 20px; cursor: pointer; white-space: nowrap; }
#hint-btn { background: #f39c12; }
#hint-btn:disabled { background: #d7b37a; cursor: not-allowed; }
#send-btn { background: var(--primary-color); }
#send-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 100; }
.modal-box { background: white; padding: 30px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); width: 80%; max-width: 400px; }
.word-options { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.word-btn { padding: 15px; font-size: 18px; background: #f1f2f6; border: 2px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.word-btn:hover { background: #fff0f5; border-color: var(--primary-color); color: var(--primary-color); }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (max-width: 768px) { .main-container { flex-direction: column; } .draw-area { flex: 1.5; } .chat-area { flex: 1; } }