/* =========================
   ANALYZER UI - ENHANCED VERSION
========================= */

.equity-bar{
  display:flex;
  height:32px;
  border-radius:16px;
  overflow:hidden;
  margin:16px 0;
  box-shadow:
    0 2px 6px rgba(0,0,0,.4),
    inset 0 1px 2px rgba(0,0,0,0.2);
  position:relative;
}

/* Equity bar colors with gradients */
.bar-win{ 
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  animation:fillBar 0.8s ease-out;
}
.bar-tie{ 
  background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  animation:fillBar 0.8s ease-out 0.1s backwards;
}
.bar-lose{ 
  background:linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  animation:fillBar 0.8s ease-out 0.2s backwards;
}

@keyframes fillBar{
  from{ 
    width:0;
    opacity:0.5;
  }
  to{
    opacity:1;
  }
}

/* Enhanced equity display */
.big-equity{
  font-size:3rem;
  font-weight:900;
  text-align:center;
  margin:16px 0;
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 4px 12px rgba(16,185,129,0.3);
  letter-spacing:-1px;
  position:relative;
}

/* Add glow effect */
.big-equity::after{
  content:attr(data-value);
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:-1;
  filter:blur(20px);
  opacity:0.3;
}

/* Horizontal Action Buttons */
.action-row{
  display:flex;
  gap:8px;
  margin-top:12px;
  justify-content:space-between;
}

.action-btn{
  flex:1;
  padding:12px 10px;
  font-size:.9rem;
  border-radius:8px;
  font-weight:600;
  width:auto;
  margin-top:0;
  position:relative;
  overflow:hidden;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  min-height:44px;
}

.action-btn.primary{ 
  background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color:#fff;
  box-shadow:0 4px 12px rgba(59,130,246,0.25);
}

.action-btn.secondary{ 
  background:linear-gradient(135deg, #475569 0%, #334155 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.action-btn.primary:hover{
  background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow:0 6px 20px rgba(59,130,246,0.4);
}

.action-btn.secondary:hover{
  background:linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.action-btn:hover{ 
  transform:translateY(-2px); 
}

.action-btn:active{
  transform:translateY(0);
}

/* Ripple effect on button click */
.action-btn::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
  transform:translate(-50%,-50%);
  transition:width 0.6s, height 0.6s;
}

.action-btn:active::after{
  width:300px;
  height:300px;
}

/* Nuts badge */
.nuts-badge{
  display:inline-block;
  padding:6px 12px;
  margin-left:10px;
  border-radius:8px;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.nuts-badge.locked{ 
  background:linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color:#000;
  animation:nutsGlow 2s ease-in-out infinite;
}

.nuts-badge.current{ 
  background:linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  color:#000;
}

@keyframes nutsGlow{
  0%, 100%{ 
    box-shadow:0 0 20px rgba(34,197,94,0.6);
  }
  50%{ 
    box-shadow:0 0 40px rgba(34,197,94,0.9);
  }
}

/* Favorable highlight */
.favorable{
  color:#10b981;
  font-weight:700;
  text-shadow:0 0 10px rgba(16,185,129,0.3);
}

/* Instructions visibility */
#instructions{
  font-size:.92rem;
  transition:opacity .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease;
}

#instructions.hidden{
  opacity:0;
  max-height:0;
  overflow:hidden;
  padding:0;
  margin:0;
  border:none;
}

/* Tooltip badge */
.tooltip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  border-radius:50%;
  border:1px solid #475569;
  font-size:11px;
  font-weight:700;
  color:#94a3b8;
  cursor:help;
  position:relative;
  vertical-align:middle;
  transition:all .2s ease;
}

.tooltip:hover{
  border-color:#3b82f6;
  color:#3b82f6;
  background:rgba(59,130,246,0.1);
  transform:scale(1.1);
}

.tooltip:hover::after{
  content:"s = suited - o = offsuit - 22 = pocket pair";
  position:absolute;
  bottom:140%;
  left:50%;
  transform:translateX(-50%);
  background:#0f172a;
  border:1px solid #334155;
  padding:8px 12px;
  border-radius:8px;
  font-size:.8rem;
  white-space:nowrap;
  color:#e5e7eb;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
  z-index:100;
}

/* Collapsible UI */
.collapsible-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-size:.95rem;
  color:#94a3b8;
  user-select:none;
  padding:4px 0;
  transition:color .2s ease;
}

.collapsible-header:hover{
  color:#cbd5e1;
}

.chevron{ 
  transition:transform .3s ease;
  font-size:1.2rem;
}

.collapsible-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease-out;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-top:none;
  border-radius:0 0 12px 12px;
  padding:0 22px;
}

.collapsible.open .collapsible-content{
  max-height:340px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:20px 22px;
}

.collapsible.open .chevron{ 
  transform:rotate(180deg); 
}

/* Scrollbar styling */
.collapsible-content::-webkit-scrollbar{ width:8px; }
.collapsible-content::-webkit-scrollbar-track{
  background:#0f172a;
  border-radius:4px;
}
.collapsible-content::-webkit-scrollbar-thumb{
  background:#475569;
  border-radius:4px;
}
.collapsible-content::-webkit-scrollbar-thumb:hover{
  background:#64748b;
}

/* Output section improvements */
.output{
  padding:20px;
  margin-top:20px;
}

.output > div{
  margin-bottom:12px;
  animation:fadeInUp 0.4s ease-out backwards;
}

.output > div:nth-child(1){ animation-delay:0.05s; }
.output > div:nth-child(2){ animation-delay:0.1s; }
.output > div:nth-child(3){ animation-delay:0.15s; }
.output > div:nth-child(4){ animation-delay:0.2s; }

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Error state styling */
.error-message{
  background:linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  border:1px solid #dc2626;
  border-radius:12px;
  padding:20px;
  text-align:center;
  color:#fecaca;
  animation:shake 0.5s ease-in-out;
}

.error-message .error-icon{
  font-size:3rem;
  margin-bottom:10px;
  display:block;
}