/* Post content styles. Shared by three surfaces so they render alike:
   .post-body    the live post
   .rv-body      the admin review preview (submit.html)
   .rich-editor  the editor itself (submit.html)
   Add new post-content rules here, not in a page's own <style>. */
/* Shared post content styles. Single source for the post page and any other
   surface that renders entry HTML. Requires shared-tokens.css. */
/* ── POST BODY ── */
.post-body[contenteditable="false"],.rv-body[contenteditable="false"],.rich-editor[contenteditable="false"]{ -webkit-user-modify: read-only; user-modify: read-only; cursor: auto; }
.post-body,.rv-body,.rich-editor{ -webkit-user-select: text; user-select: text; font-size:clamp(15px,1.1vw,17px);line-height:1.9;color:var(--text-muted);font-weight:300;max-width:100%;padding:0 7px;}
.post-body p,.rv-body p,.rich-editor p{margin-bottom:16px;}
.post-body ul,.rv-body ul,.rich-editor ul,.post-body ol,.rv-body ol,.rich-editor ol{margin:8px 0 12px 24px;padding:0;}
.related-posts{margin-top:52px;padding-top:28px;border-top:1px solid var(--border);}
.related-posts-label{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.related-posts-label::after{content:'';flex:1;height:1px;background:var(--border);}
.related-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(min-width:901px){#postToc{display:block!important;}}
@media(max-width:900px){#postToc{display:none!important;}}

.post-body ul,.rv-body ul,.rich-editor ul{list-style:disc;}
/* TOC */
#postToc{font-family:'Barlow Condensed',sans-serif;padding-left:12px;}
/* Mobile TOC dropdown */
#postTocMobile{display:none;}
@media(max-width:900px){
  #postTocMobile{display:block!important;}
}
.toc-mobile-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--surface2);border:1px solid var(--border-mid);border-radius:4px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.toc-mobile-toggle svg{transition:transform 0.2s;flex-shrink:0;}
.toc-mobile-toggle.open svg{transform:rotate(180deg);}
.toc-mobile-list{display:none;border:1px solid var(--border-mid);border-top:none;border-radius:0 0 4px 4px;background:var(--surface2);padding:4px 0;}
.toc-mobile-list.open{display:block;}
.toc-mobile-item{display:flex;align-items:center;padding:7px 14px;font-family:'Barlow Condensed',sans-serif;font-size:clamp(16px,1.2vw,18px);color:var(--text-muted);cursor:pointer;transition:color 0.15s,background 0.15s;line-height:1.3;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.toc-mobile-item:hover{color:var(--text);background:var(--surface3);}
.toc-mobile-item.active{color:var(--text);font-weight:700;}
.toc-mobile-item.active .toc-mobile-accent{background:var(--toc-color,var(--red));}
.toc-mobile-accent{width:2px;min-height:16px;align-self:stretch;background:var(--border);border-radius:1px;flex-shrink:0;margin-right:10px;transition:background 0.15s;}
.toc-mobile-item.h2{padding-left:24px;}
.toc-mobile-item.h3{padding-left:34px;}
.toc-mobile-item.h4{padding-left:44px;}
.toc-items-wrap{padding-left:0;}
.toc-item{display:flex;align-items:stretch;font-size:clamp(18px,1.1vw,20px);color:var(--text-dim);text-decoration:none;line-height:1.35;transition:color 0.15s;cursor:pointer;border-left:none;padding:0;}
.toc-item:hover .toc-item-text{color:var(--text);}
.toc-item.active .toc-dot{background:var(--toc-color,var(--red));}
.toc-item.active .toc-item-text{color:var(--text);font-weight:600;}
/* dot column — h1/h2: dot centered in 7px col, line below it */
.toc-dot-col{display:flex;flex-direction:column;align-items:center;justify-content:center;width:7px;flex-shrink:0;margin-right:0;}
.toc-dot{width:6px;height:6px;border-radius:1px;background:var(--border-mid);flex-shrink:0;margin-top:0;align-self:center;transition:background 0.15s;}
.toc-dot-col .toc-line{width:1px;background:var(--border-mid);flex:1;min-height:4px;}
.toc-item:last-child .toc-dot-col .toc-line{background:transparent;}
.toc-line-only{width:1px;background:var(--border-mid);flex:1;margin:0 auto;min-height:20px;}
.toc-item.active .toc-line-only{background:var(--toc-color,var(--red));}
.toc-item-text{padding:2px 0 10px 9px;flex:1;}
/* h3/h4 — no dot, left border aligned to dot center (3px = half of 7px col) */
.toc-item.h2,.toc-item.h3,.toc-item.h4{padding-left:16px;}
.toc-item.h3{padding-left:32px;}
.toc-item.h4{padding-left:48px;}
.toc-item.h2 .toc-item-text,.toc-item.h3 .toc-item-text,.toc-item.h4 .toc-item-text{padding:2px 0 5px 8px;font-size:clamp(15px,0.9vw,17px);color:var(--text-dim);border-left:1px solid var(--border-mid);transition:border-color 0.15s,color 0.15s;}
.toc-item.h2:hover .toc-item-text,.toc-item.h3:hover .toc-item-text,.toc-item.h4:hover .toc-item-text{color:var(--text);border-left-color:var(--text-dim);}
.toc-item.active.h2 .toc-item-text,.toc-item.active.h3 .toc-item-text,.toc-item.active.h4 .toc-item-text{color:var(--text);font-weight:600;border-left-color:var(--toc-color,var(--red));}


.toc-progress{display:none;}
.toc-progress-bar{display:none;}
.post-body ol,.rv-body ol,.rich-editor ol{list-style:decimal;}
.post-body li,.rv-body li,.rich-editor li{margin-bottom:5px;line-height:1.75;}
.post-body ul ul,.rv-body ul ul,.rich-editor ul ul,.post-body ol ol,.rv-body ol ol,.rich-editor ol ol,.post-body ul ol,.rv-body ul ol,.rich-editor ul ol,.post-body ol ul,.rv-body ol ul,.rich-editor ol ul{margin:4px 0 4px 20px;}
.post-body strong,.rv-body strong,.rich-editor strong{color:var(--text);font-weight:600;}
.post-body h1,.rv-body h1,.rich-editor h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,2.6vw,40px);letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);margin:40px 0 14px;line-height:1.1;}
.post-body h2,.rv-body h2,.rich-editor h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(22px,2vw,32px);letter-spacing:0.04em;color:var(--text-muted);margin:36px 0 12px;line-height:1.1;}
.post-body h3,.rv-body h3,.rich-editor h3{font-family:'Barlow Condensed',sans-serif;font-size:clamp(13px,1.1vw,16px);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);margin:28px 0 10px;border-bottom:1px solid var(--border);padding-bottom:6px;}
.post-body h4,.rv-body h4,.rich-editor h4{font-family:'Barlow Condensed',sans-serif;font-size:clamp(13px,1vw,15px);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);margin:20px 0 8px;}
.post-body u,.rv-body u,.rich-editor u{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;color:var(--gold);}
.post-body code,.rv-body code,.rich-editor code{font-family:monospace;font-size:13px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;color:var(--gold-light);}
.post-body pre,.rv-body pre,.rich-editor pre{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:14px 16px;overflow-x:auto;margin:16px 0;}
.post-body pre code,.rv-body pre code,.rich-editor pre code{background:none;border:none;padding:0;font-size:13px;color:var(--text-muted);}
.post-body blockquote,.rv-body blockquote,.rich-editor blockquote{border-left:3px solid var(--red);padding:10px 16px;background:rgba(80,110,160,0.12);border-radius:0 4px 4px 0;margin:20px 0;font-style:italic;color:var(--text-muted);}
.post-body a,.rv-body a,.rich-editor a{color:var(--gold-light);text-underline-offset:3px;}
.post-body a:hover,.rv-body a:hover,.rich-editor a:hover{color:var(--text);}
/* Images */
.post-body img,.rv-body img,.rich-editor img{max-width:100%;height:auto;display:block;border-radius:3px;cursor:zoom-in;}

