*{box-sizing:border-box;}
html,body{margin:0;padding:0;width:100vw;height:100vh;background:#000;overflow:hidden;}
.container{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;}
.grid{
 flex:1;display:grid;
 grid-template-columns:1fr 1fr;
 grid-template-rows:1fr 1fr;
 gap:16px;padding:16px;
}
.tile{
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 border-radius:8px;
}
.tile.a{background-image:url('assets/quad-A.png');}
.tile.b{background-image:url('assets/quad-B.png');}
.tile.c{background-image:url('assets/quad-C.png');}
.tile.d{background-image:url('assets/quad-D.png');}

.center-btn{
 position:absolute;
 top:50%;left:50%;
 width:150px;height:150px;
 transform:translate(-50%,-50%);
 border-radius:50%;
 background:#47C2C9;
 box-shadow:0 0 30px rgba(0,0,0,0.6),0 0 0 3px rgba(0,0,0,0.85);
 overflow:hidden;
 background-image:url('assets/logo.png');
 background-size:80%;
 background-repeat:no-repeat;
 background-position:center;
}

.center-btn::before{
 content:'';
 position:absolute;
 top:-50%;left:-150%;
 width:200%;height:200%;
 background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 40%, rgba(255,255,255,0) 80%);
 animation:shine-sweep 2.4s linear infinite;
}

@keyframes shine-sweep{
 0%{transform:translateX(-60%) translateY(-20%) rotate(25deg);}
 50%{transform:translateX(20%) translateY(10%) rotate(25deg);}
 100%{transform:translateX(60%) translateY(40%) rotate(25deg);}
}