/* The Black Files — modern skin, built off the hero photo.
   coal    #14171A  page
   surface #1B2025  panels / tiles
   raised  #21262C  inputs, hover
   line    #2B3238  hairlines (the only separators — no shadows)
   text    #E8EBED / muted #98A1A8
   green   #86BE3C  case green from the photo — interactive elements only
   ps3     #5B87B7  quiet steel blue
*/
:root{
  --coal:#14171A;--surface:#1B2025;--raised:#21262C;--line:#2B3238;--line-lt:#38414A;
  --txt:#E8EBED;--mut:#98A1A8;
  --green:#86BE3C;--green-hi:#9ED155;--green-deep:#476E1C;
  --ps3:#5B87B7;--red:#D06A5C;--amber:#D9A648;
  --disp:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,Arial,sans-serif;
  --maxw:1100px;
}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--coal);color:var(--txt);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-hi);text-decoration:underline}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:.005em;line-height:1.1;margin:0 0 .5rem;color:var(--txt)}
h1{font-size:2.3rem}h2{font-size:1.7rem}h3{font-size:1.25rem}
p{margin:0 0 .9rem}
.muted{color:var(--mut)}.small{font-size:.88rem}.tiny{font-size:.78rem}
img{max-width:100%}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
::selection{background:var(--green-deep);color:#fff}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- chrome ---------- */
.announce-bar{background:var(--green);color:#122005;text-align:center;padding:.45rem 1rem;font-weight:600;font-size:.9rem}
.site-head{border-bottom:1px solid var(--line);background:rgba(20,23,26,.92);backdrop-filter:blur(6px);position:sticky;top:0;z-index:20}
.head-inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:1.4rem;height:60px}
.brand{font-family:var(--disp);font-weight:700;font-size:1.45rem;color:var(--txt);white-space:nowrap;display:flex;align-items:center;gap:.55rem}
.brand:hover{text-decoration:none;color:var(--txt)}
.brand-dot{width:11px;height:11px;border-radius:50%;background:var(--green);flex-shrink:0}
.site-nav{display:flex;gap:.2rem}
.site-nav a{color:var(--mut);font-weight:500;padding:.4rem .7rem;border-radius:4px;font-size:.95rem}
.site-nav a:hover{color:var(--txt);background:var(--raised);text-decoration:none}
.head-search{flex:1;display:flex;justify-content:flex-end}
.head-search input{width:100%;max-width:250px}
.head-user{display:flex;gap:.9rem;align-items:center;font-size:.92rem;white-space:nowrap}
.head-user a{color:var(--txt)}
.bell{position:relative;color:var(--mut)!important}
.bell:hover{color:var(--txt)!important}
.bell b{position:absolute;top:-8px;right:-12px;background:var(--green);color:#122005;font-size:.68rem;border-radius:8px;padding:0 5px;font-style:normal}
.site-main{max-width:var(--maxw);margin:0 auto;padding:1.6rem 20px 3.5rem}
.site-foot{border-top:1px solid var(--line);margin-top:2rem}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:1.3rem 20px;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--mut);font-size:.88rem}
.foot-links{display:flex;gap:1.2rem}
.foot-links a{color:var(--mut)}
.foot-links a:hover{color:var(--txt)}

/* ---------- forms & buttons ---------- */
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=date],select,textarea{
  background:var(--raised);border:1px solid var(--line-lt);border-radius:4px;padding:.5rem .65rem;width:100%;color:var(--txt)}
