/* Kofe Mafia — the photographed table, the cards on it, and the night/morning moment (see table.js). */

/* ------------------------------------------------------------ the photo under the table */
.mf-table.has-photo .mf-felt { display: none; }
.mf-photo { position: absolute; inset: -6% -14% -4%; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 52% at 50% 51%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 52% at 50% 51%, #000 62%, transparent 100%); }
/* the photo is a little taller than the table (x1.12) and its felt sits in the table's middle */
.mf-photo img { position: absolute; left: 50%; top: calc((6% + 50% - 46.2% * 1.12) / 1.1); height: calc(112% / 1.1); width: auto; max-width: none;
  transform: translateX(-50%) var(--nudge, ); transform-origin: 50% 46.2%; opacity: 0; transition: opacity 1.6s ease; will-change: opacity; }
.mf-photo img.is-on { opacity: 1; }
.mf-table.has-photo .mf-centre, .mf-table.has-photo .mf-seats { z-index: 2; }
@media (min-width: 761px) { .mf-table.has-photo .mf-centre { width: 38%; } }
.mf-table.has-photo .mf-c-head, .mf-table.has-photo .mf-c-sub, .mf-table.has-photo .mf-c-label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 0, 0, 0.85); }

/* ------------------------------------------------------------ the cards on the felt */
.mf-deck { position: absolute; inset: 0; pointer-events: none; z-index: 1; perspective-origin: 50% 50%; }
.mf-plane { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.mf-tcard { position: absolute; left: 0; top: 0; width: var(--cw); height: calc(var(--cw) * 1.5); margin-left: calc(var(--cw) / -2); margin-top: calc(var(--cw) * -0.75);
  transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.22, 0.9, 0.24, 1); }
.mf-tc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.mf-tcard.is-up .mf-tc-in { transform: rotateY(180deg); }
.mf-tc-f { position: absolute; inset: 0; border-radius: 7%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55); }
.mf-tc-f img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); display: block; }
.mf-tc-front { transform: rotateY(180deg); }
.mf-tcard.is-out .mf-tc-front img { filter: saturate(0.7) brightness(0.85); }
.mf-tcard.is-mine { pointer-events: auto; cursor: pointer; }
.mf-tcard.is-mine:hover .mf-tc-in { transform: translateZ(12px); }
.mf-tcard.is-mine.is-up:hover .mf-tc-in { transform: translateZ(12px) rotateY(180deg); }
.mf-tcard.is-mine:focus-visible { outline: 2px solid #e3ad54; outline-offset: 4px; border-radius: 8px; }
.mf-play[data-state="NIGHT"] .mf-tc-f { filter: brightness(0.75); }

/* your card's light: a soft ellipse drawn flat under it, so the edge stays smooth; only opacity and scale move */
.mf-myglow { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.mf-myglow.is-on { opacity: 1; }
.mf-myglow i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); will-change: opacity, transform; }
.mf-myglow i:first-child { width: var(--gw); height: calc(var(--gw) * 0.52);
  background: radial-gradient(closest-side, rgba(255, 222, 150, 0.78), rgba(246, 196, 110, 0.42) 38%, rgba(230, 170, 80, 0.12) 66%, rgba(230, 170, 80, 0) 100%);
  animation: mf-glowA 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.mf-myglow i:last-child { width: calc(var(--gw) * 0.62); height: calc(var(--gw) * 0.34);
  background: radial-gradient(closest-side, rgba(255, 240, 200, 0.5), rgba(255, 226, 160, 0.18) 55%, rgba(255, 226, 160, 0) 100%);
  animation: mf-glowB 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes mf-glowA { 0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@keyframes mf-glowB { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } }

/* ------------------------------------------------------------ night falls / the city wakes */
.mf-cine { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; background: #000; }
.mf-cine.is-on { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; }
.mf-cine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; animation: mf-cine-kb 9s ease-in-out infinite alternate; }
.mf-cine img.is-on { opacity: 1; }
.mf-cine::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.7) 100%); }
.mf-cine-fog { position: absolute; inset: -20%; z-index: 1; opacity: 0; transition: opacity 1.8s ease;
  background: radial-gradient(closest-side at 30% 60%, rgba(200, 210, 230, 0.12), transparent), radial-gradient(closest-side at 70% 40%, rgba(200, 210, 230, 0.09), transparent);
  animation: mf-cine-drift 26s linear infinite; }
