/* Badger red and white, which is the whole palette the university actually
   claims. Everything else here is the cream and near-black it sits on.

   A tile is two elements: an outer one that carries its place on the board and
   slides, and an inner face that carries its colour and pops. Keeping the
   translate and the scale on separate elements means neither animation can
   trample the other. */

:root {
  --red: #C5050C;          /* Badger Red, the official one */
  --red-dark: #9B0000;
  --ink: #121212;
  --paper: #F3EFE7;        /* warm cream, kinder on a dark board than pure white */
  --night: #1B0F10;        /* near-black with a little red in it */
  --well: #2C1D1E;
  --line: #45302F;
  --dim: #9A8785;
  --gap: 3.1%;
  --cell: 21.125%;         /* (100 − 5 × gap) ÷ 4 */
  --slide: 105ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
  color-scheme: dark;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

main {
  height: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: max(.4rem, env(safe-area-inset-top)) .9rem max(.4rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ---- the strip above the board ------------------------------------------ */

header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding-top: .2rem;
}

#wordmark {
  margin: 0;
  font: 600 1.05rem/1 Georgia, "Times New Roman", serif;
  color: var(--paper);
}
#wordmark::after {                     /* a badger's stripe, drawn not borrowed */
  content: "";
  display: block;
  width: 1.6rem;
  height: 3px;
  margin-top: .3rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 0 60%, var(--paper) 60% 100%);
}

#coming { display: grid; justify-items: center; gap: .28rem; }
#coming .label {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
#next { width: 2.4rem; height: 2.75rem; font-size: 1rem; }

#score {
  margin: 0;
  justify-self: end;
  font: 800 1.65rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ---- the board ---------------------------------------------------------- */

#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}

/* Sized in script: a box with both an aspect-ratio and a set height ignores
   the ratio, and a board that is not the shape of its cards looks wrong. */
#grid {
  position: relative;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: .9rem;
  touch-action: none;
  overflow: hidden;
}

/* The empty sockets: the same shape as the cards that sit in them. */
.socket {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  border-radius: .45rem;
  background: rgba(255, 255, 255, .045);
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  transition: transform var(--slide) cubic-bezier(.25,.75,.4,1);
  will-change: transform;
}
.tile.leaving { transition: transform var(--slide) linear, opacity 90ms linear 30ms; opacity: 0; }

.face {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: .45rem;
  background: var(--paper);
  color: var(--ink);
  font: 800 1.5rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 -2px 0 rgba(0,0,0,.06);
}
.face.long { font-size: 1.05rem; }
.face.longer { font-size: .8rem; }

/* A 1 and a 2 are the two halves of the university's colour pair: neither is
   worth anything on its own, and together they make the first card that is. */
.face.v1 {
  background: var(--paper);
  color: var(--red);
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--red);
}
.face.v2 {
  background: var(--red);
  color: #fff;
  box-shadow: 0 2px 0 var(--red-dark);
}
.face.mid { color: var(--red); }
.face.high {
  background: var(--red-dark);
  color: var(--paper);
  box-shadow: 0 2px 0 rgba(0,0,0,.5), inset 0 0 0 2px rgba(243,239,231,.45);
}
.face.top {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--red), 0 3px 14px rgba(197,5,12,.55);
}

.face.landed { animation: land 190ms ease-out; }
@keyframes land {
  from { transform: scale(.7); opacity: .3; }
  to   { transform: scale(1); opacity: 1; }
}
.face.made { animation: made 230ms ease-out; }
@keyframes made {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.15); }
}

/* ---- the end ------------------------------------------------------------ */

#done {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  background: rgba(27,15,16,.965);
  backdrop-filter: blur(3px);
  border-radius: .9rem;
  text-align: center;
}
#done[hidden] { display: none; }
#done .over {
  margin: 0 0 .3rem;
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
#final {
  margin: 0;
  font: 800 3.3rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--red);
}
#best-line { margin: .3rem 0 1.2rem; font-size: .8rem; color: var(--dim); }
#again {
  border: 0;
  border-radius: .5rem;
  padding: .7rem 1.6rem;
  min-height: 44px;
  background: var(--red);
  color: #fff;
  font: 700 .95rem/1 system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
}

/* ---- the strip below ---------------------------------------------------- */

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 1.9rem;
}
#best {
  margin: 0;
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
#lab-offline-status:empty { display: none; }
#lab-offline-status { margin: 0; font-size: .68rem; color: var(--dim); }
#lab-install-open {
  border: 0;
  background: none;
  padding: .3rem .2rem;
  min-height: 32px;
  color: #6E5A58;
  font: inherit;
  font-size: .68rem;
  letter-spacing: .16em;
  cursor: pointer;
}
#lab-install-open:hover, #lab-install-open:focus-visible { color: var(--dim); }

dialog {
  max-width: min(24rem, 88vw);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.25rem;
  background: var(--well);
  color: var(--paper);
  font-size: 15px;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 .5rem; font: 600 1.05rem/1.2 Georgia, serif; }
dialog p { margin: 0 0 1rem; }
dialog button {
  min-height: 44px;
  padding: .6rem 1rem;
  margin-right: .5rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--night);
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .face.landed, .face.made { animation: none; }
}