/* Callbreak only (Durbar Night, approved 7 Nov, samples 2, 4, 5, 6, 7). Layout helpers come from kit/kit.css. */
:root {
  --cream: #f7e7bd;
  --gold-line: #cf9f3f;
  --night: #1a0713;
  --card-w: calc(150 * var(--u));
}
body { background: var(--night) url(../assets/page.webp); background-size: 320px; color: var(--cream); }

.arch { position: fixed; top: calc(52 * var(--u)); width: calc(260 * var(--u)); z-index: 0; pointer-events: none; opacity: 0.85; }
.arch.left { left: 0; }
.arch.right { right: 0; transform: scaleX(-1); }
.screen { z-index: 1; }

/* Top bar: a maroon plate */
.top {
  height: calc(76 * var(--u));
  margin: calc(6 * var(--u)) 0 calc(8 * var(--u));
  padding: 0;
  justify-content: space-between;
  border-style: solid;
  border-width: calc(22 * var(--u));
  border-image: url(../assets/pill.webp) 34 fill / calc(22 * var(--u)) stretch;
}
#game .top, #menu .top { margin-bottom: calc(8 * var(--u)); }
.top h1 { color: var(--cream); font-size: calc(50 * var(--u)); margin: calc(-22 * var(--u)) 0; }
.top .icon { width: calc(56 * var(--u)); height: calc(56 * var(--u)); margin: calc(-22 * var(--u)) 0; }

/* Plates */
.round-pill, .seat-card, .you, .option h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-style: solid;
  border-image: url(../assets/pill.webp) 34 fill / var(--edge) stretch;
  border-width: var(--edge);
}
.round-pill { --edge: calc(18 * var(--u)); flex: none; min-width: calc(310 * var(--u)); height: calc(56 * var(--u)); font-size: calc(34 * var(--u)); }
.seat-card { --edge: calc(18 * var(--u)); min-width: calc(290 * var(--u)); height: calc(56 * var(--u)); font-size: calc(35 * var(--u)); }
.round-pill > *, .seat-card > * { margin: calc(-18 * var(--u)) 0; }

