/* Chess only. The shared Old Cafe parts are in kit/kit.css. */
.board {
  position: relative;
  width: var(--board);
  height: var(--board);
  margin: calc(6 * var(--u)) 0;
  background: url(../assets/board.webp) center / 100% 100% no-repeat;
  flex: none;
}
/* Grid position inside board.webp: left 82, top 62, size 880 of 1024 */
.grid {
  position: absolute;
  left: 8.0078%;
  top: 6.0547%;
  width: 85.9375%;
  height: 85.9375%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  cursor: pointer;
}
.grid > * { position: absolute; width: 12.5%; height: 12.5%; left: 0; top: 0; pointer-events: none; }
.at { transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)); }

.pc { z-index: 2; display: block; transition: transform 0.2s ease; }
.pc.instant { transition: none; }
.pc.drag { z-index: 5; transition: none; }

.last { z-index: 1; background: var(--gold-tint); }
.sel { z-index: 1; background: var(--select); box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--select-line), 0 0 calc(14 * var(--u)) var(--select); }
.check { z-index: 1; background: radial-gradient(circle, rgba(170, 30, 30, 0.85) 0%, rgba(142, 28, 28, 0.45) 55%, transparent 78%); }
.dot { z-index: 3; display: grid; place-items: center; }
.dot img { width: 30%; display: block; filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.45)); }
.ring { z-index: 3; display: grid; place-items: center; }
.ring::after { content: ""; width: 88%; height: 88%; border-radius: 50%; border: calc(8 * var(--u)) solid var(--oxblood); }
.cursor { z-index: 4; box-shadow: inset 0 0 0 calc(4 * var(--u)) #fff4d2; display: none; }
.grid:focus-visible .cursor { display: block; }

.ranks, .files { position: absolute; color: var(--brass); font-size: calc(var(--board) * 0.0306); font-weight: 500; font-style: italic; line-height: 1; pointer-events: none; }
.ranks { left: 3.0%; top: 6.0547%; width: 4.8%; height: 85.9375%; display: grid; grid-template-rows: repeat(8, 1fr); justify-items: center; align-items: center; }
.files { left: 8.0078%; top: 92.3%; width: 85.9375%; height: 4.6%; display: grid; grid-template-columns: repeat(8, 1fr); justify-items: center; align-items: center; }

/* Menu tiles */
.tiles {
  width: calc(940 * var(--u));
  margin-top: calc(26 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(20 * var(--u));
}
.tile {
  position: relative;
  height: calc(240 * var(--u));
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: none;
  cursor: pointer;
  border-style: solid;
  border-width: calc(30 * var(--u));
  border-image: url(../../kit/card.webp) 44 / calc(30 * var(--u)) stretch;
  background: url(../../kit/paper.webp) center / calc(300 * var(--u)) padding-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tile b { font-size: calc(44 * var(--u)); font-weight: 600; line-height: 1.1; margin-top: calc(-14 * var(--u)); white-space: nowrap; }
.tile-art { display: flex; justify-content: center; height: calc(118 * var(--u)); margin-top: calc(6 * var(--u)); color: #5d4a33; }
.tile-art img { height: 100%; display: block; margin: 0 calc(-14 * var(--u)); }
.tile-art img.face-right { transform: scaleX(-1); }
.tile[aria-pressed="true"] { outline: calc(9 * var(--u)) solid #c79f55; outline-offset: calc(1 * var(--u)); border-radius: calc(14 * var(--u)); }
.tile:focus-visible { outline: calc(6 * var(--u)) solid #fff4d2; outline-offset: calc(-4 * var(--u)); }

/* Promotion and result (approved 7 Nov, samples 5 and 6) */
.promo { width: min(calc(830 * var(--u)), 94vw); }
.promo h2 { font-size: calc(62 * var(--u)); margin: calc(-6 * var(--u)) 0 calc(22 * var(--u)); }
.promo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14 * var(--u)); }
.promo-row button {
  aspect-ratio: 1;
  padding: calc(6 * var(--u));
  background: url(../assets/maple.webp) center / cover;
  border: calc(2 * var(--u)) solid #b4894f;
  border-radius: calc(12 * var(--u));
  cursor: pointer;
  box-shadow: inset 0 0 calc(10 * var(--u)) rgba(120, 72, 22, 0.28);
}
.promo-row button:hover { filter: brightness(1.06); }
.promo-row button:focus-visible { outline: calc(5 * var(--u)) solid #8e1c1c; outline-offset: calc(2 * var(--u)); }
.promo-row img { width: 100%; display: block; }
.outcome { width: min(calc(640 * var(--u)), 92vw); display: flex; flex-direction: column; align-items: center; }
.kings { position: relative; width: calc(500 * var(--u)); height: calc(300 * var(--u)); margin-top: calc(-6 * var(--u)); }
.kings img { position: absolute; width: calc(290 * var(--u)); left: calc(-10 * var(--u)); bottom: calc(-6 * var(--u)); }
.kings img.fallen { left: calc(190 * var(--u)); bottom: calc(-46 * var(--u)); transform: rotate(98deg); }
.kings img.level { left: calc(180 * var(--u)); }
.outcome h2 { font-size: calc(84 * var(--u)); line-height: 1.1; margin-top: calc(6 * var(--u)); }
.outcome p { margin: 0 0 calc(18 * var(--u)); font-size: calc(52 * var(--u)); font-style: italic; font-weight: 500; }
.outcome .btn { flex: none; width: calc(450 * var(--u)); margin-top: calc(14 * var(--u)); height: max(calc(100 * var(--u)), 44px); font-size: calc(44 * var(--u)); }

body.nav .grid:focus { outline: none; }
body.nav .grid:focus .cursor { display: block; }

@media (min-aspect-ratio: 5/4) {
  #game {
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: "board ." "board top" "board opp" "board me" "board actions" "board .";
  }
  #opp { grid-area: opp; width: 100%; margin: 0; }
  #me { grid-area: me; width: 100%; margin: 0; }
  .board { grid-area: board; margin: 0; align-self: center; }
  #menu { grid-template-areas: "hero ." "hero top" "hero tiles" "hero level" "hero as" "hero play" "hero ."; }
  .tiles { grid-area: tiles; width: 100%; margin: 0; }
  #levelCard { grid-area: level; width: 100%; margin: 0; }
  #asCard { grid-area: as; width: 100%; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pc { transition: none; }
}

/* Pause card (kit/pause.js) and the Quit link on the result card, in the same buttons */
.sheet a.btn { display: grid; place-items: center; text-decoration: none; }
.pause-card .sheet { width: min(calc(640 * var(--u)), 92vw); display: flex; flex-direction: column; align-items: center; }
.pause-card h2 { font-size: calc(84 * var(--u)); line-height: 1.1; margin-top: calc(6 * var(--u)); }
.pause-card p { margin: calc(4 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(46 * var(--u)); font-style: italic; font-weight: 500; }
.pause-card .pair { display: flex; flex-direction: column; align-items: center; }
.pause-card .btn { flex: none; width: calc(450 * var(--u)); margin-top: calc(14 * var(--u)); height: max(calc(100 * var(--u)), 44px); font-size: calc(44 * var(--u)); }