:root{--bg: #1c1712;--panel: #2a221a;--panel2: #352a20;--accent: #9a6a3a;--accent2: #c08a52;--text: #f1e7da;--muted: #b39e87;--good: #6fae5f;--bad: #c75c4b;--slot: #241d16;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}#app{max-width:760px;margin:0 auto;padding:16px 16px 48px}header h1{margin:0 0 2px;font-size:28px;letter-spacing:.5px;color:var(--accent2)}header .tag{margin:0 0 14px;color:var(--muted);font-size:13px}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}button{background:var(--panel2);color:var(--text);border:1px solid #4a3a2a;border-radius:8px;padding:8px 12px;font-size:14px;cursor:pointer}button:hover{background:#423323}button.primary{background:var(--accent);border-color:var(--accent2);color:#fff}button.primary:hover{background:var(--accent2)}button:disabled{opacity:.5;cursor:default}.stats{margin-left:auto;color:var(--muted);font-size:13px;display:flex;gap:14px}.stats b{color:var(--text)}.diagram{background:var(--panel);border-radius:12px;padding:16px;margin-bottom:16px}.slots{display:flex;flex-wrap:wrap;gap:10px}.slot{min-width:92px;min-height:64px;background:var(--slot);border:2px dashed #50402e;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 8px;position:relative}.slot.over{border-color:var(--accent2);background:#2e2418}.slot.given{border-style:solid;border-color:#5a4730}.slot.correct{border-color:var(--good)}.slot.wrong{border-color:var(--bad)}.slot .role{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-top:4px}.slot .word{font-size:17px;font-weight:600;min-height:22px}.chip{display:inline-block;background:var(--accent);color:#fff;border-radius:8px;padding:8px 12px;font-size:16px;font-weight:600;cursor:grab;user-select:none;border:1px solid var(--accent2)}.chip.placed{background:#4a3a2a}.chip.dragging{opacity:.5}.slot .chip{cursor:grab}.tray{background:var(--panel);border-radius:12px;padding:14px;min-height:56px}.tray h3{margin:0 0 8px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.tray .chips{display:flex;flex-wrap:wrap;gap:8px}.msg{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--panel2);font-size:15px}.msg.win{border-left:4px solid var(--good)}.msg.partial{border-left:4px solid var(--bad)}.legend{margin-top:16px;font-size:12px;color:var(--muted);line-height:1.6}