@font-face {
  font-family: "DSEG";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local(''),
    url("./DSEG7Classic-Regular-subset.woff2") format("woff2"),
    url("./DSEG7Classic-Regular-subset.woff") format("woff");
}

/* Remove default paddign and margin */
* {
  padding: 0;
  margin: 0;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Set core body defaults */
body {
  min-height: min(100vh, 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* display: grid; */
  /* place-items: center; */
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* Elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


:root {
  font-family: sans-serif;
  color-scheme: light;

  --main-grey: light-dark(#E9E9ED, #2B2A33);
  --light-grey: light-dark(#F3F3F5, #302F3A);
  /* --dark-grey: light-dark(#D9D9DD, #1B1A23); */
  --display-fg: #F43827;
  --display-bg: #252525;

  --1-color: light-dark(blue, lightblue);
  --2-color: light-dark(darkgreen, lightgreen);
  --3-color: light-dark(red, indianred);
  --4-color: light-dark(darkblue, royalblue);
  --5-color: light-dark(saddlebrown, sandybrown);
  --6-color: light-dark(darkcyan, cyan);
  --7-color: light-dark(black, white);
  --8-color: light-dark(darkgrey, lightgrey);

  @media (prefers-color-scheme: dark) {
    color-scheme: dark;
  }
}

/* .center { */
/* box-sizing: content-box; */
/* margin-inline: auto; */
/* max-inline-size: 80ch; */
/* } */

button,
header,
.board,
.counter,
.minefield,
table {
  border: 4px inset hsl(from var(--main-grey) h s calc(1.1 * l));
  background-color: var(--main-grey);
}


.board {
  font-size: 2em;
  padding: 0.5em;
  border-style: outset;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-width: 100vw;
  max-height: 100vh;
}


header {
  font-size: 1.2em;
  padding: 0.3em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: fit-content;
}

header>button {
  font-size: 1.2em;
}

.counter {
  font-family: "DSEG", monospace;
  color: var(--display-fg);
  background-color: var(--display-bg);
  padding: 0.1em;

  @media (prefers-color-scheme: dark) {
    text-shadow: red 0 0 20px;
  }
}


.counter::before {
  position: absolute;
  content: "888";
  opacity: 0.2;
}

.minefield {
  display: grid;
  overflow: scroll;
  /* grid-template-columns: repeat(9, 1cm); */
}


button {
  min-width: 1cm;
  min-height: 1cm;
  font-size: 0.7em;

  border-style: outset;

  &:hover:not([disabled]) {
    background-color: hsl(from var(--main-grey) h s calc(0.9 * l));
  }

  &:active:not([disabled]) {
    background-color: hsl(from var(--main-grey) h s calc(0.8 * l));
  }

  @media (prefers-color-scheme: dark) {
    &:hover:not([disabled]) {
      background-color: hsl(from var(--main-grey) h s calc(1.3 * l));
    }

    &:active:not([disabled]) {
      background-color: hsl(from var(--main-grey) h s calc(1.4 * l));
    }
  }
}

.minefield button {
  font-weight: bold;
}

.minefield button[data-state="flagged"]::after {
  content: '🚩';
}

button[data-state="uncovered"],
button[data-state="saturated"] {
  border: 2px solid hsl(from var(--main-grey) h s calc(0.9 * l));
}

[data-number] {
  font-weight: bold;
}

[data-number="1"] {
  color: var(--1-color);
}

[data-number="2"] {
  color: var(--2-color);
}

[data-number="3"] {
  color: var(--3-color);
}

[data-number="4"] {
  color: var(--4-color);
}

[data-number="5"] {
  color: var(--5-color);
}

[data-number="6"] {
  color: var(--6-color);
}

[data-number="7"] {
  color: var(--7-color);
}

[data-number="8"] {
  color: var(--8-color);
}

/* .sidebyside { */
/* display: flex; */
/* gap: 1em; */
/* } */

table {
  border-style: outset;
  /* border-collapse: collapse; */
}

/* details { */
/* width: 60ch; */
/* } */

/* tbody tr { */
/* counter-increment: rowNumber; */
/* } */

/* tbody tr::before  { */
/* position: absolute; */
/* content: counter(rowNumber) "."; */
/* padding-inline-end: 1.5em; */
/* } */

/* tbody td:first-child::before  { */
/* position: absolute; */
/* content: counter(rowNumber) "."; */

/* } */

th,
td {
  padding: 0.5em;
}

td:last-child {
  text-align: right;
}