/* Private role art and event sprites share the existing server-driven scene. */
.mafia-role-card {
  --role-accent: #e5bd70;
  --role-ink: #1b242b;
  position: relative;
  inset: auto;
  z-index: 1;
  inline-size: 100%;
  max-block-size: none;
  padding: 0;
  color: #f9edda;
  background: #16242d;
  border: 1px solid #b28e53;
  border-radius: 18px 6px 18px 6px;
  box-shadow: 0 14px 38px #07141b66;
  animation: none;
}
.mafia-role-card--mafia { --role-accent: #ef9b95; --role-ink: #382027; }
.mafia-role-card--detective { --role-accent: #91c6f3; --role-ink: #1a2d42; }
.mafia-role-card--doctor { --role-accent: #83d6be; --role-ink: #17372f; }
.mafia-role-art { position: relative; isolation: isolate; block-size: 300px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%,var(--role-ink),#0b1a23); }
.mafia-role-art > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 32%; }
.mafia-role-art > img[hidden], .mafia-revealed-card > img[hidden] { display: none; }
.mafia-role-art::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(#07141b7a,transparent 28%,transparent 48%,#16242df2 98%); }
.mafia-role-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--role-accent); }
.mafia-role-fallback .icon { inline-size: 96px; block-size: 96px; opacity: .45; }
.mafia-role-top { position: sticky; z-index: 3; inset-block-start: 0; display: flex; justify-content: space-between; align-items: start; gap: 8px; block-size: 64px; padding: 10px; margin-block-end: -64px; background: linear-gradient(#0b1c2699,transparent); }
.mafia-role-top > span { display: flex; align-items: center; gap: 5px; margin-block-start: 7px; padding: 4px 8px; color: #fff3d8; background: #0b1c26d9; border: 1px solid #ffe6b04d; border-radius: 5px; font-size: .69rem; font-weight: 750; }
.mafia-role-top .icon { inline-size: 16px; block-size: 16px; }
.mafia-role-top .social-role-close { min-inline-size: 44px; min-block-size: 44px; color: #fff4df; background: #0b1c26e6; border-color: #fff4df70; }
.mafia-role-title { position: absolute; z-index: 2; inset: auto 20px 16px; text-align: start; }
.mafia-role-title > span { display: inline-block; padding: 2px 6px; color: var(--role-accent); background: #091820db; border-radius: 4px; font-size: .72rem; font-weight: 750; }
.mafia-role-title h3 { color: #fff4de; margin: 3px 0; font-size: clamp(1.7rem,2.5vw,2.2rem); line-height: 1.4; }
.mafia-role-title small { font-size: .75rem; color: #ebdfca; }
.mafia-role-body { padding: 0 18px 18px; text-align: start; }
.mafia-role-player { display: flex; gap: 9px; align-items: center; padding-block: 10px 12px; margin-block-end: 12px; border-block-end: 1px solid #edd5a12e; }
.mafia-seat-number { display: grid; place-items: center; flex: 0 0 30px; block-size: 30px; color: var(--role-accent); background: var(--role-ink); border: 1px solid var(--role-accent); border-radius: 50%; font-size: .8rem; font-weight: 900; }
.mafia-role-player > bdi { min-inline-size: 0; font-size: .88rem; font-weight: 850; overflow-wrap: anywhere; }
.mafia-role-player > small { margin-inline-start: auto; flex: 0 0 auto; color: #c8d6d7; font-size: .65rem; }
.mafia-role-body > p { margin: 0 0 12px; opacity: 1; color: #e2e6df; font-size: .82rem; line-height: 1.85; }
.mafia-role-goal { display: grid; gap: 3px; font-size: .75rem; line-height: 1.8; }
.mafia-role-goal strong { color: var(--role-accent); font-size: .67rem; }
.mafia-role-state { display: flex; align-items: start; gap: 7px; margin-block-start: 12px; padding: 9px; color: #e3e9df; background: #ffffff0a; border: 1px solid #ffffff1a; border-radius: 7px; font-size: .73rem; line-height: 1.8; overflow-wrap: anywhere; }
.mafia-role-state > .icon { flex: 0 0 16px; inline-size: 16px; block-size: 16px; margin-block-start: 3px; color: var(--role-accent); }
.mafia-role-state.is-confirmed { color: #b7ebd1; border-color: #83d6be66; }
.mafia-role-team { display: grid; gap: 3px; margin-block-start: 12px; font-size: .76rem; line-height: 1.9; }
.mafia-role-team strong { font-size: .67rem; color: var(--role-accent); }
.mafia-private-result { display: grid; gap: 3px; margin-block-start: 12px; background: #253e54; border-inline-start: 3px solid #91c6f3; }
.mafia-private-result small { font-size: .65rem; color: #c3d9ef; }
.mafia-private-result bdi { font-size: .83rem; overflow-wrap: anywhere; }
.mafia-private-result strong { font-size: .83rem; color: #fff3d8; }
.mafia-role-peek { position: relative; inset: auto; z-index: 1; inline-size: 100%; padding: 12px; border-radius: 12px; color: #f4e2bb; background: #172c36; border-color: #a88c59; text-align: start; }
.mafia-role-peek > span:nth-child(2) { display: grid; gap: 4px; }
.mafia-role-peek strong { font-size: .9rem; }
.mafia-role-peek small { font-size: .67rem; color: #d2d8d3; }
.mafia-card-back { display: grid; place-items: center; inline-size: 36px; block-size: 48px; margin-inline-end: 5px; background: repeating-linear-gradient(45deg,#dabb7817 0 1px,transparent 1px 6px),#11252e; border: 1px solid #c4a362; border-radius: 6px 2px; }
.mafia-revealed-cards { margin-block: 14px; padding: 12px; color: #f6e6c9; background: #0c202a; border: 1px solid #c5a66670; border-radius: 12px; text-align: start; }
.mafia-revealed-cards summary { cursor: pointer; min-block-size: 44px; align-content: center; font-size: .82rem; font-weight: 800; }
.mafia-revealed-cards > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(100px,1fr)); gap: 8px; }
.mafia-revealed-card { overflow: hidden; display: grid; align-content: start; gap: 3px; padding-block-end: 9px; background: #1c313b; border: 1px solid #ffffff26; border-radius: 7px; text-align: center; }
.mafia-revealed-card > img { inline-size: 100%; block-size: 120px; object-fit: cover; object-position: center 28%; }
.mafia-revealed-card > span { padding: 4px 6px 0; font-size: .67rem; overflow-wrap: anywhere; }
.mafia-revealed-card > strong { font-size: .83rem; color: #f7d58d; }
.mafia-revealed-card > small { font-size: .65rem; color: #d8dfd9; }
.mafia-effects { position: absolute; z-index: 250; inset: 0; pointer-events: none; direction: rtl; }
.mafia-effect-notice { --effect-color: #e6c67e; position: absolute; inset: 7% 50% auto auto; transform: translateX(50%); display: flex; align-items: center; gap: 10px; inline-size: min(340px,88%); padding: 12px 14px; color: #fff0d5; background: #0b1828f5; border: 1px solid var(--effect-color); border-radius: 14px 4px 14px 4px; box-shadow: 0 12px 32px #0008; text-align: start; animation: mafia-event-notice 3400ms ease both; animation-delay: var(--effect-elapsed,0ms); }
.mafia-effect-notice > div { min-inline-size: 0; }
.mafia-effect-notice small { display: block; color: var(--effect-color); font-size: .63rem; }
.mafia-effect-notice strong { display: block; margin-block: 2px; font-size: clamp(.9rem,2.4cqi,1.1rem); }
.mafia-effect-notice p { margin: 0; font-size: .74rem; line-height: 1.7; overflow-wrap: anywhere; }
.mafia-effect--kill { --effect-color: #ef939a; --sprite-x: 0%; --sprite-y: 0%; }
.mafia-effect--protect { --effect-color: #8de1cd; --sprite-x: 100%; --sprite-y: 0%; }
.mafia-effect--inspect { --effect-color: #8cc6ff; --sprite-x: 0%; --sprite-y: 100%; }
.mafia-effect--vote { --effect-color: #f3d481; --sprite-x: 100%; --sprite-y: 100%; }
.mafia-effect-emblem { position: relative; flex: 0 0 58px; block-size: 58px; display: grid; place-items: center; color: var(--effect-color); }
.mafia-effect-emblem .icon { inline-size: 32px; block-size: 32px; }
.mafia-effect-emblem::after, .mafia-target-effect { content: ''; background: url('/assets/mafia/vfx/mf-actions-atlas-v1.webp') var(--sprite-x) var(--sprite-y)/200% 200%; mix-blend-mode: screen; mask-image: radial-gradient(ellipse closest-side,#000 76%,transparent 100%); }
.mafia-effect-emblem::after { position: absolute; inset: 0; }
.mafia-effect--night .mafia-effect-emblem::after { display: none; }
.mafia-target-effect { position: absolute; z-index: 8; pointer-events: none; inset: -18px -12px auto; block-size: 90px; animation: mafia-target-sigil 3400ms ease both; animation-delay: var(--effect-elapsed,0ms); }
.mafia-actor[data-mafia-effect] .mafia-player-tag { outline: 2px solid #ffe9b4; outline-offset: 3px; }
.mafia-actor[data-mafia-effect="kill"] .mafia-player-tag { outline-color: #ef939a; }
.mafia-actor[data-mafia-effect="protect"] .mafia-player-tag { outline-color: #8de1cd; }
.mafia-actor[data-mafia-effect="inspect"] .mafia-player-tag { outline-color: #8cc6ff; }
.mafia-target-effect.mafia-effect--kill { animation-name: mafia-dagger-trace; }
.mafia-target-effect.mafia-effect--protect::before { content: ''; position: absolute; inset: 14% 20%; border: 2px solid #8de1cd; border-radius: 50%; animation: mafia-protect-ring 1600ms ease-out both; animation-delay: var(--effect-elapsed,0ms); }
.mafia-target-effect.mafia-effect--inspect { animation-name: mafia-investigation-sweep; }
.mafia-target-effect.mafia-effect--vote { animation-name: mafia-ballot-drop; }
.mafia-actor[data-mafia-resolution="kill"] .mafia-character-art,
.mafia-actor[data-mafia-resolution="vote"] .mafia-character-art { animation: mafia-player-depart 3400ms ease-out both; animation-delay: var(--effect-elapsed,0ms); }
@keyframes mafia-dagger-trace {
  0% { opacity: 0; transform: translate(14px,-12px) rotate(-18deg) scale(.8); }
  18%,70% { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(-8px,10px) rotate(12deg) scale(.9); }
}
@keyframes mafia-protect-ring {
  0% { opacity: 0; transform: scale(.55); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes mafia-investigation-sweep {
  0% { opacity: 0; transform: translateX(8px); }
  20%,70% { opacity: 1; }
  45% { transform: translateX(-5px); }
  100% { opacity: 0; transform: translateX(4px); }
}
@keyframes mafia-ballot-drop {
  0% { opacity: 0; transform: translateY(-16px) scale(.8); }
  20%,70% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(.9); }
}
@keyframes mafia-player-depart {
  0% { opacity: 1; transform: translateY(0); }
  18% { opacity: .75; transform: translateY(3px); }
  75% { opacity: .25; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes mafia-event-notice {
  0% { opacity: 0; translate: 0 -8px; }
  10%,85% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -4px; }
}
@keyframes mafia-target-sigil {
  0% { opacity: 0; scale: .75; }
  16%,75% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.08; }
}
@media (max-width: 1100px) {
  .mafia-role-card { position: fixed; z-index: 430; inset: auto max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) auto; inline-size: min(310px,calc(100vw - 24px)); max-block-size: min(76dvh,650px); overflow-y: auto; overscroll-behavior: contain; }
  .mafia-role-art { block-size: 205px; }
  .mafia-role-title { inset-inline: 16px; inset-block-end: 10px; }
  .mafia-role-title h3 { font-size: 1.7rem; }
  .mafia-role-body { padding-inline: 14px; padding-block-end: 14px; }
  .mafia-role-peek { position: fixed; z-index: 430; inset: auto max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) auto; inline-size: auto; max-inline-size: calc(100vw - 24px); padding: 7px 12px; border-radius: 10px; }
  .mafia-card-back { inline-size: 28px; block-size: 36px; }
  .mafia-role-peek small { display: none; }
}
@media (max-height: 500px) and (max-width: 1100px) {
  .mafia-role-card { max-block-size: calc(100dvh - 24px); }
  .mafia-role-art { block-size: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .mafia-effect-notice, .mafia-target-effect, .mafia-target-effect::before,
  .mafia-actor[data-mafia-resolution] .mafia-character-art { animation: none; }
  .mafia-role-peek:hover { transform: none; }
}
@media (forced-colors: active) {
  .mafia-role-card, .mafia-role-peek, .mafia-effect-notice { border: 2px solid CanvasText; }
  .mafia-role-art::after, .mafia-target-effect { display: none; }
  .mafia-role-title { background: Canvas; color: CanvasText; }
}