/*
Theme Name: PixelPedia
Theme URI: https://example.com/pixelpedia
Author: You
Description: Neo-brutalist arcade style game catalog theme. Games database, genres, tutorials/blog, ticker, tilted cards, hard shadows.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: pixelpedia
*/

:root{
  --bg:#fff6dc; --ink:#111; --red:#ff3b4e; --blue:#19c6e6; --yellow:#ffd400; --green:#3ddc84; --pink:#ff7ad9;
  --card:#fff; --shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;
  background-image:radial-gradient(#0002 1.2px,transparent 1.2px);background-size:18px 18px}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,.logo{font-family:var(--font-head);line-height:1.1;margin:0 0 .5em;letter-spacing:.5px}
.wrap{max-width:var(--container,1200px);margin:0 auto;padding:0 20px}

/* ticker */
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;white-space:nowrap;font-weight:700;font-size:14px;padding:6px 0}
.ticker span{display:inline-block;padding-left:100%;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

/* header: joy-con split */
.site-header{border-bottom:4px solid var(--ink);background:linear-gradient(90deg,var(--blue) 0 50%,var(--red) 50% 100%);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.logo{font-size:28px;text-decoration:none;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:4px 14px;transform:rotate(-2deg);transition:.2s}
.logo:hover{transform:rotate(2deg) scale(1.05)}
.nav{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;text-decoration:none;font-weight:700;background:#fff;border:3px solid var(--ink);padding:4px 14px;box-shadow:3px 3px 0 var(--ink);transition:.15s}
.nav a:hover,.nav .current-menu-item a{background:var(--yellow);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.search-form{margin-left:auto;display:flex}
.search-form input[type=search]{border:3px solid var(--ink);padding:7px 12px;font:inherit;width:200px;outline:none}
.search-form button,.btn{font:inherit;font-family:var(--font-head);cursor:pointer;border:3px solid var(--ink);background:var(--green);padding:7px 16px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;display:inline-block;color:var(--ink);transition:.15s}
.search-form button{box-shadow:none;border-left:0;background:var(--ink);color:#fff}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}.btn.blue{background:var(--blue)}.btn.yellow{background:var(--yellow)}

/* hero */
.hero{padding:var(--hero-pad,50px) 0 calc(var(--hero-pad,50px) * .6);text-align:center}
.hero h1{font-size:clamp(26px,7vw,var(--hero-size,76px));text-shadow:4px 4px 0 var(--yellow),8px 8px 0 var(--ink)}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{font-size:18px;max-width:640px;margin:0 auto 22px}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.chip{border:3px solid var(--ink);padding:3px 14px;font-weight:700;text-decoration:none;background:#fff;box-shadow:3px 3px 0 var(--ink);transition:.15s}
.chip:nth-child(4n+1):hover{background:var(--pink)}.chip:nth-child(4n+2):hover{background:var(--green)}
.chip:nth-child(4n+3):hover{background:var(--blue)}.chip:nth-child(4n):hover{background:var(--yellow)}
.chip:hover{transform:rotate(-3deg) scale(1.08)}

/* sections */
.section{margin:40px 0}
.section-title{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:26px;letter-spacing:0;background:var(--ink);color:var(--yellow);padding:6px 18px;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px}
.card{background:var(--card);border:3px solid var(--ink);box-shadow:var(--shadow);text-decoration:none;display:flex;flex-direction:column;transition:.2s;position:relative}
.card:nth-child(odd):hover{transform:rotate(-2deg) translateY(-6px)}
.card:nth-child(even):hover{transform:rotate(2deg) translateY(-6px)}
.card:hover{box-shadow:10px 10px 0 var(--ink)}
.card .thumb{aspect-ratio:3/4;background:repeating-linear-gradient(45deg,var(--blue),var(--blue) 10px,#8fe3f5 10px,#8fe3f5 20px);border-bottom:3px solid var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:60px}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .info{padding:10px 12px}
.card h3{font-size:16px;margin:0 0 6px}
.meta{font-size:13px;display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--yellow);border:2px solid var(--ink);padding:0 8px;font-weight:700;font-size:12px}
.badge{position:absolute;top:-12px;right:-10px;background:var(--red);color:#fff;border:3px solid var(--ink);font-family:var(--font-head);font-size:12px;padding:2px 8px;transform:rotate(6deg);z-index:2}
.stars{color:var(--red);letter-spacing:2px}

/* two column */
.cols{display:grid;grid-template-columns:2fr 1fr;gap:30px}
.box{background:#fff;border:3px solid var(--ink);box-shadow:var(--shadow);padding:22px}
.widget{background:#fff;border:3px solid var(--ink);box-shadow:var(--shadow);padding:16px;margin-bottom:26px}
.widget-title{background:var(--pink);margin:-16px -16px 14px;padding:6px 16px;border-bottom:3px solid var(--ink);font-size:18px}
.widget ul{padding-left:18px;margin:0}

/* single game */
.game-head{display:grid;grid-template-columns:var(--cover-w,300px) 1fr;gap:30px;margin-top:30px}
.game-head .cover{border:4px solid var(--ink);box-shadow:10px 10px 0 var(--red);background:#fff;position:relative;overflow:hidden;align-self:stretch;min-height:380px}
.specs{width:100%;border-collapse:collapse;margin:16px 0}
.specs th,.specs td{border:3px solid var(--ink);padding:6px 12px;text-align:left}
.specs th{background:var(--yellow);width:140px}
.entry-content{font-size:17px}
.entry-content h2,.entry-content h3{margin-top:1.4em}
.entry-content blockquote{border-left:8px solid var(--red);margin:1em 0;padding:4px 18px;background:var(--bg)}
.entry-content img{border:3px solid var(--ink)}
.game-head .cover img,.game-head .cover .thumb{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover}

/* download buttons box: label tab + buttons in one line */
.dl-box{position:relative;border:3px solid var(--ink);background:#fff;padding:26px 16px 16px;margin-top:30px;box-shadow:4px 4px 0 var(--ink)}
.dl-label{position:absolute;top:-16px;left:14px;background:var(--ink);color:var(--yellow);font-family:var(--font-head);font-size:13px;padding:3px 12px}
.dl-buttons{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.dl-buttons .btn{margin:0}

/* screenshots (static row, no slider) */
.shots-box{position:relative;border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow);padding:28px 18px 18px}
.shots-label{position:absolute;top:-16px;left:14px;background:var(--ink);color:var(--yellow);font-family:var(--font-head);font-size:13px;padding:3px 12px}
.shots-row{display:flex;gap:14px;flex-wrap:wrap}
.shots-row a{display:block;line-height:0}
.shots-row img{height:170px;width:auto;max-width:100%;border-radius:6px;border:2px solid var(--ink);object-fit:cover}

/* comments */
.comments-area .box{padding:26px}
.pp-comment-list,.pp-comment-list .children{list-style:none;margin:0;padding:0}
.pp-comment-list .children{margin-left:48px;margin-top:14px}
.pp-comment{display:flex;gap:16px;padding:16px 0;border-bottom:2px dashed #0003}
.pp-comment-list>.pp-comment:first-child{padding-top:0}
.pp-c-avatar img{width:56px;height:56px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);object-fit:cover}
.pp-c-body{flex:1;min-width:0}
.pp-c-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pp-c-name{font-family:var(--font-head);font-size:15px}
.pp-c-date{font-size:12px;opacity:.6}
.pp-c-text p{margin:6px 0}
.pp-c-wait{font-size:13px;background:var(--yellow);padding:0 8px;border:2px solid var(--ink)}
.pp-c-actions a{font-size:13px;font-weight:700;text-decoration:none;background:var(--blue);border:2px solid var(--ink);padding:1px 10px;display:inline-block}
.pp-c-empty{margin:0 0 20px;opacity:.7}
#respond{margin-top:26px}
#reply-title{font-size:22px;margin-bottom:14px}
#respond input[type=text],#respond input[type=email],#respond textarea{width:100%;border:3px solid var(--ink);padding:10px 14px;font:inherit;background:#fff;outline:none}
#respond input:focus,#respond textarea:focus{box-shadow:4px 4px 0 var(--blue)}
.comment-form-author,.comment-form-email{display:inline-block;width:calc(50% - 8px);margin:0 12px 14px 0;vertical-align:top}
.comment-form-email{margin-right:0}
.comment-form-cookies-consent{font-size:13px;margin:0 0 14px}
#respond .submit{background:var(--red);color:#fff}
@media(max-width:600px){.comment-form-author,.comment-form-email{width:100%;margin-right:0}.pp-c-avatar img{width:44px;height:44px}.pp-comment-list .children{margin-left:16px}}
.notice{background:var(--yellow);border:3px dashed var(--ink);padding:10px 14px;font-size:14px;margin-top:18px}

.pagination{margin:34px 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination span{border:3px solid var(--ink);padding:4px 14px;background:#fff;font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.pagination .current{background:var(--red);color:#fff}

/* footer */
.site-footer{margin-top:70px;background:var(--ink);color:#fff;border-top:6px solid var(--yellow);padding:34px 0 20px}
.site-footer .wrap{display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap}
.site-footer a{color:var(--yellow)}
.site-footer ul{list-style:none;padding:0;margin:0}
.copy{text-align:center;font-size:13px;opacity:.7;margin-top:20px}

@media(max-width:800px){
  .cols,.game-head{grid-template-columns:1fr}
  .game-head .cover{max-width:300px;aspect-ratio:3/4;min-height:0}
  .search-form{margin-left:0;width:100%}.search-form input[type=search]{flex:1}
  .site-header{position:static}
}

.tags-box{margin:26px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* seo / a11y / speed */
.crumbs{margin-top:22px;font-size:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.crumbs a{text-decoration:none;font-weight:700}.crumbs a:hover{text-decoration:underline}.crumbs i{font-style:normal;opacity:.5}.updated{font-size:13px;opacity:.7;margin:0 0 10px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--yellow);padding:8px 14px;z-index:100;border:3px solid var(--ink)}.skip-link:focus{left:10px;top:10px}
.card .thumb img{content-visibility:auto}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* readability + compact ROM header + lightbox */
:root{--font-read:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.entry-content,.entry-content p,.specs td,.pp-c-text,.pp-c-empty,#respond input,#respond textarea{font-family:var(--font-read)}
.entry-content{font-size:17px;line-height:1.8;color:#1b1b1b}
.entry-content p{margin:0 0 1.1em}
.entry-content h3{font-family:var(--font-read);font-weight:800;font-size:21px;margin:1.6em 0 .5em;line-height:1.3}
.card h3{font-family:var(--font-read);font-weight:800;font-size:15px;line-height:1.35;letter-spacing:0;text-transform:none}
.game-title{font-size:clamp(22px,3.4vw,36px);margin:0 0 4px;line-height:1.15}
.game-head{gap:24px;margin-top:18px}
.game-head .cover{min-height:280px;max-height:420px}
.specs{margin:8px 0 0}
.specs th,.specs td{padding:5px 10px;font-size:14px;border-width:2px}
.specs th{width:auto;white-space:nowrap}
.dl-box{margin-top:24px;padding:22px 14px 12px}
.dl-buttons .btn{padding:5px 14px;font-size:14px}
.pp-lb{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.pp-lb[hidden]{display:none}
.pp-lb img{max-width:92vw;max-height:88vh;border:3px solid #fff;background:#000}
.pp-lb button{position:absolute;background:var(--yellow);border:3px solid var(--ink);font-size:26px;line-height:1;width:44px;height:44px;cursor:pointer;color:var(--ink)}
.pp-lb-x{top:16px;right:16px}.pp-lb-prev{left:14px;top:50%}.pp-lb-next{right:14px;top:50%}
@media(max-width:800px){.game-head .cover{max-height:none}.specs th,.specs td{display:block;width:auto}.specs tr{display:block;margin-bottom:6px}}

.entry-content .first-h3{margin-top:0}