/* css/chaos.css */

#chaosLevel {
    background: rgba(200, 200, 200, 0.5);
    appearance: none;
    width: 50%; /* Full-width */
    height: 25px; /* Specified height */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    margin: 20px;
}

#chaosLevel:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

#chaosLevel::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #ff2a2a; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

body.chaos{
    background: radial-gradient(circle at center, #200000, #000000);
    color:#ff4d4d;
}

/* make everything feel hostile */
body.chaos .panel{
    background: rgba(20,0,0,0.6);
    border:1px solid rgba(255,0,0,0.3);
}

body.chaos .pill{
    background:#1a0000;
    border:1px solid #ff3333;
    color:#ff8080;
    box-shadow:0 0 10px rgba(255,0,0,0.3);
}

body.chaos #go{
    background:linear-gradient(90deg,#ff0000,#990000,#ff0000);
    box-shadow:0 0 20px rgba(255,0,0,0.5);
}

/* sparkles become evil */
body.chaos .sparkle{
    background:#ff2a2a !important;
}

/* optional: subtle flicker */
body.chaos{
    animation:chaosFlicker 0.12s infinite alternate;
}

@keyframes chaosFlicker{
    from{opacity:1;}
    to{opacity:0.97;}
}

body.chaos .banner{
    background:rgba(20,0,0,0.7);
    border-bottom:1px solid rgba(255,0,0,0.4);
}

body.chaos .banner h1 span{
    color:#ff4d4d;
    text-shadow:0 0 12px rgba(255,0,0,0.6);
}

body.chaos {
    --card-bg: rgba(30, 0, 0, 0.55);
    --card-border: rgba(255, 60, 60, 0.35);
    --text: #ffe6e6;
    --muted: #ff9a9a;
    --accent: #ff3b3b;
}

.result-card,
.pill,
.final-block,
label.opt {
    background: var(--card-bg, rgba(255,255,255,0.6));
    border-color: var(--card-border, rgba(0,0,0,0.08));
    color: var(--text, inherit);
}

body.chaos #copyBtn {
    background: linear-gradient(90deg, #ff3b3b, #ff7b7b);
    color: white;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);
}

body.chaos .stat{
    color: white;
}

body.chaos label.opt .dot {
    background: none;
    border-color: #ff3b3b;
}

body.chaos label.opt input[type="checkbox"]:checked + .dot {
    background: #940808;
    border-color: #ff3b3b;
}

body.shake {
    animation: shake 0.25s infinite;
}

@keyframes shake {
    0% { transform: translate(0,0); }
    25% { transform: translate(2px,-1px); }
    50% { transform: translate(-2px,1px); }
    75% { transform: translate(1px,2px); }
    100% { transform: translate(0,0); }
}

body.chaos .slot-window {
    filter: hue-rotate(30deg) saturate(1.4);
    transform: skewX(-2deg);
}

body.chaos .slot-window {
    background: var(--card-bg, rgba(255,255,255,0.6));
    border-color: var(--card-border, rgba(0,0,0,0.08));
    color: var(--text, inherit);
}