/* Old Cafe look (approved 7 Nov, sample-3b, no sunlight). The screen is laid out on the sample's
   1024 x 1536 frame: --u is one sample pixel, so phone and desktop keep the same proportions. */
@font-face {
  font-family: "Cafe Serif";
  src: url(fonts/serif-600.woff2) format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Cafe Serif";
  src: url(fonts/serif-italic-500.woff2) format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --u: calc(min(100vw, 66.667vh) / 1024);
  --ink: #3a2412;
  --brass: #dcb67c;
  --gold-tint: rgba(226, 170, 40, 0.62);
  --select: rgba(70, 130, 220, 0.55);
  --select-line: rgba(150, 195, 255, 0.95);
  --oxblood: #8e1c1c;
  --board: calc(980 * var(--u));
}
@supports (height: 1dvh) {
  :root { --u: calc(min(100vw, 66.667dvh) / 1024); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: #16260f url(leather.webp);
  background-size: 400px;
  color: var(--ink);
  font-family: "Cafe Serif", Georgia, "Times New Roman", serif;
  font-weight: 600;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.screen {
  position: relative;
  width: calc(1024 * var(--u));
  min-height: calc(1536 * var(--u));
  padding: calc(8 * var(--u)) calc(22 * var(--u)) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stud { position: fixed; width: 12px; z-index: 1; pointer-events: none; }
.stud.tl { left: 5px; top: 5px; }
.stud.tr { right: 5px; top: 5px; }
.stud.bl { left: 5px; bottom: 5px; }
.stud.br { right: 5px; bottom: 5px; }

.top {
  width: 100%;
  height: calc(100 * var(--u));
  flex: none;
  /* On phones taller than the sample, the top bar and buttons go to the edges and the board stays centred. */
  margin-bottom: auto;
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: 0 calc(36 * var(--u));
}
.top h1 {
  margin: 0;
  color: var(--brass);
  font-size: calc(64 * var(--u));
  line-height: 1;
  font-weight: 600;
}
.rule { flex: 1; height: calc(2 * var(--u)); background: linear-gradient(90deg, rgba(220, 182, 124, 0.25), var(--brass)); }
.top h1 + .rule { background: linear-gradient(90deg, var(--brass), rgba(220, 182, 124, 0.25)); }
.icon { width: calc(64 * var(--u)); height: calc(64 * var(--u)); display: grid; place-items: center; }
.icon img { width: 100%; display: block; }

.player {
  width: calc(880 * var(--u));
  height: calc(112 * var(--u));
  margin: calc(6 * var(--u)) 0;
  display: flex;
  align-items: center;
  gap: calc(34 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-style: solid;
  border-width: calc(34 * var(--u));
  border-image: url(card.webp) 44 fill / calc(34 * var(--u)) stretch;
}
.player img { width: calc(78 * var(--u)); height: calc(78 * var(--u)); margin: calc(-30 * var(--u)) 0; }
.player div { display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: calc(-30 * var(--u)) 0; }
.player b { font-size: calc(44 * var(--u)); line-height: 1.1; font-weight: 600; }
.player i { font-size: calc(32 * var(--u)); line-height: 1.15; font-weight: 500; white-space: nowrap; }
.player i:empty { display: none; }

.actions {
  width: calc(900 * var(--u));
  flex: none;
  margin-top: auto;
  padding: calc(10 * var(--u)) 0 max(calc(16 * var(--u)), env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  gap: calc(22 * var(--u));
}
.btn {
  flex: 1;
  height: max(calc(100 * var(--u)), 44px);
  font: inherit;
  font-size: calc(40 * var(--u));
  color: #3b1d0a;
  background: none;
  cursor: pointer;
  padding: 0;
  border-style: solid;
  border-width: calc(30 * var(--u));
  border-image: url(btn.webp) 40 fill / calc(30 * var(--u)) stretch;
  text-shadow: 0 1px 0 rgba(255, 220, 170, 0.35);
}
.btn > * { margin: calc(-30 * var(--u)); }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { filter: brightness(0.93); }
.btn:focus-visible { outline: calc(4 * var(--u)) solid #fff4d2; outline-offset: calc(2 * var(--u)); }
.btn:disabled { filter: saturate(0.55) brightness(0.78); cursor: default; }

/* Menu parts */
.screen[hidden], .overlay[hidden] { display: none; }
.hero {
  width: calc(950 * var(--u));
  height: calc(448 * var(--u));
  flex: none;
  object-fit: cover;
  display: block;
}
.choice {
  width: calc(930 * var(--u));
  margin-top: calc(22 * var(--u));
  padding: 0 calc(8 * var(--u));
  text-align: center;
  border-style: solid;
  border-width: calc(30 * var(--u));
  border-image: url(card.webp) 44 / calc(30 * var(--u)) stretch;
  background: url(paper.webp) center / calc(300 * var(--u)) padding-box;
  transition: opacity 0.15s;
}
.choice.off { opacity: 0.45; pointer-events: none; }
.choice h2 { margin: calc(-16 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(46 * var(--u)); font-weight: 600; line-height: 1.15; }
.pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(22 * var(--u)); margin-bottom: calc(-10 * var(--u)); }
.pill {
  height: max(calc(92 * var(--u)), 40px);
  padding: 0;
  font: inherit;
  font-size: calc(38 * var(--u));
  color: #3b1d0a;
  background: none;
  cursor: pointer;
  border-style: solid;
  border-width: calc(26 * var(--u));
  border-image: url(pill.webp) 40 fill / calc(26 * var(--u)) stretch;
}
.pill[aria-pressed="true"] { border-image-source: url(pillon.webp); }
.pill:focus-visible { outline: calc(4 * var(--u)) solid #fff4d2; outline-offset: calc(2 * var(--u)); }
.menu .play {
  flex: none;
  width: calc(860 * var(--u));
  height: max(calc(130 * var(--u)), 52px);
  margin: auto 0 max(calc(24 * var(--u)), env(safe-area-inset-bottom));
  padding-top: 0;
  font-size: calc(68 * var(--u));
}
.menu .top { margin-bottom: 0; }
.menu .hero { margin-top: auto; }
.menu .choice + .play { margin-top: auto; }

/* Cards over the game */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(10, 8, 4, 0.58);
}
.sheet {
  text-align: center;
  border-style: solid;
  border-width: calc(38 * var(--u));
  border-image: url(card.webp) 44 / calc(38 * var(--u)) stretch;
  background: url(paper.webp) center / calc(300 * var(--u)) padding-box;
  box-shadow: 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.45);
}
.sheet h2 { margin: 0; font-weight: 600; color: var(--ink); }

/* Keyboard, TV remote and controller focus */
body.nav :focus { outline: calc(5 * var(--u)) solid #fff4d2; outline-offset: calc(3 * var(--u)); }

/* Wide screens: desktop, TV and phones held sideways. Each game places its own parts on this grid. */
@media (min-aspect-ratio: 5/4) {
  :root {
    --board: min(calc(100vh - 20px), 62vw);
    --panel: min(calc(100vw - var(--board) - 48px), 520px);
    --u: calc(var(--panel) / 900);
  }
  @supports (height: 1dvh) {
    :root { --board: min(calc(100dvh - 20px), 62vw); }
  }
  .screen {
    width: 100%;
    min-height: 0;
    height: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: var(--board) var(--panel);
    justify-content: center;
    align-content: center;
    column-gap: 20px;
    row-gap: calc(24 * var(--u));
  }
  .top { grid-area: top; margin: 0; padding: 0; width: 100%; }
  .actions { grid-area: actions; width: 100%; margin: 0; padding: 0; }
  .menu {
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
  }
  .hero { grid-area: hero; width: var(--board); height: calc(var(--board) * 0.4716); margin: 0; align-self: center; }
  .menu .hero { margin: 0; }
  .menu .play { grid-area: play; width: 100%; margin: 0; }
  .sheet { --u: calc(min(100vw, 66.667vh) / 1024); }
}