/* SKG_EndModal — premium end-of-round modal. Pairs with endmodal.js. */

.skg-em-root {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.skg-em-root.skg-em-in { opacity: 1; }

.skg-em-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 16, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.skg-em-recap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.28;
  filter: saturate(0.7);
  transform: scale(0.94);
}

.skg-em-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.skg-em-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 340px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 24px;
  padding: 26px 20px 18px;
  text-align: center;
  color: #eef0ff;
  background: linear-gradient(165deg, #1c2244, #0d1128 62%, #0a0d20);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: scale(0.92) translateY(10px);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.skg-em-in .skg-em-card { transform: scale(1) translateY(0); }

.skg-em-win .skg-em-card { border-color: rgba(255, 212, 59, 0.45); }
.skg-em-lose .skg-em-card { border-color: rgba(255, 93, 143, 0.3); }

.skg-em-glow {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 240px;
  height: 190px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(38px);
  opacity: 0.5;
}
.skg-em-win .skg-em-glow { background: radial-gradient(circle, rgba(255, 212, 59, 0.75), transparent 70%); }
.skg-em-lose .skg-em-glow { background: radial-gradient(circle, rgba(255, 93, 143, 0.5), transparent 70%); }
.skg-em-draw .skg-em-glow { background: radial-gradient(circle, rgba(120, 150, 255, 0.55), transparent 70%); }

.skg-em-art {
  position: relative;
  font-size: 62px;
  line-height: 1.1;
  margin-bottom: 4px;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.45));
  animation: skgEmArt 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both 0.08s;
}
@keyframes skgEmArt {
  from { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.skg-em-title {
  position: relative;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin: 2px 0 4px;
  background: linear-gradient(90deg, #ffd43b, #ff8a3d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.skg-em-lose .skg-em-title { background: linear-gradient(90deg, #c9cfec, #8b93b8); -webkit-background-clip: text; background-clip: text; }
.skg-em-draw .skg-em-title { background: linear-gradient(90deg, #b7c6ff, #7e96e8); -webkit-background-clip: text; background-clip: text; }

.skg-em-sub {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(238, 240, 255, 0.68);
  margin: 0 4px 6px;
}

.skg-em-chips {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 2px;
}
.skg-em-chip {
  flex: 1 1 0;
  min-width: 72px;
  max-width: 104px;
  padding: 9px 6px 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.skg-em-chip-val {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
}
.skg-em-chip-lab {
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(238, 240, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skg-em-coins {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 12px auto 2px;
  padding: 9px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 212, 59, 0.16), rgba(255, 138, 61, 0.12));
  border: 1px solid rgba(255, 212, 59, 0.5);
  box-shadow: 0 4px 18px rgba(255, 170, 26, 0.18), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  animation: skgEmCoins 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both 0.22s;
}
@keyframes skgEmCoins {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.skg-em-coins-plus {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, #ffe27a, #ffb02e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.skg-em-coins-ico {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff3c2, #ffd43b 42%, #f0a51a 72%, #c67c08);
  box-shadow: 0 0 0 1.5px rgba(198, 124, 8, 0.9) inset, 0 2px 6px rgba(255, 170, 26, 0.45);
  position: relative;
}
.skg-em-coins-ico::after {
  content: '';
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  border: 1.2px solid rgba(163, 100, 5, 0.55);
}

.skg-em-btns {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}
.skg-em-btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 240, 255, 0.88);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.skg-em-btn:active { transform: scale(0.97) translateY(1px); filter: brightness(1.15); }
.skg-em-btn-primary {
  border: 0;
  color: #241b00;
  background: linear-gradient(135deg, #ffd43b, #ff9f1a);
  box-shadow: 0 6px 20px rgba(255, 170, 26, 0.35), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
}
.skg-em-btn-primary:active { filter: brightness(1.05); }

@media (min-width: 720px) {
  .skg-em-card { max-width: 380px; padding: 32px 26px 22px; }
  .skg-em-art { font-size: 72px; }
  .skg-em-title { font-size: 31px; }
}