.drawing-free-link { display:block; margin-top:12px; font-size:12px; }
#mix-app .drawing-history #mix-finish{background:var(--accent);color:#17221b;border-color:var(--accent);font-weight:700}
.mix-app { margin:18px auto 0; padding-bottom:30px; }
.mix-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:18px; }
.mix-heading h1 { margin:0; font-size:34px; }.mix-heading h1 span { color:var(--accent-ink); }
.mix-progress { display:flex; align-items:center; gap:14px; font-size:12px; color:var(--muted); }.mix-progress strong { color:var(--ink); font-size:27px; font-variant-numeric:tabular-nums; min-width:58px; }
.mix-progress .button,.mix-room .button:not(.button-primary),.mix-settings .button,.mix-review .button { background:var(--surface-alt); color:var(--ink); border-color:var(--line); }
.mix-progress .button:hover,.mix-room .button:not(.button-primary):hover,.mix-settings .button:hover,.mix-review .button:hover { background:var(--surface-hover); }
.mix-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:24px; }
.mix-play { min-width:0; }.mix-task { min-height:90px; margin-bottom:10px; }.mix-task h2 { margin:4px 0; font-size:24px; }.mix-task p { margin:5px 0; color:var(--muted); font-size:12px; }
.mix-app .drawing-app { margin:0; }.mix-app .drawing-history { justify-content:flex-end; margin-bottom:9px; }.mix-app .drawing-history button { padding:6px 9px; }
.mix-app .drawing-workspace { grid-template-columns:188px minmax(0,1fr); }.mix-app .drawing-desk { padding:16px; justify-content:flex-start; }.mix-app .drawing-tools { padding:13px 12px; }
.mix-app .drawing-paper { width:min(100%, calc(max(290px, 100dvh - 410px) * 1.33333)); }.mix-app .drawing-colors,.mix-app .drawing-width { margin-top:14px; }.mix-app .drawing-tool-grid button { min-height:31px; }
#mix-foreground { pointer-events:none; z-index:2; }.mix-app .drawing-cursor { z-index:3; }
.mix-room { padding:18px 0 0 20px; border-left:1px solid var(--line); }.mix-room h2 { margin:6px 0 0; font-size:24px; }.mix-room>p { color:var(--muted); font-size:12px; }.mix-room ol { list-style:none; padding:0; margin:16px 0; }.mix-room li { display:flex; justify-content:space-between; gap:7px; border-bottom:1px solid var(--line); padding:7px 0; font-size:12px; }.mix-room li[data-self="true"] { font-weight:700; }.mix-room li span { font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.mix-room li b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mix-room li span { max-width:102px; overflow:hidden; text-overflow:ellipsis; }
.mix-room .button { display:block; width:100%; margin:9px 0; font-size:12px; }.mix-room label { font-size:11px; }.mix-room input { width:100%; margin-top:5px; font-size:11px; }.mix-room .mix-note { line-height:1.7; margin-top:20px; }
.mix-note { color:var(--muted); font-size:11px; line-height:1.6; }.mix-answer { display:flex; align-items:end; gap:12px; padding:16px 0 4px; }.mix-answer label { flex:1; font-size:12px; }.mix-answer input { width:100%; display:block; margin-top:5px; }.mix-answer>span { max-width:150px; font-size:11px; color:var(--muted); }
.mix-answer input,.mix-room input { min-width:0; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:9px 10px; font:inherit; }
.mix-app[data-phase="guess"] .drawing-tools,.mix-app[data-phase="guess"] .drawing-history { display:none; }.mix-app[data-phase="guess"] .drawing-workspace { grid-template-columns:minmax(0,1fr); }.mix-app[data-phase="guess"] .drawing-paper { width:min(100%, calc(max(290px, 100dvh - 385px) * 1.33333)); }
.mix-app[data-phase="reveal"] #drawing-app,.mix-app[data-phase="results"] #drawing-app { display:none; }
.mix-app[data-phase="lobby"] #drawing-app,.mix-app[data-phase="intermission"] #drawing-app,.mix-app[data-phase="prepare"] #drawing-app,.mix-app[data-phase="offline"] #drawing-app { display:none; }
.mix-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; border-top:2px solid var(--accent-ink); padding:24px 0; max-width:700px; }
.mix-settings>div,.mix-settings>span { grid-column:1/-1; }.mix-settings h3,.mix-pause h3 { margin:0 0 8px; }.mix-settings p,.mix-settings>span { font-size:12px; color:var(--muted); }
.mix-settings label { font-size:13px; }.mix-settings input { display:block; width:100%; margin-top:7px; padding:10px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; font:inherit; }.mix-settings input:disabled { opacity:1; border-style:dashed; }
.mix-pause { padding:22px; margin-bottom:24px; background:var(--surface-alt); border-left:4px solid var(--accent-ink); display:flex; align-items:center; justify-content:space-between; gap:20px; }.mix-pause p { font-size:13px; color:var(--muted); margin:0; }.mix-pause .button { flex-shrink:0; }
.mix-review-section { border-top:1px solid var(--line); margin:22px 0; padding-top:12px; }.mix-review-section>p,.mix-review p,.mix-own-answers { font-size:13px; line-height:1.6; }.mix-review { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding:10px 0; }.mix-review p { overflow-wrap:anywhere; }.mix-review>div { display:flex; gap:8px; flex-shrink:0; }.mix-review .button { font-size:12px; }.mix-own-answers { margin:18px 0; }.mix-own-answers li { margin:8px 0; overflow-wrap:anywhere; }
.mix-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.mix-gallery figure { margin:0; min-width:0; }.mix-gallery canvas { display:block; width:100%; aspect-ratio:4/3; background:white; border:1px solid var(--line); }.mix-gallery figcaption { font-size:11px; padding:6px 0; line-height:1.5; }.mix-gallery figcaption small { display:block; color:var(--muted); }
#mix-error { color:var(--danger); padding:10px 12px; background:var(--surface-alt); border:1px solid var(--line); }
.mix-app[data-phase="offline"] #drawing-app,.mix-app[data-phase="lobby"] #drawing-app,.mix-app[data-phase="prepare"] #drawing-app { opacity:.6; }
@media (max-height:820px) { .mix-app { margin-top:10px; }.mix-heading { margin-bottom:12px; }.mix-task { min-height:74px; }.mix-task h2 { font-size:21px; } }