@font-face {
  font-family: "Mahjongg CJK";
  src: url("../fonts/mahjongg-cjk.woff2") format("woff2");
  font-weight: normal;
  font-display: block;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --tisch: #9fb5a7;
  --tisch-licht: #c3d3c6;
  --tinte: #1c2c29;
  --tinte-leise: #3d524c;
  --stein-flaeche-oben: #fffdf6;
  --stein-flaeche-unten: #f1e9d6;
  --stein-rand: #d6c8a3;
  --stein-seite: #e2d4b0;
  --stein-ruecken: #2b5d53;
  --stein-schatten: rgb(20 40 34 / 0.42);
  --stein-tief: #7d6f4c;
  --auswahl: #c98a12;
  --auswahl-flaeche: #f8d77f;
  --blockiert: rgb(168 52 36 / 0.75);
  --fokus: #1d4f8f;
  --knopf-rand: rgb(28 44 41 / 0.32);
  --knopf-hover: rgb(255 253 246 / 0.45);
  --schleier: rgb(159 181 167 / 0.55);
  --hinweis: #1f7a63;
  --hinweis-flaeche: #cdeedd;
  --gesperrt: rgb(28 44 41 / 0.2);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tisch: #15282a;
    --tisch-licht: #20403f;
    --tinte: #dfe8e1;
    --tinte-leise: #a9bcb3;
    --stein-flaeche-oben: #f7f2e4;
    --stein-flaeche-unten: #e3d9c0;
    --stein-rand: #bfae86;
    --stein-seite: #cbbb94;
    --stein-ruecken: #3f8576;
    --stein-schatten: rgb(0 0 0 / 0.6);
    --stein-tief: #4a4330;
    --auswahl: #e6a62c;
    --auswahl-flaeche: #f5d27a;
    --fokus: #8cc4ff;
    --knopf-rand: rgb(223 232 225 / 0.3);
    --knopf-hover: rgb(223 232 225 / 0.1);
    --schleier: rgb(21 40 42 / 0.6);
    --hinweis: #2fb08e;
    --hinweis-flaeche: #c4ecd9;
    --gesperrt: rgb(10 22 22 / 0.34);

    color-scheme: dark;
  }
}

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

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template:
    "kopf leiste" auto
    "tisch tisch" minmax(0, 1fr)
    "fuss fuss" auto
    / minmax(0, 1fr) auto;
  background: radial-gradient(120% 90% at 50% 38%, var(--tisch-licht), var(--tisch) 72%) var(--tisch);
  color: var(--tinte);
  font: 400 1.0625rem/1.4 "Alegreya Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#steinflaechen {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.kopf {
  grid-area: kopf;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.25rem;
  padding: max(0.75rem, env(safe-area-inset-top)) 1.25rem 0.25rem max(1.25rem, env(safe-area-inset-left));
}

.titel {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.status {
  margin: 0;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

.status #rest,
.uhr #zeit,
.uhr #bestzeit {
  color: var(--tinte);
  font-weight: 700;
}

.uhr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.9rem;
  margin: 0;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

.regel {
  font-size: 0.875rem;
}

.leiste {
  grid-area: leiste;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 0.25rem 0;
}

.knopf {
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1.5px solid var(--knopf-rand);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  .knopf:hover:not(:disabled) {
    background: var(--knopf-hover);
  }
}

.knopf:disabled {
  opacity: 0.45;
  cursor: default;
}

.knopf[aria-pressed="true"] {
  border-color: var(--stein-ruecken);
  box-shadow: inset 0 0 0 1.5px var(--stein-ruecken);
  background: var(--knopf-hover);
}

select.knopf {
  padding-right: 0.6rem;
}

select.knopf option {
  background: var(--tisch);
  color: var(--tinte);
}

.zaehler {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 0.4em;
  padding: 0 0.3em;
  border-radius: 0.7em;
  background: var(--stein-ruecken);
  color: #fffdf6;
  font-size: 0.8em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.zaehler[hidden],
.knopf[hidden] {
  display: none;
}

.zoom {
  display: none;
}

.knopf:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.knopf-voll {
  border-color: var(--stein-ruecken);
  background: var(--stein-ruecken);
  color: #fffdf6;
}

.knopf-voll:hover {
  background: color-mix(in srgb, var(--stein-ruecken) 85%, #000);
}

.tisch {
  grid-area: tisch;
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-width: 0;
  min-height: 0;
}

.rahmen {
  grid-area: 1 / 1;
  place-self: stretch;
  display: grid;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  padding: 0.75rem 1.25rem;
}

.brett {
  margin: auto;
  --h: calc(var(--w) * 4 / 3);
  --rund: calc(var(--w) * 0.11);

  grid-area: 1 / 1;
  position: relative;
  width: calc(var(--sx) * var(--w) / 2 + (var(--zmax) + 1) * var(--d));
  height: calc(var(--sy) * var(--h) / 2 + (var(--zmax) + 1) * var(--d));
  transition: opacity 200ms, filter 200ms;
}

.stein {
  position: absolute;
  z-index: 0;
  left: calc(var(--x) * var(--w) / 2 + (var(--zmax) - var(--z)) * var(--d));
  top: calc(var(--y) * var(--h) / 2 + (var(--zmax) - var(--z)) * var(--d));
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: var(--rund);
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.stein::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    calc(var(--d) * 0.25) calc(var(--d) * 0.25) 0 var(--stein-seite),
    calc(var(--d) * 0.5) calc(var(--d) * 0.5) 0 var(--stein-seite),
    calc(var(--d) * 0.75) calc(var(--d) * 0.75) 0 var(--stein-ruecken),
    var(--d) var(--d) 0 var(--stein-ruecken),
    calc(var(--d) * 1.2) calc(var(--d) * 1.6) calc(var(--d) * 1.8) var(--stein-schatten);
}

.flaeche {
  --tiefe: calc((var(--zmax) - var(--z)) * 4%);

  position: absolute;
  inset: 0;
  padding: calc(var(--w) * 0.04);
  border-radius: inherit;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--stein-flaeche-oben), var(--stein-tief) var(--tiefe)),
    color-mix(in srgb, var(--stein-flaeche-unten), var(--stein-tief) var(--tiefe)));
  box-shadow: inset 0 0 0 1px var(--stein-rand);
}

