/* Dominoes only (approved 7 Nov, sample-1-old-cafe). Shared Old Cafe parts are in kit/kit.css. */

/* A tile: --s is half its height. Upright in the hand; on the table it is turned by JS. */
.dom {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: calc(var(--s) * 2);
  padding: 0;
  border: 0;
  background: url(../assets/tile.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  transition: transform 0.28s ease, width 0.2s, height 0.2s;
}
.dom.instant { transition: none; }
.half { position: absolute; left: 0; width: 100%; height: 50%; display: block; }
.half.a { top: 0; }
.half.b { top: 50%; }
.half i {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 32%, #4b3a2a, #1b120a 72%);
  box-shadow: 0 0.5px 0 rgba(255, 244, 214, 0.6);
}
.half i.tl { left: 28%; top: 26%; }
.half i.tr { left: 72%; top: 26%; }
.half i.ml { left: 28%; top: 50%; }
.half i.mr { left: 72%; top: 50%; }
.half i.bl { left: 28%; top: 74%; }
.half i.br { left: 72%; top: 74%; }
.half i.c { left: 50%; top: 50%; }

/* Tall phones give the extra height to the table. */
#game .top { margin-bottom: 0; }
#game .actions { margin-top: 0; }

/* The players */
.seats {
  width: 100%;
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: calc(8 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.seat { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); }
.seat.seat-top { grid-column: 1 / -1; }
.seat.seat-left { justify-self: start; margin-left: calc(10 * var(--u)); }
.seat.seat-right { justify-self: end; margin-right: calc(10 * var(--u)); }
.seat-card {
  min-width: calc(300 * var(--u));
  padding: 0 calc(14 * var(--u));
  height: calc(66 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(38 * var(--u));
  white-space: nowrap;
  border-style: solid;
  border-width: calc(20 * var(--u));
  border-image: url(../../kit/card.webp) 44 fill / calc(20 * var(--u)) stretch;
}
.seat-card > span { margin: calc(-20 * var(--u)) 0; display: flex; align-items: center; gap: calc(14 * var(--u)); }
.seat-card svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); fill: none; stroke: #7a5a2c; stroke-width: 1.6; stroke-linejoin: round; }
.seat.on .seat-card { outline: calc(6 * var(--u)) solid #c79f55; outline-offset: calc(1 * var(--u)); border-radius: calc(10 * var(--u)); }
.backs { display: flex; gap: calc(6 * var(--u)); height: calc(70 * var(--u)); }
.backs img { height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }

/* The table */
.table {
  position: relative;
  flex: 1 1 auto;
  width: calc(990 * var(--u));
  min-height: calc(560 * var(--u));
  border-style: solid;
  border-width: calc(30 * var(--u));
  border-image: url(../assets/frame.webp) 46 / calc(30 * var(--u)) stretch;
  border-radius: calc(26 * var(--u));
}
.felt { position: absolute; inset: 0; touch-action: manipulation; }
.felt .dom { pointer-events: none; z-index: 1; }
.felt .dom.open { filter: drop-shadow(0 0 calc(7 * var(--u)) rgba(255, 196, 60, 0.95)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.slot {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: calc(4 * var(--u)) solid #ffd76a;
  border-radius: calc(12 * var(--u));
  background: rgba(255, 215, 106, 0.22);
  cursor: pointer;
  animation: slot 1s ease-in-out infinite alternate;
}
@keyframes slot { to { background: rgba(255, 215, 106, 0.5); } }

/* You */
.you {
  flex: none;
  width: calc(940 * var(--u));
  height: calc(86 * var(--u));
  margin-top: calc(14 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(50 * var(--u));
  font-size: calc(42 * var(--u));
  white-space: nowrap;
  border-style: solid;
  border-width: calc(24 * var(--u));
  border-image: url(../../kit/card.webp) 44 fill / calc(24 * var(--u)) stretch;
}
.you b, .you i { margin: calc(-24 * var(--u)) 0; font-weight: 600; font-style: normal; }
.you.teams { flex-direction: column; gap: 0; font-size: calc(38 * var(--u)); line-height: 1.02; height: calc(100 * var(--u)); }
.you.teams b, .you.teams i { margin: 0; }
.you.teams b { margin-top: calc(-18 * var(--u)); }
.you.teams i { margin-bottom: calc(-18 * var(--u)); }
.you.on { outline: calc(6 * var(--u)) solid #c79f55; outline-offset: calc(1 * var(--u)); border-radius: calc(12 * var(--u)); }

/* The hand */
.hand {
  --s: min(calc(116 * var(--u)), calc((100vw - 56px) / 7));
  flex: none;
  min-height: calc(var(--s) * 2 + 26 * var(--u));
  margin: calc(14 * var(--u)) 0 calc(16 * var(--u));
  padding-top: calc(22 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--u));
}
.hand .dom { position: relative; cursor: default; transition: transform 0.16s ease, filter 0.16s; }
.hand .dom.can { cursor: pointer; transform: translateY(calc(-20 * var(--u))); filter: drop-shadow(0 0 calc(3 * var(--u)) #9be27a) drop-shadow(0 0 calc(9 * var(--u)) rgba(120, 220, 90, 0.75)); }
.hand .dom.no { filter: brightness(0.66) saturate(0.6); }
.hand .dom.hinted { animation: hint 0.7s ease-in-out infinite alternate; }
.hand .dom.picked { filter: drop-shadow(0 0 calc(4 * var(--u)) #ffd76a) drop-shadow(0 0 calc(12 * var(--u)) rgba(255, 196, 60, 0.9)); transform: translateY(calc(-30 * var(--u))); }
@keyframes hint { to { transform: translateY(calc(-32 * var(--u))); } }
.dom:focus-visible { outline: none; }
body.nav .hand .dom:focus { outline: calc(6 * var(--u)) solid #fff4d2; outline-offset: calc(2 * var(--u)); border-radius: calc(14 * var(--u)); }

.actions .btn { font-size: calc(46 * var(--u)); }

/* Menu (approved 7 Nov, sample-4) */
.option { flex: none; width: calc(920 * var(--u)); margin-top: calc(24 * var(--u)); }
.option h2 {
  height: calc(92 * var(--u));
  margin: 0;
  font-size: calc(50 * var(--u));
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-width: calc(26 * var(--u));
  border-image: url(../../kit/card.webp) 44 fill / calc(26 * var(--u)) stretch;
}
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(26 * var(--u)); margin-top: calc(18 * var(--u)); }
.pick {
  height: max(calc(116 * var(--u)), 44px);
  padding: 0;
  font: inherit;
  font-size: calc(48 * var(--u));
  color: #3b1d0a;
  background: none;
  cursor: pointer;
  border-style: solid;
  border-width: calc(28 * var(--u));
  border-image: url(../../kit/pill.webp) 40 fill / calc(28 * var(--u)) stretch;
}
.pick[aria-pressed="true"] {
  border-image: url(../assets/pillcream.webp) 40 / calc(28 * var(--u)) stretch;
  background: #e8cf9f padding-box;
}
#playersOption .choices { grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); }
#modeOption .choices { grid-template-columns: repeat(2, 1fr); }
.option.off { opacity: 0.45; } /* no bots, no bot level: dimmed the way kit.css dims a .choice */
#playersOption .pick[data-players="teams"] { font-size: calc(40 * var(--u)); }
#menu .play { margin-top: auto; }

/* Round and match cards (approved 7 Nov, samples 5 and 6) */
.scoreboard, .champion { width: min(calc(640 * var(--u)), 92vw); display: flex; flex-direction: column; align-items: center; }
.scoreboard h2 { font-size: calc(70 * var(--u)); line-height: 1.1; }
.scoreboard hr { width: 100%; border: 0; border-top: calc(2 * var(--u)) solid #8d6a3f; margin: calc(14 * var(--u)) 0 calc(20 * var(--u)); }
.scoreboard p { margin: 0 0 calc(18 * var(--u)); font-size: calc(44 * var(--u)); line-height: 1.15; }
.rows { width: 92%; margin-bottom: calc(26 * var(--u)); }
.rows div { display: flex; justify-content: space-between; font-size: calc(42 * var(--u)); line-height: 1.5; border-bottom: calc(1.5 * var(--u)) solid #a98a5f; }
.rows div:last-child { border-bottom: 0; }
.sheet .btn { flex: none; width: calc(460 * var(--u)); height: max(calc(100 * var(--u)), 44px); font-size: calc(44 * var(--u)); }
.champion .btn + .btn, .scoreboard .btn + .btn { margin-top: calc(18 * var(--u)); }
.sheet a.btn { display: grid; place-items: center; text-decoration: none; }
.fan { position: relative; width: calc(380 * var(--u)); height: calc(230 * var(--u)); --s: calc(100 * var(--u)); margin-top: calc(6 * var(--u)); }
.fan .dom { left: calc(140 * var(--u)); top: calc(6 * var(--u)); transition: none; }
.fan .dom:nth-child(1) { transform: translateX(calc(-96 * var(--u))) translateY(calc(10 * var(--u))) rotate(-13deg); }
.fan .dom:nth-child(2) { z-index: 1; }
.fan .dom:nth-child(3) { transform: translateX(calc(96 * var(--u))) translateY(calc(10 * var(--u))) rotate(13deg); }
.champion h2 { font-size: calc(88 * var(--u)); line-height: 1.1; margin-top: calc(10 * var(--u)); white-space: nowrap; }
.champion h2.long { font-size: calc(68 * var(--u)); }
.champion p { margin: 0 0 calc(22 * var(--u)); font-size: calc(42 * var(--u)); }

/* Pause card (kit/pause.js): the same paper sheet and buttons as the round card */
.pause-card .sheet { width: min(calc(640 * var(--u)), 92vw); display: flex; flex-direction: column; align-items: center; }
.pause-card h2 { font-size: calc(70 * var(--u)); line-height: 1.1; }
.pause-card p { margin: calc(10 * var(--u)) 0 calc(24 * var(--u)); font-size: calc(42 * var(--u)); line-height: 1.15; }
.pause-card .pair { display: flex; flex-direction: column; align-items: center; gap: calc(18 * var(--u)); }

/* Wide screens: desktop, TV and phones held sideways */
@media (min-aspect-ratio: 5/4) {
  #game {
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas: "table ." "table top" "table seats" "table you" "table hand" "table actions" "table .";
  }
  .seats { grid-area: seats; margin: 0; }
  .table { grid-area: table; width: var(--board); height: calc(var(--board) * 0.74); min-height: 0; max-height: none; align-self: center; }
  .you { grid-area: you; width: 100%; margin: 0; }
  .hand { grid-area: hand; margin: 0; --s: calc(116 * var(--u)); }
  #menu { grid-template-areas: "hero ." "hero top" "hero mode" "hero players" "hero level" "hero play" "hero ."; grid-template-rows: 1fr auto auto auto auto auto 1fr; }
  #modeOption { grid-area: mode; width: 100%; margin: 0; }
  #playersOption { grid-area: players; width: 100%; margin: 0; }
  #levelOption { grid-area: level; width: 100%; margin: 0; }
}

/* Phones held sideways: four rows don't fit beside the picture, so the 2 Players choice sits under it */
@media (min-aspect-ratio: 5/4) and (max-height: 500px) {
  #menu { grid-template-areas: ". ." "hero top" "hero players" "mode level" "mode play" ". ."; grid-template-rows: 1fr auto auto auto auto 1fr; }
  #modeOption { align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .dom, .hand .dom { transition: none; }
  .slot, .hand .dom.hinted { animation: none; }
}