/* Time Bomb Custom Styles */

:root {
    --bomb-size: 180px;
}

body {
    background-color: #0A0A0A;
}

/* Scrollbar Style */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Bomb Container & Animation */
.bomb-container {
    perspective: 1000px;
    padding-top: 100px;
}

.bomb {
    width: var(--bomb-size);
    height: var(--bomb-size);
    background: radial-gradient(circle at 30% 30%, #444, #111 80%);
    border-radius: 50%;
    position: relative;
    box-shadow: 
        inset 5px 5px 15px rgba(255,255,255,0.1),
        0 20px 40px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.bomb::before {
    content: '';
    position: absolute;
    top: -12px;
    width: 50px;
    height: 30px;
    background: #222;
    border-radius: 6px;
    z-index: 5;
}

/* 🧨 Straight Fuse (곧은 심지) */
.bomb-fuse {
    position: absolute;
    top: -70px;
    left: 55%;
    width: 8px; /* 굵직한 심지 */
    height: 65px;
    background: linear-gradient(to right, #3E2723, #5D4037, #3E2723);
    border-radius: 4px;
    z-index: -1;
    transform: rotate(20deg); /* 폭탄에서 비스듬히 뻗어나오는 각도 */
    transform-origin: bottom center;
}

/* ⚡ Realistic Crackling Spark (심지 끝에 100% 고정) */
.spark {
    position: absolute;
    top: 0; /* 직선 심지의 가장 윗부분 */
    left: 50%;
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    border-radius: 50%;
    transform: translate(-50%, -50%); /* 정확히 중앙 끝단에 위치 */
    box-shadow: 
        0 0 15px #FFF,
        0 0 30px #FFEB3B,
        0 0 45px #FF9800;
    animation: crackle 0.05s infinite alternate;
}

/* 흩날리는 불똥 입자 */
.spark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: #FFEB3B;
    border-radius: 50%;
    box-shadow: 
        20px -15px #FF5722, 
        -15px -20px #FFC107, 
        10px -30px #FFFFFF,
        -25px 15px #FF9800;
    animation: scatter-embers 0.2s infinite steps(3);
}

@keyframes crackle {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; filter: brightness(1.8); }
}

@keyframes scatter-embers {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(180deg); }
}

.bomb-glare {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 25%;
    height: 20%;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    filter: blur(5px);
    transform: rotate(-45deg);
}

.timer-panel {
    background: #000;
    padding: 8px 15px;
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(255, 61, 0, 0.2);
    z-index: 2;
}

/* Wires Styles - 18px */
.wires-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 450px;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: #333 #0A0A0A;
}

.wire-row {
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    padding: 0 5px;
}

.wire-row:hover:not(.cut) {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.connector {
    width: 16px;
    height: 30px;
    background: linear-gradient(to right, #222, #444, #222);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 2;
}

.wire-cable {
    flex-grow: 1;
    height: 18px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.5);
    position: relative;
    border-radius: 9px;
    margin: 0 -2px;
    z-index: 1;
}

.wire-row[data-color="red"] .wire-cable { background: linear-gradient(to bottom, #FF5252, #FF1744, #880E4F); }
.wire-row[data-color="blue"] .wire-cable { background: linear-gradient(to bottom, #448AFF, #2979FF, #0D47A1); }
.wire-row[data-color="green"] .wire-cable { background: linear-gradient(to bottom, #69F0AE, #00E676, #1B5E20); }
.wire-row[data-color="yellow"] .wire-cable { background: linear-gradient(to bottom, #FFFF8D, #FFD600, #F57F17); }
.wire-row[data-color="purple"] .wire-cable { background: linear-gradient(to bottom, #E040FB, #AA00FF, #4A148C); }
.wire-row[data-color="orange"] .wire-cable { background: linear-gradient(to bottom, #FFAB40, #FF9100, #E65100); }
.wire-row[data-color="cyan"] .wire-cable { background: linear-gradient(to bottom, #18FFFF, #00E5FF, #006064); }
.wire-row[data-color="white"] .wire-cable { background: linear-gradient(to bottom, #FFFFFF, #E0E0E0, #9E9E9E); }

.wire-row.cut .wire-cable {
    background: #111 !important;
    box-shadow: none;
    border: 1px solid #222;
}

.wire-row.cut .wire-cable::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -15px;
    bottom: -15px;
    width: 12px;
    background: #0A0A0A;
    transform: translateX(-50%);
}

/* Explosive State */
.exploded {
    transform: scale(2.5);
    background: radial-gradient(circle at center, #FF3D00, #000) !important;
    box-shadow: 0 0 200px #FF3D00;
    opacity: 0;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-10px, -10px); }
    20%, 40%, 60%, 80% { transform: translate(10px, 10px); }
}

.screen-shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Animations */
.animate-fadeIn {
    animation: fadeIn 0.5s ease-out forwards;
}

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

.animate-slideUp {
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

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