/* Detail, utility, and reading surfaces for the personal world. */

/* Dark detail shell used by media, series, search, and utility pages. */
.vlado-world .page-head {
  position: relative;
  margin: 0;
  padding: 72px 5vw 42px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 78% 20%, rgb(99 220 227 / 10%), transparent 34%), #0d1115;
}
.vlado-world .page-head__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 42px; align-items: end; margin-top: 38px; }
.vlado-world .page-head h1 { max-width: 1000px; margin: 8px 0 0; color: #fff; font: 500 clamp(42px, 6vw, 88px)/.9 var(--display); letter-spacing: -.065em; }
.vlado-world .page-head__lede { max-width: 650px; color: #bec5c0; font-size: 15px; line-height: 1.7; }
.vlado-world .meta-box { display: flex; border: 1px solid var(--line); background: rgb(9 11 15 / 55%); }
.vlado-world .meta-box > div { min-width: 110px; padding: 17px; border-right: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.vlado-world .meta-box > div:last-child { border-right: 0; }
.vlado-world .meta-box .v { margin-top: 12px; color: #fff; font: 500 22px var(--display); letter-spacing: -.04em; }

/* Media detail views */
.vlado-world .album-hero, .vlado-world .release-hero { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: center; margin: 0 !important; padding: 70px 5vw; border-bottom: 1px solid var(--line); background: #0b0e12; }
.vlado-world .album-hero__cover, .vlado-world .release-hero__cover { overflow: hidden; border: 1px solid var(--line); border-radius: 0 !important; background: #151a20; }
.vlado-world .album-hero__cover { aspect-ratio: 1; }
.vlado-world .video-release-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.vlado-world .video-release-hero .release-hero__cover { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
.vlado-world .release-hero > * { min-width: 0; }
.vlado-world .album-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.world-detail.media-detail .site-main{background:#f0f0ea;color:#121516}
.world-detail .album-detail__back-row{display:flex;align-items:center;justify-content:space-between;min-height:58px;margin:0!important;padding:0 4vw!important;border-bottom:1px solid #12151626;background:#f0f0ea;font:9px var(--mono);letter-spacing:.09em;text-transform:uppercase}
.world-detail .album-detail__back-row a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:#121516;text-decoration:none}
.world-detail .album-detail__route{max-width:48vw;overflow:hidden;color:#5b615e;text-overflow:ellipsis;white-space:nowrap}
.world-detail .album-detail__record{grid-template-columns:320px minmax(0,760px);justify-content:center;align-items:start;padding:70px 4vw;background:#f0f0ea}
.world-detail .album-detail__record .album-hero__cover{border-color:#12151626;background:#e4e4dc}
.world-detail .album-detail__record.album-hero h1{margin:18px 0 30px!important;color:#121516!important;font:500 clamp(32px,4vw,52px)/1.08 var(--display)!important;letter-spacing:-.07em!important}
.world-detail .album-detail__lede{max-width:680px;color:#252a28;font:22px/1.5 var(--display)}
.world-detail .album-detail__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:36px 0 0;border:1px solid #12151626}
.world-detail .album-detail__meta>div{min-height:78px;padding:14px;border-right:1px solid #12151626;border-bottom:1px solid #12151626}
.world-detail .album-detail__meta dt{color:#5b615e;font:8px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.world-detail .album-detail__meta dd{margin:14px 0 0;color:#121516;font:500 13px var(--display)}
.world-detail .album-detail .gallery-grid figure{border-color:#12151626;background:#e4e4dc}
.world-detail .album-detail__missing{height:300px;margin:0 5vw 70px}
.world-detail .album-detail__missing .media-missing{color:#5b615e;background:repeating-linear-gradient(135deg,#e4e4dc,#e4e4dc 12px,#dadad2 12px,#dadad2 24px)}
.world-detail .album-detail__missing .media-missing__signal{border-color:#12151626;color:#414744}
.vlado-world .release-hero h1, .vlado-world .album-hero h1 { margin: 12px 0 0 !important; color: #fff !important; font: 500 clamp(32px, 4vw, 52px)/1.08 var(--display) !important; letter-spacing: -.06em !important; text-transform: none !important; }
.vlado-world .hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.vlado-world .stat { min-height: 86px; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vlado-world .stat .k { color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.vlado-world .stat .v { margin-top: 18px; color: #fff; font: 500 13px var(--sans); }
.vlado-world .video-embed, .vlado-world .video-player { position: relative; width:100%; height:100%; aspect-ratio: 16 / 9; background:#090c0f; }
.vlado-world .video-embed iframe, .vlado-world .video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlado-world .video-player__state{position:absolute;z-index:2;inset:0;display:grid;place-content:center;justify-items:center;padding:28px;background:rgb(9 12 15 / 94%);color:#ccd2ce;text-align:center}
.vlado-world .video-player__state[hidden]{display:none}
.vlado-world .video-player__icon{display:grid;place-items:center;width:72px;height:72px;margin-bottom:18px;border:1px solid var(--amber);color:var(--amber);font:26px var(--mono)}
.vlado-world .video-player__title{font:500 18px var(--display);text-transform:uppercase}
.vlado-world .video-player__copy{max-width:470px;margin:12px 0 0;color:#aab2ad;font:12px/1.6 var(--display)}
.vlado-world .video-player__actions{display:flex;justify-content:center;gap:8px;margin-top:20px}
.vlado-world .video-player__spinner{display:block;width:28px;height:28px;border:2px solid #ffffff24;border-top-color:var(--amber);border-radius:50%;animation:video-player-spin .8s linear infinite}
@keyframes video-player-spin{to{transform:rotate(360deg)}}
.vlado-world .gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 60px 5vw !important; }
.vlado-world .gallery-grid figure { position: relative; min-height: 280px; margin: 0; overflow: hidden; border: 1px solid var(--line); background: #14191e; }
.vlado-world .gallery-grid .attachment-gallery__link { position: absolute; z-index: 0; inset: 0; display: block; color: inherit; text-decoration: none; }
.vlado-world .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vlado-world .gallery-grid figure:hover img { transform: scale(1.03); }
.vlado-world .gallery-grid .media-card__tag { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 4px 8px; color: #fff; background: rgb(9 11 15 / 78%); }
.vlado-world .gallery-grid figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 16px; color: #fff; background: linear-gradient(0deg, #090b0ff0, transparent); font-size: 12px; }
.vlado-world .site-main > .article, .vlado-world .site-main > .comments { max-width: 860px; margin-right: auto !important; margin-left: auto !important; }
.vlado-world .article { padding: 56px 5vw; }
.vlado-world .article__prose { color: #c8ceca; font-size: 16px; line-height: 1.8; }
.vlado-world .article__prose h2, .vlado-world .article__prose h3 { margin-top: 2em; color: #fff; font-family: var(--display); letter-spacing: -.04em; }
.vlado-world .article__prose a { color: var(--cyan); }

/* Playlog detail layout */
.vlado-world .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 50px; margin: 0 !important; padding: 60px 5vw; }
.vlado-world .soft-card, .vlado-world .side-card { padding: 24px; border: 1px solid var(--line); color: #c8ceca; background: #101419; }
.vlado-world .side-card { align-self: start; }
.vlado-world .side-card__media { margin: -24px -24px 24px; overflow: hidden; }
.vlado-world .side-card__media img { display: block; width: 100%; }

/* Domain-specific detail components previously owned by the retired theme. */
.vlado-world .review-dossier { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; margin: 0 0 28px; padding: 18px; }
.vlado-world .review-dossier:has(.review-dossier__cover) { grid-template-columns: 120px minmax(0, 1fr); }
.vlado-world .review-dossier__cover { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: #151a20; }
.vlado-world .review-dossier__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vlado-world .review-dossier__body { display: grid; min-width: 0; gap: 10px; }
.vlado-world .review-dossier__body h2 { margin: 0; color: #fff; font: 500 clamp(22px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -.04em; }
.vlado-world .review-dossier__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vlado-world .review-dossier__stats .stat { min-width: 0; padding: 10px 12px; }
.vlado-world .game-card__recent { margin-left: .35em; color: var(--lime); font-weight: 600; }
.vlado-world .playtime-sparkline { margin-bottom: 18px; }
.vlado-world .playtime-sparkline__lede { margin: 6px 0 14px; color: #aeb5b0; font-size: 14px; }
.vlado-world .playtime-sparkline__stats { margin-bottom: 12px; }
.vlado-world .playtime-sparkline__chart { display: block; margin: 4px 0 8px; color: var(--lime); }
.vlado-world .playtime-sparkline__axis { display: flex; justify-content: space-between; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.vlado-world .verdict-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 999px; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.vlado-world .verdict-badge--sm { padding: 4px 8px; font-size: 9px; }
.vlado-world .verdict-badge--lg { padding: 9px 18px; }
.vlado-world .verdict-badge--green { color: #7ee39c; background: rgb(74 222 128 / 8%); }
.vlado-world .verdict-badge--cyan { color: var(--cyan); background: rgb(99 220 227 / 8%); }
.vlado-world .verdict-badge--amber { color: var(--amber); background: rgb(255 186 91 / 8%); }
.vlado-world .verdict-badge--red { color: #ff8c8c; background: rgb(255 100 100 / 8%); }
.vlado-world .verdict-badge--dim { color: var(--muted); background: rgb(255 255 255 / 4%); }
.vlado-world .fv1-comment-shell .comment-quote-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.vlado-world .fv1-comment-shell .comment-quote-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.vlado-world .fv1-comment-shell trix-toolbar { border-color: var(--line); color: #fff; background: #151a20; }

/* Approved quiet paper treatment for articles and individual game records. */
.world-detail .site-main { min-height: calc(100vh - var(--header)); padding-right: 0 !important; padding-bottom: 100px !important; background: #f0f0ea; color: #121516; }
.world-detail .site-main > .page-head { padding: 58px 4vw 54px; border-bottom: 1px solid #12151626; background: #f0f0ea; }
.world-detail .page-head h1 { max-width: 1100px; color: #121516; font: 500 clamp(32px, 4vw, 52px)/1.08 var(--display); letter-spacing: -.07em; text-transform: none; }
.world-detail .breadcrumb, .world-detail .eyebrow { color: #5b615e; }
.world-detail .meta-box { border-color: #12151626; color: #121516; background: transparent; }
.world-detail .meta-box > div { border-color: #12151626; color: #5b615e; }
.world-detail .meta-box .v { color: #121516; }
.world-detail .article-cover { max-width: 1100px; margin: 60px auto 0 !important; padding: 0 4vw; }
.world-detail .article-cover img { display: block; width: 100%; max-height: 620px; object-fit: cover; }
.world-detail .review-media-missing{height:300px}
.world-detail .review-media-missing .media-missing{color:#5b615e;background:repeating-linear-gradient(135deg,#e4e4dc,#e4e4dc 12px,#dadad2 12px,#dadad2 24px)}
.world-detail .review-media-missing .media-missing__signal{border-color:#12151626;color:#414744}
.world-detail .article { max-width: 760px; padding-top: 70px; }
.world-detail .article__prose, .world-detail .article__prose p { color: #303534; font: 17px/1.85 Georgia, serif; }
.world-detail .article__prose h2, .world-detail .article__prose h3 { color: #121516; font-family: var(--display); letter-spacing: -.045em; }
.world-detail .blog-layout { max-width: 1160px; margin-right: auto !important; margin-left: auto !important; padding-top: 70px; }
.world-detail .section-head h2, .world-detail .comments h2, .world-detail .side-card h2 { color: #121516; }
.world-detail .soft-card, .world-detail .side-card { border-color: #12151624; color: #303534; background: #e7e7e0; }
.world-detail .review-dossier__body h2 { color: #121516; }
.world-detail .playtime-sparkline__lede { color: #505653; }
.world-detail .playtime-sparkline__chart { color: #397a30; }
.world-detail .playtime-sparkline__axis { color: #5b615e; }
.world-detail .stat { border-color: #12151624; }
.world-detail .stat .k { color: #5b615e; }
.world-detail .stat .v { color: #121516; }
.world-detail .comments { border-color: #12151626; }
.world-detail .fv1-comment-shell div[id^="comment-"] { border-color: #12151626; border-left-color: #26767a; color: #121516; background: #e7e7e0; }
.world-detail .fv1-comment-shell div[id^="comment-"] img { border-color: #12151626; background: #f0f0ea; }
.world-detail .fv1-comment-shell .comment-body,
.world-detail .fv1-comment-shell .text-gray-700,
.world-detail .fv1-comment-shell .text-gray-600,
.world-detail .fv1-comment-shell .text-gray-500,
.world-detail .fv1-comment-shell .comment-section__empty p { color: #505653; }
.world-detail .fv1-comment-shell .comment-body a { color: #176b70; }
.world-detail .fv1-comment-shell .comment-form { border-color: #12151626; background: #e7e7e0; }
.world-detail .comment-form__input, .world-detail .comment-rich-text { border-color: #12151642; color: #121516; background: #fff; }
.world-detail .comment-form__label { color: #505653; }
.world-detail .btn { border-color: #12151642; color: #121516; background: transparent; }
.world-detail .fv1-comment-shell .comment-quote-btn { border-color: #12151642; color: #4b514e; }
.world-detail .fv1-comment-shell trix-toolbar { border-color: #12151642; color: #121516; background: #e7e7e0; }
.world-detail .fv1-footer { display: none; }

/* Blog article detail only. Reviews intentionally retain their existing structure. */
.world-detail .blog-article {
  --article-ink: #121516;
  --article-muted: #5b615e;
  --article-rule: rgb(18 21 22 / 20%);
  color: var(--article-ink);
}
.world-detail .blog-article__back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 4vw;
  border-bottom: 1px solid var(--article-rule);
  font: 9px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.world-detail .blog-article__back-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 9px;
  color: var(--article-ink);
  text-decoration: none;
}
.world-detail .blog-article__back-row a:hover { color: #176b70; }
.world-detail .blog-article__route {
  max-width: 48vw;
  overflow: hidden;
  color: var(--article-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-detail .blog-article__reader {
  display: grid;
  grid-template-columns: 170px minmax(0, 760px) 260px;
  justify-content: center;
  gap: 55px;
  padding: 80px 4vw 100px;
}
.world-detail .blog-article__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 7px;
  color: var(--article-muted);
  font: 9px/1.35 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.world-detail .blog-article__view { margin-top: 22px; }
.world-detail .blog-article__header h1 {
  margin: 0;
  color: var(--article-ink);
  font: 500 clamp(32px, 4vw, 52px)/1.08 var(--display);
  letter-spacing: -.07em;
  text-wrap: balance;
}
.world-detail .blog-article__standfirst {
  max-width: 720px;
  margin: 42px 0 0;
  color: #252a28;
  font: 24px/1.45 Georgia, serif;
}
.world-detail .blog-article__cover {
  margin: 54px 0 0;
}
.world-detail .blog-article__cover img {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}
.world-detail .blog-article .article__prose {
  margin-top: 28px;
  color: #303534;
  font: 17px/1.85 Georgia, serif;
}
.world-detail .blog-article__standfirst + .article__prose { margin-top: 28px; }
.world-detail .blog-article .article__prose > :first-child { margin-top: 0; }
.world-detail .blog-article .article__prose h2,
.world-detail .blog-article .article__prose h3 {
  color: var(--article-ink);
  font-family: var(--display);
  letter-spacing: -.045em;
}
.world-detail .blog-article .article__prose a { color: #176b70; }

.world-detail .blog-article__after-reading {
  padding-top: 72px;
  border-top: 1px solid var(--article-rule);
}
.world-detail .blog-article__after-reading > .section { margin-top: 0 !important; }
.world-detail .related-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.world-detail .blog-article__after-reading > .comments {
  margin-top: 72px !important;
  padding-top: 52px;
  border-top: 1px solid var(--article-rule);
}

@media (max-width: 900px) {
  .vlado-world .album-hero, .vlado-world .release-hero, .vlado-world .blog-layout { grid-template-columns: 1fr; }
  .vlado-world .album-hero__cover { max-width: 520px; }
  .vlado-world .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-detail .blog-article__reader { grid-template-columns: 110px minmax(0, 1fr); }
  .world-detail .related-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-detail .album-detail__record{grid-template-columns:240px minmax(0,1fr)}

}
@media (max-width: 760px) {
  .vlado-world .page-head { padding: 48px 22px 34px; }
  .vlado-world .page-head__top { grid-template-columns: 1fr; }
  .vlado-world .meta-box { display: none; }
  .vlado-world .album-hero, .vlado-world .release-hero { padding: 46px 22px; }
  .vlado-world .video-player__state{padding:10px}
  .vlado-world .video-player__icon{width:36px;height:36px;margin-bottom:6px;font-size:16px}
  .vlado-world .video-player__copy{margin-top:4px;font-size:10px;line-height:1.45}
  .vlado-world .video-player__actions{margin-top:8px}
  .vlado-world .gallery-grid { grid-template-columns: 1fr; margin: 36px 18px !important; }
  .vlado-world .gallery-grid figure { min-height: 260px; }
  .vlado-world .blog-layout { padding: 45px 22px; }
  .world-detail .site-main > .page-head { padding: 42px 22px; }
  .world-detail .article, .world-detail .blog-layout { padding: 50px 22px 0; }
  .world-detail .blog-article__back-row { min-height: 54px; padding: 0 18px; }
  .world-detail .album-detail__back-row{min-height:54px;padding:0 18px!important}
  .world-detail .album-detail__route{display:none}
  .world-detail .album-detail__record{grid-template-columns:1fr;padding:42px 20px 54px}
  .world-detail .album-detail__record .album-hero__cover{max-width:210px}
  .world-detail .album-detail__record.album-hero h1{font-size:32px!important}
  .world-detail .album-detail__meta{grid-template-columns:1fr 1fr}
  .world-detail .blog-article__route { display: none; }
  .world-detail .blog-article__reader {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px 22px 72px;
  }
  .world-detail .blog-article__meta {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 8px 18px;
    padding: 0;
  }
  .world-detail .blog-article__view { grid-column: 1 / -1; margin-top: 7px; }
  .world-detail .blog-article__header h1 { font-size: clamp(30px, 8vw, 38px); line-height: 1.08; }
  .world-detail .blog-article__standfirst { margin-top: 34px; font-size: 21px; line-height: 1.45; }
  .world-detail .blog-article .article__prose { font-size: 17px; line-height: 1.78; }

  .world-detail .blog-article__after-reading { padding-top: 52px; }
  .world-detail .related-post-grid { grid-template-columns: 1fr; }
  .world-detail .blog-article__after-reading > .comments { margin-top: 52px !important; padding-top: 42px; }
  .vlado-world .review-dossier:has(.review-dossier__cover) { grid-template-columns: 1fr; }
  .vlado-world .review-dossier__cover { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .vlado-world .video-player__spinner { animation: none; }
}