:root{--bg:#f4f7f2;--bg-stage-a:#eaf5e6;--bg-stage-b:#cfe6f7;--card:#fff;--ink:#17251c;--ink-soft:#5c6b60;--line:#dfe6dd;--green:#2e7d32;--green-dark:#1f5c25;--red:#e11d48;--shadow:0 1px 2px #17251c0f, 0 8px 24px #17251c14;--radius:14px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;font:15px/1.45 Segoe UI,system-ui,-apple-system,sans-serif;overflow:hidden}body.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}#app{flex-direction:column;height:100%;display:flex}.topbar{background:var(--card);border-bottom:1px solid var(--line);z-index:5;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:10px 18px;display:flex;box-shadow:0 1px 3px #17251c0d}.brand{align-items:center;gap:12px;display:flex}.brand-mark{font-size:30px;line-height:1}.topbar h1{letter-spacing:-.01em;margin:0;font-size:19px;font-weight:650}.subtitle{color:var(--ink-soft);margin:2px 0 0;font-size:13px}.topbar-tools{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.seg{border:1px solid var(--line);background:#eef2ec;border-radius:999px;padding:3px;display:inline-flex}.seg button{font:inherit;cursor:pointer;color:var(--ink-soft);background:0 0;border:0;border-radius:999px;padding:5px 14px;font-size:13px}.seg button.is-active{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px #0000001f}.score{flex-direction:column;min-width:96px;padding:0 6px;line-height:1.2;display:flex}.score-main{font-size:14px}.score-main strong{color:var(--green);font-size:17px}.score-sub{color:var(--ink-soft);font-size:12px}.btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;border-radius:10px;padding:8px 14px;font-size:13px;transition:background .15s,border-color .15s,transform 50ms}.btn:hover{background:#f2f6f1;border-color:#c9d5c6}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}.btn-primary:hover{background:var(--green-dark);border-color:var(--green-dark)}.layout{flex:1;grid-template-columns:1fr 300px;min-height:0;display:grid}.stage{background:radial-gradient(120% 90% at 50% 100%, var(--bg-stage-a) 0%, var(--bg-stage-b) 100%);min-height:0;position:relative;overflow:hidden}.stage canvas{touch-action:none;width:100%;height:100%;display:block}.stage.is-picking{cursor:copy}.hint-bar{color:#55665b;pointer-events:none;background:#ffffffb3;border-radius:8px;margin:0;padding:5px 10px;font-size:12px;position:absolute;bottom:12px;left:14px}.leaders{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.leader{stroke-width:2px;stroke-dasharray:4 4;opacity:.75;transition:opacity .2s}.leader-dot{transition:opacity .2s}.leader.is-back,.leader-dot.is-back{opacity:.12}.pins{pointer-events:none;position:absolute;inset:0}.pin{position:absolute;top:0;left:0}.pin.is-back{opacity:.3}.pin.is-back .pin-hit{pointer-events:none}.pin-hit{pointer-events:auto;cursor:pointer;font:inherit;border:2px solid var(--c);box-shadow:var(--shadow);white-space:nowrap;background:#fffffff0;border-radius:999px;align-items:center;gap:7px;padding:4px 10px 4px 4px;transition:box-shadow .15s,background .15s;display:flex;position:absolute;transform:translate(-50%,-50%)}.pin.is-open .pin-hit{padding:4px}.pin-badge{background:var(--c);color:#fff;border-radius:50%;flex:none;place-items:center;width:26px;height:26px;font-size:14px;font-weight:700;display:grid}.pin-text{flex-direction:column;align-items:flex-start;line-height:1.15;display:flex}.pin-term{font-size:14px;font-weight:650}.pin-fach{color:var(--ink-soft);font-size:11px}.pin.is-open .pin-text{display:none}.pin-dots.is-open .pin-badge{background:radial-gradient(circle at 30% 32%, #fff 1.4px, transparent 1.6px), radial-gradient(circle at 70% 40%, #fff 1.4px, transparent 1.6px), radial-gradient(circle at 42% 70%, #fff 1.4px, transparent 1.6px), var(--c)}.pin-whole .pin-hit{border-style:double;border-width:4px}.pin-tip{white-space:nowrap;color:#fff;opacity:0;pointer-events:none;background:#17251c;border-radius:7px;padding:4px 9px;font-size:12px;transition:opacity .15s;position:absolute;top:0;transform:translate(-50%,14px)}.pin.is-open.is-hovered .pin-tip{opacity:.95}.pin.is-hovered .pin-hit,.pin.is-target .pin-hit{box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 28%, transparent), var(--shadow);background:#fff}.pin.is-target .pin-hit{transform:translate(-50%,-50%)scale(1.12)}.pin.is-solved .pin-hit{border-color:var(--green);background:#f2fbf2}.pin.is-solved .pin-badge{background:var(--green);font-size:15px}.pin.is-revealed .pin-hit{background:#f8fafc;border-color:#94a3b8}.pin.is-revealed .pin-badge{background:#94a3b8}.pin.is-wrong .pin-hit{border-color:var(--red);animation:.4s shake}.pin.just-solved .pin-hit{animation:.6s pop}@keyframes shake{0%,to{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 7px),-50%)}45%{transform:translate(calc(7px - 50%),-50%)}70%{transform:translate(calc(-50% - 4px),-50%)}}@keyframes pop{0%{transform:translate(-50%,-50%)scale(.7)}55%{transform:translate(-50%,-50%)scale(1.16)}to{transform:translate(-50%,-50%)scale(1)}}body.is-dragging .pin.is-open .pin-hit{animation:1.1s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent), var(--shadow)}60%{box-shadow:0 0 0 12px color-mix(in srgb, var(--c) 0%, transparent), var(--shadow)}}.panel{background:var(--card);border-left:1px solid var(--line);padding:16px 16px 22px;overflow-y:auto}.panel h2{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0 0 4px;font-size:15px}.panel-note{color:var(--ink-soft);min-height:34px;margin:0 0 14px;font-size:12.5px}.chips{flex-direction:column;gap:9px;margin:0;padding:0;list-style:none;display:flex}.chip{border:1px solid var(--line);border-left:5px solid var(--c);background:var(--card);cursor:grab;touch-action:none;border-radius:11px;align-items:center;gap:10px;padding:9px 12px;transition:transform .12s,box-shadow .15s,opacity .2s,background .15s;display:flex;box-shadow:0 1px 2px #17251c0d}.chip:hover{box-shadow:var(--shadow);transform:translate(-2px)}.chip.is-selected{box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent);background:#f2f8f1}.chip.is-done{opacity:.4;cursor:default;pointer-events:none;-webkit-text-decoration:line-through #0000004d;text-decoration:line-through #0000004d}.chip-icon{flex:none;font-size:18px}.chip-body{flex-direction:column;min-width:0;line-height:1.25;display:flex}.chip-term{font-size:14.5px;font-weight:640}.chip-what{color:var(--ink-soft);font-size:11.5px}.chip-ghost{z-index:100;pointer-events:none;transform-origin:0 0;margin:-20px 0 0 -60px;position:fixed;top:0;left:0;rotate:-2deg;box-shadow:0 12px 28px #00000038}.legend{color:var(--ink-soft);background:#f5f8f4;border-radius:11px;margin-top:22px;padding:12px 14px;font-size:12.5px}.legend h3{text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin:0 0 5px;font-size:12px}.legend p{margin:0}.toast{background:var(--card);border-left:5px solid var(--green);max-width:min(620px,88%);box-shadow:var(--shadow);opacity:0;pointer-events:none;border-radius:12px;padding:11px 16px;font-size:13.5px;transition:opacity .2s,transform .2s;position:absolute;bottom:22px;left:50%;transform:translate(-50%,16px)}.toast.is-visible{opacity:1;transform:translate(-50%)}.toast-bad{border-left-color:var(--red)}.toast-info{border-left-color:#64748b}.loading{color:var(--ink-soft);background:#f4f7f2d9;place-content:center;justify-items:center;gap:14px;transition:opacity .4s;display:grid;position:absolute;inset:0}.loading.is-hidden{opacity:0;pointer-events:none}.spinner{border:3px solid #cfdccb;border-top-color:var(--green);border-radius:50%;width:34px;height:34px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error{color:var(--red);text-align:center}.finish[hidden]{display:none}.finish{z-index:60;background:#17251c73;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.finish-card{background:var(--card);text-align:center;border-radius:18px;width:100%;max-width:620px;padding:26px 28px;box-shadow:0 24px 60px #0000004d}.finish-card h2{margin:0 0 6px;font-size:24px}.finish-card>p{color:var(--ink-soft);margin:0 0 16px}.finish-table{border-collapse:collapse;width:100%;margin-bottom:20px;font-size:13px}.finish-table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding-bottom:6px;font-size:11px}.finish-table td{text-align:left;border-top:1px solid var(--line);padding:6px 8px 6px 0}.confetti{z-index:70;pointer-events:none;border-radius:2px;width:8px;height:14px;animation:linear forwards fall;position:fixed;top:-12px}@keyframes fall{to{opacity:.2;transform:translateY(105vh)rotate(680deg)}}@media (width<=860px){.layout{grid-template-rows:1fr auto;grid-template-columns:1fr}.panel{border-left:0;border-top:1px solid var(--line);max-height:42vh}.chips{flex-flow:wrap}.chip{flex:140px}.legend,.subtitle{display:none}}