/* URANUX'S RETROGAMES UNIVERSE
   CSS costruito sul mockup fornito come riferimento visivo.
*/

*{box-sizing:border-box}

html,body{margin:0;padding:0}
body{
    background:#fff;
    color:#064477;
    font-family:"Roboto Condensed",Arial,Helvetica,sans-serif;
    font-size:12px;
}
a{color:#00589c;text-decoration:none}
a:hover{text-decoration:underline}

/* =========================
   HEADER
   ========================= */

.site-header{
    width:100%;
    background:#e8f1f6;
}

.header-inner{
    width:100%;
    height:56px;
    position:relative;
    background:linear-gradient(to bottom,#f2f7fa 0%,#dce8ef 100%);
    border-bottom:1px solid #c9d6de;
}

.logo{
    position:absolute;
    left:50%;
    top:4px;
    transform:translateX(-50%);
    text-align:center;
    color:#084a7c;
    font-weight:900;
    line-height:.9;
    white-space:nowrap;
}
.logo-main{
    font-size:28px;
    letter-spacing:-1px;
}
.logo-sub{
    display:block;
    font-size:17px;
    margin-top:4px;
    letter-spacing:-.3px;
}

.search-box{
    position:absolute;
    right:24px;
    top:10px;
    display:flex;
}
.search-box input{
    width:192px;
    height:24px;
    border:1px solid #afc1ce;
    border-radius:4px 0 0 4px;
    padding:0 8px;
    color:#526b7c;
    font:11px Arial,sans-serif;
}
.search-box button{
    height:24px;
    padding:0 12px;
    border:0;
    border-radius:0 4px 4px 0;
    background:#114d7b;
    color:#fff;
    font:bold 11px Arial,sans-serif;
}
.motto{
    position:absolute;
    right:25px;
    bottom:5px;
    color:#064477;
    font:bold 10px Arial,sans-serif;
}

/* MENU ORIZZONTALE */

.top-nav{
    height:29px;
    background:#084b78;
}
.top-nav-inner{
    width:1200px;
    height:29px;
    margin:0 auto;
    display:flex;
    align-items:stretch;
}
.top-nav a{
    display:block;
    padding:9px 18px 0;
    color:#fff;
    font:bold 10px Arial,sans-serif;
    white-space:nowrap;
}

/* =========================
   LAYOUT
   ========================= */

.page-layout{
    width:1200px;
    margin:11px auto 30px;
    display:grid;
    grid-template-columns:170px minmax(0,1fr) 190px;
    gap:15px;
    align-items:start;
}

.left-column,
.main-column,
.right-column{min-width:0}

/* =========================
   MENU SINISTRO
   ========================= */

.menu-box{
    margin-bottom:12px;
    overflow:hidden;
    border:1px solid #d2dfe7;
    border-radius:3px;
    background:#fff;
}

.menu-title{
    padding:7px 9px 6px;
    background:#10547f;
    color:#fff;
    font:bold 11px Arial,sans-serif;
    line-height:1;
}

.menu-item{
    display:block;
    min-height:24px;
    padding:6px 9px;
    border-bottom:1px solid #dbe4e9;
    background:linear-gradient(to right,#fff,#f6f8fa);
    color:#064477;
    font:11px "Roboto Condensed",Arial,sans-serif;
    white-space:nowrap;
}

.menu-item:last-child{border-bottom:0}

.menu-item.active{
    background:#cce7f8;
    font-weight:bold;
}

.menu-item:hover{
    background:#e7f3fa;
    text-decoration:none;
}

/* =========================
   BREADCRUMB
   ========================= */

.breadcrumb{
    margin:0 0 4px;
    color:#246494;
    font:9px Arial,sans-serif;
}

/* =========================
   TESTATA DEL GIOCO
   ========================= */

.game-heading{
    min-height:90px;
    margin-bottom:7px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 207px;
    border:1px solid #bfd1de;
    border-radius:3px;
    background:linear-gradient(110deg,#edf5f9,#dce8f0);
}

.heading-main{
    padding:8px 9px;
}

.heading-main h1{
    margin:0 0 5px;
    color:#064477;
    font-family:"Roboto Condensed",Arial,sans-serif;
    font-size:31px;
    font-weight:900;
    line-height:.95;
    letter-spacing:-1px;
    text-transform:uppercase;
}

.subtitle{
    color:#df0000;
    font:bold 13px "Roboto Condensed",Arial,sans-serif;
    text-transform:uppercase;
}

.heading-data{
    padding:8px 10px;
    display:grid;
    grid-template-columns:1fr 1.35fr;
    align-content:center;
    row-gap:2px;
    color:#073f70;
    font:10px Arial,sans-serif;
}

/* =========================
   SEZIONI
   ========================= */

.content-section{
    margin-bottom:7px;
    overflow:hidden;
    border:1px solid #cbd9e2;
    border-radius:3px;
    background:#fff;
}

.section-title{
    padding:5px 10px 4px;
    background:#116094;
    color:#fff;
    font:bold 15px "Roboto Condensed",Arial,sans-serif;
    line-height:1;
    text-transform:uppercase;
}

.section-body{
    padding:7px 11px;
    color:#073f70;
    font:11px "Roboto Condensed",Arial,sans-serif;
    line-height:1.22;
}

.section-body p{
    margin:0 0 6px;
}

.section-body p:last-child{margin-bottom:0}

.with-image{
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    gap:9px;
}

.portrait-placeholder{
    width:90px;
    height:86px;
    margin:auto;
    display:flex;
    align-items:end;
    justify-content:center;
    padding-bottom:4px;
    background:linear-gradient(135deg,#b8aaa0,#76675d);
    color:#fff;
    font:9px Arial,sans-serif;
    text-align:center;
}

.game-image-placeholder{
    width:425px;
    height:86px;
    margin:7px auto 3px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #222;
    border-radius:3px;
    background:repeating-linear-gradient(
        0deg,
        #3c4247 0 7px,
        #72777b 7px 14px
    );
    color:#fff;
    font:9px Arial,sans-serif;
}

.caption{
    color:#075a98;
    font:italic 9px Arial,sans-serif;
    text-align:center;
}

.small-image-placeholder{
    height:95px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #222;
    background:repeating-linear-gradient(
        0deg,
        #061d27 0 4px,
        #0a3d50 4px 8px
    );
    color:#fff;
    font:8px Arial,sans-serif;
}

.small-image-placeholder.green{
    background:repeating-linear-gradient(
        135deg,
        #58782d 0 5px,
        #9eae55 5px 10px
    );
}

/* =========================
   SETTE PROVE
   ========================= */

.special-section{
    margin-bottom:7px;
    overflow:hidden;
    border:1px solid #9ccfee;
    border-radius:3px;
    background:#c7e8fa;
}

.special-title{
    padding:5px 10px 4px;
    background:#b8def5;
    color:#064477;
    font:bold 17px "Roboto Condensed",Arial,sans-serif;
    line-height:1;
    text-transform:uppercase;
}

.special-body{
    padding:6px 10px 7px;
}

.special-body p{
    margin:0 0 6px;
    color:#064477;
    font:11px "Roboto Condensed",Arial,sans-serif;
}

.levels{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:5px;
}

.levels>div{
    height:80px;
    position:relative;
    padding:47px 2px 2px;
    border:1px solid #9bc6e3;
    border-radius:3px;
    background:#edf8fd;
    color:#064477;
    text-align:center;
    font:9px "Roboto Condensed",Arial,sans-serif;
}

.levels>div:before{
    content:"";
    position:absolute;
    left:3px;
    right:3px;
    top:3px;
    height:39px;
    border:1px solid #80a7bf;
    background:linear-gradient(135deg,#d6c77e,#8aa34a);
}

.levels b{
    display:block;
    font:bold 10px "Roboto Condensed",Arial,sans-serif;
}

.levels small{
    font:8px "Roboto Condensed",Arial,sans-serif;
}

/* =========================
   SIDEBAR DESTRA
   ========================= */

.side-box{
    margin-bottom:8px;
    overflow:hidden;
    border:1px solid #d3dfe6;
    border-radius:3px;
    background:#fff;
}

.side-title{
    padding:7px 8px 6px;
    background:#10547f;
    color:#fff;
    font:bold 12px "Roboto Condensed",Arial,sans-serif;
    line-height:1;
    text-transform:uppercase;
}

.cover-wrap{
    padding:8px;
    text-align:center;
}

.cover-placeholder{
    height:185px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#f1c978,#8a4b30);
    color:#fff;
    text-shadow:1px 1px 2px #222;
    font:12px Arial,sans-serif;
}

.cover-placeholder strong{
    font-size:22px;
    line-height:.9;
}

.technical-table{
    width:100%;
    border-collapse:collapse;
    color:#064477;
    font:10px "Roboto Condensed",Arial,sans-serif;
}

.technical-table td{
    padding:5px 6px;
    border-top:1px solid #d7e0e5;
    vertical-align:top;
}

.technical-table td:first-child{width:47%}

.compact .next-game{
    min-height:54px;
    padding:7px 6px;
    display:flex;
    align-items:center;
    gap:5px;
    color:#064477;
    font:10px "Roboto Condensed",Arial,sans-serif;
}

.thumb-placeholder{
    width:32px;
    height:32px;
    flex:none;
    border:1px solid #aaa;
    background:linear-gradient(135deg,#736a31,#222);
}

.useful-link{
    padding:5px 8px;
    border-top:1px solid #e0e5e8;
    color:#064477;
    font:10px "Roboto Condensed",Arial,sans-serif;
}

/* =========================
   PRO / CONTRO / VOTO
   ========================= */

.verdict{
    display:grid;
    grid-template-columns:1fr 1fr 173px;
    gap:6px;
    margin-top:2px;
}

.verdict>div{
    min-height:83px;
    padding:7px 10px;
    border:1px solid #d4dde2;
    border-radius:4px;
    font:10px "Roboto Condensed",Arial,sans-serif;
    line-height:1.4;
}

.pros{
    background:#eef7ec;
    border-color:#c4dfbd!important;
    color:#2d6630;
}

.cons{
    background:#fff0ef;
    border-color:#efc4c0!important;
    color:#a11d1a;
}

.verdict h3{
    margin:0 0 4px;
    font:bold 16px "Roboto Condensed",Arial,sans-serif;
}

.score{
    background:#f7fafb;
    color:#064477;
    text-align:center;
    font-weight:bold!important;
}

.score>div{
    margin-top:1px;
    font-size:13px;
}

.score strong{
    display:block;
    margin-top:2px;
    color:#e00000;
    font:bold 48px "Roboto Condensed",Arial,sans-serif;
    line-height:1;
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
    padding:18px 0;
    border-top:1px solid #d5dfe5;
    background:#f0f3f5;
    color:#557080;
    font:9px Arial,sans-serif;
}

.footer-inner{
    width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:1000px){
    .top-nav-inner,
    .page-layout,
    .footer-inner{width:96%}

    .page-layout{
        grid-template-columns:170px minmax(0,1fr) 190px;
        gap:12px;
    }
}

@media(max-width:760px){
    .page-layout{display:block}
    .left-column,.right-column{display:none}
    .top-nav-inner{width:100%;overflow:auto}
    .footer-inner{width:96%;display:block;text-align:center}
    .game-heading{
        grid-template-columns:1fr;
        min-height:0;
    }
    .heading-data{padding-top:0;padding-bottom:10px}
    .levels{grid-template-columns:repeat(2,1fr)}
}