.match-game{-webkit-tap-highlight-color:transparent;position:relative;padding:0 0 12px}.match-task{text-align:center;color:#f7d68a;font-weight:650;font-size:clamp(1rem,4cqw,1.3rem);padding:2px 4px 14px}.match-board{position:relative;width:100%;aspect-ratio:340/366;border:1px solid #765631;border-radius:18px;overflow:hidden;touch-action:none;user-select:none;direction:ltr;background:transparent;box-shadow:none}.match-cell{position:absolute;width:29.4%;height:43.7%;top:3.5%;left:3.5%}.match-cell[data-cell="1"]{left:38%;top:13%;width:24%;height:22%}.match-cell[data-cell="2"]{left:67%;top:3.5%}.match-cell[data-cell="3"]{left:51%;top:53%;}.match-equals{position:absolute;left:22%;top:66%;width:21%;height:14%;}.match-equals:before,.match-equals:after{content:"";position:absolute;width:85%;height:12%;border-radius:5px;background:linear-gradient(#f5d59c,#b78348);box-shadow:1px 3px 3px #0007;left:6%;top:15%}.match-equals:after{top:60%}.match-segment{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:9px;-webkit-tap-highlight-color:transparent;touch-action:none}.match-segment:before{content:"";position:absolute;left:12%;top:40%;width:76%;height:20%;border-radius:5px;opacity:0;box-shadow:1px 3px 3px #0007;background:linear-gradient(180deg,#f9deb0,#dca86b 55%,#a86b32)}.match-segment:after{content:"";position:absolute;left:10%;top:38%;width:18%;height:24%;background:radial-gradient(ellipse at 38% 32%,#e76d4e,#9b2d22 75%);border-radius:45%;opacity:0;box-shadow:1px 1px 2px #0005}.match-segment.is-occupied:before,.match-segment.is-occupied:after{opacity:1}.match-segment.is-empty{visibility:hidden}.match-board.has-selection .match-segment.is-empty{visibility:visible}.match-board.has-selection .match-segment.is-empty:before{opacity:1;background:transparent;border:1.5px dashed #f7d99b;box-shadow:none}.match-segment.is-selected{outline:2px solid #ffe6a7;background:#ffe6a71a}.match-segment:focus-visible{outline:3px solid #fff4cc;outline-offset:0}.match-segment[data-segment="0"],.match-segment[data-segment="3"],.match-segment[data-segment="6"]{left:17%;top:0;width:66%;height:23%}.match-segment[data-segment="3"]{top:39%}.match-segment[data-segment="6"]{top:78%}.match-segment[data-segment="1"],.match-segment[data-segment="2"],.match-segment[data-segment="4"],.match-segment[data-segment="5"]{left:0;top:14%;width:34%;height:39%}.match-segment[data-segment="2"],.match-segment[data-segment="5"]{left:66%}.match-segment[data-segment="4"],.match-segment[data-segment="5"]{top:53%}.match-segment[data-segment="1"]:before,.match-segment[data-segment="2"]:before,.match-segment[data-segment="4"]:before,.match-segment[data-segment="5"]:before{width:22%;height:78%;left:39%;top:11%}.match-segment[data-segment="1"]:after,.match-segment[data-segment="2"]:after,.match-segment[data-segment="4"]:after,.match-segment[data-segment="5"]:after{width:28%;height:20%;left:36%;top:8%}.match-cell[data-cell="1"] .match-segment{width:100%;height:55%;left:0;top:22%}.match-cell[data-cell="1"] .match-segment[data-segment="1"]{width:55%;height:100%;left:22%;top:0}.match-cell[data-cell="1"] .match-segment[data-segment="1"]:before{width:17%;height:70%;left:42%;top:15%}.match-cell[data-cell="1"] .match-segment[data-segment="1"]:after{width:22%;height:18%;left:39%;top:12%}.match-actions{display:block;padding-top:14px}.match-actions button{min-height:48px;font-size:1rem}.match-actions #next{width:100%}.match-result-close{width:100%;margin-top:12px}.match-ghost{position:absolute;z-index:50;width:65px;height:9px;border-radius:5px;pointer-events:none;background:linear-gradient(#f9deb0,#bd8146);box-shadow:0 4px 8px #0008;transform:translate(-50%,-50%) rotate(-15deg)}.match-ghost:after{content:"";position:absolute;width:13px;height:11px;left:-2px;top:-1px;border-radius:45%;background:#b4412c}#puzzle-option{width:100%}@media(prefers-reduced-motion:no-preference){html:not([data-match-reduced]) .match-segment:before{transition:opacity .12s}}@container gf-page (min-width:600px){.match-task{font-size:1.5rem}.match-board{max-height:680px;aspect-ratio:340/340}.match-actions button{font-size:1.2rem;min-height:56px}}

.match-puzzle-switch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;border:0;border-radius:6px;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}.match-puzzle-switch:focus-visible{outline:2px solid #f7d68a;outline-offset:3px}.match-segment.is-drag-source:before,.match-segment.is-drag-source:after,.match-segment.is-in-flight:before,.match-segment.is-in-flight:after{opacity:0!important}.match-flight{position:absolute;z-index:50;pointer-events:none;border-radius:5px;transform-origin:center;background:linear-gradient(180deg,#f9deb0,#dca86b 55%,#a86b32);box-shadow:1px 3px 3px #0007}.match-flight:after{content:"";position:absolute;left:-3%;top:-10%;width:24%;height:120%;border-radius:45%;background:radial-gradient(ellipse at 38% 32%,#e76d4e,#9b2d22 75%);box-shadow:1px 1px 2px #0005}.match-feedback{margin:12px 0 0;text-align:center;color:#f7d68a;line-height:1.5}

/* Suppress touch selection/highlight, while retaining explicit gold keyboard focus. */
.match-board,.match-board *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.match-board,.match-board:focus,.match-board:focus-visible{outline:none;box-shadow:none}
.match-board ::selection{background:transparent}
.match-segment:focus:not(:focus-visible){outline:none}
/* Disabled marks are still part of the finished equation, at their original brightness. */
.match-segment:disabled{opacity:1;filter:none;cursor:default}
.match-task{display:block}
.match-task select{display:block;width:100%;min-height:48px;border:1px solid #8c713f;border-radius:10px;padding:10px 32px 10px 12px;background:#0b101b;color:#f7d68a;font:inherit;text-align:center;touch-action:manipulation}
.match-task select:focus:not(:focus-visible){outline:none}
.match-task select:focus-visible{outline:2px solid #f7d68a;outline-offset:2px}
.match-confetti{position:absolute;z-index:40;overflow:hidden;pointer-events:none;background:transparent;border-radius:18px}
.match-confetti-piece{position:absolute;left:50%;top:50%;pointer-events:none;border-radius:1px;will-change:transform,opacity}

.match-segment{-webkit-appearance:none;appearance:none}

/* The shared launcher focuses main, not the inner board. Keep that landing landmark
   without the browser's container-wide focus ring; real controls retain their focus. */
main.match-shell:focus,main.match-shell:focus-visible{outline:none!important;outline-offset:0;box-shadow:none}
.match-segment.is-hint-source:before,.match-segment.is-hint-source:after{animation:match-hint-pulse .5s ease-in-out 4}
.match-segment.is-hint-target{visibility:visible}
.match-segment.is-hint-target:before{opacity:1;background:transparent;border:2px dashed #ffe6a7;box-shadow:0 0 7px #edc96c88;animation:match-hint-pulse .5s ease-in-out 4}
.match-segment.is-hint-target:after{opacity:0}
@keyframes match-hint-pulse{0%,100%{opacity:1;filter:brightness(1.5)}50%{opacity:.25;filter:brightness(1)}}
html[data-match-reduced] .match-segment.is-hint-source:before,html[data-match-reduced] .match-segment.is-hint-source:after,html[data-match-reduced] .match-segment.is-hint-target:before{animation:none;filter:brightness(1.6)}
@media(prefers-reduced-motion:reduce){.match-segment.is-hint-source:before,.match-segment.is-hint-source:after,.match-segment.is-hint-target:before{animation:none;filter:brightness(1.6)}}
.match-confetti-piece{box-shadow:0 0 3px #ffdc7244}

.match-action-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch;margin:0}
.match-action-form select{width:100%;min-width:0;min-height:48px;padding:10px 32px 10px 12px;border:1px solid #8c713f;border-radius:10px;background:#0b101b;color:#f7d68a;font:inherit;touch-action:manipulation}
.match-action-form #action-ok{min-width:72px;min-height:48px;padding:10px 18px;margin:0}
.match-action-form select:focus:not(:focus-visible){outline:none}
.match-action-form select:focus-visible{outline:2px solid #f7d68a;outline-offset:2px}
@container gf-page (min-width:600px){.match-action-form select,.match-action-form #action-ok{min-height:56px;font-size:1.2rem}}