.jg{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:560px;margin:0 auto;--slot: 64px;--tray-rows: 2}.jg-loading{text-align:center}.jg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}.jg-meta{display:flex;gap:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:.95rem;white-space:nowrap}.jg-meta b{color:var(--ink);font-size:1.05rem}.jg-sizes{flex:0 1 156px}.jg-sizes .suvi-tab{min-height:38px;font-variant-numeric:tabular-nums}.jg-gear{flex:none;width:44px;padding:0;font-size:1.2rem}.jg-main{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.jg-stage{display:grid;justify-items:center;min-width:0}.jg-view{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:10px;background:#6a6058;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 3px var(--cell),0 0 0 4px var(--line),var(--shadow)}.jg-view.is-zoomed{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.jg-board{position:relative;width:100%;aspect-ratio:4 / 3}.jg-board>canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}.jg-ghost{transition:opacity calc(.6s * var(--motion)) ease}.jg-board:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #00000014}.jg-board.is-target{outline:2px dashed var(--sun);outline-offset:-3px}.jg-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr))}.jg-cell{border:0;margin:0;padding:0;background:transparent;min-width:0;cursor:default;border-radius:4px}.has-sel .jg-cell{cursor:crosshair}.jg-cell:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}.jg-cell.is-wrong{animation:jg-wrong calc(.5s * var(--motion)) ease-out}.jg-cell.is-ping{animation:jg-ping calc(.5s * var(--motion)) ease-out}@keyframes jg-wrong{0%{background:#ef6a4f8c}to{background:transparent}}@keyframes jg-ping{0%{background:#ffffff73}to{background:transparent}}.jg-hint{position:absolute;pointer-events:none;border-radius:6px;box-shadow:0 0 0 3px var(--sun),0 0 18px 4px #ffbe3cbf;background:#ffdc7840}.jg-hint.is-pulse{animation:jg-pulse calc(1.1s * var(--motion)) ease-in-out infinite}@keyframes jg-pulse{50%{box-shadow:0 0 0 3px var(--sun),0 0 6px 1px #ffbe3c66;background:#ffdc7814}}.jg-board>canvas.jg-lock{pointer-events:none;animation:jg-lock calc(.55s * var(--motion)) ease-out forwards;transform-origin:center}@keyframes jg-lock{0%{transform:scale(1.06);filter:brightness(1.35);opacity:1}35%{transform:scale(1);filter:brightness(1.2);opacity:1}to{transform:scale(1);filter:none;opacity:0}}.jg-side{display:flex;flex-direction:column;gap:8px;min-width:0}.jg-tray{display:grid;grid-template-columns:repeat(var(--tray-cols, 5),var(--slot));grid-auto-rows:var(--slot);justify-content:center;align-content:start;gap:4px;padding:5px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;height:calc(var(--tray-rows) * var(--slot) + (var(--tray-rows) - 1) * 4px + 12px);touch-action:none;user-select:none;-webkit-user-select:none}.jg-tray.is-flip-next{animation:jg-flip-next calc(.2s * var(--motion)) ease-out}.jg-tray.is-flip-prev{animation:jg-flip-prev calc(.2s * var(--motion)) ease-out}.jg-tray.is-bump{animation:jg-bump calc(.25s * var(--motion)) ease-out}@keyframes jg-flip-next{0%{transform:translate(26px);opacity:.35}to{transform:none;opacity:1}}@keyframes jg-flip-prev{0%{transform:translate(-26px);opacity:.35}to{transform:none;opacity:1}}@keyframes jg-bump{30%{transform:translate(-6px)}60%{transform:translate(4px)}}.jg-slot{position:relative;display:grid;place-items:center;width:var(--slot);height:var(--slot);padding:0;margin:0;border:0;border-radius:10px;background:transparent;cursor:grab;touch-action:none;-webkit-touch-callout:none;user-select:none}.jg-slot.is-off{display:none}.jg-slot canvas{display:block;pointer-events:none}.jg-slot.is-sel{background:var(--cell-selected);box-shadow:inset 0 0 0 2px var(--sun)}.jg-slot.is-sel canvas{transform:translateY(-2px)}.jg-slot.is-out{background:#0000000a}.jg-slot:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}.jg-tools{order:2;display:grid;grid-template-columns:40px repeat(5,minmax(0,1fr)) 40px;gap:4px}.jg-page span{font-size:1.5rem;font-weight:700}.jg-page small{font-size:.62rem;font-variant-numeric:tabular-nums}.jg-page[disabled]{opacity:.35}.jg-tool{min-height:44px;padding:4px 2px;border-radius:12px;flex-direction:column;gap:0;line-height:1.1}.jg-tool span{font-size:1.05rem;line-height:1}.jg-tool small{font-size:.72rem;font-weight:600;color:var(--ink-2);white-space:nowrap}.jg-tool.is-on small{color:var(--ink)}.jg-done{order:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.jg-msg{min-height:1.3em;text-align:center;color:var(--ink-2);font-size:.9rem;line-height:1.3}.jg-res-title{color:var(--ink-2);margin:0 0 4px}.is-done .jg-view{box-shadow:0 0 0 3px var(--sun),0 0 0 4px var(--line),0 10px 40px #ffb43c59}.jg-drag{position:fixed;left:0;top:0;width:0;height:0;z-index:70;pointer-events:none}.jg-drag canvas{position:absolute;left:0;top:0;will-change:transform;filter:drop-shadow(0 6px 8px rgba(30,15,5,.35))}@media(min-width:900px){.jg{max-width:calc(100vw - 48px);width:max-content;margin-left:50%;transform:translate(-50%);--slot: 78px}.jg-main{grid-template-columns:auto 272px;gap:16px;align-items:start}.jg-view{width:max(420px,min(calc(100vw - 336px),calc((100dvh - 210px) * 4 / 3)))}.jg-tools{order:0;grid-template-columns:repeat(5,minmax(0,1fr))}.jg-page{display:none}.jg-tray{grid-template-columns:repeat(3,var(--slot));height:auto;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;max-height:calc(100dvh - 270px);min-height:240px;scrollbar-width:thin}.jg-slot{touch-action:pan-y}.jg-sizes{flex-basis:200px}}@media(max-width:360px){.jg-meta{gap:8px;font-size:.88rem}.jg-sizes{flex-basis:132px}}