:root{font-family:Inter,system-ui,Arial,sans-serif;color:#172438;background:#f4f7fb}*{box-sizing:border-box}body{margin:0}header{background:#122b4b;color:white;padding:22px max(24px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;align-items:center;gap:16px}header a{color:white;text-decoration:none}header strong{font-size:24px}nav{display:flex;gap:22px}main{max-width:1160px;margin:35px auto;padding:0 20px}h1{font-size:32px;margin:0 0 12px}p{line-height:1.6}.muted{color:#64748b}.toolbar{display:flex;gap:10px;margin:25px 0}input,select,button{font:inherit;padding:12px;border:1px solid #ccd5e2;border-radius:10px}input{max-width:100%;width:100%}button,.button{background:#2467d2;color:white;border:0;cursor:pointer;text-decoration:none;padding:12px 18px;border-radius:10px;display:inline-block}button:hover,.button:hover{background:#1554b5}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}.card,.panel{background:white;border:1px solid #e2e8f0;border-radius:15px;padding:22px;box-shadow:0 4px 15px #162c4710}.card h2{font-size:19px;line-height:1.4}.card a{color:#173d72;text-decoration:none}.card img{width:100%;height:155px;object-fit:cover;border-radius:9px}.panel{max-width:850px;margin-bottom:20px}.row{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin:12px 0}.row label{min-width:150px}.row input{flex:1}.row input[type=checkbox]{width:auto;flex:0}.row select{flex:1}.error{color:#b42318}.success{color:#067647}.post{max-width:850px}.post h1{line-height:1.2}.post img{max-width:100%;border-radius:12px}footer{text-align:center;padding:45px;color:#64748b}@media(max-width:600px){header{padding:18px;align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}}

/* ReloadedDemo navigation and post styling */
header{background:linear-gradient(120deg,#101115,#242529 65%,#090a0d);border-bottom:3px solid #151515;flex-wrap:wrap;justify-content:center;padding:24px 18px;gap:20px}header strong{font-size:22px;letter-spacing:.07em;color:#eee}.site-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}.site-nav a{font-size:14px;font-weight:850;color:#c7c7c7;text-decoration:none;white-space:nowrap}.site-nav a:hover,.site-nav a:focus{color:#fff}.heart{color:#f03b57;font-size:18px}.post h1,.card h2{text-transform:uppercase}.post .muted{font-size:13px}.post img{max-height:520px;object-fit:contain}@media(max-width:700px){header{align-items:center}.site-nav{gap:12px}.site-nav a{font-size:12px}}

/* v2.3 RSS article layout */
.post{max-width:1080px}.post>h1{font-size:clamp(26px,3vw,38px)}.rss-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:30px 0 0;border-bottom:2px solid #263448}.rss-tab{border-radius:6px 6px 0 0;background:#e4e9f1;color:#1a2b41;padding:12px 16px;font-size:12px;font-weight:800}.rss-tab.active,.rss-tab:hover{background:#1e344e;color:#fff}.rss-panel-wrap{background:#fff;border:1px solid #dfe5ed;border-top:0;border-radius:0 0 12px 12px;padding:clamp(18px,3vw,32px);box-shadow:0 6px 22px #1724380a}.rss-panel[hidden]{display:none}.rss-panel{overflow-wrap:anywhere;line-height:1.7}.rss-panel h4,.rss-panel h5{margin:20px 0 8px;color:#223f60}.rss-panel p{margin:10px 0}.rss-panel img{display:block;max-width:100%;height:auto;max-height:none;object-fit:contain;margin:16px auto;border-radius:5px}.rss-panel a{color:#1767b2}.rss-panel blockquote{border-left:3px solid #8fa3b8;padding-left:15px;margin-left:0}.rss-panel pre{white-space:pre-wrap}.rss-panel div{max-width:100%}@media(max-width:600px){.rss-tab{flex:1 1 45%;padding:10px 6px}.rss-panel-wrap{padding:16px}}

/* Homepage: drie kaarten per rij, met responsive indeling */
body:has(#posts) .site-layout #posts.grid{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:1050px){body:has(#posts) .site-layout #posts.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){body:has(#posts) .site-layout #posts.grid{grid-template-columns:1fr;}}

/* Datum links en categorie rechts, boven de afbeelding */
#posts .card{display:flex;flex-direction:column;min-width:0}
#posts .card-meta{order:-2;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;font-size:11px;line-height:1.3;white-space:nowrap}
#posts .card-meta-date{color:#64748b;min-width:0}
#posts .card-meta-category{color:#173d72;font-weight:700;flex-shrink:0;font-size:10px}
#posts .card-cover,#posts .card-image-fallback{order:-1}
@media(max-width:400px){#posts .card-meta{font-size:10px}#posts .card-meta-category{font-size:9px}}

/* Read More en reacties rechtsonder op iedere homepagekaart */
#posts .card-actions{margin-top:auto;padding-top:18px;text-align:right;font-size:12px;line-height:1.5;color:#64748b}
#posts .card-actions a{color:#173d72;text-decoration:none;font-weight:600}
#posts .card-actions a:hover{text-decoration:underline}

/* Homepage herstel 2026-10-30: ook met sidebar exact drie kaarten */
@media (min-width: 901px) {
  body:has(#posts) #posts.grid {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px;}
}
@media (min-width: 601px) and (max-width: 900px) {body:has(#posts) #posts.grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media (max-width:600px) {body:has(#posts) #posts.grid {grid-template-columns:minmax(0,1fr)!important;}}
#posts .card {min-width:0;display:flex;flex-direction:column;}
#posts .card-meta {order:-2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;margin-bottom:12px;white-space:nowrap;line-height:1.25;}
#posts .card-meta-date {font-size:clamp(9px,.72vw,11px);white-space:nowrap;min-width:0;}
#posts .card-meta-category {font-size:clamp(8px,.65vw,10px);white-space:nowrap;min-width:0;}
#posts .card-actions {margin-top:auto;text-align:right;}

/* Homepage paginanavigatie */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;margin:24px auto}.pagination[hidden]{display:none}.pagination-label,.page-button,.page-ellipsis{font-size:13px;line-height:1.4}.pagination-label{padding:8px 10px;color:#43536b}.page-button{padding:7px 11px;border:1px solid #cbd5e1;border-radius:4px;background:#fff;color:#16365e;cursor:pointer}.page-button:hover{background:#e8eef7}.page-button.active{background:#1f3652;color:#fff;border-color:#1f3652;cursor:default}.page-ellipsis{padding:7px;color:#64748b}



/* ReloadedDemo mobile: exactly one game card per row, without changing desktop. */
@media screen and (max-width: 767px) {
  body:has(#posts) #posts.grid,
  body:has(#posts) .site-layout #posts.grid,
  body:has(#posts) .site-layout main #posts.grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #posts > .card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  #posts .card-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    white-space: normal !important;
    gap: 6px 10px !important;
  }
  #posts .card-meta-date,
  #posts .card-meta-category {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 11px !important;
  }
  #posts .card img { max-width: 100%; }
}


/* ReloadedDemo – nette reacties onder gameberichten.
   Alleen de reactieformulieren en hun directe omgeving worden geraakt. */
:is(#comments, #reacties, .comments, .comments-section, .post-comments,
    .reactions, .reactions-section, .comment-section, .comments-wrap,
    section:has(> #comment-form), section:has(> .comment-form)) {
  background: #fff;
  color: #172438;
  border-radius: 12px;
  padding: clamp(18px, 3vw, 32px);
  margin: 0 0 20px;
  box-sizing: border-box;
}
:is(#comments, #reacties, .comments, .comments-section, .post-comments,
    .reactions, .reactions-section, .comment-section, .comments-wrap)
  :is(h2,h3,p,li) { color: #172438; }
:is(#comment-form, .comment-form, form:has(textarea[name="body"]),
    form:has(textarea[name="comment"]), form:has(textarea[placeholder*="reactie"]))
{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
:is(#comment-form, .comment-form, form:has(textarea[name="body"]),
    form:has(textarea[name="comment"]), form:has(textarea[placeholder*="reactie"]))
  :is(input:not([type="hidden"]):not([type="checkbox"]),textarea,select) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #172438;
  font: inherit;
  box-sizing: border-box;
}
:is(#comment-form, .comment-form, form:has(textarea[name="body"]),
    form:has(textarea[name="comment"]), form:has(textarea[placeholder*="reactie"]))
 textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}
:is(#comment-form, .comment-form, form:has(textarea[name="body"]),
    form:has(textarea[name="comment"]), form:has(textarea[placeholder*="reactie"]))
 :is(button[type="submit"],input[type="submit"]) {
  align-self: flex-end;
  width: auto;
  min-width: 160px;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #2463ce;
  color: white;
  font: inherit;
  cursor: pointer;
}
:is(#comment-form, .comment-form, form:has(textarea[name="body"]),
    form:has(textarea[name="comment"]), form:has(textarea[placeholder*="reactie"]))
 :is(input,textarea):focus-visible { outline: 2px solid #2463ce; outline-offset: 1px; }
@media(max-width: 650px) {
  :is(#comments,#reacties,.comments,.comments-section,.post-comments,.reactions,.reactions-section,.comment-section,.comments-wrap) {
    padding: 16px;
    border-radius: 8px;
  }
  :is(#comment-form,.comment-form,form:has(textarea[name="body"]),form:has(textarea[name="comment"]),form:has(textarea[placeholder*="reactie"]))
   :is(button[type="submit"],input[type="submit"]) { width: 100%; }
}


/* 2026-11-03: gamekaarten – titel en release-regel binnen het vak houden. */
#posts .card { min-width:0!important; overflow:hidden; }
#posts .card > h2 {
  width:100%; max-width:100%; min-width:0;
  margin:16px 0 12px;
  font-size:clamp(13px,1.05vw,18px)!important;
  line-height:1.3!important;
  letter-spacing:-.025em;
  overflow:hidden!important;
}
#posts .card > h2 > a {
  display:block!important;
  max-width:100%; min-width:0;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:inherit!important;
}
#posts .card-summary {min-width:0;max-width:100%;overflow:hidden;}
#posts .card-release-line {
  display:block!important;
  width:100%;max-width:100%;min-width:0;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:clamp(9px,.85vw,13px)!important;
  line-height:1.5!important;
  letter-spacing:-.035em;
  text-align:center;
}
#posts .card-release-line :is(.card-release-label,.card-release-links) {
  font-size:inherit!important;
  white-space:nowrap!important;
}
@media (max-width:767px) {
  #posts .card > h2 {font-size:clamp(14px,4vw,19px)!important;}
  #posts .card-release-line {font-size:clamp(10px,2.6vw,14px)!important;}
}

/* 2026-11-03 – kleinere gametitels, origineel lettertype behouden. */
@media (min-width:768px) {
  #posts .card > h2 { font-size:12px!important; line-height:1.35!important; letter-spacing:-.025em; }
  #posts .card > h2 > a { font-size:inherit!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; }
  #posts .card-release-line { font-size:10px!important; letter-spacing:-.04em; }
}
@media (max-width:767px) {
  #posts .card > h2 { font-size:16px!important; }
  #posts .card-release-line { font-size:12px!important; }
}

/* 2026-11-03 – volledige gametitels zichtbaar, zonder afkorten. */
#posts .card > h2 {
  font-size: 11px !important;
  line-height: 1.35 !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}
#posts .card > h2 > a {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}
@media (max-width:767px) {
  #posts .card > h2 { font-size: 14px !important; }
}

/* 2026-11-03: reserveer dezelfde titelruimte op alle gamekaarten.
   De volledige titel blijft zichtbaar; korte titels vullen de ruimte niet. */
#posts .card > h2 {
  min-height: 4.05em !important; /* ruimte voor 3 regels, ook bij titels van 1 regel */
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  margin-bottom: 12px !important;
}
#posts .card > h2 > a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}


/* 2026-11-03 – twee gamekaarten per rij, volledige afbeeldingen zichtbaar. */
@media (min-width: 901px) {
  body:has(#posts) #posts.grid,
  body:has(#posts) .site-layout #posts.grid,
  body:has(#posts) .site-layout main #posts.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Kleine schermen: altijd één kaart per rij. */
@media (max-width: 900px) {
  body:has(#posts) #posts.grid,
  body:has(#posts) .site-layout #posts.grid,
  body:has(#posts) .site-layout main #posts.grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Afbeelding volledig binnen het afbeeldingsvak; geen bijsnijden. */
#posts .card img,
#posts .card-cover img {
  display: block;
  width: 100% !important;
  height: 260px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f2f4f7;
}
@media (max-width: 600px) {
  #posts .card img,
  #posts .card-cover img { height: 220px !important; }
}

/* 2026-11-03: gewenste tekstgroottes, originele font-family behouden. */
#posts .card > h2,
#posts .card > h2 > a {
  font-size: 18px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}
#posts .card > h2 { min-height: 3.9em !important; }
#posts .card-release-line,
#posts .card-release-line :is(.card-release-label, .card-release-links) {
  font-size: 12px !important;
  line-height: 1.4 !important;
}