.pane-section { padding-bottom: 95px; }
.pane-more { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 520px; margin: 32px auto 0; padding: 20px 24px; background: radial-gradient(ellipse at center, #b1a0e510, transparent 72%); color: #cbc4df; font-size: 15px; font-weight: 450; letter-spacing: -.2px; text-align: center; }
.pane-more-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #b1a0e52b; border-radius: 10px; background: #b1a0e50a; color: var(--accent); }
.pane-more-icon svg { width: 18px; height: 18px; }
.pane-intro { margin-bottom: 28px; }
.pane-intro h2 { font-size: clamp(26px, 2.3vw, 34px); font-weight: 450; line-height: 1.2; letter-spacing: -.9px; }
.pane-intro > p { max-width: 560px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.pane-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 650px 480px 490px auto 670px; grid-template-areas: "map map map map map map map creature creature creature creature creature" "initiative initiative initiative initiative initiative initiative initiative initiative agnostic agnostic agnostic agnostic" "music music music music time time time time loot loot loot loot" "diagrams diagrams diagrams diagrams diagrams diagrams diagrams diagrams diagrams diagrams diagrams diagrams" "sharing sharing sharing sharing sharing sharing sharing sharing sharing sharing sharing sharing"; gap: 20px; }
.pane-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.pane-copy { flex-shrink: 0; padding: 26px 28px 22px; }
.pane-copy h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -.35px; }
.pane-copy h3 svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--accent); }
.pane-copy p { max-width: 430px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.pane-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; }
.pane-actions a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--accent); font-size: 10px; line-height: 1.6; text-underline-offset: 4px; }
.pane-actions a:hover { color: var(--text); text-decoration: underline; }
.pane-actions svg { width: 12px; height: 12px; flex-shrink: 0; }
.pane-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 65%, var(--pane-glow), transparent 78%), var(--pane-surface); }
.pane-stage img { position: absolute; top: 50%; left: 50%; display: block; width: auto; height: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); border-radius: 12px; outline: 1px solid #ffffff14; box-shadow: 0 16px 40px #0006; transform: translate(-50%, -50%); }
.pane-map { grid-area: map; --pane-surface: #20221c; --pane-glow: #5b604035; }
.pane-map img { max-width: min(700px, calc(100% - 48px)); }
.pane-music { grid-area: music; --pane-surface: #201d28; --pane-glow: #78629b30; }
.pane-music img { max-width: min(480px, calc(100% - 48px)); }
.pane-time { grid-area: time; --pane-surface: #1b2227; --pane-glow: #5f879d28; }
.pane-time img { max-width: min(400px, calc(100% - 48px)); }
.pane-initiative { grid-area: initiative; --pane-surface: #211e2b; --pane-glow: #8067b435; }
.pane-initiative img { max-width: min(1100px, calc(100% - 48px)); }
.pane-loot { grid-area: loot; --pane-surface: #25211c; --pane-glow: #a1834528; }
.pane-loot img { max-width: min(360px, calc(100% - 48px)); }
.pane-creature { grid-area: creature; --pane-surface: #251e29; --pane-glow: #9167a32b; }
.pane-agnostic { grid-area: agnostic; --pane-surface: #1e2527; --pane-glow: #56998b25; }
.block-specimens { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(400px, calc(100% - 48px)); transform: translate(-50%, -50%); }
/* Match the document background while keeping native rules inside the rounded frame. */
.block-frame { width: 100%; padding: 10px; border-radius: 12px; background: #1c1c1c; outline: 1px solid #ffffff14; box-shadow: 0 16px 40px #0006; }
.creature-specimen { position: absolute; top: 50%; left: 50%; width: calc(100% - 48px); max-width: 490px; padding: 12px; transform: translate(-50%, -50%); }
.block-frame img { position: static; width: 100%; max-width: 100%; max-height: none; border-radius: 0; outline: 0; box-shadow: none; transform: none; }
.pane-diagrams { grid-area: diagrams; --pane-surface: #211e29; --pane-glow: #8067b430; }
.pane-diagrams .pane-copy p { max-width: 600px; }
.pane-diagrams .pane-stage { flex: none; }
.diagram-specimens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: min(1100px, 100%); margin-inline: auto; padding: 24px; }
.diagram-specimens figure { min-width: 0; margin: 0; }
.diagram-specimens figcaption { margin-bottom: 12px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }
.diagram-specimens img { position: static; width: 100%; max-width: 100%; max-height: none; transform: none; }
.pane-sharing { grid-area: sharing; --pane-surface: #1c2427; --pane-glow: #4a9b8b28; }
.sharing-specimens { position: absolute; top: 50%; left: 50%; width: min(880px, calc(100% - 48px)); aspect-ratio: 1.85; transform: translate(-50%, -50%); }
.sharing-specimens img { max-width: none; max-height: none; transform: none; }
.sharing-specimens .share-dm { top: 0; left: 0; width: 49%; }
.sharing-specimens .share-player { top: auto; right: 0; bottom: 0; left: auto; width: 60%; }

@media (max-width: 1150px) {
  .pane-section { padding-bottom: 75px; }
  .pane-grid { gap: 16px; }
  .pane-copy { padding: 22px 24px 20px; }
}

@media (max-width: 900px) {
  .pane-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 690px 630px 380px 470px 390px 460px 420px auto 670px; grid-template-areas: "map" "creature" "initiative" "agnostic" "music" "time" "loot" "diagrams" "sharing"; }
  .pane-map img { max-width: min(600px, calc(100% - 48px)); }
}

@media (max-width: 600px) {
  .pane-section { padding-bottom: 59px; }
  .pane-intro > p { font-size: 11px; }
  .pane-grid { grid-template-rows: 520px 500px 350px 440px 370px 440px 420px auto min(910px, calc((100vw - 80px) * 2 + 200px)); gap: 16px; }
  .pane-copy { padding: 22px 20px 20px; }
  .pane-copy h3 { font-size: 17px; }
  .pane-stage img { max-width: calc(100% - 40px); max-height: calc(100% - 40px); border-radius: 10px; }
  .block-specimens { width: min(360px, calc(100% - 40px)); gap: 10px; }
  .block-frame { border-radius: 10px; }
  .block-frame img { max-width: 100%; max-height: none; border-radius: 0; }
  .creature-specimen { width: calc(100% - 40px); max-width: 380px; }
  .diagram-specimens { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; }
  .diagram-specimens img { max-width: 100%; max-height: none; }
  .sharing-specimens { width: min(360px, calc(100% - 40px)); aspect-ratio: 1 / 2; }
  .sharing-specimens img { max-width: none; max-height: none; }
  .sharing-specimens .share-dm { width: 80%; }
  .sharing-specimens .share-player { width: 84%; }
}

@media (max-width: 360px) {
  .pane-grid { grid-template-rows: 460px 450px 330px 400px 350px 410px 390px auto min(910px, calc((100vw - 80px) * 2 + 200px)); }
}