/* Compare Slider */
.compare-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 4px;
  overflow: hidden;
  margin: 24px 0;
  user-select: none;
  cursor: ew-resize;
  background: var(--surface);
  container-type: inline-size;
  container-name: cs;
}
.compare-slider.cs-hint-anim .cs-before,
.compare-slider.cs-hint-anim .cs-handle,
.compare-slider.cs-hint-anim .cs-label-mask {
  transition: left 0.38s ease-in-out, width 0.38s ease-in-out, clip-path 0.38s ease-in-out;
}
.compare-slider .cs-after,
.compare-slider .cs-before {
  position: absolute;
  top: 0; left: 0; height: 100%;
  overflow: hidden;
}
.compare-slider .cs-after { width: 100%; }
.compare-slider .cs-before { border-right: 2px solid #fff; }
.compare-slider .cs-after img,
.compare-slider .cs-before img {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100cqw;
  max-width: none;
  object-fit: contain;
  object-position: center;
  background: #000;
  display: block;
  cursor: ew-resize;
  border-radius: 0;
}
.compare-slider .cs-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-slider .cs-handle-line {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.compare-slider .cs-handle-grip {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  pointer-events: auto;
  cursor: ew-resize;
}
.compare-slider .cs-label-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.compare-slider .cs-label {
  position: absolute;
  bottom: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 2px;
  pointer-events: none;
  white-space: nowrap;
}
.compare-slider .cs-label-before { left: 12px; }
.compare-slider .cs-label-after { right: 12px; }
/* Blend Slider (1-5 image crossfade) */
.blend-slider { width:100%; margin:24px 0; }
.blend-slider .bl-stage { position:relative; width:100%; aspect-ratio:16/10; border-radius:4px; overflow:hidden; background:#000; }
.blend-slider .bl-layer { position:absolute; inset:0; transition:opacity 0.03s linear; }
.blend-slider .bl-layer img { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.blend-slider .bl-controls { padding:14px 2px 0; }
.blend-slider .bl-track-wrap { position:relative; height:18px; }
.blend-slider .bl-track-bg { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:4px; background:var(--border-mid); border-radius:2px; z-index:1; pointer-events:none; }
.blend-slider .bl-track-fill { position:absolute; left:0; top:50%; transform:translateY(-50%); height:4px; width:0%; background:var(--red); border-radius:2px; z-index:2; pointer-events:none; }
.blend-slider .bl-track-dividers { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:4px; z-index:3; pointer-events:none; }
.blend-slider .bl-divider { position:absolute; top:0; bottom:0; width:10px; background:var(--bg2); transform:translateX(-50%); }
.blend-slider .bl-thumb { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:var(--red); transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,0.4); pointer-events:none; z-index:4; }
.blend-slider .bl-range { position:absolute; inset:0; width:100%; height:100%; margin:0; -webkit-appearance:none; appearance:none; background:transparent; outline:none; cursor:pointer; opacity:0; z-index:3; }
.blend-slider .bl-range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; }
.blend-slider .bl-range::-moz-range-thumb { width:18px; height:18px; border:none; }
.blend-slider .bl-ticks { display:grid; gap:12px; margin-top:6px; }
.blend-slider .bl-tick { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-dim); transition:color 0.15s; text-align:center; white-space:normal; line-height:1.3; cursor:pointer; background:none; border:none; padding:0; }
.blend-slider .bl-tick:hover { color:var(--text); }
.blend-slider .bl-tick.active { color:var(--red); }
/* Column layouts */
.post-body .col-2,.rv-body .col-2,.rich-editor .col-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0;width:100%;}
.post-body .col-3,.rv-body .col-3,.rich-editor .col-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin:16px 0;width:100%;}
.post-body .col-cell,.rv-body .col-cell,.rich-editor .col-cell{min-width:0;}
.post-body .col-cell img,.rv-body .col-cell img,.rich-editor .col-cell img{max-width:100%;width:100%;height:auto;object-fit:cover;border-radius:3px;cursor:zoom-in;}
@media(max-width:600px){
.post-body .col-2,.rv-body .col-2,.rich-editor .col-2,.post-body .col-3,.rv-body .col-3,.rich-editor .col-3{grid-template-columns:1fr;}
}
.post-video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:4px;border:1px solid var(--border);margin:24px 0;}
.post-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.detail-video-theater{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;min-height:90vh;overflow:hidden;border-bottom:1px solid var(--border);}
.detail-video-theater-inner{position:relative;width:100%;max-width:none;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:6px;border:1px solid var(--border);}
.detail-video-theater-inner iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.detail-content-below{max-width:1200px;margin:0 auto;padding:0 40px;}
.detail-content-below .post-body{max-width:100%;}
.post-video-caption{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:0.06em;color:var(--text-dim);text-align:center;margin-top:5px;margin-bottom:14px;}
/* NOTE: this rule lost its selector and opening brace in an earlier commit,
   which also stopped the rule after it from parsing. Restored verbatim;
   the class is currently unused anywhere in the site. */
