*{box-sizing:border-box}html,body{color:#171717;background:#fff;min-height:100%;margin:0;font-family:ui-monospace,monospace}body{place-items:center;min-height:100dvh;padding:18px;display:grid}.game{gap:18px;width:min(100%,580px);display:grid}.top{justify-content:space-between;align-items:center;gap:16px;display:flex}.title{letter-spacing:.17em;font-size:clamp(22px,5vw,34px);font-weight:900;line-height:1}.restart{color:#171717;cursor:pointer;background:#fff;border:2px solid #171717;width:44px;height:44px;font-size:29px;line-height:1}.restart:active{color:#fff;background:#171717}.status{justify-content:space-between;gap:12px;display:flex}.side{opacity:.55;border:2px solid #aaa;align-items:center;gap:10px;min-width:110px;padding:8px 12px;transition:opacity .2s,border-color .2s;display:flex}.side.active{opacity:1;border-color:#171717}.side:last-child{justify-content:flex-end}.disc{border:2px solid #171717;border-radius:50%;flex:none;width:25px;height:25px}.disc.white{background:#fff}.disc.black{background:#171717}.count{font-variant-numeric:tabular-nums;font-size:20px;font-weight:900}.board{aspect-ratio:1;touch-action:manipulation;background:#0d5738;border:4px solid #171717;grid-template-columns:repeat(8,1fr);gap:2px;width:100%;display:grid;box-shadow:0 8px 22px #0002}.cell{cursor:pointer;outline-offset:-5px;perspective:160px;background:#198451;border:0;place-items:center;min-width:0;padding:0;display:grid;position:relative}.cell:focus-visible{outline:3px solid #fff}.cell .piece{width:74%;height:74%;transform-style:preserve-3d;border-radius:50%;display:block;position:relative}.face{-webkit-backface-visibility:hidden;backface-visibility:hidden;border:2px solid #111;border-radius:50%;position:absolute;inset:0;box-shadow:inset -3px -3px #0002,0 2px 2px #0003}.face.black{background:#111}.face.white{background:#fff}.face.back{transform:rotateY(180deg)}.piece.flip{animation:.52s ease-in-out both flip}.piece.new{animation:.22s ease-out place}.cell .hint{opacity:.8;background:#e8ffe4;border-radius:50%;width:12%;height:12%}@keyframes flip{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@keyframes place{0%{transform:scale(.2)}to{transform:scale(1)}}.result{text-align:center;letter-spacing:.08em;min-height:30px;font-size:18px;font-weight:700}.thinking .cell{cursor:default}@media (max-width:480px){body{padding:12px}.game{gap:15px}.board{border-width:3px;gap:1px}.face{border-width:2px}.side{min-width:90px;padding:7px 9px}.count{font-size:17px}.disc{width:20px;height:20px}.result{font-size:15px}}@media (prefers-reduced-motion:reduce){.piece.flip,.piece.new{animation-duration:.01ms}}.game{width:min(100%,580px,100dvh - 235px);display:block;position:relative}.top{width:100%;position:absolute;bottom:calc(100% + 68px);left:0}.status{width:100%;position:absolute;bottom:calc(100% + 10px);left:0}.board{box-shadow:none;position:relative}.face{box-shadow:none}.result{z-index:2;color:#fff;letter-spacing:.12em;pointer-events:none;opacity:0;visibility:hidden;background:#114e32d9;place-items:center;min-height:0;font-size:clamp(29px,7vw,56px);font-weight:900;display:grid;position:absolute;inset:0}.result.visible{visibility:visible;animation:1.4s ease-out .35s both resultAppear}@keyframes resultAppear{0%{opacity:0}to{opacity:1}}@media (max-width:480px){.game{width:min(100%,100dvh - 205px)}.top{bottom:calc(100% + 63px)}}@media (prefers-reduced-motion:reduce){.result.visible{animation-duration:.01ms;animation-delay:0s}}.cell .preview-piece{background:#0c5b38;border:2px dashed #fff;border-radius:50%;width:74%;height:74%}.cell:has(.preview-piece){background:#238b59}.board{-webkit-user-select:none;user-select:none}.cell{touch-action:none}.cell .piece,.cell .preview-piece{z-index:1;border-radius:0;display:block;position:absolute}.cell .piece.h-left,.cell .preview-piece.h-left{width:calc(87% + 2px);height:74%;left:13%}.cell .piece.h-right,.cell .preview-piece.h-right{width:87%;height:74%;left:-2px}.cell .piece.v-top,.cell .preview-piece.v-top{width:74%;height:calc(87% + 2px);top:13%}.cell .piece.v-bottom,.cell .preview-piece.v-bottom{width:74%;height:87%;top:-2px}.h-left .face,.preview-piece.h-left{border-right:0;border-radius:999px 0 0 999px}.h-right .face,.preview-piece.h-right{border-left:0;border-radius:0 999px 999px 0}.v-top .face,.preview-piece.v-top{border-bottom:0;border-radius:999px 999px 0 0}.v-bottom .face,.preview-piece.v-bottom{border-top:0;border-radius:0 0 999px 999px}.cell .preview-piece{opacity:.55;background:#124c36;border:2px dashed #fff}.cell .preview-piece.h-left,.cell .preview-piece.h-right,.cell .preview-piece.v-top,.cell .preview-piece.v-bottom{background:#124c36}.cell .preview-piece:not(.h-left):not(.h-right):not(.v-top):not(.v-bottom){border-radius:14px;width:74%;height:74%}.cell .piece .face{box-shadow:none}.piece.flip{animation-duration:.9s}.piece.new{animation-duration:.38s}.setup{z-index:3;color:#fff;background:#114e32ee;flex-direction:column;justify-content:center;align-items:center;gap:22px;display:flex;position:absolute;inset:0}.setup[hidden]{display:none}.setup label{letter-spacing:.12em;justify-content:center;align-items:center;gap:.35em;font-size:clamp(22px,5vw,31px);font-weight:900;line-height:1;display:flex}.setup output{text-align:center;min-width:1ch;font:inherit;letter-spacing:0;line-height:1;display:block}.setup input[type=range]{accent-color:#fff;cursor:pointer;width:min(68%,300px);height:32px}.setup button{letter-spacing:.1em;color:#114e32;cursor:pointer;background:#fff;border:2px solid #fff;padding:10px 24px;font:900 20px ui-monospace,monospace}.setup button:active{color:#fff;background:#114e32}@media (prefers-reduced-motion:reduce){.piece.flip,.piece.new{animation-duration:.01ms}}.domino-layer{z-index:1;pointer-events:none;position:absolute;inset:0}.domino{transform-style:preserve-3d;will-change:transform;position:absolute}.domino .face{box-shadow:none;border:2px solid #111;border-radius:999px}.domino.flip{animation:.9s ease-in-out both flip}.domino.new{animation:.38s ease-out place}.result{justify-content:center;align-items:center;gap:16px;display:flex}.winner-disc{border-radius:50%;flex:none;width:clamp(36px,9vw,60px);height:clamp(36px,9vw,60px);display:inline-block}.winner-disc.black{background:#111;border:3px solid #fff}.winner-disc.white{background:#fff;border:3px solid #111}@media (prefers-reduced-motion:reduce){.domino.flip,.domino.new{animation-duration:.01ms}}.restart{color:#171717;background:0 0;border:0;place-items:center;width:44px;height:44px;padding:2px;display:grid}.restart svg{fill:none;stroke:currentColor;stroke-width:3.5px;stroke-linecap:square;stroke-linejoin:miter;width:clamp(29px,6.5vw,42px);height:clamp(29px,6.5vw,42px)}.restart:active{color:#171717;opacity:.55;background:0 0}.restart:focus-visible{outline-offset:3px;outline:2px solid #171717}.title{letter-spacing:.1em;white-space:nowrap;align-items:center;gap:.04em;display:flex}.logo-o{border:.18em solid;border-radius:999px;flex:none;width:1.34em;height:.67em;display:inline-block}.title .logo-o:nth-child(2){margin-right:.125em}.title .logo-o:nth-child(4){margin-left:-.05em}.title .logo-o:nth-child(2){background:#171717;margin-left:.02em}.setup input[type=range]{-webkit-appearance:none;appearance:none;outline-offset:5px;background:0 0}.setup input[type=range]::-webkit-slider-runnable-track{background:#fff;border:1px solid #fff;border-radius:999px;height:6px}.setup input[type=range]::-moz-range-track{background:#fff;border:1px solid #fff;border-radius:999px;height:6px}.setup input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;border:2px solid #111;border-radius:50%;width:22px;height:22px;margin-top:-8px}.setup input[type=range]::-moz-range-thumb{background:#fff;border:2px solid #111;border-radius:50%;width:22px;height:22px}.loading{z-index:100;color:#171717;opacity:1;background:#fff;place-items:center;transition:opacity .38s;display:grid;position:fixed;inset:0}.loading.done{opacity:0;pointer-events:none}.loading .title{font-size:clamp(34px,8vw,60px)}.loading .logo-o{transform-style:preserve-3d;will-change:transform}.loading .logo-o:nth-child(2){animation:1.4s ease-in-out .1s infinite loadingFlip}.loading .logo-o:nth-child(4){animation:1.4s ease-in-out .72s infinite loadingFlip}@keyframes loadingFlip{0%,20%{transform:rotateY(0)}55%,78%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}@media (prefers-reduced-motion:reduce){.loading .logo-o:nth-child(2),.loading .logo-o:nth-child(4){animation:none}.loading{transition:none}}.game-shell{display:contents}.game{transform:translateY(12px)}