/* Seats */
.seats { flex: none; width: 100%; display: grid; grid-template-columns: 1fr 1fr; row-gap: calc(4 * var(--u)); margin: calc(6 * var(--u)) 0; }
.seat { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.seat-top { grid-column: 1 / -1; }
.seat-left { justify-self: start; }
.seat-right { justify-self: end; }
.seat.on .seat-card { filter: drop-shadow(0 0 calc(8 * var(--u)) #ffcf57); }
.backs { display: flex; height: calc(62 * var(--u)); }
.backs img { height: 100%; display: block; margin-left: calc(-30 * var(--u)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.backs img:first-child { margin-left: 0; }

/* Table */
.table {
  position: relative;
  flex: 1 1 auto;
  width: calc(1000 * var(--u));
  min-height: calc(500 * var(--u));
  border-style: solid;
  border-width: calc(96 * var(--u));
  border-image: url(../assets/frame.webp) 183 / calc(96 * var(--u)) stretch;
}
.table::before { content: ""; position: absolute; inset: calc(-74 * var(--u)); background: url(../assets/velvet.webp); background-size: 300px; border-radius: calc(30 * var(--u)); z-index: -1; }
.crest { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.crest.up { top: calc(-112 * var(--u)); width: calc(340 * var(--u)); }
.crest.down { bottom: calc(-112 * var(--u)); width: calc(150 * var(--u)); }
.felt { position: absolute; inset: calc(-72 * var(--u)); }
.trump { position: absolute; left: calc(30 * var(--u)); bottom: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(34 * var(--u)); z-index: 1; }
.trump svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); fill: var(--cream); }

/* Cards */
.pc {
  position: relative;
  display: block;
  width: var(--card-w);
  aspect-ratio: 5 / 7.2;
  padding: 0;
  font: inherit;
  overflow: hidden;
  border: calc(2.5 * var(--u)) solid #d4a84a;
  border-radius: calc(13 * var(--u));
  background: linear-gradient(170deg, #fffaf0, #f4e7cc);
  color: #161210;
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.5);
  flex: none;
}
.pc.red { color: #b3141b; }
.pc .ix { position: absolute; left: 7%; top: 4%; display: flex; flex-direction: column; align-items: center; width: 34%; z-index: 1; font-size: calc(var(--card-w) * 0.31); line-height: 1; font-weight: 600; }
.pc .ix svg { width: 62%; margin-top: 3%; fill: currentColor; display: block; }
.pc .pip { position: absolute; right: 9%; bottom: 8%; width: 42%; fill: currentColor; opacity: 0.95; }
.pc.ace .pip { right: 24%; bottom: 18%; width: 54%; }
.pc .face { position: absolute; right: -6%; bottom: 0; width: 92%; display: block; }

/* The trick */
.trick { position: absolute; inset: 0; --card-w: calc(136 * var(--u)); }
.tc { position: absolute; transform: translate(-50%, -50%); transition: left 0.3s ease, top 0.3s ease, opacity 0.3s; z-index: 2; }
.tc.seat0 { left: 50%; top: 72%; animation: fromBottom 0.22s ease; }
.tc.seat1 { left: 22%; top: 46%; animation: fromLeft 0.22s ease; }
.tc.seat2 { left: 50%; top: 22%; animation: fromTop 0.22s ease; }
.tc.seat3 { left: 78%; top: 46%; animation: fromRight 0.22s ease; }
.tc.lead { z-index: 2; }
.tc.best .pc { box-shadow: 0 0 0 calc(3 * var(--u)) #ffd76a, 0 0 calc(16 * var(--u)) #ffc53a; }
.trick.to0 .tc { left: 50%; top: 115%; opacity: 0; }
.trick.to1 .tc { left: -12%; top: 46%; opacity: 0; }
.trick.to2 .tc { left: 50%; top: -18%; opacity: 0; }
.trick.to3 .tc { left: 112%; top: 46%; opacity: 0; }
@keyframes fromBottom { from { top: 110%; opacity: 0; } }
@keyframes fromLeft { from { left: -8%; opacity: 0; } }
@keyframes fromTop { from { top: -12%; opacity: 0; } }
@keyframes fromRight { from { left: 108%; opacity: 0; } }

/* Calling */
.caller[hidden] { display: none; }
.caller {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(700 * var(--u)), 92%);
  z-index: 3;
  padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u));
  text-align: center;
  background: rgba(38, 4, 18, 0.94);
  border: calc(3 * var(--u)) solid var(--gold-line);
  border-radius: calc(24 * var(--u));
}
.caller h2 { margin: 0; font-size: calc(58 * var(--u)); font-weight: 600; line-height: 1.1; }
.caller p { margin: calc(6 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(35 * var(--u)); }
.numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(14 * var(--u)) calc(26 * var(--u)); }
.num {
  width: max(calc(96 * var(--u)), 36px);
  aspect-ratio: 1;
  padding: 0;
  font: inherit;
  font-size: calc(46 * var(--u));
  color: #2b1405;
  background: url(../assets/num.webp) center / 100% 100% no-repeat;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.num:hover { filter: brightness(1.08); }
.num.hinted { animation: pulse 0.7s ease-in-out infinite alternate; }
@keyframes pulse { to { filter: brightness(1.28) drop-shadow(0 0 calc(10 * var(--u)) #ffe08a); } }

/* You and your hand */
.you { --edge: calc(20 * var(--u)); flex: none; width: calc(940 * var(--u)); height: calc(66 * var(--u)); margin-top: calc(10 * var(--u)); gap: calc(46 * var(--u)); font-size: calc(38 * var(--u)); }
.you b, .you i { margin: calc(-20 * var(--u)) 0; font-weight: 600; font-style: normal; }
.you.on { filter: drop-shadow(0 0 calc(8 * var(--u)) #ffcf57); }
.hand { flex: none; display: flex; justify-content: center; padding-top: calc(28 * var(--u)); margin-top: calc(2 * var(--u)); min-height: calc(var(--card-w) * 1.44 + 30 * var(--u)); }
.hand .pc { margin-left: var(--overlap, 0); transition: transform 0.14s ease, filter 0.14s; cursor: default; }
.hand .pc:first-child { margin-left: 0; }
.hand .pc.can { cursor: pointer; transform: translateY(calc(-22 * var(--u))); box-shadow: 0 0 0 calc(3 * var(--u)) #ffd76a, 0 0 calc(14 * var(--u)) #ffc53a; z-index: 2; }
.hand .pc.no { filter: brightness(0.62) saturate(0.72); }
.hand .pc.lifted { transform: translateY(calc(-44 * var(--u))); z-index: 3; }
.hand .pc.hinted { animation: lift 0.7s ease-in-out infinite alternate; }
@keyframes lift { to { transform: translateY(calc(-40 * var(--u))); } }

/* Gold buttons */
.gold {
  height: max(calc(92 * var(--u)), 44px);
  padding: 0;
  font: inherit;
  font-size: calc(42 * var(--u));
  color: #2b1405;
  background: none;
  cursor: pointer;
  border-style: solid;
  border-width: calc(26 * var(--u));
  border-image: url(../assets/btn.webp) 44 fill / calc(26 * var(--u)) stretch;
}
.gold:hover:not(:disabled) { filter: brightness(1.08); }
.gold:active:not(:disabled) { filter: brightness(0.92); }
.gold:disabled { filter: saturate(0.5) brightness(0.62); cursor: default; }
.actions { justify-content: center; gap: calc(44 * var(--u)); margin-top: 0; }
.actions .gold { flex: 0 1 calc(340 * var(--u)); }

/* Menu */
#menu .top { flex: none; }
#menu .hero { width: calc(950 * var(--u)); height: auto; aspect-ratio: 950 / 675; margin-top: auto; }
.option { flex: none; width: calc(960 * var(--u)); margin-top: calc(16 * var(--u)); }
.option h2 { --edge: calc(20 * var(--u)); height: calc(78 * var(--u)); margin: 0; font-size: calc(46 * var(--u)); font-weight: 600; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); margin-top: calc(16 * var(--u)); }
.pick {
  height: max(calc(100 * var(--u)), 44px);
  padding: 0;
  font: inherit;
  font-size: calc(42 * var(--u));
  color: var(--cream);
  background: none;
  cursor: pointer;
  border-style: solid;
  border-width: calc(26 * var(--u));
  border-image: url(../assets/pill.webp) 34 fill / calc(26 * var(--u)) stretch;
}
.pick[aria-pressed="true"] { color: #2b1405; border-image-source: url(../assets/pillon.webp); }
#menu .play { flex: none; width: calc(780 * var(--u)); height: max(calc(136 * var(--u)), 52px); margin: auto 0 max(calc(24 * var(--u)), env(safe-area-inset-bottom)); font-size: calc(68 * var(--u)); }
#playersOption .choices { grid-template-columns: repeat(2, 1fr); } /* 1 Player / 2 Players, as in Carrom and Pool */

/* Result cards */
.overlay { background: rgba(6, 2, 6, 0.72); }
.sheet {
  position: relative;
  color: var(--cream);
  border-width: calc(70 * var(--u));
  border-image: url(../assets/frame.webp) 183 / calc(70 * var(--u)) stretch;
  background: url(../assets/velvet.webp) center / 300px padding-box;
  box-shadow: none;
}
.sheet::before { content: ""; position: absolute; inset: calc(-52 * var(--u)); background: url(../assets/velvet.webp); background-size: 300px; border-radius: calc(22 * var(--u)); z-index: -1; }
.sheet h2 { color: var(--cream); }
.scoreboard { width: min(calc(960 * var(--u)), 96vw); display: flex; flex-direction: column; align-items: center; }
.scoreboard h2 { font-size: calc(60 * var(--u)); margin: calc(-20 * var(--u)) 0 calc(20 * var(--u)); }
.scoreboard table { width: 100%; border-collapse: collapse; font-size: calc(38 * var(--u)); margin-bottom: calc(26 * var(--u)); }
.scoreboard th, .scoreboard td { border: calc(2 * var(--u)) solid var(--gold-line); padding: calc(13 * var(--u)) calc(6 * var(--u)); text-align: center; font-weight: 600; white-space: nowrap; }
.scoreboard td:first-child { text-align: left; padding-left: calc(18 * var(--u)); }
.sheet .gold { flex: none; width: calc(470 * var(--u)); }
.champion { width: min(calc(800 * var(--u)), 94vw); display: flex; flex-direction: column; align-items: center; }
.fan { position: relative; display: flex; justify-content: center; --card-w: calc(150 * var(--u)); height: calc(226 * var(--u)); margin-top: calc(-14 * var(--u)); }
.fan .pc { margin: 0 calc(-16 * var(--u)); transform-origin: 50% 100%; }
.fan .pc:nth-child(1) { transform: rotate(-11deg) translateY(calc(8 * var(--u))); }
.fan .pc:nth-child(2) { z-index: 1; }
.fan .pc:nth-child(3) { transform: rotate(11deg) translateY(calc(8 * var(--u))); }
.champion h2 { font-size: calc(92 * var(--u)); line-height: 1.1; margin: calc(8 * var(--u)) 0 calc(14 * var(--u)); white-space: nowrap; }
.champion h2.long { font-size: calc(70 * var(--u)); }
.finals { width: 92%; display: grid; gap: calc(9 * var(--u)); margin-bottom: calc(22 * var(--u)); }
.finals div { display: flex; justify-content: space-between; padding: calc(9 * var(--u)) calc(26 * var(--u)); font-size: calc(38 * var(--u)); background: rgba(38, 4, 18, 0.72); border: calc(2 * var(--u)) solid var(--gold-line); border-radius: calc(14 * var(--u)); }
.pair { display: flex; gap: calc(20 * var(--u)); }
.pair .gold { width: calc(310 * var(--u)); font-size: calc(36 * var(--u)); border-width: calc(20 * var(--u)); border-image-width: calc(20 * var(--u)); }
/* Quit (kit/pause.js) joins each card's row; a third button goes on a line of its own, in the middle */
.pair.with-quit { flex-wrap: wrap; justify-content: center; }
.sheet a.gold { display: grid; place-items: center; text-decoration: none; }
.pause-card .sheet { width: min(calc(800 * var(--u)), 94vw); display: flex; flex-direction: column; align-items: center; }
.pause-card h2 { font-size: calc(80 * var(--u)); line-height: 1.1; margin: calc(-10 * var(--u)) 0 calc(6 * var(--u)); }
.pause-card p { margin: 0 0 calc(26 * var(--u)); font-size: calc(40 * var(--u)); font-style: italic; font-weight: 500; }
/* 2 players: the curtain between their turns, the same card as the pause card. The hand under it is empty, not just covered. */
.curtain .sheet { width: min(calc(800 * var(--u)), 94vw); display: flex; flex-direction: column; align-items: center; }
.curtain h2 { font-size: calc(80 * var(--u)); line-height: 1.1; margin: calc(-10 * var(--u)) 0 calc(6 * var(--u)); }
.curtain p { margin: 0 0 calc(26 * var(--u)); font-size: calc(40 * var(--u)); font-style: italic; font-weight: 500; }

/* Wide screens: desktop, TV and phones held sideways */
@media (min-aspect-ratio: 5/4) {
  .arch { width: calc(var(--board) * 0.2); top: 0; opacity: 0.5; }
  #game {
    grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
    grid-template-areas: "table ." "table top" "table round" "table seats" "table you" "table hand" "table actions" "table .";
    grid-template-columns: var(--board) var(--panel);
  }
  .round-pill { grid-area: round; justify-self: center; }
  .seats { grid-area: seats; margin: 0; }
  .table { grid-area: table; width: var(--board); height: calc(var(--board) * 0.74); min-height: 0; align-self: center; border-width: calc(var(--board) * 0.09); border-image-width: calc(var(--board) * 0.09); }
  .table::before { inset: calc(var(--board) * -0.07); }
  .felt { inset: calc(var(--board) * -0.068); }
  .crest.up { top: calc(var(--board) * -0.095); width: calc(var(--board) * 0.32); }
  .crest.down { bottom: calc(var(--board) * -0.098); width: calc(var(--board) * 0.16); }
  .trick { --card-w: calc(var(--board) * 0.135); }
  .you { grid-area: you; width: 100%; margin: 0; }
  .hand { grid-area: hand; margin: 0; }
  #menu { grid-template-areas: "hero ." "hero top" "hero players" "hero level" "hero play" "hero ."; grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-columns: var(--board) var(--panel); }
  #menu .hero { grid-area: hero; width: var(--board); margin: 0; }
  #menu .option { grid-area: level; width: 100%; margin: 0; }
  #menu #playersOption { grid-area: players; }
  #menu .play { grid-area: play; width: 100%; margin: 0; }
}

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