input::placeholder,textarea::placeholder{color:#6C757D}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none}
textarea{min-height:120px;resize:vertical}
label{display:block;font-weight:600;margin:.85rem 0 .3rem}
label .hint{font-weight:400;color:var(--mut);font-size:.85rem}
.btn{display:inline-block;background:var(--green);color:#122005;font-weight:600;border:1px solid var(--green);border-radius:4px;padding:.5rem 1.1rem;cursor:pointer;text-decoration:none!important;font-size:.95rem;transition:background .12s,border-color .12s}
.btn:hover{background:var(--green-hi);border-color:var(--green-hi);color:#122005}
.btn-sm{padding:.3rem .75rem;font-size:.86rem}
.btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--line-lt)}
.btn-ghost:hover{background:var(--raised);border-color:var(--mut);color:var(--txt)}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn-ok{background:var(--green);border-color:var(--green)}
.btn-block{display:block;width:100%;text-align:center}
.form-narrow{max-width:440px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.check{display:flex;gap:.5rem;align-items:center;font-weight:400;margin:.5rem 0}
.check input{width:auto}

/* ---------- panels: flat, hairline, no shadows ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.3rem;margin-bottom:1.1rem}
.panel-title{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.flash{padding:.65rem 1rem;border-radius:4px;margin-bottom:1rem;border:1px solid;background:var(--surface);font-size:.95rem}
.flash-ok{border-color:var(--green-deep);color:#C9E3A4}
.flash-warn{border-color:#8A6A24;color:#E8CF9B}
.flash-err{border-color:#8A4038;color:#EBB5AC}
.pill{display:inline-block;padding:.08rem .55rem;border-radius:3px;font-size:.76rem;font-weight:600;background:var(--raised);color:var(--mut);border:1px solid var(--line-lt);vertical-align:1px}
.pill-amber{color:var(--amber);border-color:#6E5624;background:transparent}
.pill-red{color:var(--red);border-color:#6E352E;background:transparent}
.pill-green{color:var(--green);border-color:var(--green-deep);background:transparent}
.pill-blue{color:#9FC0DE;border-color:#3D5A77;background:transparent}
.pill-x360{color:#122005;background:var(--green);border-color:var(--green)}
.pill-ps3{color:#fff;background:var(--ps3);border-color:var(--ps3)}
.pill-both{color:#fff;background:linear-gradient(105deg,var(--green) 50%,var(--ps3) 50%);border-color:var(--line-lt)}

/* ---------- download tiles ---------- */
.dossier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.dossier{position:relative;background:var(--surface);border:1px solid var(--line);border-left-width:3px;border-radius:6px;padding:.95rem 1.05rem .7rem;display:flex;flex-direction:column;gap:.35rem;margin-top:0;transition:border-color .12s}
.dossier:hover{border-color:var(--line-lt);border-left-color:inherit}
.plat-xbox360{border-left-color:var(--green)}
.plat-ps3{border-left-color:var(--ps3)}
.plat-both{border-left-color:var(--green)}
.dossier .tab{position:static;display:inline-block;align-self:flex-start;padding:.06rem .5rem;font-size:.74rem;font-weight:600;border-radius:3px}
.plat-xbox360 .tab{background:transparent;color:var(--green);border:1px solid var(--green-deep)}
.plat-ps3 .tab{background:transparent;color:#9FC0DE;border:1px solid #3D5A77}
.plat-both .tab{background:transparent;color:var(--mut);border:1px solid var(--line-lt)}
.dossier-title{color:var(--txt);font-weight:600;font-size:1.05rem;line-height:1.3;font-family:var(--body)}
.dossier-title:hover{color:var(--green-hi);text-decoration:none}
.dossier-meta{display:flex;flex-wrap:wrap;gap:.25rem .85rem;color:var(--mut);font-size:.83rem}
.dossier-desc{color:var(--mut);font-size:.9rem;margin:0;flex:1}
.dossier-foot{display:flex;align-items:center;gap:.8rem;border-top:1px solid var(--line);padding-top:.5rem;margin-top:.25rem}
.stars i{font-style:normal;color:#454F58;font-size:.92rem}
.stars i.on{color:var(--green)}

/* ---------- hero: the photo does the work ---------- */
.hero{position:relative;width:100vw;margin:-1.6rem 0 1.8rem calc(50% - 50vw);border:0;padding:0;display:block;border-bottom:1px solid var(--line)}
.hero-img{position:absolute;inset:0;background:url('/assets/img/hero.jpg') center 42%/cover no-repeat;filter:saturate(1.05)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg, rgba(20,23,26,.92) 0%, rgba(20,23,26,.72) 34%, rgba(20,23,26,.18) 62%, rgba(20,23,26,.45) 100%),linear-gradient(0deg, rgba(20,23,26,1) 0%, rgba(20,23,26,0) 26%)}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:6.2rem 20px 4.6rem;min-height:430px;display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{font-size:clamp(2.4rem,5.4vw,3.7rem);font-weight:700;max-width:15ch;margin-bottom:.7rem}
.hero p{font-size:1.08rem;color:#C4CBD1;max-width:46ch}
.hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.5rem}
.hero-count{margin-top:1.6rem;display:flex;gap:2.2rem;flex-wrap:wrap}
.hero-count b{display:block;font-family:var(--disp);font-size:1.7rem;font-weight:600;line-height:1.05}
.hero-count span{color:var(--mut);font-size:.85rem}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin:2rem 0 .8rem;border-bottom:1px solid var(--line);padding-bottom:.45rem}
.section-head h2{margin:0}

/* ---------- browse ---------- */
.browse{display:grid;grid-template-columns:215px 1fr;gap:18px}
.filters{position:sticky;top:76px;align-self:start}
.filters a{display:block;color:var(--mut);padding:.32rem .6rem;border-left:2px solid transparent;font-size:.93rem}
.filters a.on{color:var(--txt);border-left-color:var(--green);background:var(--surface)}
.filters a:hover{color:var(--txt);text-decoration:none}
.filters h3{margin:1rem 0 .3rem;font-size:.95rem;color:var(--mut);font-weight:600}
.filters h3:first-child{margin-top:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.toolbar select,.toolbar input{width:auto}
.pager{display:flex;gap:.8rem;justify-content:center;align-items:center;margin:1.4rem 0}
.pager a{padding:.35rem .85rem;border:1px solid var(--line-lt);border-radius:4px;color:var(--txt)}
.pager a:hover{border-color:var(--green);color:var(--green-hi);text-decoration:none}
.empty{padding:2.4rem;text-align:center;color:var(--mut);border:1px dashed var(--line-lt);border-radius:6px}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:1fr 310px;gap:18px}
.detail-side .panel{position:sticky;top:76px}
.dl-btn{font-size:1.05rem;padding:.75rem;margin-bottom:.8rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;font-size:.88rem;margin:0}
.facts dt{color:var(--mut)}.facts dd{margin:0;word-break:break-all}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:1rem 0}
.shots img{border-radius:4px;border:1px solid var(--line);cursor:zoom-in;width:100%;aspect-ratio:16/9;object-fit:cover}
.shots img:hover{border-color:var(--line-lt)}
.rate{display:flex;align-items:center;gap:.4rem;margin:.6rem 0;flex-direction:row-reverse;justify-content:center}
.rate button{background:none;border:0;font-size:1.5rem;color:#454F58;cursor:pointer;padding:0 .08rem}
.rate button.on,.rate button:hover,.rate button:hover~button{color:var(--green)}
.comment{display:flex;gap:.85rem;padding:.85rem 0;border-top:1px solid var(--line)}
.comment.reply{margin-left:2.5rem}
.avatar{width:38px;height:38px;border-radius:4px;background:var(--raised);border:1px solid var(--line);object-fit:cover;flex-shrink:0;display:grid;place-items:center;font-weight:700;color:var(--mut)}
.avatar.lg{width:84px;height:84px;font-size:1.9rem}
.comment-body{flex:1}.comment-head{display:flex;gap:.65rem;align-items:baseline;font-size:.86rem}
.comment-body p{margin:.3rem 0}
.prose{max-width:70ch}.prose p{margin-bottom:.8rem}
.tags a{display:inline-block;background:var(--raised);border:1px solid var(--line-lt);padding:.06rem .5rem;border-radius:3px;font-size:.8rem;margin:0 .3rem .3rem 0;color:var(--mut)}
.tags a:hover{color:var(--green);border-color:var(--green-deep);text-decoration:none}

/* ---------- profile ---------- */
.profile-head{display:flex;gap:1.2rem;align-items:center;margin-bottom:1rem}
.profile-stats{display:flex;gap:1.3rem;color:var(--mut);font-size:.9rem;flex-wrap:wrap}
.profile-stats b{color:var(--txt)}
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}
.tabs a{padding:.55rem .95rem;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500;margin-bottom:-1px}
.tabs a.on{color:var(--txt);border-bottom-color:var(--green)}
.tabs a:hover{text-decoration:none;color:var(--txt)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .2rem;border-bottom:1px solid var(--line);align-items:center}
.list li:last-child{border:0}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:.82rem;border-bottom:1px solid var(--line-lt)}
tr:hover td{background:rgba(255,255,255,.018)}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:0 .4rem}
.actions{display:flex;gap:.4rem;flex-wrap:wrap}
.actions form{display:inline}

