.patches-game{--game-accent:#ffb84d}.patches-board{aspect-ratio:var(--patch-columns) / var(--patch-rows);grid-template-columns:repeat(var(--patch-columns), minmax(0, 1fr));grid-template-rows:repeat(var(--patch-rows), minmax(0, 1fr));isolation:isolate;touch-action:none;user-select:none;background:#111719;border:2px solid #485357;border-radius:.75rem;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 2rem #0008,0 .9rem 2rem #0003}.patches-cell{grid-column:calc(var(--patch-cell-column) + 1);grid-row:calc(var(--patch-cell-row) + 1);border-bottom:1px dashed #74808470;border-right:1px dashed #74808470;min-width:0}.patches-rectangle,.patches-hint-rectangle{grid-column:calc(var(--patch-left) + 1) / span var(--patch-width);grid-row:calc(var(--patch-top) + 1) / span var(--patch-height);pointer-events:none;z-index:2;margin:3px}.patches-rectangle{background:linear-gradient(145deg, #ffffff16, transparent 48%), color-mix(in srgb, var(--patch-color), #101719 48%);border:3px solid var(--patch-color);box-shadow:inset 0 0 1.4rem #0004, 0 0 .8rem color-mix(in srgb, var(--patch-color), transparent 72%);border-radius:.5rem;transition:background-color .12s,border-color .12s;position:relative}.patches-rectangle__size{color:#fff;font-variant-numeric:tabular-nums;background:#101719d9;border:1px solid #ffffff8f;border-radius:999px;justify-content:center;align-items:center;min-width:1.85rem;height:1.85rem;padding:0 .42rem;font-size:clamp(.72rem,3vw,1rem);font-weight:800;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 .2rem .65rem #0008}.patches-board[data-complete=true]{animation:1s cubic-bezier(.2,.75,.25,1) both patches-complete-pulse}.patches-rectangle[data-invalid=true]{background:repeating-linear-gradient(135deg,#6b1f2ad9 0 .65rem,#32181ddb .65rem 1.3rem);border-color:#ff6b82;animation:.85s ease-in-out infinite alternate patches-invalid-pulse;box-shadow:inset 0 0 0 1px #ffd0d8}.patches-hint-rectangle{background:color-mix(in srgb, var(--patch-color), transparent 82%);border:3px dashed color-mix(in srgb, var(--patch-color), white 35%);box-shadow:inset 0 0 1rem color-mix(in srgb, var(--patch-color), transparent 68%), 0 0 1rem color-mix(in srgb, var(--patch-color), transparent 35%);z-index:5;border-radius:.5rem;animation:1s ease-in-out infinite alternate patches-hint-pulse}.patches-clue{background:linear-gradient(145deg, #ffffff34, transparent 48%), var(--patch-color);border:2px solid color-mix(in srgb, var(--patch-color), white 28%);color:#fff;grid-column:calc(var(--patch-clue-column) + 1);grid-row:calc(var(--patch-clue-row) + 1);cursor:pointer;text-shadow:0 1px 2px #0008;z-index:6;border-radius:.55rem;justify-content:center;place-self:center;align-items:center;gap:.12em;width:min(82%,3.15rem);min-width:1.8rem;height:min(82%,3.15rem);min-height:1.8rem;padding:.15rem .28rem;font-size:clamp(.7rem,3.2vw,1.15rem);line-height:1;display:flex;position:relative;box-shadow:inset 0 -.3rem .6rem #0002,0 .25rem .65rem #0006}.patches-clue:focus-visible{outline-offset:3px;outline:3px solid #fff1a8}.patches-clue:after{content:"";border:1px dashed #ffffff64;border-radius:.45rem;position:absolute;inset:-.32rem}.patches-clue[data-hint]{box-shadow:0 0 0 3px #fff1a8,0 0 1.1rem #ffd45ac7}.patches-clue[data-hint=mistake]{box-shadow:0 0 0 3px #ff9bad,0 0 1.1rem #ff5473c7}.patches-clue__shape{border:max(2px,.13em) solid #fff;border-radius:.22rem;width:66%;height:66%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 2px #0007}.patches-clue__shape[data-shape=any]{background:#ffffff2a;border-style:dashed;border-color:#ffffff90}.patches-clue__shape[data-shape=wide]{width:80%;height:43%}.patches-clue__shape[data-shape=tall]{width:43%;height:80%}.patches-clue[data-shape=any] strong{font-size:1.22em}.patches-clue strong{font-variant-numeric:tabular-nums;z-index:1;place-items:center;line-height:1;display:grid;position:absolute;inset:0}.patches-hint{color:#ffe9a1;text-align:center;background:#ffd45a12;border:1px solid #ffd45a55;border-radius:.65rem;margin:.8rem 0 0;padding:.7rem .85rem;font-size:.8rem}.patches-hint[data-kind=mistake]{color:#ffb8c4;background:#ff547312;border-color:#ff789055}@keyframes patches-invalid-pulse{to{filter:brightness(1.28)}}@keyframes patches-hint-pulse{to{opacity:.55}}@keyframes patches-complete-pulse{35%{filter:brightness(1.28)saturate(1.12);border-color:#fff1a8;transform:scale(1.018);box-shadow:inset 0 0 2rem #fff1a829,0 0 2.4rem #ffd45a99}}@media (prefers-reduced-motion:reduce){.patches-board[data-complete=true],.patches-rectangle[data-invalid=true],.patches-hint-rectangle{animation:none}}