.wd-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:28px 0; }
.wd-card { display:flex; flex-direction:column; background:#1b1a18; border:1px solid #38332b; border-radius:13px; overflow:hidden; text-decoration:none; color:inherit; transition:border-color .15s,transform .15s; }
.wd-card:hover, .wd-card[aria-current] { border-color:#d88638; transform:translateY(-2px); }
.wd-art { height:156px; position:relative; overflow:hidden; }
.wd-art img { width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.wd-art::after { content:''; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#1b1a18); }
.wd-art .ck-badge { position:absolute; z-index:1; left:12px; top:12px; background:#1a1918ee; }
.wd-card-body { display:flex; flex:1; flex-direction:column; padding:4px 18px 18px; }
.wd-card h2 { font-size:1.45rem; margin:8px 0; display:flex; justify-content:space-between; align-items:center; }
.wd-card h2 span { font:normal 1rem sans-serif; color:#d68c42; }
.wd-card p { font-size:.82rem; line-height:1.65; color:#c1bbb0; margin:0 0 18px; }
.wd-card-meta { margin-top:auto; color:#ffbe71; font-size:.7rem; padding-top:12px; border-top:1px solid #36312a; }
.wd-card-meta span { color:#716453; padding:0 6px; }
.wd-detail { border-top:1px solid #765029; padding-top:32px; margin-top:42px; }
.wd-detail-head { display:flex; align-items:center; gap:24px; }
.wd-detail-head img { width:140px; height:130px; object-fit:cover; object-position:center 24%; border-radius:10px; }
.wd-detail-head h2 { font-size:2.8rem; margin:0 0 10px; }
.wd-back,.wd-help-link { color:#ffbe71; font-size:.85rem; }
.wd-overview,.wd-playstyle { max-width:80ch; line-height:1.8; color:#ddd5c8; }
.wd-playstyle { margin-top:24px; background:#211c16; border-left:3px solid #e68a39; padding:18px 22px; }
.wd-playstyle p { margin:0 0 10px; }
.wd-quest-list { border:1px solid #36312a; border-radius:12px; overflow:hidden; }
.wd-quest { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 24px; background:#1b1916; }
.wd-quest+.wd-quest { border-top:1px solid #36312a; }
.wd-quest h4,.wd-districts h4 { font-family:var(--font-display); font-size:1.25rem; color:#f1e9dd; margin:0 0 6px; }
.wd-quest p { color:#b7b1a7; font-size:.9rem; margin:0; line-height:1.6; }
.wd-quest .ck-button { flex-shrink:0; }
.wd-no-guide { font-size:.74rem; max-width:140px; flex-shrink:0; }
.wd-districts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.wd-districts p { color:#b7b1a7; font-size:.85rem; }
.wd-districts dl { margin:16px 0 0; display:flex; gap:28px; }
.wd-districts dt { color:#aaa; font-size:.7rem; }.wd-districts dd { margin:6px 0 0; color:#ffd38a; font-size:1.1rem; }
.wd-skills { border-top:1px solid #38332b; margin:0; }
.wd-skills > div { display:grid; grid-template-columns:minmax(150px,1fr) 3fr; gap:24px; padding:18px 0; border-bottom:1px solid #38332b; }
.wd-skills dt { color:#ffd38a; font-weight:600; font-size:.95rem; }.wd-skills dd { color:#c6bfb5; line-height:1.8; margin:0; font-size:.9rem; }
@media(max-width:1050px) { .wd-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.wd-districts{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:750px) { .wd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.wd-card-body{padding:4px 14px 16px}.wd-art{height:135px}.wd-quest{padding:18px;align-items:flex-start;flex-direction:column;gap:12px}.wd-no-guide{max-width:none}.wd-skills>div{grid-template-columns:1fr;gap:8px}.wd-detail-head h2{font-size:2.2rem}.wd-detail-head img{width:100px;height:110px} }
@media(max-width:420px) { .wd-grid { grid-template-columns:1fr; }.wd-card{display:grid;grid-template-columns:95px 1fr}.wd-art{height:100%;min-height:190px}.wd-art::after{display:none}.wd-art .ck-badge{left:5px;right:5px;top:6px;font-size:.55rem;text-align:center}.wd-card-body{padding:12px}.wd-card h2{margin-top:0}.wd-card p{font-size:.78rem;margin-bottom:10px}.wd-districts{grid-template-columns:1fr}.wd-detail-head{gap:16px} }
/* Race illustrations vary in shape: preserve the full artwork instead of cropping faces. */
.ck-race-directory .wd-art{height:210px;background:radial-gradient(ellipse at center,#2c2925,#101010);padding:8px}
.ck-race-directory .wd-art img{object-fit:contain;object-position:center;height:100%;width:100%}
.ck-race-directory .wd-art::after{display:none}
.ck-race-directory .wd-art .ck-badge{top:auto;bottom:10px;left:10px;right:auto;max-width:calc(100% - 20px)}
.ck-race-directory .wd-detail-head img{object-fit:contain;background:#171614}
@media(max-width:540px){.ck-race-directory .wd-grid{grid-template-columns:1fr}.ck-race-directory .wd-card{display:flex;flex-direction:column}.ck-race-directory .wd-art{height:230px;min-height:0}.ck-race-directory .wd-card-body{padding:16px 20px 20px}.ck-race-directory .wd-card p{font-size:.84rem}.ck-race-directory .wd-card h2{font-size:1.6rem}.ck-race-directory .wd-card-meta{font-size:.76rem}.ck-race-directory .wd-art .ck-badge{font-size:.66rem}}
.wd-availability{align-self:flex-start;margin-top:8px;margin-bottom:6px}

/* Current renderer captures: show the whole landscape at every viewport size. */
.ck-planet-directory .wd-art{height:auto;min-height:0;aspect-ratio:16/9;background:#121916}
.ck-planet-directory .wd-art img{display:block;object-fit:contain;object-position:center}
.ck-planet-directory .wd-art::after{display:none}
.ck-planet-directory .wd-detail-head img{width:320px;max-width:45%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center}
@media(max-width:540px){.ck-planet-directory .wd-grid{grid-template-columns:1fr}.ck-planet-directory .wd-card{display:flex;flex-direction:column}.ck-planet-directory .wd-card-body{padding:14px 18px 18px}.ck-planet-directory .wd-detail-head{align-items:flex-start;flex-direction:column}.ck-planet-directory .wd-detail-head img{width:100%;max-width:none}.ck-planet-directory .wd-art .ck-badge{left:10px;right:auto;top:10px;font-size:.66rem}}

@media(min-width:381px) and (max-width:540px){.ck-planet-directory .cktopnav__burgertext{display:none}.ck-planet-directory .cktopnav__inner{gap:8px;padding-inline:12px}.ck-planet-directory .cktopnav__right{gap:6px}}