.q-board-wrap{aspect-ratio:1;width:100%;min-width:280px;max-width:min(560px,100dvh - 220px);margin-inline:auto;position:relative}.q-board{--n:8;--line:#2b2a28;grid-template-columns:repeat(var(--n), 1fr);grid-template-rows:repeat(var(--n), 1fr);border:3px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fff;border-radius:8px;width:100%;height:100%;display:grid;overflow:hidden}.q-row{display:contents}.q-cell{box-sizing:border-box;background:var(--cell);cursor:pointer;-webkit-tap-highlight-color:transparent;border:1px solid #00000038;border-width:0 1px 1px 0;justify-content:center;align-items:center;min-width:0;padding:0;display:flex;position:relative}.q-row .q-cell:last-child{border-right-width:0}.q-row:last-child .q-cell{border-bottom-width:0}.q-cell.q-br{border-right:2.5px solid var(--line)}.q-cell.q-bb{border-bottom:2.5px solid var(--line)}.q-cell:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:2}@media (hover:hover){.q-cell:hover{filter:brightness(.94)}}.q-cell:after{content:"";pointer-events:none;width:62%;height:62%}.q-cell.is-queen:after{background:#1c1b19;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l1.2-11-5.7 4.6L12 4.5l-4.5 7.1L1.8 7z'/%3E%3Crect x='3' y='19.5' width='18' height='2.5' rx='1'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l1.2-11-5.7 4.6L12 4.5l-4.5 7.1L1.8 7z'/%3E%3Crect x='3' y='19.5' width='18' height='2.5' rx='1'/%3E%3C/svg%3E") 50%/contain no-repeat}.q-cell.is-mark:after{background:#0000008c;width:34%;height:34%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}.q-cell.is-auto-x:after{background:#00000047;width:26%;height:26%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}.q-cell.is-conflict{background-image:repeating-linear-gradient(-45deg,#c81e1e47 0 4px,#0000 4px 9px)}.q-cell.is-bad:after{background:#c62828}.q-cell.q-hint{animation:.9s ease-in-out 3 q-pulse;box-shadow:inset 0 0 0 3px #1b7f3b}.q-cell.q-mistake{animation:.9s ease-in-out 3 q-pulse;box-shadow:inset 0 0 0 3px #c62828}.q-cell.q-cause{animation:.9s ease-in-out 2 q-pulse;box-shadow:inset 0 0 0 3px #5b3cc4e6}@keyframes q-pulse{50%{filter:brightness(1.15)}}@media (prefers-reduced-motion:reduce){.q-cell.q-hint,.q-cell.q-cause,.q-cell.q-mistake{animation:none}}.is-won .q-cell.is-queen:after{animation:.5s ease-out both q-pop}@keyframes q-pop{40%{transform:scale(1.25)}}.q-overlay{background:var(--surface-2);color:var(--fg);z-index:5;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;font-weight:600;display:none;position:absolute;inset:0}.is-paused .q-overlay[data-for=paused],.is-loading .q-overlay[data-for=loading]{display:flex}.q-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite q-spin}@keyframes q-spin{to{transform:rotate(360deg)}}.q-win::backdrop{background:#00000073}.q-win dl>div{border-bottom:1px solid var(--border);justify-content:space-between;gap:1rem;padding:.35rem 0;display:flex}.q-win dt{color:var(--muted)}.q-win dd{font-variant-numeric:tabular-nums;font-weight:650}.q-static .q-cell{cursor:default}.q-static .q-cell.q-last-col{border-right-width:0}.q-static .q-cell.q-last-row{border-bottom-width:0}.q-static .q-cell.is-new.is-mark:after{background:#c62828;width:44%;height:44%}.q-static .q-cell.is-new.is-queen:after{background:#1b7f3b}.q-static .q-cell.is-focus{box-shadow:inset 0 0 0 3px #5b3cc4d9}.q-cell.q-hint.q-cause{box-shadow:inset 0 0 0 3px #1b7f3b}.q-cell:after{z-index:1;position:relative}.q-board.show-patterns .q-cell:before{content:"";pointer-events:none;position:absolute;inset:0}.q-board.show-patterns .q-cell[data-r="0"]:before{background:repeating-linear-gradient(45deg,#00000024 0 2px,#0000 2px 8px)}.q-board.show-patterns .q-cell[data-r="1"]:before{background:repeating-linear-gradient(-45deg,#00000024 0 2px,#0000 2px 8px)}.q-board.show-patterns .q-cell[data-r="2"]:before{background:repeating-linear-gradient(0deg,#00000024 0 2px,#0000 2px 7px)}.q-board.show-patterns .q-cell[data-r="3"]:before{background:repeating-linear-gradient(90deg,#00000024 0 2px,#0000 2px 7px)}.q-board.show-patterns .q-cell[data-r="4"]:before{background:radial-gradient(circle,#00000024 0 1.6px,#0000 2px) 0 0/7px 7px}.q-board.show-patterns .q-cell[data-r="5"]:before{background:linear-gradient(#00000024 0 1.5px,#0000 1.5px) 0 0/9px 9px,linear-gradient(90deg,#00000024 0 1.5px,#0000 1.5px) 0 0/9px 9px}.q-board.show-patterns .q-cell[data-r="6"]:before{background:radial-gradient(circle,#00000024 0 3.5px,#0000 4px) 0 0/13px 13px}.q-board.show-patterns .q-cell[data-r="7"]:before{background:conic-gradient(#00000024 25%, transparent 0 50%, #00000024 0 75%, transparent 0) 0 0 / 12px 12px}.q-board.show-patterns .q-cell[data-r="8"]:before{background:repeating-linear-gradient(45deg,#00000024 0 5px,#0000 5px 14px)}.q-board.show-patterns .q-cell[data-r="9"]:before{background:radial-gradient(circle,#0000 0 3px,#00000024 3.5px 4.5px,#0000 5px) 0 0/13px 13px}.q-board.show-patterns .q-cell[data-r="10"]:before{background:repeating-linear-gradient(90deg,#00000024 0 4px,#0000 4px 14px)}.q-board.show-patterns .q-cell[data-r="11"]:before{background:0 0}.q-board.show-patterns .q-cell.is-auto-x:after{background:#0006}.q-board .q-cell.is-mark.is-auto-x:after{background:#0000008c;width:34%;height:34%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}.q-board .q-cell.is-mark.is-fresh:after{background:#000000d9;width:42%;height:42%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 1.2l7.6 7.6M8.8 1.2l-7.6 7.6' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 1.2l7.6 7.6M8.8 1.2l-7.6 7.6' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}