/* ---------- admin ---------- */
.admin{display:grid;grid-template-columns:200px 1fr;gap:18px}
.admin-nav{align-self:start;position:sticky;top:76px}
.admin-nav a{display:block;padding:.36rem .65rem;color:var(--mut);border-left:2px solid transparent;font-size:.93rem}
.admin-nav a.on{color:var(--txt);border-left-color:var(--green);background:var(--surface)}
.admin-nav a:hover{color:var(--txt);text-decoration:none}
.admin-nav .count{float:right;background:var(--green);color:#122005;border-radius:8px;padding:0 .42rem;font-size:.74rem;font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-bottom:1.1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.7rem .9rem}
.kpi b{display:block;font-family:var(--disp);font-size:1.65rem;font-weight:600;line-height:1.1}
.kpi span{color:var(--mut);font-size:.82rem}
.chart-box{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1rem;margin-bottom:1.1rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.review-card{border:1px solid var(--line);border-left:3px solid var(--green);border-radius:6px;padding:.95rem 1.1rem;margin-bottom:1rem;background:var(--surface)}
.review-card details{margin:.6rem 0}
.review-card summary{color:var(--green);font-weight:600;cursor:pointer}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.82rem}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;place-items:center;z-index:50;cursor:zoom-out}
.lightbox.open{display:grid}.lightbox img{max-width:92vw;max-height:92vh}

@media (max-width:1150px){.hero{margin-left:-20px;margin-right:-20px;width:auto}}
@media (max-width:860px){
  .browse,.detail,.admin,.two,.form-row{grid-template-columns:1fr}
  .filters,.detail-side .panel,.admin-nav{position:static}
  .head-inner{flex-wrap:wrap;height:auto;padding-top:.6rem;padding-bottom:.6rem;gap:.6rem 1rem}
  .head-search{order:5;flex-basis:100%}
  .head-search input{max-width:none}
  .site-nav{overflow-x:auto}
  .hero-img{background-image:url('/assets/img/hero-sm.jpg')}
  .hero-inner{padding-top:4.5rem;min-height:340px}
}