/* =========================================================================
   Poker Ogre - Construction / coming soon page
   ========================================================================= */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f1e7d6;
  background: #160708;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100svh;
  text-align: center;
  position: relative;
}

/* Animated layered background */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1000px 700px at 50% -10%, rgba(209, 31, 45, 0.55), transparent 60%),
    radial-gradient(800px 600px at 80% 110%, rgba(110, 13, 20, 0.6), transparent 55%),
    linear-gradient(180deg, #240b0d, #120506);
}
.bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side, rgba(227, 178, 74, 0.16), transparent 70%);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(-6%, -4%) scale(1); }
  100% { transform: translate(6%, 4%) scale(1.15); }
}

/* Floating gold motes */
.mote {
  position: fixed;
  z-index: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6d684, #b8862f);
  opacity: 0.5;
  filter: blur(0.4px);
  animation: rise linear infinite;
}
.mote:nth-child(1) { left: 12%; bottom: -20px; width: 6px; height: 6px; animation-duration: 13s; animation-delay: 0s; }
.mote:nth-child(2) { left: 28%; bottom: -20px; width: 10px; height: 10px; animation-duration: 18s; animation-delay: 3s; }
.mote:nth-child(3) { left: 47%; bottom: -20px; width: 5px; height: 5px; animation-duration: 11s; animation-delay: 1.5s; }
.mote:nth-child(4) { left: 66%; bottom: -20px; width: 9px; height: 9px; animation-duration: 16s; animation-delay: 5s; }
.mote:nth-child(5) { left: 81%; bottom: -20px; width: 7px; height: 7px; animation-duration: 14s; animation-delay: 2s; }
.mote:nth-child(6) { left: 92%; bottom: -20px; width: 5px; height: 5px; animation-duration: 19s; animation-delay: 4s; }
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-112svh) translateX(24px); opacity: 0; }
}

/* Content */
.coming {
  position: relative;
  z-index: 2;
  padding: 40px 24px;
  max-width: 640px;
  animation: fadeUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.coming__icon-wrap {
  position: relative;
  width: 122px;
  height: 122px;
  margin: clamp(20px, 4vw, 36px) auto clamp(34px, 6vw, 52px);
}
.coming__halo {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227, 178, 74, 0.45), transparent 70%);
  animation: pulse 3.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.6; }
  50%      { transform: scale(1.1); opacity: 1; }
}
.coming__ring {
  position: absolute;
  inset: -9px;
  border-radius: 26px;
  border: 1.5px dashed rgba(227, 178, 74, 0.5);
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.coming__icon {
  position: relative;
  z-index: 1;
  width: 122px;
  height: 122px;
  border-radius: 28px;
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(227, 178, 74, 0.3);
  animation: bob 5.5s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

.coming__eyebrow {
  font-family: "Cinzel", serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e3b24a;
  margin-bottom: 18px;
}
.coming__title {
  margin: 0 0 22px;
  line-height: 1;
}
.coming__logo {
  width: min(420px, 82vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
  animation: logoGlow 4.5s ease-in-out infinite;
}
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 0 rgba(246, 214, 132, 0)); }
  50%      { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(246, 214, 132, 0.35)); }
}

.coming__text {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: #d8c7ad;
  max-width: 30ch;
  margin: 0 auto 34px;
  line-height: 1.6;
}

/* Dealing-cards loader */
.coming__deal {
  position: relative;
  width: min(300px, 86vw);
  height: 120px;
  margin: 0 auto 18px;
}
.pcard {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -33px 0 0 -24px;
  width: 48px;
  height: 66px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff, #f0e8d6);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: "Cinzel", serif;
  color: #15110c;
  line-height: 1;
  animation: deal 3.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  will-change: transform, opacity;
}
.pcard__r { font-size: 0.92rem; font-weight: 700; }
.pcard__s { font-size: 1.2rem; }
.pcard--red { color: #c8102e; }

.pcard:nth-child(1) { --x: -104px; --y: 8px;  --r: -18deg; animation-delay: 0s;    }
.pcard:nth-child(2) { --x: -52px;  --y: -3px; --r: -9deg;  animation-delay: 0.16s; }
.pcard:nth-child(3) { --x: 0px;    --y: -9px; --r: 0deg;   animation-delay: 0.32s; }
.pcard:nth-child(4) { --x: 52px;   --y: -3px; --r: 9deg;   animation-delay: 0.48s; }
.pcard:nth-child(5) { --x: 104px;  --y: 8px;  --r: 18deg;  animation-delay: 0.64s; }

@keyframes deal {
  0%   { opacity: 0; transform: translate(0, -78px) rotate(2deg) scale(0.72); }
  10%  { opacity: 1; }
  26%, 80% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
  92%  { opacity: 0; transform: translate(var(--x), calc(var(--y) + 14px)) rotate(var(--r)) scale(0.94); }
  100% { opacity: 0; transform: translate(0, -78px) rotate(2deg) scale(0.72); }
}
.coming__status {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b09a83;
}

/* Footer */
.coming__footer {
  position: fixed;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 2;
  font-size: 0.85rem;
  color: #b09a83;
  padding-inline: 16px;
}
.coming__footer a { color: #e3b24a; text-decoration: none; font-weight: 600; }
.coming__footer a:hover { color: #f6d684; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .pcard { opacity: 1 !important; transform: translate(var(--x), var(--y)) rotate(var(--r)) !important; }
}