*{
box-sizing:border-box;
}


body{

margin:0;

padding:20px;

font-family:Arial,sans-serif;

background:#f1f1f1;

color:#333;

}





/* Publish Banner */


.publish-banner {

    width:100%;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    background:#f5f5f5;

    border:1px solid #d5d5d5;

    border-radius:10px;

}



.publish-icon {

    font-size:26px;

    margin-right:12px;

}



.publish-text {

    display:flex;

    align-items:center;

    gap:10px;

    flex:1;

}



.publish-text strong {

    color:#333;

    font-size:16px;

    text-transform:uppercase;

}



.publish-text span {

    color:#777;

    font-size:13px;

}



.publish-actions {

    display:flex;

    gap:8px;

}



.publish-button {

    background:#555;

    color:white;

    padding:7px 18px;

    border-radius:18px;

    font-size:13px;

    font-weight:bold;

    text-decoration:none;

}



.publish-button:hover {

    background:#333;

}



.publisher-button {

    background:#777;

}






/* Content */


.publisher-content{

max-width:1200px;

margin:30px auto;

background:#fff;

border:1px solid #cfcfcf;

border-radius:12px;

padding:30px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

}



.publisher-content h1{

margin-top:0;

}






/* Catalog */


.catalog{

max-width:1200px;

margin:30px auto;

}



.catalog h2{

margin-bottom:20px;

}



.game-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:20px;

}




.game-card{

background:#fff;

border:1px solid #cfcfcf;

border-radius:12px;

overflow:hidden;

box-shadow:0 4px 15px rgba(0,0,0,.08);

}



.game-card img{

width:100%;

height:180px;

object-fit:cover;

}



.game-info{

padding:20px;

}



.game-info h3{

margin-top:0;

}



.game-info p{

color:#666;

line-height:1.5;

}



.game-info label{

display:block;

font-size:13px;

font-weight:bold;

margin-top:15px;

}



.game-info input{

width:100%;

padding:10px;

background:#f5f5f5;

border:1px solid #bbb;

border-radius:8px;

color:#555;

}



.preview-button{

display:inline-block;

margin-top:15px;

background:#555;

color:white;

padding:8px 20px;

border-radius:18px;

text-decoration:none;

font-size:13px;

font-weight:bold;

}






/* Footer */


.site-footer{

width:100%;

margin-top:60px;

padding:25px 0;

background:#f1f1f1;

border-top:1px solid #d5d5d5;

}



.footer-container{

background:#fff;

border:1px solid #cfcfcf;

border-radius:12px;

padding:22px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

}



.footer-links{

display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;

}



.footer-links a{

color:#555;

text-decoration:none;

padding:8px 14px;

border-radius:8px;

}



.footer-links a:hover{

background:#444;

color:white;

}



.footer-copy{

text-align:center;

margin-top:18px;

padding-top:15px;

border-top:1px solid #ddd;

font-size:13px;

color:#888;

}






@media(max-width:600px){


body{

padding:10px;

}



.publish-banner{

height:auto;

padding:10px;

}



.publish-text span{

display:none;

}



.publish-text strong{

font-size:13px;

}



.publish-button{

padding:6px 12px;

font-size:12px;

}



.publisher-content{

padding:20px;

}



}