.g-pattern-complete{--pc-grass:var(--cat-patterns);--pc-sky:var(--cat-logic);--pc-sun:var(--c-accent);--pc-berry:var(--cat-language);--pc-plum:var(--cat-memory);--pc-min:32px;gap:var(--sp-4);width:100%;max-width:480px;margin-inline:auto}.g-pattern-complete .pc-dots{flex-wrap:wrap;justify-content:center;gap:6px;min-height:10px;display:flex}.g-pattern-complete .pc-dot{border-radius:var(--r-full);background:var(--c-border);width:8px;height:8px}.g-pattern-complete .pc-dot.is-done{background:color-mix(in srgb, var(--c-good) 70%, var(--c-border))}.g-pattern-complete .pc-dot.is-now{background:var(--c-brand);transform:scale(1.5)}.g-pattern-complete .pc-seqwrap{width:100%;padding-block:var(--sp-1);overscroll-behavior-inline:contain;scrollbar-width:thin;overflow-x:auto}.g-pattern-complete .pc-seq{grid-template-columns:repeat(var(--pc-n,6), minmax(var(--pc-min), 1fr));width:100%;max-width:calc(var(--pc-n,6) * 66px);gap:clamp(4px,1.6vw,10px);margin-inline:auto;display:grid}.g-pattern-complete .pc-cell{aspect-ratio:1;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);place-items:center;min-width:0;display:grid}.g-pattern-complete .pc-cell.is-gap{border:2px dashed var(--c-brand);background:var(--c-brand-soft)}.g-pattern-complete .pc-qmark{color:var(--c-brand);font-size:clamp(var(--fs-md), 5vw, var(--fs-xl));font-weight:var(--fw-black);line-height:1}.g-pattern-complete .pc-cell.is-unit{border-color:var(--c-good);background:color-mix(in srgb, var(--c-good) 12%, var(--c-surface))}.g-pattern-complete .pc-cell.is-filled{border-color:var(--c-good);background:var(--c-good-soft)}.g-pattern-complete .pc-glyph{height:auto;display:block}.g-pattern-complete .pc-c-grass{color:var(--pc-grass)}.g-pattern-complete .pc-c-sky{color:var(--pc-sky)}.g-pattern-complete .pc-c-sun{color:var(--pc-sun)}.g-pattern-complete .pc-c-berry{color:var(--pc-berry)}.g-pattern-complete .pc-c-plum{color:var(--pc-plum)}.g-pattern-complete .pc-z1{width:44%}.g-pattern-complete .pc-z2{width:66%}.g-pattern-complete .pc-z3{width:90%}.g-pattern-complete .pc-r90{transform:rotate(90deg)}.g-pattern-complete .pc-r180{transform:rotate(180deg)}.g-pattern-complete .pc-r270{transform:rotate(270deg)}.g-pattern-complete .pc-options{gap:var(--sp-2);grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.g-pattern-complete .pc-opt{min-height:78px;min-width:var(--tap);padding:var(--sp-2);border:2px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface);box-shadow:var(--shadow-xs);place-items:center;display:grid}.g-pattern-complete .pc-optbox{place-items:center;width:54px;height:54px;display:grid}.g-pattern-complete .pc-opt.is-out{border-style:dashed;border-color:var(--c-border);background:var(--c-surface-2);box-shadow:none;opacity:.45}.g-pattern-complete .pc-opt.is-right{border-color:var(--c-good);background:var(--c-good-soft)}.g-pattern-complete .pc-msg{max-width:34ch;min-height:2.6em;color:var(--c-text-dim);font-size:var(--fs-md);font-weight:var(--fw-med);text-align:center;text-wrap:balance;margin:0}.g-pattern-complete .pc-msg.is-good{color:var(--c-good);font-weight:var(--fw-bold)}.g-pattern-complete .pc-msg.is-almost{color:var(--c-warn)}.g-pattern-complete .pc-chips{justify-content:center;gap:var(--sp-2);display:flex}.g-pattern-complete .pc-chip{align-items:center;gap:var(--sp-1);padding-block:var(--sp-1);padding-inline:var(--sp-3);border-radius:var(--r-full);background:var(--c-brand-soft);color:var(--c-brand);font-size:var(--fs-sm);font-weight:var(--fw-semi);display:inline-flex}.g-pattern-complete .pc-note{max-width:32ch;color:var(--c-text-faint);font-size:var(--fs-xs);text-align:center;margin:0}.g-pattern-complete .pc-cell,.g-pattern-complete .pc-opt,.g-pattern-complete .pc-dot{transition:none}.g-pattern-complete .pc-opt:active{transform:none}.g-pattern-complete.is-motion .pc-cell,.g-pattern-complete.is-motion .pc-opt{transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur-fast) var(--ease)}.g-pattern-complete.is-motion .pc-dot{transition:background var(--dur) var(--ease), transform var(--dur) var(--ease)}.g-pattern-complete.is-motion .pc-opt:active{transform:scale(.96)}.g-pattern-complete.is-motion .pc-cell.is-unit{animation:pc-pulse 1s var(--ease) 3}.g-pattern-complete.is-motion .pc-cell.is-filled .pc-glyph{animation:pc-drop var(--dur-slow) var(--ease-bounce) 1}@keyframes pc-pulse{0%,to{scale:1}50%{scale:1.08}}@keyframes pc-drop{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}