/* Phones */

#art_table {position: relative;	width: 100%; transform: translateY(0%);}
#art_window {width: 100%; position: relative; z-index: 0;}

.art_R1 {position: relative;}
.art_R2 {position: relative; opacity: .75;}

#fan_psu { position: absolute; width: 7.75%; top: 47%; left: 22.5%; }
#fan_vga { position: absolute; width: 8%; top: 40%; left: 47%; }
#fan_vga2 { position: absolute; width: 8%; top: 46.8%; left: 47%; }

#cat_watching { position: absolute; width: 25%; top: 65.6%; left: 42%; }
#gato_game { position: absolute; width: 18%; top: 61.7%; left: 66.6%; }

.fan_spining { animation: spin 3s linear infinite; }
.fan_spining_fast { animation: spin 2s linear infinite; }
.fan_spining_fastr { animation: spinr 2s linear infinite; }
.fan_spining_slow { animation: spin 10s linear infinite; }

@keyframes spin { 100% { transform: rotate(-360deg); }}
@keyframes spinr { 100% { transform: rotate(360deg); }}

/* iPAD */
@media only screen and (min-width: 840px){
	#fan_psu{ top:47.0%; left:22.4%; }
	#fan_vga{ top:40.1%; left:47%; }
	#fan_vga2{ top:47%; left:47%; }
	#cat_watching{ top:65.6%; left:42%; }
	#gato_game{ top:61.8%; left:66.6%; }
}

/* Desktops */
@media only screen and (min-width:1025px){
	.art_R1{ transform:translateY(-0%); }
}
/* Playground Container & Switcher */
.playground-container {
position: relative;
opacity: 0.75;
grid-area: 2/1/3/2;
}

.playground-item {
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.playground-item.active {
display: block;
opacity: 1;
}

/* Playground Dots (Slider Navigation) */
.playground-dots {
position: absolute;
left: 8px;
top: 10%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 10;
}

.playground-dot {
width: 24px;
height: 24px;
border-radius: var(--radius-md);
border: 1px var(--color-foreground-subtle) solid;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}

.playground-dot:hover {
background: var(--color-hover-bg);
  border: 1px solid var(--color-foreground)
}

.playground-dot.active {
background: var(--color-link);
border-color: rgba(255, 255, 255, 1);
}

/* Playground 2 - Video Container */
.playground-video-container {
display: flex;
justify-content: center;
align-items: center;
width: 36.3%;
position: absolute;
top: 59.6%;
left: 19%;
z-index: 10;
}

.playground-video {
width: 100%;
height: auto;
border: none;
outline: none;
display: block;
opacity: 0.75;
}

#pg2-psu-fan{ position:absolute; width:5.3%; top:38.695%; left:26.1%; }
#pg2-cpu-fan{ position:absolute; width:8%; top:45.4%; left:22.74%; }
#pg2-vga-fan-1{ position:absolute; width:5%; top:38.75%; left:35.6%; }
#pg2-vga-fan-2{ position:absolute; width:5%; top:43.9%; left:35.6%; }
#pg2-vga-fan-3{ position:absolute; width:5%; top:49.1%; left:35.6%; }
#cat-pg2{ position:absolute; width:25%; top:64.2%; left:60%; z-index:20; transform: scaleX(-1); transform-origin:center; }

/* Chat Window Animation */
.chat-window {
	position: absolute;
	width: 11%;
	height: 11%;
	bottom: 33%;
	left: 67.7%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
	border-radius: 4px;
}

.chat-scroll {
	position: relative;
	width: 85px;
	margin: 0 auto;
	animation: scrollChat 12s linear infinite;
}

.chat-lines {
	display: block;
	width: 85px;
	height: 117px;
	margin: 0;
	padding: 0;
}

@keyframes scrollChat {
	0% { transform: translateY(0);	}
	100% {		transform: translateY(-117px);	}
}

#pg2-base{ position:relative; width:100%; top:0; left:0; z-index:0;}

/* Responsive adjustments */
/* The site uses a 2x2 grid starting at 1025px — keep playground grid placement
	 synchronized with the main layout breakpoint to avoid mis-placement between
	 840px and 1024px where the parent layout is still single-column. */
@media only screen and (min-width: 1025px){
	.playground-container { grid-area: 1/2/2/3; }
}