.drawing-card,.challenge-card,.custom-game-card{border:1px solid var(--border);border-radius:24px;background:var(--bg);box-shadow:0 10px 30px var(--shadow);padding:18px}
.game-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.game-panel-status{font-size:13px;color:var(--text)}
.game-panel-status small{display:block;margin-top:3px;font-size:10px;color:var(--text-muted)}
.drawing-canvas-wrap{width:100%;aspect-ratio:1.05;border-radius:17px;overflow:hidden;background:#fffafb;border:1px solid var(--border);touch-action:none}
#drawingCanvas{display:block;width:100%;height:100%;touch-action:none}
.drawing-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.drawing-colors{display:flex;gap:7px}
.drawing-color{width:28px;height:28px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(60,42,50,.12);cursor:pointer}
.drawing-color.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--accent)}
.drawing-size{width:88px;accent-color:var(--accent)}
.game-small-btn{min-height:34px;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:var(--accent-soft);color:var(--text);font:inherit;font-size:10px;cursor:pointer}
.game-small-btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.challenge-mode{border:1px solid var(--border);border-radius:10px;padding:7px 9px;background:var(--bg);color:var(--text);font:inherit;font-size:11px}
.challenge-progress{height:5px;background:var(--accent-soft);border-radius:999px;overflow:hidden;margin:12px 0 24px}
.challenge-progress span{display:block;height:100%;background:var(--accent);transition:width .25s}
.challenge-word{text-align:center;font-family:'Cormorant Garamond',serif;font-size:46px;color:var(--text);margin:24px 0 5px}
.challenge-phone{text-align:center;min-height:18px;color:var(--text-muted);font-size:12px}
.challenge-choices{display:grid;gap:9px;margin-top:25px}
.challenge-choice{min-height:48px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:var(--accent-soft);color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.challenge-choice.correct{border-color:#7aa58b;background:rgba(122,165,139,.14)}
.challenge-choice.wrong{border-color:#b9798b;background:rgba(185,121,139,.13)}
.challenge-feedback{min-height:42px;margin-top:13px;color:var(--text-muted);font-size:12px;line-height:1.7}
.custom-game-section{margin-top:24px}
.custom-game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.custom-game-item{position:relative}
.custom-game-item .feature-card{width:100%;height:100%;padding-right:46px}
.custom-game-delete{position:absolute;top:13px;right:13px;z-index:2;width:30px;height:30px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text-muted);cursor:pointer;display:grid;place-items:center}
.custom-game-delete svg{width:14px;height:14px}
.custom-game-frame{width:100%;min-height:calc(100svh - 160px);border:0;border-radius:16px;background:#fff}
@media(max-width:680px){.custom-game-grid{grid-template-columns:1fr}.drawing-controls{gap:7px}.challenge-word{font-size:42px}}

.game-chat{margin-top:14px;border:1px solid var(--border);border-radius:20px;background:var(--bg);box-shadow:0 8px 26px var(--shadow);padding:14px}
.game-chat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--text);font-size:12px}
.game-chat-head small{font-size:9px;color:var(--text-muted)}
.game-chat-log{display:flex;flex-direction:column;gap:7px;max-height:180px;overflow-y:auto;margin-top:10px;padding:2px}
.game-chat-line{max-width:88%;padding:8px 10px;border-radius:13px;font-size:12px;line-height:1.55;white-space:pre-wrap;color:var(--text)}
.game-chat-line.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.game-chat-line.lovien{align-self:flex-start;background:var(--accent-soft);border-bottom-left-radius:5px}
.game-chat-line.error{align-self:center;color:var(--text-muted);font-size:10px}
.game-chat-compose{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.game-chat-compose input{min-width:0;height:40px;border:1px solid var(--border);border-radius:12px;background:var(--accent-soft);color:var(--text);font:inherit;font-size:12px;padding:0 12px;outline:none}
.game-chat-compose button{min-width:58px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-size:11px;padding:0 12px}
.chat-game-invite{width:100%;margin-top:12px;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,var(--accent-soft),var(--bg));color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;font:inherit;cursor:pointer}
.chat-game-invite span{display:flex;flex-direction:column;gap:2px}.chat-game-invite small{font-size:9px;color:var(--text-muted);font-weight:400}.chat-game-invite strong{font-size:14px;font-weight:600}
.chat-game-invite em{display:flex;align-items:center;gap:5px;color:var(--accent);font-size:10px;font-style:normal;white-space:nowrap}.chat-game-invite svg{width:14px;height:14px}


/* 2026-07-26 drawing tools: visible full palette, eraser and opacity */
.drawing-tool-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%}
.drawing-tool.active{background:var(--accent);color:#fff;border-color:transparent}
.drawing-current-color{width:24px;height:24px;border-radius:7px;background:#8f6675;border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.drawing-picker{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--accent-soft);color:var(--text);font-size:10px;cursor:pointer;overflow:hidden}
.drawing-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drawing-picker span{pointer-events:none}
.drawing-range-label{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:10px;white-space:nowrap}
.drawing-range-label .drawing-size{width:78px}
.drawing-colors{align-items:center}
@media(max-width:680px){.drawing-tool-row{gap:6px}.drawing-range-label{width:100%}.drawing-range-label .drawing-size{flex:1;width:auto}}