/* TVCD Portfolio-wereld: stijl voor de [tvcd_world] shortcode. Alles staat onder .tvcd-world. */
.tvcd-world {
  --tw-accent: #f07424;
  --tw-accent-soft: #f7a76c;
  --tw-text: rgba(255,255,255,.74);
  --tw-glass: rgba(255,255,255,.07);
  --tw-line: rgba(255,255,255,.16);
  --tw-font: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  font-family: var(--tw-font); color: var(--tw-text); line-height: 1.6; font-size: 17px;
  max-width: 1200px; margin: 0 auto; padding: 80px 24px;
}
.tvcd-world *, .tvcd-world *::before, .tvcd-world *::after { box-sizing: border-box; }
.tvcd-world h2, .tvcd-world h3, .tvcd-world p, .tvcd-world ul { margin: 0; padding: 0; }
.tvcd-world img { max-width: 100%; display: block; }

/* ---------- kop ---------- */
.tw-head { text-align: center; margin-bottom: 36px; }
.tw-kicker {
  display: inline-block; margin-bottom: 22px; padding: 8px 18px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tw-accent-soft);
  background: color-mix(in srgb, var(--tw-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tw-accent) 55%, transparent);
}
.tw-head h2 { font-size: clamp(34px, 5.5vw, 60px); line-height: 1.08; font-weight: 300; letter-spacing: -.02em; color: #fff; }
.tw-head h2 strong { font-weight: 700; color: var(--tw-accent-soft); }
.tw-head p { max-width: 600px; margin: 18px auto 0; }

/* ---------- werkbalk: filters + weergave ---------- */
.tw-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.tw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-chip, .tw-view {
  font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; text-transform: none; letter-spacing: normal;
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: #fff;
  background: var(--tw-glass); border: 1px solid var(--tw-line); transition: background .2s, border-color .2s, box-shadow .2s;
}
.tw-chip:hover, .tw-view:hover { border-color: var(--tw-accent); }
.tw-chip[aria-pressed="true"] { background: var(--tw-accent); border-color: var(--tw-accent); box-shadow: 0 6px 22px color-mix(in srgb, var(--tw-accent) 45%, transparent); }
.tw-view { background: rgba(36,58,87,.85); border-width: 1.5px; border-color: rgba(255,255,255,.4); }
.tw-chip:focus-visible, .tw-view:focus-visible, .tw-btn:focus-visible, .tw-x:focus-visible { outline: 2px solid var(--tw-accent-soft); outline-offset: 3px; }

/* ---------- podium (de game) ---------- */
.tw-stage {
  position: relative; height: clamp(540px, 78vh, 760px); overflow: hidden;
}
/* geen kader: de ruimte loopt zacht uit in de pagina */
.tw-bgwrap, .tw-stage canvas {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
          mask-composite: intersect;
}
.tw-bgwrap { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.tw-bgwrap.ready { opacity: 1; }
.tw-bg { position: absolute; inset: 0; transform: scale(1.08); transform-origin: 50% 70%; background: linear-gradient(180deg, #07101c, #162d4b) center / cover no-repeat; }
.tw-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,16,28,.55) 0%, rgba(7,16,28,.15) 45%, rgba(7,16,28,.5) 100%); }
.tw-stage.live .tw-bg { animation: tw-drift 70s ease-in-out infinite alternate; }
@keyframes tw-drift { from { transform: scale(1.08); } to { transform: scale(1.16) translate(-1.2%, -0.8%); } }
.tw-welcome { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; pointer-events: none; opacity: 0; }
.tw-welcome span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--tw-accent-soft); margin-bottom: 14px; }
.tw-welcome strong { display: block; font-size: clamp(30px, 6vw, 64px); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; color: #fff; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.tw-welcome strong b { font-weight: 700; color: var(--tw-accent-soft); }
.tw-skip {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
  padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(8,19,31,.6); border: 1px solid var(--tw-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .4s;
}
.tw-stage.intro .tw-skip { opacity: 1; pointer-events: auto; }
.tw-skip:hover { border-color: var(--tw-accent); }
.tw-jump { display: none; position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 78px; height: 78px; border-radius: 50%; font: inherit; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation;
  background: var(--tw-accent); border: 2px solid rgba(255,255,255,.55); box-shadow: 0 10px 30px color-mix(in srgb, var(--tw-accent) 50%, transparent); }
.tw-jump:active { transform: scale(.94); }
@media (pointer: coarse) { .tw-stage.live .tw-jump { display: block; } }
.tw-stage:not(.live) .tw-hud, .tw-stage:not(.live) .tw-hint { opacity: 0; }
.tw-hud { transition: opacity .8s; }
.tw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; outline: none; cursor: pointer; }

.tw-hud { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.tw-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(8,19,31,.72); border: 1px solid var(--tw-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tw-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--tw-accent); box-shadow: 0 0 10px var(--tw-accent); }
.tw-pill i.gem { border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #ffd0a8, var(--tw-accent)); }
.tw-pill b { color: var(--tw-accent-soft); font-variant-numeric: tabular-nums; }

.tw-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 28px); text-align: center;
  padding: 9px 18px; border-radius: 18px; font-size: 13px; color: #fff; pointer-events: none; transition: opacity .6s;
  background: rgba(8,19,31,.72); border: 1px solid var(--tw-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tw-hint kbd { font: inherit; font-size: 12px; font-weight: 700; padding: 2px 7px; margin: 0 1px; border-radius: 6px; background: rgba(255,255,255,.14); border: 1px solid var(--tw-line); }
.tw-hint.gone { opacity: 0; }

.tw-toast {
  position: absolute; top: 14px; right: 14px; max-width: 60%; padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; color: #fff;
  background: var(--tw-accent); box-shadow: 0 10px 30px color-mix(in srgb, var(--tw-accent) 45%, transparent);
  opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s; pointer-events: none;
}
.tw-toast.show { opacity: 1; transform: none; }

.tw-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 500; letter-spacing: .04em; transition: opacity .5s; pointer-events: none; }
.tw-loading.gone { opacity: 0; pointer-events: none; }

.tw-win {
  position: absolute; left: 50%; bottom: 62px; transform: translate(-50%, 20px); width: min(92%, 460px); padding: 22px 24px; text-align: center; border-radius: 22px;
  background: rgba(8,19,31,.9); border: 1px solid var(--tw-accent); box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--tw-accent) 30%, transparent);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tw-win.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tw-win strong { display: block; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.tw-win p { font-size: 15px; margin-bottom: 14px; }

/* ---------- project-kaart (modal) ---------- */
.tw-modal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 18px; background: rgba(5,12,22,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.tw-modal.open { opacity: 1; pointer-events: auto; }
.tw-card {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; width: min(100%, 860px); max-height: 100%; overflow: auto; padding: 28px;
  border-radius: 26px; background: linear-gradient(160deg, #14294a, #0c1b30); border: 1px solid var(--tw-line); box-shadow: 0 40px 90px rgba(0,0,0,.55);
  transform: translateY(20px) scale(.97); transition: transform .35s ease;
}
.tw-modal.open .tw-card { transform: none; }
.tw-card-img { display: grid; place-items: center; padding: 14px; border-radius: 20px; background: radial-gradient(circle at 50% 40%, rgba(240,116,36,.18), transparent 70%), rgba(255,255,255,.04); border: 1px solid var(--tw-line); }
.tw-card-img img { width: 100%; max-height: 360px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.tw-card h3 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -.015em; color: #fff; margin: 12px 0 12px; }
.tw-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-tags span { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; color: var(--tw-accent-soft); background: color-mix(in srgb, var(--tw-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tw-accent) 45%, transparent); }
.tw-card p { color: var(--tw-text); }
.tw-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tw-btn {
  display: inline-block; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; text-decoration: none !important; text-transform: none; letter-spacing: normal;
  padding: 15px 30px; border-radius: 999px; font-size: 16px; font-weight: 600; color: #fff !important; background: var(--tw-accent); border: 1.5px solid var(--tw-accent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--tw-accent) 45%, transparent); transition: transform .2s, box-shadow .2s;
}
.tw-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 38px color-mix(in srgb, var(--tw-accent) 60%, transparent); }
.tw-btn.ghost { background: rgba(36,58,87,.85); border-color: rgba(255,255,255,.4); box-shadow: none; }
.tw-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: #fff; background: var(--tw-glass); border: 1px solid var(--tw-line); }
.tw-x:hover { border-color: var(--tw-accent); }

/* ---------- lijstweergave (ook de fallback zonder JavaScript) ---------- */
.tw-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; }
.tw-list li[hidden] { display: none; }
.tw-list a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none !important; color: inherit; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid var(--tw-line); box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transition: transform .3s, border-color .3s;
}
.tw-list a:hover { transform: translateY(-5px); border-color: var(--tw-accent); }
.tw-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 16px; background: radial-gradient(circle at 50% 45%, rgba(240,116,36,.16), transparent 70%); }
.tw-li-body { display: block; padding: 4px 20px 20px; }
.tw-li-body strong { display: block; font-size: 19px; font-weight: 600; color: #fff; line-height: 1.25; }
.tw-li-body small { display: block; margin-top: 4px; font-size: 13px; color: var(--tw-accent-soft); }

.tvcd-world .tw-head h2 { color: #fff !important; font-family: var(--tw-font) !important; }
.tvcd-world .tw-head h2 strong { color: var(--tw-accent-soft) !important; }
.tvcd-world .tw-card h3, .tvcd-world .tw-win strong, .tvcd-world .tw-li-body strong { color: #fff !important; font-family: var(--tw-font) !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* JS aan: spel tonen en lijst alleen op verzoek. JS uit: alleen de lijst. */
.tvcd-world:not(.js) .tw-stage, .tvcd-world:not(.js) .tw-toolbar { display: none; }
.tvcd-world.js .tw-list { display: none; }
.tvcd-world.js.show-list .tw-list { display: grid; }
.tvcd-world.js.show-list .tw-stage { display: none; }

@media (max-width: 760px) {
  .tvcd-world { padding: 56px 14px; font-size: 16px; }
  .tw-stage { height: clamp(500px, 80vh, 680px); }
  .tw-card { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .tw-card-img img { max-height: 220px; }
  .tw-toast { max-width: calc(100% - 28px); top: 58px; }
}
@media (prefers-reduced-motion: reduce) { .tw-stage.live .tw-bg { animation: none; } .tw-modal, .tw-card, .tw-toast, .tw-win, .tw-hint, .tw-list a { transition: none; } }

/* ---------- VOLLEDIGE PAGINA (class "is-page"): de wereld vult het hele scherm ---------- */
.tvcd-world.is-page { --tw-gap: 40px; box-sizing: border-box; max-width: none; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: var(--tw-gap) 0 0 0 !important; position: relative; height: calc(100vh - var(--tw-header, 0px)); height: calc(100svh - var(--tw-header, 0px)); min-height: 560px; overflow: hidden; }
.is-page .tw-stage { position: absolute; inset: var(--tw-gap) 0 0 0; height: auto; }
.is-page .tw-bgwrap, .is-page .tw-stage canvas { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70px); mask-image: linear-gradient(to bottom, transparent, #000 70px); -webkit-mask-composite: source-over; mask-composite: add; }
.is-page .tw-bg::after { background: linear-gradient(180deg, rgba(7,16,28,.72) 0%, rgba(7,16,28,.08) 30%, rgba(7,16,28,.08) 68%, rgba(7,16,28,.65) 100%); }
.is-page .tw-head { position: absolute; z-index: 4; top: calc(var(--tw-gap) + 18px); left: 22px; margin: 0; text-align: left; pointer-events: none; }
.is-page .tw-head .tw-kicker { margin-bottom: 8px; padding: 5px 12px; font-size: 11px; }
.is-page .tw-head h2 { font-size: 26px; line-height: 1.15; }
.is-page .tw-head p { display: none; }
.is-page .tw-chip, .is-page .tw-view { padding: 8px 14px; font-size: 13px; }
.is-page .tw-toolbar { flex-wrap: nowrap; gap: 10px; }
.is-page .tw-view { flex: none; white-space: nowrap; }
.is-page .tw-toolbar { position: absolute; z-index: 4; top: calc(var(--tw-gap) + 18px); right: 22px; margin: 0; max-width: calc(100% - 340px); justify-content: flex-end; }
.is-page .tw-hud { top: 104px; left: 22px; }
.is-page .tw-toast { top: 104px; right: 22px; }
.is-page .tw-skip { right: 22px; bottom: 22px; }
.tvcd-world.is-page.js.show-list .tw-stage { display: block; }
.is-page.show-list .tw-stage canvas, .is-page.show-list .tw-hud, .is-page.show-list .tw-hint, .is-page.show-list .tw-welcome, .is-page.show-list .tw-skip { display: none; }
.is-page .tw-list { position: absolute; inset: calc(var(--tw-gap) + 100px) 0 0 0; z-index: 3; overflow: auto; padding: 8px max(22px, 5vw) 60px; align-content: start; }
.is-page:not(.js) { height: auto; min-height: 100vh; overflow: visible; padding: 60px 5vw; background: #08131f; }
.is-page:not(.js) .tw-head { position: static; text-align: center; margin-bottom: 30px; }
.is-page:not(.js) .tw-head p { display: block; }
.is-page:not(.js) .tw-list { position: static; padding: 0; }
@media (max-width: 760px) {
  .tvcd-world.is-page { min-height: 520px; }
  .is-page .tw-head { display: none; }
  .is-page .tw-toolbar { left: 12px; right: 12px; top: calc(var(--tw-gap) + 12px); max-width: none; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .is-page .tw-toolbar::-webkit-scrollbar { display: none; }
  .is-page .tw-chips { flex-wrap: nowrap; }
  .is-page .tw-chip, .is-page .tw-view { white-space: nowrap; flex: none; }
  .is-page .tw-hud { top: 64px; left: 12px; }
  .is-page .tw-toast { top: 64px; right: 12px; max-width: calc(100% - 24px); }
  .is-page .tw-list { inset: calc(var(--tw-gap) + 64px) 0 0 0; padding: 8px 14px 40px; }
  .is-page .tw-skip { right: 12px; bottom: 14px; }
}

/* ---------- DONKERE ACHTERGROND, ook op sites met een witte pagina ---------- */
.tvcd-world { background: #08131f; }
html.tvcd-world-page, html.tvcd-world-page body, html.tvcd-world-page #page-container, html.tvcd-world-page #et-main-area,
html.tvcd-world-page #main-content, html.tvcd-world-page .et-l, html.tvcd-world-page #content, html.tvcd-world-page .site-content,
html.tvcd-world-page main, html.tvcd-world-page .entry-content { background: #08131f !important; }
html.tvcd-world-page, html.tvcd-world-page body { overflow-x: hidden; }
html.tvcd-world-page #main-content .container::before { display: none; }
html.tvcd-world-page #main-content .container, html.tvcd-world-page .et_pb_section { padding-top: 0; padding-bottom: 0; }