:root{
  --bg-1: #0b1020;
  --bg-2: #0f1724;
  --space-unit: 12px;
  --bg-anim-duration: 18s;
  --accent-1: 186 85 211; /* rgb for gradient stops (HSL-like) */
  --accent-2: 63 193 255;
  --card-bg: 18 23 33; /* rgb for semi-transparent card */
  --glass-alpha: 0.36;
  --muted: #9aa4b2;
  --text: #e6eef8;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --shadow-1: 0 8px 30px rgba(2,6,23,0.6);
  --shadow-2: 0 4px 12px rgba(2,6,23,0.45);
  --ease-smooth: cubic-bezier(.2,.9,.2,1);
}

/* Mobile-first base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  line-height:1.35;
}

/* Dimmed layered backdrop to give depth */
#selectBotModal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,40px);
  background: linear-gradient(180deg, rgba(2,6,23,0.65), rgba(2,6,23,0.75));
  z-index:9999;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  animation: overlayFade .28s var(--ease-smooth) both;
}

@keyframes overlayFade{from{opacity:0}to{opacity:1}}

/* Centered modal card */
.modal-content{
  position:relative;
  width:min(680px,100%);
  background: linear-gradient(180deg, rgba(var(--card-bg), var(--glass-alpha)), rgba(12,16,24,0.48));
  border-radius: var(--radius-xl);
  padding: clamp(20px,6vw,36px);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.02);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap: clamp(12px,2.6vw,20px);
  transform-origin: center;
  animation: cardPop .36s var(--ease-smooth) both;
  z-index:1;
}

/* staggered entrance for inner parts */
.modal-content > header{animation:fadeUp .42s var(--ease-smooth) both; animation-delay:.06s}
.modal-content > .hero-banner{animation:fadeUp .48s var(--ease-smooth) both; animation-delay:.12s}
.modal-content > .actions{animation:fadeUp .52s var(--ease-smooth) both; animation-delay:.18s}

.modal-content header{ text-align:center; display:block }

/* Soft glowing accent behind card */
.modal-content::before{
  content:'';
  position:absolute;
  inset:auto -20% -20% auto;
  width:220px;height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent-1),0.12), transparent 40%), radial-gradient(circle at 70% 70%, rgba(var(--accent-2),0.10), transparent 40%);
  filter: blur(30px);
  pointer-events:none;
}

/* subtle gradient border glow using an outer pseudo element */
.modal-content::after{
  content:'';
  position:absolute;
  inset:-2.5px;
  border-radius: calc(var(--radius-xl) + 2.5px);
  background: linear-gradient(90deg, rgba(var(--accent-1),0.14), rgba(var(--accent-2),0.12));
  filter: blur(6px);
  opacity:0.95;
  pointer-events:none;
  z-index:0;
}

/* Hero banner styles */
.hero-banner{
  width:100%;
  height:auto;
  border-radius: calc(var(--radius-lg));
  overflow:visible;
  display:block;
  margin-top:6px;
  margin-left:auto;
  margin-right:auto;
  box-shadow: 0 8px 28px rgba(2,6,23,0.55), 0 2px 6px rgba(0,0,0,0.45);
  position:relative;
}
.hero-banner img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  transform-origin:center center;
  transition:transform .45s var(--ease-smooth);
  border-radius:inherit;
}
.hero-banner:hover img{transform:scale(1.02)}
.hero-banner::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.18));
  mix-blend-mode: multiply;
  pointer-events:none;
  border-radius:inherit;
}

/* Small caption area (visually hidden by default but available if needed) */
.hero-banner figcaption{position:absolute;left:16px;bottom:12px;color:var(--text);font-weight:600;font-size:14px; text-shadow:0 4px 18px rgba(2,6,23,0.6)}

@keyframes cardPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Typography */
.modal-content h2{
  margin:0;
  font-weight:700;
  font-size:clamp(20px,5.4vw,28px);
  color:var(--text);
  letter-spacing: -0.01em;
}

