.game{align-items:center;gap:var(--space-3);flex-direction:column;flex:1;display:flex}.mbar,.mboard,.mmode,.after{--w:min(360px, calc(100vw - 2 * var(--space-4)))}.mbar{width:var(--w);color:var(--ink-muted);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:14px;display:flex}.mbar b{color:var(--ink)}.mboard{--n:8;width:var(--w);aspect-ratio:1;grid-template-rows:repeat(var(--n), 1fr);border:2px solid var(--line-strong);border-radius:var(--radius-sm);background-color:var(--line);touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;display:grid;overflow:hidden}.mrow{grid-template-columns:repeat(var(--n), 1fr);min-height:0;display:grid}.mcell{border:1px solid var(--line);background-color:var(--key);min-width:0;min-height:0;box-shadow:inset 0 2px 0 color-mix(in srgb, var(--key) 60%, white), inset 0 -3px 0 color-mix(in srgb, var(--key) 62%, black);color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:calc((var(--w) - 4px) / var(--n) * .52);cursor:pointer;-webkit-touch-callout:none;border-radius:0;place-items:center;padding:0;line-height:1;display:grid;position:relative}.mcell>*{grid-area:1/1}.mcell:focus-visible{box-shadow:inset 0 0 0 3px var(--kobalt);z-index:1;outline:none}.mcell.open{background-color:var(--surface-raised);box-shadow:none}.mcell.open:focus-visible{box-shadow:inset 0 0 0 3px var(--kobalt)}.mcell svg{width:66%;height:66%;display:none}.mcell.flagged .flag,.mcell.mined .mine,.mcell.hit .mine{display:block}.flag{fill:var(--ink)}.flag .cloth{fill:var(--mango);stroke:var(--ink);stroke-width:1.2px;stroke-linejoin:round}.mine{fill:var(--ink)}.mine .shine{fill:var(--surface-raised)}.mcell.hit{background-color:var(--ink)}.mcell.hit .mine{fill:var(--surface-raised)}.mcell.hit .mine .shine{fill:var(--ink)}.mcell.wrong:after{content:"";background-image:linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ink) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));position:absolute;inset:14%}.mcell.wrong .flag{opacity:.55}.n1{color:var(--kobalt)}.n2{color:color-mix(in srgb, var(--minze) 55%, var(--ink))}.n3{color:color-mix(in srgb, var(--koralle) 70%, var(--ink))}.n4{color:color-mix(in srgb, var(--kobalt) 55%, var(--koralle))}.n5{color:color-mix(in srgb, var(--mango) 45%, var(--ink))}.n6{color:color-mix(in srgb, var(--minze) 30%, var(--ink))}.n7,.n8{color:var(--ink)}.mboard.over .mcell{cursor:default}.mboard.won{border-color:var(--minze)}.mmode{width:var(--w);box-sizing:border-box;margin:0;display:flex}.mmode button{min-height:44px;padding:0 var(--space-2);flex:1;justify-content:center;align-items:center;gap:6px;display:inline-flex}.mmode svg{fill:currentColor;width:20px;height:20px}.mmode .tool path{stroke:currentColor}.mmode .flag .cloth{fill:currentColor;stroke:none}.mmode button:focus-visible{box-shadow:var(--focus-ring);outline:2px solid #0000}.after{width:var(--w);align-items:center;gap:var(--space-2);text-align:center;flex-direction:column;display:flex}.after p{margin:0}.after .actions{width:100%}