body{

background:
radial-gradient(circle at center,#141a22,#020407);

font-family:Arial;
margin:0;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

height:100vh;

color:white;

}

/* PLC */

.plc{

width:95vw;
max-width:1100px;

background:linear-gradient(145deg,#3a414a,#161b20);

padding:25px;

border-radius:16px;

border:6px solid #000;

box-shadow:
0 80px 120px rgba(0,0,0,0.9),
inset 0 4px 8px rgba(255,255,255,0.08),
inset 0 -10px 18px rgba(0,0,0,0.95);

}

/* HEADER PANEL */

.headerPanel{

display:flex;
justify-content:space-between;
align-items:center;

background:linear-gradient(145deg,#444b54,#2a3037);

padding:18px 25px;

border-radius:10px;

margin-bottom:18px;

border:2px solid black;

box-shadow:
inset 0 4px 6px rgba(255,255,255,0.08),
inset 0 -6px 10px rgba(0,0,0,0.9),
0 6px 20px rgba(0,0,0,0.8);

}

.brand{

font-style:italic;
font-weight:bold;
font-size:42px;

color:#ffd54f;

letter-spacing:3px;

text-shadow:0 4px 10px black;

}

.titleBlock{
text-align:right;
}

.gameTitle{

font-size:30px;
font-weight:bold;
letter-spacing:3px;

}

.licenseMini{

font-size:11px;
color:#aaa;

margin-top:4px;

}

/* INPUTS */

.inputs{

display:grid;
grid-template-columns:repeat(8,1fr);
gap:14px;

}

.inputs button{

height:65px;

border-radius:50%;

background:linear-gradient(145deg,#ff3d3d,#8b0000);

border:3px solid black;

font-weight:bold;
cursor:pointer;
color:white;

box-shadow:
0 8px 0 #500,
0 12px 20px rgba(0,0,0,0.9);

}

.inputs button:active{

transform:translateY(4px);

box-shadow:0 3px 0 #500;

}

.inputs button.active{

background:linear-gradient(145deg,#fff176,#fdd835);

color:black;

box-shadow:0 0 25px #ffeb3b;

}

/* CPU */

.cpu{

background:linear-gradient(145deg,#3a3f46,#1d2127);

padding:18px;

border-radius:10px;

border:3px solid #000;

margin-top:18px;

}

/* LEDS */

.plc-leds{

display:flex;
justify-content:flex-end;
gap:20px;
margin-bottom:10px;

}

.led{

width:14px;
height:14px;

border-radius:50%;

background:#222;

border:2px solid black;

}

.run.on{
background:#00ff00;
box-shadow:0 0 15px #00ff00;
}

.error.on{
background:#ff2a2a;
box-shadow:0 0 15px red;
}

/* DISPLAY */

.display{

background:#000;
color:#00ff7b;

padding:16px;

border-radius:6px;

border:2px solid #00aa55;

font-family:monospace;

box-shadow:inset 0 0 25px rgba(0,255,100,0.15);

}

/* STATUS */

.status{

display:flex;
justify-content:space-between;

margin-bottom:6px;

}

/* RECORD */

#recordPanel{

font-size:13px;

margin-bottom:10px;

color:#ffeb3b;

}

/* EXPERT MODE */

#expertMode{

color:#ffd54f;

font-weight:bold;

margin-top:6px;

animation:expertBlink 1s infinite;

}

@keyframes expertBlink{

0%{opacity:1}
50%{opacity:.3}
100%{opacity:1}

}

/* BOTONES */

.controls{

display:flex;
justify-content:center;
gap:12px;
margin-top:10px;

}

button{

padding:8px 18px;

border:none;

border-radius:6px;

font-weight:bold;

cursor:pointer;

color:white;

}

.startBtn{background:#00c853;}
.retryBtn{background:#ff9800;}
.stopBtn{background:#c62828;}
.rankBtn{background:#1976d2;}

.ledButton{

animation:buttonGlow 2s infinite;

}

@keyframes buttonGlow{

0%{box-shadow:0 0 5px rgba(255,255,255,0.2);}
50%{box-shadow:0 0 18px rgba(255,255,255,0.7);}
100%{box-shadow:0 0 5px rgba(255,255,255,0.2);}

}

/* OUTPUTS */

.outputs{

display:grid;
grid-template-columns:repeat(8,1fr);
gap:12px;
margin-top:20px;

}

.relay,.valve{

height:60px;

border-radius:10px;

border:3px solid black;

display:flex;
align-items:center;
justify-content:center;

background:linear-gradient(145deg,#555,#2b2b2b);

box-shadow:0 6px 10px rgba(0,0,0,0.8);

}

.relay.on{

background:#00ff00;

box-shadow:0 0 20px #00ff00;

}

.valve.on{

background:#ff6f00;

box-shadow:0 0 20px orange;

}

/* RANKING ARCADE */

#rankingList{

display:none;

margin-top:10px;

background:black;

padding:12px;

border-radius:8px;

border:2px solid #00ff7b;

font-family:monospace;

animation:rankAppear .4s ease;

}

@keyframes rankAppear{

from{opacity:0;transform:scale(.9)}
to{opacity:1;transform:scale(1)}

}

#rankingList p{

margin:4px 0;
padding:6px;

background:#111;

border-left:4px solid #00ff7b;

display:flex;
justify-content:space-between;

}

#rankingList p:nth-child(1){color:gold;font-size:16px;}
#rankingList p:nth-child(2){color:silver;}
#rankingList p:nth-child(3){color:#cd7f32;}

/* NEW RECORD */

#newRecord{

position:absolute;

top:40%;
left:50%;

transform:translate(-50%,-50%);

background:#00ff7b;

color:black;

padding:20px 40px;

font-size:28px;

font-weight:bold;

border-radius:10px;

display:none;

box-shadow:0 0 40px #00ff7b;

animation:recordFlash .8s infinite alternate;

}

@keyframes recordFlash{

from{transform:translate(-50%,-50%) scale(1)}
to{transform:translate(-50%,-50%) scale(1.2)}

}

/* MOBILE */

@media (max-width:800px){

.inputs{

grid-template-columns:repeat(4,1fr);

}

.outputs{

grid-template-columns:repeat(4,1fr);

}

.brand{

font-size:32px;

}

.gameTitle{

font-size:22px;

}

}

/* BARRA DE TIEMPO */

#timeBarContainer{
width:100%;
height:10px;
background:#222;
margin-top:6px;
border-radius:5px;
overflow:hidden;
}

#timeBar{
height:100%;
width:100%;
background:#00e5ff;
transition:width 0.05s linear;
}