/* styles.css - improved, focused on readability and accessibility */
:root{
  --bg-1: #f8f9fa;
  --bg-2: #f0f3f8;
  --card-bg: #ffffff;
  --text: #1a202c;
  --muted: #718096;
  --accent: #5b21b6;
  --accent-2: #7c3aed;
  --success: #10b981;
  --danger: #ef4444;
  --glass-border: #e2e8f0;
}

html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:2rem 1rem;
  overflow-y:auto;
}

.container{
  max-width:1400px;
  display:flex;
  gap:2rem;
  width:100%;
  align-items:flex-start;
}

/* Left and right sidebar for ads */
.sidebar-left, .sidebar-right {
  flex: 0 0 200px;
  min-height:500px;
  background: transparent;
  border:none;
  border-radius:16px;
  padding:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-size:0.875rem;
  text-align:center;
}

/* Main content area */
.main-wrapper {
  flex:1;
  min-width:0;
}

.card{
  background: var(--card-bg);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
  

.btn-roll{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff;
  border:0;
  padding:1rem 1.5rem;
  font-weight:600;
  border-radius:14px;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s;
  box-shadow: 0 4px 15px rgba(123, 58, 237, 0.3);
}
.btn-roll:hover{
  box-shadow: 0 6px 20px rgba(123, 58, 237, 0.4);
  transform: translateY(-2px);
}
.btn-roll:active{transform:translateY(0px)}
.btn-roll:disabled{opacity:.6}

footer{color:var(--muted); font-size:.875rem}

.header-section{
  text-align:center;
  margin-bottom:2rem;
}

.header-section h1{
  color: var(--accent-2);
  font-weight:700;
}

#slot{
  height:auto;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0.2px;
  color: var(--accent-2);
  font-weight:700;
}

.result-action{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border: none;
  padding: .5rem .9rem;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  transition: all .2s ease;
}

.result-action:hover{
  box-shadow: 0 4px 12px rgba(123, 58, 237, 0.3);
  transform: translateY(-2px);
}

.slot-anim{opacity:.95}
@keyframes slotSpin{from{opacity:.4}to{opacity:1}}

#history li{
  opacity:0.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:.25rem 0;
}

#history a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition: color .2s ease;
}

#history a:hover{
  color: var(--accent-2);
  text-decoration:underline;
}

.text-muted, .form-text, .small, .text-secondary {
  color: var(--muted) !important;
}

/* Result card */
.result-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-radius:14px;
  padding:1rem;
  background:linear-gradient(135deg, rgba(123, 58, 237, 0.05), rgba(91, 33, 182, 0.05));
  border:1px solid rgba(123, 58, 237, 0.15);
}

.result-domain{
  font-weight:700;
  color:var(--text);
  font-size:1rem;
}

/* External warning less aggressive */
.external-warning{
  background:rgba(251, 191, 36, 0.05);
  border:1px solid rgba(251, 191, 36, 0.2);
  color:#b45309;
  border-radius:14px;
}
.external-warning p{margin:0}
.external-warning .close-btn{
  background:transparent;
  border:0;
  color:inherit;
  font-size:1.1rem;
  padding:.15rem .35rem;
}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Responsive adjustments */
@media (max-width:1024px){
  .container{
    flex-direction:column;
    gap:1rem;
  }
  .sidebar-left, .sidebar-right {
    display:none;
  }
  .main-wrapper {
    width:100%;
  }
  .card{padding:1.5rem}
  .result-domain{font-size:.95rem}
}

@media (max-width:576px){
  .card{padding:1rem}
  .result-domain{font-size:.9rem}
  .btn-roll{
    padding:.75rem 1rem;
  }
}