/* --- Sabotiq Dungeon UI v5.0 - FX & ANIMATIONS --- */

#sabotiq-dungeon-ui {
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    color: white; overflow: hidden;
    background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
    margin: 0 !important; padding: 0 !important;
    width: 100% !important; height: 100% !important;
    display: flex !important; flex-direction: column !important;
    box-sizing: border-box; position: relative;
    transition: filter 0.5s, transform 0.5s; /* Smooth transition for effects */
}

/* --- BOSS EFFECT CLASSES --- */

/* Tier 1 */
.fx-elvis { animation: elvisRock 1s infinite ease-in-out; }
@keyframes elvisRock { 0% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } }

.fx-chaplin { filter: grayscale(100%) contrast(150%); }
.fx-chaplin::after { content: ''; position: absolute; inset: 0; background: url('https://www.transparenttextures.com/patterns/aged-paper.png'); opacity: 0.3; pointer-events: none; z-index: 50; }

.fx-houdini { filter: blur(4px); }
.fx-earhart { animation: turbulence 0.2s infinite; }
@keyframes turbulence { 0% { transform: translate(0,0); } 25% { transform: translate(5px, -5px); } 50% { transform: translate(-5px, 5px); } 75% { transform: translate(5px, 5px); } }

.fx-polo { filter: sepia(0.8) brightness(0.9); }
.fx-monroe { animation: cameraFlash 1s infinite; }
@keyframes cameraFlash { 0%, 90% { background-color: transparent; } 95% { background-color: white; } 100% { background-color: transparent; } }

.fx-disney { filter: saturate(300%) contrast(120%); }
.fx-kahlo { animation: warp 3s infinite linear; }
@keyframes warp { 0% { border-radius: 0; transform: skew(0); } 50% { border-radius: 50px; transform: skew(5deg); } 100% { border-radius: 0; transform: skew(0); } }

/* Tier 2 */
.fx-mozart { animation: heavyShake 0.5s infinite; }
@keyframes heavyShake { 0% { transform: translate(0,0); } 10% { transform: translate(-10px, -10px); } 30% { transform: translate(10px, 10px); } 50% { transform: translate(-10px, 10px); } 70% { transform: translate(10px, -10px); } }

.fx-davinci { transform: scaleX(-1); } /* Tükör */
.fx-newton .dungeon-btn { position: relative; top: 100px; transition: top 1s; } /* Gombok leesnek (JS segít) */
.fx-hawking { animation: swirl 5s infinite linear; }
@keyframes swirl { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.5); } 100% { transform: rotate(360deg) scale(1); } }

.fx-cleopatra { box-shadow: inset 0 0 100px hotpink; }
.fx-cleopatra::after { content: '♥'; position: absolute; top: 50%; left: 50%; font-size: 100px; color: rgba(255,105,180,0.5); transform: translate(-50%,-50%); animation: floatHearts 2s infinite; }

.fx-edison { filter: brightness(0.1); cursor: crosshair; } /* Sötétség */
.fx-columbus { animation: seasick 3s infinite ease-in-out; }
@keyframes seasick { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 75% { transform: rotate(-10deg); } }

/* Tier 3 */
.fx-einstein { filter: invert(1); animation: slowMo 5s infinite; } /* Invert + érzet */
.fx-tesla { animation: strobe 0.1s infinite; }
@keyframes strobe { 0% { filter: brightness(1); } 50% { filter: brightness(3); } 100% { filter: brightness(0); } }

.fx-curie::before { content: ''; position: absolute; inset: 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII='); opacity: 0.5; z-index: 99; pointer-events: none; animation: noiseAnim 0.2s infinite; }

/* --- CURSE EFFECTS --- */
.curse-dim { filter: brightness(0.4); }
.curse-tiny-text .dungeon-btn { font-size: 8px !important; }
.curse-noise::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.1); pointer-events: none; z-index: 90; background-image: repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), repeating-linear-gradient(45deg, #000 25%, #222 25%, #222 75%, #000 75%, #000); background-size: 4px 4px; }
.curse-shake { animation: earthquake 0.5s infinite; }
@keyframes earthquake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } }

.curse-fly-element {
    position: absolute; width: 20px; height: 20px; background: black; border-radius: 50%; z-index: 9999;
    pointer-events: none; animation: flyMove 4s infinite linear;
}
@keyframes flyMove { 0% { top: 10%; left: 10%; } 25% { top: 50%; left: 80%; } 50% { top: 80%; left: 20%; } 75% { top: 20%; left: 60%; } 100% { top: 10%; left: 10%; } }

.curse-uncertainty .hp-bar-fill, .curse-uncertainty .boss-hp-text { display: none !important; }

/* ALAP LAYOUT (v31 alapján) */
.timer-border { position: absolute; background: #2ecc71; z-index: 9999; transition: all 0.1s linear; box-shadow: 0 0 15px currentColor; pointer-events: none; }
.timer-border-top, .timer-border-bottom { height: 8px; width: 100%; left: 50%; transform: translateX(-50%); }
.timer-border-top { top: 0; } .timer-border-bottom { bottom: 0; }
.timer-border-left, .timer-border-right { width: 8px; height: 100%; top: 50%; transform: translateY(-50%); }
.timer-border-left { left: 0; } .timer-border-right { right: 0; }

.dungeon-battle-wrapper { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 20px; gap: 0; }
.battle-top-area { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 20px; min-height: 160px; }
.battle-bottom-area { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; padding-top: 10px; }
.boss-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.boss-card-visual { width: 130px; padding: 10px; background: rgba(40,40,40,0.95); border: 2px solid #d4af37; border-radius: 12px; position: relative; transition: transform 0.1s; }
.hp-bar-frame { width: 100%; height: 8px; background: #222; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.hp-bar-fill { height: 100%; background: linear-gradient(90deg, #ff4d4d, #c0392b); width: 100%; transition: width 0.3s; }
.battle-question-text { color: white; font-weight: bold; text-align: center; margin-bottom: 20px; font-size: 17px; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 10px; min-height: 50px; display:flex; align-items:center; justify-content:center; }
.battle-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.dungeon-btn.d-opt { background: #333; border: 1px solid #555; padding: 20px 5px; font-size: 15px; color: white; font-weight: bold; border-radius: 10px; box-shadow: 0 5px 0 #111; cursor: pointer; }
.dungeon-btn.d-opt:active { transform: translateY(5px); box-shadow: none; }
.floating-dmg { position: absolute; color: #ff4d4d; font-size: 40px; font-weight: 900; animation: floatUp 0.8s forwards; z-index: 9999; width: 100%; text-align: center; top: 10%; pointer-events: none; }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-80px); opacity: 0; } }