/* Сапёр, Пятнашки, Крестики-нолики, Тетрис: все цвета только из переменных сайта */

/* общие элементы управления */
.mg-row{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .7rem;margin:0 0 .5rem}
.mg-seg{display:inline-flex;max-width:100%;padding:.2rem;gap:.15rem;border:1px solid var(--line2);border-radius:999px;background:var(--paper);overflow-x:auto}
.mg-seg[hidden]{display:none}
.mg-seg button{min-height:38px;padding:.3rem .85rem;border:0;border-radius:999px;background:transparent;color:var(--mute);font:600 .88rem var(--sans);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.mg-seg button:hover{color:var(--ink)}
.mg-seg button[aria-checked="true"]{background:var(--ink);color:var(--bg)}
.mg-seg button:focus-visible,.mg-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mg-status{margin:0;flex:1 1 12rem;min-height:1.5em;color:var(--mute);font-size:.95rem}
.mg-link{border:0;background:none;padding:.4rem .2rem;color:var(--mute);font:500 .85rem var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mg-link:hover{color:var(--ink)}
#gmines .overlay.banner,#gttt .overlay.banner,#gtetris .overlay.banner{position:static;margin-top:.6rem;padding:.8rem 1rem;gap:.3rem;border:1px solid var(--line2);border-radius:16px;background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--shadow)}
#gmines .overlay.banner h3,#gttt .overlay.banner h3,#gtetris .overlay.banner h3{font-size:1.45rem}
#gmines .overlay.banner p,#gttt .overlay.banner p,#gtetris .overlay.banner p{margin:0 0 .3rem}

/* Сапёр */
#gmines .board{position:relative;width:min(100%,560px,max(220px,calc((100vh - 170px) * var(--cols,9) / var(--rows,9))));padding:clamp(6px,1.6vw,10px);border-radius:20px;background:var(--board);box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .25s;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#gmines .board.flagmode{box-shadow:0 0 0 1px var(--line) inset,0 0 0 3px var(--accent)}
#gmines .board.shake{animation:ms-shake .4s}
@keyframes ms-shake{20%{transform:translateX(-5px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
#gmines .ms-grid{display:grid;grid-template-columns:repeat(var(--cols,9),minmax(0,1fr));gap:clamp(1px,.5vw,3px);container-type:inline-size}
#gmines .ms-c{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;min-width:0;padding:0;border:0;border-radius:clamp(3px,1vw,7px);cursor:pointer;
  background:color-mix(in srgb,var(--paper) 86%,var(--ink));color:var(--ink);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 70%,transparent),0 1px 0 color-mix(in srgb,var(--ink) 25%,transparent);
  font:800 clamp(.7rem,calc(100cqw / var(--cols,9) * .56),1.5rem)/1 var(--sans);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s,transform .12s}
#gmines .ms-c:hover{background:color-mix(in srgb,var(--paper) 78%,var(--accent2))}
#gmines .ms-c:active{transform:scale(.92)}
#gmines .ms-c:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:1}
#gmines .ms-c.open{cursor:default;background:var(--cell);box-shadow:none;transform:none;animation:ms-open .22s var(--d,0ms) both}
@keyframes ms-open{from{transform:scale(.7);opacity:.2}to{transform:scale(1);opacity:1}}
#gmines .ms-c svg{width:68%;height:68%;display:block;overflow:visible}
#gmines .ms-c .fl-pole{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;fill:none}
#gmines .ms-c .fl-cloth{fill:var(--accent)}
#gmines .ms-c.flag{animation:ms-flag .2s cubic-bezier(.3,1.5,.5,1)}
@keyframes ms-flag{from{transform:scale(.6)}to{transform:scale(1)}}
#gmines .ms-c.mine svg,#gmines .ms-c.wrong svg{width:78%;height:78%}
#gmines .ms-c.mine svg path,#gmines .ms-c.wrong svg path{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;fill:none}
#gmines .ms-c.mine svg circle,#gmines .ms-c.wrong svg circle{fill:var(--ink)}
#gmines .ms-c .mn-shine{fill:var(--paper)!important}
#gmines .ms-c.mine{background:var(--cell);box-shadow:none;cursor:default}
#gmines .ms-c.boom{background:color-mix(in srgb,var(--accent) 60%,var(--paper))}
#gmines .ms-c.wrong{background:color-mix(in srgb,var(--accent) 25%,var(--cell));cursor:default}
#gmines .ms-c.wrong::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:3px;border-radius:2px;background:var(--accent);transform:rotate(-45deg)}
#gmines .ms-c[data-n="1"]{color:hsl(215 var(--qs,62%) var(--ql,27%))}
#gmines .ms-c[data-n="2"]{color:hsl(135 var(--qs,62%) var(--ql,27%))}
#gmines .ms-c[data-n="3"]{color:hsl(350 var(--qs,62%) var(--ql,27%))}
#gmines .ms-c[data-n="4"]{color:hsl(265 var(--qs,62%) var(--ql,27%))}
#gmines .ms-c[data-n="5"]{color:hsl(28 var(--qs,62%) var(--ql,27%))}
#gmines .ms-c[data-n="6"]{color:hsl(180 var(--qs,62%) var(--ql,27%))}
#gmines .ms-c[data-n="7"]{color:hsl(310 var(--qs,62%) var(--ql,27%))}
#gmines .ms-c[data-n="8"]{color:hsl(75 var(--qs,62%) var(--ql,27%))}
#gmines .mg-mode[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Пятнашки */
#g15 .f-board{position:relative;aspect-ratio:1;width:min(100%,560px,max(240px,calc(100vh - 190px)));padding:clamp(5px,1.6vw,9px);border-radius:20px;background:var(--board);box-shadow:0 0 0 1px var(--line) inset;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#g15 .f-field{position:relative;width:100%;height:100%;container-type:inline-size}
#g15 .f-tile{position:absolute;left:0;top:0;width:calc(100% / var(--n));height:calc(100% / var(--n));padding:clamp(2px,.8vw,4px);border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .17s cubic-bezier(.3,.8,.4,1);will-change:transform}
#g15 .f-tile span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:clamp(8px,2.4vw,14px);color:var(--ink);
  background:var(--paper);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 60%,transparent),0 0 0 1px var(--line),0 5px 10px -6px color-mix(in srgb,var(--ink) 55%,transparent);
  font:700 calc(100cqw / var(--n) * .42)/1 var(--serif);font-variant-numeric:tabular-nums;transition:background .3s,color .3s,box-shadow .3s,translate .15s,scale .12s}
#g15 .f-tile:hover span{translate:0 -2px}
#g15 .f-tile:active span{scale:.95}
#g15 .f-tile:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:14px}
#g15 .f-tile.home span{background:color-mix(in srgb,var(--accent2) 20%,var(--paper));color:color-mix(in srgb,var(--accent2) 75%,var(--ink))}

/* Крестики-нолики */
#gttt .t-board{position:relative;width:min(100%,560px,max(240px,calc(100vh - 230px)));padding:clamp(8px,2vw,12px);border-radius:20px;background:var(--board);box-shadow:0 0 0 1px var(--line) inset}
#gttt .t-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(6px,1.8vw,10px);aspect-ratio:1}
#gttt .t-c{display:flex;align-items:center;justify-content:center;min-width:0;padding:0;border:0;border-radius:clamp(10px,3vw,16px);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background:color-mix(in srgb,var(--paper) 72%,var(--board));box-shadow:0 0 0 1px var(--line),0 4px 8px -6px color-mix(in srgb,var(--ink) 50%,transparent);transition:background .2s,opacity .3s,transform .15s}
#gttt .t-c:hover{background:var(--paper)}
#gttt .t-c:active{transform:scale(.96)}
#gttt .t-c:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#gttt .t-c.x,#gttt .t-c.o{cursor:default}
#gttt .t-grid.wait .t-c,#gttt .t-grid.done .t-c{pointer-events:none}
#gttt .t-c svg{width:66%;height:66%;fill:none;stroke-width:11;stroke-linecap:round;overflow:visible}
#gttt .t-c.x svg{stroke:var(--accent)}
#gttt .t-c.o svg{stroke:var(--accent2)}
#gttt .t-c svg path,#gttt .t-c svg circle{stroke-dasharray:1;stroke-dashoffset:0;animation:t-draw .3s ease-out both}
#gttt .t-c svg .b{animation-delay:.12s}
@keyframes t-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
#gttt .t-grid.won .t-c:not(.win){opacity:.45}
#gttt .t-c.win{background:color-mix(in srgb,var(--paper) 80%,var(--accent2))}
#gttt .t-line{position:absolute;left:clamp(8px,2vw,12px);top:clamp(8px,2vw,12px);width:calc(100% - 2 * clamp(8px,2vw,12px));aspect-ratio:1;pointer-events:none;overflow:visible}
#gttt .t-line line{stroke:var(--ink);stroke-width:9;stroke-linecap:round;opacity:0;stroke-dasharray:1;stroke-dashoffset:1}
#gttt .t-line line.show{opacity:.85;animation:t-draw .5s .15s ease-out both}

/* Тетрис */
#gtetris .tt-board{position:relative;width:min(100%,560px,max(240px,calc((100vh - 200px) * 14.4 / 20)));-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#gtetris .tt-canvas{display:block;width:100%;aspect-ratio:14.4 / 20;touch-action:none}
#gtetris .tt-probe{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden}
#gtetris .tt-pad{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(4px,1.6vw,8px);margin-top:.7rem}
#gtetris .tt-b{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0;border:1px solid var(--line2);border-radius:16px;background:var(--paper);color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s,transform .1s}
#gtetris .tt-b:active{transform:scale(.94);background:color-mix(in srgb,var(--accent) 22%,var(--paper))}
#gtetris .tt-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#gtetris .tt-b svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine) and (min-width:700px){#gtetris .tt-pad{display:none}}
@media (max-width:640px){#gtetris .stats .btn{flex:1 1 40%}#gtetris .stat{flex:1 1 calc(25% - .5rem);padding-inline:.5rem}#gtetris .stat b{font-size:1.25rem}#gtetris .stat span{letter-spacing:.06em;font-size:.62rem}}
@media (max-width:640px){#gttt .mg-seg,#gmines .mg-seg{flex:1 1 100%}#gttt .mg-seg button,#gmines .mg-seg button{flex:1;padding-inline:.4rem}}