@import url('https://fonts.googleapis.com/css2?family=Mouse+Memoirs&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slackey&display=swap');
body {
	font-family: "Mouse Memoirs", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size:1.3rem;
	background-color:#99ffe3;
	color:black;
}
.progress-bar {
  background-color: #b541a4!important;
}

.f-color-pink {
	color:#b541a4;
}

.text-bg-secondary {
  color: #fff !important;
  background-color: #b541a4 !important;
}
.stat-box {
	border-style:solid;
	border-width:2px;
	border-color:#3f5c58;
	background-color: #3f5c58;
	border-radius:5px;
	color:#FFF;
}
a {
	color:#b541a4;
	text-decoration:none;
}
a:hover {
	color:#68255e;
	text-decoration:none;
}
@media (max-width: 575.98px) {
  #diceArea .pill {
    margin: 0 .1rem !important;   /* even tighter than mx-0 if needed */
    min-width: 26px !important;    /* safety if inline 28px is still wide */
  }
}
/* Only affects the score toasts container */
#scoreToasts .toast-score {
	background: #fff !important;
	border: 1px solid #b541a4 !important;
}
#scoreToasts .toast-score .toast-body {
	color: #000;
	font-size: 150%;      /* 2× bigger */
	line-height: 1.2;
}
/* Force the close icon color & visibility */
#scoreToasts .toast-score .btn-close {
	--bs-btn-close-color: #b541a4;
	opacity: 1;
	width: 1.5rem;
	height: 1.5rem;
}
#scoreToasts .toast {
  border-radius: 0 !important;
}
@media (max-width: 768px) {
  #scoreToasts {
    left: 0;
    right: 0;
    width: 100%;
  }

  #scoreToasts .toast {
    width: 100%;
    max-width: 100%;
  }
}
.chat-badge-number {
  position: absolute;
  top: -2px;
  right: -6px;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: #b541a4;

  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;

  box-shadow: 0 0 0 2px #b541a4;
}
.navvy {
	background-color:#b541a4;
	padding:0 10px;
	color:#FFF;
}
.number {
	font-family: "Slackey", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-style: normal;
	color:black;
}
.icon-pink {
	color:#b541a4;
}
.stat-blue {
	color: rgb(0, 219, 255);
}
.game-stats {
	border:1px solid #b541a4; 
	border-radius:8px;
}
.dice-styling {
	background-color:#FFF;
	border-radius:12px;
}
.scoreboard-styling {
	background-color:#FFF;
	padding:20px;
	border-radius:12px;
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
  color: #232327;
  pointer-events: none;
  background-color: grey;
  border-color: grey;
  opacity: var(--bs-btn-disabled-opacity);
}
.btn-primary {
	text-transform: uppercase;
	background-color:#b541a4;
	border-color:#b541a4;
}
.btn-primary:hover {
	text-transform: uppercase;
	background-color:#68255e;
	border-color:#68255e;
}
.btn-outline-primary {
	color:#b541a4;
	border-color:#b541a4;
	border-width:2px;
}
.btn-outline-primary:hover {
	background-color:#b541a4;
	border-color:#b541a4;
}
.bg-success {
  background-color: transparent !important;
  border-color: green;
  color: black;
  border-style: solid;
  border-width: 2px;
}
.bg-danger {
  background-color: transparent !important;
  border-color: red;
  color: black;
  border-style: solid;
  border-width: 2px;
}
.pill { 
	display:inline-block;
	border-radius:12px;
	border-color:transparent;
	border-width:3px;
	border-style:solid; 
	padding:0 10px;	
}
.ok { 
	background:none; 
	border-color:#b541a4;
	border-width:3px;
	border-style:solid;
	padding:0 10px;	
}
.warn { 
	background:#fef3c7; 
	color:#92400e; 
}
/* Modal entrance animation */
.animated-modal {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s ease;
}

/* When modal is shown */
.modal.show .animated-modal {
  transform: scale(1);
  opacity: 1;
}

/* WIN state */
.modal-header.bg-success {
  animation: winGlow 1.2s ease-in-out infinite alternate;
}

@keyframes winGlow {
  from {
    box-shadow: 0 0 10px rgba(25, 135, 84, 0.5);
  }
  to {
    box-shadow: 0 0 25px rgba(25, 135, 84, 1);
  }
}

/* LOSE state */
.modal-header.bg-danger {
  animation: losePulse 0.8s ease-in-out 2;
}

@keyframes losePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

#grmBody {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.modal.show #grmBody {
  opacity: 1;
  transform: translateY(0);
}
.fx-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fxFadeIn 0.4s ease;
}

@keyframes fxFadeIn {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.fx-item.fx-out {
  animation: fxFadeOut 0.6s ease forwards;
}

@keyframes fxFadeOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* Example styles */
.fx-yahtzee {
  font-size: 60px;
  font-weight: bold;
  color: gold;
}

/* container already handled by .fx-item */

.fx-fail {
  font-size: 60px;
  font-weight: 900;
  color: #ff2a2a;

  animation: failImpact 0.4s ease-out,
             failPulse 1.2s ease-in-out 0.4s infinite;
}

@keyframes failImpact {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes failPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

.fx-number-strong {
  font-size: 60px;
  font-weight: 800;
  color: #00e676;

  animation:
    numberImpact 0.3s ease-out,
    numberFloat 1s ease-in-out 0.3s;
}

@keyframes numberImpact {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes numberFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-20px); }
}

.fx-yahtzee-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* BASE STYLE */
.fx-yahtzee-line {
  font-size: 72px;
  font-weight: 900;
  color: #b541a4;
}

/* RIGHT → CENTER */
.fx-yahtzee-right {
  animation: slideRightIn 0.5s cubic-bezier(.2,1.4,.4,1) forwards;
}

/* LEFT → CENTER */
.fx-yahtzee-left {
  animation: slideLeftIn 0.5s cubic-bezier(.2,1.4,.4,1) forwards;
}

/* RIGHT LINE */
@keyframes slideRightIn {
  0% {
    transform: translateX(100vw);
    opacity: 0;
  }
  70% {
    transform: translateX(-10px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
  }
}

/* LEFT LINE */
@keyframes slideLeftIn {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  70% {
    transform: translateX(10px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
  }
}

/* IMPACT PULSE AFTER MEET */
.fx-yahtzee-wrapper {
  animation: yahtzeePulse 0.6s ease-out 0.5s;
}

@keyframes yahtzeePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.fx-straight {
  font-size: 48px;
  font-weight: 800;
  color: #4dabf7;
}

.fx-straight-high {
  color: #339af0;
}

.fx-fullhouse {
  font-size: 50px;
  font-weight: 900;
  color: #adb5bd;
}

.fx-fullhouse-big {
  color: #845ef7;
}