/* =============================================================
   GAME: Pachisi
   ============================================================= */
/* seat colours are also used by the status bar chips, so they live on the play area */
.play-area { --pc-c0: #ff4d5e; --pc-c1: #3dff8a; --pc-c2: #ffd23f; --pc-c3: #4d9bff; --pc-glow: #c38bff; --pc-gold: #ffd36b; }
.board-pachisi {
  width: min(calc(100vw - 56px), 560px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pc-stage {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 14px;
  background: radial-gradient(circle at 50% 50%, #2b0f52 0%, #1a0836 55%, #0f0522 100%);
  box-shadow: 0 0 0 2px var(--pc-glow), 0 0 26px rgba(195, 139, 255, .35), inset 0 0 40px rgba(0, 0, 0, .5);
}
.pc-svg { display: block; width: 100%; height: 100%; }
.pc-cell { fill: #2a1352; stroke: rgba(255, 211, 107, .32); stroke-width: .45; }
.pc-cell.mid.c0 { fill: color-mix(in srgb, var(--pc-c0) 30%, #1c0b38); }
.pc-cell.mid.c1 { fill: color-mix(in srgb, var(--pc-c1) 24%, #1c0b38); }
.pc-cell.mid.c2 { fill: color-mix(in srgb, var(--pc-c2) 26%, #1c0b38); }
.pc-cell.mid.c3 { fill: color-mix(in srgb, var(--pc-c3) 30%, #1c0b38); }
.pc-cell.mid.off { fill: #2a1352; }
.pc-castle { stroke: var(--pc-gold); stroke-width: 1.15; stroke-linecap: round; filter: drop-shadow(0 0 1.2px rgba(255, 211, 107, .9)); pointer-events: none; }
.pc-rose ellipse, .pc-rose circle { fill: rgba(195, 139, 255, .1); stroke: rgba(255, 211, 107, .32); stroke-width: .6; }
.pc-rose .pc-rose-ring { fill: none; stroke: rgba(195, 139, 255, .28); stroke-dasharray: 1.5 2.5; }
.pc-char { fill: #160828; stroke: var(--pc-gold); stroke-width: .8; }
.pc-tri { stroke: rgba(255, 211, 107, .5); stroke-width: .35; }
.pc-tri.c0 { fill: color-mix(in srgb, var(--pc-c0) 34%, transparent); } .pc-tri.c1 { fill: color-mix(in srgb, var(--pc-c1) 28%, transparent); }
.pc-tri.c2 { fill: color-mix(in srgb, var(--pc-c2) 30%, transparent); } .pc-tri.c3 { fill: color-mix(in srgb, var(--pc-c3) 34%, transparent); }
.pc-lotus ellipse, .pc-lotus circle { fill: rgba(255, 211, 107, .32); stroke: rgba(255, 211, 107, .7); stroke-width: .3; }

/* corner plaques: name, team, finished pieces */
.pc-plaques { position: absolute; inset: 0; pointer-events: none; }
.pc-plaque {
  --tc: var(--pc-c0);
  position: absolute; width: 36%; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 10px;
  background: rgba(14, 5, 30, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent);
  transition: box-shadow .25s;
}
.pc-plaque.c1 { --tc: var(--pc-c1); } .pc-plaque.c2 { --tc: var(--pc-c2); } .pc-plaque.c3 { --tc: var(--pc-c3); }
.pc-plaque.lb { left: 2.5%; bottom: 2.5%; } .pc-plaque.rb { right: 2.5%; bottom: 2.5%; }
.pc-plaque.rt { right: 2.5%; top: 2.5%; } .pc-plaque.lt { left: 2.5%; top: 2.5%; }
.pc-plaque.active { box-shadow: inset 0 0 0 2px var(--tc), 0 0 16px color-mix(in srgb, var(--tc) 55%, transparent); }
.pc-pname { display: flex; align-items: center; gap: 5px; font: 800 clamp(.62rem, 2.4vw, .84rem)/1.15 var(--font-body); min-width: 0; }
.pc-pname .dot { width: 9px; height: 9px; background: var(--tc); box-shadow: 0 0 6px var(--tc); }
.pc-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-team { font: 700 clamp(.55rem, 2vw, .7rem)/1 var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pc-team:empty { display: none; }
.pc-slots { display: flex; gap: 6%; padding: 3px 0 1px; }
.pc-slot { position: relative; width: 13%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent); color: var(--tc); }
.pc-slot.full { background: none; box-shadow: none; }
.pc-slot svg { position: absolute; left: -10%; bottom: 0; width: 120%; height: 144%; overflow: visible; filter: drop-shadow(0 0 3px var(--tc)); }

/* pieces: beehive pawns (buttons) placed in % of the board; the base stands on the square's centre */
.pc-tokens { position: absolute; inset: 0; pointer-events: none; }
.pc-token {
  --tc: var(--pc-c0);
  position: absolute; width: 5%; aspect-ratio: 100 / 120; padding: 0; border: 0; background: none; color: var(--tc);
  transform: translate(-50%, -80%); cursor: default; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  transition: left .11s ease-out, top .11s ease-out, width .2s;
  z-index: calc(100 + var(--z, 0));
}
.pc-token[hidden] { display: none; }
.pc-token.c1 { --tc: var(--pc-c1); } .pc-token.c2 { --tc: var(--pc-c2); } .pc-token.c3 { --tc: var(--pc-c3); }
.pc-token::before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -4%; height: 20%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}
/* a bigger invisible hit area for fingers */
.pc-token::after { content: ""; position: absolute; inset: -30% -40% -20%; }
.pc-pawn { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .25)); transform-origin: 50% 88%; transition: transform .2s, filter .2s; }
.pc-num {
  position: absolute; right: -22%; bottom: 0; min-width: 1.45em; height: 1.45em; border-radius: 50%;
  display: grid; place-items: center; font: 800 clamp(.45rem, 1.4vw, .6rem)/1 var(--font-body);
  color: #fff; background: #140b26; box-shadow: 0 0 0 1.5px var(--tc); pointer-events: none;
}
.pc-token.small, .pc-token.waiting { width: 3.9%; }
.pc-token.small .pc-num, .pc-token.waiting .pc-num { display: none; }
@media (max-width: 480px) { .pc-token:not(.legal) .pc-num { display: none; } }
.pc-token:focus-visible { outline: none; }
.pc-token:focus-visible .pc-pawn { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px var(--focus)); }
.pc-token.legal { cursor: pointer; z-index: calc(300 + var(--z, 0)); }
.pc-token.legal .pc-pawn { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 6px var(--tc)); animation: pc-hop .9s ease-in-out infinite; }
.pc-token.legal .pc-num { display: grid; }
.pc-token.legal::before { left: -14%; right: -14%; bottom: -12%; height: 34%; background: none; border: 2px solid #fff; box-shadow: 0 0 10px var(--tc), inset 0 0 6px var(--tc); animation: pc-ring 1s ease-in-out infinite alternate; }
.pc-token.legal:hover .pc-pawn, .pc-token.legal:focus-visible .pc-pawn { animation: none; transform: translateY(-10%) scale(1.15); }
.pc-token.moving { z-index: 600; }
.pc-token.moving .pc-pawn { transform: translateY(-18%) scale(1.14); filter: drop-shadow(0 6px 3px rgba(0, 0, 0, .45)); }
.pc-token.hit { transition: left .55s ease-in-out, top .55s ease-in-out, width .2s; z-index: 500; }
.pc-token.hit .pc-pawn { animation: pc-hit .6s ease-out; }
@keyframes pc-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14%); } 60% { transform: translateY(-11%); } }
@keyframes pc-ring { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.2); } }
@keyframes pc-hit { 0% { transform: translateY(-35%) rotate(0) scale(1.3); } 100% { transform: translateY(0) rotate(720deg) scale(1); } }

/* ----- throw tray: cowrie shells or two dice ----- */
.pc-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.pc-tray {
  display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 76px; width: 100%; padding: 8px 10px; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 40%, #3a1a5e, #1a0a33 70%); box-shadow: inset 0 0 0 1px rgba(255, 211, 107, .35), inset 0 0 24px rgba(0, 0, 0, .5);
}
.pc-shells { display: flex; gap: 5px; align-items: center; }
.pc-shells[hidden], .pc-dice[hidden] { display: none; }
.pc-shell { width: clamp(24px, 7vw, 34px); aspect-ratio: 40 / 52; transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); transition: filter .2s, opacity .2s; }
.pc-shell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pc-shell.up .pc-sb, .pc-shell.down .pc-sm { display: none; }
.pc-shell.up { filter: drop-shadow(0 0 5px rgba(255, 211, 107, .85)); }
.pc-shell.blank { opacity: .45; filter: grayscale(.4); }
.pc-shell.toss { animation: pc-toss .76s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(var(--k) * 30ms); }
@keyframes pc-toss {
  0% { transform: translateY(0) rotate(var(--rot, 0deg)) scaleX(1); }
  25% { transform: translateY(-26px) rotate(calc(var(--rot, 0deg) + 200deg)) scaleX(-1); }
  50% { transform: translateY(-12px) rotate(calc(var(--rot, 0deg) + 420deg)) scaleX(1); }
  75% { transform: translateY(2px) rotate(calc(var(--rot, 0deg) + 560deg)) scaleX(-1); }
  100% { transform: translateY(var(--dy, 0px)) rotate(calc(var(--rot, 0deg) + 720deg)) scaleX(1); }
}
.pc-dice { display: flex; gap: 12px; }
.pc-die { --s: 40px; position: relative; width: 54px; height: 54px; display: grid; place-items: center; perspective: 240px; border-radius: 50%; background: radial-gradient(closest-side, rgba(195, 139, 255, .4), transparent 75%); }
.pc-cube { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .75, .3, 1.08); }
.pc-die.instant .pc-cube { transition: none; }
.pc-die.toss { animation: pc-dtoss .7s ease-out; animation-delay: calc(var(--k) * 40ms); }
@keyframes pc-dtoss { 0% { transform: translateY(0); } 35% { transform: translateY(-16px); } 70% { transform: translateY(1px); } 85% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.pc-face {
  position: absolute; inset: 0; padding: 16%; border-radius: 14%; backface-visibility: hidden;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
  background: radial-gradient(circle at 30% 25%, #fffaf0, #f3e6c8 55%, #d6c08e);
  box-shadow: inset 0 0 0 1px rgba(80, 50, 10, .2), inset -2px -3px 5px rgba(110, 80, 30, .28), inset 2px 2px 4px #fff;
}
.pc-face.f1 { transform: translateZ(calc(var(--s) / 2)); }
.pc-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.pc-face.f3 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.pc-face.f4 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.pc-face.f2 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.pc-face.f5 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.pc-face i { width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a2e7a, #1a0826 70%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .8); }
.pc-face.f1 i { width: 90%; background: radial-gradient(circle at 40% 35%, #ff7a8a, #b0102c 70%); }
.pc-die.blank .pc-face i { visibility: hidden; }
.pc-val { display: flex; flex-direction: column; align-items: center; min-width: 56px; gap: 3px; }
.pc-val b { font: 900 2rem/1 var(--font-body); color: #fff; text-shadow: 0 0 14px rgba(255, 211, 107, .8); font-variant-numeric: tabular-nums; }
.pc-grace { font: 800 .64rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: #2a1606; background: var(--pc-gold); padding: 3px 7px; border-radius: 999px; box-shadow: 0 0 10px rgba(255, 211, 107, .7); }

.pc-btns { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.pc-throw { min-width: 160px; font-size: 1.05rem; }
.pc-skip[hidden] { display: none; }
.pc-moves { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; }
.pc-moves:empty { display: none; }
.pc-mv {
  --tc: var(--pc-c0);
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .86rem var(--font-body); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent);
}
.pc-mv.c1 { --tc: var(--pc-c1); } .pc-mv.c2 { --tc: var(--pc-c2); } .pc-mv.c3 { --tc: var(--pc-c3); }
.pc-mv .dot { width: 10px; height: 10px; background: var(--tc); }
.pc-mv em { font-style: normal; font-size: .72rem; font-weight: 800; color: var(--pc-gold); text-transform: uppercase; letter-spacing: .04em; }
.pc-mv:hover, .pc-mv:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tc), 0 0 12px color-mix(in srgb, var(--tc) 50%, transparent); }
.pc-note { margin: 0; min-height: 1.5em; text-align: center; color: var(--muted); font-weight: 600; font-size: .92rem; }
.pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
@media (max-width: 480px) {
  .pc-plaque { padding: 4px 5px; gap: 2px; border-radius: 8px; }
  .pc-tray { gap: 8px; padding: 6px; }
  .pc-val b { font-size: 1.6rem; }
  .pc-die { width: 46px; height: 46px; --s: 34px; }
}

/* wide screens: board on the left, throw tray and moves on the right */
@media (min-width: 1180px) {
  .board-pachisi { flex-direction: row; align-items: center; width: min(calc(100vw - 360px), 880px); gap: 16px; }
  .pc-stage { flex: 0 0 auto; width: min(calc(100vw - 680px), 560px); }
  .pc-controls { flex: 1 1 0; min-width: 0; }
  .pc-tray { flex-direction: column; gap: 10px; padding: 14px 10px; }
  .pc-shells { flex-wrap: wrap; justify-content: center; }
}