/* ---------- PAGE ---------- */


body {

margin:0;

height:100vh;

background:#111;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

font-family:Arial, sans-serif;

}



/* ---------- TV OUTER FRAME ---------- */


.tv-frame {

width:920px;

height:650px;

padding:10px;

background:#252525;

border-radius:25px;

box-shadow:

0 0 40px rgba(255,255,255,0.15),

inset 0 0 20px black;

}



/* ---------- SCREEN ---------- */


.tv-screen {

width:100%;

height:100%;

overflow:hidden;

border-radius:18px;

position:relative;

animation:flicker 0.15s infinite;

}



/* ---------- BACKGROUND IMAGE ---------- */


.clubhouse {

width:100%;

height:100%;

position:relative;

overflow:hidden;

background-image:url("images/clubhousemain.png");

background-repeat:no-repeat;

background-position:center;

background-size:contain;

animation:vhs 8s infinite;

}



/* ---------- CRT DARK EDGES ---------- */


.clubhouse::before {

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
rgba(255,255,255,.18),
transparent 25%
),

radial-gradient(
ellipse at center,
transparent 50%,
rgba(0,0,0,0.35)
);

pointer-events:none;

z-index:5;

}



/* ---------- SCANLINES ---------- */


.clubhouse::after {

content:"";

position:absolute;

inset:0;

background:

repeating-linear-gradient(

0deg,

rgba(255,255,255,0.04),

rgba(255,255,255,0.04) 1px,

transparent 1px,

transparent 4px

);

pointer-events:none;

z-index:6;

}



/* ---------- POWER LIGHT ---------- */


.power-light {

position:absolute;

width:8px;

height:8px;

background:#ff4b4b;

border-radius:50%;

right:35px;

bottom:18px;

z-index:20;

box-shadow:

0 0 8px #ff4b4b;

animation:blink 3s infinite;

}



@keyframes blink {

0%,90%,100% {

opacity:1;

}

95% {

opacity:.3;

}

}



/* ---------- STATIC ---------- */


.static {

position:absolute;

inset:0;

background:

repeating-linear-gradient(

0deg,

rgba(255,255,255,.05),

rgba(255,255,255,.05) 1px,

transparent 1px,

transparent 3px

);

z-index:15;

animation:staticMove .8s steps(2) forwards;

pointer-events:none;

}



@keyframes staticMove {

0% {

opacity:.8;

}

100% {

opacity:0;

}

}



/* ---------- LOGO ---------- */


.tv-logo {

position:absolute;

top:580px;

left:20px;

color:yellow;

font-family:"Courier New", monospace;

font-size:18px;

line-height:18px;

letter-spacing:2px;

text-shadow:

2px 2px 0 #000000,

0 0 8px white;

z-index:10;

}



/* ---------- VHS EFFECT ---------- */


@keyframes vhs {

0%,100% {

filter:none;

}

50% {

filter:

contrast(1.05)

saturate(1.1);

}

}



@keyframes flicker {

0% {

opacity:.99;

}

50% {

opacity:1;

}

100% {

opacity:.98;

}

}



/* ---------- MOVING TV GLITCH ---------- */


.tv-screen::after {

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

transparent 45%,

rgba(255,255,255,.08) 50%,

transparent 55%

);

animation:scanMove 5s linear infinite;

pointer-events:none;

z-index:20;

}



@keyframes scanMove {

from {

transform:translateY(-100%);

}

to {

transform:translateY(100%);

}

}



/* ---------- TRANSPARENT SIGN BUTTONS ---------- */


.sign-button {

position:absolute;

display:block;

color:#000;

text-decoration:none;

font-family:"Courier New", monospace;

font-size:18px;

font-weight:bold;

text-align:center;

z-index:24;

background: transparent;

height:45px;

}



/* ---------- SIGN POSITIONS ---------- */


.enter{

top:9%;

left:1.9%;

width:130px;

}



.tv {

top:18.4%;

left:1%;

width:150px;

}



.arcade {

top:27.6%;

left:1.3%;

width:140px;

}



.garden {

top:36.9%;

left:2.9%;

width:120px;

}



.zoo {

top:46.5%;

left:0.9%;

width:160px;

}



.aquarium {

top:55.8%;

left:2.2%;

width:130px;

}



.cafe {

top:65%;

left:2.5%;

width:123px;

}

/* ---------- BIRTHDAY BUTTON ---------- */

.birthday-link {

position:absolute;

bottom:140px;

left:31%;

transform:translateX(-50%);

z-index:35;

}



.birthday-button {

width:180px;

display:block;

transition:0.3s;

}



.birthday-button:hover {

transform:scale(1.08) rotate(-3deg);

}

.birthday-button {

width:180px;

display:block;

animation:bounce 2s ease-in-out infinite;

transition:0.3s;

}

@keyframes bounce {

0%,100% {
transform:translateY(0);
}

50% {
transform:translateY(-8px);
}

}

/* ---------- DECORATIVE IMAGE ---------- */

.corner-image {

position: absolute;

left: 24px;

bottom: 105px;

width: 56px; /* Change to make it bigger or smaller */

height: auto;

z-index: 25;

pointer-events: none;

}

/* ---------- BUTTON BOARD IMAGE ---------- */

.button-board{

position:absolute;

left:-190px; /* Move left/right */

bottom:102px; /* Move up/down */

width:552px; /* Adjust size */

height:auto;

z-index:24;

pointer-events:none;

}

/* ---------- RIGHT BUTTON BOARD ---------- */

.right-button-board {

position: absolute;

right: -51px; /* Distance from the right edge */

bottom: 110px; /* Distance from the bottom */

width: 280px; /* Adjust to fit your image */

height: auto;

z-index: 24;

pointer-events: none;

}

/* ---------- DAY / NIGHT SWITCH ---------- */

.day-night-switch{

position:absolute;

bottom:36px;

left:50%;

transform:translateX(-50%);

z-index:40;

display:flex;

align-items:center;

justify-content:center;

gap:19px;

white-space:nowrap;

}

.day-night-switch a{

display:flex;

align-items:center;

justify-content:center;

width:28px;

height:28px;

font-size:30px;

text-decoration:none;

line-height:1;

}

.day-night-switch a:hover{

transform:scale(1.2);

display:inline-block;

cursor:pointer;

}