.post-img-placeholder{width:100%;height:150px;border-radius:4px;border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--text-dim);font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;margin:14px 0;}
.post-img-placeholder span{font-size:20px;}
.post-quote{border-left:3px solid var(--gold);padding:12px 14px 12px 16px;background:var(--gold-dim);border-radius:0 4px 4px 0;margin:16px 0;}
.post-quote-text{font-style:italic;font-size:13px;line-height:1.7;color:var(--text);margin-bottom:8px;}
.post-quote-attribution{display:flex;align-items:center;gap:8px;}
.post-quote-avatar{width:22px;height:22px;border-radius:50%;background:var(--surface2);border:1px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-dim);flex-shrink:0;}
.post-quote-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--text);}
.post-quote-handle{font-size:13px;color:var(--gold);text-decoration:none;}
.post-quote-handle:hover{color:var(--gold-light);}
code{font-family:'Courier New',monospace;font-size:13px;color:var(--gold);background:var(--surface2);padding:1px 5px;border-radius:2px;border:1px solid var(--border);}
.detail-game-refs{display:flex;flex-direction:column;gap:4px;}
.detail-game-ref{display:flex;align-items:flex-start;gap:7px;padding:7px 8px;background:var(--surface);border:1px solid var(--border);border-radius:4px;}
.game-ref-icon{width:24px;height:24px;border-radius:2px;background:var(--surface2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;border:1px solid var(--border-mid);overflow:hidden;}
.game-ref-icon img{width:100%;height:100%;object-fit:cover;}
.game-ref-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--text);line-height:1.2;}
.game-ref-note{font-size:13px;color:var(--text-muted);margin-top:2px;font-weight:300;line-height:1.4;}
.detail-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}
.detail-link{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:3px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:border-color 0.15s;line-height:1.3;}
.detail-link svg,.detail-link .svg-icon{flex-shrink:0;}
.detail-link:hover{border-color:var(--gold);background:var(--gold-dim);}


/* ── CALLOUT ── */
.post-body .callout,.rv-body .callout,.rich-editor .callout{display:block;border:1px solid var(--red);padding:12px 16px 12px 40px;background:var(--surface2);border-radius:4px;margin:20px 0;position:relative;}
.post-body .callout::before,.rv-body .callout::before,.rich-editor .callout::before{content:'';position:absolute;left:12px;top:calc(12px + 0.95em);top:calc(12px + 0.5lh);transform:translateY(-50%);width:16px;height:16px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" fill="rgb(232,75,58)"/></svg>') center / contain no-repeat;}