.match-game{position:relative;padding-bottom:12px;-webkit-tap-highlight-color:transparent}.match-task{display:block;text-align:center;margin:0 0 12px;color:#f7d68a;font-weight:650}.match-stage{position:relative;max-width:680px;margin-inline:auto}.match-board{position:relative;width:100%;aspect-ratio:1;border:1px solid #765631;border-radius:18px;overflow:hidden;touch-action:none;user-select:none;direction:ltr;background:transparent;box-shadow:none}.geometry-goal{margin:8px 0;text-align:center;font-size:clamp(1.15rem,5cqw,1.55rem);font-weight:700;color:#f7d68a}.geometry-note{margin:0 0 14px;text-align:center;color:#c1bdaf;font-size:.85rem;line-height:1.5}.match-segment{position:absolute;height:44px;border:0;padding:0;background:transparent;border-radius:6px;cursor:pointer;touch-action:none;transform-origin:center}.match-segment:before{content:"";position:absolute;left:0;top:calc(50% - 4px);width:100%;height:8px;border-radius:5px;opacity:0;background:linear-gradient(#f9deb0,#dca86b 55%,#a86b32);box-shadow:1px 3px 3px #0007}.match-segment:after{content:"";position:absolute;left:-2px;top:calc(50% - 5px);width:12px;height:10px;border-radius:45%;opacity:0;background:radial-gradient(ellipse at 38% 32%,#e76d4e,#9b2d22 75%)}.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:1px}.match-actions{display:flex;gap:10px;padding-top:14px}.match-actions button{min-height:48px;font-size:1rem}.match-actions #next,.match-actions #replay{flex:1;min-width:0;margin:0}.match-ghost{position:absolute;z-index:50;width:65px;height:8px;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:12px;height:10px;left:-2px;top:-1px;border-radius:45%;background:#b4412c}#puzzle-option{width:100%}@container gf-page (min-width:600px){.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{width:100%;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}}

.match-entry-layer{position:absolute;z-index:45;overflow:hidden;pointer-events:none;border-radius:18px}
.match-segment.is-entering:before,.match-segment.is-entering:after,.match-equals.is-entering:before,.match-equals.is-entering:after{opacity:0!important}
.match-flight.is-equality:after{display:none}

.match-stage{position:relative}
.match-feedback{position:absolute;z-index:60;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);box-sizing:border-box;margin:0;padding:12px 16px;border:1px solid #c59b53;border-radius:16px;background:#161d2bf5;box-shadow:0 6px 20px #0006;color:#fff0ce;font-size:clamp(.85rem,3.6cqw,1rem);line-height:1.45;text-align:center;overflow-wrap:anywhere;pointer-events:none}
.match-feedback:after{content:"";position:absolute;left:calc(50% - 7px);bottom:-8px;width:14px;height:14px;background:#161d2b;border-right:1px solid #c59b53;border-bottom:1px solid #c59b53;transform:rotate(45deg)}
.match-segment.is-replay-source:before,.match-segment.is-replay-source:after{animation:match-hint-pulse .4s ease-in-out 2}
html[data-match-reduced] .match-segment.is-replay-source:before,html[data-match-reduced] .match-segment.is-replay-source:after{animation:none;filter:brightness(1.6)}
@media(prefers-reduced-motion:reduce){.match-segment.is-replay-source:before,.match-segment.is-replay-source:after{animation:none;filter:brightness(1.6)}}

/* The task floats upwards from just above the uppermost match. Only its body scrolls. */
.geometry-task-bubble{position:absolute;z-index:65;left:50%;bottom:calc(86% + 10px);transform:translateX(-50%);width:min(330px,calc(100% - 20px));max-height:190px;display:flex;flex-direction:column;border:1px solid #c59b53;border-radius:16px;background:#161d2b;box-shadow:0 6px 20px #0007;color:#fff0ce}
.geometry-task-bubble:after{content:"";position:absolute;left:calc(50% - 7px);bottom:-8px;width:14px;height:14px;background:#161d2b;border-right:1px solid #c59b53;border-bottom:1px solid #c59b53;transform:rotate(45deg)}
.geometry-task-header{display:flex;flex:0 0 44px;align-items:center;justify-content:space-between;gap:12px;padding:0 6px 0 14px;border-bottom:1px solid #c59b5344;color:#f7d68a}
.geometry-task-header #task-close{flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;font-size:1.6rem}
.geometry-task-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 14px 14px;line-height:1.5;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}
.geometry-task-scroll>p{margin:0 0 10px;font-size:.95rem;text-align:left}
.geometry-task-scroll>p:last-child{margin-bottom:0}
.geometry-task-scroll .geometry-goal{font-weight:700;color:#f7d68a}
.geometry-task-scroll:focus-visible{outline:2px solid #f7d68a;outline-offset:-3px;border-radius:8px}
.match-task #task-open{min-height:44px;margin:0;padding:6px 16px}
@media(max-height:500px){.geometry-task-bubble{max-height:145px}}

@media(prefers-reduced-motion:no-preference){html:not([data-match-reduced]) .geometry-task-bubble{animation:geometry-task-rise .22s ease-out}}
@keyframes geometry-task-rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Task, native action menu and OK stay in a single shrinking grid row. */
.match-action-form{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
.match-action-form #task-open{min-width:0;min-height:48px;padding:8px 10px;margin:0;white-space:nowrap;font-size:.95rem}
.match-action-form #action-ok{min-width:54px;padding:8px 12px}
@container gf-page (min-width:600px){.match-action-form #task-open{min-height:56px;font-size:1.1rem}}