:root{--border-color: #dfdfdf;--border-color-dark-1: #cccccc;--border-color-dark-3: #aaaaaa;--game-bg-start: rgb(226, 243, 239);--game-bg-end: rgb(221, 237, 245);--game-bg-dark-20: rgb(180.8, 194.4, 191.2);--t-color-main: rgb(0, 112, 238);--t-color-main-light-3: #7da1ff;--t-color-main-light-7: #d2dcff;--t-color-main-light-9: #edf0ff;--t-color-main-dark-2: #004ba3;--text-color: #333333;--text-color-light-9: #ffffff;--danger-color: #ff3950;--success-color: #67c23a;--warning-color: #e6a23c;--t-radius: 4px;--site-bg: #2f4454;--site-backdrop-scrim: color-mix( in srgb, color-mix(in srgb, var(--site-bg, #2f4454), black 50%) 45%, transparent 55% );--site-backdrop-scrim: oklch( from var(--site-bg, #2f4454) calc(l * 0.5) c h / 0.45 );--site-backdrop-solid: color-mix( in srgb, var(--site-bg, #2f4454), black 50% );--site-backdrop-solid: oklch( from var(--site-bg, #2f4454) calc(l * 0.5) c h );--site-jigsaw-canvas-bg: color-mix( in srgb, var(--site-bg, #2f4454), black 15% );--site-jigsaw-canvas-bg: oklch( from var(--site-bg, #2f4454) calc(l * 0.9) c h )}.hidden{display:none}.none{display:none}.show{display:block}.container{margin:0 auto;width:980px}.container:after{content:"";display:block;height:0;clear:both;overflow:hidden}.game-control{display:flex;flex-wrap:wrap;row-gap:10px;gap:1rem}.game-type{display:flex;padding:0px;text-align:center;gap:1rem}.game-type strong{font-weight:normal;margin-right:.5em}.game-type a{cursor:pointer;color:#0070ee}.playfield__inner{text-align:center}.playfield__layout{display:inline-block}.ui-check{margin:0;vertical-align:middle;cursor:pointer;border:none;background:none;padding:0;font-size:clamp(17px,1.05vw,1.05rem);display:inline-block;text-decoration:underline}.ui-check:hover{opacity:.8}.btn{display:inline-block;padding:5px 8px;margin:0;font-size:16px;vertical-align:middle;border:1px solid #ccc}input,select,textarea{font-size:16px;vertical-align:middle;background:rgba(0,0,0,0);outline:none}.game-control input[type=number]{width:60px}@media(min-width: 768px)and (max-width: 1024px){.container{width:95%}}@media(min-width: 375px)and (max-width: 768px){.container{width:95%}.game-type strong{display:none}}@media(max-width: 375px){.container{width:98%;max-width:480px}.game-type strong{display:none}}:root{--board-cell-size: 30px;--board-gap: 1px;--board-padding: 6px;--board-bg: #d6dbe7;--board-border: #808080;--board-cell-closed-bg: #c5c5c5;--board-cell-closed-border: rgba(0,0,0,0.10);--board-cell-open-bg: #c5c5c5;--board-cell-open-border: rgba(0,0,0,0.12);--board-flag-color: #ff3950;--board-mine-color: #111;--board-num-1: #1b5ece;--board-num-2: #2b820c;--board-num-3: #f30000;--board-num-4: #123d86;--board-num-5: #a10000;--board-num-6: #1f1f1f;--board-num-7: #3a3a3a;--board-num-8: #7a7a7a}.ui-radio{display:flex;flex-wrap:wrap;row-gap:10px;gap:1rem}.ui-radio button,.ui-check{border:none;background:none;padding:0;font-size:17px;cursor:pointer;text-decoration:underline}.ui-radio button:hover,.ui-check:hover{opacity:.8}.playfield__board{display:grid;grid-template-columns:repeat(var(--board-cols, 16), var(--board-cell-size));grid-template-rows:repeat(var(--board-rows, 16), var(--board-cell-size));background:#fff;user-select:none;-webkit-user-select:none;touch-action:pan-y;padding:.5rem;gap:1.8px}.board .board__cell{width:var(--board-cell-size);height:var(--board-cell-size);box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-weight:600;line-height:1;font-size:24px;cursor:pointer;position:relative}.board .board__cell.board__cell--closed{background:linear-gradient(#fefefe, #f5f7fb) padding-box,linear-gradient(#cfd6e1, #dfe5f0) border-box;border:1px solid rgba(0,0,0,0);box-shadow:inset 1px 1px 0 hsla(0,0%,100%,.8),inset -1px -1px 0 #9aa3af}.board .board__cell.board__cell--closed:hover{filter:brightness(1.03)}.board .board__cell.board__cell--closed:active{transform:scale(0.98)}.board .board__cell.board__cell--open{cursor:default;background:#d6dbe6;border:1px solid #b8c0cc;box-shadow:inset 0 1px 2px rgba(0,0,0,.1215686275)}.board .board__cell.board__cell--flag{color:rgba(0,0,0,0)}.board .board__cell.board__cell--flag::before{content:"";position:absolute;inset:0;background-color:var(--board-flag-color, #ff3950);-webkit-mask-image:url(/assets/icons/flag.svg);mask-image:url(/assets/icons/flag.svg);-webkit-mask-size:calc(var(--board-cell-size)*.7);mask-size:calc(var(--board-cell-size)*.7);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.board .board__cell.board__cell--question{color:rgba(0,0,0,0)}.board .board__cell.board__cell--question::before{content:"";position:absolute;inset:0;background-color:var(--board-flag-color, #333);-webkit-mask-image:url(/assets/icons/question-mark.svg);mask-image:url(/assets/icons/question-mark.svg);-webkit-mask-size:calc(var(--board-cell-size)*.65);mask-size:calc(var(--board-cell-size)*.65);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.board .board__cell.board__cell--mine{color:rgba(0,0,0,0)}.board .board__cell.board__cell--mine::before{content:"";position:absolute;inset:0;background-color:var(--board-mine-color, #111);-webkit-mask-image:url(/assets/icons/mine.svg);mask-image:url(/assets/icons/mine.svg);-webkit-mask-size:calc(var(--board-cell-size)*.62);mask-size:calc(var(--board-cell-size)*.62);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.board .board__cell.board__cell--mine.board__cell--triggered{background-color:var(--board-flag-color, #ff3950)}.board .board__cell.board__cell--mine.board__cell--triggered::before{background-color:#fff;-webkit-mask-image:url(/assets/icons/explosion.svg);mask-image:url(/assets/icons/explosion.svg);-webkit-mask-size:calc(var(--board-cell-size)*.7);mask-size:calc(var(--board-cell-size)*.7)}.board .board__cell.board__cell--1{color:var(--board-num-1)}.board .board__cell.board__cell--2{color:var(--board-num-2)}.board .board__cell.board__cell--3{color:var(--board-num-3)}.board .board__cell.board__cell--4{color:var(--board-num-4)}.board .board__cell.board__cell--5{color:var(--board-num-5)}.board .board__cell.board__cell--6{color:var(--board-num-6)}.board .board__cell.board__cell--7{color:var(--board-num-7)}.board .board__cell.board__cell--8{color:var(--board-num-8)}[data-role=mines].hud__item--clickable{cursor:pointer;user-select:none}