.mf-cine.is-fog .mf-cine-fog { opacity: 1; }
.mf-cine-t { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 2; margin: 0; padding: 0 16px; text-align: center; color: #f4eee2; display: grid; gap: 10px; }
.mf-cine-t b { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 6vw, 64px); line-height: 1.1; letter-spacing: 0.03em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.9); }
.mf-cine-t b span { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(10px); transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease; }
.mf-cine.is-said .mf-cine-t b span { opacity: 1; filter: blur(0); transform: none; }
.mf-cine-t small { font-family: var(--display); font-style: italic; font-size: clamp(15px, 2vw, 22px); letter-spacing: 0.14em; color: #cba660; opacity: 0; transition: opacity 1s ease 0.9s; text-shadow: 0 1px 14px #000; }
.mf-cine.is-said .mf-cine-t small { opacity: 1; }
@keyframes mf-cine-kb { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, -1%); } }
@keyframes mf-cine-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* ------------------------------------------------------------ the role card with its picture */
.mf-card.has-art { animation: mf-fade 0.6s ease; gap: 10px; padding-top: 28px; min-height: 0; perspective: 1400px; }
.mf-art { width: min(200px, 46vw); aspect-ratio: 2 / 3; max-width: 100%; position: relative; animation: mf-rise 1.1s cubic-bezier(0.2, 0.85, 0.25, 1) backwards; }
.mf-art-in { position: absolute; inset: 0; transform-style: preserve-3d; animation: mf-turn 1.25s cubic-bezier(0.35, 0.65, 0.2, 1) 1.15s both; }
.mf-art-f { position: absolute; inset: 0; border-radius: 7%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -20px #000; }
.mf-art-f img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); display: block; }
.mf-art-front { transform: rotateY(180deg); }
.mf-art-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 190, 0.6) 50%, transparent 70%); transform: translateX(-130%); animation: mf-glare 1.6s ease-out 2.1s forwards; }
.mf-card.has-art .mf-card-k { animation: mf-in 0.8s ease 0.2s backwards; }
.mf-card.has-art h2 { animation: mf-letters 1.2s var(--ease) 2.2s backwards; }
.mf-card.has-art .mf-card-team, .mf-card.has-art .mf-card-mates { animation: mf-in 0.9s ease 2.5s backwards; }
.mf-card.has-art .mf-card-line { animation: mf-in 1s ease 2.7s backwards; }
.mf-card.has-art.is-again .mf-art, .mf-card.has-art.is-again .mf-card-k { animation: none; }
.mf-card.has-art.is-again .mf-art-in { animation-delay: 0.1s; animation-duration: 0.9s; }
.mf-card.has-art.is-again h2, .mf-card.has-art.is-again .mf-card-team, .mf-card.has-art.is-again .mf-card-mates, .mf-card.has-art.is-again .mf-card-line { animation-delay: 0.6s; }
.mf-card.has-art.is-again .mf-art-front::after { animation-delay: 0.7s; }
@keyframes mf-rise { from { opacity: 0; transform: translateY(38vh) scale(0.35) rotateX(55deg); } 40% { opacity: 1; } }
@keyframes mf-turn { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes mf-glare { to { transform: translateX(130%); } }

@media (max-width: 760px) {
  .mf-photo, .mf-deck { display: none; }
  .mf-card.has-art { padding: 22px 20px; }
  .mf-art { width: min(170px, 44vw); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-cine *, .mf-deck *, .mf-art, .mf-art-in, .mf-art-front::after { animation: none !important; transition-duration: 0.01s !important; }
  .mf-art-in { transform: rotateY(180deg); }
}

/* ------------------------------------------------------------ pictures for the end of the game and the Blacks' room */
.mf-over.win-red { background: linear-gradient(180deg, rgba(40, 12, 8, 0.2), rgba(18, 8, 7, 0.55) 30%, rgba(18, 8, 7, 0.93) 58%), url(../art/mafia/win-red.webp) center 30% / cover no-repeat, #120807; }
.mf-over.win-black { background: linear-gradient(180deg, rgba(5, 5, 5, 0.15), rgba(3, 3, 3, 0.5) 30%, rgba(3, 3, 3, 0.93) 58%), url(../art/mafia/win-black.webp) center 60% / cover no-repeat, #030303; }
.mf-over h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8); }
.mf-team { background: linear-gradient(180deg, rgba(8, 6, 6, 0.7), rgba(8, 6, 6, 0.93) 70%), url(../art/mafia/backroom.webp) center / cover no-repeat, #080606; }