.flaeche svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stein.hinweis .flaeche {
  background: linear-gradient(160deg, #effaf4, var(--hinweis-flaeche));
  box-shadow: inset 0 0 0 max(2px, calc(var(--w) * 0.05)) var(--hinweis);
}

.brett.frei-zeigen .stein.gesperrt .flaeche::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gesperrt);
}

@media (hover: hover) {
  .stein:hover .flaeche {
    background: linear-gradient(160deg, #fff, var(--stein-flaeche-oben));
  }
}

.stein[aria-pressed="true"] .flaeche {
  background: linear-gradient(160deg, #fdf0c8, var(--auswahl-flaeche));
  box-shadow: inset 0 0 0 max(2px, calc(var(--w) * 0.05)) var(--auswahl);
}

.stein:focus-visible {
  outline: none;
}

.stein:focus-visible .flaeche {
  outline: 3px solid var(--fokus);
  outline-offset: 1px;
}

.stein.blockiert .flaeche {
  animation: blockiert 360ms ease-out;
}

.stein.weg {
  pointer-events: none;
  animation: weg 240ms ease-in forwards;
}

@keyframes blockiert {
  30% {
    box-shadow: inset 0 0 0 max(2px, calc(var(--w) * 0.05)) var(--blockiert);
  }
}

@keyframes weg {
  to {
    opacity: 0;
    transform: translate(calc(var(--d) * -0.6), calc(var(--d) * -0.6)) scale(0.94);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .stein.blockiert {
    animation: wackeln 360ms ease-out;
  }

  @keyframes wackeln {
    25% { transform: translateX(calc(var(--w) * -0.03)); }
    60% { transform: translateX(calc(var(--w) * 0.03)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .stein.weg {
    animation: none;
  }

  .brett {
    transition: none;
  }
}

.tisch.hat-meldung .brett {
  opacity: 0.35;
  filter: saturate(0.4);
  pointer-events: none;
}

.meldung {
  grid-area: 1 / 1;
  z-index: 1;
  width: min(22rem, 100%);
  padding: 1.5rem 1.75rem 1.6rem;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--stein-flaeche-oben), var(--stein-flaeche-unten));
  color: #1b2433;
  box-shadow:
    0 0 0 1px var(--stein-rand),
    4px 4px 0 var(--stein-seite),
    8px 8px 0 var(--stein-ruecken),
    10px 14px 24px var(--stein-schatten);
  text-align: center;
}

.meldung[hidden] {
  display: none;
}

.meldung h2 {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  line-height: 1.15;
}

.meldung p {
  margin: 0 0 1.25rem;
  color: #3a4250;
}

.meldung-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.fuss {
  grid-area: fuss;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem max(1.25rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  color: var(--tinte-leise);
  font-size: 0.875rem;
}

.partie {
  color: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration-color: var(--knopf-rand);
  text-underline-offset: 0.2em;
}

.partie:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

@media (orientation: portrait) and (max-width: 820px) {
  body {
    grid-template:
      "kopf" auto
      "tisch" minmax(0, 1fr)
      "leiste" auto
      "fuss" auto
      / minmax(0, 1fr);
  }

  .kopf {
    justify-content: space-between;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .titel {
    font-size: 1.5rem;
  }

  .rahmen {
    padding: 0.5rem 0.25rem;
  }

  .leiste {
    justify-content: center;
    padding: 0.5rem 0.75rem 0.25rem;
  }

  .knopf {
    padding: 0 0.8rem;
  }

  .zoom {
    display: inline-block;
    min-width: 4.25rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body {
    grid-template:
      "kopf leiste" auto
      "tisch leiste" minmax(0, 1fr)
      "fuss leiste" auto
      / minmax(0, 1fr) auto;
  }

  .kopf {
    padding-top: max(0.4rem, env(safe-area-inset-top));
  }

  .titel {
    font-size: 1.25rem;
  }

  .leiste {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.4rem;
    padding: max(0.4rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.4rem, env(safe-area-inset-bottom)) 0;
  }

  .knopf {
    padding: 0 0.8rem;
  }

  .rahmen {
    padding: 0.4rem 0.75rem;
  }
}