/* Queens board. Tokens come from style.css (Moonlit); region colours are the game's own saturated set, light and dark. */
:root { --q0: #f2c94c; --q1: #b3adf5; --q2: #8fdfb9; --q3: #f6a08f; --q4: #93c3f5; --q5: #e1a0e6; --q6: #c3e07d; --q7: #f4b3c9; --q8: #7fd6d9; --q9: #f8c48a; --q10: #d7cfc2;
  --queen: #1b1a3f; --xmark: rgba(27, 26, 63, .6); --grid-line: rgba(27, 26, 63, .16); --grid-thick: #1b1a3f; --hl: #6d66e0; }
[data-theme='dark'] { --q0: #7d5f16; --q1: #4d48b0; --q2: #23735a; --q3: #99443b; --q4: #2d5c96; --q5: #7a3f8c; --q6: #4f6f1e; --q7: #8a4462; --q8: #206b70; --q9: #8f5a24; --q10: #5b5566;
  --queen: #f7f0dc; --xmark: rgba(247, 240, 220, .6); --grid-line: rgba(247, 240, 220, .16); --grid-thick: #efedff; --hl: #9a94ff; }

.queens { width: 100%; position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; --cs: 48px; }
.queens-stage { position: relative; width: fit-content; margin: 0 auto; }
.queens-board { display: grid; position: relative; touch-action: none; border-radius: 10px; overflow: hidden; cursor: pointer; }
.qc { width: var(--cs); height: var(--cs); position: relative; display: grid; place-items: center; background: var(--qbg); transition: filter .15s ease; }
.qc::after { content: ""; position: absolute; inset: 0; background: var(--bad); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.qc .mark { width: 100%; height: 100%; display: grid; place-items: center; color: var(--queen); position: relative; z-index: 1; }
.qc .mark svg { display: block; grid-area: 1 / 1; }
.qc .mark .q { width: 76%; height: 76%; opacity: 0; transform: scale(.4); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.qc .mark .x { width: 52%; height: 52%; opacity: 0; color: var(--xmark); transform: scale(.6); }
.qc.x .mark .x { opacity: 1; transform: scale(1); transition: opacity .14s ease, transform .18s cubic-bezier(.3, 1.4, .5, 1); }
.qc.q .mark .q { opacity: 1; transform: scale(1); transition: opacity .12s ease, transform .24s cubic-bezier(.3, 1.6, .5, 1); }
.qc.fade .mark .x { transition: opacity .16s ease, transform .16s ease; }
@media (hover: hover) { .queens-board:not(.locked) .qc:hover { filter: brightness(1.06); } }
.qc.bad::after { opacity: .28; }
.qc.bad .mark .q { color: var(--bad); filter: drop-shadow(0 0 3px rgba(217, 92, 74, .5)); }
.qc.shake .mark { animation: qshake .32s ease; }
@keyframes qshake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px) rotate(-4deg); } 40% { transform: translateX(3px) rotate(4deg); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* grid lines + region borders: one SVG on top of the cells */
.queens-lines { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.queens-lines .thin { stroke: var(--grid-line); stroke-width: 1; }
.queens-lines .thick { stroke: var(--grid-thick); stroke-width: 3; stroke-linecap: round; }
.queens-lines .frame { fill: none; stroke: var(--grid-thick); stroke-width: 3; }

/* hints: dim everything except the cells the hint talks about */
.queens-board.hinting .qc:not(.hl):not(.anchor) { filter: brightness(.55) saturate(.6); }
[data-theme='dark'] .queens-board.hinting .qc:not(.hl):not(.anchor) { filter: brightness(.62); }
.qc.hl { z-index: 3; box-shadow: inset 0 0 0 3px var(--hl), inset 0 0 0 5px rgba(255, 255, 255, .85); border-radius: 4px; }
.qc.anchor { z-index: 3; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); border-radius: 4px; }
[data-theme='dark'] .qc.anchor { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.queens-hint { margin: 12px auto 0; max-width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 10px 12px; font-size: 14px; color: var(--ink); display: flex; gap: 10px; align-items: center; line-height: 1.4; animation: hintin .25s cubic-bezier(.3, 1.2, .5, 1); }
.queens-hint[hidden] { display: none; }
.queens-hint .ic { width: 22px; height: 22px; flex: none; color: var(--accent-2); }
.queens-hint .ic svg { width: 22px; height: 22px; }
.queens-hint p { margin: 0; flex: 1; }
.queens-hint .btn-small { flex: none; }
@keyframes hintin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* win: queens turn gold row by row, then confetti */
.queens-board.won .qc.q .mark .q { color: var(--accent); filter: drop-shadow(0 0 4px rgba(233, 181, 74, .6)) drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); animation: qgold .55s cubic-bezier(.3, 1.4, .5, 1); animation-delay: var(--d, 0s); animation-fill-mode: both; }
[data-theme='dark'] .queens-board.won .qc.q .mark .q { color: var(--accent); }
.queens-board.won .qc.q { --qbg-won: color-mix(in srgb, var(--qbg) 70%, #fff); }
@keyframes qgold { 0% { transform: scale(1); } 45% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
.queens-board.won.quiet .qc.q .mark .q { animation: none; }
.queens-board.locked { cursor: default; }
.queens-confetti { position: absolute; inset: -40px -20px 0; width: calc(100% + 40px); height: calc(100% + 40px); pointer-events: none; z-index: 30; }
.queens-help { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 10px 0 0; }

/* page bits */
.queens-page .board-wrap { padding: 14px; }
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon { position: relative; }
.btn-icon .cnt { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.btn-icon .cnt:empty { display: none; }
.snd-off .ic-on, .btn-icon:not(.snd-off) .ic-off { display: none; }
.q-settings { position: relative; }
.q-pop { position: absolute; right: 0; top: 46px; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); box-shadow: var(--shadow-hover); padding: 6px 4px; min-width: 230px; }
.q-pop[hidden] { display: none; }
.q-pop label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.q-pop .sw { width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background .15s ease; }
.q-pop .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.q-pop input { position: absolute; opacity: 0; pointer-events: none; }
.q-pop input:checked + .sw { background: var(--good); }
.q-pop input:checked + .sw::after { transform: translateX(16px); }
.q-pop input:focus-visible + .sw { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.q-meta { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.q-meta .pill { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.q-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; }
.q-pick button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.q-pick button[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 480px) { .queens-page .board-wrap { padding: 6px; } .queens-page .wrap-game, .wrap-game.queens-page { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .qc .mark .q, .qc .mark .x { transition: none !important; } .queens-board.won .qc.q .mark .q { animation: none; } }