.modal-content p{
  margin:0;
  color:var(--muted);
  margin-top:6px;
  font-size:clamp(13px,3.6vw,15px);
}

/* Actions area */
.actions{
  display:flex;
  flex-direction:column;
  gap:calc(var(--space-unit) * 1.2);
  width:100%;
  margin-top:8px;
}

.btn{
  -webkit-tap-highlight-color:transparent;
  appearance:none;
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 clamp(18px,4vw,28px);
  border-radius:999px;
  width:100%;
  font-weight:600;
  font-size:clamp(15px,3.8vw,18px);
  color:var(--text);
  transition:transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth), opacity .18s linear;
  box-shadow: var(--shadow-2), 0 1px 0 rgba(255,255,255,0.02);
  background:linear-gradient(180deg, rgba(var(--accent-1),0.14), rgba(var(--accent-2),0.06));
  backdrop-filter: blur(4px);
  position:relative;
  z-index:1;
}

.btn:active{transform:translateY(1px) scale(.995)}
.btn:focus{outline:3px solid rgba(255,255,255,0.06); outline-offset:4px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn--primary{
  background: linear-gradient(135deg, rgba(var(--accent-1),0.98), rgba(var(--accent-2),0.95));
  color: #061026;
  box-shadow: 0 12px 40px rgba(63,193,255,0.08), 0 4px 12px rgba(2,6,23,0.6);
  overflow: hidden;
}

/* sheen animation for primary CTA */
.btn--primary::before{
  content: '';
  position: absolute;
  top: 0; left: -140%;
  height: 100%;
  width: 36%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  filter: blur(6px);
  opacity: 0.9;
  pointer-events: none;
  animation: sheenMove 2.6s linear infinite;
}

@keyframes sheenMove{
  0%{ left: -140%; opacity: 0 }
  10%{ opacity: 0.9 }
  50%{ left: 140%; opacity: 0.9 }
  90%{ opacity: 0 }
  100%{ left: 140%; opacity: 0 }
}

@media (prefers-reduced-motion:reduce){
  .btn--primary::before{animation:none;opacity:0}
}

.btn--secondary{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color:var(--text);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 28px rgba(2,6,23,0.45);
}

.btn:hover{transform:translateY(-4px) scale(1.01)}

/* soft glow behind buttons */
.btn::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:inherit;
  background: radial-gradient(circle at 20% 10%, rgba(var(--accent-1),0.16), transparent 20%), radial-gradient(circle at 80% 90%, rgba(var(--accent-2),0.12), transparent 20%);
  filter: blur(10px);
  opacity:0;
  transition:opacity .18s var(--ease-smooth), transform .18s var(--ease-smooth);
  pointer-events:none;
  z-index:-1;
}
.btn:hover::after,.btn:focus::after{opacity:1;transform:scale(1.02)}

/* Subtle animated background overlay to add life without flashiness */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(var(--accent-1),0.03), rgba(var(--accent-2),0.02), rgba(255,255,255,0.01));
  background-size: 400% 400%;
  animation: bgShift var(--bg-anim-duration) linear infinite;
  mix-blend-mode: screen;
  opacity:0.9;
}

@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ID-specific styles (kept for existing markup) */
/* stronger, distinct button identities */
#btnSpaceman{background:linear-gradient(135deg,#8b3be6,#3fc1ff);color:#041026; box-shadow: 0 10px 30px rgba(99,59,221,0.12)}
#btnMahjong{background:linear-gradient(135deg,#10b981,#0077ff);color:#041026; box-shadow: 0 10px 30px rgba(0,119,255,0.08)}

/* Accessibility: larger tap targets on small screens */
@media (min-width:660px){
  /* on wider screens show actions horizontally */
  .actions{flex-direction:row;gap:var(--space-unit);align-items:center}
  .btn{width:auto;min-width:220px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}