/*
Theme Name: yoi
Theme URI: https://example.com/yoi
Author: yoi
Description: Dark game download theme - grid, sidebar, game info, download buttons, side background images.
Version: 1.0
Text Domain: yoi
*/
:root{--red:#e74c3c;--bg:#333;--panel:#3a3a3a;--panel2:#2e2e2e;--dark:#262626;--txt:#ddd;--muted:#999}
*{box-sizing:border-box}
body{margin:0;background:var(--dark);color:var(--txt);font:13px/1.6 Arial,Helvetica,sans-serif}
a{color:#fff;text-decoration:none}a:hover{color:var(--red)}
img{max-width:100%;height:auto}
.wrap{width:1080px;max-width:100%;margin:0 auto;padding:0 10px}
/* header */
.top{background:#3c3c3c;border-bottom:1px solid #2a2a2a}
.top,.bar,.searchform,.foot,.copy{position:relative;z-index:2}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:110px}
.logo img{max-height:60px}.logo .site-name{font:italic bold 34px Impact,Arial;color:#ddd}
.logo .site-name b{color:var(--red)}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;height:110px}
.mainnav li{border-left:1px solid #333}.mainnav li:last-child{border-right:1px solid #333}
.mainnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;height:110px;padding:0 22px;font-weight:bold;font-size:14px;text-transform:uppercase}
.mainnav a .ico{font-size:20px;margin-bottom:6px}.mainnav a small{font-weight:normal;text-transform:none;font-size:11px;color:#ccc}
.bar{background:#2f2f2f;border-bottom:1px solid #222}
.bar .wrap{display:flex;align-items:center;height:44px}
.social a{display:inline-block;width:45px;text-align:center;line-height:44px;color:#888;border-right:1px solid #3a3a3a}
.badge{background:#c00;color:#fff;font-weight:bold;padding:3px 10px;border-radius:2px;margin-left:12px}
.bar .right{margin-left:auto;display:flex;height:44px}
.bar .right>*{display:flex;align-items:center;padding:0 15px;color:var(--red);font-weight:bold;text-transform:uppercase;border-left:1px solid #3a3a3a}
.searchbtn{background:var(--red);color:#fff!important;cursor:pointer}
.searchform{display:none;background:#2f2f2f;padding:10px 0}.searchform.on{display:block}
.searchform input{width:100%;padding:10px;background:#222;border:1px solid #444;color:#fff}
/* body bg */
.site-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;background-size:cover;background-position:center center;background-repeat:no-repeat;pointer-events:none}
.site-body{position:relative;z-index:1}
.ic{display:inline-block;vertical-align:middle;flex-shrink:0}
.layout{position:relative;display:flex;gap:20px;padding:35px 10px 30px;align-items:flex-start}
.content{flex:1;min-width:0}.sidebar{width:255px;flex-shrink:0}
.box{background:var(--panel);margin-bottom:20px;box-shadow:0 0 6px rgba(0,0,0,.4)}
.box-h{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#3f3f3f;border-bottom:1px solid #2d2d2d}
.box-h h1,.box-h h2,.box-h h3{margin:0;color:var(--red);font-size:15px;text-transform:uppercase}
.box-h .crumb{font-size:11px;color:#ddd;text-transform:uppercase}
.box-b{padding:15px}
.adult{position:absolute;margin-top:-20px;background:#c00;color:#fff;font-weight:bold;padding:2px 12px}
/* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
.card{background:#2c2c2c;position:relative;overflow:hidden}
.card .thumb{display:block;margin:5px;aspect-ratio:2/2.9;overflow:hidden;background:#111}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}.card:hover img{transform:scale(1.05)}
.card .title{text-align:center;padding:6px 5px 10px;font-size:13px;color:#ddd}
.card .views{background:#555;text-align:center;font-size:11px;padding:3px;color:#ddd}
.ribbon{position:absolute;top:18px;left:-32px;width:120px;transform:rotate(-45deg);text-align:center;font-size:10px;font-weight:bold;text-transform:uppercase;padding:2px 0;z-index:2;color:#7a5a00;background:#f4c20d}
.ribbon.online{background:#c0392b;color:#fff}.ribbon.early{background:#2a8fd6;color:#fff}
.pagination{background:var(--panel);padding:15px 20px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pagination .page-numbers{padding:2px 9px;color:#ccc}.pagination .current{border:1px solid var(--red);color:var(--red);border-radius:3px}
/* sidebar */
.sidebar .box-b{padding:12px}.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{border-bottom:1px solid #444}.sidebar li a{display:block;padding:7px 0;font-weight:bold;text-transform:uppercase;font-size:12px}
.sidebar li a:before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7-1.5-1.5L13 12 7.5 6.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7-1.5-1.5L13 12 7.5 6.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.banner{display:block;margin-bottom:0}
/* single */
.tabs{display:flex;justify-content:center;gap:3px;margin-bottom:10px}
.tabs a{background:#222;padding:2px 6px;font-size:10px;text-transform:uppercase}.tabs a.on{background:#d4d40a;color:#222}
.dlbtn .ic{margin-top:-3px}
.dlbtn{display:block;width:290px;max-width:100%;margin:12px auto;background:linear-gradient(#f22,#c00);color:#fff;text-align:center;font-size:17px;font-weight:bold;padding:9px;border-radius:4px;box-shadow:0 2px 8px rgba(255,0,0,.4)}
.dlbtn:hover{color:#fff;filter:brightness(1.1)}
.cover{text-align:center}.cover img{width:240px}
.entry p{margin:0 0 10px}
.howto{background:#222;border:1px solid #111;padding:12px;margin:15px 20px;color:#888}.howto b{color:#aaa}.howto .pw{color:var(--red)}
.torrentrow{display:flex;justify-content:flex-end;align-items:center;gap:15px;background:#3f3f3f;padding:10px 15px;margin-top:20px}
.torrentrow .count{font-size:16px}.torrentrow a{background:#2b2b2b;padding:8px 15px;font-weight:bold;text-transform:uppercase}
.torrentrow a span{background:var(--red);border-radius:50%;padding:2px 7px;margin-right:6px}
.info{display:flex;gap:15px}.info img{width:90px}.info table td{padding:1px 8px 1px 0;font-size:12px}.info td:first-child{color:var(--red)}
/* comments */
.comment-list{list-style:none;padding:0}.comment-list li{background:#2c2c2c;padding:12px;margin-bottom:8px}
.comment-respond input,.comment-respond textarea{width:100%;background:#2a2a2a;border:1px solid #444;color:#fff;padding:8px;border-radius:4px}
.comment-respond .submit{width:auto;background:#3a3a3a;cursor:pointer}
/* footer */
.foot{background:#303030;padding:25px 0}.foot .wrap{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px}
.foot h4{color:var(--red);text-align:center;font-size:17px;margin:0 0 15px;font-weight:normal}
.foot h4 .ic{display:block;margin:4px auto 0}
.foot ul{list-style:none;padding:0;margin:0}.foot li{border-bottom:1px solid #3d3d3d;padding:4px 0;font-weight:bold;text-transform:uppercase;font-size:13px}
.foot p{color:#999}
.copy{background:#222;text-align:center;padding:15px;color:#fff}.copy a{color:var(--red)}
.totop{position:fixed;right:20px;bottom:20px;background:#a33;color:#fff;padding:10px;display:none;z-index:5}
@media(max-width:900px){.layout{flex-direction:column}.sidebar{width:100%}.grid{grid-template-columns:repeat(2,1fr)}.top .wrap{height:auto;flex-direction:column}.mainnav ul,.mainnav a{height:70px}.foot .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.mainnav a{padding:0 8px}.grid{grid-template-columns:1fr 1fr}.bar .social{display:none}}