/* Inset browser-local samples; the surrounding product device owns its main bezel. */
.product-mini-game{box-sizing:border-box;width:100%;min-width:0;padding:18px;border:1px solid #4a4551;border-radius:7px;background:linear-gradient(145deg,#27272e,#1f2027);box-shadow:inset 0 1px 0 #a59aac13,inset 0 -3px 6px #0b0c1233;color:#e4dfe8;container-type:inline-size}
.product-mini-game *{box-sizing:border-box}
.product-mini-game .pmg-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid #6e637538;padding-bottom:13px;margin-bottom:18px}
.product-mini-game .pmg-kicker{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.4px;line-height:1.6;color:#b7aebf}
.product-mini-game .pmg-metric{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;line-height:1.6;color:var(--product-accent,#b4c2e8)}
.product-mini-game .pmg-orbit{position:relative;isolation:isolate;aspect-ratio:1;max-width:360px;margin:0 auto 17px;border:1px solid #5a53624d;border-radius:50%;background:radial-gradient(ellipse at 36% 20%,#38363e88,#15171c 75%);box-shadow:inset 0 0 25px #08090b99,0 4px 8px #08090b4d}
.product-mini-game .pmg-track{position:absolute;inset:8%;border:1px solid #aba39c59;border-radius:50%;box-shadow:0 1px 1px #0009,inset 0 1px 1px #e2d8bc0d;pointer-events:none}
.product-mini-game .pmg-track-1{inset:23%;opacity:.8}.product-mini-game .pmg-track-2{inset:38%;opacity:.65}
.product-mini-game .pmg-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:15px ui-monospace,Menlo,monospace;color:#8b849050;pointer-events:none}
.product-mini-game .pmg-piece,.product-mini-game .pmg-target{position:absolute;left:50%;top:50%;width:clamp(30px,13cqw,44px);height:clamp(30px,13cqw,44px);transform:translate(-50%,-50%);color:var(--piece-color);transition:left 233ms ease,top 233ms ease}
.product-mini-game .pmg-symbol-0{--piece-color:var(--product-accent,#b2bea7)}.product-mini-game .pmg-symbol-1{--piece-color:#c9aa9e}.product-mini-game .pmg-symbol-2{--piece-color:#c6bf99}
.product-mini-game .pmg-piece{display:grid;place-items:center;padding:7px;border:1px solid #8b81845c;border-radius:8px;background:linear-gradient(150deg,#36343c,#22232a);box-shadow:0 3px 4px #090a0db3,inset 0 1px 0 #b9adb321;cursor:pointer;z-index:3}
.product-mini-game .pmg-piece svg{display:block;width:100%;height:100%;fill:currentColor;overflow:visible}
.product-mini-game .pmg-piece[aria-pressed=true]{outline:1px solid #e0d9ca;outline-offset:3px}
.product-mini-game .pmg-piece.pmg-ready{border-color:var(--piece-color)}
.product-mini-game .pmg-target{padding:7px;opacity:.45;z-index:1;pointer-events:none}
.product-mini-game .pmg-target svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;overflow:visible}
.product-mini-game .pmg-orbit-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin:12px 0 16px}
.product-mini-game .pmg-direction{display:grid;place-items:center;width:48px;min-height:44px;padding:3px 8px;border:9px solid transparent;border-image:url('/assets/module-frame.png') 180 fill/9px/0 stretch;color:#ded6e3;background:none;font:24px/1 Inter,Arial,sans-serif;cursor:pointer;box-shadow:0 3px 4px #08090d70}
.product-mini-game .pmg-selection{font-size:13px;color:#cfc4d8;min-width:70px;text-align:center}
.product-mini-game .pmg-status{font:13px/1.6 Inter,Arial,sans-serif;letter-spacing:0;color:#c4bdcc;margin:16px 0;min-height:62px}
.product-mini-game .pmg-tools{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #6e637538;padding-top:14px}
.product-mini-game .pmg-tool{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:7px 10px;border:9px solid transparent;border-image:url('/assets/module-frame.png') 180 fill/9px/0 stretch;background:none;color:#cfc7d6;font:11px/1.35 Inter,Arial,sans-serif;cursor:pointer;text-align:center;box-shadow:0 3px 4px #08090d70}
.product-mini-game button:focus-visible{outline:2px solid #eee6d2;outline-offset:4px}
.product-mini-game button:disabled{opacity:.42;cursor:default}
.product-mini-game .pmg-direction:active,.product-mini-game .pmg-tool:active{transform:translateY(2px)}
.product-mini-game .pmg-goal{font:12px/1.5 Inter,Arial,sans-serif;color:var(--product-accent,#b4c2e8);margin:0 0 14px}
.product-mini-game .pmg-sudoku{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;width:100%;max-width:370px;margin:0 auto;border:1px solid #8d8498;padding:3px;background:#77717d;box-shadow:inset 0 2px 3px #11121899,0 4px 7px #090a0e55;border-radius:4px}
.product-mini-game .pmg-cell{display:grid;place-items:center;min-width:0;width:100%;padding:0;aspect-ratio:1;border:0;color:#dce1f0;background:linear-gradient(145deg,#30313a,#272832);font:clamp(12px,4.4cqw,18px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:inset 0 1px 0 #9f9ab51a}
.product-mini-game .pmg-cell:nth-child(3n):not(:nth-child(9n)){border-right:2px solid #77717d}
.product-mini-game .pmg-cell:nth-child(n+19):nth-child(-n+27),.product-mini-game .pmg-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #77717d}
.product-mini-game .pmg-cell.pmg-empty{background:#1d1f27;opacity:1;cursor:default;box-shadow:inset 0 2px 3px #10111780}
.product-mini-game .pmg-cell.pmg-denied{background:#453a35;color:#eddbca;box-shadow:inset 0 0 0 1px #cfab8259}
.product-mini-game .pmg-cell:not(:disabled):hover{background:#424452}
.product-mini-game .pmg-cell:focus-visible{position:relative;z-index:2;outline-offset:-2px}
.product-mini-game[data-solved=true] .pmg-metric,.product-mini-game[data-solved=true] .pmg-status{color:var(--product-accent,#c6d0b5)}
@media(max-width:440px){.product-mini-game{padding:12px}.product-mini-game .pmg-header{gap:7px;margin-bottom:16px}.product-mini-game .pmg-kicker{font-size:9px;letter-spacing:1px}.product-mini-game .pmg-metric{font-size:10px}.product-mini-game .pmg-status{font-size:12px;line-height:1.65;min-height:70px}.product-mini-game .pmg-tool{font-size:11px;padding:5px;min-width:60px}.product-mini-game .pmg-tools{gap:6px}.product-mini-game .pmg-goal{font-size:11px}.product-mini-game .pmg-orbit-controls{gap:12px}}
@media(prefers-reduced-motion:reduce){.product-mini-game *{transition:none!important;animation:none!important}.product-mini-game .pmg-tool:active,.product-mini-game .pmg-direction:active{transform:none}}

.product-mini-game[data-solved=true] .pmg-cell:not(.pmg-empty){opacity:.85}

/* At the desktop service-bay width, keep the board and its controls in one view. */
@media(min-width:900px){
 .product-mini-game{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:24px;align-items:start}
 .product-mini-game .pmg-header{grid-column:1/-1;grid-row:1;margin-bottom:20px}
 .product-mini-game .pmg-orbit,.product-mini-game .pmg-sudoku{grid-column:1;grid-row:2/5;width:100%;max-width:none;margin:0;align-self:start}
 .product-mini-game .pmg-orbit-controls,.product-mini-game .pmg-goal{grid-column:2;grid-row:2;margin:0 0 16px}
 .product-mini-game .pmg-orbit-controls{gap:9px;justify-content:space-between}
 .product-mini-game .pmg-selection{min-width:0;flex:1;overflow-wrap:anywhere}
 .product-mini-game .pmg-direction{flex-shrink:0}
 .product-mini-game .pmg-status{grid-column:2;grid-row:3;min-height:0;margin:0 0 18px;font-size:13px;line-height:1.65}
 .product-mini-game .pmg-tools{grid-column:2;grid-row:4;align-self:end;gap:7px;padding-top:13px}
 .product-mini-game .pmg-tool{min-width:68px;padding:6px 7px}
 .product-mini-game .pmg-piece,.product-mini-game .pmg-target{width:38px;height:38px}
}