/* Game scenes stay behind the working surfaces, in both themes. */
body { isolation:isolate; }
body::before { content:""; position:fixed; inset:-20px; z-index:-2; pointer-events:none; background:var(--page-scene,url('/assets/exploration.jpg')) center/cover no-repeat; filter:blur(7px); opacity:.27; }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(16,27,23,.28),rgba(16,27,23,.8)); }
.theme-light body::before { opacity:.2; }
.theme-light body::after { background:linear-gradient(180deg,rgba(247,249,240,.3),rgba(247,249,240,.88)); }
body[data-scene="combat"] { --page-scene:url('/assets/combat.jpg'); }
body[data-scene="camp"] { --page-scene:url('/assets/camp.jpg'); }
body[data-scene="world"] { --page-scene:url('/assets/exploration.jpg'); }
body[data-scene="party"] { --page-scene:url('/assets/hero.jpg'); }
.tools-grid.tools-checklist-only { grid-template-columns:minmax(0,1fr); }
.media-section h2 { font-size:clamp(2rem,4vw,3.5rem); }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.video-card { min-width:0; padding:14px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.video-card h3 { margin:18px 0 8px; font-size:1.1rem; line-height:1.4; }
.video-card p,.video-card a { font-size:.875rem; }
.video-card p { color:var(--muted); margin-bottom:8px; }
.video-card a { text-decoration:underline; text-underline-offset:4px; }
.video-player { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0e1713; }
.video-player img { width:100%; height:100%; object-fit:cover; opacity:.7; }
.video-player button { position:absolute; inset:0; width:100%; border:0; border-radius:0; background:linear-gradient(0deg,#0008,#0000); color:#fff; display:grid; place-content:center; gap:8px; padding:16px; font-weight:700; cursor:pointer; }
.video-player button:hover { background:#0005; }
.video-player .video-play-icon { font-size:2rem; line-height:1; }
.video-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.media-source { color:var(--muted); font-size:.875rem; }
.database-check { padding:16px 20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); margin:0 0 24px; }
.database-check p { margin:0 0 6px; font-size:.875rem; }
.database-check p:last-child { margin:0; }
.database-check a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:900px) { .video-grid { grid-template-columns:1fr; } .video-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 20px; } .video-player { grid-row:1 / 5; align-self:center; } }
@media(max-width:540px) { .video-card { display:block; } }