/* T078: role crop math assumes a square. Keep art independent of text length. */
#discovery-layer,#skill-info-layer{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#discovery-layer .md-modal,#skill-info-layer .md-modal{--functional-art-size:200px;box-sizing:border-box;flex:none;width:min(calc(100vw - 36px),340px);max-width:340px;max-height:none;margin:auto 0;overflow:visible}
#discovery-layer .md-card,#skill-info-layer .md-card{display:block;max-height:none;flex:none}
#discovery-layer .md-card-head,#skill-info-layer .md-card-head{box-sizing:border-box;flex:none;padding:12px 18px 0;text-align:center;min-width:0}
#discovery-layer .md-heading,#skill-info-layer .md-heading{margin:0;font-size:10px;line-height:15px;letter-spacing:.1em}
#discovery-layer .md-name,#skill-info-layer .md-name{font-size:20px;line-height:1.25;letter-spacing:.025em;margin:4px 0 0;overflow-wrap:anywhere;word-break:normal}
#discovery-layer .md-type,#skill-info-layer .md-type{font-size:10px;line-height:14px;letter-spacing:.04em;margin:4px 0 1px;padding:0 6px 3px;max-width:100%}
#discovery-layer .md-card-content,#skill-info-layer .md-card-content{display:block;min-height:0;overflow:visible;padding:0 14px 2px;flex:none}
#discovery-layer .md-art,#skill-info-layer .md-art{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:auto;height:var(--functional-art-size);min-height:var(--functional-art-size);margin:5px 0 7px;overflow:hidden}
#discovery-layer .md-art>.md-sprite,#skill-info-layer .md-art>.md-sprite{position:relative;box-sizing:border-box;flex:0 0 var(--functional-art-size);width:var(--functional-art-size);height:var(--functional-art-size);min-width:var(--functional-art-size);min-height:var(--functional-art-size);max-width:none;aspect-ratio:1;left:auto;top:auto;margin:0;transform-origin:center 75%}
#discovery-layer .md-art .md-sprite img,#skill-info-layer .md-art .md-sprite img{object-fit:contain}
#discovery-layer .md-description,#skill-info-layer .md-description{box-sizing:border-box;flex:none;min-height:0;max-height:144px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 12px;font-size:13px;line-height:1.55;letter-spacing:0}
#discovery-layer .md-description::before,#skill-info-layer .md-description::before{margin-bottom:6px}
#discovery-layer .md-description p,#skill-info-layer .md-description p{font-size:13px;line-height:1.55;margin:0}
#discovery-layer .md-description .discover-rule,#skill-info-layer .md-description .discover-rule{font-size:11px;line-height:1.5;margin:6px 0 0;padding-top:6px}
#discovery-layer .md-card-foot,#skill-info-layer .md-card-foot{box-sizing:border-box;flex:none;padding:10px 14px 12px}
#discovery-layer .md-collect,#skill-info-layer .md-collect{min-height:44px;font-size:14px;line-height:20px;padding:9px 10px}
#discovery-layer .md-footnote.text-button{min-height:44px;font-size:11px;line-height:16px;margin:4px 0 0;padding:7px 4px}
#skill-info-layer .md-footnote{font-size:10px;line-height:15px;margin:6px 0 0}
#discovery-layer .md-description:focus-visible,#skill-info-layer .md-description:focus-visible{outline:2px solid #e4cf91;outline-offset:2px}
@media(max-height:720px){#discovery-layer .md-modal,#skill-info-layer .md-modal{--functional-art-size:184px}}
@media(max-height:560px){#discovery-layer .md-modal,#skill-info-layer .md-modal{--functional-art-size:148px}#discovery-layer .md-description,#skill-info-layer .md-description{max-height:120px}#discovery-layer .md-card-head,#skill-info-layer .md-card-head{padding-top:10px}}